경북대 FE_정서현_1주차 과제 Step1/2/3

.eslintrc.cjs

@@ -0,0 +1,102 @@
+module.exports = {
+  env: {
+    // [env] 프로젝트 환경 설정, 브라우저 환경과 ES2021 문법, node 사용
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+
+  // [plugins] typescript 를 parser 로 사용하도록 함
+  plugins: ['react', 'react-hooks', 'jsx-a11y'],
+
+  // [extends] 프로젝트에 사용할 eslint 규칙
+  extends: [
+    'airbnb',
+    'airbnb/hooks',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:prettier/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  // [rules] 상세 규칙
+  rules: {
+    'no-var': 'warn', // var 금지
+    'react/prop-types': 0, // 컴포넌트의 props 검사 비활성화, propstype 사용하지 않아도 경고 띄우지 않음
+    'no-extra-semi': 'error', // 불필요한 세미콜론 사용 시 에러 표시
+    'react/jsx-filename-extension': [
+      2,
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, // jsx 파일 확장자 .jx, .jsx, .ts, .tsx 허용
+    ],
+
+    'arrow-parens': ['warn', 'as-needed'], // 화살표 함수의 파라미터가 하나일때 괄호 생략
+    'no-unused-vars': ['off'], // 사용하지 않는 변수가 있을 때 발생하는 경고 비 활성화
+    'no-console': ['off'], // 콘솔 사용 시 발생하는 경고 비 활성화
+    'import/prefer-default-export': ['off'], // export문이 하나일 때 default export 사용 권장 경고 비 활성화
+    'react-hooks/exhaustive-deps': ['warn'], // react hooks의 의존성배열이 충분하지 않을 때 경고 표시
+    'react/jsx-pascal-case': 'warn', // 컴포넌트 이름은 PascalCase로
+    'react/jsx-key': 'warn', // 반복문으로 생성하는 요소에 key 강제
+    'no-debugger': 'off', // 디버그 허용
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+    'react/function-component-definition': [
+      2,
+      { namedComponents: ['arrow-function', 'function-declaration'] },
+    ],
+    'react/react-in-jsx-scope': 0,
+    'react/prefer-stateless-function': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'no-nested-ternary': 0,
+    'react/require-default-props': 'off', // 컴포넌트의 props에 기본값을 설정하지 않아도 오류 X
+    'react/no-unescaped-entities': 'off', // React 컴포넌트 내에서 HTML 엔티티를 사용해도 오류 X
+    'react/jsx-curly-brace-presence': [
+      'warn',
+      { props: 'always', children: 'always' },
+    ],
+    'import/no-unresolved': ['error', { caseSensitive: false }], // 파일의 경로가 틀렸는지 확인하는 옵션 false
+    'react/jsx-props-no-spreading': [1, { custom: 'ignore' }], // props spreading 허용하지 않는 경고 표시
+    'linebreak-style': 0,
+    'import/extensions': 0,
+    'no-use-before-define': 0,
+    'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성 파일에서는 devDependency 사용 허용
+    'no-shadow': 0,
+    'jsx-a11y/no-noninteractive-element-interactions': 0,
+    '@typescript-eslint/no-unused-vars': 'off',
+    'jsx-a11y/alt-text': 'off',
+    quotes: ['error', 'single', { avoidEscape: true }], // 따옴표 규칙 추가
+  },
+
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+      alias: {
+        map: [
+          ['@api', './src/api'],
+          ['@assets', './src/assets'],
+          ['@components', './src/components'],
+          ['@constants', './src/constants'],
+          ['@hooks', './src/hooks'],
+          ['@interfaces', './src/interfaces'],
+          ['@mocks', './src/mocks'],
+          ['@pages', './src/pages'],
+          ['@stories', './src/stories'],
+          ['@styles', './src/styles'],
+          ['@utils', './src/utils'],
+        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+};

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*storybook.log

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^node:.*$",
+    "<THIRD_PARTY_MODULES>",
+    "^@/(apis|assets|constants|hooks|mocks|pages|stores|utils)/(.*)$",
+    "^@/components/(.*)$",
+    "^@/types/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": true,
+  "jsxSingleQuote": true
+}

.storybook/main.ts

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

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "cSpell.words": [
+    "autodocs",
+    "craco",
+    "linebreak",
+    "necolas",
+    "Parens",
+    "propstype",
+    "trivago",
+    "Viewports"
+  ]
+}

README.md

@@ -1,2 +1,45 @@
-# react-gift-react-foundation
-FE 카카오 선물하기 1주차 과제: React 기초
+<h1> FE 카카오 선물하기 1주차 과제: React 기초 </h1>
+
+<h3>1주차 체크 리스트</h3>
+
+- [x] CRA로 만들어진 프로젝트에 Typescript 로 세팅
+
+- [x] ESLint 및 Prettier 추가 후 자신만의 세팅하기
+
+- [x] 폴더 구조를 나누고 README.md 에 폴더 구조에 대한 설명 작성
+
+- [x] emotion 스타일 라이브러리 추가, reset CSS 적용
+
+- [x] .gitignore 를 추가, 프로젝트에 불 필요한 코드들은 정리
+
+- [x] 코딩 컨벤션 준수
+
+- [x] 기능 단위로 적절하게 커밋
+
+- [x] Storybook 을 사용하여 재사용 가능한 컴포넌트 구현
+
+- [x] ReadMe 에 주어진 퀴즈에 답변
+
+<br>
+
+---
+
+<h3>📌 프로젝트 내 폴더 구조</h3>
+
+```zsh
+src
+├── api                         // API 호출 및 외부 서비스와의 통신 로직
+├── assets                      // 이미지, 아이콘 등 정적 파일
+├── components                  // 재사용 가능한 React 컴포넌트
+├── constants                   // 애플리케이션 전반에 사용가능한 상수 값
+├── hooks                       // 커스텀 React 훅
+├── interfaces                  // TypeScript 인터페이스 및 타입 정의
+├── mocks                       // 테스트에 사용할 모의 데이터나 API 응답
+├── pages                       // 애플리케이션의 각 페이지 컴포넌트
+├── stories                     // Storybook
+├── styles                      // 전역에서 사용할 스타일 컴포넌트
+│   └── GlobalStyle.tsx
+├── utils                       // 공통으로 사용되는 유틸리티 함수들
+├── index.tsx
+└── App.tsx
+```

craco.config.ts

@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@api': path.resolve(__dirname, 'src/api'),
+      '@assets': path.resolve(__dirname, 'src/assets'),
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@hooks': path.resolve(__dirname, 'src/hooks'),
+      '@interfaces': path.resolve(__dirname, 'src/interfaces'),
+      '@mocks': path.resolve(__dirname, 'src/mocks'),
+      '@pages': path.resolve(__dirname, 'src/pages'),
+      '@stories': path.resolve(__dirname, 'src/stories'),
+      '@styles': path.resolve(__dirname, 'src/styles'),
+      '@utils': path.resolve(__dirname, 'src/utils'),
+    },
+  },
+};

package.json

@@ -0,0 +1,81 @@
+{
+  "name": "react-gift-react-foundation",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@craco/craco": "^7.1.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.101",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
+    "typescript": "^5.5.2",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-onboarding": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/preset-create-react-app": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "eslint": "^9.5.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prettier": "^3.3.2",
+    "prop-types": "^15.8.1",
+    "react-app-rewired": "^2.2.1",
+    "storybook": "^8.1.11",
+    "webpack": "^5.92.1"
+  }
+}

public/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/App.tsx

@@ -0,0 +1,12 @@
+import GlobalStyle from '@styles/GlobalStyle';
+
+function App() {
+  return (
+    <div className='App'>
+      test
+      <GlobalStyle />
+    </div>
+  );
+}
+
+export default App;