feat: icon 컴포넌트 사용

Author: JKyEun

src/routeTree.gen.ts

@@ -38,10 +38,10 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const MissionIndexRoute = MissionIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => MissionRouteRoute,
+const OnboardingIndexRoute = OnboardingIndexRouteImport.update({
+  id: '/onboarding/',
+  path: '/onboarding/',
+  getParentRoute: () => rootRouteImport,
 } as any)
 const MissionIndexRoute = MissionIndexRouteImport.update({
   id: '/',
@@ -92,47 +92,31 @@ export interface FileRoutesById {
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
-    |
     | '/'
-   
     | '/mission'
     | '/difficulty'
-   
     | '/gym'
-   
     | '/mission/$missionId'
     | '/users/$userId'
-   
     | '/mission/'
     | '/onboarding'
   fileRoutesByTo: FileRoutesByTo
   to:
-    |
     | '/'
-   
     | '/difficulty'
-   
     | '/gym'
-   
     | '/mission/$missionId'
     | '/users/$userId'
-   
     | '/mission'
     | '/onboarding'
   id:
-    |
     | '__root__'
-   
     | '/'
-   
     | '/mission'
     | '/difficulty'
-   
     | '/gym'
-   
     | '/mission/$missionId'
     | '/users/$userId'
-   
     | '/mission/'
     | '/onboarding/'
   fileRoutesById: FileRoutesById

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

@@ -1,5 +1,7 @@
 import * as Select from "@radix-ui/react-select";
 import { useState } from "react";
+import CheckIcon from "../../../components/icons/CheckIcon";
+import ChevronDownIcon from "../../../components/icons/ChevronDownIcon";
 
 const gyms = [
   { id: "gangnam", name: "더클라임 강남" },
@@ -22,22 +24,7 @@ export default function MissionHeader() {
               <Select.Trigger className="inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                 <Select.Value placeholder="암장 선택" />
                 <Select.Icon className="ml-2">
-                  <svg
-                    width="15"
-                    height="15"
-                    viewBox="0 0 15 15"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    aria-label="Select Gym"
-                    role="img"
-                  >
-                    <path
-                      d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.26618 11.9026 7.38064 11.95 7.49999 11.95C7.61933 11.95 7.73379 11.9026 7.81819 11.8182L10.0682 9.56819Z"
-                      fill="currentColor"
-                      fillRule="evenodd"
-                      clipRule="evenodd"
-                    ></path>
-                  </svg>
+                  <ChevronDownIcon variant="dark" />
                 </Select.Icon>
               </Select.Trigger>
               <Select.Portal>
@@ -52,22 +39,7 @@ export default function MissionHeader() {
                         >
                           <Select.ItemText>{gym.name}</Select.ItemText>
                           <Select.ItemIndicator className="absolute left-2 w-4 h-4">
-                            <svg
-                              width="15"
-                              height="15"
-                              viewBox="0 0 15 15"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                              aria-label="Select Gym"
-                              role="img"
-                            >
-                              <path
-                                d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-                                fill="currentColor"
-                                fillRule="evenodd"
-                                clipRule="evenodd"
-                              ></path>
-                            </svg>
+                            <CheckIcon variant="dark" width={15} height={15} />
                           </Select.ItemIndicator>
                         </Select.Item>
                       ))}

src/routes/mission/index.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import useEmblaCarousel from "embla-carousel-react";
 import { useState } from "react";
+import PlayIcon from "../../components/icons/PlayIcon";
 import MissionCard from "./-components/MissionCard";
 
 export const Route = createFileRoute("/mission/")({
@@ -136,17 +137,7 @@ function Mission() {
             className="w-16 h-16 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center transition-colors"
             aria-label="시작하기"
           >
-            <svg
-              aria-label="시작하기"
-              role="img"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
-            </svg>
+            <PlayIcon variant="white" />
           </button>
         </div>
       </div>