73-refactor_project_structure

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'next/core-web-vitals',
     'plugin:@typescript-eslint/recommended',
     'prettier',
+    'plugin:storybook/recommended',
   ],
   rules: {
     //#region  //*=========== jsx-a11y/label-has-associated-control ===========

.gitignore

@@ -40,3 +40,5 @@ next-env.d.ts
 robots.txt
 sitemap.xml
 sitemap-*.xml
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+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-styling-webpack',
+    'storybook-dark-mode',
+    '@storybook/addon-styling',
+    'storybook-addon-mantine',
+    '@tomfreudenberg/next-auth-mock/storybook',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import '@mantine/core/styles.css';
+import '@mantine/tiptap/styles.css';
+import 'reactflow/dist/style.css';
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+export default preview;

.storybook/preview.tsx

@@ -0,0 +1,35 @@
+import { MantineProvider } from '@mantine/core';
+
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+
+import React from 'react';
+import { GlobalStyle } from '../src/styles/globalStyle';
+
+import { ModalsProvider } from '@mantine/modals';
+import '@mantine/tiptap/styles.css';
+import 'reactflow/dist/style.css';
+import { ThemeProvider } from 'styled-components';
+import SessionWrapper from '../src/providers/SessionProvider';
+import StyledComponentsProvider from '../src/providers/StyledComponentsProvider';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
+const GlobalStyles = GlobalStyle;
+
+export const decorators = [
+  (renderStory: any) => (
+    <MantineProvider>
+      <SessionWrapper>
+        <ModalsProvider>
+          <StyledComponentsProvider>{renderStory()}</StyledComponentsProvider>
+        </ModalsProvider>
+      </SessionWrapper>
+    </MantineProvider>
+  ),
+  withThemeFromJSXProvider({
+    Provider: ThemeProvider,
+    GlobalStyles,
+  }),
+];

package.json

@@ -15,7 +15,9 @@
     "format": "prettier -w .",
     "format:check": "prettier -c .",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
-    "prepare": "husky"
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@auth/core": "^0.28.0",
@@ -33,6 +35,7 @@
     "@mantine/rte": "^5.10.5",
     "@mantine/spotlight": "^7.5.2",
     "@mantine/tiptap": "^7.6.1",
+    "@storybook/addon-themes": "^8.0.8",
     "@tabler/icons-react": "^2.47.0",
     "@tanstack/react-query": "^5.24.7",
     "@tiptap/extension-bullet-list": "^2.2.4",
@@ -51,6 +54,7 @@
     "@tiptap/pm": "^2.2.4",
     "@tiptap/react": "^2.2.4",
     "@tiptap/starter-kit": "^2.2.4",
+    "@tomfreudenberg/next-auth-mock": "^0.5.6",
     "dayjs": "^1.11.10",
     "elkjs": "^0.9.2",
     "embla-carousel-react": "^8.0.0-rc22",
@@ -74,8 +78,19 @@
     "zustand": "^4.5.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
     "@commitlint/cli": "^18.6.0",
     "@commitlint/config-conventional": "^18.6.0",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/nextjs": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/test": "^8.0.8",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/eslint-plugin-query": "^5.20.1",
     "@tanstack/react-query-devtools": "^5.24.7",
@@ -92,6 +107,7 @@
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^9.0.10",
     "jest": "^29.7.0",
@@ -103,6 +119,9 @@
     "postcss": "^8.4.35",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
+    "storybook": "^8.0.8",
+    "storybook-addon-mantine": "^4.0.2",
+    "storybook-dark-mode": "^4.0.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },

src/components/MainPage.tsx → src/app/MainPage.tsx

@@ -1,52 +1,22 @@
 'use client';
 
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { PropsWithChildren, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-import { apiRoutes } from '@/constants';
+import { API_ROUTES } from '@/constants';
+import { getApiResponse } from '@/utils/get-api-response';
 import { getPageNum } from '@/utils/shared';
-import { getApiResponse } from '@/utils/shared/get-api-response';
 
-import { ArticlesCardsGrid } from './shared/grid/ArticlesCardsGrid';
-import { SkeletonCardsGrid } from './shared/grid/SkeletonGrid';
+import { ItemsCardsGrid } from '../components/shared/ItemsCardsGrid';
+import { SkeletonCardsGrid } from '../components/shared/SkeletonGrid';
 
-import { DataWithPages } from '@/types';
+import { Postdata } from '@/types/post';
 
-export interface Member {
-  id: number;
-  email: string;
-  nickname: string;
-  bio: string;
-  avatarUrl: null | string;
-  githubUrl: null | string;
-  blogUrl: null | string;
-  baekjoonId: null | string;
-}
-export interface Post {
-  id: number;
-  title: string;
-  description: string;
-  thumbnailUrl: typeof url;
-  likeCount: number;
-  joinCount: number;
-  createdAt: Date | string;
-  updatedAt: Date | string;
-  member: Member;
-}
-export const url = `${apiRoutes.roadmapPaged}2&order-type=recent`;
-
-export interface Postdata extends DataWithPages {
-  result: Array<Post | null>;
-}
-
-export interface PageProps extends PropsWithChildren {
-  postData: Postdata | null;
-}
 const loadDataFromApi = async ({ pageParam }: { pageParam: number }) => {
   const [postData] = await Promise.all([
     getApiResponse<Postdata>({
-      apiEndpoint: `${apiRoutes.roadmapPaged}${pageParam}&order-type=recent`,
+      apiEndpoint: `${API_ROUTES.roadmapPaged}${pageParam}&order-type=recent`,
       revalidate: 60 * 12, // 30 mins cache
     }),
   ]);
@@ -100,16 +70,13 @@ export default function Mainpage() {
         <section>
           {posts.pages.map(({ postData }, index) =>
             postData?.next ? (
-              <ArticlesCardsGrid
+              <ItemsCardsGrid
                 key={index}
                 postData={postData?.result}
                 innerRef={ref}
               />
             ) : (
-              <ArticlesCardsGrid
-                key={index}
-                postData={postData?.result || []}
-              />
+              <ItemsCardsGrid key={index} postData={postData?.result || []} />
             ),
           )}
         </section>

src/app/api/auth/[...nextauth]/auth.ts

@@ -2,24 +2,13 @@ import NextAuth, { User } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
 
 // import GithubProvider from 'next-auth/providers/github';
-import { apiRoutes } from '@/constants';
+import { API_ROUTES } from '@/constants';
+import { consoleLog } from '@/utils/console-log';
+import { getApiResponse } from '@/utils/get-api-response';
 import { omit } from '@/utils/shared';
-import { consoleLog } from '@/utils/shared/console-log';
-import { getApiResponse } from '@/utils/shared/get-api-response';
-export const runtime = 'edge';
 
-interface Member {
-  id: number;
-  email: string;
-  nickname: string;
-  bio?: null | string;
-  avatarUrl?: null | string;
-  githubUrl?: null | string;
-  blogUrl?: null | string;
-  baekjoonId?: null | string;
-  provider?: string;
-  accessToken?: string;
-}
+import { Member } from '@/types/user';
+export const runtime = 'edge';
 
 interface AuthResponse {
   member?: Member | null;
@@ -57,7 +46,7 @@ export const {
                 password: credentials.password,
               }),
               headers: { 'Content-Type': 'application/json' },
-              apiEndpoint: `${apiRoutes.signin}`,
+              apiEndpoint: `${API_ROUTES.signin}`,
               method: 'POST',
             }),
           );
@@ -66,7 +55,7 @@ export const {
             const userInfo = await Promise.resolve(
               getApiResponse<AuthResponse | null>({
                 headers: { 'Content-Type': 'application/json' },
-                apiEndpoint: `${apiRoutes.userInfoSlash}${res?.id}`,
+                apiEndpoint: `${API_ROUTES.userInfoSlash}${res?.id}`,
               }),
             );
             const user = {

src/app/auth/components/LoginButton.tsx

@@ -0,0 +1,13 @@
+import { Box, Text } from '@mantine/core';
+import { signIn } from 'next-auth/react';
+
+const LoginButton = () => {
+  return (
+    <Box mt='lg'>
+      <Text className='hvr txt' onClick={() => signIn()} size='sm' ta='center'>
+        로그인하러 가기
+      </Text>
+    </Box>
+  );
+};
+export default LoginButton;

src/app/auth/components/stories/LoginButton.stories.ts

@@ -0,0 +1,13 @@
+import LoginButton from '@/app/auth/components/LoginButton';
+
+export default {
+  title: '회원가입/로그인하러 가기',
+  component: LoginButton,
+  args: { primary: true, label: '로그인하러 가기' },
+  tags: ['autodocs'],
+};
+
+export const Default = {};
+export const Secondary = { args: { primary: false } };
+export const Large = { args: { size: 'large' } };
+export const LargeSecondary = { args: { ...Large.args, ...Secondary.args } };