Merge pull request #397 from softeerbootcamp-2nd/feat/ui-bug

[FEAT] #392: 상세 UI 수정
softeerbootcamp-2nd · Aug 22, 2023 · 78a2584 · 78a2584
2 parents d43f9c6 + 81932f7
commit 78a2584
Show file tree

Hide file tree

Showing 107 changed files with 193 additions and 71 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/images/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>내 차 만들기 - A2 Cartag</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/images/car.png b/frontend/public/images/car.png
diff --git a/frontend/public/images/car360/img0.png b/frontend/public/images/car360/img0.png
diff --git a/frontend/public/images/car360/img1.png b/frontend/public/images/car360/img1.png
diff --git a/frontend/public/images/car360/img10.png b/frontend/public/images/car360/img10.png
diff --git a/frontend/public/images/car360/img11.png b/frontend/public/images/car360/img11.png
diff --git a/frontend/public/images/car360/img12.png b/frontend/public/images/car360/img12.png
diff --git a/frontend/public/images/car360/img13.png b/frontend/public/images/car360/img13.png
diff --git a/frontend/public/images/car360/img14.png b/frontend/public/images/car360/img14.png
diff --git a/frontend/public/images/car360/img15.png b/frontend/public/images/car360/img15.png
diff --git a/frontend/public/images/car360/img16.png b/frontend/public/images/car360/img16.png
diff --git a/frontend/public/images/car360/img17.png b/frontend/public/images/car360/img17.png
diff --git a/frontend/public/images/car360/img18.png b/frontend/public/images/car360/img18.png
diff --git a/frontend/public/images/car360/img19.png b/frontend/public/images/car360/img19.png
diff --git a/frontend/public/images/car360/img2.png b/frontend/public/images/car360/img2.png
diff --git a/frontend/public/images/car360/img20.png b/frontend/public/images/car360/img20.png
diff --git a/frontend/public/images/car360/img21.png b/frontend/public/images/car360/img21.png
diff --git a/frontend/public/images/car360/img22.png b/frontend/public/images/car360/img22.png
diff --git a/frontend/public/images/car360/img23.png b/frontend/public/images/car360/img23.png
diff --git a/frontend/public/images/car360/img24.png b/frontend/public/images/car360/img24.png
diff --git a/frontend/public/images/car360/img25.png b/frontend/public/images/car360/img25.png
diff --git a/frontend/public/images/car360/img26.png b/frontend/public/images/car360/img26.png
diff --git a/frontend/public/images/car360/img27.png b/frontend/public/images/car360/img27.png
diff --git a/frontend/public/images/car360/img28.png b/frontend/public/images/car360/img28.png
diff --git a/frontend/public/images/car360/img29.png b/frontend/public/images/car360/img29.png
diff --git a/frontend/public/images/car360/img3.png b/frontend/public/images/car360/img3.png
diff --git a/frontend/public/images/car360/img30.png b/frontend/public/images/car360/img30.png
diff --git a/frontend/public/images/car360/img31.png b/frontend/public/images/car360/img31.png
diff --git a/frontend/public/images/car360/img32.png b/frontend/public/images/car360/img32.png
diff --git a/frontend/public/images/car360/img33.png b/frontend/public/images/car360/img33.png
diff --git a/frontend/public/images/car360/img34.png b/frontend/public/images/car360/img34.png
diff --git a/frontend/public/images/car360/img35.png b/frontend/public/images/car360/img35.png
diff --git a/frontend/public/images/car360/img36.png b/frontend/public/images/car360/img36.png
diff --git a/frontend/public/images/car360/img37.png b/frontend/public/images/car360/img37.png
diff --git a/frontend/public/images/car360/img38.png b/frontend/public/images/car360/img38.png
diff --git a/frontend/public/images/car360/img39.png b/frontend/public/images/car360/img39.png
diff --git a/frontend/public/images/car360/img4.png b/frontend/public/images/car360/img4.png
diff --git a/frontend/public/images/car360/img40.png b/frontend/public/images/car360/img40.png
diff --git a/frontend/public/images/car360/img41.png b/frontend/public/images/car360/img41.png
diff --git a/frontend/public/images/car360/img42.png b/frontend/public/images/car360/img42.png
diff --git a/frontend/public/images/car360/img43.png b/frontend/public/images/car360/img43.png
diff --git a/frontend/public/images/car360/img44.png b/frontend/public/images/car360/img44.png
diff --git a/frontend/public/images/car360/img45.png b/frontend/public/images/car360/img45.png
diff --git a/frontend/public/images/car360/img46.png b/frontend/public/images/car360/img46.png
diff --git a/frontend/public/images/car360/img47.png b/frontend/public/images/car360/img47.png
diff --git a/frontend/public/images/car360/img48.png b/frontend/public/images/car360/img48.png
diff --git a/frontend/public/images/car360/img49.png b/frontend/public/images/car360/img49.png
diff --git a/frontend/public/images/car360/img5.png b/frontend/public/images/car360/img5.png
diff --git a/frontend/public/images/car360/img50.png b/frontend/public/images/car360/img50.png
diff --git a/frontend/public/images/car360/img51.png b/frontend/public/images/car360/img51.png
diff --git a/frontend/public/images/car360/img52.png b/frontend/public/images/car360/img52.png
diff --git a/frontend/public/images/car360/img53.png b/frontend/public/images/car360/img53.png
diff --git a/frontend/public/images/car360/img54.png b/frontend/public/images/car360/img54.png
diff --git a/frontend/public/images/car360/img55.png b/frontend/public/images/car360/img55.png
diff --git a/frontend/public/images/car360/img56.png b/frontend/public/images/car360/img56.png
diff --git a/frontend/public/images/car360/img57.png b/frontend/public/images/car360/img57.png
diff --git a/frontend/public/images/car360/img58.png b/frontend/public/images/car360/img58.png
diff --git a/frontend/public/images/car360/img59.png b/frontend/public/images/car360/img59.png
diff --git a/frontend/public/images/car360/img6.png b/frontend/public/images/car360/img6.png
diff --git a/frontend/public/images/car360/img7.png b/frontend/public/images/car360/img7.png
diff --git a/frontend/public/images/car360/img8.png b/frontend/public/images/car360/img8.png
diff --git a/frontend/public/images/car360/img9.png b/frontend/public/images/car360/img9.png
diff --git a/frontend/public/images/extra_option/20_darkwheel 1.png b/frontend/public/images/extra_option/20_darkwheel 1.png
diff --git a/frontend/public/images/extra_option/2_cooling 1.png b/frontend/public/images/extra_option/2_cooling 1.png
diff --git a/frontend/public/images/extra_option/dualmufflerpackage 1.png b/frontend/public/images/extra_option/dualmufflerpackage 1.png
diff --git a/frontend/public/images/extra_option/pca.png b/frontend/public/images/extra_option/pca.png
diff --git a/frontend/public/images/extra_option/roa.png b/frontend/public/images/extra_option/roa.png
diff --git a/frontend/public/images/inner_car.png b/frontend/public/images/inner_car.png
diff --git a/frontend/public/images/inner_color1.png b/frontend/public/images/inner_color1.png
diff --git a/frontend/public/images/inner_color2.png b/frontend/public/images/inner_color2.png
diff --git a/frontend/public/images/model_engine.png b/frontend/public/images/model_engine.png
diff --git a/frontend/public/images/result1.png b/frontend/public/images/result1.png
diff --git a/frontend/public/images/result2.png b/frontend/public/images/result2.png
diff --git a/frontend/public/images/result3.png b/frontend/public/images/result3.png
diff --git a/frontend/public/images/result4.png b/frontend/public/images/result4.png
diff --git a/frontend/public/images/result5.png b/frontend/public/images/result5.png
diff --git a/frontend/public/images/result6.png b/frontend/public/images/result6.png
diff --git a/frontend/public/images/result7.png b/frontend/public/images/result7.png
diff --git a/frontend/public/images/similar_quote/similar1.png b/frontend/public/images/similar_quote/similar1.png
diff --git a/frontend/public/images/wheel.png b/frontend/public/images/wheel.png
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import { BrowserRouter } from 'react-router-dom';
-import NavBar from './components/layout/NavBar';
+import NavBar from './components/common/navbar/NavBar';
 import Providers from './components/contextProviders/Providers';
 import PriceStaticBar from './components/priceStaticBar/PriceStaticBar';
 import CustomRouter from './components/router/CustomRouter';
@@ -8,16 +8,11 @@ import CloseModalProvider from './context/CloseModalProvider';
 import SimilarQuoteModalProvider from './context/SimilarQuoteModalProvider';
 import GuideModalProvider from './context/GuideModalProvider';
 import ItemProvider from './context/ItemProvider';
-import { useEffect } from 'react';
 import QuoteSummaryModalProvider from './context/QuoteSummaryModalProvider';
 import ShareModalProvider from './context/ShareModalProvider';
 import ProgressProvider from './context/ProgressProvider';
 
 function App() {
-  useEffect(() => {
-    localStorage.clear();
-  }, []);
-
   const globalProviders = [
     CloseModalProvider,
     SimilarQuoteModalProvider,

diff --git a/frontend/src/components/cardSlider/CardSlider.tsx b/frontend/src/components/cardSlider/CardSlider.tsx
@@ -1,6 +1,6 @@
 import { styled, useTheme } from 'styled-components';
 import { BodyKrRegular3, HeadingKrMedium6 } from '../../styles/typefaces';
-import CenterWrapper from '../../components/layout/CenterWrapper';
+import CenterWrapper from '../common/layout/CenterWrapper';
 import { ArrowLeft, ArrowRight } from '../../components/common/icons/Icons';
 import { ReactNode, useState } from 'react';
 import Loading from '../loading/Loading';

diff --git a/frontend/src/components/cards/ModelTypeCard.tsx b/frontend/src/components/cards/ModelTypeCard.tsx
@@ -6,21 +6,23 @@ import { HTMLAttributes } from 'react';
 
 interface IModelTypeCard extends HTMLAttributes<HTMLDivElement> {
   active?: boolean;
-  desc: string;
+  percentage: number;
   title: string;
   price: number;
 }
 
 export default function ModelTypeCard({
   active = false,
-  desc,
+  percentage,
   title,
   price,
   ...props
 }: IModelTypeCard) {
   return (
     <Wrapper active={active} {...props}>
-      <ModelTypeDesc>{desc}</ModelTypeDesc>
+      <ModelTypeDesc>
+        <BlueText $active={active}>{percentage}%</BlueText>의 선택
+      </ModelTypeDesc>
       <ModelTypeTitle>{title}</ModelTypeTitle>
       <ModelTypePrice>
         +{price.toLocaleString()} 원 <CheckIcon active={active} />
@@ -46,3 +48,6 @@ const ModelTypePrice = styled.div`
 const ModelTypeDesc = styled.div`
   ${BodyKrRegular4}
 `;
+const BlueText = styled.span<{ $active: boolean }>`
+  color: ${({ theme, $active }) => $active && theme.color.activeBlue2};
+`;
diff --git a/frontend/src/components/common/banner/Banner.tsx b/frontend/src/components/common/banner/Banner.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 import { BodyKrRegular3, HeadingKrBold1 } from '../../../styles/typefaces';
-import CenterWrapper from '../../layout/CenterWrapper';
+import CenterWrapper from '../layout/CenterWrapper';
 
 interface IBanner extends React.HTMLAttributes<HTMLDivElement> {
   subtitle?: string;

diff --git a/...d/src/components/layout/CenterWrapper.tsx → ...omponents/common/layout/CenterWrapper.tsx b/...d/src/components/layout/CenterWrapper.tsx → ...omponents/common/layout/CenterWrapper.tsx
diff --git a/frontend/src/components/common/navbar/CarSelectContainer.tsx b/frontend/src/components/common/navbar/CarSelectContainer.tsx
@@ -0,0 +1,112 @@
+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 { useState } from 'react';
+import { flexCenterCss } from '../../../utils/commonStyle';
+import { BodyKrMedium3, BodyKrMedium4 } from '../../../styles/typefaces';
+import DefaultCardStyle from '../card/DefaultCardStyle';
+import { DimmedBackground } from '../../modal/DimmedBackground';
+
+interface ICar {
+  carTypeId: number;
+  carTypeImage: string;
+  carTypeName: string;
+}
+
+interface ICarSelectContainer {
+  visible: boolean;
+}
+
+export default function CarSelectContainer({ visible }: ICarSelectContainer) {
+  const { data } = useFetch<ICar[]>(CAR_LIST_API);
+  const [active, setActive] = useState(3); // 3: SUV
+  const categoryList = ['수소/전기차', 'N', '승용', 'SUV', 'MVP', '소형트럭/택시', '트럭', '버스'];
+
+  const handleCategoryClick = (idx: number) => {
+    setActive(idx);
+  };
+  const isActive = (idx: number) => idx === active;
+
+  const categoryItemComponents = categoryList?.map((category, idx) => {
+    return (
+      <CategoryItem $active={isActive(idx)} onClick={() => handleCategoryClick(idx)} key={idx}>
+        <CategoryName>{category}</CategoryName>
+      </CategoryItem>
+    );
+  });
+
+  const carItemComponents = data?.map((car, idx) => (
+    <CarItem key={idx}>
+      <CarImg src={IMG_URL + car.carTypeImage} />
+      <CarName>{car.carTypeName}</CarName>
+    </CarItem>
+  ));
+
+  return (
+    <>
+      <Wrapper $visible={visible}>
+        <CetnerWrapper>
+          <CategoryWrapper>{categoryItemComponents}</CategoryWrapper>
+          <CarListWrapper>{carItemComponents}</CarListWrapper>
+        </CetnerWrapper>
+      </Wrapper>
+      <CarSelectDimmedBackground $displayDimmed={visible} />
+    </>
+  );
+}
+
+const Wrapper = styled.div<{ $visible: boolean }>`
+  display: ${({ $visible }) => ($visible ? 'block' : 'none')};
+  position: fixed;
+  top: 60px;
+  z-index: 99999999;
+  height: 220px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
+const CetnerWrapper = styled(CenterWrapper)``;
+const CategoryWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 16px;
+  width: 100%;
+  height: 38px;
+  background-color: ${({ theme }) => theme.color.gray200};
+`;
+
+const CategoryItem = styled.div<{ $active: boolean }>`
+  ${flexCenterCss}
+  height: 100%;
+  width: 100%;
+  ${BodyKrMedium4}
+  color: ${({ $active, theme }) => ($active ? theme.color.white : theme.color.primaryColor)};
+  background-color: ${({ $active, theme }) => $active && theme.color.primaryColor};
+  cursor: pointer;
+`;
+const CategoryName = styled.span``;
+
+const CarListWrapper = styled.div`
+  display: flex;
+  margin-top: 20px;
+  overflow: scroll;
+  gap: 8px;
+`;
+const CarItem = styled(DefaultCardStyle)`
+  ${flexCenterCss}
+  flex-direction: column;
+  padding: 5px 8px;
+  border: 1px solid transparent;
+`;
+const CarImg = styled.img`
+  width: 160px;
+`;
+const CarName = styled.div`
+  margin-top: 10px;
+  ${BodyKrMedium3}
+`;
+const CarSelectDimmedBackground = styled(DimmedBackground)`
+  z-index: 10000000;
+`;
diff --git a/frontend/src/components/layout/NavBar.tsx → ...d/src/components/common/navbar/NavBar.tsx b/frontend/src/components/layout/NavBar.tsx → ...d/src/components/common/navbar/NavBar.tsx
@@ -1,12 +1,13 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { css, styled, useTheme } from 'styled-components';
-import { BodyKrMedium3, BodyKrRegular3, HeadingKrMedium6 } from '../../styles/typefaces';
-import { ArrowDown, CancelIcon } from '../common/icons/Icons';
+import { BodyKrMedium3, BodyKrRegular3, HeadingKrMedium6 } from '../../../styles/typefaces';
+import { ArrowDown, CancelIcon } from '../icons/Icons';
 import hyundaiLogo from '/images/logo.svg';
-import { MESSAGE, PATH } from '../../utils/constants';
-import { CloseModalContext } from '../../context/CloseModalProvider';
-import { ProgressContext } from '../../context/ProgressProvider';
+import { MESSAGE, PATH } from '../../../utils/constants';
+import { CloseModalContext } from '../../../context/CloseModalProvider';
+import { ProgressContext } from '../../../context/ProgressProvider';
+import CarSelectContainer from './CarSelectContainer';
 
 interface INavItem extends React.HTMLAttributes<HTMLLIElement> {
   active: boolean;
@@ -16,6 +17,7 @@ export default function NavBar() {
   const { nextStepAvailable } = useContext(ProgressContext);
   const { pathname: currentPath } = useLocation();
   const { setVisible: setCloseModalVisible } = useContext(CloseModalContext);
+  const [menuVisible, setMenuVisible] = useState<boolean>(false);
   const theme = useTheme();
 
   const handleNavItemClick = (path: string) => {
@@ -31,14 +33,16 @@ export default function NavBar() {
   const handleCloseButtonClick = () => {
     setCloseModalVisible(true);
   };
+  const handleCarSelectClick = () => {
+    setMenuVisible((cur) => !cur);
+  };
 
   return (
-    <>
-      <Wrapper>
+    <Wrapper>
+      <NavContainer $menuVisible={menuVisible}>
         <Body>
           <HyundaiLogo src={hyundaiLogo} alt="" />
-
-          <CarSelect>
+          <CarSelect onClick={handleCarSelectClick}>
             <span>펠리세이드</span>
             <ArrowDown fill={theme.color.gray800} />
           </CarSelect>
@@ -79,8 +83,9 @@ export default function NavBar() {
             <CancelIcon width={12} height={12} />
           </CancelButton>
         </Body>
-      </Wrapper>
-    </>
+      </NavContainer>
+      <CarSelectContainer visible={menuVisible} />
+    </Wrapper>
   );
 }
 
@@ -95,7 +100,12 @@ function NavItem({ active, ...props }: INavItem) {
 }
 
 const Wrapper = styled.div`
-  z-index: 999;
+  display: flex;
+  flex-direction: column;
+`;
+
+const NavContainer = styled.div<{ $menuVisible: boolean }>`
+  z-index: ${({ $menuVisible }) => ($menuVisible ? 9999999999999 : 999)};
   position: fixed;
   top: 0px;
   left: 0px;

diff --git a/frontend/src/components/modal/GuideModal.tsx b/frontend/src/components/modal/GuideModal.tsx
@@ -2,7 +2,7 @@ import { HTMLAttributes, MouseEventHandler, useContext, useLayoutEffect, useRef
 import { styled } from 'styled-components';
 import { Bubble, CloseIcon } from '../common/icons/Icons';
 import { BodyKrRegular3, HeadingKrMedium7 } from '../../styles/typefaces';
-import CenterWrapper from '../layout/CenterWrapper';
+import CenterWrapper from '../common/layout/CenterWrapper';
 import { DimmedBackground } from './DimmedBackground';
 import { GuideModalContext } from '../../context/GuideModalProvider';
 import { useLocation } from 'react-router-dom';

diff --git a/frontend/src/components/priceStaticBar/PriceStaticSlider.tsx b/frontend/src/components/priceStaticBar/PriceStaticSlider.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 import { flexCenterCss } from '../../utils/commonStyle';
-import { BodyKrRegular5 } from '../../styles/typefaces';
+import { BodyKrRegular3, BodyKrRegular5 } from '../../styles/typefaces';
 import { ChangeEvent, useContext } from 'react';
 import { ItemContext } from '../../context/ItemProvider';
 import { TEN_THOUSAND_UNIT } from '../../utils/constants';
@@ -25,14 +25,15 @@ export default function Slider({
   return (
     <PriceBarWrapper {...props}>
       <MarkerSvgWrapper>
+        <Budget>예산: {budget / TEN_THOUSAND_UNIT}만</Budget>
         <PriceBar
           type="range"
           min={selectedItem.trim.price}
           max={highestPrice}
           value={budget}
           onChange={handleChange}
           onMouseDown={stopEvent}
-          step={10}
+          step={100_000}
           $percent={
             ((budget - selectedItem.trim.price) / (highestPrice - selectedItem.trim.price)) * 100
           }
@@ -59,6 +60,13 @@ export default function Slider({
 const PriceBarWrapper = styled.div`
   padding-top: 28px;
   padding-bottom: 4px;
+  position: relative;
+`;
+const Budget = styled.span`
+  ${BodyKrRegular3}
+  position: absolute;
+  top: -25px;
+  right: 0px;
 `;
 
 const MarkerSvgWrapper = styled.div`

diff --git a/frontend/src/containers/InnerColorPage/InnerColorFooterContainer.tsx b/frontend/src/containers/InnerColorPage/InnerColorFooterContainer.tsx
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 import PriceSummary from '../../components/summary/PriceSummary';
 import { PATH } from '../../utils/constants';
-import CenterWrapper from '../../components/layout/CenterWrapper';
+import CenterWrapper from '../../components/common/layout/CenterWrapper';
 
 export default function InnerColorFooterContainer() {
   return (

diff --git a/frontend/src/containers/InnerColorPage/InnerColorSelectContainer.tsx b/frontend/src/containers/InnerColorPage/InnerColorSelectContainer.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useCallback, useContext, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
-import CenterWrapper from '../../components/layout/CenterWrapper';
+import CenterWrapper from '../../components/common/layout/CenterWrapper';
 import InnerColorCard from '../../components/cards/InnerColorCard';
 import CardSlider from '../../components/cardSlider/CardSlider';
 import { NUM_IN_A_PAGE } from '../../utils/constants';

diff --git a/frontend/src/containers/ModelTypePage/ModelTypeBannerContainer.tsx b/frontend/src/containers/ModelTypePage/ModelTypeBannerContainer.tsx
@@ -4,7 +4,7 @@ import { useFetch } from '../../hooks/useFetch';
 import { BodyKrRegular4 } from '../../styles/typefaces';
 import Banner from '../../components/common/banner/Banner';
 import HmgTag from '../../components/common/hmgTag/HmgTag';
-import CenterWrapper from '../../components/layout/CenterWrapper';
+import CenterWrapper from '../../components/common/layout/CenterWrapper';
 import PowerTrainData from '../../components/powerTrainData/PowerTrainData';
 import { IHmgData, ModelTypeContext } from '../../context/ModelTypeProvider';
 import { MODEL_TYPE_API, IMG_URL } from '../../utils/apis';