[FE-Release] v0.3.2 배포

softeerbootcamp-2nd · Aug 28, 2023 · 33d29ac · 33d29ac
2 parents b6ecd3f + 53ddcc4
commit 33d29ac
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 39 deletions.
diff --git a/FE-MyCarMaster/src/components/Admin/AdminView.tsx b/FE-MyCarMaster/src/components/Admin/AdminView.tsx
@@ -38,7 +38,9 @@ export default function AdminView({ clientList }: AdminViewProps) {
           $flexDirection="row"
           $wrap={true}
           $alignContent="flex-start"
-          $gap="1rem"
+          $justifyContent="flex-start"
+          $alignItems="center"
+          $margin="0 5%"
         >
           {clientList &&
             clientList.map((client, index) => (
@@ -90,7 +92,6 @@ export default function AdminView({ clientList }: AdminViewProps) {
           </ClientQuotationDetailBox>
 
           <QuotationLookBox>
-            {/* client.estimateUrl에 해당하는 견적서를 보여주는 페이지 */}
             <QuotationIFrame src={isQuotationUrl} title="견적서" />
           </QuotationLookBox>
         </>

diff --git a/FE-MyCarMaster/src/components/Admin/style.ts b/FE-MyCarMaster/src/components/Admin/style.ts
@@ -6,6 +6,7 @@ export const QuotationBox = styled(Flex)`
   width: 100%;
   height: 100%;
 `;
+
 export const ClientBox = styled(Flex)`
   width: 20rem;
   height: 10rem;
@@ -65,7 +66,6 @@ export const ClientQuotationDetailBox = styled(Flex)`
   height: auto;
   position: absolute;
   gap: 1rem;
-  top: 0;
   left: 0;
   background-color: ${(props) => props.theme.colors.WHITE};
   padding: 2.5rem;

diff --git a/FE-MyCarMaster/src/components/Main/view/ColorView/ExteriorColorView.tsx b/FE-MyCarMaster/src/components/Main/view/ColorView/ExteriorColorView.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Flex } from "@styles/core.style";
 import {
   useCarPaintDispatch,
@@ -11,7 +11,7 @@ import {
 import { useTrimState } from "@contexts/TrimContext";
 import { ExteriorColors } from "types/carpaint.types";
 import useFetch from "@hooks/useFetch";
-import { SpriteCarRotation } from "@common/index";
+import { SpriteCarRotation, Loader } from "@common/index";
 
 interface FetchExteriorProps extends ExteriorColors {
   result: {
@@ -25,6 +25,7 @@ export default function ExteriorColorView() {
   const { trimId } = useTrimState();
   const { exteriorList, exteriorId } = useCarPaintState();
   const { carPaintQuotation } = useQuotationState();
+  const [loading, setLoading] = useState(true);
   const exteriorDispatch = useCarPaintDispatch();
   const quotationDispatch = useQuotationDispatch();
 
@@ -34,6 +35,7 @@ export default function ExteriorColorView() {
   );
 
   useEffect(() => {
+    setLoading(true);
     if (data) {
       if (carPaintQuotation.exteriorColorQuotation.id) return;
 
@@ -65,34 +67,27 @@ export default function ExteriorColorView() {
         },
       });
     }
-  }, [data]);
+  }, [data, carPaintQuotation.exteriorColorQuotation.id]);
+
+  const handleSpriteLoad = () => {
+    console.log("handleSpriteLoad");
+    setLoading(false);
+  };
 
   if (!exteriorList?.length) return null;
   return (
-    <Flex>
+    <Flex $position="relative">
       {exteriorList?.length && (
-        // <Image
-        //   $width="100%"
-        //   $height="25rem"
-        //   $objectFit="cover"
-        //   src={
-        //     exteriorList.find((exterior) => exterior.id === exteriorId)
-        //       ?.coloredImgUrl
-        //   }
-        // />
-        // <CarRotation
-        //   $isQuotation={false}
-        //   $imgUrl={
-        //     exteriorList.find((exterior) => exterior.id === exteriorId)
-        //       ?.coloredImgUrl
-        //   }
-        // />
-        <SpriteCarRotation
-          $imgUrl={
-            exteriorList.find((exterior) => exterior.id === exteriorId)
-              ?.coloredImgUrl
-          }
-        />
+        <>
+          {loading && <Loader />}
+          <SpriteCarRotation
+            onLoad={handleSpriteLoad}
+            $imgUrl={
+              exteriorList.find((exterior) => exterior.id === exteriorId)
+                ?.coloredImgUrl
+            }
+          />
+        </>
       )}
     </Flex>
   );

diff --git a/FE-MyCarMaster/src/components/common/CarRotation/SpriteCarRotation.tsx b/FE-MyCarMaster/src/components/common/CarRotation/SpriteCarRotation.tsx
@@ -4,9 +4,13 @@ import UnderBar from "@assets/icons/UnderBar.svg";
 
 type SpriteCarRotationProps = {
   $imgUrl: string | undefined;
+  onLoad?: () => void;
 };
 
-export default function SpriteCarRotation({ $imgUrl }: SpriteCarRotationProps) {
+export default function SpriteCarRotation({
+  $imgUrl,
+  onLoad,
+}: SpriteCarRotationProps) {
   const frameWidth = 940;
   const frameHeight = 515;
   const gap = 515;
@@ -39,6 +43,15 @@ export default function SpriteCarRotation({ $imgUrl }: SpriteCarRotationProps) {
     }
   };
 
+  useEffect(() => {
+    const spriteImage = new Image();
+    spriteImage.src = `${$imgUrl}`; // Replace with the actual URL
+
+    spriteImage.onload = () => {
+      onLoad && onLoad();
+    };
+  }, [$imgUrl, onLoad]);
+
   useEffect(() => {
     if (!$imgUrl) return;
     setShowText(true);
@@ -57,7 +70,8 @@ export default function SpriteCarRotation({ $imgUrl }: SpriteCarRotationProps) {
       >
         <UnderBarContainer src={UnderBar} />
         {showText && <Text>360도 돌려보세요!</Text>}
-        <Image
+        <SpriteImage
+          onLoad={onLoad}
           $src={$imgUrl}
           $width={frameWidth * scale}
           $height={frameHeight * scale}
@@ -79,7 +93,7 @@ const Container = styled.div`
 
 const Text = styled.div`
   position: absolute;
-  bottom: 5%;
+  bottom: 10%;
   left: 50%;
   transform: translateX(-50%);
   color: ${(props) => props.theme.colors.NAVYBLUE5};
@@ -90,16 +104,16 @@ const Text = styled.div`
 
 const UnderBarContainer = styled.img`
   position: absolute;
-  bottom: 15%;
+  bottom: 16.66%;
   left: 50%;
   transform: translateX(-50%);
   z-index: -1;
-  width: 60%;
+  width: 70%;
 `;
 
 const ImageContainer = styled.div``;
 
-const Image = styled.div<{
+const SpriteImage = styled.div<{
   $src: string | undefined;
   $width: number;
   $height: number;

diff --git a/FE-MyCarMaster/src/components/common/FormModal/FormModal.tsx b/FE-MyCarMaster/src/components/common/FormModal/FormModal.tsx
@@ -49,6 +49,19 @@ export function FormModal({
     e: React.ChangeEvent<HTMLInputElement>,
     field: keyof FormDatas
   ) => {
+    // if filed is phone, only number and
+    if (field === "phone") {
+      const cleanedValue = e.target.value.replace(/\D/g, "");
+      const formattedValue = cleanedValue.replace(
+        /(\d{3})(\d{4})(\d{4})/,
+        "$1-$2-$3"
+      );
+      setFormDatas({
+        ...formDatas,
+        [field]: formattedValue,
+      });
+      return;
+    }
     setFormDatas({
       ...formDatas,
       [field]: e.target.value,

diff --git a/FE-MyCarMaster/src/hooks/useFetch.ts b/FE-MyCarMaster/src/hooks/useFetch.ts
@@ -25,6 +25,15 @@ function useFetch<T>(
   useEffect(() => {
     async function fetchData() {
       try {
+        const cache = await caches.open("my-car-master-cache");
+        const cacheResponse = await cache.match(url);
+
+        if (cacheResponse) {
+          const cachedData: T = await cacheResponse.json();
+          setData(cachedData);
+          return { data };
+        }
+
         const response = await fetch(url, {
           method: options.method,
           body: options.body ? JSON.stringify(options.body) : undefined,
@@ -37,6 +46,8 @@ function useFetch<T>(
 
         const responseData: T = await response.json();
         setData(responseData);
+
+        cache.add(url);
       } catch (err) {
         setError(err as Error);
       } finally {

diff --git a/FE-MyCarMaster/src/pages/Admin.style.ts b/FE-MyCarMaster/src/pages/Admin.style.ts
@@ -29,6 +29,7 @@ export const AdminLogin = styled(Flex)`
 
 export const AdminLoginTitle = styled(Text)`
   ${(props) => props.theme.fonts.Medium15};
+  margin: 0 4rem;
   text-align: center;
 `;
 
@@ -141,3 +142,12 @@ export const CheckText = styled(Text)<CheckTypeProps>`
     }
   }
 `;
+
+export const LogoImg = styled.img`
+  margin: 0 4rem;
+  width: 20%;
+  min-width: 12rem;
+  max-width: 16rem;
+  z-index: 100;
+  cursor: pointer;
+`;
diff --git a/FE-MyCarMaster/src/pages/Admin.tsx b/FE-MyCarMaster/src/pages/Admin.tsx
@@ -8,12 +8,14 @@ import {
   ModalOverlay,
   AdminContentText,
   CheckText,
+  LogoImg,
 } from "./Admin.style";
 import { Flex } from "@styles/core.style";
 import { Button, Loader } from "@common/index";
 import { useNavigate } from "react-router-dom";
 import { AdminView } from "@layout/index";
 import { get } from "@utils/fetch";
+import dark_logo from "@assets/images/dark_logo.svg";
 
 const STATUS_TEXT = {
   SUCCESS: {
@@ -197,13 +199,14 @@ export default function Admin() {
         <>
           <Flex
             $width="100%"
-            $justifyContent="center"
+            $justifyContent="space-between"
             $alignItems="center"
             $height="3rem"
-            $gap="1rem"
+            $margin="2rem"
           >
+            <LogoImg src={dark_logo} onClick={isGoHomeHandler} />
             <AdminLoginTitle $font={theme.fonts.Medium15}>
-              {email.slice(0, 2)}** 카마스터 관리자 페이지
+              {email.slice(0, 2)}** 카마스터님 환영합니다.
             </AdminLoginTitle>
           </Flex>
           <AdminView clientList={clientList} />

diff --git a/FE-MyCarMaster/src/pages/WrittenQuotation.tsx b/FE-MyCarMaster/src/pages/WrittenQuotation.tsx
@@ -220,7 +220,7 @@ const Container = styled.div`
   @media (max-width: 800px) {
     display: flex;
     flex-direction: column;
-    scale: 0.4;
+    scale: 0.35;
   }
 `;