codeit-bootcamp-frontend · addiescode-sj · Aug 6, 2025 · Sep 3, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,13 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
 
 # testing
 /coverage
@@ -23,9 +29,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel

diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started
 
@@ -16,13 +17,11 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
 
@@ -31,10 +30,14 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import "@/styles/reset.css";
+import "@/styles/globals.css";
+import Header from "@/components/Header";
+import nanumSquare from "@/assets/fonts/NanumSquare/nanumSquare";
+
+export const metadata: Metadata = {
+  title: "간편한 투두리스트 - Do it",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <body className={`${nanumSquare.className} bg-gray-50`}>
+        <Header />
+        <div className="my-6 md:w-full lg:w-[1200px] lg:mx-auto">
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import AddTodoForm from "@/components/AddTodoForm";
+import ItemList from "@/components/ItemList";
+import { Item } from "@/types/todo";
+import { BASE_URL, TENANT_ID } from "@/constants/constants";
+import axios from "@/lib/axios";
+
+export default function Home() {
+  const [items, setItems] = useState<Item[]>([]);
+
+  const handleChange = (updatedItem: Item) => {
+    setItems((prev) =>
+      prev.map((item) => (item.id === updatedItem.id ? updatedItem : item))
+    );
+  };
+
+  const fetchTodos = async () => {
+    const res = await axios.get(`${BASE_URL}/${TENANT_ID}/items`);
+    const results = res.data;
+
+    setItems(results);
+  };
+
+  const todos = items.filter((i) => !i.isCompleted);
+  const dones = items.filter((i) => i.isCompleted);
+
+  useEffect(() => {
+    fetchTodos();
+  }, []);
+
+  return (
+    <>
+      <AddTodoForm onAddTodo={fetchTodos} />
+      <div className="flex gap-6 mt-10">
+        <ItemList.Todo items={todos} onClick={handleChange} />
+        <ItemList.Done items={dones} onClick={handleChange} />
+      </div>
+    </>
+  );
+}
diff --git a/assets/fonts/HSSantokki/HSSantokki-Regular.ttf b/assets/fonts/HSSantokki/HSSantokki-Regular.ttf
diff --git a/assets/fonts/HSSantokki/santokki.ts b/assets/fonts/HSSantokki/santokki.ts
@@ -0,0 +1,15 @@
+import localFont from "next/font/local";
+
+const santokki = localFont({
+  src: [
+    {
+      path: "./HSSantokki-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+  ],
+  variable: "--font-santokki",
+  display: "swap",
+});
+
+export default santokki;
diff --git a/assets/fonts/NanumSquare/NanumSquareB.woff b/assets/fonts/NanumSquare/NanumSquareB.woff
diff --git a/assets/fonts/NanumSquare/NanumSquareR.woff b/assets/fonts/NanumSquare/NanumSquareR.woff
diff --git a/assets/fonts/NanumSquare/nanumSquare.ts b/assets/fonts/NanumSquare/nanumSquare.ts
@@ -0,0 +1,20 @@
+import localFont from "next/font/local";
+
+const nanumSquare = localFont({
+  src: [
+    {
+      path: "./NanumSquareR.woff",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./NanumSquareB.woff",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+  variable: "--font-nanumSquare",
+  display: "swap",
+});
+
+export default nanumSquare;
diff --git a/components/AddTodoForm/index.tsx b/components/AddTodoForm/index.tsx
@@ -0,0 +1,51 @@
+import { FormEvent, useState } from "react";
+import Image from "next/image";
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import FormControl from "@/components/FormControl";
+import { TENANT_ID } from "@/constants/constants";
+import axios from "@/lib/axios";
+
+interface AddTodoFormProps {
+  onAddTodo: () => void;
+}
+
+const AddTodoForm = ({ onAddTodo }: AddTodoFormProps) => {
+  const [value, setValue] = useState("");
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    const newTodo = { name: value };
+
+    await axios.post(`/${TENANT_ID}/items`, newTodo);
+
+    onAddTodo();
+    setValue("");
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl>
+        <Input
+          id="todoInput"
+          value={value}
+          placeholder="할 일을 입력해주세요"
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <Button variant="primary" disabled={!value}>
+          <Image
+            src={`images/ico-plus-${value ? "wt" : "bk"}.svg`}
+            alt=""
+            width="16"
+            height="16"
+            className="mr-1"
+          />
+          추가하기
+        </Button>
+      </FormControl>
+    </form>
+  );
+};
+
+export default AddTodoForm;
diff --git a/components/Badge/index.tsx b/components/Badge/index.tsx
@@ -0,0 +1,27 @@
+import santokki from "@/assets/fonts/HSSantokki/santokki";
+
+interface BadgeProps {
+  text: string;
+  variant?: "todo" | "done";
+}
+
+const baseBadgeStyle = `${santokki.className} text-lg px-[28px] py-2 rounded-3xl`;
+
+const Badge = ({ text, variant }: BadgeProps) => {
+  const getVariantStyle = () => {
+    switch (variant) {
+      case "todo":
+        return "bg-lime text-green";
+      case "done":
+        return "bg-green text-amber-300";
+      default:
+        return "bg-gray-200 text-gray-900";
+    }
+  };
+
+  return (
+    <span className={`${baseBadgeStyle} ${getVariantStyle()}`}>{text}</span>
+  );
+};
+
+export default Badge;
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+interface ButtonProps {
+  type?: "submit" | "reset" | "button" | undefined;
+  variant: "primary" | "success" | "danger";
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+const baseButtonStyle =
+  "w-[164px] h-[52px] flex items-center justify-center text-base font-bold rounded-3xl border-2 border-gray-900 shadow-button duration-150";
+
+const Button = ({ type, variant, children, disabled }: ButtonProps) => {
+  const getVariantStyle = () => {
+    if (disabled) {
+      return "bg-gray-200 text-gray-900";
+    }
+
+    switch (variant) {
+      case "primary":
+        return "bg-primary text-white hover:bg-primary-dark";
+      case "danger":
+        return "bg-danger text-white hover:bg-danger-dark";
+      default:
+        return "bg-gray-200 text-gray-900";
+    }
+  };
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={`${baseButtonStyle} ${getVariantStyle()}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/components/FormControl/index.tsx b/components/FormControl/index.tsx
@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+const FormControl = ({ children }: { children: ReactNode }) => {
+  return <div className="flex items-center gap-4">{children}</div>;
+};
+
+export default FormControl;
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -0,0 +1,28 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const Header = () => {
+  return (
+    <header className="h-[60px] py-[10px] bg-white border-b border-b-gray-200">
+      <div className="flex items-center md:w-full lg:w-[1200px] lg:mx-auto">
+        <Link href="/" className="flex items-center">
+          <Image
+            src="/images/logo-img.svg"
+            alt="두잇 로고 이미지"
+            width="70"
+            height="40"
+            className="mr-2 h-[40px]"
+          />
+          <Image
+            src="/images/logo-txt.svg"
+            alt="do it;"
+            width="74"
+            height="40"
+          />
+        </Link>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/components/Input/index.tsx b/components/Input/index.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { ChangeEvent } from "react";
+
+interface InputProps {
+  id: string;
+  type?: string;
+  value: string;
+  placeholder?: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const Input = ({ id, type, value, placeholder, onChange }: InputProps) => {
+  return (
+    <input
+      id={id}
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      className="w-full h-[52px] px-6 text-base text-gray-900 bg-gray-100 rounded-3xl border-2 border-gray-900 shadow-button"
+      onChange={onChange}
+    />
+  );
+};
+
+export default Input;