diff --git a/next.config.js b/next.config.js
index 87642a2f..9c1a4c56 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,6 +2,15 @@
 const path = require('path');
 
 const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
+        pathname: '/**', // 모든 경로 허용
+      },
+    ],
+  },
   reactStrictMode: true,
   webpack: (config) => {
     // alias 추가
diff --git a/src/app/api/clientApiClient.ts b/src/app/api/clientApiClient.ts
index 8c1b02cc..9ff708af 100644
--- a/src/app/api/clientApiClient.ts
+++ b/src/app/api/clientApiClient.ts
@@ -5,7 +5,6 @@ const clientApiClient = axios.create({
   timeout: 10_000,
   headers: { 'Content-Type': 'application/json' },
 });
-
 // 에러 처리
 clientApiClient.interceptors.response.use(
   (res) => res.data,
diff --git a/src/app/api/todo.ts b/src/app/api/todo.ts
index 66132b47..5a912b06 100644
--- a/src/app/api/todo.ts
+++ b/src/app/api/todo.ts
@@ -4,6 +4,7 @@ import {
   Item,
   ItemDetail,
   UpdateItemRequest,
+  UploadImageResponse,
 } from '@/types/TodoTypes';
 
 import clientApiClient from './clientApiClient';
@@ -14,7 +15,7 @@ export const addItem = (data: AddItemRequest): Promise<ItemDetail> => {
 };
 
 export const getItemList = (): Promise<Item[]> => {
-  return clientApiClient.get(`${process.env.NEXT_PUBLIC_TENANT_ID}/items`, {});
+  return clientApiClient.get(`${process.env.NEXT_PUBLIC_TENANT_ID}/items`);
 };
 
 export const getItemListServer = () => {
@@ -32,3 +33,14 @@ export const updateItem = (itemId: number, data: UpdateItemRequest): Promise<Ite
 export const deleteItem = (itemId: number): Promise<DeleteItemResponse> => {
   return clientApiClient.delete(`${process.env.NEXT_PUBLIC_TENANT_ID}/items/${itemId}`);
 };
+
+export const uploadImage = (file: File): Promise<UploadImageResponse> => {
+  const formData = new FormData();
+  formData.append('image', file);
+
+  return clientApiClient.post(`${process.env.NEXT_PUBLIC_TENANT_ID}/images/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+};
diff --git a/src/app/components/ItemDetailContent.tsx b/src/app/components/ItemDetailContent.tsx
new file mode 100644
index 00000000..0de70916
--- /dev/null
+++ b/src/app/components/ItemDetailContent.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+import Button from '@/components/Button';
+import CheckListDetail from '@/components/CheckListDetail';
+import ImageUploader from '@/components/ImageUploader';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Memo from '@/components/Memo';
+import { useItemStore } from '@/store/itemStore';
+import { UploadImageResponse } from '@/types/TodoTypes';
+
+import { deleteItem, getItem, updateItem, uploadImage } from '../api/todo';
+
+interface ItemDetailContentProps {
+  itemId: number;
+}
+
+const ItemDetailContent = ({ itemId }: ItemDetailContentProps) => {
+  const router = useRouter();
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ['itemDetail', itemId],
+    queryFn: () => getItem(itemId),
+  });
+
+  const updateItemMutation = useMutation({
+    mutationFn: () => updateItem(itemId, detailData),
+    retry: 1,
+    retryDelay: 300,
+    onSuccess: () => {
+      setDetailData({ name: '', memo: '', imageUrl: '', isCompleted: false });
+      router.push('/');
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+
+  const uploadImageMutation = useMutation<UploadImageResponse, Error, File>({
+    mutationFn: (file: File) => uploadImage(file),
+    retry: 1,
+    retryDelay: 300,
+    onSuccess: (response) => {
+      const { url } = response;
+      setDetailData({ imageUrl: url });
+      updateItemMutation.mutate();
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+
+  const deleteItemMutation = useMutation({
+    mutationFn: () => deleteItem(itemId),
+    retry: 1,
+    retryDelay: 300,
+    onSuccess: () => {
+      setDetailData({ name: '', memo: '', imageUrl: '', isCompleted: false });
+      router.push('/');
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+
+  const { detailData, setDetailData } = useItemStore();
+
+  const [file, setFile] = useState<File | null>(null);
+
+  const disableEditButton =
+    !detailData.name ||
+    (detailData.isCompleted === data?.isCompleted &&
+      detailData.name === data?.name &&
+      detailData.memo === data?.memo &&
+      !file);
+
+  const onUploadFile = (fileData: File) => {
+    setFile(fileData);
+  };
+
+  const onClickEditDetail = () => {
+    if (file) {
+      uploadImageMutation.mutate(file);
+    } else {
+      updateItemMutation.mutate();
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      const { name, memo, imageUrl, isCompleted } = data;
+      setDetailData({ name, memo, imageUrl, isCompleted });
+    }
+  }, [data, setDetailData]);
+
+  if (isLoading || isFetching) return <LoadingOverlay />;
+
+  return (
+    <div className='max-w-[75rem] w-full flex flex-col gap-6.5 bg-white px-12 sm:px-24.5 py-6'>
+      <CheckListDetail />
+      <div className='flex flex-col sm:flex-row items-start justify-center gap-6'>
+        <ImageUploader imageUrl={detailData.imageUrl} onUpload={onUploadFile} />
+        <Memo />
+      </div>
+      <div className='flex w-full justify-center sm:justify-end gap-4 min-w-0'>
+        <Button
+          mode='edit'
+          size='full'
+          className='max-w-[168px]'
+          disabled={disableEditButton}
+          onClick={onClickEditDetail}
+        >
+          수정 완료
+        </Button>
+        <Button
+          mode='delete'
+          size='full'
+          className='max-w-[168px]'
+          onClick={() => deleteItemMutation.mutate()}
+        >
+          삭제하기
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ItemDetailContent;
diff --git a/src/app/globals.css b/src/app/globals.css
index cef79d5b..13598811 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -41,6 +41,31 @@
   margin: 0;
 }
 
+/* 컴포넌트 전용 스크롤바 */
+.scrollbar-custom::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 4px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.scrollbar-custom::-webkit-scrollbar-button {
+  display: none; /* 화살표 제거 */
+}
+
+/* Firefox */
+.scrollbar-custom {
+  scrollbar-width: thin;
+  scrollbar-color: #fde68a transparent;
+}
+
 html,
 body {
   max-width: 100vw;
diff --git a/src/app/items/[itemId]/page.tsx b/src/app/items/[itemId]/page.tsx
new file mode 100644
index 00000000..4301e8d3
--- /dev/null
+++ b/src/app/items/[itemId]/page.tsx
@@ -0,0 +1,24 @@
+import { getItem } from '@/app/api/todo';
+import ItemDetailContent from '@/app/components/ItemDetailContent';
+import HydrationWrapper from '@/components/HydrationWrapper';
+
+interface ItemPageProps {
+  params: Promise<{ itemId: string }>;
+  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+const ItemPage = async ({ params }: ItemPageProps) => {
+  const { itemId } = await params;
+  return (
+    <HydrationWrapper
+      prefetchQueries={[
+        { queryKey: ['itemDetail', itemId], queryFn: () => getItem(Number(itemId)) },
+      ]}
+    >
+      <div className='flex justify-center bg-gray-50 min-h-[calc(100vh-3.75rem)]'>
+        <ItemDetailContent itemId={Number(itemId)} />
+      </div>
+    </HydrationWrapper>
+  );
+};
+
+export default ItemPage;
diff --git a/src/assets/images/memo.png b/src/assets/images/memo.png
new file mode 100644
index 00000000..11e2e5c3
Binary files /dev/null and b/src/assets/images/memo.png differ
diff --git a/src/assets/images/no_image.png b/src/assets/images/no_image.png
new file mode 100644
index 00000000..f94fd474
Binary files /dev/null and b/src/assets/images/no_image.png differ
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 6f4ad5a8..55bbca2e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -9,17 +9,18 @@ import X from '@/assets/icons/x.svg';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   mode?: 'add' | 'delete' | 'edit';
-  size?: 'small' | 'large';
+  size?: 'small' | 'large' | 'full';
   children?: React.ReactNode;
   className?: string;
 }
 
 const BASE_CLASS =
-  'flex items-center text-base font-bold rounded-[1.68rem] border-2 border-slate-900 shadow-offset' as const;
+  'flex items-center justify-center text-base font-bold rounded-[1.68rem] border-2 border-slate-900 shadow-offset' as const;
 
 const SIZE_CLASS = {
   small: 'p-4',
   large: 'min-w-41 gap-1 py-3.5 px-10',
+  full: 'w-full p-4',
 } as const;
 
 const Button = ({
@@ -53,8 +54,8 @@ const Button = ({
           className={`${disabled ? 'stroke-slate-900' : 'stroke-white'}`}
         />
       )}
-      {mode === 'delete' && <X className='stroke-slate-900' />}
-      {mode === 'edit' && <Check className='stroke-slate-900' />}
+      {mode === 'delete' && <X width={16} height={16} className='stroke-white' />}
+      {mode === 'edit' && <Check width={16} height={16} className='stroke-slate-900' />}
       {children}
     </button>
   );
diff --git a/src/components/CheckListDetail.tsx b/src/components/CheckListDetail.tsx
new file mode 100644
index 00000000..d0a296a3
--- /dev/null
+++ b/src/components/CheckListDetail.tsx
@@ -0,0 +1,81 @@
+'use client';
+import { useState } from 'react';
+
+import clsx from 'clsx';
+
+import Check from '@/assets/icons/check.svg';
+import { useItemStore } from '@/store/itemStore';
+
+interface CheckListDetailProps {
+  className?: string;
+}
+
+const CheckListDetail = ({ className }: CheckListDetailProps) => {
+  const [editMode, setEditMode] = useState(false);
+  const { detailData, setDetailData } = useItemStore();
+
+  const onChangeCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    setDetailData({ isCompleted: !detailData.isCompleted });
+  };
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDetailData({ name: e.target.value });
+  };
+
+  const onClickDetail = () => {
+    setEditMode(true);
+  };
+
+  const Checkbox = () => {
+    return (
+      <label
+        className='flex items-center cursor-pointer select-none'
+        onClick={(e) => e.stopPropagation()}
+      >
+        <input
+          type='checkbox'
+          className='hidden'
+          checked={detailData.isCompleted}
+          onChange={onChangeCheck}
+        />
+        <div
+          className={`${detailData.isCompleted ? 'border-none bg-violet-600' : 'border-slate-900 border-2 bg-yellow-50'} w-8 h-8 rounded-full  border-gray-400 flex items-center justify-center
+            `}
+        >
+          {detailData.isCompleted && <Check stroke='white' width={16} height={16} />}
+        </div>
+      </label>
+    );
+  };
+
+  return (
+    <div
+      className={clsx(
+        'w-full border-2 border-slate-900 rounded-[1.5rem] px-3 py-3.5 flex gap-4 items-center justify-center',
+        detailData.isCompleted ? 'bg-violet-100' : 'bg-white',
+        className,
+      )}
+      onClick={onClickDetail}
+    >
+      <Checkbox />
+      {editMode ? (
+        <input
+          value={detailData.name}
+          onChange={handleNameChange}
+          className='focus:outline-none'
+          style={{ width: `${detailData.name.length + 1.4 || 1}ch` }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              setEditMode(false);
+            }
+          }}
+        />
+      ) : (
+        <span className='truncate underline'>{detailData.name}</span>
+      )}
+    </div>
+  );
+};
+
+export default CheckListDetail;
diff --git a/src/components/CheckListItem.tsx b/src/components/CheckListItem.tsx
index a347645a..2ac17c3d 100644
--- a/src/components/CheckListItem.tsx
+++ b/src/components/CheckListItem.tsx
@@ -1,3 +1,4 @@
+'use client';
 import clsx from 'clsx';
 
 import Check from '@/assets/icons/check.svg';
@@ -7,18 +8,29 @@ interface CheckListItemProps {
   checked?: boolean;
   className?: string;
   disabled?: boolean;
+  onCheck?: () => void;
   onClick?: () => void;
 }
 
-const CheckListItem = ({ name, checked, className, disabled, onClick }: CheckListItemProps) => {
+const CheckListItem = ({
+  name,
+  checked,
+  className,
+  disabled,
+  onCheck,
+  onClick,
+}: CheckListItemProps) => {
   const onChangeCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation();
-    onClick?.();
+    onCheck?.();
   };
 
   const Checkbox = () => {
     return (
-      <label className='flex items-center cursor-pointer select-none'>
+      <label
+        className='flex items-center cursor-pointer select-none'
+        onClick={(e) => e.stopPropagation()}
+      >
         <input type='checkbox' className='hidden' checked={checked} onChange={onChangeCheck} />
         <div
           className={`${checked ? 'border-none bg-violet-600' : 'border-slate-900 border-2 bg-yellow-50'} w-8 h-8 rounded-full  border-gray-400 flex items-center justify-center
@@ -33,8 +45,9 @@ const CheckListItem = ({ name, checked, className, disabled, onClick }: CheckLis
   return (
     <div
       className={clsx(
-        'w-full bg-white border-2 border-slate-900 rounded-[1.68rem] px-3 py-2.25 flex gap-4 items-center',
+        'w-full border-2 border-slate-900 rounded-[1.68rem] px-3 py-2.25 flex gap-4 items-center',
         disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        checked ? 'bg-violet-100' : 'bg-white',
         className,
       )}
       onClick={onClick}
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 3d448189..d1f2b5cf 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -16,7 +16,7 @@ const IconButton = ({ mode = 'edit', children, className }: IconButtonProps) =>
 
   const getModeClass = (): string => {
     const modeClassMap: Record<string, string> = {
-      add: 'p-6 bg-slate-200',
+      add: 'p-5 bg-slate-200',
       edit: 'p-4.5 bg-slate-transparent-900 border-2 border-slate-900',
     };
 
@@ -25,8 +25,8 @@ const IconButton = ({ mode = 'edit', children, className }: IconButtonProps) =>
 
   return (
     <button className={clsx(baseClass, getModeClass(), className)}>
-      {mode === 'add' && <Plus width='16' height='16' className='stroke-slate-500' />}
-      {mode === 'edit' && <Edit className='stroke-white' />}
+      {mode === 'add' && <Plus width='24' height='24' className='stroke-slate-500' />}
+      {mode === 'edit' && <Edit width='24' height='24' className='stroke-white' />}
       {children}
     </button>
   );
diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
new file mode 100644
index 00000000..cd2c37c3
--- /dev/null
+++ b/src/components/ImageUploader.tsx
@@ -0,0 +1,89 @@
+import { useRef, useState } from 'react';
+
+import clsx from 'clsx';
+import Image from 'next/image';
+
+import noImage from '@/assets/images/no_image.png';
+
+import IconButton from './IconButton';
+
+interface ImageUploaderProps {
+  imageUrl: string;
+  className?: string;
+  onUpload?: (file: File) => void;
+}
+
+const ImageUploader = ({ imageUrl, className, onUpload }: ImageUploaderProps) => {
+  const [error, setError] = useState('');
+  const [preview, setPreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleOnClickUploader = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const nameInvalid = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(file.name);
+    if (nameInvalid) {
+      setError('한글이 포함된 파일은 업로드가 불가합니다.');
+      return;
+    }
+
+    // 2. 파일 용량 체크 (5MB 제한)
+    const maxSize = 5 * 1024 * 1024; // 5MB
+    if (file.size > maxSize) {
+      setError('파일 용량이 5MB를 초과했습니다.');
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreview(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+
+    onUpload?.(file);
+  };
+
+  return (
+    <div className={clsx('flex flex-col items-center w-full max-w-[384px]', className)}>
+      <div
+        className={clsx(
+          'relative flex justify-center items-center bg-slate-50 w-full max-w-[384px] h-[311px] rounded-3xl cursor-pointer',
+          (preview || imageUrl) ?? 'border-2 border-dashed border-slate-300',
+        )}
+        onClick={handleOnClickUploader}
+      >
+        {preview || imageUrl ? (
+          <Image
+            src={preview || encodeURI(imageUrl)}
+            alt={imageUrl ? '업로드 배경' : '업로드 이미지'}
+            className='object-cover rounded-3xl'
+            priority
+            fill
+          />
+        ) : (
+          <Image src={noImage} alt='업로드 배경' className='object-contain rounded-3xl' priority />
+        )}
+        <IconButton
+          mode={preview || imageUrl ? 'edit' : 'add'}
+          className='absolute bottom-4 right-4'
+        />
+        <input
+          type='file'
+          accept='image/*'
+          className='hidden'
+          ref={fileInputRef}
+          onChange={handleFileChange}
+        />
+      </div>
+
+      <p className='mt-4 min-h-[1.25rem] text-sm text-red-500 w-full'>{error}</p>
+    </div>
+  );
+};
+
+export default ImageUploader;
diff --git a/src/components/Memo.tsx b/src/components/Memo.tsx
new file mode 100644
index 00000000..a17d9c86
--- /dev/null
+++ b/src/components/Memo.tsx
@@ -0,0 +1,35 @@
+import Image from 'next/image';
+
+import MemoImage from '@/assets/images/memo.png';
+import TextArea from '@/components/TextArea';
+import { useItemStore } from '@/store/itemStore';
+
+const Memo = () => {
+  const { detailData, setDetailData } = useItemStore();
+
+  const handleMemoChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDetailData({ memo: e.target.value });
+  };
+
+  return (
+    <div className='relative w-full max-w-[384px] sm:max-w-[588px] h-[311px]'>
+      <Image
+        src={MemoImage}
+        alt={'메모 배경'}
+        fill
+        className='object-cover rounded-3xl'
+        sizes='(max-width: 696px) 100vw, 696px'
+      />
+      <div className='p-4 absolute inset-0 z-10 flex flex-col gap-4 items-center justify-center'>
+        <div className='font-extrabold text-amber-800'>Memo</div>
+        <TextArea
+          value={detailData.memo ?? ''}
+          className='min-h-[15rem] scrollbar-custom'
+          onChange={handleMemoChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Memo;
diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx
new file mode 100644
index 00000000..82cbff3b
--- /dev/null
+++ b/src/components/TextArea.tsx
@@ -0,0 +1,25 @@
+import { TextareaHTMLAttributes } from 'react';
+
+import clsx from 'clsx';
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
+  errorMessage?: string;
+}
+
+const TextArea = ({ className, errorMessage, ...rest }: TextAreaProps) => {
+  return (
+    <div className='relative w-full max-w-[557px]'>
+      <textarea
+        {...rest}
+        className={clsx(
+          'w-full placeholder-slate-500 focus:outline-none resize-none pl-1',
+          className,
+        )}
+      />
+      <div className='absolute text-sm text-red-600 pt-2.5 pl-6 '>{errorMessage}</div>
+    </div>
+  );
+};
+
+export default TextArea;
diff --git a/src/components/TodoContent.tsx b/src/components/TodoContent.tsx
index 33de8d14..ec7515f3 100644
--- a/src/components/TodoContent.tsx
+++ b/src/components/TodoContent.tsx
@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from 'react';
 
+import { useRouter } from 'next/navigation';
+
 import Badge from '@/components/Badge';
 import LoadingOverlay from '@/components/LoadingOverlay';
 import TodoForm from '@/components/TodoForm';
@@ -10,6 +12,7 @@ import useTodo from '@/hooks/useTodo';
 import { Item } from '@/types/TodoTypes';
 
 const TodoContent = () => {
+  const router = useRouter();
   const [initialLoading, setInitialLoading] = useState(true);
   const { addTodoMutation, updateTodoMutation, isFetching, todoItems, doneItems } = useTodo();
 
@@ -21,12 +24,16 @@ const TodoContent = () => {
     });
   };
 
-  const onClickCheckListItem = (item: Item) => {
+  const onCheckItem = (item: Item) => {
     if (typeof item.id === 'number') {
       updateTodoMutation.mutate({ ...item, isCompleted: !item.isCompleted });
     }
   };
 
+  const onClickItem = (item: Item) => {
+    router.push(`/items/${item.id}`);
+  };
+
   useEffect(() => {
     if (!isFetching) {
       setInitialLoading(false);
@@ -45,13 +52,13 @@ const TodoContent = () => {
             <Badge mode='todo' className='self-start'>
               TO DO
             </Badge>
-            <TodoList items={todoItems} mode='todo' onClick={onClickCheckListItem} />
+            <TodoList items={todoItems} mode='todo' onCheck={onCheckItem} onClick={onClickItem} />
           </div>
           <div className='flex flex-col w-1/2 min-w-0 items-start'>
             <Badge mode='done' className='self-start'>
               DONE
             </Badge>
-            <TodoList items={doneItems} mode='done' onClick={onClickCheckListItem} />
+            <TodoList items={doneItems} mode='done' onCheck={onCheckItem} onClick={onClickItem} />
           </div>
         </section>
       </div>
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index 85683106..63f4dd5d 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -6,10 +6,11 @@ import EmptyContent from './EmptyContent';
 interface TodoListProps {
   items: Item[];
   mode?: 'todo' | 'done';
+  onCheck?: (item: Item) => void;
   onClick?: (item: Item) => void;
 }
 
-const TodoList = ({ items, mode = 'todo', onClick }: TodoListProps) => {
+const TodoList = ({ items, mode = 'todo', onCheck, onClick }: TodoListProps) => {
   return (
     <div className='flex flex-col gap-4 pt-4 w-full'>
       {items.length ? (
@@ -18,6 +19,7 @@ const TodoList = ({ items, mode = 'todo', onClick }: TodoListProps) => {
             name={item.name}
             checked={item.isCompleted}
             key={item.id}
+            onCheck={() => onCheck?.(item)}
             onClick={() => onClick?.(item)}
             className={`${mode === 'done' ? 'line-through' : ''}`}
             disabled={typeof item.id === 'string' && item.id.startsWith('temp')}
diff --git a/src/store/itemStore.ts b/src/store/itemStore.ts
new file mode 100644
index 00000000..0c882903
--- /dev/null
+++ b/src/store/itemStore.ts
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+
+import { ItemDetail } from '@/types/TodoTypes';
+
+interface ItemStore {
+  detailData: Omit<ItemDetail, 'id' | 'tenantId'>;
+  setDetailData: (data: Partial<Omit<ItemDetail, 'id' | 'tenantId'>>) => void;
+}
+
+export const useItemStore = create<ItemStore>((set) => ({
+  detailData: {
+    name: '',
+    memo: '',
+    imageUrl: '',
+    isCompleted: true,
+  },
+  setDetailData: (data) => set((state) => ({ detailData: { ...state.detailData, ...data } })),
+}));
diff --git a/src/types/TodoTypes.ts b/src/types/TodoTypes.ts
index 3ec7f1b9..3e833ea7 100644
--- a/src/types/TodoTypes.ts
+++ b/src/types/TodoTypes.ts
@@ -24,3 +24,7 @@ export interface UpdateItemRequest {
 export interface AddItemRequest {
   name: string;
 }
+
+export interface UploadImageResponse {
+  url: string;
+}