Merge branch 'dev' of https://github.com/softeerbootcamp-2nd/A2-CarTag …

…into feat/360-refactor
softeerbootcamp-2nd · Aug 24, 2023 · afb5bbf · afb5bbf
2 parents c15287c + 8c9819b
commit afb5bbf
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 16 deletions.
diff --git a/frontend/src/components/common/navbar/CarSelectContainer.tsx b/frontend/src/components/common/navbar/CarSelectContainer.tsx
@@ -2,11 +2,12 @@ import { styled } from 'styled-components';
 import CenterWrapper from '../layout/CenterWrapper';
 import { useFetch } from '../../../hooks/useFetch';
 import { CAR_LIST_API, IMG_URL } from '../../../utils/apis';
-import { Dispatch, useState } from 'react';
+import { Dispatch, useContext, useState } from 'react';
 import { flexCenterCss } from '../../../utils/commonStyle';
 import { BodyKrMedium3, BodyKrMedium4 } from '../../../styles/typefaces';
 import DefaultCardStyle from '../card/DefaultCardStyle';
 import { DimmedBackground } from '../../modal/DimmedBackground';
+import { ItemContext } from '../../../context/ItemProvider';
 
 interface ICar {
   carTypeId: number;
@@ -21,17 +22,23 @@ interface ICarSelectContainer {
 
 export default function CarSelectContainer({ visible, setMenuVisible }: ICarSelectContainer) {
   const { data } = useFetch<ICar[]>(CAR_LIST_API);
+  const { selectedItem, setSelectedItem } = useContext(ItemContext);
   const [active, setActive] = useState(3); // 3: SUV
   const categoryList = ['수소/전기차', 'N', '승용', 'SUV', 'MVP', '소형트럭/택시', '트럭', '버스'];
 
+  const handleCarClick = (car: ICar) => {
+    setSelectedItem({
+      type: 'SET_CAR',
+      value: { id: car.carTypeId, name: car.carTypeName, price: 0 },
+    });
+  };
   const handleCategoryClick = (idx: number) => {
     setActive(idx);
   };
   const handleDimmedClick = () => {
     setMenuVisible((cur) => !cur);
   };
   const isActive = (idx: number) => idx === active;
-
   const categoryItemComponents = categoryList?.map((category, idx) => {
     return (
       <CategoryItem $active={isActive(idx)} onClick={() => handleCategoryClick(idx)} key={idx}>
@@ -41,7 +48,11 @@ export default function CarSelectContainer({ visible, setMenuVisible }: ICarSele
   });
 
   const carItemComponents = data?.map((car, idx) => (
-    <CarItem key={idx}>
+    <CarItem
+      active={selectedItem.cartype.id === car.carTypeId}
+      onClick={() => handleCarClick(car)}
+      key={idx}
+    >
       <CarImg src={IMG_URL + car.carTypeImage} />
       <CarName>{car.carTypeName}</CarName>
     </CarItem>
@@ -99,6 +110,9 @@ const CarListWrapper = styled.div`
   margin-top: 20px;
   overflow: scroll;
   gap: 8px;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 const CarItem = styled(DefaultCardStyle)`
   ${flexCenterCss}

diff --git a/frontend/src/components/common/navbar/NavBar.tsx b/frontend/src/components/common/navbar/NavBar.tsx
@@ -8,13 +8,15 @@ import { MESSAGE, PATH } from '../../../utils/constants';
 import { CloseModalContext } from '../../../context/ModalProviders/CloseModalProvider';
 import { ProgressContext } from '../../../context/ProgressProvider';
 import CarSelectContainer from './CarSelectContainer';
+import { ItemContext } from '../../../context/ItemProvider';
 
 interface INavItem extends React.HTMLAttributes<HTMLLIElement> {
   active: boolean;
 }
 export default function NavBar() {
   const navigate = useNavigate();
   const { nextStepAvailable } = useContext(ProgressContext);
+  const { selectedItem } = useContext(ItemContext);
   const { pathname: currentPath } = useLocation();
   const { setVisible: setCloseModalVisible } = useContext(CloseModalContext);
   const [menuVisible, setMenuVisible] = useState<boolean>(false);
@@ -39,14 +41,15 @@ export default function NavBar() {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [currentPath]);
+
   return (
     <Wrapper>
       <NavContainer $menuVisible={menuVisible}>
         <Body>
           <HyundaiLogo src={hyundaiLogo} alt="" onClick={() => handleNavItemClick(PATH.home)} />
 
           <CarSelect onClick={handleCarSelectClick}>
-            <span>펠리세이드</span>
+            <span>{selectedItem.cartype.name}</span>
             {menuVisible ? (
               <ArrowUp fill={theme.color.primaryColor800} width={20} height={20} />
             ) : (

diff --git a/frontend/src/containers/OptionPage/OptionBannerContainer.tsx b/frontend/src/containers/OptionPage/OptionBannerContainer.tsx
@@ -13,8 +13,8 @@ import { useContext, useEffect, useState } from 'react';
 import { IMG_URL, OPTION_API } from '../../utils/apis';
 import { DefaultOptionContext } from '../../context/PageProviders/DefaultOptionProvider';
 import { SubOptionContext } from '../../context/PageProviders/SubOptionProvider';
-import { CAR_TYPE } from '../../utils/constants';
 import { useFetch } from '../../hooks/useFetch';
+import { ItemContext } from '../../context/ItemProvider';
 
 interface IHmgData {
   optionBoughtCount: number;
@@ -48,11 +48,12 @@ interface IOptionBannerContainer {
 export default function OptionBannerContainer({ isDefault }: IOptionBannerContainer) {
   const defaultOptionContext = useContext(DefaultOptionContext);
   const subOptionContext = useContext(SubOptionContext);
+  const { selectedItem } = useContext(ItemContext);
   const { currentOptionIdx } = isDefault ? defaultOptionContext : subOptionContext;
   const optionType = isDefault ? 'default' : 'sub';
 
   const { data: optionDetail, loading: optionDetailLoading } = useFetch<IOptionDetail>(
-    `${OPTION_API}/${optionType}/detail/?carid=${CAR_TYPE}&optionid=${currentOptionIdx}`
+    `${OPTION_API}/${optionType}/detail/?carid=${selectedItem.trim.id}&optionid=${currentOptionIdx}`
   );
 
   const [bannerInfo, setBannerInfo] = useState<IOptionDetail>({

diff --git a/frontend/src/containers/TrimPage/TrimBannerContainer.tsx b/frontend/src/containers/TrimPage/TrimBannerContainer.tsx
@@ -39,8 +39,8 @@ export default function TrimBannerContainer() {
 
   const downloadAndSaveImages = useCallback(async () => {
     const imageBlobs = await Promise.all(
-      imageUrls.current.map(async (url) => {
-        const response = await fetch(url);
+      imageUrls.current.map(async (url, idx) => {
+        const response = await fetch(url + `?${idx}`);
         const blob = await response.blob();
         return blob;
       })
@@ -54,6 +54,7 @@ export default function TrimBannerContainer() {
 
   const setImages = useCallback(() => {
     if (!trimData) return;
+    setImagesLoading(true);
     imageUrls.current = [];
     filterImageUrls(trimData);
     downloadAndSaveImages();

diff --git a/frontend/src/containers/TrimPage/TrimSelectContainer.tsx b/frontend/src/containers/TrimPage/TrimSelectContainer.tsx
@@ -147,10 +147,10 @@ const TrimSection = styled.div`
 `;
 
 const TrimCard = styled(DefaultCardStyle)`
+  width: 25%;
   padding: 20px 16px 12px 16px;
   height: 158px;
   box-sizing: border-box;
-  width: 100%;
 `;
 
 const TrimTitle = styled.div`

diff --git a/frontend/src/context/ItemProvider.tsx b/frontend/src/context/ItemProvider.tsx
@@ -21,6 +21,7 @@ export interface IEfficiencyType {
   displacement: string;
 }
 export interface ISelectedItem {
+  cartype: defaultItemType;
   trim: defaultItemType;
   modelType: {
     powerTrain: detailItemType;
@@ -70,6 +71,11 @@ interface IItemProvider {
 }
 
 const initialSelectedItem = {
+  cartype: {
+    id: 1,
+    name: '팰리세이드',
+    price: 0,
+  },
   trim: {
     id: 1,
     name: '',
@@ -188,7 +194,6 @@ export default function ItemProvider({ children }: IItemProvider) {
 
   useEffect(() => {
     if (!data || loading || error) return;
-
     setSelectedItem({
       type: 'SET_TRIM',
       value: {

diff --git a/frontend/src/pages/ModelTypePage.tsx b/frontend/src/pages/ModelTypePage.tsx
@@ -5,15 +5,16 @@ import ModelSelectContainer from '../containers/ModelTypePage/ModelTypeSelectCon
 import { useFetch } from '../hooks/useFetch';
 import { MODEL_TYPE_API } from '../utils/apis';
 import { IModelType, ModelTypeContext } from '../context/PageProviders/ModelTypeProvider';
-import { CAR_TYPE } from '../utils/constants';
 import ErrorModal from '../components/modal/ErrorModal';
+import { ItemContext } from '../context/ItemProvider';
 
 export default function ModelTypePage() {
+  const { selectedItem } = useContext(ItemContext);
   const {
     data: modelTypeData,
     loading: modelTypeLoading,
     error: modelTypeError,
-  } = useFetch<IModelType[]>(`${MODEL_TYPE_API}/list?carid=${CAR_TYPE}`);
+  } = useFetch<IModelType[]>(`${MODEL_TYPE_API}/list?carid=${selectedItem.trim.id}`);
 
   const { setModelType, setLoading } = useContext(ModelTypeContext);
 

diff --git a/frontend/src/pages/TrimPage.tsx b/frontend/src/pages/TrimPage.tsx
@@ -5,13 +5,17 @@ import { useFetch } from '../hooks/useFetch';
 import { TRIM_API } from '../utils/apis';
 import { ICartype, TrimContext } from '../context/PageProviders/TrimProvider';
 import ErrorModal from '../components/modal/ErrorModal';
+import { ItemContext } from '../context/ItemProvider';
 
 export default function TrimPage() {
-  const { data, loading, error } = useFetch<ICartype[]>(`${TRIM_API}?cartype=${1}`);
+  const { selectedItem } = useContext(ItemContext);
+  const { data, loading, error } = useFetch<ICartype[]>(
+    `${TRIM_API}?cartype=${selectedItem.cartype.id}`
+  );
   const { setData, setLoading } = useContext(TrimContext);
-
   useEffect(() => {
     setData(data);
+
     setLoading(loading);
   }, [data, loading, setData, setLoading]);
 

diff --git a/frontend/src/reducer/itemReducer.ts b/frontend/src/reducer/itemReducer.ts
@@ -7,6 +7,7 @@ import {
 } from '../context/ItemProvider';
 
 export type actionType =
+  | { type: 'SET_CAR'; value: defaultItemType }
   | { type: 'SET_TRIM'; value: defaultItemType }
   | { type: 'SET_POWER_TRAIN'; value: detailItemType }
   | { type: 'SET_OPERATION'; value: detailItemType }
@@ -18,6 +19,8 @@ export type actionType =
 
 export default function itemReducer(state: ISelectedItem, action: actionType): ISelectedItem {
   switch (action.type) {
+    case 'SET_CAR':
+      return { ...state, cartype: action.value };
     case 'SET_TRIM':
       return { ...state, trim: action.value };
     case 'SET_POWER_TRAIN':

diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -32,11 +32,9 @@ export const OUTER_COLOR_FIRST_IDX = 3;
 
 export const HYUNDAI_URL = 'https://www.hyundai.com/kr/ko/e';
 export const PAGE_ANIMATION_DURATION = 500;
-export const CAR_TYPE = 1; // 팰리세이드
 
 Object.freeze({
   MAX_PAGE,
-  CAR_TYPE,
   NUM_IN_A_PAGE,
   HYUNDAI_URL,
   PATH,