Skip to content
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.

Sign up for GitHub

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

[NEXTLEVEL 클린코드 리액트 호준] 장바구니 미션 Step1 #7

Open
wants to merge 20 commits into
base: ganeodolu
Choose a base branch
from
+8,726 −8
Open

[NEXTLEVEL 클린코드 리액트 호준] 장바구니 미션 Step1 #7

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2d00bb6
build: 환경설정
ganeodolu Feb 19, 2022
0d31c6f
fix: 파일명 수정
ganeodolu Feb 19, 2022
57f112b
style: css 추가
ganeodolu Feb 24, 2022
f71e105
feat: 리액트 쿼리 추가
ganeodolu Feb 25, 2022
c6608c5
feat: 상품관련 api 추가
ganeodolu Feb 25, 2022
955bbc7
feat: 라우터 설정
ganeodolu Feb 25, 2022
3fc75b4
style: global style 추가
ganeodolu Mar 2, 2022
6f70fbf
build: 웹팩 async, svg 설정 추가
ganeodolu Mar 2, 2022
35931a6
feat: 상품목록 페이지 추가
ganeodolu Mar 2, 2022
bbca140
feat: 장바구니 페이지 추가
ganeodolu Mar 3, 2022
f9965d5
feat: 주문목록 페이지 추가
ganeodolu Mar 3, 2022
411aec7
style: 기존 스타일 파일 삭제
ganeodolu Mar 14, 2022
c027b53
feat: 리덕스 설정 및 카트수량 모듈 추가
ganeodolu Mar 14, 2022
7891113
feat: 리덕스 연결, 카트 - 화살표로 수량 변경
ganeodolu Mar 17, 2022
be4ad0f
feat: 장바구니 수량 범위 제한
ganeodolu Apr 16, 2022
50e6815
feat: 장바구니 결제예상금액 반영
ganeodolu Apr 16, 2022
00a5b7d
feat: 장바구니 모두선택 토글기능 추가
ganeodolu Apr 19, 2022
26ec755
feat: nodemon 추가
ganeodolu Apr 29, 2022
021b1ba
feat: 장바구니 삭제 기능 추가
ganeodolu Apr 29, 2022
2aa2977
feat: 장바구니 선택삭제 기능 추가
ganeodolu Apr 29, 2022
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
1 change: 1 addition & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"react-dom": "^17.0.2",
"react-query": "^3.34.16",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"redux": "^4.1.2",
"styled-components": "^5.3.3"
},
Expand Down
20 changes: 16 additions & 4 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,26 @@
import React from 'react';
import { QueryClientProvider, QueryClient } from 'react-query';
import { Routes, Route } from "react-router-dom";
import ProductList from './pages/ProductList';
import Cart from './pages/Cart';
import OrderList from './pages/OrderList';
// import Home from './pages/Home';
import GNB from './components/GNB';

const queryClient = new QueryClient();

const App = () => {
return (
<QueryClientProvider client={queryClient}>
<div className="App">My React App</div>
</QueryClientProvider>
);
<QueryClientProvider client={queryClient}>
<GNB />
<Routes className="App">
{/* <Route path="/" element={<Home />} /> */}
Copy link

Choose a reason for hiding this comment

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

따로 주석 남겨두신 이유가 있으신가요?

Copy link
Author

Choose a reason for hiding this comment

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

나중에 url을 기준으로 api를 적용해볼까 생각하여 상품목록부분의 주소를 /product로 하고 싶어서 따로 남겨둔 아직 미완인 부분입니다.

<Route path="/" element={<ProductList />} />
<Route path="/carts" element={<Cart />} />
<Route path="/orders" element={<OrderList />} />
</Routes>
</QueryClientProvider>
);
}

export default App
28 changes: 28 additions & 0 deletions client/src/components/GNB.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react'
import { useNavigate } from "react-router-dom";

const GNB = () => {
const history = useNavigate();
Copy link

Choose a reason for hiding this comment

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

history 라고 적으셔서 useHistory()를 사용하신 줄 알았습니다ㅎㅋㅋ
이전 버전에서 사용했었던 useHistory때문에 네이밍을 이렇게 하신 건가요?
단순 궁금증에 여쭤봅니다ㅎㅋㅋ

Copy link
Author

Choose a reason for hiding this comment

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

네 말씀하신 내용과 정확히 같아요ㅎㅎ useNavigate를 사용할때 변수명을 보통 어떻게 정하시나요??

Copy link

Choose a reason for hiding this comment

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

저는 그냥 navigate로 사용하고 있습니다ㅎㅎㅋ


return (
<div>
<nav className="nav flex justify-around">
<div className="flex-center">
<h1 className="nav-title" onClick={() => history("/")}>
CLEAN CODE SHOP
</h1>
</div>
<div className="flex gap-15">
<button className="nav-button" onClick={() => history("/carts")}>
장바구니
</button>
<button className="nav-button" onClick={() => history("/orders")}>
주문목록
</button>
</div>
</nav>
</div>
);
}

export default GNB
2 changes: 1 addition & 1 deletion client/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</head>

<body>
<div id="app"></div>
<div id="root"></div>
</body>

</html>
8 changes: 7 additions & 1 deletion client/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("app"));
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root"),
);
11 changes: 11 additions & 0 deletions client/src/pages/Cart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'

const Cart = () => {
return (
<div>

</div>
)
}

export default Cart
11 changes: 11 additions & 0 deletions client/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'

const Home = () => {
return (
<div>
d
</div>
)
}

export default Home
11 changes: 11 additions & 0 deletions client/src/pages/OrderList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'

const OrderList = () => {
return (
<div>

</div>
)
}

export default OrderList
11 changes: 11 additions & 0 deletions client/src/pages/ProductList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'

const ProductList = () => {
return (
<div>
p
</div>
)
}

export default ProductList
24 changes: 23 additions & 1 deletion client/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -921,7 +921,7 @@
"@babel/plugin-transform-react-jsx-development" "^7.16.7"
"@babel/plugin-transform-react-pure-annotations" "^7.16.7"

"@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.17.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
Expand Down Expand Up @@ -3241,6 +3241,13 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

history@^5.2.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
dependencies:
"@babel/runtime" "^7.7.6"

hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
Expand Down Expand Up @@ -4359,6 +4366,21 @@ react-redux@^7.2.6:
prop-types "^15.7.2"
react-is "^17.0.2"

react-router-dom@^6.2.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
dependencies:
history "^5.2.0"
react-router "6.2.1"

[email protected]:
version "6.2.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
dependencies:
history "^5.2.0"

react@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
Expand Down