Nexters · sikkzz · Jan 29, 2025 · Jan 28, 2025 · Jan 28, 2025 · Jan 28, 2025
@@ -0,0 +1,74 @@
+name: Chromatic Deployment
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  chromatic-deployment:
+    name: Chromatic
+    runs-on: ubuntu-latest
+    outputs:
+      statis: ${{ job.status }}
+      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
+      currnent_time: ${{ steps.current-time.outputs.formattedTime }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "yarn"
+
+      - name: Set yarn version
+        id: set-version
+        run: |
+          yarn set version 4.1.1
+          echo "YARN_VERSION=$(yarn -v)" >> $GITHUB_OUTPUT
+
+      - name: Yarn cache - PnP
+        uses: actions/cache@v4
+        with:
+          path: |
+            .yarn/cache
+            .pnp.*
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ steps.set-version.outputs.YARN_VERSION }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Publish to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          exitZeroOnChanges: true
+          autoAcceptChanges: true
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - name: Get current time
+        uses: josStorer/get-current-time@v2
+        id: current-time
+        with:
+          format: "YYYY년 MM월 DD일 HH시 mm분"
+          utcOffset: "+09:00"
+
+  github-storybook-comment:
+    runs-on: ubuntu-latest
+    needs: [chromatic-deployment]
+    steps:
+      - name: Comment PR
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          comment-tag: ${{ github.event.number }}-storybook
+          message: |
+
+            🧷 Storybook: ${{ needs.chromatic-deployment.outputs.storybook_url }}
+
+            ⏰ Update: ${{ needs.chromatic-deployment.outputs.currnent_time }}
@@ -0,0 +1,14 @@
+.Wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.Story {
+  height: 100%;
+  padding: 2.5rem;
+  background-color: gray;
+}
@@ -0,0 +1,26 @@
+import type { Preview } from "@storybook/react";
+
+import styles from "./preview.module.scss";
+
+const preview: Preview = {
+  parameters: {
+    layout: "centered",
+    options: {
+      storySort: {
+        order: ["ReadMe", "Changelog", "*", "components"],
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <div className={styles.Wrapper}>
+        <div className={styles.Story}>
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export default preview;
@@ -1,8 +1,7 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>misik</title>
   </head>

@@ -11,6 +11,7 @@
     "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
     "format": "prettier --write src/**/*.{ts,tsx,js,jsx}",
     "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "jest",
     "cypress": "cypress open"
   },
@@ -41,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "chromatic": "^11.25.1",
     "cypress": "^14.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.0.1",
@@ -61,6 +63,7 @@
     "typescript": "5.4.5",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^6.0.5",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "packageManager": "[email protected]"

@@ -1,7 +1,5 @@
-import Button from "@/components/Button";
-
 const App = () => {
-  return <Button />;
+  return <div>App</div>;
 };
 
 export default App;
@@ -0,0 +1,48 @@
+import Icon from "@/components/ui/Icon/Icon";
+import { ICONS } from "@/components/ui/Icon/Icon";
+import type { IconNameType } from "@/components/ui/Icon/Icon";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Icon> = {
+  title: "Example/Icon",
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    name: {
+      control: {
+        type: "select",
+        options: ["camera", "close", "gallery", "leftArrow", "paste", "plus"],
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const AllIcons: StoryObj<typeof Icon> = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: "4rem" }}>
+      {(Object.keys(ICONS) as IconNameType[]).map((iconName) => (
+        <div
+          style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}
+        >
+          <div
+            style={{
+              width: "1.5rem",
+              height: "1.5rem",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Icon name={iconName} />
+          </div>
+          <p>{iconName}</p>
+        </div>
+      ))}
+    </div>
+  ),
+};
@@ -0,0 +1,26 @@
+import CameraIcon from "@/assets/svg/ic-camera.svg?react";
+import CloseIcon from "@/assets/svg/ic-close.svg?react";
+import GalleryIcon from "@/assets/svg/ic-gallery.svg?react";
+import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react";
+import PasteIcon from "@/assets/svg/ic-paste.svg?react";
+import PlusIcon from "@/assets/svg/ic-plus.svg?react";
+
+export type IconNameType = "camera" | "close" | "gallery" | "leftArrow" | "paste" | "plus";
+
+export const ICONS = {
+  camera: CameraIcon,
+  close: CloseIcon,
+  gallery: GalleryIcon,
+  leftArrow: LeftArrowIcon,
+  paste: PasteIcon,
+  plus: PlusIcon,
+};
+
+// 추후 사이즈, 컬러등 추가 가능
+const Icon = ({ name }: { name: IconNameType }) => {
+  const SvgIcon = ICONS[name];
+
+  return <SvgIcon />;
+};
+
+export default Icon;
@@ -25,7 +25,7 @@
       "@/*": ["./src/*"]
     },
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
-    "types": ["@testing-library/jest-dom", "vite/client"]
+    "types": ["@testing-library/jest-dom", "vite-plugin-svgr/client", "vite/client"]
   },
   "include": ["src", "src/types"]
 }
@@ -3,10 +3,11 @@ import path from "path";
 import react from "@vitejs/plugin-react";
 
 import { defineConfig } from "vite";
+import vitePluginSvgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), vitePluginSvgr()],
   base: "/",
   resolve: {
     alias: {