Skip to content

[클린코드 리액트 3기 유소정] 장바구니 미션 Step1 #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 39 commits into
base: kaori-killer
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
813b6e0
기초 세팅
kaori-killer Mar 31, 2024
97f9784
Revert "기초 세팅"
kaori-killer Mar 31, 2024
ae2d2c4
상품 목록 페이지 생성
kaori-killer Mar 31, 2024
1fcaebb
상품들은 n x 4 레이아웃으로 보여진다.
kaori-killer Mar 31, 2024
5faaa6a
prettier, eslint 적용
kaori-killer Apr 1, 2024
08befad
상품 목록, 장바구니, 주문 목록 페이지 생성
kaori-killer Apr 1, 2024
fec8ed4
헤더에 있는 버튼을 누르면 그에 맞는 페이지로 이동한다
kaori-killer Apr 1, 2024
3a15913
메인 페이지 장바구니 버튼 클릭 시 체크 박스 모양으로 변환
kaori-killer Apr 1, 2024
f431b96
장바구니 페이지 생성
kaori-killer Apr 1, 2024
7d5a311
기본 세팅
kaori-killer Apr 8, 2024
01d923f
상품 리스트를 보여준다
kaori-killer Apr 8, 2024
d5aad50
상품을 클릭하면 해당 상품을 상세볼 수 있는 URL로 변경한다
kaori-killer Apr 8, 2024
92b4775
상품 리스트 페이지에서 상품의 장바구니 버튼을 누르면 '장바구니에 추가되었습니다' confirm이 나온다
kaori-killer Apr 8, 2024
c0a1f7e
상품 상세보기 페이지에서 상품의 정보를 확인할 수 있다
kaori-killer Apr 8, 2024
ae92b0f
장바구니 페이지에 들어가면 장바구니 데이터를 불러와서 리스트를 보여준다
kaori-killer Apr 8, 2024
e60c5ff
주문하기 버튼을 누르면 주문하기 페이지로 이동한다
kaori-killer Apr 8, 2024
2f78157
상품 리스트 페이지에서 장바구니 버튼을 누르면 상품이 추가된다
kaori-killer Apr 9, 2024
f12afb5
장바구니의 값을 가져오는 부분 추가
kaori-killer Apr 9, 2024
ede0549
제품 상세 페이지에서 장바구니 버튼을 누르면 '장바구니에 추가되었습니다' confim과 함께 장바구니에 상품이 추가된다
kaori-killer Apr 9, 2024
be61505
Title 부분을 공통 컴포넌트로 분리
kaori-killer Apr 9, 2024
a05a160
주문/결제 페이지 section별 컴포넌트로 분할
kaori-killer Apr 9, 2024
9356b17
주문/결제에 대한 리스트를 담는 context api 생성
kaori-killer Apr 9, 2024
175bf84
장바구니에서 상품 선택 버튼을 클릭하면 담고, 해제하면 삭제하기
kaori-killer Apr 9, 2024
bc2e931
가격과 수량에 대한 정보를 context api에 추가
kaori-killer Apr 9, 2024
83323a8
장바구니에서 가격을 보여준다
kaori-killer Apr 10, 2024
2f410a9
장바구니에서 수량을 보여준다
kaori-killer Apr 10, 2024
94c0e70
장바구니에서 수량을 증가/감소 시킬 수 있다
kaori-killer Apr 10, 2024
e9c8b25
수량을 선택하고 상품을 선택하면 결제예상금액에 수량과가격이 반영된 총 가격이 들어간다
kaori-killer Apr 10, 2024
0d23095
장바구니 아이템을 삭제할 수 있다
kaori-killer Apr 11, 2024
dfa317d
장바구니 상품 초기화
kaori-killer Apr 12, 2024
c3c60a8
early retrun으로 변환
kaori-killer May 20, 2024
be53558
BASE_URL을 상수로 분리
kaori-killer May 20, 2024
97cce10
toLocaleString 함수에 인자로 대한민국 추가
kaori-killer May 20, 2024
799cb9e
자식 요소가 없는 태그는 self closing tag로 변경
kaori-killer May 20, 2024
0a661c5
preState로 사용으로 변경
kaori-killer May 21, 2024
12e89fb
클릭이 가능한 부분은 cursor를 pointer로 변환
kaori-killer May 23, 2024
400d61b
전반적인 글로벌 레이아웃 스타일 적용
kaori-killer May 23, 2024
0427025
이미지가 비어있는 경우를 대비하여, 기본 이미지 삽입
kaori-killer May 23, 2024
dad793b
메해당 element가 없을 때에는 null을 render 하는 방식으로 변경
kaori-killer May 23, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -148,4 +148,29 @@ $RECYCLE.BIN/
# Windows shortcuts
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/macos,windows,jetbrains+all
# End of https://www.toptal.com/developers/gitignore/api/macos,windows,jetbrains+all

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
81 changes: 19 additions & 62 deletions db.json
Original file line number Diff line number Diff line change
Expand Up @@ -243,82 +243,39 @@
],
"carts": [
{
"id": 1,
"product": {
"name": "[리뉴얼]젓가락(종이)-정성을 담아",
"price": 21800,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/5297837f-5ecd-4945-be2f-4a75854cd06e.jpg"
}
},
{
"id": 1716278377908,
"product": {
"name": "젓가락(종이)-웬만해선 이 맛을 막을 수 없다",
"price": 21800,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/1b6e926b-52a3-4a92-8db5-fddaccdb2583.jpg"
},
"id": 2
},
{
"id": 1675351764224,
"product": {
"id": 4,
"name": "리치스 스위트콘 대 2.95kg",
"price": 4780,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/ff297e50-7d6b-4a87-8509-b387442ff877.jpg"
}
},
{
"id": 1675351772608,
"product": {
"id": 4,
"name": "리치스 스위트콘 대 2.95kg",
"price": 4780,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/ff297e50-7d6b-4a87-8509-b387442ff877.jpg"
}
},
{
"id": 1675351774776,
"product": {
"id": 4,
"name": "리치스 스위트콘 대 2.95kg",
"price": 4780,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/ff297e50-7d6b-4a87-8509-b387442ff877.jpg"
"id": 1,
"name": "냉면용기(대)",
"price": 83700,
"imageUrl": "https://cdn-mart.baemin.com/goods/2/1556008840639m0.jpg"
}
},
{
"id": 1675351775632,
"id": 1716278380944,
"product": {
"id": 4,
"name": "리치스 스위트콘 대 2.95kg",
"price": 4780,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/ff297e50-7d6b-4a87-8509-b387442ff877.jpg"
"id": 2,
"name": "생새우살 (71/90) 500g 4개",
"price": 29000,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/6b95c66a-c13d-4ccd-9df5-b1af1428a225.jpg"
}
},
{
"id": 1675351776006,
"id": 1716446777098,
"product": {
"id": 4,
"name": "리치스 스위트콘 대 2.95kg",
"price": 4780,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/ff297e50-7d6b-4a87-8509-b387442ff877.jpg"
"id": 2,
"name": "생새우살 (71/90) 500g 4개",
"price": 29000,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/6b95c66a-c13d-4ccd-9df5-b1af1428a225.jpg"
}
},
{
"id": 1675351781321,
"id": 1716446800675,
"product": {
"id": 3,
"name": "펩시 콜라 355ml 24캔",
"id": 1,
"name": "냉면용기(대)",
"price": 83700,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/84fc0238-0239-4d0e-870b-a9daa6f2c42c.jpg"
}
},
{
"id": 1675351804540,
"product": {
"id": 12,
"name": "[리뉴얼]젓가락(종이)-정성을 담아",
"price": 21800,
"imageUrl": "https://cdn-mart.baemin.com/sellergoods/main/5297837f-5ecd-4945-be2f-4a75854cd06e.jpg"
"imageUrl": "https://cdn-mart.baemin.com/goods/2/1556008840639m0.jpg"
}
}
],
Expand Down
131 changes: 131 additions & 0 deletions frontend/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
log
39 changes: 39 additions & 0 deletions frontend/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
extends: [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:@typescript-eslint/recommended",
"prettier",
],
overrides: [
{
files: ["*.ts", "*.tsx"],
},
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
plugins: ["react", "prettier"],
ignorePatterns: ["node_modules/"],
rules: {
"prettier/prettier": "error",
},
settings: {
react: {
version: "detect", // 사용자가 설치한 버전을 자동으로 선택
},
},
};
24 changes: 24 additions & 0 deletions frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
2 changes: 2 additions & 0 deletions frontend/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
package-lock.json
5 changes: 5 additions & 0 deletions frontend/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true
}
30 changes: 30 additions & 0 deletions frontend/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# React + TypeScript + Vite

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

readme 파일에는 프로젝트 내용을 간단하게 적어주시는게 좋아요! 🚗
관련 아티클들을 읽어보셔도 좋고,
오픈소스 readme등을 보면서 어떤 내용들이 들어가면 좋을지 보시는것도 많은 도움이 될거에요!


This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default {
// other rules...
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
project: ["./tsconfig.json", "./tsconfig.node.json"],
tsconfigRootDir: __dirname,
},
};
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
24 changes: 24 additions & 0 deletions frontend/fixtures/cartList.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { CartDetail } from "../src/types";

const cartList: CartDetail[] = [
{
id: 1,
product: {
name: "test",
price: 1234,
imageUrl: "test.com",
id: 1,
},
},
{
id: 5,
product: {
name: "tes11111t",
price: 1234,
imageUrl: "test.com",
id: 10
}
};
]

export default cartList;
Loading