Merge pull request #7 from SOPT-all/init/#6/storybook

[Init/#6] story book 설치 및 테스트

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="./src/styles/fonts/fonts.css" />

.storybook/preview.tsx

@@ -0,0 +1,26 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import { ThemeProvider, Global } from '@emotion/react';
+import GlobalStyle from '../src/styles/global';
+import theme from '../src/styles/theme';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Global styles={GlobalStyle} />
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default preview;

eslint.config.js

@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   { ignores: ['dist'] },
@@ -24,21 +24,22 @@ export default tseslint.config(
         { allowConstantExport: true },
       ],
       'no-var': 'error', // var 금지
+      '@typescript-eslint/no-unused-vars': 'warn',
       'prefer-const': 'error', // const 사용을 권장하고, let은 const로 바꿀 수 있으면 바꾸도록
       'prefer-template': 'warn', // 문자열 결합시 템플릿 리터럴 사용 강제
       'capitalized-comments': [
         'warn',
         'always',
-        { 
-          ignoreConsecutiveComments: true, 
-          ignorePattern: '^[A-Z_]+$' // 대문자 스네이크 케이스 상수 이름 규칙 추가
-        }
+        {
+          ignoreConsecutiveComments: true,
+          ignorePattern: '^[A-Z_]+$', // 대문자 스네이크 케이스 상수 이름 규칙 추가
+        },
       ],
       // 함수명 네이밍 규칙
-      'camelcase': ['error', { properties: 'always' }], // 카멜 케이스 사용을 강제
+      camelcase: ['error', { properties: 'always' }], // 카멜 케이스 사용을 강제
       // 화살표 함수 사용을 권장하는 규칙
       'prefer-arrow-callback': 'warn', // 가능하면 화살표 함수 사용
       'arrow-body-style': ['warn', 'as-needed'], // 화살표 함수 본문을 간소화 필요없는 중괄호 제거
     },
   },
-)
+);

package.json

@@ -9,6 +9,8 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "svgr": "npx @svgr/cli -d src/assets/svgs --ignore-existing --typescript --no-dimensions public/svgs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "prepare": "husky install",
     "lint-front": "lint-staged"
   },
@@ -27,19 +29,36 @@
     "vite-tsconfig-paths": "^5.1.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.2",
     "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "8.4.4",
+    "@storybook/addon-onboarding": "8.4.4",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/blocks": "8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "8.4.4",
+    "@storybook/test": "8.4.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.1",
     "globals": "^15.11.0",
     "husky": "^8.0.0",
     "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "storybook": "8.4.4",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.11",
     "vite-plugin-svgr": "^4.3.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

src/assets/svgs/buger/index.ts

@@ -0,0 +1,10 @@
+export { default as ImgMenu1 } from './ImgMenu1';
+export { default as ImgMenu10 } from './ImgMenu10';
+export { default as ImgMenu2 } from './ImgMenu2';
+export { default as ImgMenu3 } from './ImgMenu3';
+export { default as ImgMenu4 } from './ImgMenu4';
+export { default as ImgMenu5 } from './ImgMenu5';
+export { default as ImgMenu6 } from './ImgMenu6';
+export { default as ImgMenu7 } from './ImgMenu7';
+export { default as ImgMenu8 } from './ImgMenu8';
+export { default as ImgMenu9 } from './ImgMenu9';

src/components/BugerPost/BugerPost.style.ts

@@ -0,0 +1,40 @@
+import { Theme, css } from '@emotion/react';
+import theme from 'src/styles/theme';
+
+export const postStyleContainer = (theme: Theme) => css`
+  display: flex;
+  width: 16.9rem;
+  height: 25.4rem;
+  padding: 2.4rem 2rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.2rem;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+  background-color: ${theme.colors.gray000};
+`;
+export const imageSection = css`
+  display: flex;
+  height: 11rem;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  align-self: stretch;
+`;
+
+export const titleSection = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.8rem;
+  align-self: stretch;
+  .title__ko {
+    color: ${theme.colors.gray600};
+    text-align: center;
+    ${theme.fonts.body04};
+  }
+  .title__en {
+    color: ${theme.colors.gray500};
+    ${theme.fonts.caption01};
+  }
+`;

src/components/BugerPost/BugerPost.tsx

@@ -0,0 +1,29 @@
+import { ImgMenu1 } from '@assets/svgs/buger';
+import {
+  postStyleContainer,
+  titleSection,
+  imageSection,
+} from './BugerPost.style';
+import { ThemeProvider } from '@emotion/react';
+import theme from 'src/styles/theme';
+
+type BugerPostProps = {
+  titleKo: string;
+  titleEn: string;
+};
+
+const BurgerPost = ({ titleEn, titleKo }: BugerPostProps) => (
+  <ThemeProvider theme={theme}>
+    <div css={postStyleContainer}>
+      <section css={imageSection}>
+        <ImgMenu1 />
+      </section>
+      <section css={titleSection}>
+        <p className="title__ko">{titleKo}</p>
+        <p className="title__en">{titleEn}</p>
+      </section>
+    </div>
+  </ThemeProvider>
+);
+
+export default BurgerPost;

src/components/BugerPost/BurgerPost.stories.tsx

@@ -0,0 +1,16 @@
+import BurgerPost from './BugerPost';
+
+export default {
+  title: 'Components/BurgerPost',
+  component: BurgerPost,
+};
+
+export const Default = {
+  args: {},
+};
+
+export const Favorited = {
+  args: {
+    isHighlighted: true,
+  },
+};

src/layouts/Layout.tsx

@@ -1,11 +1,9 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from 'react-router-dom';
 
-const Layout = () => {
-  return (
-    <>
-      <Outlet />
-    </>
-  );
-};
+const Layout = () => (
+  <>
+    <Outlet />
+  </>
+);
 
 export default Layout;

src/pages/Main.tsx

@@ -1,6 +1,3 @@
-const Main = () => {
-
-  return <div>Main</div>;
-};
+const Main = () => <div>Main</div>;
 
 export default Main;