SOPT-all · seong-hui · Jan 20, 2025 · Jan 13, 2025 · Jan 13, 2025 · Jan 13, 2025
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -0,0 +1,42 @@
+name: 'Chromatic Deployment'
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+permissions: write-all
+
+jobs:
+  chromatic:
+    name: 'Run Chromatic'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          onlyChanged: true
+          autoAcceptChanges: true
+
+      - name: Create comment PR
+        uses: thollander/actions-comment-pull-request@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN}}
+        with:
+          comment_tag: ${{ github.event.pull_request.number }}-storybook
+          message: |
+            🪷 Storybook 확인 🪷
+            🔗 ${{ steps.chromatic.outputs.storybookUrl }}
+          edit_mode: update
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 *storybook.log
+.env
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,15 +1,16 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    'storybook-addon-react-router-v6',
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
 };

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script
+  type="text/javascript"
+  src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xflkwfbdso"></script>
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,38 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import { withRouter } from 'storybook-addon-react-router-v6';
+import '../src/styles/fonts.css';
+import '../src/styles/global.css';
+import '../src/styles/reset.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+      reactRouter: {
+        routePath: '/',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>
+          {`
+            html, body {
+              font-size: 62.5%;
+            }
+          `}
+        </style>
+        <Story />
+      </>
+    ),
+    withRouter,
+  ],
+};
+
+export default preview;
diff --git a/index.html b/index.html
@@ -9,5 +9,8 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="text/javascript"
+      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xflkwfbdso"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -20,7 +20,9 @@
     "@vanilla-extract/vite-plugin": "^4.0.19",
     "axios": "^1.7.9",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.1",
+    "storybook-addon-react-router-v6": "^2.0.15"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",
@@ -33,11 +35,13 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@tanstack/react-query-devtools": "^5.62.11",
+    "@types/navermaps": "^3.7.8",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^8.19.0",
     "@typescript-eslint/parser": "^8.19.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "chromatic": "^11.22.1",
     "eslint": "^9.17.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -52,6 +56,7 @@
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
     "storybook": "^8.4.7",
+    "storybook-addon-react-router-v6": "^2.0.15",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,11 @@
+import { Outlet } from 'react-router-dom';
+
 const App = () => {
-  return <div></div>;
+  return (
+    <main style={{ margin: '0 auto', width: '37.5rem', minHeight: '100vh' }}>
+      <Outlet />
+    </main>
+  );
 };
 
 export default App;
diff --git a/src/assets/images/home_card_look.png b/src/assets/images/home_card_look.png
diff --git a/src/assets/images/home_card_map.png b/src/assets/images/home_card_map.png
diff --git a/src/assets/images/icn_map.png b/src/assets/images/icn_map.png
diff --git a/src/assets/images/img_gray_light_leaf_large.png b/src/assets/images/img_gray_light_leaf_large.png
diff --git a/src/assets/images/img_pink_light_smile.png b/src/assets/images/img_pink_light_smile.png
diff --git a/src/assets/images/img_yellow_light_smile.png b/src/assets/images/img_yellow_light_smile.png
diff --git a/src/assets/svgs/icn_arrow_black_left.svg b/src/assets/svgs/icn_arrow_black_left.svg
diff --git a/src/assets/svgs/icn_arrow_gray_down.svg b/src/assets/svgs/icn_arrow_gray_down.svg
diff --git a/src/assets/svgs/icn_arrow_gray_right.svg b/src/assets/svgs/icn_arrow_gray_right.svg
diff --git a/src/assets/svgs/icn_arrow_gray_up.svg b/src/assets/svgs/icn_arrow_gray_up.svg
diff --git a/src/assets/svgs/icn_back_black_left.svg b/src/assets/svgs/icn_back_black_left.svg
diff --git a/src/assets/svgs/icn_close_large_gray.svg b/src/assets/svgs/icn_close_large_gray.svg
diff --git a/src/assets/svgs/icn_close_small_gray.svg b/src/assets/svgs/icn_close_small_gray.svg
diff --git a/src/assets/svgs/icn_divider.svg b/src/assets/svgs/icn_divider.svg
diff --git a/src/assets/svgs/icn_double_arrow_lightgray_down.svg b/src/assets/svgs/icn_double_arrow_lightgray_down.svg
diff --git a/src/assets/svgs/icn_filter.svg b/src/assets/svgs/icn_filter.svg
diff --git a/src/assets/svgs/icn_flower_gray.svg b/src/assets/svgs/icn_flower_gray.svg
diff --git a/src/assets/svgs/icn_flower_pink.svg b/src/assets/svgs/icn_flower_pink.svg
diff --git a/src/assets/svgs/icn_home.svg b/src/assets/svgs/icn_home.svg
diff --git a/src/assets/svgs/icn_insta.svg b/src/assets/svgs/icn_insta.svg
diff --git a/src/assets/svgs/icn_kakao_logo.svg b/src/assets/svgs/icn_kakao_logo.svg
diff --git a/src/assets/svgs/icn_large_heart_pink.svg b/src/assets/svgs/icn_large_heart_pink.svg
diff --git a/src/assets/svgs/icn_linearrow_large_right.svg b/src/assets/svgs/icn_linearrow_large_right.svg
diff --git a/src/assets/svgs/icn_linearrow_small_left.svg b/src/assets/svgs/icn_linearrow_small_left.svg
diff --git a/src/assets/svgs/icn_linearrow_small_right.svg b/src/assets/svgs/icn_linearrow_small_right.svg