Merge branch 'dev' into bugFix/handle-401-error

# Conflicts:
#	yarn.lock

.eslintrc.cjs

@@ -1,12 +1,7 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-    'prettier',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'prettier', 'plugin:storybook/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],

.github/workflows/storybook.yml

@@ -0,0 +1,24 @@
+name: Deploy Storybook
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+  workflow_dispatch:
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.build-publish.outputs.page_url }}
+    steps:
+    - id: build-publish
+      uses: bitovi/[email protected]
+      with:
+        path: storybook-static
+        install_command: yarn install
+        build_command: yarn run build-storybook

.gitignore

@@ -30,3 +30,5 @@ dist-ssr
 .env.local
 
 /cert
+
+*storybook.log

.storybook/Ludo.ts

@@ -0,0 +1,15 @@
+import { create } from '@storybook/theming/create';
+import { color } from '../src/Styles/theme';
+import { Logo } from '../src/Assets';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'Ludo',
+  brandUrl: 'https://ludoapi.store',
+  brandImage: Logo,
+  brandTarget: '_self',
+
+  colorPrimary: color.orange1,
+  colorSecondary: color.purple1,
+});

.storybook/main.ts

@@ -0,0 +1,23 @@
+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-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    'storybook-addon-remix-react-router',
+    '@storybook/addon-a11y',
+    '@storybook/addon-mdx-gfm'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import Ludo from './Ludo';
+
+addons.setConfig({
+  theme: Ludo,
+});

.storybook/preview.tsx

@@ -0,0 +1,40 @@
+import type { Preview } from '@storybook/react';
+import ReactQueryProvider from '@/Providers/QueryProvider';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@/Styles/theme';
+import { GlobalStyle } from '@/Styles/globalStyles';
+import { withRouter } from 'storybook-addon-remix-react-router';
+
+export default {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        order: ['Intro', 'Colors', 'Typography', 'Iconography'],
+      },
+    },
+    layout: 'centered',
+    docs: {
+      toc: true,
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ReactQueryProvider>
+        <ThemeProvider theme={theme}>
+          <GlobalStyle />
+          <Story />
+        </ThemeProvider>
+      </ReactQueryProvider>
+    ),
+    withRouter,
+  ],
+} satisfies Preview;

package.json

@@ -9,7 +9,9 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "start:windows": "set HOST=local.ludoapi.store &&yarn dev"
+    "start:windows": "set HOST=local.ludoapi.store &&yarn dev",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
@@ -35,6 +37,17 @@
     "zustand": "^4.5.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
+    "@storybook/addon-a11y": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-mdx-gfm": "^8.0.9",
+    "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/test": "^8.0.8",
     "@types/node": "^20.11.10",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
@@ -44,8 +57,11 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^8.0.3",
     "prettier": "^3.2.5",
+    "storybook": "^8.0.8",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vite-plugin-mkcert": "^1.17.3",

src/App.tsx

@@ -9,7 +9,7 @@ import ReactQueryProvider from './Providers/QueryProvider/index.tsx';
 
 const App = () => {
   return (
-    <ReactQueryProvider>
+    <ReactQueryProvider showDevTools>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
         <LoginProvider>

src/Components/ApplicantCard/ApplicantCard.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ApplicantCard from '.';
+
+const meta = {
+  component: ApplicantCard,
+  args: {
+    id: 1,
+    nickname: '닉네임',
+    email: '[email protected]',
+    position: {
+      id: 1,
+      name: '백엔드',
+    },
+    studyId: 1,
+    title: '스터디',
+  },
+} satisfies Meta<typeof ApplicantCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** 기본 */
+export const Primary: Story = {
+  args: {
+    isOwner: false,
+  },
+};
+
+/** 자신이 스터디장일 때 */
+export const Owner: Story = {
+  args: {
+    isOwner: true,
+  },
+};

src/Components/ApplicantCard/index.tsx

@@ -13,11 +13,17 @@ import { useModalStore } from '@/store/modal';
 import { useQueryClient } from '@tanstack/react-query';
 
 interface ApplicantCardProps extends Omit<Member, 'role'> {
+  /** 스터디 ID */
   studyId: number;
+
+  /** 스터디명 */
   title: string;
+
+  /** 스터디장 여부 */
   isOwner: boolean;
 }
 
+/** 지원자 카드 */
 const ApplicantCard = ({ studyId, id: applicantId, title, nickname, email, position, isOwner }: ApplicantCardProps) => {
   const [applyStatus, setApplyStatus] = useState<ApplyStatus>('UNCHECKED');
   const { isModalOpen, closeModal } = useModalStore();

src/Components/Banner/Banner.stories.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Banner from '.';
+
+const meta = {
+  component: Banner,
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

src/Components/Banner/index.tsx

@@ -25,6 +25,7 @@ const useInterval: { (callback: () => void, interval: number): void } = (callbac
   }, [interval]);
 };
 
+/** 메인 페이지 배너 */
 const Banner = () => {
   const outRef = useRef<HTMLDivElement>(null);
   const slideRef = useRef<HTMLDivElement>(null);

src/Components/Button/ApplyButton/ApplyButton.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ApplyButton from '.';
+
+const meta = {
+  component: ApplyButton,
+} satisfies Meta<typeof ApplyButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: '지원',
+  },
+};

src/Components/Button/ApplyButton/index.tsx

@@ -5,6 +5,7 @@ export type ButtonProps = {
   children?: React.ReactNode;
 };
 
+/** 지원하기 버튼 */
 const ApplyButton = ({ children, onClick }: ButtonProps) => {
   return <ButtonWrapper onClick={onClick}>{children}</ButtonWrapper>;
 };

src/Components/Button/FilterButton.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FilterButton } from './FilterButton';
+import { fn } from '@storybook/test';
+
+const meta = {
+  component: FilterButton,
+} satisfies Meta<typeof FilterButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: '필터',
+    onClick: fn(),
+  },
+};

src/Components/Button/FilterButton.tsx

@@ -6,6 +6,7 @@ export type FilterProps = {
   children?: React.ReactNode;
 };
 
+/** 필터 버튼 */
 export const FilterButton = ({ children, onClick }: FilterProps) => {
   return (
     <>

src/Components/Button/MoreButton/MoreButton.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MoreButton from '.';
+
+const meta = {
+  component: MoreButton,
+} satisfies Meta<typeof MoreButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: <div>더보기</div>,
+  },
+};

src/Components/Button/MoreButton/index.tsx

@@ -5,6 +5,7 @@ export type ButtonProps = {
   children?: React.ReactNode;
 };
 
+/** 더보기 버튼 */
 const MoreButton = ({ children, onClick }: ButtonProps) => {
   return <ButtonWrapper onClick={onClick}>{children}</ButtonWrapper>;
 };

src/Components/Button/MoveToTopButton/MoveToTopButton.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MoveToTopButton from '.';
+
+const meta = {
+  component: MoveToTopButton,
+} satisfies Meta<typeof MoveToTopButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: '위로',
+  },
+};

src/Components/Button/Studies/BigCategoryButton.stories.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BigCategoryButton } from './BigCategoryButton';
+
+const meta = {
+  component: BigCategoryButton,
+} satisfies Meta<typeof BigCategoryButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

src/Components/Button/Studies/CalendarButton.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarButton } from './CalendarButton';
+
+const meta = {
+  component: CalendarButton,
+} satisfies Meta<typeof CalendarButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: '캘린더',
+  },
+};

src/Components/Button/Studies/ContactButton.stories.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ContactButton } from './ContactButton';
+
+const meta = {
+  component: ContactButton,
+} satisfies Meta<typeof ContactButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

src/Components/Button/Studies/GatherButton.stories.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GatherButton } from './GatherButton';
+
+const meta = {
+  component: GatherButton,
+} satisfies Meta<typeof GatherButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};