[1단계 - 장바구니 미션] 에리얼(정예지) 미션 제출합니다.

.eslintrc.cjs

@@ -5,14 +5,59 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:import/typescript',
+    'plugin:import/recommended',
+    'prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', 'react'],
   rules: {
-    'react-refresh/only-export-components': [
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/destructuring-assignment': ['warn', 'always', { destructureInSignature: 'always' }],
+    'react/jsx-curly-brace-presence': [
       'warn',
-      { allowConstantExport: true },
+      { props: 'never', children: 'never', propElementValues: 'always' },
+    ],
+    'react/function-component-definition': [
+      'error',
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
+    ],
+    'react/jsx-tag-spacing': 1,
+    'no-restricted-exports': ['error', { restrictDefaultExports: { direct: true } }],
+    'import/no-unresolved': 'off',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'sibling'],
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@/**',
+            group: 'internal',
+          },
+          {
+            pattern: './*',
+            group: 'sibling',
+          },
+        ],
+        distinctGroup: false,
+        pathGroupsExcludedImportTypes: ['builtin'],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        'newlines-between': 'always',
+      },
     ],
   },
-}
+};

.github/pull_request_template.md

@@ -0,0 +1,58 @@
+## 📦 장바구니 미션
+
+이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 합니다.
+
+### 1단계
+
+- 클라이언트 상태를 효과적으로 모델링하고 관리할 수 있다.
+- Jest, React Testing Library(RTL)를 활용하여 주요 기능에 대한 테스트를 작성할 수 있다.
+
+## 🕵️ 셀프 리뷰(Self-Review)
+
+### 제출 전 체크 리스트
+
+- [ ] 기능 요구 사항을 모두 구현했고, 정상적으로 동작하는지 확인했나요?
+- [ ] RTL 테스트 케이스를 모두 작성했나요?
+- [ ] 배포한 데모 페이지에 정상적으로 접근할 수 있나요?
+
+  - 배포 링크 기입: **\_\_**
+
+- [ ] 리뷰어가 장바구니 추가를 쉽게 할 수 있도록 Curl 명령어를 전달해주세요. (토큰을 채워주세요)
+
+  ```
+  curl -X 'POST' \
+  'http://techcourse-lv2-alb-974870821.ap-northeast-2.elb.amazonaws.com/cart-items' \
+  -H 'accept: */*' \
+  -H 'Authorization: Basic <토큰>' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "productId": 1,
+  "quantity": 1
+  }'
+  ```
+
+### 리뷰 요청 & 논의하고 싶은 내용
+
+### 1) 상태 설계 의도
+
+### 2) 이번 단계에서 가장 많이 고민했던 문제와 해결 과정에서 배운 점
+
+### 3) 이번 리뷰를 통해 논의하고 싶은 부분
+
+---
+
+## ✅ 리뷰어 체크 포인트
+
+<!-- 리뷰어가 이 PR을 검토할 때 중점적으로 확인할 사항입니다.
+코드의 완성도뿐만 아니라, 리뷰이가 구현 과정에서 어떤 고민과 결정을 하며 학습했는지도 함께 고려해 주세요. -->
+
+### 1. 클라이언트 상태관리
+
+- 원본상태/파생상태를 적절히 구분하여 선언하였나요?
+- React state 를 불필요하게 선언한 부분은 없나요?
+- 상태 관리 로직의 책임이 적절히 응집/분리되었나요? (ex. reducer, hook, Context)
+
+### 2. MSW/Test
+
+- 주요 기능을 적절히 정의하였나요?
+- 주요 기능/예외에 대한 테스트가 충분히 이루어졌나요?

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

README.md

@@ -1 +1,39 @@
 # react-shopping-cart
+
+**기능 요구 사항**
+
+- [x] **`/cart-items`** API를 호출하여 장바구니 상품 데이터를 불러온다.
+- [x] 개별 상품의 선택 여부, 결제 금액, 배송비 등의 상태를 관리한다.
+- [x] 상품 선택에 따른 주문 금액, 배송비 등의 동적인 변경 사항을 처리한다.
+  - [x] 진입 시, 전체 선택 되어 있는 것이 디폴트이다.
+  - [x] 상품 선택/해제 시 주문 금액을 동적으로 변경한다.
+  - [x] 결제 금액이 10만원 이상일 경우 배송비는 무료이다.
+- [x] 장바구니 상품의 수량을 변경할 수 있다.
+- [x] 장바구니에 담긴 상품을 제거할 수 있다.
+- [x] 장바구니에 담긴 상품이 없는 경우 헬퍼문구를 보여준다.
+- [x] 주문 확인버튼을 클릭할 경우 페이지 이동과 함께 선택정보들과 결제금액을 보여준다.
+
+**컴포넌트**
+
+- [x] AppLayout
+- [x] Header
+- [x] CartItem
+- [x] CartItemList
+- [x] Text
+- [x] Flex
+- [x] Checkbox
+- [x] Button
+- [x] PriceSummary
+- [x] QuantityController
+
+**테스트**
+
+- [x] 장바구니 목록을 렌더링한다.
+- [x] 수량 조절 기능이 가능하다. (-/+)
+- [x] 주문 금액이 10만원 이상인 경우 배송비가 0원이 된다.
+- [x] 주문 금액이 10만원 이하인 경우 배송비가 3000원이 된다.
+- [x] 체크박스 선택 시 주문 금액에 변동이 생긴다.
+- [x] 장바구니에 담긴 상품 개수를 문구로 보여준다.
+- [x] 장바구니에 담긴 상품이 없는 경우 `장바구니에 담은 상품이 없다`라는 메세지를 보여준다.
+- [x] 삭제 버튼 클릭 시 장바구니에서 해당 상품이 삭제된다.
+- [x] 주문 확인 버튼을 클릭했을 때, 정보를 집약해서 보여준다.

eslint.config.js

@@ -0,0 +1,15 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+  { files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], plugins: { js }, extends: ['js/recommended'] },
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    languageOptions: { globals: { ...globals.browser, ...globals.node } },
+  },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+]);

index.html

@@ -1,8 +1,8 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./public/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React Shopping Cart</title>
   </head>