fix: 디자인 QA 수정, 추천 문제 이동 기능 수정, 프로필 아이콘 추가 등

Author: JKyEun

src/routes/mission/$missionId/-components/MissionDetailHeader.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "@tanstack/react-router";
 import CloseIcon from "@/components/icons/CloseIcon";
+import MissionMyProfile from "../../-components/MissionMyProfile";
 
 export default function MissionDetailHeader({
   type = "close",
@@ -9,7 +10,7 @@ export default function MissionDetailHeader({
   const navigate = useNavigate();
 
   return (
-    <header className="flex items-center justify-end pt-4">
+    <header className="flex items-center justify-end p-4">
       <button
         type="button"
         onClick={() => {
@@ -20,14 +21,13 @@ export default function MissionDetailHeader({
             navigate({ to: "/mypage" });
           }
         }}
-        className="p-2"
       >
         {type === "close" && (
-          <CloseIcon variant="white" width={24} height={24} />
-        )}
-        {type === "mypage" && (
-          <div className="w-[42px] h-[42px] bg-neutral-100 rounded-full" />
+          <div className="p-2">
+            <CloseIcon variant="white" width={24} height={24} />
+          </div>
         )}
+        {type === "mypage" && <MissionMyProfile />}
       </button>
     </header>
   );

src/routes/mission/$missionId/-components/MissionNotTried.tsx

@@ -124,7 +124,7 @@ export default function MissionNotTried(props: MissionNotTriedProps) {
 
   return (
     <div
-      className={`fixed inset-0 flex flex-col ${state === "REVIEWING" ? "bg-neutral-500" : "bg-neutral-900"}`}
+      className={`fixed inset-0 flex flex-col ${state === "REVIEWING" || state === "FAILED" ? "bg-neutral-500" : "bg-neutral-800"}`}
     >
       <input
         ref={fileInputRef}
@@ -156,7 +156,12 @@ export default function MissionNotTried(props: MissionNotTriedProps) {
               />
             );
           case "SUCCESS":
-            return <MissionNotTriedSuccess attemptId={successAttemptId} />;
+            return (
+              <MissionNotTriedSuccess
+                attemptId={successAttemptId}
+                onStart={() => setState("DEFAULT")}
+              />
+            );
           case "FAILED":
             return (
               <MissionNotTriedFailed

src/routes/mission/$missionId/-components/MissionNotTriedDefault.tsx

@@ -18,7 +18,7 @@ export default function MissionNotTriedDefault({
   onStart,
 }: MissionNotTriedDefaultProps) {
   return (
-    <div className="fixed inset-0 flex flex-col bg-neutral-900">
+    <>
       <MissionDetailHeader type="close" />
 
       <div className="flex-1 flex flex-col items-center gap-4 px-4">
@@ -47,9 +47,10 @@ export default function MissionNotTriedDefault({
             imageUrl={missionImage}
             status="not_tried"
             onStart={onStart}
+            type="detail"
           />
         </div>
       </div>
-    </div>
+    </>
   );
 }

src/routes/mission/$missionId/-components/MissionNotTriedFailed.tsx

@@ -14,7 +14,7 @@ export default function MissionNotTriedFailed({
   const navigate = useNavigate();
 
   return (
-    <div className="flex-1 flex flex-col bg-neutral-500">
+    <>
       <MissionDetailHeader type="mypage" />
 
       <div className="flex-1 flex flex-col items-center">
@@ -43,6 +43,6 @@ export default function MissionNotTriedFailed({
         <Button onClick={() => navigate({ to: "/mission" })}>홈</Button>
         <Button onClick={onRetry}>재도전</Button>
       </div>
-    </div>
+    </>
   );
 }

src/routes/mission/$missionId/-components/MissionNotTriedReviewing.tsx

@@ -15,7 +15,7 @@ export default function MissionNotTriedReviewing({
   onRetry,
 }: MissionNotTriedReviewingProps) {
   return (
-    <div className="flex-1 flex flex-col">
+    <>
       <MissionDetailHeader type="mypage" />
 
       <div className="flex-1 flex flex-col items-center">
@@ -45,6 +45,6 @@ export default function MissionNotTriedReviewing({
         <Button onClick={onRetry}>재촬영</Button>
         <Button onClick={onSuccess}>성공</Button>
       </div>
-    </div>
+    </>
   );
 }

src/routes/mission/$missionId/-components/MissionNotTriedSuccess.tsx

@@ -9,10 +9,12 @@ import MissionDetailHeader from "./MissionDetailHeader";
 
 interface MissionNotTriedSuccessProps {
   attemptId: number | null;
+  onStart: () => void;
 }
 
 export default function MissionNotTriedSuccess({
   attemptId,
+  onStart,
 }: MissionNotTriedSuccessProps) {
   const navigate = useNavigate();
   const { emblaRef, selectedIndex } = useCarousel();
@@ -27,7 +29,7 @@ export default function MissionNotTriedSuccess({
   });
 
   return (
-    <div className="flex-1 flex flex-col">
+    <>
       <MissionDetailHeader type="close" />
 
       <div className="flex-1 flex flex-col items-center">
@@ -61,7 +63,9 @@ export default function MissionNotTriedSuccess({
                       to: "/mission/$missionId",
                       params: { missionId: mission.missionId?.toString() },
                     });
+                    onStart();
                   }}
+                  type="recommendation"
                 />
               </div>
             ))}
@@ -74,6 +78,6 @@ export default function MissionNotTriedSuccess({
           <span className="text-neutral-400">{missions?.length}</span>
         </div>
       </div>
-    </div>
+    </>
   );
 }

src/routes/mission/$missionId/index.tsx

@@ -42,7 +42,7 @@ function MissionDetail() {
   }
 
   return (
-    <div className="fixed inset-0 flex flex-col bg-neutral-900">
+    <div className="fixed inset-0 flex flex-col">
       <MissionNotTried
         missionId={Number(missionId)}
         sectorName={currentMission.sector?.name ?? ""}