[Refactor] 할일 상세보기 리팩토링, 메인 페이지 미들웨어 설정

src/app/(route)/page.tsx

@@ -1,5 +1,5 @@
 'use client';
 
 export default function Home() {
-  return <div className="px-16 pt-48 sm:pt-0">asdf</div>;
+  return;
 }

src/components/Dashboard/Follower/FollowerStory/index.tsx

@@ -26,6 +26,7 @@ export const FollowerStory = ({ follower }: FollowerStoryProps) => {
           src={pic}
           width={120}
           height={120}
+          sizes="100vw"
           alt="팔로워 인증 사진"
           className="size-120 rounded-20 object-cover"
         />

src/components/Dashboard/GoalList/GoalItem/TodoList/TodoPic/index.tsx

@@ -36,6 +36,7 @@ export const TodoPic = ({ index, color, pic, status, date }: TodoItemProps) => {
         <Image
           src={pic}
           fill
+          sizes="100vw"
           alt="인증 사진"
           onLoad={() => setIsLoaded(true)}
           className="rounded-16 object-cover opacity-50"

src/components/Follows/Post/PostImage.tsx

@@ -28,6 +28,7 @@ export function PostImage(props: PostImageProps) {
       src={completePic}
       alt="post-image"
       width={100}
+      sizes="100vw"
       height={100}
       className="my-8 aspect-square w-full cursor-pointer"
       onClick={handleClickImage}

src/components/Follows/Post/PostProfile.tsx

@@ -29,6 +29,7 @@ export function PostProfile(props: PostProfileProps) {
       <Image
         src={profilePic}
         alt="profilePic"
+        sizes="100vw"
         width={40}
         height={40}
         className="max-h-40 max-w-40 rounded-full"

src/components/MyPage/MyProfile/index.tsx

@@ -49,6 +49,7 @@ export const MyProfile = () => {
             <Image
               width={123}
               height={123}
+              sizes="100vw"
               className="size-123 rounded-23 bg-custom-white-200"
               alt="프로필 사진"
               priority

src/components/Search/SearchContent/SearchGoalList/index.tsx

@@ -40,6 +40,7 @@ export const SearchGoalList = ({
               <Image
                 width={48}
                 height={48}
+                sizes="100vw"
                 className="flex size-48 rounded-90"
                 src={item.profilePic}
                 alt="프로필 사진"

src/components/Search/SearchContent/SearchUserList/index.tsx

@@ -38,6 +38,7 @@ export const SearchUserList = ({
             <Image
               width={48}
               height={48}
+              sizes="100vw"
               className="flex size-48 rounded-90"
               src={item.profilePic}
               alt="프로필 사진"

src/components/Sidebar/Profle/index.tsx

@@ -53,6 +53,7 @@ export const Profile = () => {
               alt="profile picture"
               width={37}
               height={37}
+              sizes="100vw"
               className="aspect-square shrink-0 rounded-8 p-2"
               priority
             />

src/components/Sidebar/index.tsx

@@ -69,12 +69,12 @@ export const Sidebar = () => {
         </div>
         {isOpen ? (
           <FaAnglesLeft
-            className="size-28 cursor-pointer p-4 text-custom-gray-200"
+            className="size-28 cursor-pointer p-4 text-custom-gray-100"
             onClick={close}
           />
         ) : (
           <FaBars
-            className="size-28 cursor-pointer p-4 text-slate-400"
+            className="size-28 cursor-pointer p-4 text-custom-gray-100"
             onClick={open}
           />
         )}

src/components/TodoModal/TodoModalDocs/FileUpload/index.tsx

@@ -45,6 +45,7 @@ export const FileUpload = () => {
             src={todoData.imageEncodedBase64}
             width={200}
             height={200}
+            sizes="100vw"
             alt="preview"
             priority
             className="size-full rounded-12 object-cover"

src/components/Todos/TodoItem.tsx

@@ -84,6 +84,7 @@ export const TodoItem = (props: TodoItemProps) => {
             <Image
               src={complete.completePic}
               alt="Complete Picture"
+              sizes="100vw"
               fill
               className="object-fill"
             />

src/components/TodosDetail/TodosDetailContent/TodoDocs/index.tsx

@@ -16,6 +16,7 @@ export const TodoDocs = ({ todoLink, todoPic }: TodoDocsProps) => {
         <Image
           width={340}
           height={340}
+          sizes="100vw"
           className="h-340 w-full rounded-16 object-cover"
           priority
           src={todoPic}

src/components/TodosDetail/TodosDetailContent/TodoProfile/BasicTodoItem/index.tsx

@@ -28,7 +28,7 @@ export const BasicTodoItem = ({
       >
         <FaListUl fill="white" />
       </div>
-      <div className="flex flex-col items-start">
+      <div className="flex cursor-pointer flex-col items-start ">
         <span className="text-xs-medium text-custom-gray-100">{goalTitle}</span>
         <span className="text-base-medium">{todoTitle}</span>
       </div>

src/components/TodosDetail/TodosDetailHeader/index.tsx

@@ -9,6 +9,8 @@ import { useTodoModalStore } from '@/store/useTodoModalStore';
 import { useTodoDataStore } from '@/store/useTodoDataStore';
 import { convertImageToBase64 } from '@/apis/Todo/convertImageToBase64';
 import { useDeleteTodo } from '@/hooks/apis/Todo/useDeleteTodo';
+import { Dropdown } from '@/components/common/Dropdown';
+import { DROPDOWN } from '@/constants/dropdown';
 
 interface TodosDetailHeaderProps {
   todoId: string;
@@ -57,32 +59,37 @@ export const TodosDetailHeader = ({ todoId }: TodosDetailHeaderProps) => {
     deleteTodo({ todoId: Number(todoId) });
   };
 
+  const handleSelectItem = (item: { value: string }) => {
+    if (item.value === '수정하기') {
+      handleOpenModify();
+    } else if (item.value === '삭제하기') {
+      handleDelete();
+    }
+  };
+
+  const renderDropdownItem = (item: { value: string }) => {
+    return <span>{item.value}</span>;
+  };
+
   return (
-    <div className="flex items-center justify-between">
+    <div className="relative flex items-center justify-between">
       <div className="flex items-center gap-16">
         <IoMdClose className="size-24 cursor-pointer" onClick={handleBack} />
         <span className="text-xl-semibold">할 일 상세보기</span>
       </div>
+
       <FaEllipsisVertical
-        className="relative size-24 p-2 text-custom-gray-100"
+        className="size-24 p-2 text-custom-gray-100"
         onClick={handleClick}
       />
-      {isOpenTab && (
-        <div className="absolute right-16 top-48 flex flex-col rounded-12 bg-white">
-          <div
-            className="flex-center cursor-pointer rounded-t-12 px-16 py-8 text-sm-normal hover:bg-custom-white-200"
-            onClick={handleOpenModify}
-          >
-            수정하기
-          </div>
-          <div
-            className="flex-center cursor-pointer rounded-b-12 px-16 py-8 text-sm-normal hover:bg-custom-white-200"
-            onClick={handleDelete}
-          >
-            삭제하기
-          </div>
-        </div>
-      )}
+      <div className="absolute right-0 top-40 w-81">
+        <Dropdown
+          dropdownData={DROPDOWN.TODO_DETAIL_MENU}
+          onSelectItem={handleSelectItem}
+          isOpenDropdown={isOpenTab}
+          renderItem={renderDropdownItem}
+        />
+      </div>
     </div>
   );
 };

src/components/UserProfile/UserProfileContent/index.tsx

@@ -32,6 +32,7 @@ export const UserProfileContent = ({ userId }: UserProfileContent) => {
         complete.completePic ? (
           <Image
             key={complete.completeId}
+            sizes="100vw"
             width={48}
             height={48}
             className="flex h-109 w-full rounded-4"

src/components/UserProfile/UserProfileHeader/index.tsx

@@ -40,6 +40,7 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
             <Image
               width={48}
               height={48}
+              sizes="100vw"
               className="flex size-64 rounded-full"
               priority
               src={profilePic}

src/components/VerificationNote/VerificationNoteImage/index.tsx

@@ -28,6 +28,7 @@ export const VerificationNoteImage = (props: VerificationNoteImageProps) => {
       <Image
         src={imageUrl}
         alt="Selected Image"
+        sizes="100vw"
         className="size-full rounded-16 object-cover"
         fill
       />

src/constants/dropdown.ts

@@ -2,4 +2,7 @@ export const DROPDOWN = {
   GOAL_HEADER_MENU: ['할일추가', '수정하기', '삭제하기'].map((str) => ({
     value: str,
   })),
+  TODO_DETAIL_MENU: ['수정하기', '삭제하기'].map((str) => ({
+    value: str,
+  })),
 };

src/middleware.ts

@@ -19,6 +19,10 @@ export const middleware = async (request: NextRequest) => {
     return NextResponse.next();
   }
 
+  if (pathname === '/' && token) {
+    return NextResponse.redirect(new URL('/dashboard', request.url));
+  }
+
   if (!token) {
     return NextResponse.redirect(new URL('/signin', request.url));
   }