From ffeb0cb5f08253ab90e219a73d7a7fc3a7d56b22 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 12:04:56 +0900
Subject: [PATCH 01/34] =?UTF-8?q?Feat:=20=EC=B0=A8=EB=9F=89=20=EB=AA=A8?=
=?UTF-8?q?=EB=93=A0=20=EC=A2=85=EB=A5=98=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
=?UTF-8?q?=ED=8C=A8=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 11 +++++++++++
src/api/index.js | 20 ++++++++++++++++++++
2 files changed, 31 insertions(+)
create mode 100644 src/api/index.js
diff --git a/src/App.js b/src/App.js
index 491dfe5..6e982bc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,15 @@
+// import { useEffect } from "react";
+// import { getAllType } from "./api/index";
+
function App() {
+ // const type = async () => {
+ // const fetchData = await getAllType();
+ // console.log("fetch", fetchData);
+ // };
+
+ // useEffect(() => {
+ // type();
+ // }, []);
return <h1>Hello React!</h1>;
}
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..db7ec58
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,20 @@
+import axios from "axios";
+const instance = axios.create({
+ baseURL: "https://preonboarding.platdev.net/api/cars",
+ timeout: 4000,
+});
+
+instance.interceptors.request.use(
+ function (config) {
+ config.headers["Content-Type"] = "application/json; charset=utf-8";
+ return config;
+ },
+ function (error) {
+ return Promise.reject(error);
+ },
+);
+
+export const getAllType = async () => {
+ const response = await instance.get("");
+ return response.data;
+};
From fcf663b99f7b9de72ac6888f857a05223d13a417 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:10:55 +0900
Subject: [PATCH 02/34] =?UTF-8?q?Refactor:=20=EC=A0=84=EC=B2=B4=20?=
=?UTF-8?q?=EC=B0=A8=EB=9F=89=20=EB=B6=88=EB=9F=AC=EC=98=A4=EB=8A=94=20API?=
=?UTF-8?q?=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 12 +++++++++---
src/api/index.js | 2 +-
2 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/src/App.js b/src/App.js
index 6e982bc..2f67840 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,22 @@
// import { useEffect } from "react";
// import { getAllType } from "./api/index";
+import Router from "@/routes/index";
+
function App() {
// const type = async () => {
- // const fetchData = await getAllType();
- // console.log("fetch", fetchData);
+ // try {
+ // const { payload } = await getAllType();
+ // console.log("fetch", payload);
+ // } catch (e) {
+ // console.log(e);
+ // }
// };
// useEffect(() => {
// type();
// }, []);
- return <h1>Hello React!</h1>;
+ return <Router />;
}
export default App;
diff --git a/src/api/index.js b/src/api/index.js
index db7ec58..c7e8265 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,6 +1,6 @@
import axios from "axios";
const instance = axios.create({
- baseURL: "https://preonboarding.platdev.net/api/cars",
+ baseURL: process.env.REACT_APP_BASE_URL,
timeout: 4000,
});
From 4a8e4e1e1522649adc5a8df142123023fd3ec815 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:11:25 +0900
Subject: [PATCH 03/34] =?UTF-8?q?Feat:=20Router=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/routes/index.jsx | 20 ++++++++++++++++++++
src/routes/rotuerPath.js | 5 +++++
2 files changed, 25 insertions(+)
create mode 100644 src/routes/index.jsx
create mode 100644 src/routes/rotuerPath.js
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
new file mode 100644
index 0000000..f1e2a20
--- /dev/null
+++ b/src/routes/index.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "../../node_modules/react-router-dom/dist/index";
+import CarList from "@/pages/CarList/index";
+import { ROUTER_PATH } from "./rotuerPath";
+import CarDetail from "@/pages/CarDetail/index";
+import NotFound from "@/pages/NotFound/index";
+
+function Router() {
+ return (
+ <BrowserRouter>
+ <Routes>
+ <Route index path={ROUTER_PATH.BASE} element={<CarList />} />
+ <Route index path={ROUTER_PATH.DETAIL} element={<CarDetail />} />
+ <Route index path={ROUTER_PATH.NOTFOUND} element={<NotFound />} />
+ </Routes>
+ </BrowserRouter>
+ );
+}
+
+export default Router;
diff --git a/src/routes/rotuerPath.js b/src/routes/rotuerPath.js
new file mode 100644
index 0000000..585113d
--- /dev/null
+++ b/src/routes/rotuerPath.js
@@ -0,0 +1,5 @@
+export const ROUTER_PATH = {
+ BASE: "/",
+ DETAIL: "/detail",
+ NOTFOUND: "*",
+};
From e5501b66355b40841eef71ec37270c3b2ffba805 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:12:25 +0900
Subject: [PATCH 04/34] =?UTF-8?q?Feat:=20page=EB=93=A4=20=EC=83=9D?=
=?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/CarDetail/index.jsx | 7 +++++++
src/pages/CarList/index.jsx | 7 +++++++
src/pages/NotFound/index.jsx | 7 +++++++
3 files changed, 21 insertions(+)
create mode 100644 src/pages/CarDetail/index.jsx
create mode 100644 src/pages/CarList/index.jsx
create mode 100644 src/pages/NotFound/index.jsx
diff --git a/src/pages/CarDetail/index.jsx b/src/pages/CarDetail/index.jsx
new file mode 100644
index 0000000..ce86854
--- /dev/null
+++ b/src/pages/CarDetail/index.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function CarDetail() {
+ return <div>CarDetail</div>;
+}
+
+export default CarDetail;
diff --git a/src/pages/CarList/index.jsx b/src/pages/CarList/index.jsx
new file mode 100644
index 0000000..c67eafa
--- /dev/null
+++ b/src/pages/CarList/index.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function CarList() {
+ return <div>CarList</div>;
+}
+
+export default CarList;
diff --git a/src/pages/NotFound/index.jsx b/src/pages/NotFound/index.jsx
new file mode 100644
index 0000000..f6ccfcb
--- /dev/null
+++ b/src/pages/NotFound/index.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function NotFound() {
+ return <div>NotFound</div>;
+}
+
+export default NotFound;
From 45fd487b2ddb7159b5a7d667dc1f43b7b5b2949d Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:13:37 +0900
Subject: [PATCH 05/34] =?UTF-8?q?Fix:=20=EB=8B=A4=EC=9D=B4=EB=82=98?=
=?UTF-8?q?=EB=AF=B9=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/routes/index.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index f1e2a20..cd6c9d8 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -10,7 +10,7 @@ function Router() {
<BrowserRouter>
<Routes>
<Route index path={ROUTER_PATH.BASE} element={<CarList />} />
- <Route index path={ROUTER_PATH.DETAIL} element={<CarDetail />} />
+ <Route index path={`${ROUTER_PATH.DETAIL}/id`} element={<CarDetail />} />
<Route index path={ROUTER_PATH.NOTFOUND} element={<NotFound />} />
</Routes>
</BrowserRouter>
From f0b3a04860d49cd35114f840d35196a0c1bfabf0 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:17:46 +0900
Subject: [PATCH 06/34] =?UTF-8?q?Fix:=20=EB=8B=A4=EC=9D=B4=EB=82=98?=
=?UTF-8?q?=EB=AF=B9=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/routes/index.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index cd6c9d8..28c800c 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -10,7 +10,7 @@ function Router() {
<BrowserRouter>
<Routes>
<Route index path={ROUTER_PATH.BASE} element={<CarList />} />
- <Route index path={`${ROUTER_PATH.DETAIL}/id`} element={<CarDetail />} />
+ <Route index path={`${ROUTER_PATH.DETAIL}/:id`} element={<CarDetail />} />
<Route index path={ROUTER_PATH.NOTFOUND} element={<NotFound />} />
</Routes>
</BrowserRouter>
From 2ae6ba526159550e62a51afdf3d788171c1d34e7 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:29:23 +0900
Subject: [PATCH 07/34] =?UTF-8?q?Design:=20CSS=20=EC=B4=88=EA=B8=B0?=
=?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/index.css | 18 +++++++++++++-----
1 file changed, 13 insertions(+), 5 deletions(-)
diff --git a/src/index.css b/src/index.css
index 714ab0e..b738d63 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,11 +1,19 @@
-body {
+* {
margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ color: #444;
+}
+
+a {
+ display: block;
+ text-decoration: none;
+ color: inherit;
+}
+
+body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
From c9838e84536d5781bb86658557e4a67fa75ea17c Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:45:42 +0900
Subject: [PATCH 08/34] =?UTF-8?q?Design:=20=EA=B3=B5=ED=86=B5=20=EB=B6=80?=
=?UTF-8?q?=EB=B6=84=20Layout=EC=9C=BC=EB=A1=9C=20=EA=B0=90=EC=8B=B8?=
=?UTF-8?q?=EC=84=9C=20CSS=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Layout/Layout.styled.jsx | 6 ++++++
src/components/Layout/index.jsx | 13 +++++++++++++
src/routes/index.jsx | 9 ++++++---
3 files changed, 25 insertions(+), 3 deletions(-)
create mode 100644 src/components/Layout/Layout.styled.jsx
create mode 100644 src/components/Layout/index.jsx
diff --git a/src/components/Layout/Layout.styled.jsx b/src/components/Layout/Layout.styled.jsx
new file mode 100644
index 0000000..f331ed3
--- /dev/null
+++ b/src/components/Layout/Layout.styled.jsx
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const SLayout = styled.section`
+ min-width: 360px;
+ max-width: 450px;
+`;
diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx
new file mode 100644
index 0000000..0206371
--- /dev/null
+++ b/src/components/Layout/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Outlet } from "../../../node_modules/react-router-dom/dist/index";
+import { SLayout } from "./Layout.styled";
+
+function Layout() {
+ return (
+ <SLayout>
+ <Outlet />
+ </SLayout>
+ );
+}
+
+export default Layout;
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 28c800c..24cd5bf 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -4,14 +4,17 @@ import CarList from "@/pages/CarList/index";
import { ROUTER_PATH } from "./rotuerPath";
import CarDetail from "@/pages/CarDetail/index";
import NotFound from "@/pages/NotFound/index";
+import Layout from "@/components/Layout/index";
function Router() {
return (
<BrowserRouter>
<Routes>
- <Route index path={ROUTER_PATH.BASE} element={<CarList />} />
- <Route index path={`${ROUTER_PATH.DETAIL}/:id`} element={<CarDetail />} />
- <Route index path={ROUTER_PATH.NOTFOUND} element={<NotFound />} />
+ <Route element={<Layout />}>
+ <Route index path={ROUTER_PATH.BASE} element={<CarList />} />
+ <Route path={`${ROUTER_PATH.DETAIL}/:id`} element={<CarDetail />} />
+ <Route path={ROUTER_PATH.NOTFOUND} element={<NotFound />} />
+ </Route>
</Routes>
</BrowserRouter>
);
From 12bfaec5e0462634198009ff4c44ded5652b5286 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 13:49:24 +0900
Subject: [PATCH 09/34] =?UTF-8?q?Design:=20Layout=EC=97=90=20padding=20?=
=?UTF-8?q?=EA=B0=92=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Layout/Layout.styled.jsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/Layout/Layout.styled.jsx b/src/components/Layout/Layout.styled.jsx
index f331ed3..2a99586 100644
--- a/src/components/Layout/Layout.styled.jsx
+++ b/src/components/Layout/Layout.styled.jsx
@@ -3,4 +3,5 @@ import styled from "styled-components";
export const SLayout = styled.section`
min-width: 360px;
max-width: 450px;
+ padding: 17px;
`;
From 3a679d89e44d8ab6e7cfdf750320eabd8a11f621 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 14:29:38 +0900
Subject: [PATCH 10/34] =?UTF-8?q?Feat:=20Header=20=EC=BB=B4=ED=8F=AC?=
=?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/asset/images/ICON_Back.png | Bin 0 -> 180 bytes
src/components/Header/Header.styled.jsx | 27 ++++++++++++++++++++++++
src/components/Header/index.jsx | 20 ++++++++++++++++++
src/pages/CarDetail/index.jsx | 7 +++++-
src/pages/CarList/index.jsx | 8 ++++++-
5 files changed, 60 insertions(+), 2 deletions(-)
create mode 100644 public/asset/images/ICON_Back.png
create mode 100644 src/components/Header/Header.styled.jsx
create mode 100644 src/components/Header/index.jsx
diff --git a/public/asset/images/ICON_Back.png b/public/asset/images/ICON_Back.png
new file mode 100644
index 0000000000000000000000000000000000000000..56a68b8c1043d4cc69bbcea0b9e297c1354eec7e
GIT binary patch
literal 180
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(KPfr)ekP61PQ#NukC<rj~tDpSmZP^tS(NUHp
z@{s>h+=EJ{gZ?X2zu$Pm>fETd)1t$vF7}+l{ga;(JJ~rtcP@I;FT{Pw;(B90*G4{b
V?pdq<hXV~|@O1TaS?83{1OTsmH!=VK
literal 0
HcmV?d00001
diff --git a/src/components/Header/Header.styled.jsx b/src/components/Header/Header.styled.jsx
new file mode 100644
index 0000000..9a25ae3
--- /dev/null
+++ b/src/components/Header/Header.styled.jsx
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const Container = styled.header`
+ height: 60px;
+ border-bottom: 1px solid #000;
+ width: 100%;
+ padding: 0 25px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+export const BackBtn = styled.div`
+ width: 24px;
+ height: 24px;
+ background-image: url(/asset/images/ICON_Back.png);
+`;
+
+export const SBox = styled.div`
+ width: 24px;
+ height: 24px;
+ visibility: hidden;
+`;
+
+export const Title = styled.h2`
+ font-size: 17px;
+`;
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
new file mode 100644
index 0000000..f13ab8b
--- /dev/null
+++ b/src/components/Header/index.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
+import { Container, BackBtn, Title, SBox } from "./Header.styled";
+
+function Header({ title, isBackBtn }) {
+ const navigate = useNavigate();
+ const goToBack = () => {
+ navigate(-1);
+ };
+
+ return (
+ <Container>
+ {isBackBtn ? <BackBtn onClick={goToBack} /> : <SBox />}
+ <Title>{title}</Title>
+ <SBox />
+ </Container>
+ );
+}
+
+export default Header;
diff --git a/src/pages/CarDetail/index.jsx b/src/pages/CarDetail/index.jsx
index ce86854..29462bc 100644
--- a/src/pages/CarDetail/index.jsx
+++ b/src/pages/CarDetail/index.jsx
@@ -1,7 +1,12 @@
import React from "react";
+import Header from "@/components/Header/index";
function CarDetail() {
- return <div>CarDetail</div>;
+ return (
+ <div>
+ <Header title="차량상세" isBackBtn={true} />
+ </div>
+ );
}
export default CarDetail;
diff --git a/src/pages/CarList/index.jsx b/src/pages/CarList/index.jsx
index c67eafa..ed744b6 100644
--- a/src/pages/CarList/index.jsx
+++ b/src/pages/CarList/index.jsx
@@ -1,7 +1,13 @@
import React from "react";
+import Header from "../../components/Header/index";
function CarList() {
- return <div>CarList</div>;
+ return (
+ <>
+ <Header title="전체차량" isBackBtn={false} />
+ CarList
+ </>
+ );
}
export default CarList;
From ae339c66ade2fb13b8fdba4b5103aad4e8193f72 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 16:12:31 +0900
Subject: [PATCH 11/34] =?UTF-8?q?Design:=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20?=
=?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/index.css | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/index.css b/src/index.css
index b738d63..00e1aeb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
- color: #444;
+ color: #000;
}
a {
@@ -11,6 +11,12 @@ a {
color: inherit;
}
+button {
+ display: block;
+ background-color: none;
+ border: none;
+}
+
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
From 10e46772f3433a116790e5000585056171a11f7a Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 16:13:11 +0900
Subject: [PATCH 12/34] =?UTF-8?q?Feat:=20=EC=B0=A8=EB=9F=89=20=EC=A2=85?=
=?UTF-8?q?=EB=A5=98=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/TypeBtn/TypeBtn.styled.jsx | 17 +++++++++++++++++
src/components/TypeBtn/index.jsx | 8 ++++++++
2 files changed, 25 insertions(+)
create mode 100644 src/components/TypeBtn/TypeBtn.styled.jsx
create mode 100644 src/components/TypeBtn/index.jsx
diff --git a/src/components/TypeBtn/TypeBtn.styled.jsx b/src/components/TypeBtn/TypeBtn.styled.jsx
new file mode 100644
index 0000000..395759a
--- /dev/null
+++ b/src/components/TypeBtn/TypeBtn.styled.jsx
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const DefaultBtn = styled.button`
+ font-size: 14px;
+ padding: 5px 18px;
+ border-radius: 18px;
+ background-color: #d9d9d9;
+ font-weight: 600;
+`;
+
+export const ActiveBtn = styled.button`
+ font-size: 14px;
+ padding: 5px 18px;
+ border-radius: 18px;
+ background-color: #000;
+ color: #fff;
+`;
diff --git a/src/components/TypeBtn/index.jsx b/src/components/TypeBtn/index.jsx
new file mode 100644
index 0000000..c32d427
--- /dev/null
+++ b/src/components/TypeBtn/index.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { DefaultBtn, ActiveBtn } from "./TypeBtn.styled";
+
+function TypeBtn({ text, isActive }) {
+ return <>{!isActive ? <DefaultBtn>{text}</DefaultBtn> : <ActiveBtn>{text}</ActiveBtn>}</>;
+}
+
+export default TypeBtn;
From 88d8dc4374da08e4b551396838a7e85767727a28 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 16:44:40 +0900
Subject: [PATCH 13/34] =?UTF-8?q?Design:=20=EB=B2=84=ED=8A=BC=20=EA=B0=90?=
=?UTF-8?q?=EC=8B=B8=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8(TypeB?=
=?UTF-8?q?tnList)=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/TypeBtn/index.jsx | 2 +-
src/components/TypeBtnList/TypeBtn.styled.jsx | 31 +++++++++++++++++++
src/components/TypeBtnList/index.jsx | 17 ++++++++++
src/pages/CarList/index.jsx | 4 ++-
4 files changed, 52 insertions(+), 2 deletions(-)
create mode 100644 src/components/TypeBtnList/TypeBtn.styled.jsx
create mode 100644 src/components/TypeBtnList/index.jsx
diff --git a/src/components/TypeBtn/index.jsx b/src/components/TypeBtn/index.jsx
index c32d427..1517611 100644
--- a/src/components/TypeBtn/index.jsx
+++ b/src/components/TypeBtn/index.jsx
@@ -2,7 +2,7 @@ import React from "react";
import { DefaultBtn, ActiveBtn } from "./TypeBtn.styled";
function TypeBtn({ text, isActive }) {
- return <>{!isActive ? <DefaultBtn>{text}</DefaultBtn> : <ActiveBtn>{text}</ActiveBtn>}</>;
+ return <div>{!isActive ? <DefaultBtn>{text}</DefaultBtn> : <ActiveBtn>{text}</ActiveBtn>}</div>;
}
export default TypeBtn;
diff --git a/src/components/TypeBtnList/TypeBtn.styled.jsx b/src/components/TypeBtnList/TypeBtn.styled.jsx
new file mode 100644
index 0000000..93420df
--- /dev/null
+++ b/src/components/TypeBtnList/TypeBtn.styled.jsx
@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const Container = styled.section`
+ width: 100%;
+ padding: 12px 6px;
+ overflow-x: auto;
+ display: flex;
+ flex-wrap: nowrap;
+ border-bottom: 1px solid #000;
+
+ &::-webkit-scrollbar {
+ height: 2px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #000;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: #d9d9d9;
+ }
+
+ > div {
+ flex-shrink: 0;
+ margin-right: 6px;
+ }
+
+ > div :last-child {
+ margin-right: 0;
+ }
+`;
diff --git a/src/components/TypeBtnList/index.jsx b/src/components/TypeBtnList/index.jsx
new file mode 100644
index 0000000..2d5d7af
--- /dev/null
+++ b/src/components/TypeBtnList/index.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import TypeBtn from "@/components/TypeBtn/index";
+import { Container } from "./TypeBtn.styled";
+
+function TypeBtnList() {
+ return (
+ <Container>
+ <TypeBtn text="전체" isActive={true} />
+ <TypeBtn text="대형" isActive={false} />
+ <TypeBtn text="중형" isActive={false} />
+ <TypeBtn text="소형" isActive={false} />
+ <TypeBtn text="전기" isActive={false} />
+ </Container>
+ );
+}
+
+export default TypeBtnList;
diff --git a/src/pages/CarList/index.jsx b/src/pages/CarList/index.jsx
index ed744b6..c6f5ad8 100644
--- a/src/pages/CarList/index.jsx
+++ b/src/pages/CarList/index.jsx
@@ -1,10 +1,12 @@
import React from "react";
-import Header from "../../components/Header/index";
+import Header from "@/components/Header/index";
+import TypeBtnList from "@/components/TypeBtnList/index";
function CarList() {
return (
<>
<Header title="전체차량" isBackBtn={false} />
+ <TypeBtnList />
CarList
</>
);
From 16968a5b917b7d1d47c7a466f30fbea9097cecfd Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 17:02:36 +0900
Subject: [PATCH 14/34] =?UTF-8?q?Chore:=20CarList=20=EC=83=81=ED=83=9C?=
=?UTF-8?q?=EA=B4=80=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarListItem/index.jsx | 7 +++++++
src/components/TypeBtnList/index.jsx | 1 -
src/pages/CarList/index.jsx | 1 -
3 files changed, 7 insertions(+), 2 deletions(-)
create mode 100644 src/components/CarListItem/index.jsx
diff --git a/src/components/CarListItem/index.jsx b/src/components/CarListItem/index.jsx
new file mode 100644
index 0000000..89910b4
--- /dev/null
+++ b/src/components/CarListItem/index.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function CarListItem() {
+ return <div>CarListItem</div>;
+}
+
+export default CarListItem;
diff --git a/src/components/TypeBtnList/index.jsx b/src/components/TypeBtnList/index.jsx
index 2d5d7af..d7b664d 100644
--- a/src/components/TypeBtnList/index.jsx
+++ b/src/components/TypeBtnList/index.jsx
@@ -9,7 +9,6 @@ function TypeBtnList() {
<TypeBtn text="대형" isActive={false} />
<TypeBtn text="중형" isActive={false} />
<TypeBtn text="소형" isActive={false} />
- <TypeBtn text="전기" isActive={false} />
</Container>
);
}
diff --git a/src/pages/CarList/index.jsx b/src/pages/CarList/index.jsx
index c6f5ad8..201dc1d 100644
--- a/src/pages/CarList/index.jsx
+++ b/src/pages/CarList/index.jsx
@@ -7,7 +7,6 @@ function CarList() {
<>
<Header title="전체차량" isBackBtn={false} />
<TypeBtnList />
- CarList
</>
);
}
From a1e41f56178a24ba8bb0861805cf7bfb5d667363 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 18:06:57 +0900
Subject: [PATCH 15/34] =?UTF-8?q?Feat:=20=EB=B2=84=ED=8A=BC=ED=83=80?=
=?UTF-8?q?=EC=9E=85=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=B0=A8=20=EC=A2=85?=
=?UTF-8?q?=EB=A5=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 15 ----------
src/api/index.js | 2 +-
src/components/TypeBtn/index.jsx | 8 ++++--
src/components/TypeBtnList/index.jsx | 21 ++++++++++----
src/context/CarContext.jsx | 43 ++++++++++++++++++++++++++++
src/pages/CarList/index.jsx | 5 ++--
6 files changed, 69 insertions(+), 25 deletions(-)
create mode 100644 src/context/CarContext.jsx
diff --git a/src/App.js b/src/App.js
index 2f67840..c2e12f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,6 @@
-// import { useEffect } from "react";
-// import { getAllType } from "./api/index";
-
import Router from "@/routes/index";
function App() {
- // const type = async () => {
- // try {
- // const { payload } = await getAllType();
- // console.log("fetch", payload);
- // } catch (e) {
- // console.log(e);
- // }
- // };
-
- // useEffect(() => {
- // type();
- // }, []);
return <Router />;
}
diff --git a/src/api/index.js b/src/api/index.js
index c7e8265..86825d6 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -16,5 +16,5 @@ instance.interceptors.request.use(
export const getAllType = async () => {
const response = await instance.get("");
- return response.data;
+ return response.data.payload;
};
diff --git a/src/components/TypeBtn/index.jsx b/src/components/TypeBtn/index.jsx
index 1517611..acc66f6 100644
--- a/src/components/TypeBtn/index.jsx
+++ b/src/components/TypeBtn/index.jsx
@@ -1,8 +1,12 @@
import React from "react";
import { DefaultBtn, ActiveBtn } from "./TypeBtn.styled";
-function TypeBtn({ text, isActive }) {
- return <div>{!isActive ? <DefaultBtn>{text}</DefaultBtn> : <ActiveBtn>{text}</ActiveBtn>}</div>;
+function TypeBtn({ text, isActive, handleCar }) {
+ return (
+ <div onClick={() => handleCar(text)}>
+ {!isActive ? <DefaultBtn>{text}</DefaultBtn> : <ActiveBtn>{text}</ActiveBtn>}
+ </div>
+ );
}
export default TypeBtn;
diff --git a/src/components/TypeBtnList/index.jsx b/src/components/TypeBtnList/index.jsx
index d7b664d..e05527c 100644
--- a/src/components/TypeBtnList/index.jsx
+++ b/src/components/TypeBtnList/index.jsx
@@ -1,14 +1,25 @@
-import React from "react";
+import React, { useContext } from "react";
import TypeBtn from "@/components/TypeBtn/index";
import { Container } from "./TypeBtn.styled";
+import { CarListContext } from "../../context/CarContext";
function TypeBtnList() {
+ const { handleCarType, isFetch } = useContext(CarListContext);
+ const handleCar = (_text) => {
+ handleCarType(_text);
+ };
return (
<Container>
- <TypeBtn text="전체" isActive={true} />
- <TypeBtn text="대형" isActive={false} />
- <TypeBtn text="중형" isActive={false} />
- <TypeBtn text="소형" isActive={false} />
+ {isFetch.map((carType) => {
+ return (
+ <TypeBtn
+ key={carType.text}
+ text={carType.text}
+ isActive={carType.isActive}
+ handleCar={handleCar}
+ />
+ );
+ })}
</Container>
);
}
diff --git a/src/context/CarContext.jsx b/src/context/CarContext.jsx
new file mode 100644
index 0000000..0ab1163
--- /dev/null
+++ b/src/context/CarContext.jsx
@@ -0,0 +1,43 @@
+import { createContext, useState } from "react";
+
+export const CarListContext = createContext({
+ carList: [],
+ isLoading: true,
+ isFetch: [
+ { text: "전체", isActive: true, query: "" },
+ { text: "대형", isActive: false, query: "?segment=E" },
+ { text: "중형", isActive: false, query: "?segment=D" },
+ { text: "소형", isActive: false, query: "?segment=C" },
+ ],
+ handleCarType: () => {},
+});
+
+export const CarListContextProvider = ({ children }) => {
+ const [isLoading] = useState(true);
+ const [carList] = useState([]);
+ const [isFetch, setIsFetch] = useState([
+ { text: "전체", isActive: true, query: "" },
+ { text: "대형", isActive: false, query: "?segment=E" },
+ { text: "중형", isActive: false, query: "?segment=D" },
+ { text: "소형", isActive: false, query: "?segment=C" },
+ ]);
+
+ const handleCarType = (text) => {
+ setIsFetch((prev) =>
+ prev.map((item) => {
+ if (item.text !== text) {
+ item.isActive = false;
+ } else {
+ item.isActive = true;
+ }
+ return item;
+ }),
+ );
+ };
+
+ return (
+ <CarListContext.Provider value={{ carList, isLoading, isFetch, handleCarType }}>
+ {children}
+ </CarListContext.Provider>
+ );
+};
diff --git a/src/pages/CarList/index.jsx b/src/pages/CarList/index.jsx
index 201dc1d..a50a3b7 100644
--- a/src/pages/CarList/index.jsx
+++ b/src/pages/CarList/index.jsx
@@ -1,13 +1,14 @@
import React from "react";
import Header from "@/components/Header/index";
import TypeBtnList from "@/components/TypeBtnList/index";
+import { CarListContextProvider } from "../../context/CarContext";
function CarList() {
return (
- <>
+ <CarListContextProvider>
<Header title="전체차량" isBackBtn={false} />
<TypeBtnList />
- </>
+ </CarListContextProvider>
);
}
From 5a087ccef2718b58765b34dc48a494aded104006 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 19:35:04 +0900
Subject: [PATCH 16/34] =?UTF-8?q?Feat:=20API=20=ED=98=B8=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/index.js | 4 ++--
src/components/CarListItem/index.jsx | 1 -
src/context/CarContext.jsx | 31 +++++++++++++++++++---------
src/pages/CarList/index.jsx | 6 ++++--
src/routes/index.jsx | 4 ++--
5 files changed, 29 insertions(+), 17 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index 86825d6..1bb2a9b 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -14,7 +14,7 @@ instance.interceptors.request.use(
},
);
-export const getAllType = async () => {
- const response = await instance.get("");
+export const getCar = async (query) => {
+ const response = await instance.get("", { params: { segment: query } });
return response.data.payload;
};
diff --git a/src/components/CarListItem/index.jsx b/src/components/CarListItem/index.jsx
index 89910b4..1beca5a 100644
--- a/src/components/CarListItem/index.jsx
+++ b/src/components/CarListItem/index.jsx
@@ -1,5 +1,4 @@
import React from "react";
-
function CarListItem() {
return <div>CarListItem</div>;
}
diff --git a/src/context/CarContext.jsx b/src/context/CarContext.jsx
index 0ab1163..0fd2a64 100644
--- a/src/context/CarContext.jsx
+++ b/src/context/CarContext.jsx
@@ -1,28 +1,39 @@
-import { createContext, useState } from "react";
+import { createContext, useCallback, useState } from "react";
+import { getCar } from "../api/index";
export const CarListContext = createContext({
carList: [],
isLoading: true,
isFetch: [
{ text: "전체", isActive: true, query: "" },
- { text: "대형", isActive: false, query: "?segment=E" },
- { text: "중형", isActive: false, query: "?segment=D" },
- { text: "소형", isActive: false, query: "?segment=C" },
+ { text: "대형", isActive: false, query: "E" },
+ { text: "중형", isActive: false, query: "D" },
+ { text: "소형", isActive: false, query: "C" },
],
handleCarType: () => {},
+ handleCarData: () => {},
});
export const CarListContextProvider = ({ children }) => {
- const [isLoading] = useState(true);
- const [carList] = useState([]);
+ const [carList, setCarList] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
const [isFetch, setIsFetch] = useState([
{ text: "전체", isActive: true, query: "" },
- { text: "대형", isActive: false, query: "?segment=E" },
- { text: "중형", isActive: false, query: "?segment=D" },
- { text: "소형", isActive: false, query: "?segment=C" },
+ { text: "대형", isActive: false, query: "E" },
+ { text: "중형", isActive: false, query: "D" },
+ { text: "소형", isActive: false, query: "C" },
]);
+ const handleCarData = async (_text) => {
+ setIsLoading(true);
+ const [{ query }] = isFetch.filter((item) => item.text === _text);
+ const response = await getCar(query);
+ setCarList(response);
+ setIsLoading(false);
+ };
+
const handleCarType = (text) => {
+ handleCarData(text);
setIsFetch((prev) =>
prev.map((item) => {
if (item.text !== text) {
@@ -36,7 +47,7 @@ export const CarListContextProvider = ({ children }) => {
};
return (
- <CarListContext.Provider value={{ carList, isLoading, isFetch, handleCarType }}>
+ <CarListContext.Provider value={{ carList, isLoading, isFetch, handleCarType, handleCarData }}>
{children}
</CarListContext.Provider>
);
diff --git a/src/pages/CarList/index.jsx b/src/pages/CarList/index.jsx
index a50a3b7..98c597f 100644
--- a/src/pages/CarList/index.jsx
+++ b/src/pages/CarList/index.jsx
@@ -2,14 +2,16 @@ import React from "react";
import Header from "@/components/Header/index";
import TypeBtnList from "@/components/TypeBtnList/index";
import { CarListContextProvider } from "../../context/CarContext";
+import CarListItem from "../../components/CarListItem/index";
-function CarList() {
+function Home() {
return (
<CarListContextProvider>
<Header title="전체차량" isBackBtn={false} />
<TypeBtnList />
+ <CarListItem />
</CarListContextProvider>
);
}
-export default CarList;
+export default Home;
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 24cd5bf..b107454 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { BrowserRouter, Route, Routes } from "../../node_modules/react-router-dom/dist/index";
-import CarList from "@/pages/CarList/index";
+import Home from "@/pages/CarList/index";
import { ROUTER_PATH } from "./rotuerPath";
import CarDetail from "@/pages/CarDetail/index";
import NotFound from "@/pages/NotFound/index";
@@ -11,7 +11,7 @@ function Router() {
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
- <Route index path={ROUTER_PATH.BASE} element={<CarList />} />
+ <Route index path={ROUTER_PATH.BASE} element={<Home />} />
<Route path={`${ROUTER_PATH.DETAIL}/:id`} element={<CarDetail />} />
<Route path={ROUTER_PATH.NOTFOUND} element={<NotFound />} />
</Route>
From 6240ad478bbdf7b5523f0f1423cca6572a76e1c2 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 23:41:35 +0900
Subject: [PATCH 17/34] =?UTF-8?q?Remove:=20CarList=EC=97=90=EC=84=9C=20Hom?=
=?UTF-8?q?e=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=EC=9C=BC=EB=A1=9C=20?=
=?UTF-8?q?=EC=9D=B8=ED=95=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/CarList/index.jsx | 17 -----------------
1 file changed, 17 deletions(-)
delete mode 100644 src/pages/CarList/index.jsx
diff --git a/src/pages/CarList/index.jsx b/src/pages/CarList/index.jsx
deleted file mode 100644
index 98c597f..0000000
--- a/src/pages/CarList/index.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import Header from "@/components/Header/index";
-import TypeBtnList from "@/components/TypeBtnList/index";
-import { CarListContextProvider } from "../../context/CarContext";
-import CarListItem from "../../components/CarListItem/index";
-
-function Home() {
- return (
- <CarListContextProvider>
- <Header title="전체차량" isBackBtn={false} />
- <TypeBtnList />
- <CarListItem />
- </CarListContextProvider>
- );
-}
-
-export default Home;
From ab67c4c5929b3faf713b5cee775f71ae9ad7b9fa Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 23:42:50 +0900
Subject: [PATCH 18/34] =?UTF-8?q?Rename:=20CarList=EC=97=90=EC=84=9C=20Hom?=
=?UTF-8?q?e=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/Home/index.jsx | 17 +++++++++++++++++
src/routes/index.jsx | 2 +-
2 files changed, 18 insertions(+), 1 deletion(-)
create mode 100644 src/pages/Home/index.jsx
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
new file mode 100644
index 0000000..79402e6
--- /dev/null
+++ b/src/pages/Home/index.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import Header from "@/components/Header/index";
+import TypeBtnList from "@/components/TypeBtnList/index";
+import CarList from "@/components/CarList/index";
+import { CarListContextProvider } from "@/context/CarContext";
+
+function Home() {
+ return (
+ <CarListContextProvider>
+ <Header title="전체차량" isBackBtn={false} />
+ <TypeBtnList />
+ <CarList />
+ </CarListContextProvider>
+ );
+}
+
+export default Home;
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index b107454..64f2189 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { BrowserRouter, Route, Routes } from "../../node_modules/react-router-dom/dist/index";
-import Home from "@/pages/CarList/index";
+import Home from "@/pages/Home/index";
import { ROUTER_PATH } from "./rotuerPath";
import CarDetail from "@/pages/CarDetail/index";
import NotFound from "@/pages/NotFound/index";
From 688a081b81b2bacd4a5ba1c904247679428dcfa7 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 23:43:46 +0900
Subject: [PATCH 19/34] =?UTF-8?q?Design:=20CarList=20=EC=83=9D=EC=84=B1?=
=?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20Container=20=EB=94=94?=
=?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarList/CarList.styled.jsx | 6 ++++++
1 file changed, 6 insertions(+)
create mode 100644 src/components/CarList/CarList.styled.jsx
diff --git a/src/components/CarList/CarList.styled.jsx b/src/components/CarList/CarList.styled.jsx
new file mode 100644
index 0000000..f4e1579
--- /dev/null
+++ b/src/components/CarList/CarList.styled.jsx
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Container = styled.section`
+ width: 100%;
+ padding: 20px;
+`;
From f902ee1989ccc2b25efc92c26f4d747843eba45d Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 23:44:22 +0900
Subject: [PATCH 20/34] =?UTF-8?q?Rename:=20CarList=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarList/index.jsx | 10 ++++++++++
1 file changed, 10 insertions(+)
create mode 100644 src/components/CarList/index.jsx
diff --git a/src/components/CarList/index.jsx b/src/components/CarList/index.jsx
new file mode 100644
index 0000000..74298c8
--- /dev/null
+++ b/src/components/CarList/index.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { Container } from "./CarList.styled";
+
+function CarList() {
+ // const { handleCarData } = useContext(CarListContext);
+ // console.log("res", handleCarData());
+ return <Container>fdsflsdg</Container>;
+}
+
+export default CarList;
From aeee1dde329c53fe1f2f2b460af5ce6efe118b98 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 23:45:11 +0900
Subject: [PATCH 21/34] =?UTF-8?q?Refactor:=20=EC=BB=A8=ED=85=8D=EC=8A=A4?=
=?UTF-8?q?=ED=8A=B8=20SUV=20=EC=B6=94=EA=B0=80=20&=20carList=20=EC=82=AD?=
=?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/context/CarContext.jsx | 26 ++++++++++++++------------
1 file changed, 14 insertions(+), 12 deletions(-)
diff --git a/src/context/CarContext.jsx b/src/context/CarContext.jsx
index 0fd2a64..2f1a9b1 100644
--- a/src/context/CarContext.jsx
+++ b/src/context/CarContext.jsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useState } from "react";
+import { createContext, useState } from "react";
import { getCar } from "../api/index";
export const CarListContext = createContext({
@@ -9,31 +9,25 @@ export const CarListContext = createContext({
{ text: "대형", isActive: false, query: "E" },
{ text: "중형", isActive: false, query: "D" },
{ text: "소형", isActive: false, query: "C" },
+ { text: "SUV", isActive: false, query: "SUV" },
],
+ selected: "",
handleCarType: () => {},
handleCarData: () => {},
});
export const CarListContextProvider = ({ children }) => {
- const [carList, setCarList] = useState([]);
const [isLoading, setIsLoading] = useState(true);
+ const [selected, setSelected] = useState("");
const [isFetch, setIsFetch] = useState([
{ text: "전체", isActive: true, query: "" },
{ text: "대형", isActive: false, query: "E" },
{ text: "중형", isActive: false, query: "D" },
{ text: "소형", isActive: false, query: "C" },
+ { text: "SUV", isActive: false, query: "SUV" },
]);
- const handleCarData = async (_text) => {
- setIsLoading(true);
- const [{ query }] = isFetch.filter((item) => item.text === _text);
- const response = await getCar(query);
- setCarList(response);
- setIsLoading(false);
- };
-
const handleCarType = (text) => {
- handleCarData(text);
setIsFetch((prev) =>
prev.map((item) => {
if (item.text !== text) {
@@ -44,10 +38,18 @@ export const CarListContextProvider = ({ children }) => {
return item;
}),
);
+ const [{ query }] = isFetch.filter((car) => car.text === text);
+ setSelected(query);
+ };
+
+ const handleCarData = async () => {
+ const response = await getCar(selected);
+ setIsLoading(false);
+ return response;
};
return (
- <CarListContext.Provider value={{ carList, isLoading, isFetch, handleCarType, handleCarData }}>
+ <CarListContext.Provider value={{ isLoading, isFetch, handleCarType, handleCarData }}>
{children}
</CarListContext.Provider>
);
From 01c48820fe1cb67eff354ac7a4286ecf9468a03f Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Wed, 2 Nov 2022 23:45:56 +0900
Subject: [PATCH 22/34] =?UTF-8?q?Design:=20=EB=B2=84=ED=8A=BC=20height=20?=
=?UTF-8?q?=EB=A7=9E=EC=B6=94=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/TypeBtn/TypeBtn.styled.jsx | 2 ++
src/components/TypeBtnList/TypeBtn.styled.jsx | 1 +
2 files changed, 3 insertions(+)
diff --git a/src/components/TypeBtn/TypeBtn.styled.jsx b/src/components/TypeBtn/TypeBtn.styled.jsx
index 395759a..538d64a 100644
--- a/src/components/TypeBtn/TypeBtn.styled.jsx
+++ b/src/components/TypeBtn/TypeBtn.styled.jsx
@@ -6,6 +6,7 @@ export const DefaultBtn = styled.button`
border-radius: 18px;
background-color: #d9d9d9;
font-weight: 600;
+ height: 28px;
`;
export const ActiveBtn = styled.button`
@@ -14,4 +15,5 @@ export const ActiveBtn = styled.button`
border-radius: 18px;
background-color: #000;
color: #fff;
+ height: 28px;
`;
diff --git a/src/components/TypeBtnList/TypeBtn.styled.jsx b/src/components/TypeBtnList/TypeBtn.styled.jsx
index 93420df..fbaf07e 100644
--- a/src/components/TypeBtnList/TypeBtn.styled.jsx
+++ b/src/components/TypeBtnList/TypeBtn.styled.jsx
@@ -7,6 +7,7 @@ export const Container = styled.section`
display: flex;
flex-wrap: nowrap;
border-bottom: 1px solid #000;
+ align-items: flex-end;
&::-webkit-scrollbar {
height: 2px;
From 556c7f331f46cfc0d093ce9f3650151947e44d37 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 07:05:55 +0900
Subject: [PATCH 23/34] =?UTF-8?q?Fix:=20API=20=EC=97=B0=EB=8F=99=20?=
=?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarList/CarList.styled.jsx | 7 +++++++
src/components/CarList/index.jsx | 22 +++++++++++++++++-----
src/context/CarContext.jsx | 23 ++++++++++++++++-------
3 files changed, 40 insertions(+), 12 deletions(-)
diff --git a/src/components/CarList/CarList.styled.jsx b/src/components/CarList/CarList.styled.jsx
index f4e1579..632b253 100644
--- a/src/components/CarList/CarList.styled.jsx
+++ b/src/components/CarList/CarList.styled.jsx
@@ -4,3 +4,10 @@ export const Container = styled.section`
width: 100%;
padding: 20px;
`;
+
+export const SBox = styled.section`
+ height: calc(100vh - 153px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
diff --git a/src/components/CarList/index.jsx b/src/components/CarList/index.jsx
index 74298c8..4081895 100644
--- a/src/components/CarList/index.jsx
+++ b/src/components/CarList/index.jsx
@@ -1,10 +1,22 @@
-import React from "react";
-import { Container } from "./CarList.styled";
+import React, { useContext } from "react";
+import { CarListContext } from "@/context/CarContext";
+import { Container, SBox } from "./CarList.styled";
+import CarListItem from "../CarListItem/index";
function CarList() {
- // const { handleCarData } = useContext(CarListContext);
- // console.log("res", handleCarData());
- return <Container>fdsflsdg</Container>;
+ const { carList, isLoading } = useContext(CarListContext);
+
+ return (
+ <Container>
+ {isLoading ? (
+ <SBox>불러오는 중</SBox>
+ ) : carList.length === 0 ? (
+ <SBox>차량이 없습니다.</SBox>
+ ) : (
+ carList.map((car) => <CarListItem key={car.id} car={car} />)
+ )}
+ </Container>
+ );
}
export default CarList;
diff --git a/src/context/CarContext.jsx b/src/context/CarContext.jsx
index 2f1a9b1..a912ac9 100644
--- a/src/context/CarContext.jsx
+++ b/src/context/CarContext.jsx
@@ -1,4 +1,4 @@
-import { createContext, useState } from "react";
+import { createContext, useCallback, useEffect, useState } from "react";
import { getCar } from "../api/index";
export const CarListContext = createContext({
@@ -17,6 +17,7 @@ export const CarListContext = createContext({
});
export const CarListContextProvider = ({ children }) => {
+ const [carList, setCarList] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [selected, setSelected] = useState("");
const [isFetch, setIsFetch] = useState([
@@ -42,14 +43,22 @@ export const CarListContextProvider = ({ children }) => {
setSelected(query);
};
- const handleCarData = async () => {
- const response = await getCar(selected);
- setIsLoading(false);
- return response;
- };
+ const handleCarData = useCallback(async () => {
+ try {
+ const response = await getCar(selected);
+ setCarList(response);
+ setIsLoading(false);
+ } catch (e) {
+ throw new Error(e);
+ }
+ }, [selected, setCarList]);
+
+ useEffect(() => {
+ handleCarData();
+ }, [handleCarData]);
return (
- <CarListContext.Provider value={{ isLoading, isFetch, handleCarType, handleCarData }}>
+ <CarListContext.Provider value={{ carList, isLoading, isFetch, handleCarType }}>
{children}
</CarListContext.Provider>
);
From 46625ad527d901441c53778412360e01b18addf1 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 07:38:50 +0900
Subject: [PATCH 24/34] =?UTF-8?q?Design:=20CarList,=20CarListItem=20?=
=?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarList/CarList.styled.jsx | 2 +-
.../CarListItem/CarListItem.styled.jsx | 27 +++++++++++++++++++
src/components/CarListItem/index.jsx | 20 ++++++++++++--
3 files changed, 46 insertions(+), 3 deletions(-)
create mode 100644 src/components/CarListItem/CarListItem.styled.jsx
diff --git a/src/components/CarList/CarList.styled.jsx b/src/components/CarList/CarList.styled.jsx
index 632b253..7afe0db 100644
--- a/src/components/CarList/CarList.styled.jsx
+++ b/src/components/CarList/CarList.styled.jsx
@@ -2,7 +2,6 @@ import styled from "styled-components";
export const Container = styled.section`
width: 100%;
- padding: 20px;
`;
export const SBox = styled.section`
@@ -10,4 +9,5 @@ export const SBox = styled.section`
display: flex;
align-items: center;
justify-content: center;
+ font-weight: 600;
`;
diff --git a/src/components/CarListItem/CarListItem.styled.jsx b/src/components/CarListItem/CarListItem.styled.jsx
new file mode 100644
index 0000000..75ef8a6
--- /dev/null
+++ b/src/components/CarListItem/CarListItem.styled.jsx
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ padding: 20px;
+ width: 100%;
+ height: 120px;
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid #000;
+`;
+
+export const Title = styled.div`
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 17px;
+ margin-bottom: 8px;
+`;
+
+export const Info = styled.div`
+ font-size: 12px;
+ line-height: 15px;
+`;
+
+export const Image = styled.img`
+ width: 152px;
+ height: 80px;
+`;
diff --git a/src/components/CarListItem/index.jsx b/src/components/CarListItem/index.jsx
index 1beca5a..5aa1d1f 100644
--- a/src/components/CarListItem/index.jsx
+++ b/src/components/CarListItem/index.jsx
@@ -1,6 +1,22 @@
import React from "react";
-function CarListItem() {
- return <div>CarListItem</div>;
+import { Container, Title, Info, Image } from "./CarListItem.styled";
+function CarListItem({ car }) {
+ return (
+ <Container>
+ <div>
+ <Title>
+ {car.attribute.brand}
+ <br />
+ {car.attribute.name}
+ </Title>
+ <Info>
+ {car.attribute.segment} / {car.attribute.fuelType}
+ <br />월 {car.amount} 원 부터
+ </Info>
+ </div>
+ <Image src={car.attribute.imageUrl} alt={car.attribute.name}></Image>
+ </Container>
+ );
}
export default CarListItem;
From 3df5b746d4eb25da41a22390e6dda01f2c8e945b Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 07:55:10 +0900
Subject: [PATCH 25/34] =?UTF-8?q?Chore:=20Context=20Provider=20=EC=98=AE?=
=?UTF-8?q?=EA=B8=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Layout/index.jsx | 9 ++++++---
src/pages/Home/index.jsx | 5 ++---
2 files changed, 8 insertions(+), 6 deletions(-)
diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx
index 0206371..f0fd056 100644
--- a/src/components/Layout/index.jsx
+++ b/src/components/Layout/index.jsx
@@ -1,12 +1,15 @@
import React from "react";
import { Outlet } from "../../../node_modules/react-router-dom/dist/index";
+import { CarListContextProvider } from "../../context/CarContext";
import { SLayout } from "./Layout.styled";
function Layout() {
return (
- <SLayout>
- <Outlet />
- </SLayout>
+ <CarListContextProvider>
+ <SLayout>
+ <Outlet />
+ </SLayout>
+ </CarListContextProvider>
);
}
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 79402e6..f429e35 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -2,15 +2,14 @@ import React from "react";
import Header from "@/components/Header/index";
import TypeBtnList from "@/components/TypeBtnList/index";
import CarList from "@/components/CarList/index";
-import { CarListContextProvider } from "@/context/CarContext";
function Home() {
return (
- <CarListContextProvider>
+ <>
<Header title="전체차량" isBackBtn={false} />
<TypeBtnList />
<CarList />
- </CarListContextProvider>
+ </>
);
}
From d77a92be1e66826978b100bf88a575045c645efc Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 07:56:07 +0900
Subject: [PATCH 26/34] =?UTF-8?q?Feat:=20Detail=20=EC=A0=95=EB=B3=B4=20?=
=?UTF-8?q?=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarListItem/index.jsx | 31 +++++++++++++-----------
src/pages/CarDetail/CarDetail.styled.jsx | 0
src/pages/CarDetail/index.jsx | 3 +++
3 files changed, 20 insertions(+), 14 deletions(-)
create mode 100644 src/pages/CarDetail/CarDetail.styled.jsx
diff --git a/src/components/CarListItem/index.jsx b/src/components/CarListItem/index.jsx
index 5aa1d1f..2be2541 100644
--- a/src/components/CarListItem/index.jsx
+++ b/src/components/CarListItem/index.jsx
@@ -1,21 +1,24 @@
import React from "react";
+import { Link } from "../../../node_modules/react-router-dom/dist/index";
import { Container, Title, Info, Image } from "./CarListItem.styled";
function CarListItem({ car }) {
return (
- <Container>
- <div>
- <Title>
- {car.attribute.brand}
- <br />
- {car.attribute.name}
- </Title>
- <Info>
- {car.attribute.segment} / {car.attribute.fuelType}
- <br />월 {car.amount} 원 부터
- </Info>
- </div>
- <Image src={car.attribute.imageUrl} alt={car.attribute.name}></Image>
- </Container>
+ <Link to={`/detail/${car.id}`}>
+ <Container>
+ <div>
+ <Title>
+ {car.attribute.brand}
+ <br />
+ {car.attribute.name}
+ </Title>
+ <Info>
+ {car.attribute.segment} / {car.attribute.fuelType}
+ <br />월 {car.amount} 원 부터
+ </Info>
+ </div>
+ <Image src={car.attribute.imageUrl} alt={car.attribute.name}></Image>
+ </Container>
+ </Link>
);
}
diff --git a/src/pages/CarDetail/CarDetail.styled.jsx b/src/pages/CarDetail/CarDetail.styled.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/CarDetail/index.jsx b/src/pages/CarDetail/index.jsx
index 29462bc..0e0a705 100644
--- a/src/pages/CarDetail/index.jsx
+++ b/src/pages/CarDetail/index.jsx
@@ -2,6 +2,9 @@ import React from "react";
import Header from "@/components/Header/index";
function CarDetail() {
+ // const { id } = useParams();
+ // const { carList } = useContext(CarListContext);
+ // const [carDetail] = carList.filter((item) => item.id === +id);
return (
<div>
<Header title="차량상세" isBackBtn={true} />
From 101f1e368b7f8d749661768d7bc195e82379ffb1 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 11:05:49 +0900
Subject: [PATCH 27/34] =?UTF-8?q?Feat:=20date=20=EA=B3=84=EC=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/utils/index.js | 8 ++++++++
1 file changed, 8 insertions(+)
create mode 100644 src/utils/index.js
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..d447717
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,8 @@
+export const convertDay = (date) => {
+ const WEEKDAY = ["일", "월", "화", "수", "목", "금", "토"];
+ const newDate = new Date(date);
+ const month = newDate.getMonth() + 1;
+ const day = newDate.getDate();
+ const weeks = WEEKDAY[newDate.getDay()];
+ return `${month}월 ${day}일 (${weeks}) 부터`;
+};
From 015663c04f4860fea1da2d48d78fd400e86869ec Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 11:06:35 +0900
Subject: [PATCH 28/34] =?UTF-8?q?Design:=20=EB=94=94=ED=85=8C=EC=9D=BC=20?=
=?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
=?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/CarDetail/CarDetail.styled.jsx | 55 ++++++++++++++++++
src/pages/CarDetail/index.jsx | 72 +++++++++++++++++++++---
2 files changed, 120 insertions(+), 7 deletions(-)
diff --git a/src/pages/CarDetail/CarDetail.styled.jsx b/src/pages/CarDetail/CarDetail.styled.jsx
index e69de29..41db757 100644
--- a/src/pages/CarDetail/CarDetail.styled.jsx
+++ b/src/pages/CarDetail/CarDetail.styled.jsx
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const Image = styled.img`
+ width: 100%;
+ height: 205px;
+`;
+
+export const Container = styled.div`
+ padding: 0 20px;
+ width: 100%;
+`;
+
+export const Title = styled.div`
+ font-size: 20px;
+ font-weight: 600;
+ text-align: left;
+ width: 100%;
+ & > div:last-child {
+ font-size: 24px;
+ margin-bottom: 34px;
+ }
+`;
+
+export const Price = styled.div`
+ font-size: 17px;
+ text-align: right;
+ margin-bottom: 14px;
+`;
+
+export const Section = styled.div`
+ height: 48px;
+ background-color: #0094ff;
+ color: #fff;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 48px;
+ padding: 0 20px;
+`;
+
+export const Des = styled.div`
+ height: 48px;
+ font-size: 17px;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 20px;
+ align-items: center;
+`;
+
+export const SBox = styled.section`
+ height: calc(100vh - 153px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+`;
diff --git a/src/pages/CarDetail/index.jsx b/src/pages/CarDetail/index.jsx
index 0e0a705..458b8d0 100644
--- a/src/pages/CarDetail/index.jsx
+++ b/src/pages/CarDetail/index.jsx
@@ -1,14 +1,72 @@
-import React from "react";
+import React, { useContext } from "react";
import Header from "@/components/Header/index";
+import { useParams } from "../../../node_modules/react-router-dom/dist/index";
+import { CarListContext } from "../../context/CarContext";
+import { Image, Container, Title, Price, Section, Des, SBox } from "./CarDetail.styled";
+import { convertDay } from "../../utils/index";
function CarDetail() {
- // const { id } = useParams();
- // const { carList } = useContext(CarListContext);
- // const [carDetail] = carList.filter((item) => item.id === +id);
+ const { id } = useParams();
+ const { carList } = useContext(CarListContext);
+ const [carDetail] = carList.filter((item) => item.id === +id);
return (
- <div>
- <Header title="차량상세" isBackBtn={true} />
- </div>
+ <>
+ {!carDetail ? (
+ <>
+ <Header title="차량상세" isBackBtn={true} />
+ <SBox>불러오는 중</SBox>
+ </>
+ ) : (
+ <div>
+ <Header title="차량상세" isBackBtn={true} />
+ <Image src={carDetail.attribute.imageUrl} />
+ <Container>
+ <Title>
+ <div>{carDetail.attribute.brand}</div>
+ <div>{carDetail.attribute.name}</div>
+ </Title>
+ <Price>월 {carDetail.amount}원</Price>
+ </Container>
+ <Section>차량정보</Section>
+ <Des>
+ <strong>차종</strong>
+ <span>{carDetail.attribute.segment}</span>
+ </Des>
+ <Des>
+ <strong>연료</strong>
+ <span>{carDetail.attribute.fuelType}</span>
+ </Des>
+ <Des>
+ <strong>이용 가능일</strong>
+ <span>{convertDay(carDetail.startDate)}</span>
+ </Des>
+ <Section>보험</Section>
+ {carDetail.insurance.map((item) => (
+ <Des key={item.name}>
+ <strong>{item.name}</strong>
+ <span>{item.description}</span>
+ </Des>
+ ))}
+ {carDetail.additionalProducts.length === 0 ? (
+ <></>
+ ) : (
+ <>
+ <Section>추가상품</Section>
+ <>
+ {carDetail.additionalProducts.map((item) => {
+ return (
+ <Des key={item.name}>
+ <strong>{item.name}</strong>
+ <span>{item.amount}원</span>
+ </Des>
+ );
+ })}
+ </>
+ </>
+ )}
+ </div>
+ )}
+ </>
);
}
From 2ff6ab5f4ea285aea79348d4d21acb5df08695ef Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 11:26:20 +0900
Subject: [PATCH 29/34] =?UTF-8?q?Feat:=20=EC=8B=A0=EA=B7=9C=20=EC=95=84?=
=?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EC=8B=9C=EA=B0=84=20=EA=B3=84=EC=82=B0=20?=
=?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/utils/index.js | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/src/utils/index.js b/src/utils/index.js
index d447717..8faa403 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -6,3 +6,10 @@ export const convertDay = (date) => {
const weeks = WEEKDAY[newDate.getDay()];
return `${month}월 ${day}일 (${weeks}) 부터`;
};
+
+export const convertNewItem = (date) => {
+ const today = new Date();
+ const yesterday = new Date(today.setDate(today.getDate() - 1));
+ const newDate = new Date(date);
+ return +yesterday < +newDate ? true : false;
+};
From a630ef7b1eb677235fd28212f3a6af6c0dbb4093 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 11:26:50 +0900
Subject: [PATCH 30/34] =?UTF-8?q?Desgin:=20=EC=8B=A0=EA=B7=9C=20=EC=95=84?=
=?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarListItem/CarListItem.styled.jsx | 13 +++++++++++++
src/components/CarListItem/index.jsx | 4 +++-
2 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/src/components/CarListItem/CarListItem.styled.jsx b/src/components/CarListItem/CarListItem.styled.jsx
index 75ef8a6..8b78588 100644
--- a/src/components/CarListItem/CarListItem.styled.jsx
+++ b/src/components/CarListItem/CarListItem.styled.jsx
@@ -7,6 +7,19 @@ export const Container = styled.div`
display: flex;
justify-content: space-between;
border-bottom: 1px solid #000;
+ position: relative;
+`;
+
+export const New = styled.div`
+ position: absolute;
+ font-size: 12px;
+ color: #fff;
+ font-weight: 600;
+ border-radius: 15px;
+ padding: 4px 15px;
+ background-color: #0094ff;
+ top: 7px;
+ right: 7px;
`;
export const Title = styled.div`
diff --git a/src/components/CarListItem/index.jsx b/src/components/CarListItem/index.jsx
index 2be2541..a1a8afe 100644
--- a/src/components/CarListItem/index.jsx
+++ b/src/components/CarListItem/index.jsx
@@ -1,11 +1,13 @@
import React from "react";
import { Link } from "../../../node_modules/react-router-dom/dist/index";
-import { Container, Title, Info, Image } from "./CarListItem.styled";
+import { convertNewItem } from "../../utils/index";
+import { Container, Title, Info, Image, New } from "./CarListItem.styled";
function CarListItem({ car }) {
return (
<Link to={`/detail/${car.id}`}>
<Container>
<div>
+ {convertNewItem(car.createdAt) && <New>신규</New>}
<Title>
{car.attribute.brand}
<br />
From c84b17a57df1917069e7c0e3f29385713d34a697 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 12:31:40 +0900
Subject: [PATCH 31/34] =?UTF-8?q?Chore:=20react-helmet=20=EB=9D=BC?=
=?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 50 +++++++++++++++++++++++++++++++++++++++++++++++
package.json | 1 +
2 files changed, 51 insertions(+)
diff --git a/package-lock.json b/package-lock.json
index f1c2e1b..c2d264f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
"axios": "^1.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-helmet": "^6.1.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"styled-components": "^5.3.6",
@@ -14013,6 +14014,25 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
+ "node_modules/react-fast-compare": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+ "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+ },
+ "node_modules/react-helmet": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+ "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+ "dependencies": {
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.7.2",
+ "react-fast-compare": "^3.1.1",
+ "react-side-effect": "^2.1.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.3.0"
+ }
+ },
"node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -14144,6 +14164,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/react-side-effect": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+ "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+ "peerDependencies": {
+ "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -27153,6 +27181,22 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
+ "react-fast-compare": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+ "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+ },
+ "react-helmet": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+ "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+ "requires": {
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.7.2",
+ "react-fast-compare": "^3.1.1",
+ "react-side-effect": "^2.1.0"
+ }
+ },
"react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -27247,6 +27291,12 @@
}
}
},
+ "react-side-effect": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+ "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+ "requires": {}
+ },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 513f9cb..2be6797 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"axios": "^1.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-helmet": "^6.1.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"styled-components": "^5.3.6",
From dc34aeae1aea16cebe2108c035284f72c7e5a2fd Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 12:42:06 +0900
Subject: [PATCH 32/34] =?UTF-8?q?Feat:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
=?UTF-8?q?=EA=B8=B0=20SEO=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/CarDetail/index.jsx | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/src/pages/CarDetail/index.jsx b/src/pages/CarDetail/index.jsx
index 458b8d0..998debc 100644
--- a/src/pages/CarDetail/index.jsx
+++ b/src/pages/CarDetail/index.jsx
@@ -4,6 +4,7 @@ import { useParams } from "../../../node_modules/react-router-dom/dist/index";
import { CarListContext } from "../../context/CarContext";
import { Image, Container, Title, Price, Section, Des, SBox } from "./CarDetail.styled";
import { convertDay } from "../../utils/index";
+import { Helmet } from "react-helmet";
function CarDetail() {
const { id } = useParams();
@@ -11,6 +12,16 @@ function CarDetail() {
const [carDetail] = carList.filter((item) => item.id === +id);
return (
<>
+ <Helmet
+ meta={[
+ {
+ property: "og:title",
+ content: `${carDetail.attribute.brand} / ${carDetail.attribute.name}`,
+ },
+ { property: "og:description", content: `${carDetail.amount}` },
+ { property: "og:image", content: `${carDetail.attribute.imageUrl}` },
+ ]}
+ />
{!carDetail ? (
<>
<Header title="차량상세" isBackBtn={true} />
From 3fdf0ecd83b05adb77275b2fba5c6983573bc8a5 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 12:47:21 +0900
Subject: [PATCH 33/34] =?UTF-8?q?Refactor:=20carList=20undefined=20?=
=?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarList/index.jsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/CarList/index.jsx b/src/components/CarList/index.jsx
index 4081895..f105b49 100644
--- a/src/components/CarList/index.jsx
+++ b/src/components/CarList/index.jsx
@@ -10,10 +10,10 @@ function CarList() {
<Container>
{isLoading ? (
<SBox>불러오는 중</SBox>
- ) : carList.length === 0 ? (
+ ) : carList?.length === 0 ? (
<SBox>차량이 없습니다.</SBox>
) : (
- carList.map((car) => <CarListItem key={car.id} car={car} />)
+ carList?.map((car) => <CarListItem key={car.id} car={car} />)
)}
</Container>
);
From 5e0ba4a72da5bae6e5f6a637122a8e9912c3d5b5 Mon Sep 17 00:00:00 2001
From: chaechae <dokailove6326@gmail.com>
Date: Thu, 3 Nov 2022 12:57:49 +0900
Subject: [PATCH 34/34] =?UTF-8?q?Chore:=20=EC=9D=B4=EC=A0=84=EC=9C=BC?=
=?UTF-8?q?=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CarList/index.jsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/CarList/index.jsx b/src/components/CarList/index.jsx
index f105b49..4081895 100644
--- a/src/components/CarList/index.jsx
+++ b/src/components/CarList/index.jsx
@@ -10,10 +10,10 @@ function CarList() {
<Container>
{isLoading ? (
<SBox>불러오는 중</SBox>
- ) : carList?.length === 0 ? (
+ ) : carList.length === 0 ? (
<SBox>차량이 없습니다.</SBox>
) : (
- carList?.map((car) => <CarListItem key={car.id} car={car} />)
+ carList.map((car) => <CarListItem key={car.id} car={car} />)
)}
</Container>
);