From 0307ee5063c21414acca5c4fb4a702110a7fdb7b Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Wed, 2 Nov 2022 16:07:24 +0900 Subject: [PATCH 01/15] =?UTF-8?q?Feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=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/App.js | 4 +++- src/pages/404.jsx | 7 +++++++ src/pages/CarDetail.jsx | 9 +++++++++ src/pages/MainCar.jsx | 7 +++++++ src/routes/AppRouter.jsx | 18 ++++++++++++++++++ src/routes/routePath.js | 24 ++++++++++++++++++++++++ 6 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 src/pages/404.jsx create mode 100644 src/pages/CarDetail.jsx create mode 100644 src/pages/MainCar.jsx create mode 100644 src/routes/AppRouter.jsx create mode 100644 src/routes/routePath.js diff --git a/src/App.js b/src/App.js index 491dfe5..436ff32 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,7 @@ +import AppRouter from "./routes/AppRouter"; + function App() { - return

Hello React!

; + return ; } export default App; diff --git a/src/pages/404.jsx b/src/pages/404.jsx new file mode 100644 index 0000000..75f177c --- /dev/null +++ b/src/pages/404.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const NotFound = () => { + return
NotFound
; +}; + +export default NotFound; diff --git a/src/pages/CarDetail.jsx b/src/pages/CarDetail.jsx new file mode 100644 index 0000000..05cbf8f --- /dev/null +++ b/src/pages/CarDetail.jsx @@ -0,0 +1,9 @@ +import React from "react"; +import { useParams } from "../../node_modules/react-router-dom/dist/index"; + +const CarDetail = () => { + const { id } = useParams(); + return
Detail{id}
; +}; + +export default CarDetail; diff --git a/src/pages/MainCar.jsx b/src/pages/MainCar.jsx new file mode 100644 index 0000000..aa915da --- /dev/null +++ b/src/pages/MainCar.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const CarMain = () => { + return
Main
; +}; + +export default CarMain; diff --git a/src/routes/AppRouter.jsx b/src/routes/AppRouter.jsx new file mode 100644 index 0000000..797d802 --- /dev/null +++ b/src/routes/AppRouter.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import { BrowserRouter, Route, Routes } from "../../node_modules/react-router-dom/dist/index"; +import { routes } from "./routePath"; + +const AppRouter = () => { + return ( + + + {routes.map((route) => { + const { path, element } = route; + return ; + })} + + + ); +}; + +export default AppRouter; diff --git a/src/routes/routePath.js b/src/routes/routePath.js new file mode 100644 index 0000000..543155c --- /dev/null +++ b/src/routes/routePath.js @@ -0,0 +1,24 @@ +import NotFound from "../pages/404"; +import CarDetail from "../pages/CarDetail"; +import CarMain from "../pages/MainCar"; + +export const routePath = { + carMain: "/", + CarDetail: "detail/:id", + NotFound: "*", +}; + +export const routes = [ + { + path: routePath.carMain, + element: , + }, + { + path: routePath.CarDetail, + element: , + }, + { + path: routePath.NotFound, + element: , + }, +]; From 3991d7c01ab7d646346ca7c473270ae4e6dcd601 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Wed, 2 Nov 2022 17:54:44 +0900 Subject: [PATCH 02/15] =?UTF-8?q?Feat:=20api=20=EB=BC=88=EB=8C=80=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/api/carInstance.js | 69 +++++++++++++++++++++++++++++++++++++++ src/api/constant.js | 16 +++++++++ src/api/createInstance.js | 8 +++++ 3 files changed, 93 insertions(+) create mode 100644 src/api/carInstance.js create mode 100644 src/api/constant.js create mode 100644 src/api/createInstance.js diff --git a/src/api/carInstance.js b/src/api/carInstance.js new file mode 100644 index 0000000..b64dca9 --- /dev/null +++ b/src/api/carInstance.js @@ -0,0 +1,69 @@ +import { CAR_API_URL, CAR_FUELTYPE } from "./constant"; +import { createInstance } from "./createInstance"; + +const BASE_URL = "https://preonboarding.platdev.net/api"; + +class carInstance { + #API; + #instance; + #fuelType; + #segment; + + constructor() { + this.#instance = createInstance({ + url: BASE_URL, + config: { + timeout: 3000, + }, + }); + this.#API = CAR_API_URL; + this.#fuelType = CAR_FUELTYPE; + } + + getAllCar() { + return this.#instance.get(this.#API.cars); + } + + getFuelTypeSegmentCars({ fuelType, segment }) { + return this.#instance.get(this.#API.cars, { + params: { + fuelType, + segment, + }, + }); + } + + getFuelTypeCars({ fuleType }) { + return this.#instance.get(this.#API.cars, { + params: { + fuleType, + }, + }); + } + + getSegmentCars({ segment }) { + return this.#instance.get(this.#API.cars, { + params: { + segment, + }, + }); + } + + getSmallCars() { + return this.getSegmentCars({ segment: this.#segment.small }); + } + + getMediumCars() { + return this.getSegmentCars({ segment: this.#segment.medium }); + } + + getLargeCars() { + return this.getSegmentCars({ segment: this.#segment.large }); + } + + getSuvCars() { + return this.getSegmentCars({ segment: this.#segment.suv }); + } +} + +export default new carInstance(); diff --git a/src/api/constant.js b/src/api/constant.js new file mode 100644 index 0000000..8752a63 --- /dev/null +++ b/src/api/constant.js @@ -0,0 +1,16 @@ +export const CAR_API_URL = { + cars: "/cars", +}; + +export const CAR_FUELTYPE = { + gasiline: "gasoline", + hybrid: "hybrid", + ev: "ev", +}; + +export const CAR_SEGMENT = { + small: "C", + medium: "D", + large: "E", + suv: "SUV", +}; diff --git a/src/api/createInstance.js b/src/api/createInstance.js new file mode 100644 index 0000000..d50c6a0 --- /dev/null +++ b/src/api/createInstance.js @@ -0,0 +1,8 @@ +import axios from "axios"; + +export const createInstance = ({ url, config }) => { + return axios.create({ + baseURL: url, + ...config, + }); +}; From a65d995fd08b36f100a203af19c0c0e540431511 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Wed, 2 Nov 2022 18:22:58 +0900 Subject: [PATCH 03/15] =?UTF-8?q?Fix:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=ED=8C=8C=EC=9D=BC=20js=20->=20jsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 컴포넌트와 로직 구분을 위해서 컴포넌트 파일은 jsx로 변경 --- src/App.js | 7 ------- src/App.jsx | 12 ++++++++++++ src/{index.js => index.jsx} | 0 3 files changed, 12 insertions(+), 7 deletions(-) delete mode 100644 src/App.js create mode 100644 src/App.jsx rename src/{index.js => index.jsx} (100%) diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 436ff32..0000000 --- a/src/App.js +++ /dev/null @@ -1,7 +0,0 @@ -import AppRouter from "./routes/AppRouter"; - -function App() { - return ; -} - -export default App; diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..fb9b445 --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,12 @@ +import { CarInfoProvider } from "./contest/CarProvider"; +import AppRouter from "./routes/AppRouter"; + +function App() { + return ( + + + + ); +} + +export default App; diff --git a/src/index.js b/src/index.jsx similarity index 100% rename from src/index.js rename to src/index.jsx From 31ec40bab963d848c33b865190de6d571bf810d9 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Wed, 2 Nov 2022 18:26:18 +0900 Subject: [PATCH 04/15] Rename: carInstance -> carAPI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - API관련 함수라는걸 알려주기 위해서 carAPI로 변경 --- src/api/{carInstance.js => carAPI.js} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/api/{carInstance.js => carAPI.js} (95%) diff --git a/src/api/carInstance.js b/src/api/carAPI.js similarity index 95% rename from src/api/carInstance.js rename to src/api/carAPI.js index b64dca9..dfa5e51 100644 --- a/src/api/carInstance.js +++ b/src/api/carAPI.js @@ -3,7 +3,7 @@ import { createInstance } from "./createInstance"; const BASE_URL = "https://preonboarding.platdev.net/api"; -class carInstance { +class carAPI { #API; #instance; #fuelType; @@ -66,4 +66,4 @@ class carInstance { } } -export default new carInstance(); +export default new carAPI(); From 4a5044176ae77892dad4353e21eebe84197e6dee Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Wed, 2 Nov 2022 18:27:17 +0900 Subject: [PATCH 05/15] =?UTF-8?q?Feat:=20carInfo=20Context=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 2 +- src/context/CarProvider.jsx | 47 +++++++++++++++++++++++++++++++++++++ src/pages/MainCar.jsx | 5 +++- 3 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 src/context/CarProvider.jsx diff --git a/src/App.jsx b/src/App.jsx index fb9b445..951b71e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,4 @@ -import { CarInfoProvider } from "./contest/CarProvider"; +import { CarInfoProvider } from "./context/CarProvider"; import AppRouter from "./routes/AppRouter"; function App() { diff --git a/src/context/CarProvider.jsx b/src/context/CarProvider.jsx new file mode 100644 index 0000000..f6d3ffd --- /dev/null +++ b/src/context/CarProvider.jsx @@ -0,0 +1,47 @@ +import { createContext, useContext, useEffect, useMemo, useState } from "react"; +import carAPI from "../api/carAPI"; + +const CarInfoValueContext = createContext(null); +const CarInfoActionContext = createContext(null); + +const useCarInfo = () => { + const value = useContext(CarInfoValueContext); + if (value === null) { + throw new Error("useCarInfo should be used within TodosProvider"); + } + return value; +}; + +const useCarInfoActions = () => { + const value = useContext(CarInfoActionContext); + if (value === null) { + throw new Error("useCarInfoActions should be used within TodosProvider"); + } + return value; +}; + +const CarInfoProvider = ({ children }) => { + const [carInfo, setCarInfo] = useState([]); + const actions = useMemo( + () => ({ + async getAllCar() { + const { + data: { payload }, + } = await carAPI.getAllCar(); + setCarInfo(payload); + }, + }), + [], + ); + + useEffect(() => { + actions.getAllCar(); + }, [actions]); + return ( + + {children} + + ); +}; + +export { useCarInfo, useCarInfoActions, CarInfoProvider }; diff --git a/src/pages/MainCar.jsx b/src/pages/MainCar.jsx index aa915da..25d36a4 100644 --- a/src/pages/MainCar.jsx +++ b/src/pages/MainCar.jsx @@ -1,7 +1,10 @@ import React from "react"; +import { useCarInfo } from "../contest/CarProvider"; const CarMain = () => { - return
Main
; + const carInfo = useCarInfo(); + + return
Main!!!!!!!
; }; export default CarMain; From 9e03b43c7de1c716968e684843ece3a26fa6490a Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Wed, 2 Nov 2022 18:37:34 +0900 Subject: [PATCH 06/15] =?UTF-8?q?Feat:=20=EA=B3=B5=ED=86=B5=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EA=B4=80=EB=A6=AC=EB=A5=BC=20=EC=9C=84=ED=95=B4=20?= =?UTF-8?q?themeProvider=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 6 +++--- src/context/ColorProvider.jsx | 13 +++++++++++++ src/context/Providers.jsx | 12 ++++++++++++ 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 src/context/ColorProvider.jsx create mode 100644 src/context/Providers.jsx diff --git a/src/App.jsx b/src/App.jsx index 951b71e..0a03625 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,11 @@ -import { CarInfoProvider } from "./context/CarProvider"; +import Providers from "./context/Providers"; import AppRouter from "./routes/AppRouter"; function App() { return ( - + - + ); } diff --git a/src/context/ColorProvider.jsx b/src/context/ColorProvider.jsx new file mode 100644 index 0000000..785e298 --- /dev/null +++ b/src/context/ColorProvider.jsx @@ -0,0 +1,13 @@ +import { ThemeProvider } from "styled-components"; + +const theme = { + black: "#000000", + gray: "#d9d9d9", + blue: "#0094ff", +}; + +const ColorProvider = ({ children }) => { + return {children}; +}; + +export { ColorProvider }; diff --git a/src/context/Providers.jsx b/src/context/Providers.jsx new file mode 100644 index 0000000..fc2d21e --- /dev/null +++ b/src/context/Providers.jsx @@ -0,0 +1,12 @@ +import { CarInfoProvider } from "./CarProvider"; +import { ColorProvider } from "./ColorProvider"; + +const Providers = ({ children }) => { + return ( + + {children} + + ); +}; + +export default Providers; From d14822ee9dfada04660347200242de8c58f2f851 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 01:30:45 +0900 Subject: [PATCH 07/15] =?UTF-8?q?Feat:=20theme=20=EC=A0=84=EC=97=AD?= =?UTF-8?q?=EA=B0=92=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 22 ++++++++++++++++++++++ package.json | 1 + src/App.jsx | 2 ++ src/components/Layout.jsx | 17 +++++++++++++++++ src/context/ColorProvider.jsx | 7 +------ src/index.css | 11 ----------- src/index.jsx | 1 - src/routes/AppRouter.jsx | 11 +++++++---- src/styles/globalStyles.js | 18 ++++++++++++++++++ src/styles/theme.js | 26 ++++++++++++++++++++++++++ 10 files changed, 94 insertions(+), 22 deletions(-) create mode 100644 src/components/Layout.jsx delete mode 100644 src/index.css create mode 100644 src/styles/globalStyles.js create mode 100644 src/styles/theme.js diff --git a/package-lock.json b/package-lock.json index f1c2e1b..cbffc3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", "styled-components": "^5.3.6", + "styled-reset": "^4.4.2", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -15277,6 +15278,21 @@ "node": ">=4" } }, + "node_modules/styled-reset": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/styled-reset/-/styled-reset-4.4.2.tgz", + "integrity": "sha512-VzVhEZHpO/CD/F5ZllqTAY+GTaKlNDZt5mTrtPf/kXZSe85+wMkhRIiPARgvCP9/HQMk+ZGaEWk1IkdP2SYAUQ==", + "engines": { + "node": ">=16.0.0" + }, + "funding": { + "type": "ko-fi", + "url": "https://ko-fi.com/zacanger" + }, + "peerDependencies": { + "styled-components": ">=4.0.0 || >=5.0.0" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -28076,6 +28092,12 @@ } } }, + "styled-reset": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/styled-reset/-/styled-reset-4.4.2.tgz", + "integrity": "sha512-VzVhEZHpO/CD/F5ZllqTAY+GTaKlNDZt5mTrtPf/kXZSe85+wMkhRIiPARgvCP9/HQMk+ZGaEWk1IkdP2SYAUQ==", + "requires": {} + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/package.json b/package.json index 513f9cb..718c88f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", "styled-components": "^5.3.6", + "styled-reset": "^4.4.2", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.jsx b/src/App.jsx index 0a03625..4477dd2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,11 @@ import Providers from "./context/Providers"; import AppRouter from "./routes/AppRouter"; +import GlobalStyle from "./styles/globalStyles"; function App() { return ( + ); diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx new file mode 100644 index 0000000..794525c --- /dev/null +++ b/src/components/Layout.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import styled from "styled-components"; +import { Outlet } from "../../node_modules/react-router-dom/dist/index"; + +const Layout = () => { + return ( + + + + ); +}; + +const Wrraper = styled.div` + width: 100%; + max-width: 450px; +`; +export default Layout; diff --git a/src/context/ColorProvider.jsx b/src/context/ColorProvider.jsx index 785e298..a084bea 100644 --- a/src/context/ColorProvider.jsx +++ b/src/context/ColorProvider.jsx @@ -1,10 +1,5 @@ import { ThemeProvider } from "styled-components"; - -const theme = { - black: "#000000", - gray: "#d9d9d9", - blue: "#0094ff", -}; +import theme from "../styles/theme"; const ColorProvider = ({ children }) => { return {children}; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 714ab0e..0000000 --- a/src/index.css +++ /dev/null @@ -1,11 +0,0 @@ -body { - margin: 0; - 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; -} diff --git a/src/index.jsx b/src/index.jsx index a64e7d5..71a354b 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import "./index.css"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); diff --git a/src/routes/AppRouter.jsx b/src/routes/AppRouter.jsx index 797d802..8de81a5 100644 --- a/src/routes/AppRouter.jsx +++ b/src/routes/AppRouter.jsx @@ -1,15 +1,18 @@ import React from "react"; import { BrowserRouter, Route, Routes } from "../../node_modules/react-router-dom/dist/index"; +import Layout from "../components/Layout"; import { routes } from "./routePath"; const AppRouter = () => { return ( - {routes.map((route) => { - const { path, element } = route; - return ; - })} + }> + {routes.map((route) => { + const { path, element } = route; + return ; + })} + ); diff --git a/src/styles/globalStyles.js b/src/styles/globalStyles.js new file mode 100644 index 0000000..93ead74 --- /dev/null +++ b/src/styles/globalStyles.js @@ -0,0 +1,18 @@ +import { createGlobalStyle } from "styled-components"; +import reset from "styled-reset"; + +const GlobalStyle = createGlobalStyle` + ${reset} + html { font-size: 62.5%; } + button{all:unset} +div{ + box-sizing: border-box; +} + + #root{ + display:flex ; + justify-content:center ; + } +`; + +export default GlobalStyle; diff --git a/src/styles/theme.js b/src/styles/theme.js new file mode 100644 index 0000000..8c3a2b0 --- /dev/null +++ b/src/styles/theme.js @@ -0,0 +1,26 @@ +const color = { + black: "#000000", + gray: "#d9d9d9", + blue: "#0094ff", + white: "#FFFFFF", +}; + +const bgColor = { + primary: color.black, + secondary: color.gray, + tertiary: color.blue, +}; + +const fontColor = { + primary: color.white, + secondary: color.black, + tertiary: color.white, +}; + +const theme = { + color, + bgColor, + fontColor, +}; + +export default theme; From 2fc4d6ce4d79c50c1f7858c59eae3a7619e7a30a Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 12:42:10 +0900 Subject: [PATCH 08/15] =?UTF-8?q?Fix:=20car=EC=A0=95=EB=B3=B4=20=EB=B6=88?= =?UTF-8?q?=EB=9F=AC=EC=98=A4=EB=8A=94=20=EB=B9=84=EB=8F=99=EA=B8=B0=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/carAPI.js | 16 +++++++---- src/context/CarProvider.jsx | 18 ++++++++---- src/hooks/useTags.js | 57 +++++++++++++++++++++++++++++++++++++ src/utils/carModel.js | 16 +++++++++++ 4 files changed, 96 insertions(+), 11 deletions(-) create mode 100644 src/hooks/useTags.js create mode 100644 src/utils/carModel.js diff --git a/src/api/carAPI.js b/src/api/carAPI.js index dfa5e51..3dae940 100644 --- a/src/api/carAPI.js +++ b/src/api/carAPI.js @@ -1,4 +1,4 @@ -import { CAR_API_URL, CAR_FUELTYPE } from "./constant"; +import { CAR_API_URL, CAR_FUELTYPE, CAR_SEGMENT } from "./constant"; import { createInstance } from "./createInstance"; const BASE_URL = "https://preonboarding.platdev.net/api"; @@ -18,6 +18,7 @@ class carAPI { }); this.#API = CAR_API_URL; this.#fuelType = CAR_FUELTYPE; + this.#segment = CAR_SEGMENT; } getAllCar() { @@ -41,7 +42,7 @@ class carAPI { }); } - getSegmentCars({ segment }) { + async getSegmentCars({ segment }) { return this.#instance.get(this.#API.cars, { params: { segment, @@ -49,19 +50,22 @@ class carAPI { }); } - getSmallCars() { + async getSmallCars() { return this.getSegmentCars({ segment: this.#segment.small }); } - getMediumCars() { + async getMediumCars() { + console.log(this.#segment.medium); return this.getSegmentCars({ segment: this.#segment.medium }); } - getLargeCars() { + async getLargeCars() { + console.log(this.#segment.large); + return this.getSegmentCars({ segment: this.#segment.large }); } - getSuvCars() { + async getSuvCars() { return this.getSegmentCars({ segment: this.#segment.suv }); } } diff --git a/src/context/CarProvider.jsx b/src/context/CarProvider.jsx index f6d3ffd..eee93ee 100644 --- a/src/context/CarProvider.jsx +++ b/src/context/CarProvider.jsx @@ -1,4 +1,4 @@ -import { createContext, useContext, useEffect, useMemo, useState } from "react"; +import { createContext, useContext, useMemo, useState } from "react"; import carAPI from "../api/carAPI"; const CarInfoValueContext = createContext(null); @@ -22,23 +22,31 @@ const useCarInfoActions = () => { const CarInfoProvider = ({ children }) => { const [carInfo, setCarInfo] = useState([]); + const [isLoading, setIsLoading] = useState(false); const actions = useMemo( () => ({ async getAllCar() { + setIsLoading(true); const { data: { payload }, } = await carAPI.getAllCar(); + setIsLoading(false); + setCarInfo(payload); + }, + async setAllCar(fetchData) { + setIsLoading(true); + const { + data: { payload }, + } = await fetchData(); + setIsLoading(false); setCarInfo(payload); }, }), [], ); - useEffect(() => { - actions.getAllCar(); - }, [actions]); return ( - + {children} ); diff --git a/src/hooks/useTags.js b/src/hooks/useTags.js new file mode 100644 index 0000000..1b8b2f1 --- /dev/null +++ b/src/hooks/useTags.js @@ -0,0 +1,57 @@ +import { useState } from "react"; +import carAPI from "../api/carAPI"; +import { carModel } from "../utils/carModel"; + +const initalTags = [ + { + label: "전체", + isActive: true, + handleClick: () => carAPI.getAllCar(), + }, + { + label: carModel.segment.C, + isActive: false, + handleClick: () => carAPI.getSmallCars(), + }, + { + label: carModel.segment.D, + isActive: false, + handleClick: () => carAPI.getMediumCars(), + }, + { + label: carModel.segment.E, + isActive: false, + handleClick: () => carAPI.getLargeCars(), + }, +]; + +export const useTags = (setAllCar) => { + const [tags, setTags] = useState(initalTags); + + const toggle = (findIndex) => { + const newTags = tags.map((tag, index) => { + if (findIndex === index) + return { + isActive: !tag.isActive, + label: tag.label, + handleClick: tag.handleClick, + }; + else + return { + isActive: false, + label: tag.label, + handleClick: tag.handleClick, + }; + }); + setTags(newTags); + }; + + const handleClick = async (e) => { + const curLabel = e.target.innerText; + const findIndex = tags.findIndex((tag) => tag.label === curLabel); + toggle(findIndex); + setAllCar(await tags[findIndex].handleClick); + }; + + return { tags, handleClick }; +}; diff --git a/src/utils/carModel.js b/src/utils/carModel.js new file mode 100644 index 0000000..18d003f --- /dev/null +++ b/src/utils/carModel.js @@ -0,0 +1,16 @@ +export const carModel = { + fuelType: { + gasoline: "가솔린", + ev: "전기", + hybid: "하이브리드", + }, + segment: { + C: "소형", + D: "중형", + E: "대형", + }, +}; + +export const getCarSegment = () => { + return Object.values(carModel.segment); +}; From ea8b2ed15fcca442cc95e6ea8365292955955897 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 12:42:30 +0900 Subject: [PATCH 09/15] =?UTF-8?q?Feat:=20=EB=A9=94=EC=9D=B8=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/carAPI.js | 3 -- src/components/CarHeader.jsx | 24 +++++++++++++ src/components/CarItem.jsx | 57 +++++++++++++++++++++++++++++++ src/components/CarList.jsx | 37 ++++++++++++++++++++ src/components/Category.jsx | 31 +++++++++++++++++ src/components/common/Button.jsx | 25 ++++++++++++++ src/components/common/Message.jsx | 26 ++++++++++++++ src/components/common/New.jsx | 25 ++++++++++++++ src/components/common/Tag.jsx | 12 +++++++ src/pages/MainCar.jsx | 28 ++++++++++++--- 10 files changed, 261 insertions(+), 7 deletions(-) create mode 100644 src/components/CarHeader.jsx create mode 100644 src/components/CarItem.jsx create mode 100644 src/components/CarList.jsx create mode 100644 src/components/Category.jsx create mode 100644 src/components/common/Button.jsx create mode 100644 src/components/common/Message.jsx create mode 100644 src/components/common/New.jsx create mode 100644 src/components/common/Tag.jsx diff --git a/src/api/carAPI.js b/src/api/carAPI.js index 3dae940..0356de1 100644 --- a/src/api/carAPI.js +++ b/src/api/carAPI.js @@ -55,13 +55,10 @@ class carAPI { } async getMediumCars() { - console.log(this.#segment.medium); return this.getSegmentCars({ segment: this.#segment.medium }); } async getLargeCars() { - console.log(this.#segment.large); - return this.getSegmentCars({ segment: this.#segment.large }); } diff --git a/src/components/CarHeader.jsx b/src/components/CarHeader.jsx new file mode 100644 index 0000000..1ea76cc --- /dev/null +++ b/src/components/CarHeader.jsx @@ -0,0 +1,24 @@ +import styled from "styled-components"; + +const CarHeader = () => { + return ( + +

전체 차량

+ + ); +}; + +const S = { + Header: styled.div` + padding: 2rem 16rem; + text-align: center; + h1 { + min-width: 6.4rem; + font-weight: 700; + font-size: 17px; + line-height: 21px; + color: ${({ theme }) => theme.black}; + } + `, +}; +export default CarHeader; diff --git a/src/components/CarItem.jsx b/src/components/CarItem.jsx new file mode 100644 index 0000000..9c83019 --- /dev/null +++ b/src/components/CarItem.jsx @@ -0,0 +1,57 @@ +import React from "react"; +import styled from "styled-components"; +import { carModel } from "../utils/carModel"; +import New from "./common/New"; + +const inDay = (date) => { + const today = new Date(); + const day = new Date(date); + return today.getFullYear() === day.getFullYear() && today.getDate() >= day.getDate(); +}; + +const CarItem = ({ brand, name, segment, fuelType, amount, imageUrl, createdAt }) => { + return ( + + + {brand} + {name} +

{`${segment} / ${carModel.fuelType[fuelType]}`}

+

월 {amount} 부터

+ + + {{`${name}사진`}} {inDay(createdAt) ? : null} + + + ); +}; + +const S = { + arImgDiv: styled.div` + width: 200px; + img { + max-width: 200px; + width: 100%; + } + `, + CarItemContainer: styled.div` + width: 100%; + height: 120px; + color: ${({ theme }) => theme.black}; + border-bottom: 1px solid ${({ theme }) => theme.black}; + padding: 1.25em 1.55em; + display: flex; + justify-content: space-between; + `, + CarInfo: styled.div``, + CarImg: styled.div` + position: relative; + width: 20rem; + background-color: ${({ theme }) => theme.color.gray}; + img { + max-width: 200px; + width: 100%; + } + `, +}; + +export default CarItem; diff --git a/src/components/CarList.jsx b/src/components/CarList.jsx new file mode 100644 index 0000000..8695046 --- /dev/null +++ b/src/components/CarList.jsx @@ -0,0 +1,37 @@ +import React from "react"; +import CarItem from "./CarItem"; +import Message from "./common/Message"; + +const CarList = ({ carInfo, isLoading }) => { + if (isLoading) return ; + + return ( + <> + {carInfo.length > 0 ? ( + carInfo.map((car) => { + const { + attribute: { brand, name, segment, fuelType, imageUrl }, + amount, + createdAt, + } = car; + return ( + + ); + }) + ) : ( + + )} + + ); +}; + +export default CarList; diff --git a/src/components/Category.jsx b/src/components/Category.jsx new file mode 100644 index 0000000..bf790ea --- /dev/null +++ b/src/components/Category.jsx @@ -0,0 +1,31 @@ +import React from "react"; +import styled from "styled-components"; +import { useTags } from "../hooks/useTags"; +import Tag from "./common/Tag"; + +const Category = ({ setAllCar }) => { + const { tags, handleClick } = useTags(setAllCar); + + return ( + + {tags + ? tags.map((tag) => ( + + )) + : null} + + ); +}; + +const S = { + Category: styled.ul` + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.8rem; + padding: 0.6rem; + border-top: 1px solid ${({ theme }) => theme.black}; + border-bottom: 1px solid ${({ theme }) => theme.black}; + `, +}; +export default Category; diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx new file mode 100644 index 0000000..96feada --- /dev/null +++ b/src/components/common/Button.jsx @@ -0,0 +1,25 @@ +import React from "react"; +import styled from "styled-components"; + +const Button = ({ label, onClick, color = "primary" }) => { + return ( + + + + ); +}; + +export const ButtonContainer = styled.button` + padding: 0.5em 1.8em; + color: ${({ theme, color }) => theme.fontColor[color]}; + background-color: ${({ theme, color }) => theme.bgColor[color]}; + border-radius: 62px; + width: 100%; + min-width: 6.2rem; + min-height: 27px; + font-size: 1.4rem; + text-align: center; + box-sizing: border-box; +`; + +export default Button; diff --git a/src/components/common/Message.jsx b/src/components/common/Message.jsx new file mode 100644 index 0000000..e7d7b9e --- /dev/null +++ b/src/components/common/Message.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import styled from "styled-components"; + +const Message = ({ message }) => { + return ( + +

{message}

+ + ); +}; + +const S = { + Container: styled.div` + display: flex; + align-items: center; + justify-content: center; + height: 50vh; + text-align: center; + h1 { + font-weight: 700; + font-size: 1.7rem; + } + `, +}; + +export default Message; diff --git a/src/components/common/New.jsx b/src/components/common/New.jsx new file mode 100644 index 0000000..4138d2c --- /dev/null +++ b/src/components/common/New.jsx @@ -0,0 +1,25 @@ +import React from "react"; +import styled from "styled-components"; +import { ButtonContainer } from "./Button"; + +const New = () => { + return ( + + + + ); +}; + +const S = { + New: styled(ButtonContainer)` + max-width: 5.2rem; + max-height: 2.2rem; + position: absolute; + top: 0; + right: 0; + transform: translate(0%, -50%); + padding: 0.4rem 0.3rem; + `, +}; + +export default New; diff --git a/src/components/common/Tag.jsx b/src/components/common/Tag.jsx new file mode 100644 index 0000000..9479688 --- /dev/null +++ b/src/components/common/Tag.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import Button from "./Button"; + +const Tag = ({ label, isActive, onClick }) => { + return ( +
  • +
    • + ); +}; + +export default Tag; diff --git a/src/pages/MainCar.jsx b/src/pages/MainCar.jsx index 25d36a4..37fb83f 100644 --- a/src/pages/MainCar.jsx +++ b/src/pages/MainCar.jsx @@ -1,10 +1,30 @@ -import React from "react"; -import { useCarInfo } from "../contest/CarProvider"; +import React, { useEffect } from "react"; +import styled from "styled-components"; +import Category from "../components/Category"; +import CarHeader from "../components/CarHeader"; +import CarList from "../components/CarList"; +import { useCarInfo, useCarInfoActions } from "../context/CarProvider"; const CarMain = () => { - const carInfo = useCarInfo(); + const { carInfo, isLoading } = useCarInfo(); - return
    Main!!!!!!!
    ; + const { getAllCar, setAllCar } = useCarInfoActions(); + + useEffect(() => { + getAllCar(); + }, [getAllCar]); + + return ( + + + + + + ); }; export default CarMain; + +const S = { + CarContainer: styled.div``, +}; From d4e5b076cd62ceb2a81ccf0f86f5366118e33069 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 13:07:23 +0900 Subject: [PATCH 10/15] =?UTF-8?q?Design:=20=EB=A9=94=EC=9D=B8=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=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/components/CarItem.jsx | 25 ++++++++++++++++--------- src/components/CarList.jsx | 34 +++++++++++++++++++++------------- src/components/common/New.jsx | 2 +- src/styles/globalStyles.js | 6 +++--- 4 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/components/CarItem.jsx b/src/components/CarItem.jsx index 9c83019..4ddfde4 100644 --- a/src/components/CarItem.jsx +++ b/src/components/CarItem.jsx @@ -26,14 +26,7 @@ const CarItem = ({ brand, name, segment, fuelType, amount, imageUrl, createdAt } }; const S = { - arImgDiv: styled.div` - width: 200px; - img { - max-width: 200px; - width: 100%; - } - `, - CarItemContainer: styled.div` + CarItemContainer: styled.li` width: 100%; height: 120px; color: ${({ theme }) => theme.black}; @@ -41,8 +34,22 @@ const S = { padding: 1.25em 1.55em; display: flex; justify-content: space-between; + font-size: 1.2rem; `, - CarInfo: styled.div``, + CarInfo: styled.div` + display: flex; + flex-direction: column; + gap: 0.2rem; + font-size: inherit; + strong { + font-weight: 700; + font-size: 1.4rem; + } + > :nth-child(2) { + margin-bottom: 0.8rem; + } + `, + CarImg: styled.div` position: relative; width: 20rem; diff --git a/src/components/CarList.jsx b/src/components/CarList.jsx index 8695046..3a73fb3 100644 --- a/src/components/CarList.jsx +++ b/src/components/CarList.jsx @@ -1,4 +1,6 @@ import React from "react"; +import styled from "styled-components"; +import { Link } from "../../node_modules/react-router-dom/dist/index"; import CarItem from "./CarItem"; import Message from "./common/Message"; @@ -6,32 +8,38 @@ const CarList = ({ carInfo, isLoading }) => { if (isLoading) return ; return ( - <> + {carInfo.length > 0 ? ( carInfo.map((car) => { const { - attribute: { brand, name, segment, fuelType, imageUrl }, + id, amount, createdAt, + attribute: { brand, name, segment, fuelType, imageUrl }, } = car; return ( - + + + ); }) ) : ( )} - + ); }; +const S = { + CarListContainer: styled.ul``, +}; + export default CarList; diff --git a/src/components/common/New.jsx b/src/components/common/New.jsx index 4138d2c..4027c7b 100644 --- a/src/components/common/New.jsx +++ b/src/components/common/New.jsx @@ -17,7 +17,7 @@ const S = { position: absolute; top: 0; right: 0; - transform: translate(0%, -50%); + transform: translate(20%, -50%); padding: 0.4rem 0.3rem; `, }; diff --git a/src/styles/globalStyles.js b/src/styles/globalStyles.js index 93ead74..3399763 100644 --- a/src/styles/globalStyles.js +++ b/src/styles/globalStyles.js @@ -4,10 +4,10 @@ import reset from "styled-reset"; const GlobalStyle = createGlobalStyle` ${reset} html { font-size: 62.5%; } - button{all:unset} -div{ + button,a {all:unset} + div,li{ box-sizing: border-box; -} + } #root{ display:flex ; From 961e3591d5c4c6880d1d7353695b4310c1b29b92 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 13:43:01 +0900 Subject: [PATCH 11/15] =?UTF-8?q?Rename:=20pages=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=91=EB=AF=B8?= =?UTF-8?q?=EC=82=AC=20Page=EB=A1=9C=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CarDetail 작업중 detail component와 page간의 구분을 위해 접미사를 추가 --- src/pages/CarDetail.jsx | 9 -------- src/pages/CarDetailPage.jsx | 18 ++++++++++++++++ src/pages/{MainCar.jsx => MainCarPage.jsx} | 0 src/pages/{404.jsx => NotFoundPage.jsx} | 0 src/routes/routePath.js | 24 +++++++++++----------- 5 files changed, 30 insertions(+), 21 deletions(-) delete mode 100644 src/pages/CarDetail.jsx create mode 100644 src/pages/CarDetailPage.jsx rename src/pages/{MainCar.jsx => MainCarPage.jsx} (100%) rename src/pages/{404.jsx => NotFoundPage.jsx} (100%) diff --git a/src/pages/CarDetail.jsx b/src/pages/CarDetail.jsx deleted file mode 100644 index 05cbf8f..0000000 --- a/src/pages/CarDetail.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import { useParams } from "../../node_modules/react-router-dom/dist/index"; - -const CarDetail = () => { - const { id } = useParams(); - return
    Detail{id}
    ; -}; - -export default CarDetail; diff --git a/src/pages/CarDetailPage.jsx b/src/pages/CarDetailPage.jsx new file mode 100644 index 0000000..bc0da91 --- /dev/null +++ b/src/pages/CarDetailPage.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import styled from "styled-components"; +import CarHeader from "../components/CarHeader"; + +const CarDetail = () => { + return ( + + + + + ); +}; + +const S = { + DetailContainer: styled.div``, +}; + +export default CarDetail; diff --git a/src/pages/MainCar.jsx b/src/pages/MainCarPage.jsx similarity index 100% rename from src/pages/MainCar.jsx rename to src/pages/MainCarPage.jsx diff --git a/src/pages/404.jsx b/src/pages/NotFoundPage.jsx similarity index 100% rename from src/pages/404.jsx rename to src/pages/NotFoundPage.jsx diff --git a/src/routes/routePath.js b/src/routes/routePath.js index 543155c..a662ff2 100644 --- a/src/routes/routePath.js +++ b/src/routes/routePath.js @@ -1,24 +1,24 @@ -import NotFound from "../pages/404"; -import CarDetail from "../pages/CarDetail"; -import CarMain from "../pages/MainCar"; +import NotFoundPage from "../pages/NotFoundPage"; +import CarDetailPage from "../pages/CarDetailPage"; +import CarMainPage from "../pages/MainCarPage"; export const routePath = { - carMain: "/", - CarDetail: "detail/:id", - NotFound: "*", + carMainPage: "/", + carDetailPage: "detail/:id", + notFoundPage: "*", }; export const routes = [ { - path: routePath.carMain, - element: , + path: routePath.carMainPage, + element: , }, { - path: routePath.CarDetail, - element: , + path: routePath.carDetailPage, + element: , }, { - path: routePath.NotFound, - element: , + path: routePath.notFoundPage, + element: , }, ]; From d4b6cb0535855df8502f76aaafc4595bafaead57 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 14:23:28 +0900 Subject: [PATCH 12/15] =?UTF-8?q?Feat:=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/iconBack.png | Bin 0 -> 180 bytes .../CarDetail/CarAdditionalProducts.jsx | 23 ++++++++ src/components/CarDetail/CarDetail.jsx | 55 ++++++++++++++++++ src/components/CarDetail/CarDetailHeader.jsx | 35 +++++++++++ src/components/CarDetail/CarInfo.jsx | 29 +++++++++ src/components/CarDetail/CarInsurance.jsx | 23 ++++++++ src/components/CarDetail/CarMainDetail.jsx | 30 ++++++++++ .../{ => CarMain.jsx}/CarHeader.jsx | 0 src/components/{ => CarMain.jsx}/CarItem.jsx | 4 +- src/components/{ => CarMain.jsx}/CarList.jsx | 6 +- src/components/{ => CarMain.jsx}/Category.jsx | 4 +- src/pages/CarDetailPage.jsx | 9 +-- src/pages/MainCarPage.jsx | 6 +- src/utils/carModel.js | 4 ++ 14 files changed, 214 insertions(+), 14 deletions(-) create mode 100644 src/assets/icons/iconBack.png create mode 100644 src/components/CarDetail/CarAdditionalProducts.jsx create mode 100644 src/components/CarDetail/CarDetail.jsx create mode 100644 src/components/CarDetail/CarDetailHeader.jsx create mode 100644 src/components/CarDetail/CarInfo.jsx create mode 100644 src/components/CarDetail/CarInsurance.jsx create mode 100644 src/components/CarDetail/CarMainDetail.jsx rename src/components/{ => CarMain.jsx}/CarHeader.jsx (100%) rename src/components/{ => CarMain.jsx}/CarItem.jsx (94%) rename src/components/{ => CarMain.jsx}/CarList.jsx (83%) rename src/components/{ => CarMain.jsx}/Category.jsx (89%) diff --git a/src/assets/icons/iconBack.png b/src/assets/icons/iconBack.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#NukCh+=EJ{gZ?X2zu$Pm>fETd)1t$vF7}+l{ga;(JJ~rtcP@I;FT{Pw;(B90*G4{b V?pdq { + return ( +
    +

    추가상품

    +
    + {additionalProducts && + additionalProducts.map((element) => { + const { name, amount } = element; + return ( + + {name} + {amount} + + ); + })} +
    +
    + ); +}; + +export default CarAdditionalProducts; diff --git a/src/components/CarDetail/CarDetail.jsx b/src/components/CarDetail/CarDetail.jsx new file mode 100644 index 0000000..4d61ee8 --- /dev/null +++ b/src/components/CarDetail/CarDetail.jsx @@ -0,0 +1,55 @@ +import React from "react"; +import styled from "styled-components"; +import { useLocation } from "../../../node_modules/react-router-dom/dist/index"; +import CarAdditionalProducts from "./CarAdditionalProducts"; +import CarInfo from "./CarInfo"; +import CarInsurance from "./CarInsurance"; +import CarMainDetail from "./CarMainDetail"; + +const CarDetail = () => { + const { + state: { + state: { + id, + startDate, + amount, + attribute: { brand, name, segment, fuelType, imageUrl }, + insurance, + additionalProducts, + }, + }, + } = useLocation(); + return ( +
    + + {name} + + + + + + + +
    + ); +}; + +const S = { + CarImg: styled.div` + width: 100%; + min-height: 20rem; + display: flex; + justify-content: center; + position: relative; + background-color: ${({ theme }) => theme.color.gray}; + img { + max-width: 200px; + width: 100%; + } + `, + Detail: styled.div` + display: flex; + flex-direction: column; + `, +}; +export default CarDetail; diff --git a/src/components/CarDetail/CarDetailHeader.jsx b/src/components/CarDetail/CarDetailHeader.jsx new file mode 100644 index 0000000..b01c728 --- /dev/null +++ b/src/components/CarDetail/CarDetailHeader.jsx @@ -0,0 +1,35 @@ +import styled from "styled-components"; +import { useNavigate } from "../../../node_modules/react-router-dom/dist/index"; +import icon from "../../assets/icons/iconBack.png"; +const CarDetailHeader = () => { + const navigate = useNavigate(); + return ( + + navigate(-1)}> + back_button + +

    차량상세

    +     + ); +}; + +const S = { + Header: styled.div` + padding: 2rem 15rem; + text-align: center; + position: relative; + h1 { + min-width: 6.4rem; + max-height: 6rem; + font-weight: 700; + font-size: 17px; + line-height: 21px; + color: ${({ theme }) => theme.black}; + } + `, + BackButon: styled.button` + position: absolute; + left: 5%; + `, +}; +export default CarDetailHeader; diff --git a/src/components/CarDetail/CarInfo.jsx b/src/components/CarDetail/CarInfo.jsx new file mode 100644 index 0000000..797ac1a --- /dev/null +++ b/src/components/CarDetail/CarInfo.jsx @@ -0,0 +1,29 @@ +import React from "react"; +import styled from "styled-components"; + +const CarInfo = ({ segment, fuelType, startDate }) => { + return ( + +

    차량정보

    +
    + + 차종 +

    {segment}

    +     + + 연료 +

    {fuelType}

    +     + + 이용가능일 +

    {startDate}

    +     +
    +     + ); +}; + +const S = { + CarInfo: styled.div``, +}; +export default CarInfo; diff --git a/src/components/CarDetail/CarInsurance.jsx b/src/components/CarDetail/CarInsurance.jsx new file mode 100644 index 0000000..5459ca5 --- /dev/null +++ b/src/components/CarDetail/CarInsurance.jsx @@ -0,0 +1,23 @@ +import React from "react"; + +const CarInsurance = ({ insurance }) => { + return ( +
    +

    보험

    +
    + {insurance && + insurance.map((element) => { + const { name, description } = element; + return ( + + {name} + {description} + + ); + })} +
    +
    + ); +}; + +export default CarInsurance; diff --git a/src/components/CarDetail/CarMainDetail.jsx b/src/components/CarDetail/CarMainDetail.jsx new file mode 100644 index 0000000..23ca6b0 --- /dev/null +++ b/src/components/CarDetail/CarMainDetail.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; + +const CarMainDetail = ({ brand, name, amount }) => { + return ( + + {brand} + {name} +

    월 {amount} 원

    +     + ); +}; + +const S = { + MainDetail: styled.div` + display: flex; + flex-direction: column; + gap: 0.2rem; + font-size: inherit; + strong { + font-weight: 700; + font-size: 1.4rem; + } + > :nth-child(2) { + margin-bottom: 0.8rem; + } + `, +}; + +export default CarMainDetail; diff --git a/src/components/CarHeader.jsx b/src/components/CarMain.jsx/CarHeader.jsx similarity index 100% rename from src/components/CarHeader.jsx rename to src/components/CarMain.jsx/CarHeader.jsx diff --git a/src/components/CarItem.jsx b/src/components/CarMain.jsx/CarItem.jsx similarity index 94% rename from src/components/CarItem.jsx rename to src/components/CarMain.jsx/CarItem.jsx index 4ddfde4..256b686 100644 --- a/src/components/CarItem.jsx +++ b/src/components/CarMain.jsx/CarItem.jsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { carModel } from "../utils/carModel"; -import New from "./common/New"; +import { carModel } from "../../utils/carModel"; +import New from "../common/New"; const inDay = (date) => { const today = new Date(); diff --git a/src/components/CarList.jsx b/src/components/CarMain.jsx/CarList.jsx similarity index 83% rename from src/components/CarList.jsx rename to src/components/CarMain.jsx/CarList.jsx index 3a73fb3..aaf5e62 100644 --- a/src/components/CarList.jsx +++ b/src/components/CarMain.jsx/CarList.jsx @@ -1,8 +1,8 @@ import React from "react"; import styled from "styled-components"; -import { Link } from "../../node_modules/react-router-dom/dist/index"; +import { Link } from "../../../node_modules/react-router-dom/dist/index"; import CarItem from "./CarItem"; -import Message from "./common/Message"; +import Message from "../common/Message"; const CarList = ({ carInfo, isLoading }) => { if (isLoading) return ; @@ -18,7 +18,7 @@ const CarList = ({ carInfo, isLoading }) => { attribute: { brand, name, segment, fuelType, imageUrl }, } = car; return ( - + { const { tags, handleClick } = useTags(setAllCar); diff --git a/src/pages/CarDetailPage.jsx b/src/pages/CarDetailPage.jsx index bc0da91..0b847d0 100644 --- a/src/pages/CarDetailPage.jsx +++ b/src/pages/CarDetailPage.jsx @@ -1,11 +1,12 @@ import React from "react"; import styled from "styled-components"; -import CarHeader from "../components/CarHeader"; +import CarDetail from "../components/CarDetail/CarDetail"; +import CarDetailHeader from "../components/CarDetail/CarDetailHeader"; -const CarDetail = () => { +const CarDetailPage = () => { return ( - + ); @@ -15,4 +16,4 @@ const S = { DetailContainer: styled.div``, }; -export default CarDetail; +export default CarDetailPage; diff --git a/src/pages/MainCarPage.jsx b/src/pages/MainCarPage.jsx index 37fb83f..a3457ca 100644 --- a/src/pages/MainCarPage.jsx +++ b/src/pages/MainCarPage.jsx @@ -1,8 +1,8 @@ import React, { useEffect } from "react"; import styled from "styled-components"; -import Category from "../components/Category"; -import CarHeader from "../components/CarHeader"; -import CarList from "../components/CarList"; +import Category from "../components/CarMain.jsx/Category"; +import CarHeader from "../components/CarMain.jsx/CarHeader"; +import CarList from "../components/CarMain.jsx/CarList"; import { useCarInfo, useCarInfoActions } from "../context/CarProvider"; const CarMain = () => { diff --git a/src/utils/carModel.js b/src/utils/carModel.js index 18d003f..01623cf 100644 --- a/src/utils/carModel.js +++ b/src/utils/carModel.js @@ -14,3 +14,7 @@ export const carModel = { export const getCarSegment = () => { return Object.values(carModel.segment); }; + +export const getCarFuelType = () => { + return Object.values(carModel.fuelType); +}; From ff51bd0e51aa8c09a6f0db782518c1779862c2df Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 14:50:08 +0900 Subject: [PATCH 13/15] =?UTF-8?q?Design:=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CarDetail/CarAdditionalProducts.jsx | 10 +++--- src/components/CarDetail/CarInfo.jsx | 28 +++++++-------- src/components/CarDetail/CarInsurance.jsx | 11 +++--- src/components/CarDetail/CarMainDetail.jsx | 12 ++++++- src/components/common/DetailInfo.jsx | 35 +++++++++++++++++++ src/components/common/SubHeader.jsx | 24 +++++++++++++ src/utils/formatAmount.js | 3 ++ 7 files changed, 95 insertions(+), 28 deletions(-) create mode 100644 src/components/common/DetailInfo.jsx create mode 100644 src/components/common/SubHeader.jsx create mode 100644 src/utils/formatAmount.js diff --git a/src/components/CarDetail/CarAdditionalProducts.jsx b/src/components/CarDetail/CarAdditionalProducts.jsx index 85aa3f6..b740558 100644 --- a/src/components/CarDetail/CarAdditionalProducts.jsx +++ b/src/components/CarDetail/CarAdditionalProducts.jsx @@ -1,18 +1,18 @@ import React from "react"; +import { formatAmout } from "../../utils/formatAmount"; +import DetailInfo from "../common/DetailInfo"; +import SubHeader from "../common/SubHeader"; const CarAdditionalProducts = ({ additionalProducts }) => { return (
    -

    추가상품

    +
    {additionalProducts && additionalProducts.map((element) => { const { name, amount } = element; return ( - - {name} - {amount} - + ); })}
    diff --git a/src/components/CarDetail/CarInfo.jsx b/src/components/CarDetail/CarInfo.jsx index 797ac1a..63f1f24 100644 --- a/src/components/CarDetail/CarInfo.jsx +++ b/src/components/CarDetail/CarInfo.jsx @@ -1,24 +1,22 @@ import React from "react"; import styled from "styled-components"; +import DetailInfo from "../common/DetailInfo"; +import SubHeader from "../common/SubHeader"; + +//TODO: utls로 분리 +const day = ["월", "화", "수", "목", "금", "토", "일"]; +const startDateFormat = (stringDate) => { + const date = new Date(stringDate); + return `${date.getMonth() + 1} 월 ${date.getDate()}일 (${day[date.getDay()]}) 부터 `; +}; const CarInfo = ({ segment, fuelType, startDate }) => { return ( -

    차량정보

    -
    - - 차종 -

    {segment}

    -     - - 연료 -

    {fuelType}

    -     - - 이용가능일 -

    {startDate}

    -     -
    + + + +     ); }; diff --git a/src/components/CarDetail/CarInsurance.jsx b/src/components/CarDetail/CarInsurance.jsx index 5459ca5..dd0b01d 100644 --- a/src/components/CarDetail/CarInsurance.jsx +++ b/src/components/CarDetail/CarInsurance.jsx @@ -1,19 +1,16 @@ import React from "react"; +import DetailInfo from "../common/DetailInfo"; +import SubHeader from "../common/SubHeader"; const CarInsurance = ({ insurance }) => { return (
    -

    보험

    +
    {insurance && insurance.map((element) => { const { name, description } = element; - return ( - - {name} - {description} - - ); + return ; })}
    diff --git a/src/components/CarDetail/CarMainDetail.jsx b/src/components/CarDetail/CarMainDetail.jsx index 23ca6b0..f9f48c9 100644 --- a/src/components/CarDetail/CarMainDetail.jsx +++ b/src/components/CarDetail/CarMainDetail.jsx @@ -1,12 +1,15 @@ import React from "react"; import styled from "styled-components"; +import { formatAmout } from "../../utils/formatAmount"; const CarMainDetail = ({ brand, name, amount }) => { return ( {brand} {name} -

    월 {amount} 원

    + +

    월 {formatAmout(amount)} 원

    +     ); }; @@ -17,6 +20,7 @@ const S = { flex-direction: column; gap: 0.2rem; font-size: inherit; + padding: 2rem; strong { font-weight: 700; font-size: 1.4rem; @@ -25,6 +29,12 @@ const S = { margin-bottom: 0.8rem; } `, + + AmountContainer: styled.span` + text-align: right; + font-weight: 400; + font-size: 1.7rem; + `, }; export default CarMainDetail; diff --git a/src/components/common/DetailInfo.jsx b/src/components/common/DetailInfo.jsx new file mode 100644 index 0000000..c9885eb --- /dev/null +++ b/src/components/common/DetailInfo.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import styled from "styled-components"; + +const DetailInfo = ({ name, description }) => { + return ( + + + {name} +

    {description}

    +     +     + ); +}; + +const S = { + Info: styled.div` + display: flex; + flex-direction: column; + gap: 2rem; + padding: 1.2rem 2rem; + span { + display: flex; + justify-content: space-between; + } + strong { + font-weight: 700; + font-size: 1.7rem; + } + p { + font-weight: 400; + font-size: 1.7rem; + } + `, +}; +export default DetailInfo; diff --git a/src/components/common/SubHeader.jsx b/src/components/common/SubHeader.jsx new file mode 100644 index 0000000..e160ce4 --- /dev/null +++ b/src/components/common/SubHeader.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import styled from "styled-components"; + +const SubHeader = ({ title }) => { + return ( + +

    {title}

    +     + ); +}; + +const S = { + SubHeader: styled.div` + padding: 2rem; + display: flex; + align-items: center; + height: 4.8rem; + font-weight: 700; + font-size: 1.7rem; + background-color: ${({ theme }) => theme.bgColor["tertiary"]}; + color: ${({ theme }) => theme.fontColor["tertiary"]}; + `, +}; +export default SubHeader; diff --git a/src/utils/formatAmount.js b/src/utils/formatAmount.js new file mode 100644 index 0000000..8467bb8 --- /dev/null +++ b/src/utils/formatAmount.js @@ -0,0 +1,3 @@ +export const formatAmout = (amount) => { + return amount.toString().replace(/\B(? Date: Thu, 3 Nov 2022 14:55:51 +0900 Subject: [PATCH 14/15] =?UTF-8?q?Design:=20Inter=20=ED=8F=B0=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 6 ++++++ src/components/CarDetail/CarMainDetail.jsx | 5 +++++ src/styles/globalStyles.js | 5 +++-- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 1684344..51b2a60 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,12 @@ + + + diff --git a/src/components/CarDetail/CarMainDetail.jsx b/src/components/CarDetail/CarMainDetail.jsx index f9f48c9..7b7ab85 100644 --- a/src/components/CarDetail/CarMainDetail.jsx +++ b/src/components/CarDetail/CarMainDetail.jsx @@ -25,7 +25,12 @@ const S = { font-weight: 700; font-size: 1.4rem; } + > :first-child { + font-size: 2rem; + } + > :nth-child(2) { + font-size: 2.4rem; margin-bottom: 0.8rem; } `, diff --git a/src/styles/globalStyles.js b/src/styles/globalStyles.js index 3399763..a632707 100644 --- a/src/styles/globalStyles.js +++ b/src/styles/globalStyles.js @@ -1,9 +1,10 @@ import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; - const GlobalStyle = createGlobalStyle` ${reset} - html { font-size: 62.5%; } + html { font-size: 62.5%; + font-family: 'Inter', sans-serif; + } button,a {all:unset} div,li{ box-sizing: border-box; From 480564301bd80872476676c18beff5e1b0cbd516 Mon Sep 17 00:00:00 2001 From: 6mn12j Date: Thu, 3 Nov 2022 14:59:47 +0900 Subject: [PATCH 15/15] =?UTF-8?q?Fix:=20warn,=20=EB=A9=94=EC=9D=B8?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20amount=EB=8B=A8=EC=9C=84=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CarDetail/CarDetail.jsx | 2 +- src/components/CarMain.jsx/CarItem.jsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/CarDetail/CarDetail.jsx b/src/components/CarDetail/CarDetail.jsx index 4d61ee8..05db0d5 100644 --- a/src/components/CarDetail/CarDetail.jsx +++ b/src/components/CarDetail/CarDetail.jsx @@ -10,7 +10,6 @@ const CarDetail = () => { const { state: { state: { - id, startDate, amount, attribute: { brand, name, segment, fuelType, imageUrl }, @@ -19,6 +18,7 @@ const CarDetail = () => { }, }, } = useLocation(); + return (
    diff --git a/src/components/CarMain.jsx/CarItem.jsx b/src/components/CarMain.jsx/CarItem.jsx index 256b686..144905f 100644 --- a/src/components/CarMain.jsx/CarItem.jsx +++ b/src/components/CarMain.jsx/CarItem.jsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { carModel } from "../../utils/carModel"; +import { formatAmout } from "../../utils/formatAmount"; import New from "../common/New"; const inDay = (date) => { @@ -16,7 +17,7 @@ const CarItem = ({ brand, name, segment, fuelType, amount, imageUrl, createdAt } {brand} {name}

    {`${segment} / ${carModel.fuelType[fuelType]}`}

    -

    월 {amount} 부터

    +

    월 {formatAmout(amount)} 부터

    {{`${name}사진`}} {inDay(createdAt) ? : null}