[FE-Refactor] 견적서 및 지도 리팩토링(1) (#370)

* fix: 견적서 조회 시 useParams 수정 * fix: 작성된 견적서 URL 변경 /{estimateId} -> /estimates/{estimateId} * chore: 확정시 변경 불가 멘트 추가 * chore: 서울 지도 파일 경로 변경 * chore: console.log 삭제
softeerbootcamp-2nd · Aug 23, 2023 · 5213b18 · 5213b18
1 parent d74709a
commit 5213b18
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 114 deletions.
diff --git a/FE-MyCarMaster/src/App.tsx b/FE-MyCarMaster/src/App.tsx
@@ -53,7 +53,10 @@ function App() {
             <Route path="/" element={<Home />} />
             <Route path="/estimation" element={<Estimation />} />
             <Route path="/quotation" element={<Quotation />} />
-            <Route path="/:estimateId" element={<WrittenQuotation />} />
+            <Route
+              path="/estimates/:estimateId"
+              element={<WrittenQuotation />}
+            />
             <Route path="/consult-complete" element={<ConsultComplete />} />
           </Routes>
         </Flex>

diff --git a/FE-MyCarMaster/src/components/Footer/view/OptionSelect.tsx b/FE-MyCarMaster/src/components/Footer/view/OptionSelect.tsx
@@ -57,7 +57,6 @@ export default function OptionSelect() {
 
   const handleScroll = (e: React.WheelEvent<HTMLDivElement>) => {
     const target = e.currentTarget;
-    console.log(target);
     const scrollAmount = e.deltaY;
     target.scrollTo({
       top: 0,

diff --git a/FE-MyCarMaster/src/components/common/FormModal/FormModal.tsx b/FE-MyCarMaster/src/components/common/FormModal/FormModal.tsx
@@ -89,11 +89,10 @@ export function FormModal({
         client: formDatas,
       };
       post(`${SERVER_URL}/consultings`, submitData).then((res) => {
-        console.log(res);
         if (res.code === 2000) {
           setIsModalOpen(false);
           setFormModalOn(false);
-          navigate("/");
+          navigate("/consult-complete", { state: { email: formDatas.email } });
         }
       });
     }

diff --git a/FE-MyCarMaster/src/components/common/Modals/ModalContents/ConfirmModal.tsx b/FE-MyCarMaster/src/components/common/Modals/ModalContents/ConfirmModal.tsx
@@ -1,7 +1,12 @@
 import { styled } from "styled-components";
 
 function ConfirmModal() {
-  return <Container>견적서를 확정하시겠습니까?</Container>;
+  return (
+    <Container>
+      견적서를 확정하시겠습니까?
+      <P /> 확정하시면 선택하신 것을 변경할 수 없습니다.
+    </Container>
+  );
 }
 
 export default ConfirmModal;
@@ -20,3 +25,7 @@ const Container = styled.div`
   font-style: normal;
   font-weight: 500;
 `;
+
+const P = styled.p`
+  margin: 1rem;
+`;
diff --git a/...ster/src/components/SeoulMap/SeoulMap.tsx → ...c/components/common/SeoulMap/SeoulMap.tsx b/...ster/src/components/SeoulMap/SeoulMap.tsx → ...c/components/common/SeoulMap/SeoulMap.tsx
@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import theme from "../../styles/Theme";
+import theme from "../../../styles/Theme";
 import React, { useState } from "react";
 import { createPortal } from "react-dom";
 

diff --git a/FE-MyCarMaster/src/pages/WrittenQuotation.tsx b/FE-MyCarMaster/src/pages/WrittenQuotation.tsx
@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 import QuotationItem from "@common/QuotationList/QuotationItem";
 import QuotationOptionItem from "@common/QuotationList/QuotationOptionItem";
 import theme from "@styles/Theme";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { get } from "@/utils/fetch";
 
@@ -47,7 +47,7 @@ interface WrittenQuotationProps {
 
 function WrittenQuotation() {
   const SERVER_URL = import.meta.env.VITE_APP_SERVER_URL;
-  const estimateId = useParams();
+  const { estimateId } = useParams();
   const [data, setData] = useState<WrittenQuotationProps>();
 
   function calculateTotalPrice(quotation: WrittenQuotationProps): number {
@@ -74,118 +74,129 @@ function WrittenQuotation() {
   }
 
   useEffect(() => {
+    console.log(estimateId);
     get(`${SERVER_URL}/estimates/${estimateId}`).then((res) => {
+      console.log(res);
       setData(res.result);
     });
   }, []);
 
   return (
-    <Container>
-      <BlueBackground />
-      <QuotationMain>
-        <QuotationContent>
-          <Model>팰리세이드</Model>
-          <CarImage src={data!.exteriorColor.coloredImgUrl} />
-        </QuotationContent>
-      </QuotationMain>
-      <QuotationFooter>
-        <PriceContainer>
-          <Price>예상 가격</Price>
-          <SumPrice>{calculateTotalPrice().toLocaleString("ko-KR")}원</SumPrice>
-        </PriceContainer>
-      </QuotationFooter>
-      <StepList>
-        <QuotationItem
-          category={"트림"}
-          name={data!.trim.name}
-          price={data!.trim.price}
-          id={0}
-          confirm={true}
-        />
-        <QuotationItem
-          category={"엔진"}
-          name={data!.engine.name}
-          price={data!.engine.price}
-          id={1}
-          confirm={true}
-        />
-        <QuotationItem
-          category={"구동 방식"}
-          name={data!.wheelDrive.name}
-          price={data!.wheelDrive.price}
-          id={2}
-          confirm={true}
-        />
-        <QuotationItem
-          category={"바디 타입"}
-          name={data!.bodyType.name}
-          price={data!.bodyType.price}
-          id={3}
-          confirm={true}
-        />
-        <QuotationItem
-          category={"외장 색상"}
-          name={data!.exteriorColor.name}
-          price={data!.exteriorColor.price}
-          imgUrl={data!.exteriorColor.colorImgUrl}
-          id={4}
-          confirm={true}
-        />
-        <QuotationItem
-          category={"내장 색상"}
-          name={data!.interiorColor.name}
-          price={data!.interiorColor.price}
-          imgUrl={data!.interiorColor.colorImgUrl}
-          id={5}
-          confirm={true}
-        />
-      </StepList>
-      <Options>
-        <OptionResize>
-          <CategoryContainer>
-            <Category>옵션</Category>
-          </CategoryContainer>
-          <ItemContainer>
-            <TotalOptionContainer>
-              <OptionContainer>
-                <Option>추가 옵션</Option>
-                {data?.selectOptions &&
-                  data.selectOptions.map((option, id) => (
-                    <QuotationOptionItem
-                      key={id}
-                      id={id as number}
-                      imgUrl={option.imgUrl as string}
-                      category={option.category as string}
-                      name={option.name}
-                      price={option.price}
-                      isSelected={true}
-                      $isFinished={true}
-                      confirm={true}
-                    />
-                  ))}
-              </OptionContainer>
-              <OptionContainer>
-                <Option>고민 옵션</Option>
-                {data?.considerOptions &&
-                  data.considerOptions.map((option, id) => (
-                    <QuotationOptionItem
-                      key={id}
-                      id={id as number}
-                      imgUrl={option.imgUrl as string}
-                      category={option.category as string}
-                      name={option.name}
-                      price={option.price}
-                      isSelected={false}
-                      $isFinished={true}
-                      confirm={true}
-                    />
-                  ))}
-              </OptionContainer>
-            </TotalOptionContainer>
-          </ItemContainer>
-        </OptionResize>
-      </Options>
-    </Container>
+    <Fragment>
+      {data && (
+        <Container>
+          <BlueBackground />
+          <QuotationMain>
+            <QuotationContent>
+              <Model>팰리세이드</Model>
+              <CarImage src={data!.exteriorColor.coloredImgUrl} />
+            </QuotationContent>
+          </QuotationMain>
+          <QuotationFooter>
+            <PriceContainer>
+              <Price>예상 가격</Price>
+              <SumPrice>
+                {calculateTotalPrice(
+                  data as WrittenQuotationProps
+                ).toLocaleString("ko-KR")}
+                원
+              </SumPrice>
+            </PriceContainer>
+          </QuotationFooter>
+          <StepList>
+            <QuotationItem
+              category={"트림"}
+              name={data!.trim.name}
+              price={data!.trim.price}
+              id={0}
+              confirm={true}
+            />
+            <QuotationItem
+              category={"엔진"}
+              name={data!.engine.name}
+              price={data!.engine.price}
+              id={1}
+              confirm={true}
+            />
+            <QuotationItem
+              category={"구동 방식"}
+              name={data!.wheelDrive.name}
+              price={data!.wheelDrive.price}
+              id={2}
+              confirm={true}
+            />
+            <QuotationItem
+              category={"바디 타입"}
+              name={data!.bodyType.name}
+              price={data!.bodyType.price}
+              id={3}
+              confirm={true}
+            />
+            <QuotationItem
+              category={"외장 색상"}
+              name={data!.exteriorColor.name}
+              price={data!.exteriorColor.price}
+              imgUrl={data!.exteriorColor.colorImgUrl}
+              id={4}
+              confirm={true}
+            />
+            <QuotationItem
+              category={"내장 색상"}
+              name={data!.interiorColor.name}
+              price={data!.interiorColor.price}
+              imgUrl={data!.interiorColor.colorImgUrl}
+              id={5}
+              confirm={true}
+            />
+          </StepList>
+          <Options>
+            <OptionResize>
+              <CategoryContainer>
+                <Category>옵션</Category>
+              </CategoryContainer>
+              <ItemContainer>
+                <TotalOptionContainer>
+                  <OptionContainer>
+                    <Option>추가 옵션</Option>
+                    {data?.selectOptions &&
+                      data.selectOptions.map((option, id) => (
+                        <QuotationOptionItem
+                          key={id}
+                          id={id as number}
+                          imgUrl={option.imgUrl as string}
+                          category={option.category as string}
+                          name={option.name}
+                          price={option.price}
+                          isSelected={true}
+                          $isFinished={true}
+                          confirm={true}
+                        />
+                      ))}
+                  </OptionContainer>
+                  <OptionContainer>
+                    <Option>고민 옵션</Option>
+                    {data?.considerOptions &&
+                      data.considerOptions.map((option, id) => (
+                        <QuotationOptionItem
+                          key={id}
+                          id={id as number}
+                          imgUrl={option.imgUrl as string}
+                          category={option.category as string}
+                          name={option.name}
+                          price={option.price}
+                          isSelected={false}
+                          $isFinished={true}
+                          confirm={true}
+                        />
+                      ))}
+                  </OptionContainer>
+                </TotalOptionContainer>
+              </ItemContainer>
+            </OptionResize>
+          </Options>
+        </Container>
+      )}
+    </Fragment>
   );
 }