codeit-bootcamp-frontend · addiescode-sj · Aug 13, 2025 · Aug 6, 2025 · Aug 6, 2025 · Aug 6, 2025
diff --git a/app/items/[itemId]/page.tsx b/app/items/[itemId]/page.tsx
@@ -0,0 +1,19 @@
+import TodoUpdateForm from "@/components/Todos/TodoUpdateForm";
+import { getTodo } from "@/lib/api";
+
+interface ItemDetailPageProps {
+  params: Promise<{ itemId: string }>;
+}
+
+const ItemDetailPage = async ({ params }: ItemDetailPageProps) => {
+  const { itemId } = await params;
+  const data = await getTodo(itemId);
+
+  return (
+    <section className="mt-10">
+      <TodoUpdateForm initialData={data} />
+    </section>
+  );
+};
+
+export default ItemDetailPage;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import "@/styles/globals.css";
 import Header from "@/components/Header";
 import nanumSquare from "@/assets/fonts/NanumSquare/nanumSquare";
 import QueryProvider from "./providers/QueryProvider";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 export const metadata: Metadata = {
   title: "간편한 투두리스트 - Do it",
@@ -20,7 +21,12 @@ export default function RootLayout({
       <body className={`${nanumSquare.className} bg-gray-50`}>
         <Header />
         <div className="my-6 md:w-full lg:w-[1200px] lg:mx-auto">
-          <QueryProvider>{children}</QueryProvider>
+          <QueryProvider>
+            {children}
+            {process.env.NODE_ENV === "development" && (
+              <ReactQueryDevtools initialIsOpen={false} />
+            )}
+          </QueryProvider>
         </div>
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,14 +1,25 @@
 import TodoClient from "@/components/Todos/TodoClient";
 import { getTodos } from "@/lib/api";
 import { Suspense } from "react";
-import TodoLoading from "@/components/Todos/TodoLoading";
+import TodoLoading from "@/components/Loader/TodoLoading";
+import {
+  QueryClient,
+  HydrationBoundary,
+  dehydrate,
+} from "@tanstack/react-query";
 
 const Home = async () => {
-  const initialItems = await getTodos();
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery({
+    queryKey: ["todos"],
+    queryFn: getTodos,
+  });
 
   return (
     <Suspense fallback={<TodoLoading />}>
-      <TodoClient initialItems={initialItems} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <TodoClient />
+      </HydrationBoundary>
     </Suspense>
   );
 };

diff --git a/assets/images/ico-check.svg b/assets/images/ico-check.svg
diff --git a/assets/images/ico-edit.svg b/assets/images/ico-edit.svg
diff --git a/assets/images/ico-img.svg b/assets/images/ico-img.svg
diff --git a/assets/images/ico-plus.svg b/assets/images/ico-plus.svg
diff --git a/public/images/ico-x.svg → assets/images/ico-x.svg b/public/images/ico-x.svg → assets/images/ico-x.svg
diff --git a/components/Button/BulletButton.tsx b/components/Button/BulletButton.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import clsx from "clsx";
+import Image from "next/image";
+import { MouseEvent } from "react";
+
+interface BulletButtonProps {
+  variant?: string;
+  type?: "submit" | "button";
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const BulletButton = ({
+  variant,
+  type = "button",
+  onClick,
+}: BulletButtonProps) => {
+  return (
+    <button
+      className={clsx("group relative bullet-base", {
+        "bullet-todo": variant === "todo",
+        "bullet-done": variant === "done",
+      })}
+      onClick={onClick}
+      type={type}
+    >
+      <Image
+        src="/images/ico-check-wt.svg"
+        alt="완료된 할 일"
+        width="20"
+        height="20"
+        className={clsx(
+          "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-opacity",
+          {
+            "opacity-100": variant === "done",
+            "opacity-0 group-hover:opacity-100": variant === "todo",
+          }
+        )}
+      />
+    </button>
+  );
+};
+
+export default BulletButton;
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
@@ -6,9 +6,16 @@ interface ButtonProps {
   variant: "primary" | "success" | "danger";
   children: ReactNode;
   disabled?: boolean;
+  onClick?: () => void;
 }
 
-const Button = ({ type, variant, children, disabled }: ButtonProps) => {
+const Button = ({
+  type,
+  variant,
+  children,
+  disabled,
+  onClick,
+}: ButtonProps) => {
   return (
     <button
       type={type}
@@ -19,6 +26,7 @@ const Button = ({ type, variant, children, disabled }: ButtonProps) => {
         "btn-danger": variant === "danger" && !disabled,
         "btn-disabled": disabled,
       })}
+      onClick={onClick}
     >
       {children}
     </button>

diff --git a/components/ImageUploader/index.tsx b/components/ImageUploader/index.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { ChangeEvent, useRef, useState } from "react";
+import ImgIcon from "@/assets/images/ico-img.svg";
+import PlusIcon from "@/assets/images/ico-plus.svg";
+import EditIcon from "@/assets/images/ico-edit.svg";
+import Image from "next/image";
+import useImageUpload from "@/hooks/useImageUpload";
+import LoadingSpinner from "@/components/Loader/LoadingSpinner";
+import clsx from "clsx";
+
+interface ImageUploaderProps {
+  initialData?: string;
+  className: string;
+  onUploaded: (v: string) => void;
+}
+
+const ImageUploader = ({
+  initialData,
+  className,
+  onUploaded,
+}: ImageUploaderProps) => {
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [preview, setPreview] = useState<File | string | null | undefined>(
+    initialData
+  );
+  const { mutate: uploadImage, isPending } = useImageUpload();
+
+  const handleClick = () => {
+    if (!fileRef.current) return;
+    fileRef.current.click();
+  };
+
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+
+    const file = files[0];
+
+    const filename = file.name.split(".").slice(0, -1).join(".");
+    const engOnlyRegex = /^[a-zA-Z0-9_\-]+$/;
+    if (!engOnlyRegex.test(filename)) {
+      alert("파일 이름은 영어로만 이루어져야 합니다.");
+      e.target.value = "";
+      return;
+    }
+
+    const MAX_SIZE = 5 * 1024 * 1024;
+    if (file.size > MAX_SIZE) {
+      alert("파일 크기는 5MB 이하여야 합니다.");
+      e.target.value = "";
+      return;
+    }
+
+    setPreview(file);
+
+    uploadImage(file, {
+      onSuccess: (image) => {
+        onUploaded(image.url);
+      },
+      onError: () => {
+        alert("이미지 업로드에 실패했습니다.");
+      },
+    });
+  };
+
+  return (
+    <div
+      className={`relative flex items-center justify-center w-[384px] h-[310px] rounded-3xl border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-primary-100 hover:border-primary transition-colors overflow-hidden ${className}`}
+    >
+      <input
+        ref={fileRef}
+        type="file"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+
+      {preview && (
+        <Image
+          src={
+            typeof preview === "string"
+              ? preview
+              : preview
+              ? URL.createObjectURL(preview)
+              : ""
+          }
+          alt="이미지 미리보기"
+          width={384}
+          height={310}
+          className="absolute object-cover z-[1] w-full h-full pointer-events-none"
+        />
+      )}
+
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={isPending}
+        className="group relative flex items-center justify-center w-full h-full"
+      >
+        <ImgIcon className="w-16 h-16 text-gray-200 group-hover:text-white z-0" />
+        <span
+          className={clsx("btn-upload-base", {
+            "btn-upload": !preview,
+            "btn-edit": preview,
+          })}
+        >
+          {isPending ? (
+            <LoadingSpinner />
+          ) : !preview ? (
+            <PlusIcon className="group-hover:text-white" />
+          ) : (
+            <EditIcon className="group-hover:text-primary text-white" />
+          )}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default ImageUploader;
diff --git a/components/ItemList/index.tsx b/components/ItemList/index.tsx
@@ -79,7 +79,7 @@ const ItemListBase = ({
             <ListItemByVariant
               key={`${variant}-${item.id}`}
               item={item}
-              onClick={handleClick}
+              onBulletClick={handleClick}
             />
           ))}
         </ul>
@@ -89,7 +89,7 @@ const ItemListBase = ({
 };
 
 const ItemList = {
-  Todo: ({ items, onClick }: ItemListProps) => {
+  Todo: ({ items }: ItemListProps) => {
     return (
       <ItemListBase
         items={items}
@@ -103,11 +103,10 @@ const ItemList = {
             TODO를 새롭게 추가해주세요!
           </>
         }
-        onClick={onClick}
       />
     );
   },
-  Done: ({ items, onClick }: ItemListProps) => {
+  Done: ({ items }: ItemListProps) => {
     return (
       <ItemListBase
         items={items}
@@ -121,7 +120,6 @@ const ItemList = {
             해야 할 일을 체크해보세요!
           </>
         }
-        onClick={onClick}
       />
     );
   },

diff --git a/components/ListItem/index.tsx b/components/ListItem/index.tsx
@@ -1,42 +1,44 @@
-import Image from "next/image";
-import { ItemProps } from "@/types/todo";
+import { MouseEvent } from "react";
+import { ItemProps, Item } from "@/types/todo";
 import clsx from "clsx";
+import { useRouter } from "next/navigation";
+import BulletButton from "@/components/Button/BulletButton";
+
+const ListItemBase = ({ item, variant = "todo", onBulletClick }: ItemProps) => {
+  const router = useRouter();
+
+  const handleBulletClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onBulletClick(item);
+  };
+
+  const handleListClick = (item: Item) => {
+    router.push(`/items/${item.id}`);
+  };
 
-const ListItemBase = ({ item, variant = "todo", onClick }: ItemProps) => {
   return (
     <li
       className={clsx("item-base", {
         "item-todo": variant === "todo",
         "item-done": variant === "done",
       })}
-      onClick={() => onClick(item)}
+      onClick={() => handleListClick(item)}
     >
-      <span
-        className={clsx("bullet-base", {
-          "bullet-todo": variant === "todo",
-          "bullet-done": variant === "done",
-        })}
-      >
-        {variant === "done" && (
-          <Image
-            src="/images/ico-check-wt.svg"
-            alt="완료된 할 일"
-            width="20"
-            height="20"
-          />
-        )}
-      </span>
+      <BulletButton
+        variant={variant}
+        onClick={handleBulletClick}
+      ></BulletButton>
       {item.name}
     </li>
   );
 };
 
 const ListItem = {
-  Todo: ({ item, onClick }: ItemProps) => (
-    <ListItemBase item={item} variant="todo" onClick={onClick} />
+  Todo: ({ item, onBulletClick }: ItemProps) => (
+    <ListItemBase item={item} variant="todo" onBulletClick={onBulletClick} />
   ),
-  Done: ({ item, onClick }: ItemProps) => (
-    <ListItemBase item={item} variant="done" onClick={onClick} />
+  Done: ({ item, onBulletClick }: ItemProps) => (
+    <ListItemBase item={item} variant="done" onBulletClick={onBulletClick} />
   ),
 };
 

diff --git a/components/Loader/LoadingSpinner.tsx b/components/Loader/LoadingSpinner.tsx
@@ -0,0 +1,7 @@
+const LoadingSpinner = () => {
+  return (
+    <div className="w-8 h-8 border-4 border-gray-300 border-t-primary rounded-full animate-spin" />
+  );
+};
+
+export default LoadingSpinner;
diff --git a/components/Todos/TodoLoading.tsx → components/Loader/TodoLoading.tsx b/components/Todos/TodoLoading.tsx → components/Loader/TodoLoading.tsx