refactor: Mission 컴포넌트의 필터 버튼 및 뷰 모드 전환 로직 개선, MissionGridCard의 최대 너비 설정, MissionTimer의 높이 조정

Author: minsgy

src/routes/mission/-components/MissionGridCard.tsx

@@ -40,10 +40,14 @@ export default function MissionGridCard({
     <Link
       to={`/mission/${missionId}/${status === "not_tried" ? "" : status}`}
       disabled={!missionId}
-      className={cn("card-container", {
-        "scale-100 opacity-100": isSelected,
-        "scale-90 opacity-50": !isSelected,
-      })}
+      className={cn(
+        "card-container",
+        {
+          "scale-100 opacity-100": isSelected,
+          "scale-90 opacity-50": !isSelected,
+        },
+        "max-w-[360px]"
+      )}
     >
       <div
         className={cn(

src/routes/mission/-components/MissionTimer.tsx

@@ -136,7 +136,7 @@ export default function MissionTimer({
   return (
     <Tooltip.Provider>
       <Tooltip.Root open={isTooltipOpen}>
-        <div className="fixed bottom-0 left-0 right-0 flex items-center justify-center p-4 gap-3 max-w-[600px] mx-auto bg-neutral-500 select-none">
+        <div className="fixed bottom-0 left-0 right-0 flex items-center justify-center h-[88px] gap-3 max-w-[600px] mx-auto bg-neutral-500 select-none z-30">
           <Timer
             seconds={time}
             className="t-p-42-b text-neutral-100 tracking-[-1.05px] leading-[54.6px]"

src/routes/mission/index.tsx

@@ -181,91 +181,95 @@ function Mission() {
   });
 
   return (
-    <div className="flex flex-col">
-      <div className="flex justify-between sticky top-[78px] items-center px-4 bg-neutral-500 pb-4">
-        <div id="mission-filters" className="flex gap-2">
-          {(["all", "not_tried", "failed", "success"] as const).map((type) => (
+    <>
+      <div className="flex flex-col">
+        <div className="flex justify-between sticky top-[78px] items-center px-4 bg-neutral-500 pb-4">
+          <div id="mission-filters" className="flex gap-2">
+            {(["all", "not_tried", "failed", "success"] as const).map(
+              (type) => (
+                <button
+                  key={type}
+                  type="button"
+                  disabled={!isSessionStarted}
+                  className={cn(
+                    "h-9 px-4 rounded-3xl whitespace-nowrap t-p-14-m transition-colors text-neutral-100",
+                    cn({
+                      "bg-neutral-600": filter === type && isSessionStarted,
+                    })
+                  )}
+                  onClick={() => {
+                    setFilter(type);
+                    scrollTo(0);
+                  }}
+                >
+                  {getFilterLabels(recommendations, filter)[type]}
+                </button>
+              )
+            )}
+          </div>
+          {isSessionStarted && (
             <button
-              key={type}
+              id="mission-view-toggle"
               type="button"
-              disabled={!isSessionStarted}
-              className={cn(
-                "h-9 px-4 rounded-3xl whitespace-nowrap t-p-14-m transition-colors text-neutral-100",
-                cn({
-                  "bg-neutral-600": filter === type && isSessionStarted,
-                })
-              )}
-              onClick={() => {
-                setFilter(type);
-                scrollTo(0);
-              }}
+              className="w-6 h-6 text-neutral-100"
+              onClick={toggleViewMode}
+              aria-label={viewMode === "card" ? "목록으로 보기" : "카드로 보기"}
             >
-              {getFilterLabels(recommendations, filter)[type]}
+              {viewMode === "card" ? (
+                <ListIcon variant="white" />
+              ) : (
+                <GridIcon variant="white" />
+              )}
             </button>
-          ))}
+          )}
         </div>
-        {isSessionStarted && (
-          <button
-            id="mission-view-toggle"
-            type="button"
-            className="w-6 h-6 text-neutral-100"
-            onClick={toggleViewMode}
-            aria-label={viewMode === "card" ? "목록으로 보기" : "카드로 보기"}
-          >
-            {viewMode === "card" ? (
-              <ListIcon variant="white" />
-            ) : (
-              <GridIcon variant="white" />
-            )}
-          </button>
-        )}
-      </div>
 
-      {viewMode === "card" ? (
-        <div id="mission-carousel" className="overflow-hidden" ref={emblaRef}>
-          <div className="flex items-center p-2 pb-4">
-            {isSessionStarted ? (
-              filteredRecommendations.length > 0 ? (
-                filteredRecommendations.map((mission, index) => (
-                  <MissionGridCard
-                    key={mission.missionId}
-                    {...createMissionCardProps(mission)}
-                    type="main"
-                    isSelected={index === selectedIndex}
+        {viewMode === "card" ? (
+          <div id="mission-carousel" className="overflow-hidden" ref={emblaRef}>
+            <div className="flex items-center p-2 pb-4">
+              {isSessionStarted ? (
+                filteredRecommendations.length > 0 ? (
+                  filteredRecommendations.map((mission, index) => (
+                    <MissionGridCard
+                      key={mission.missionId}
+                      {...createMissionCardProps(mission)}
+                      type="main"
+                      isSelected={index === selectedIndex}
+                    />
+                  ))
+                ) : (
+                  <MissionEmpty
+                    status={filter as "success" | "failed" | "not_tried"}
+                    onClickRecommend={() => setFilter("not_tried")}
                   />
-                ))
+                )
               ) : (
-                <MissionEmpty
-                  status={filter as "success" | "failed" | "not_tried"}
-                  onClickRecommend={() => setFilter("not_tried")}
+                <MissionLockCard />
+              )}
+            </div>
+          </div>
+        ) : (
+          <div id="mission-list" className="flex flex-col gap-2 px-4 pb-[88px]">
+            {filteredRecommendations.length > 0 ? (
+              filteredRecommendations.map((mission) => (
+                <MissionListCard
+                  key={mission.missionId}
+                  {...createMissionCardProps(mission)}
                 />
-              )
+              ))
             ) : (
-              <MissionLockCard />
+              <MissionEmpty
+                status={filter as "success" | "failed" | "not_tried"}
+                onClickRecommend={() => setFilter("not_tried")}
+              />
             )}
           </div>
-        </div>
-      ) : (
-        <div id="mission-list" className="flex flex-col gap-2 px-4">
-          {filteredRecommendations.length > 0 ? (
-            filteredRecommendations.map((mission) => (
-              <MissionListCard
-                key={mission.missionId}
-                {...createMissionCardProps(mission)}
-              />
-            ))
-          ) : (
-            <MissionEmpty
-              status={filter as "success" | "failed" | "not_tried"}
-              onClickRecommend={() => setFilter("not_tried")}
-            />
-          )}
-        </div>
-      )}
+        )}
+      </div>
       <MissionTimer
         showMockStopButton={showMockStopButton}
         isTooltipOpen={!isSessionStarted}
       />
-    </div>
+    </>
   );
 }