From fee97fbc5ad108985d96b9dd43a6624b619d16f3 Mon Sep 17 00:00:00 2001 From: yong Date: Wed, 2 Nov 2022 16:50:29 +0900 Subject: [PATCH 01/14] =?UTF-8?q?Feat:=20car=20api=20=EA=B8=B0=EB=8A=A5=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 | 12 +++++++++++- src/apis/car.js | 12 ++++++++++++ src/apis/core.js | 22 ++++++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/apis/car.js create mode 100644 src/apis/core.js diff --git a/src/App.js b/src/App.js index 491dfe5..a81b1e7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,15 @@ +//import carApi from "./apis/car"; + function App() { - return

Hello React!

; + const handleClick = async () => { + //const res = await carApi.getCars(); + //console.log(res); + }; + return ( + + ); } export default App; diff --git a/src/apis/car.js b/src/apis/car.js new file mode 100644 index 0000000..0fba814 --- /dev/null +++ b/src/apis/car.js @@ -0,0 +1,12 @@ +import Api from "./core"; + +class CarApi extends Api { + async getCars(query = {}) { + const response = await this.baseInstance("/cars/", { params: query }); + return response.data.payload; + } +} + +const carApi = new CarApi(); + +export default carApi; diff --git a/src/apis/core.js b/src/apis/core.js new file mode 100644 index 0000000..296be0c --- /dev/null +++ b/src/apis/core.js @@ -0,0 +1,22 @@ +import axios from "axios"; + +const { REACT_APP_ALTIMOBILITY_API_END_POINT } = process.env; + +const createInstance = (url, config = {}) => { + return axios.create({ + baseURL: url, + headers: { + "Content-Type": "application/json", + }, + ...config, + timeout: 2000, + }); +}; + +export default class Api { + API_END_POINT = REACT_APP_ALTIMOBILITY_API_END_POINT; + constructor() { + const instance = createInstance(this.API_END_POINT); + this.baseInstance = instance; + } +} From e66deeff52e0a0dad0ac64e66c183fc897242e92 Mon Sep 17 00:00:00 2001 From: yong Date: Wed, 2 Nov 2022 16:53:39 +0900 Subject: [PATCH 02/14] =?UTF-8?q?Fix:=20=EC=9E=90=EB=8F=99=EC=B0=A8=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=EC=9D=84=20=EC=9A=94=EC=B2=AD=ED=95=A0=20?= =?UTF-8?q?=EB=95=8C=20CORS=20=EC=98=A4=EB=A5=98=EA=B0=80=20=EB=82=98?= =?UTF-8?q?=EB=8A=94=20=EB=B6=80=EB=B6=84=EC=9D=84=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 5 ++--- src/apis/car.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index a81b1e7..57cfe9a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,8 @@ -//import carApi from "./apis/car"; +import carApi from "./apis/car"; function App() { const handleClick = async () => { - //const res = await carApi.getCars(); - //console.log(res); + await carApi.getCars(); }; return ( + + + ); } diff --git a/src/routes/index.jsx b/src/routes/index.jsx new file mode 100644 index 0000000..bb8d48c --- /dev/null +++ b/src/routes/index.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import { Home, Detail } from "../pages"; +import ROUTE_PATH from "./paths"; + +const Router = () => { + return ( + + + } /> + } /> + 404 Not Found} /> + + + ); +}; + +export default Router; diff --git a/src/routes/paths.js b/src/routes/paths.js new file mode 100644 index 0000000..65d47c0 --- /dev/null +++ b/src/routes/paths.js @@ -0,0 +1,6 @@ +const ROUTE_PATH = { + HOME: "/", + DETAIL: "/detail", +}; + +export default ROUTE_PATH; From 144df34f6cdce7161283acf8688ebd145f13ad05 Mon Sep 17 00:00:00 2001 From: yong Date: Thu, 3 Nov 2022 13:06:00 +0900 Subject: [PATCH 12/14] =?UTF-8?q?Feat:=20Page=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Detail.jsx | 15 +++++++++++++++ src/pages/Home.jsx | 25 +++++++++++++++++++++++++ src/pages/index.js | 2 ++ 3 files changed, 42 insertions(+) create mode 100644 src/pages/Detail.jsx create mode 100644 src/pages/Home.jsx create mode 100644 src/pages/index.js diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx new file mode 100644 index 0000000..75bfa2b --- /dev/null +++ b/src/pages/Detail.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import { useParams } from "react-router-dom"; +import Header from "../components/Header"; + +const Detail = () => { + const { id } = useParams(); + return ( + <> +
+ {id} + + ); +}; + +export default Detail; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx new file mode 100644 index 0000000..e7ed6d9 --- /dev/null +++ b/src/pages/Home.jsx @@ -0,0 +1,25 @@ +import React from "react"; +import styled from "styled-components"; +import CarList from "../components/CarList"; +import Header from "../components/Header"; +import TagList from "../components/TagList"; + +const Home = () => { + return ( + <> +
+ +
+ +
+ + ); +}; + +export default Home; + +const Main = styled.main` + flex: 1; + display: flex; + flex-direction: column; +`; diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..2b7f619 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,2 @@ +export { default as Home } from "./Home"; +export { default as Detail } from "./Detail"; From 7aff95ad4c32ccbcf74cfc25e2e527e8e3674b5d Mon Sep 17 00:00:00 2001 From: yong Date: Thu, 3 Nov 2022 13:24:10 +0900 Subject: [PATCH 13/14] =?UTF-8?q?Feat:=20CarContext=20=EB=B0=8F=20CarItem?= =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EC=9D=B4=EB=8F=99=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jsconfig.json | 3 ++- src/App.js | 5 ++++- src/components/CarItem.jsx | 4 ++-- src/components/CarList.jsx | 12 ++++++++++-- src/contexts/carContext.jsx | 23 +++++++++++++++++++++++ src/pages/Detail.jsx | 7 ++++--- src/routes/index.jsx | 2 +- 7 files changed, 46 insertions(+), 10 deletions(-) create mode 100644 src/contexts/carContext.jsx diff --git a/jsconfig.json b/jsconfig.json index e5b220b..d042116 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -2,5 +2,6 @@ "compilerOptions": { "target": "es6" }, - "exclude": ["node_modules"] + "exclude": ["node_modules"], + "include": ["src"] } diff --git a/src/App.js b/src/App.js index 4a43e63..38fc09c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,13 @@ import Layout from "./components/Layout"; +import { CarContextProvider } from "./contexts/carContext"; import Router from "./routes"; function App() { return ( - + + + ); } diff --git a/src/components/CarItem.jsx b/src/components/CarItem.jsx index 9afda39..b061c91 100644 --- a/src/components/CarItem.jsx +++ b/src/components/CarItem.jsx @@ -3,9 +3,9 @@ import { COLOR_PALETTE, FONT_SIZE } from "@/styles/constants"; import { formattedFuelType, formatNumber, formattedSegment } from "@/utils"; import styled from "styled-components"; -const CarItem = ({ car }) => { +const CarItem = ({ car, onClick }) => { return ( - +

{car.attribute.brand}

diff --git a/src/components/CarList.jsx b/src/components/CarList.jsx index 34f1324..271a319 100644 --- a/src/components/CarList.jsx +++ b/src/components/CarList.jsx @@ -1,11 +1,14 @@ import styled from "styled-components"; -import { useSearchParams } from "react-router-dom"; +import { useNavigate, useSearchParams } from "react-router-dom"; import CarItem from "./CarItem"; import carApi from "../apis/car"; import usePromise from "../hooks/usePromise"; import { useMemo } from "react"; +import { useCar } from "@/contexts/carContext"; const CarList = () => { + const { setCar } = useCar(); + const navigate = useNavigate(); const [searchParams] = useSearchParams(); const fuelType = useMemo(() => searchParams.get("fuelType"), [searchParams]); const segment = useMemo(() => searchParams.get("segment"), [searchParams]); @@ -14,6 +17,11 @@ const CarList = () => { segment, }; + const handleClickCarList = (car) => { + setCar(car); + navigate("detail"); + }; + const [loading, cars, error] = usePromise(() => { return carApi.getCars(query); }, [fuelType, segment]); @@ -33,7 +41,7 @@ const CarList = () => { return ( <> {cars.map((car) => ( - + ))} ); diff --git a/src/contexts/carContext.jsx b/src/contexts/carContext.jsx new file mode 100644 index 0000000..5bc1a1b --- /dev/null +++ b/src/contexts/carContext.jsx @@ -0,0 +1,23 @@ +import React, { useState } from "react"; +import { useContext } from "react"; +import { useMemo } from "react"; + +const CarContext = React.createContext({ + car: null, +}); + +export const useCar = () => useContext(CarContext); + +export const CarContextProvider = ({ children }) => { + const [car, setCar] = useState(null); + + const value = useMemo( + () => ({ + car, + setCar, + }), + [car], + ); + + return {children}; +}; diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 75bfa2b..b8b8a2b 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -1,13 +1,14 @@ import React from "react"; -import { useParams } from "react-router-dom"; import Header from "../components/Header"; +import { useCar } from "@/contexts/carContext"; const Detail = () => { - const { id } = useParams(); + const { car } = useCar(); + //console.log(car); return ( <>
- {id} + {car.attribute.name} ); }; diff --git a/src/routes/index.jsx b/src/routes/index.jsx index bb8d48c..153ee6f 100644 --- a/src/routes/index.jsx +++ b/src/routes/index.jsx @@ -8,7 +8,7 @@ const Router = () => { } /> - } /> + } /> 404 Not Found} /> From 98ed4c579deb843513af8e0bf28d209ff6a9afb0 Mon Sep 17 00:00:00 2001 From: yong Date: Thu, 3 Nov 2022 13:30:13 +0900 Subject: [PATCH 14/14] =?UTF-8?q?Feat:=20Detail=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Detail.jsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index b8b8a2b..386de64 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -1,14 +1,31 @@ import React from "react"; import Header from "../components/Header"; import { useCar } from "@/contexts/carContext"; +import { useNavigate } from "react-router-dom"; +import { useEffect } from "react"; const Detail = () => { + const navigate = useNavigate(); const { car } = useCar(); - //console.log(car); + + useEffect(() => { + if (!car) { + navigate("/"); + } + }, [car, navigate]); + + if (!car) { + return; + } + return ( <>
- {car.attribute.name} + {car.attribute.name} + 브랜드 : {car.attribute.brand} +
{car.attribute.name}
+
{car.amount}
+
{car.segment}
); };