Merge remote-tracking branch 'r1remote/main' into feat-hyoeun

.eslintrc.js

@@ -0,0 +1,44 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks', 'json-format', 'simple-import-sort', '@emotion'],
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'airbnb/hooks',
+    'airbnb-typescript',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    '@typescript-eslint/consistent-type-imports': 'warn',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'import/extensions': ['off'],
+    'import/no-extraneous-dependencies': ['off'],
+    'react/jsx-filename-extension': [
+      'warn',
+      {
+        extensions: ['.tsx', '.js', '.jsx'],
+      },
+    ],
+    '@typescript-eslint/no-use-before-define': ['off'],
+  },
+  ignorePatterns: ['**/build/**/*', '.eslintrc.js', 'craco.config.js'],
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+};

.gitignore

@@ -20,7 +20,4 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
-node_modules
-
-*storybook.log
+yarn-error.log*

.storybook/main.ts

@@ -10,14 +10,20 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
     '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {},
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
   },
   staticDirs: ['../public'],
+  docs: {
+    autodocs: 'tag',
+  },
   webpackFinal: async (config) => {
     if (config.resolve?.plugins) {
       config.resolve.plugins = config.resolve.plugins || [];

.storybook/preview.ts

@@ -1,7 +1,9 @@
 import type { Preview } from '@storybook/react';
+import '@/styles';
 
 const preview: Preview = {
   parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

README.md

@@ -1,34 +1,9 @@
-# react-gift-react-foundation
+# FE 카카오 선물하기 2주차 과제: 페이지 만들기
 
-## FE 카카오 선물하기 1주차 과제: React 기초
 
-1. create-react-app 으로 프로젝트 생성 및 typescript로 동작되도록 세팅
-2. tsconfig 설정
-3. ESLint, Prettier 설정
-4. emotion reset css 적용
-5. gitignore 추가
-6. 불필요한 코드 및 파일 제거
-7. 폴더 생성
 
-## 폴더 구조 설명
-
-```bash
-.root
-├── node_modules
-├── public
-├── src
-│   ├── assets          // 이미지, 폰트 등 미디어 파일
-│   ├── components      // 주요 컴포넌트
-│   ├── hooks           // 커스텀 훅
-│   ├── pages           // 페이지 컴포넌트
-│   ├── services        // api
-│   ├── store           // 상태관리
-│   ├── styles          // css
-│   └── utils           // 공통함수, 상수 등
-└──
-```
-
-## 3단계 과제
+---
+## [1주차] 3단계 과제
 
 1. webpack은 무엇이고 어떤 역할을 하고 있나요?
    여러 개의 파일을 하나의 파일로 합쳐주는 번들러입니다. 여기서 번들러란 코드, 프로그램을 묶어서 패키지로 제공하는 것입니다. 하나의 시작점(index.js 등)으로부터 의존성을 가지는 모듈을 추적하여 하나의 결과물을 만들어내는 모듈 번들러 역할을 합니다.<br>
@@ -63,4 +38,4 @@
      > 불변성 : 메모리 영역의 값을 변경 할 수 없는 것<br>
      > React 에서 불변성을 지켜야 하는 이유 : 리액트는 콜스택의 주소값만을 비교하여 상태 변화를 감지합니다. (=얕은 비교)<br>
      > 원시타입 - 불변성 유지한 채로 새로운 메모리 영역에서 변경된 값이 저장됨 -> 콜스택 주소값 변화 감지 -> 리렌더링<br>
-     > 참조타입 - 콜스택에 메모리 힙의 주소만 저장, 값은 메모리 힙에 저장 -> 값 변경 시 콜스택 주소값 변화 없음 -> 리랜더링 안됨
+     > 참조타입 - 콜스택에 메모리 힙의 주소만 저장, 값은 메모리 힙에 저장 -> 값 변경 시 콜스택 주소값 변화 없음 -> 리랜더링 안됨

craco.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+};