Merge pull request #274 from softeerbootcamp-2nd/fe-develop

[FE] deploy v1.2.0
softeerbootcamp-2nd · Aug 28, 2023 · a93a39c · a93a39c
2 parents 5660180 + 10f221e
commit a93a39c
Show file tree

Hide file tree

Showing 50 changed files with 683 additions and 2,286 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,10 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon-precomposed" href="/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <title>Vite + React + TS</title>
+    <title>MyCarDeepDive</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/Components/CarRotation/index.tsx b/frontend/src/Components/CarRotation/index.tsx
@@ -94,25 +94,27 @@ function CarRotation({ rotation, carImageUrl }: CarRotationProps) {
       onMouseUp={onMouseOverHandler}
       onMouseLeave={onMouseLeaveHandler}
     >
-      {carImageUrl.length > 1 ? (
-        carImageUrl.map((image, idx) => (
-          <img
-            className='w-[85%] z-10 ml-32'
-            key={idx}
-            src={`https://${image}`}
-            style={
-              focus === idx ? { display: 'inline-block' } : { display: 'none' }
-            }
-            draggable={false}
-          />
-        ))
-      ) : (
-        <img
-          className='w-[85%] z-10 ml-32'
-          src={carImageUrl[0]}
-          draggable={false}
-        />
-      )}
+      {carImageUrl.length > 1
+        ? carImageUrl.map((image, idx) => (
+            <img
+              className='w-[85%] z-10 ml-32'
+              key={idx}
+              src={`https://${image}`}
+              style={
+                focus === idx
+                  ? { display: 'inline-block' }
+                  : { display: 'none' }
+              }
+              draggable={false}
+            />
+          ))
+        : carImageUrl[0] && (
+            <img
+              className='w-[85%] z-10 ml-32'
+              src={`https://${carImageUrl[0]}`}
+              draggable={false}
+            />
+          )}
       <div
         className={`w-[85%] h-24 ml-32 absolute top-[59%] left-0 -z-10 transition-opacity duration-1000 ${
           rotation ? 'opacity-100' : 'opacity-0'

diff --git a/frontend/src/Components/Header/showQuotation/index.tsx b/frontend/src/Components/Header/showQuotation/index.tsx
@@ -1,22 +1,26 @@
 import Button from '@/Components/Button';
 import { CarContext } from '@/context/CarProvider';
+import { priceToString } from '@/utils';
 import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 function ShowQuotationButton() {
-  const { color, carSpec } = useContext(CarContext);
+  const { color, carSpec, optionData } = useContext(CarContext);
+  const navigation = useNavigate();
   return (
     <div className='ml-2'>
       <Button
         width='px-4'
         height='h-10'
         variant='primaryBody4'
         rounded='4px'
-        text={`${(
-          color.exteriorColor.price +
-          color.interiorColor.price +
-          carSpec.price
-        ).toLocaleString('en-US')} 원 견적내기`}
-        onClick={() => console.log('primary')}
+        text={`${priceToString(
+          carSpec.price +
+            color.exteriorColor.price +
+            color.interiorColor.price +
+            optionData.reduce((sum, item) => sum + item.price, 0),
+        )} 원 견적내기`}
+        onClick={() => navigation('/mycar/ready')}
       />
     </div>
   );

diff --git a/frontend/src/Components/Toast/index.tsx b/frontend/src/Components/Toast/index.tsx
@@ -13,7 +13,7 @@ function Toast({ success, message, showToast, setShowToast }: Props) {
 
   useEffect(() => {
     if (!showToast) return setAnimation(false);
-    setAnimation(true);
+    setTimeout(() => setAnimation(true), 10);
 
     setTimer(
       setTimeout(() => {
@@ -26,8 +26,11 @@ function Toast({ success, message, showToast, setShowToast }: Props) {
   useEffect(() => {
     if (animation) return;
 
-    clearTimeout(timer);
-    setTimer(undefined);
+    setTimeout(() => {
+      clearTimeout(timer);
+      setTimer(undefined);
+      setShowToast(false);
+    }, 710);
   }, [animation]);
 
   useEffect(() => {
@@ -39,6 +42,7 @@ function Toast({ success, message, showToast, setShowToast }: Props) {
     };
   }, []);
 
+  if (!showToast) return null;
   return (
     <div
       className={`flex items-center w-full max-w-sm p-4 text-gray-500 bg-white rounded-lg fixed top-10 right-10 transition-transform duration-700 ease-in-out ${
@@ -76,7 +80,6 @@ function Toast({ success, message, showToast, setShowToast }: Props) {
         className='ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8'
         onClick={() => {
           setAnimation(false);
-          setShowToast(false);
         }}
       >
         <svg

diff --git a/frontend/src/Pages/ColorSelectionPage/ChangerModal/ChangePrice/index.tsx b/frontend/src/Pages/ColorSelectionPage/ChangerModal/ChangePrice/index.tsx
@@ -1,3 +1,5 @@
+import { priceToString } from '@/utils';
+
 function ChangePrice({ priceGap }: { priceGap: number }) {
   return (
     <div className='flex justify-between'>
@@ -7,8 +9,8 @@ function ChangePrice({ priceGap }: { priceGap: number }) {
 
       <p className='font-h3-medium'>
         {priceGap >= 0
-          ? `+${priceGap.toLocaleString('en-US')}`
-          : `-${priceGap.toLocaleString('en-US')}`}
+          ? `+${priceToString(priceGap)}`
+          : `${priceToString(priceGap)}`}
         원
       </p>
     </div>

diff --git a/frontend/src/Pages/ColorSelectionPage/ChangerModal/ChangeTrim/index.tsx b/frontend/src/Pages/ColorSelectionPage/ChangerModal/ChangeTrim/index.tsx
@@ -1,8 +1,16 @@
 import TrimInfo from '../TrimInfo';
 
-function ChangeTrim() {
+interface Props {
+  wantedOtherColorTrim: any;
+}
+
+function ChangeTrim({ wantedOtherColorTrim }: Props) {
   return (
-    <TrimInfo title='변경 트림' trimName='Calligraphy' trimPrice={52540000} />
+    <TrimInfo
+      title='변경 트림'
+      trimName={wantedOtherColorTrim.trim_name}
+      trimPrice={wantedOtherColorTrim.price}
+    />
   );
 }
 

diff --git a/frontend/src/Pages/ColorSelectionPage/ChangerModal/CurrentTrim/index.tsx b/frontend/src/Pages/ColorSelectionPage/ChangerModal/CurrentTrim/index.tsx
@@ -1,11 +1,14 @@
+import { useContext } from 'react';
 import TrimInfo from '../TrimInfo';
+import { CarContext } from '@/context/CarProvider';
 
 function CurrentTrim() {
+  const { carSpec } = useContext(CarContext);
   return (
     <TrimInfo
       title='현재 트림'
-      trimName='Le Blanc (르블랑)'
-      trimPrice={40440000}
+      trimName={carSpec.trim.name}
+      trimPrice={carSpec.price}
     />
   );
 }

diff --git a/frontend/src/Pages/ColorSelectionPage/ChangerModal/Explain/index.tsx b/frontend/src/Pages/ColorSelectionPage/ChangerModal/Explain/index.tsx
@@ -1,10 +1,11 @@
 interface Props {
   wantedOtherColor: any;
+  description: string;
 }
-function Explain({ wantedOtherColor }: Props) {
+function Explain({ wantedOtherColor, description }: Props) {
   return (
     <p className='font-body4-regular text-grey-400 mb-9'>
-      {wantedOtherColor.name} 색상은 트림 변경 후 선택할 수 있어요.
+      {wantedOtherColor.name} {description}
     </p>
   );
 }

diff --git a/frontend/src/Pages/ColorSelectionPage/ChangerModal/Title/index.tsx b/frontend/src/Pages/ColorSelectionPage/ChangerModal/Title/index.tsx
@@ -1,9 +1,8 @@
-function Title() {
-  return (
-    <div className='mb-2 font-h1-medium text-grey-50 whitespace-pre'>
-      Calligraphy 트림으로{'\n'}변경하시겠어요?
-    </div>
-  );
+interface Props {
+  description: string;
+}
+function Title({ description }: Props) {
+  return <div className='mb-2 font-h1-medium text-grey-50'>{description}</div>;
 }
 
 export default Title;
diff --git a/frontend/src/Pages/ColorSelectionPage/ChangerModal/index.tsx b/frontend/src/Pages/ColorSelectionPage/ChangerModal/index.tsx
@@ -15,37 +15,33 @@ import { CarContext } from '@/context/CarProvider';
 
 interface Props extends ModalProps {
   wantedOtherColor: any;
+  wantedOtherColorTrim: any;
   clickHandler: () => void;
-  type: 'exterial' | 'interial';
 }
 
 function ChangerModal({
   showModal,
   setShowModal,
   wantedOtherColor,
   clickHandler,
-  type,
+  wantedOtherColorTrim,
 }: Props) {
-  const { color } = useContext(CarContext);
-  if (!wantedOtherColor) return;
-  const { price } = wantedOtherColor;
+  const { carSpec } = useContext(CarContext);
+  if (!wantedOtherColor || !wantedOtherColorTrim) return;
   return (
     <Modal showModal={showModal} setShowModal={setShowModal}>
       <ModalContentsWrapper>
         <CloseModal />
-        <div className='mt-6 mx-8'>
-          <Title />
-          <Explain wantedOtherColor={wantedOtherColor} />
+        <div className='mt-6 mx-8 whitespace-pre'>
+          <Title description={`Calligraphy 트림으로\n변경하시겠어요?`} />
+          <Explain
+            wantedOtherColor={wantedOtherColor}
+            description='색상은 트림 변경 후 선택할 수 있어요.'
+          />
           <CurrentTrim />
-          <ChangeTrim />
+          <ChangeTrim wantedOtherColorTrim={wantedOtherColorTrim} />
           <UnderLine margin='mt-9 mb-[13px]' color='bg-grey-500' />
-          {type === 'exterial' && (
-            <ChangePrice priceGap={color.exteriorColor.price - price} />
-          )}
-          {type === 'interial' && (
-            <ChangePrice priceGap={color.interiorColor.price - price} />
-          )}
-
+          <ChangePrice priceGap={wantedOtherColorTrim.price - carSpec.price} />
           <Buttons
             wantedOtherColor={wantedOtherColor}
             clickHandler={clickHandler}

diff --git a/frontend/src/Pages/ColorSelectionPage/ColorItems/Icon/index.tsx b/frontend/src/Pages/ColorSelectionPage/ColorItems/Icon/index.tsx
@@ -10,7 +10,9 @@ function Icon({ imgUrl, type }: IconProps) {
       <img
         src={imgUrl}
         alt='mark'
-        className={`absolute z-20 ${type === 'unavailable' && 'w-7'}`}
+        className={`absolute z-20 ${
+          type === 'unavailable' && 'w-6 top-[-10px] right-[-10px]'
+        }`}
       />
     </>
   );

diff --git a/frontend/src/Pages/ColorSelectionPage/ColorItems/Image/index.tsx b/frontend/src/Pages/ColorSelectionPage/ColorItems/Image/index.tsx
@@ -7,7 +7,7 @@ function Image({ colorName, imgUrl }: ImageProps) {
   return (
     <img
       src={`https://${imgUrl}`}
-      alt={`{exterior-${colorName}}`}
+      alt={colorName}
       className={`rounded${
         colorName === '크리미 화이트 펄' ? 'border border-grey-700 rounded' : ''
       }`}

diff --git a/frontend/src/Pages/ColorSelectionPage/ExteriorDropDown/index.tsx b/frontend/src/Pages/ColorSelectionPage/ExteriorDropDown/index.tsx
@@ -9,32 +9,30 @@ import {
   SET_CARSPECID,
   SET_CARSPECPRICE,
   SET_EXTERIORCOLOR,
+  SET_OPTION_DEFAULT,
   SET_TRIMID,
   SET_TRIMNAME,
 } from '@/context/CarProvider/type';
-import { getInteriorColorType } from '@/api/color/getInteriorColors';
 import { getTrimType } from '@/api/trim/getTrim';
 import ChangerModal from '../ChangerModal';
 import { getExteriorColorType } from '@/api/color/getExteriorColor';
 import useLogFetch from '@/hooks/useLogFetch';
 
 interface Props {
   classifiedExteriorColor: getExteriorColorType | undefined;
-  classifiedInteriorColor: getInteriorColorType | undefined;
   getTrimInfo: getTrimType | undefined;
   setExteriorCarImage: React.Dispatch<React.SetStateAction<string[]>>;
-  setInteriorCarImage: React.Dispatch<React.SetStateAction<string | undefined>>;
   setView: React.Dispatch<React.SetStateAction<string>>;
 }
 
 function ExteriorDropDown({
   classifiedExteriorColor,
   getTrimInfo,
-  setExteriorCarImage,
   setView,
 }: Props) {
   const [showOtherColor, setShowOtherColor] = useState(false);
   const [wantedOtherColor, setWantedOtherColor] = useState<any>();
+  const [wantedOtherColorTrim, setWantedOtherColorTrim] = useState<any>();
   const [showModal, setShowModal] = useState(false);
   const { carDispatch } = useContext(CarContext);
 
@@ -45,6 +43,12 @@ function ExteriorDropDown({
     if (dataObject) {
       const colorInfo = JSON.parse(dataObject);
       setWantedOtherColor(colorInfo);
+      const index = getTrimInfo?.data.car_specs.findIndex(
+        id => id.trim_id === colorInfo.trim_id,
+      );
+      if (index === undefined || !getTrimInfo) return;
+      const wantedOtherColorTrim = getTrimInfo?.data.car_specs[index];
+      setWantedOtherColorTrim(wantedOtherColorTrim);
       setShowModal(true);
       useLogFetch({
         url: `/color/exterior-colors/activity-log/${colorInfo.color_id}`,
@@ -53,28 +57,15 @@ function ExteriorDropDown({
   };
 
   const changeHandler = () => {
-    closeModalHandler();
     setView('exterial');
-    const {
-      color_id,
-      name,
-      img_url,
-      price,
-      choose_rate,
-      trim_id,
-      car_img_urls,
-    } = wantedOtherColor;
-    const index = getTrimInfo?.data.car_specs.findIndex(
-      id => id.trim_id === trim_id,
-    );
-
-    if (index === undefined || !getTrimInfo) return;
+    closeModalHandler();
+    const { color_id, name, img_url, price, choose_rate } = wantedOtherColor;
     const {
       trim_id: trimId,
       trim_name,
       car_spec_id: carSpecId,
       price: carSpecPrice,
-    } = getTrimInfo.data.car_specs[index];
+    } = wantedOtherColorTrim;
 
     carDispatch({ type: SET_TRIMID, trimId });
     carDispatch({ type: SET_TRIMNAME, trimName: trim_name });
@@ -91,7 +82,7 @@ function ExteriorDropDown({
         chooseRate: choose_rate,
       },
     });
-    setExteriorCarImage(car_img_urls);
+    carDispatch({ type: SET_OPTION_DEFAULT });
   };
 
   return (
@@ -116,10 +107,10 @@ function ExteriorDropDown({
 
       <ChangerModal
         wantedOtherColor={wantedOtherColor}
+        wantedOtherColorTrim={wantedOtherColorTrim}
         showModal={showModal}
         setShowModal={setShowModal}
         clickHandler={changeHandler}
-        type='exterial'
       />
     </>
   );