전남대 FE_이도현_1주차 과제

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:storybook/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {}
+}

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+src/node_modules
+# 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

.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;

README.md

@@ -1,2 +1,63 @@
-# react-gift-react-foundation
-FE 카카오 선물하기 1주차 과제: React 기초
+## 1주차 질문
+
+- 질문1. Webpack은 무엇이고 어떤 역할을 하고 있나요?
+    - Webpack은 주로 JavaScript 애플리케이션을 위한 모듈 번들러
+    - 애플리케이션에서 필요한 여러 파일들을 하나의 번들러로 묶어주며, 다양한 모듈을 처리할 수 있음
+    - 모듈 번들링, 코드 분할, 로더, 플러그인, 핫 모듈 교체 등의 역할을 함
+
+- 질문2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?
+    - JSX 변환 : JSX는 브라우저가 이해할 수 있는 일반 JavaScript 코드로 변환(Babel 등 도구 이용)
+    - 번들링 : Webpack과 같은 모듈 번들러를 사용하여 변환된 JavaScript 코드와 다른 의존성들을 하나의 파일로 번들링
+    - 번들 파일 로드 : 번들된 파일을 HTML 파일에 포함시키고 로드하여 실행
+
+- 질문3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요?
+    - 상태 관리 : 컴포넌트 내부적으로 useState 같은 React 훅을 사용하여 정의하고 setState를 통해 상태(state) 관리 가능
+    - 렌더링 트리거 : 상태가 업데이트되면 React는 해당 컴포넌트를 다시 렌더링
+    - 효과 처리 : 상태 변화에 따른 부수 효과를 처리하기 위해 useEffect 훅 사용 가능
+
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

README.old.md

@@ -0,0 +1,43 @@
+# react-gift-react-foundation
+
+FE 카카오 선물하기 1주차 과제: React 기초
+
+## 기능 목록
+
+1단계
+
+[o] Create React App을 기반으로 프로젝트를 생성
+[o] Typescript로 프로젝트가 동작되게 세팅
+[o] 절대 경로로 Import 할 수 있게 alias를 설정
+[o] tsconfig 항목 구성
+[o] ESLint, Prettier를 추가
+[o] emotion 스타일 라이브러리를 추가
+[o] reset css를 적용
+[o] gitignore를 추가
+[o] 프로젝트에 불필요한 코드들은 정리
+
+2단계
+
+- Storybook 추가
+- Button 컴포넌트 구현
+    - [o] Theme props에 따라 버튼 컬러 디자인 지정
+    - [o] Size props에 따라 버튼 크기 지정
+    - [o] Button Element 기본 속성 모두 사용 가능하도록 구현
+- Input 컴포넌트 구현
+    - [o] disabled props에 따라 input 비활성화 지정
+    - [o] isvalid props에 따라 input값 ui에서 오류 인지
+    - [o] input Element 기본 속성 모두 사용
+- Image 컴포넌트 구현
+    - [o] ratio props에 따라 이미지 비율 설정
+    - [o] radius props에 따라 모서리 둥글게 적용
+    - [o] image Element 기본 속성 모두 사용
+- GoodsItem 컴포넌트 구현
+    - [o] default 형태와 ranking 형태 컴포넌트 구현
+    - [o] Ranking 컴포넌트 랭킹 지정
+- Grid, Container 컴포넌트 구현
+
+## 요구 사항
+
+- 본인만의 폴더 구조 기준을 세우고 반영해주세요.
+- 본인만의 기준으로 일관된 코드를 작성해주세요.
+- 기능 단위로 나누어 커밋을 해주세요.