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

.eslintrc.js

@@ -0,0 +1,97 @@
+module.exports = {
+  env: {
+    // [env] 프로젝트 환경 설정, 브라우저 환경과 ES2021 문법
+    browser: true,
+    es2021: 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, // React 컴포넌트의 props 검사를 비활성화합니다.
+    'no-extra-semi': 'error', // 불필요한 세미콜론 사용을 에러로 처리합니다.
+    'react/jsx-filename-extension': [
+      // JSX 파일 확장자를 .js, .jsx, .ts, .tsx로 허용합니다.
+      2,
+      { extensions: ['.js', '.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 사용을 강제합니다.
+    'prettier/prettier': ['error', { endOfLine: 'auto' }], // Prettier 규칙을 적용하되, 줄바꿈 방식은 자동으로 처리합니다.
+    'react/function-component-definition': [
+      // 함수형 컴포넌트 정의 방식을 화살표 함수와 함수 선언문으로 허용합니다.
+      2,
+      { namedComponents: ['arrow-function', 'function-declaration'] },
+    ],
+    'react/react-in-jsx-scope': 0, // React 임포트 없이 JSX 사용을 허용합니다.
+    'react/prefer-stateless-function': 0, // 상태가 없는 컴포넌트를 함수형 컴포넌트로 사용할 것을 권장하지 않습니다.
+    'react/jsx-one-expression-per-line': 0, // JSX에서 한 줄에 여러 표현식 사용을 허용합니다.
+    'no-nested-ternary': 0, // 중첩된 삼항 연산자 사용을 허용합니다.
+    'react/require-default-props': 'off', // 컴포넌트의 props에 기본값 설정을 강제하지 않습니다.
+    'react/no-unescaped-entities': 'off', // React 컴포넌트 내에서 HTML 엔티티 사용을 허용합니다.
+    'import/no-unresolved': ['error', { caseSensitive: 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 사용을 허용합니다.
+    'jsx-a11y/no-noninteractive-element-interactions': 0, // 비 대화형 요소에 대한 상호 작용 규칙을 적용하지 않습니다.
+    '@typescript-eslint/no-unused-vars': 'off', // TypeScript에서 사용하지 않는 변수에 대한 경고를 비활성화합니다.
+    'jsx-a11y/alt-text': 'off',
+    'react/jsx-no-literals': 'off',
+    'react/jsx-curly-brace-presence': '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/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
+  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,82 @@
+{
+  "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 --check .",
+    "format:fix": "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;