0SCAR0421 정연우

src/App.js

@@ -1,5 +1,16 @@
+import React from "react";
+import Router from "@routes";
+import { FilterListContextProvider } from "@/contexts/FilterListContext";
+import { CarDataListContextProvider } from "./contexts/CarDataListContext";
+
 function App() {
-  return <h1>Hello React!</h1>;
+  return (
+    <FilterListContextProvider>
+      <CarDataListContextProvider>
+        <Router />
+      </CarDataListContextProvider>
+    </FilterListContextProvider>
+  );
 }
 
 export default App;

src/apis/index.jsx

@@ -0,0 +1,12 @@
+import axios from "../../node_modules/axios/index";
+
+const instance = axios.create({
+  baseURL: "https://preonboarding.platdev.net/api/cars",
+  timeout: 2000,
+});
+
+export const getCarData = async (selectedMenu) => {
+  const res = await instance.get(``, { params: { segment: selectedMenu } });
+
+  return res.data.payload;
+};

src/components/Button/Button.styled.jsx

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const ButtonContainer = styled.button`
+  width: 62px;
+  height: 27px;
+  font-size: 14px;
+  font-weight: 700;
+  border-radius: 62px;
+  border: none;
+  outline: none;
+  color: ${(props) => (props.isSelected ? "var(--white)" : "var(--black)")};
+  background: ${(props) => (props.isSelected ? "var(--black)" : "var(--gray)")};
+  position: relative;
+  cursor: pointer;
+
+  &:last-child:after {
+    content: "";
+    display: block;
+    position: absolute;
+    right: -12px;
+    top: 0;
+    width: 12px;
+    height: 100%;
+  }
+`;

src/components/Button/index.jsx

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { FilterListContext } from "../../contexts/FilterListContext";
+import { ButtonContainer } from "./Button.styled";
+
+const Button = ({ isSelected, children }) => {
+  const { handleSelectFilter } = useContext(FilterListContext);
+
+  const handleButtonClick = () => {
+    handleSelectFilter(children);
+  };
+
+  return (
+    <ButtonContainer isSelected={isSelected} onClick={handleButtonClick}>
+      {children}
+    </ButtonContainer>
+  );
+};
+
+export default Button;

src/components/CarFilter/CarFilter.styled.jsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const CarFilterContainer = styled.div`
+  height: 100%;
+  overflow: auto;
+  border-bottom: 1px solid var(--black);
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  > div {
+    display: grid;
+    height: 40px;
+    padding: 0 12px;
+    grid-template-columns: repeat(auto-fill, 62px);
+    gap: 8px;
+    align-items: center;
+    grid-auto-flow: column;
+  }
+`;

src/components/CarFilter/index.jsx

@@ -0,0 +1,22 @@
+import { Button } from "@components";
+import { useContext } from "react";
+import { FilterListContext } from "../../contexts/FilterListContext";
+import { CarFilterContainer } from "./CarFilter.styled";
+
+const CarFilter = () => {
+  const { filterList } = useContext(FilterListContext);
+
+  return (
+    <CarFilterContainer>
+      <div>
+        {filterList.map((e, i) => (
+          <Button key={e.name} isSelected={e.isSelected}>
+            {e.name}
+          </Button>
+        ))}
+      </div>
+    </CarFilterContainer>
+  );
+};
+
+export default CarFilter;

src/components/CarItem/CarItem.styled.jsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export const CarItemContainer = styled.div`
+  width: 100%;
+  height: 120px;
+  padding: 24px 20px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--black);
+  cursor: pointer;
+`;
+
+export const LeftItem = styled.div`
+  > div:first-child {
+    margin-bottom: 8px;
+    font-weight: 700;
+    line-height: 17px;
+  }
+
+  > div:last-child {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 15px;
+  }
+
+  > div > p {
+    padding: 0;
+    margin: 0;
+  }
+`;
+
+export const RightItem = styled.div`
+  background-image: url(${(props) => props.image});
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 152px;
+`;

src/components/CarItem/index.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
+import { convertName } from "@utils/convertValue";
+import { CarItemContainer, LeftItem, RightItem } from "./CarItem.styled";
+import { convertFuel, convertMoneyString } from "../../utils/convertValue";
+
+const CarItem = ({ id, brand, name, segment, fuelType, imageUrl, amount }) => {
+  const navigate = useNavigate();
+  const handleTargetPage = (target) => {
+    navigate(`/detail/${target}`);
+  };
+
+  return (
+    <CarItemContainer onClick={() => handleTargetPage(id)}>
+      <LeftItem>
+        <div>
+          <p>{brand}</p>
+          <p>{name}</p>
+        </div>
+        <div>
+          <p>
+            <span>{convertName(segment)}</span>
+            <span> / </span>
+            <span>{convertFuel(fuelType)}</span>
+          </p>
+          <p>월 {convertMoneyString(amount)} 원 부터</p>
+        </div>
+      </LeftItem>
+      <RightItem image={imageUrl} />
+    </CarItemContainer>
+  );
+};
+
+export default CarItem;

src/components/Layout/Layout.styled.jsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+export const LayoutContainer = styled.div`
+  max-width: 450px;
+  margin: 0 auto;
+  min-height: 100vh;
+`;
+
+export const LayoutNavBar = styled.div`
+  position: relative;
+`;
+
+export const PrevButton = styled.div`
+  position: absolute;
+  top: 20px;
+  left: 18px;
+  cursor: pointer;
+`;
+
+export const LayoutHeader = styled.h1`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+  font-weight: 700;
+  font-size: 17px;
+  margin: 0;
+  border-bottom: 1px solid var(--black);
+`;
+
+export const LayoutContent = styled.div`
+  min-height: 75vh;
+  height: 100%;
+  background: rosybrown;
+`;

src/components/Layout/index.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import {
+  LayoutContainer,
+  LayoutNavBar,
+  PrevButton,
+  LayoutHeader,
+} from "@components/Layout/Layout.styled";
+import { CarFilter } from "@components";
+import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
+
+const Layout = ({ childeren }) => {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <LayoutContainer>
+      <LayoutNavBar>
+        {pathname === "/" ? (
+          <>
+            <LayoutHeader>전체차량</LayoutHeader>
+            <CarFilter />
+          </>
+        ) : (
+          <>
+            <PrevButton onClick={() => navigate(-1)}>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 12H5"
+                  stroke="black"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M12 19L5 12L12 5"
+                  stroke="black"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </PrevButton>
+            <LayoutHeader>차량상세</LayoutHeader>
+          </>
+        )}
+        {childeren || <Outlet />}
+      </LayoutNavBar>
+    </LayoutContainer>
+  );
+};
+
+export default Layout;

src/components/Notification/Notification.styled.jsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const NotificationContainer = styled.div`
+  font-weight: 700;
+  font-size: 17px;
+  line-height: 21px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 75vh;
+`;

src/components/Notification/index.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { NotificationContainer } from "./Notification.styled";
+
+const Notification = ({ children }) => {
+  return <NotificationContainer>{children}</NotificationContainer>;
+};
+
+export default Notification;

src/components/index.jsx

@@ -0,0 +1,5 @@
+export { default as Button } from "./Button";
+export { default as CarFilter } from "./CarFilter";
+export { default as Layout } from "./Layout";
+export { default as CarItem } from "./CarItem";
+export { default as Notification } from "./Notification";

src/contexts/CarDataListContext.jsx

@@ -0,0 +1,32 @@
+import React, { useContext, useEffect, useState } from "react";
+import { getCarData } from "@apis";
+import { FilterListContext } from "./FilterListContext";
+import { convertSegment } from "@utils/convertValue";
+
+export const CarDataListContext = React.createContext({
+  carDataList: [],
+});
+
+export const CarDataListContextProvider = ({ children }) => {
+  const { selectedMenu, filterList } = useContext(FilterListContext);
+  const [carDataList, setCarDataList] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const handleCarDataList = async () => {
+      const segment = convertSegment(selectedMenu);
+
+      setIsLoading(true);
+      setCarDataList(await getCarData(segment === "All" ? "" : segment));
+      setIsLoading(false);
+    };
+
+    handleCarDataList();
+  }, [selectedMenu, filterList]);
+
+  return (
+    <CarDataListContext.Provider value={{ carDataList, isLoading }}>
+      {children}
+    </CarDataListContext.Provider>
+  );
+};

src/contexts/FilterListContext.jsx

@@ -0,0 +1,37 @@
+import React, { useContext, useState } from "react";
+
+export const FilterListContext = React.createContext({
+  filterList: [
+    { name: "전체", isSelected: true },
+    { name: "대형", isSelected: false },
+    { name: "중형", isSelected: false },
+    { name: "소형", isSelected: false },
+    { name: "SUV", isSelected: false },
+  ],
+  selectedMenu: "All",
+  handleSelectFilter: () => {},
+});
+
+export const FilterListContextProvider = ({ children }) => {
+  const { filterList, selectedMenu } = useContext(FilterListContext);
+  const [newFilterList, setNewFilterList] = useState(filterList);
+  const [newSelectedMenu, setNewSelectedMenu] = useState(selectedMenu);
+
+  const handleSelectFilter = (target) => {
+    setNewSelectedMenu(target);
+    setNewFilterList((prev) =>
+      prev.map((e) => {
+        e.isSelected = e.name === target;
+        return e;
+      }),
+    );
+  };
+
+  return (
+    <FilterListContext.Provider
+      value={{ filterList: newFilterList, selectedMenu: newSelectedMenu, handleSelectFilter }}
+    >
+      {children}
+    </FilterListContext.Provider>
+  );
+};