코드리뷰용 PR

.eslintrc.js

@@ -0,0 +1,129 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2021: true, node: true },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'next/core-web-vitals',
+    'next/typescript',
+    'plugin:storybook/recommended',
+  ],
+  plugins: ['@typescript-eslint', 'react', 'jsx-a11y', 'import', 'prettier', 'filenames'],
+  rules: {
+    'prettier/prettier': 'error',
+    'filenames/match-regex': ['error', '^[a-z-]+.[a-z]+$'],
+    'react/jsx-pascal-case': 'error',
+    camelcase: ['error', { properties: 'never' }],
+    'react/jsx-handler-names': [
+      'error',
+      {
+        eventHandlerPrefix: 'handle',
+        eventHandlerPropPrefix: 'on',
+      },
+    ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'variable',
+        types: ['boolean'],
+        format: ['PascalCase'],
+        prefix: ['is', 'has', 'should'],
+      },
+      {
+        selector: 'variable',
+        types: ['function'],
+        format: ['camelCase'],
+        suffix: ['Ref'],
+        filter: {
+          regex: 'Ref$',
+          match: true,
+        },
+      },
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '(Props|Model)$',
+          match: true,
+        },
+      },
+      {
+        selector: 'typeAlias',
+        format: ['PascalCase'],
+        suffix: ['Type'],
+      },
+    ],
+    'react/destructuring-assignment': ['error', 'always'],
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+    ],
+    '@typescript-eslint/no-non-null-assertion': 'error',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+    'react/function-component-definition': [
+      2,
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
+    ],
+    'react/jsx-key': ['error', { checkFragmentShorthand: true }],
+    'react/jsx-no-duplicate-props': ['error', { ignoreCase: true }],
+    'jsx-a11y/alt-text': [
+      'error',
+      {
+        elements: ['img', 'object', 'area', 'input[type="image"]'],
+        img: ['Image'],
+        object: [],
+        area: [],
+        'input[type="image"]': [],
+      },
+    ],
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'import/no-default-export': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-unresolved': 'off',
+    'prefer-const': 'error',
+    'no-var': 'error',
+    eqeqeq: 'error',
+    'prefer-destructuring': [
+      'error',
+      {
+        array: false,
+        object: true,
+      },
+    ],
+    'no-useless-rename': 'error',
+    'object-shorthand': 'error',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        paths: ['src', '.'],
+      },
+    },
+  },
+  ignorePatterns: ['dist', '.eslintrc.js', 'public/mockServiceWorker.js'],
+}

.github/.gitmessage.txt

@@ -0,0 +1,27 @@
+# <타입>: <제목> (#이슈 번호) 의 형식으로 제목 작성
+
+# 변경 사항이 "무엇"인지 명확히 작성 / 끝에 마침표(.) 금지
+# 예) feat: 마이페이지에 개인정보 수정 버튼 추가 (#1)
+
+# 본문은 아래에 작성  
+
+# 여러 줄의 메시지를 작성할 땐 "-"로 구분
+# 본문은 "어떻게" 보다 "무엇을", "왜"를 설명
+
+# --- COMMIT END ---  
+#   <타입> 리스트  
+#   feat        : 기능 (새로운 기능)  
+#   fix         : 버그 수정  
+#   refactor    : 리팩토링  
+#   design      : CSS 등 사용자 UI 디자인 변경
+#   docs        : 문서 수정 (문서 추가, 수정, 삭제, README)  
+#   test        : 테스트 (테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)  
+#   settings    : 프로젝트 세팅 관련
+#   chore       : 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
+#   init        : 초기 생성  
+#   rename      : 파일 혹은 폴더명을 수정하거나 옮기는 작업만 한 경우  
+#   remove      : 파일을 삭제하는 작업만 수행한 경우  
+# ------------------  
+
+# 템플릿 설정 방법
+# git config commit.template .github/.gitmessage.txt

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,36 @@
+name: Bug
+description: 버그가 발생했나요?
+title: '[Bug] '
+labels: ['🐛 Bug']
+projects: ['FC-DEV-FinalProject/6']
+body:
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: 🐞 설명
+      description: 버그에 대한 설명을 작성해 주세요.
+    validations:
+      required: true
+  - type: textarea
+    id: bug-solution
+    attributes:
+      label: 💡 해결 방법
+      description: 해결 방법을 알고 있다면 작성해 주세요.
+    validations:
+      required: false
+  - type: textarea
+    id: bug-os
+    attributes:
+      label: 🌏 환경
+      description: 버그가 발생한 환경에 대해 작성해 주세요.
+      placeholder: |
+        OS: macOS 14.5
+    validations:
+      required: false
+  - type: textarea
+    id: bug-more
+    attributes:
+      label: 📝 메모
+      description: 더 하고 싶은 말이 있다면 작성해 주세요.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/documentation.yml

@@ -0,0 +1,21 @@
+name: Documentation
+description: 문서 추가/수정/삭제가 필요한가요?
+title: '[Docs] '
+labels: ['📃 Docs']
+projects: ['FC-DEV-FinalProject/6']
+body:
+  - type: textarea
+    id: docs-description
+    attributes:
+      label: 📄 설명
+      description: 추가/수정/삭제할 내용을 작성해 주세요.
+      placeholder: ex) README.md에 팀원 소개 추가
+    validations:
+      required: true
+  - type: textarea
+    id: docs-memo
+    attributes:
+      label: 📝 메모
+      description: 더 하고 싶은 말이 있다면 작성해 주세요.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,21 @@
+name: Feature
+description: 새로운 기능이나 명세가 있나요?
+title: '[Feat] '
+labels: ['✨ Feature']
+projects: ['FC-DEV-FinalProject/6']
+body:
+  - type: textarea
+    id: feature-todo
+    attributes:
+      label: ✅ 해야 할 일
+      description: 해야 할 일에 대한 Tasks를 작성해 주세요.
+      placeholder: 최대한 세분화해서 작성! (체크박스 활용하기)
+    validations:
+      required: true
+  - type: textarea
+    id: feature-memo
+    attributes:
+      label: 📝 메모
+      description: 더 하고 싶은 말이 있다면 작성해 주세요.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/refactor.yml

@@ -0,0 +1,21 @@
+name: Refactor
+description: 리팩토링이 필요한가요?
+title: '[Refactor] '
+labels: ['🔨 Refactor']
+projects: ['FC-DEV-FinalProject/6']
+body:
+  - type: textarea
+    id: refactor-todo
+    attributes:
+      label: ✅ 해야 할 일
+      description: 해야 할 일에 대한 Tasks를 작성해 주세요.
+      placeholder: 최대한 세분화해서 작성! (체크박스 활용하기)
+    validations:
+      required: true
+  - type: textarea
+    id: refactor-memo
+    attributes:
+      label: 📝 메모
+      description: 더 하고 싶은 말이 있다면 작성해 주세요.
+    validations:
+      required: false

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,21 @@
+# 🚀 풀 리퀘스트 제안
+
+## 🔍 작업 내용
+
+> 작업한 내용에 대해 자세히 설명해 주세요.
+
+## 🔧 변경 사항
+
+> 주요 변경 사항을 요약해 주세요. ex) validate 로직 수정, package.json 수정, 파일 수정/삭제 등
+
+## 📸 스크린샷 (권장)
+
+> 수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부해 주세요.
+
+## 🙏 리뷰 참고 (선택 사항)
+
+> 개발 과정에서 다른 분들의 의견이 궁금했거나 크로스 체크가 필요하다고 느껴진 코드가 있다면 남겨주세요.
+
+## 📄 기타 (선택 사항)
+
+> 그 외 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.

.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel
@@ -34,3 +35,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "semi": false,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^react$", "^next(/.*)?$", "<THIRD_PARTY_MODULES>", "^@/shared/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

.storybook/main.ts

@@ -0,0 +1,71 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+import path from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  webpackFinal: async (config) => {
+    if (config.module?.rules) {
+      const rules = config.module.rules as Array<any>
+      const scssRule = rules.find((rule) => rule.test && rule.test.toString().includes('scss'))
+      const imageRule = config.module?.rules?.find((rule) => {
+        const test = (rule as { test: RegExp }).test
+
+        if (!test) {
+          return false
+        }
+
+        return test.test('.svg')
+      }) as { [key: string]: any }
+
+      imageRule.exclude = /\.svg$/
+
+      config.module?.rules?.push({
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      })
+
+      if (scssRule) {
+        const sassLoader = scssRule.use.find(
+          (loader: any) => loader && loader.loader && loader.loader.includes('sass-loader')
+        )
+
+        if (sassLoader) {
+          sassLoader.options = {
+            ...sassLoader.options,
+            additionalData: `
+              @import "@/shared/styles/base/variables";
+              @import "@/shared/styles/base/mixins";
+              @import "@/shared/styles/base/functions";
+            `,
+            sassOptions: {
+              includePaths: [path.resolve(__dirname, '..')],
+            },
+          }
+        }
+      }
+    }
+
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '..'),
+      }
+    }
+
+    return config
+  },
+}
+
+export default config