Merge pull request #452 from softeerbootcamp-2nd/dev

FE - 최종 발표 버전 main 배포
softeerbootcamp-2nd · Aug 24, 2023 · c54d100 · c54d100
2 parents 8caabd7 + 38ca280
commit c54d100
Show file tree

Hide file tree

Showing 24 changed files with 193 additions and 156 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -22,6 +22,7 @@ function App() {
     ItemProvider,
     ProgressProvider,
   ];
+
   return (
     <Providers contexts={globalProviders}>
       <BrowserRouter>

diff --git a/frontend/src/components/cards/SummaryOptionCard.tsx b/frontend/src/components/cards/SummaryOptionCard.tsx
@@ -22,9 +22,7 @@ export default function SummaryOptionCard({
     <Card active={active} {...props}>
       <OptionImg src={imgSrc} />
       <OptionCardInfo>
-        <div>
-          <OptionTitle>{title}</OptionTitle>
-        </div>
+        <OptionTitle>{title}</OptionTitle>
         <OptionPrice>
           +{price.toLocaleString()} 원 <CheckIcon active={active} />
         </OptionPrice>
@@ -34,32 +32,40 @@ export default function SummaryOptionCard({
 }
 
 const Card = styled(DefaultCardStyle)`
-  position: relative;
   width: 103px;
   height: 107px;
   border-radius: 2px;
+  display: flex;
+  flex-direction: column;
 `;
 
 const OptionImg = styled.img`
+  object-fit: cover;
   border-radius: 1px 1px 0px 0px;
   width: 100%;
   height: 49px;
   background-color: rgba(211, 211, 211, 0.5);
 `;
 const OptionCardInfo = styled.div`
-  padding: 4px 8px;
   display: flex;
+  padding: 4px 8px;
   flex-direction: column;
   justify-content: space-between;
+  width: 100%;
   height: 57px;
 `;
 
 const OptionTitle = styled.div`
   ${BodyKrMedium5}
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 const OptionPrice = styled.div`
   ${BodyKrMedium5}
   display: flex;
+  white-space: nowrap;
   justify-content: space-between;
   align-items: center;
 `;
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
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { css, styled, useTheme } from 'styled-components';
 import { BodyKrMedium3, BodyKrRegular3, HeadingKrMedium6 } from '../../../styles/typefaces';
@@ -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);
@@ -36,6 +38,9 @@ export default function NavBar() {
   const handleCarSelectClick = () => {
     setMenuVisible((cur) => !cur);
   };
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [currentPath]);
 
   return (
     <Wrapper>
@@ -44,7 +49,7 @@ export default function NavBar() {
           <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/components/details/SummaryItem.tsx b/frontend/src/components/details/SummaryItem.tsx
@@ -44,7 +44,7 @@ const Item = styled.li`
 const Img = styled.img`
   width: 77px;
   height: 55px;
-  object-fit: cover;
+  object-fit: contain;
 `;
 const InfoWrapper = styled.div`
   display: flex;

diff --git a/frontend/src/components/histogram/BarHistogram.tsx b/frontend/src/components/histogram/BarHistogram.tsx
@@ -54,8 +54,8 @@ export default function BarHistogram() {
     return (
       <BarItem key={historyId}>
         <Bar $height={`${percentage}%`}>
-          <BarValue>{soldCount}대</BarValue>
-          <BarItemName>내 견적</BarItemName>
+          <BarValue>{soldCount.toLocaleString()}대</BarValue>
+          <BarItemName>유사견적</BarItemName>
         </Bar>
       </BarItem>
     );
@@ -87,7 +87,8 @@ export default function BarHistogram() {
             들을 확인하고 비교해보세요.
           </Caption>
           <CaptionDesc>
-            유사 출고 견적이란, 내 견적과 해시태그 유사도가 높은 다른 사람들의 실제 출고 견적이에요.
+            유사 출고 견적이란, 판매량 및 내 견적과 선택 옵션 유사도가 높은 다른 사람들의 실제 출고
+            견적이에요.
           </CaptionDesc>
         </CaptionWrapper>
         {quoteListLoading || !hasSimilarQuote || !quoteListData ? (
@@ -147,7 +148,7 @@ const CaptionWrapper = styled.div`
   margin-bottom: 20px;
 `;
 const Caption = styled.div`
-  width: 200px;
+  word-break: keep-all;
 `;
 const BlueText = styled.span`
   color: ${({ theme }) => theme.color.activeBlue};

diff --git a/frontend/src/components/modal/QuoteSummaryModal.tsx b/frontend/src/components/modal/QuoteSummaryModal.tsx
@@ -71,11 +71,7 @@ export default function QuoteSummaryModal({ ...props }: IQuoteSummaryModal) {
             </ImgSection>
             <DetailSection>
               <Detail title="모델" name="팰리세이드" price={0} />
-              <Detail
-                title={'트림'}
-                name={selectedItem.trim.name}
-                price={selectedItem.trim.price}
-              />
+              <Detail title="트림" name={selectedItem.trim.name} price={selectedItem.trim.price} />
               <Hr />
               <Detail
                 title="파워트레인"
@@ -127,7 +123,7 @@ function Detail({ title, name, price }: IDetail) {
     <DetailWrapper>
       {title && <DetailTitle>{title}</DetailTitle>}
       {name && <DetailName>{name}</DetailName>}
-      {price && <DetailPrice>+ {price.toLocaleString()} 원</DetailPrice>}
+      <DetailPrice>+ {price ? price.toLocaleString() : 0} 원</DetailPrice>
     </DetailWrapper>
   );
 }
@@ -181,7 +177,6 @@ const DetailSection = styled.div`
 
 const DetailWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
   ${BodyKrRegular3}
 `;
 const DetailTitle = styled.div`