[FE-Release] v0.3.1 배포

softeerbootcamp-2nd · Aug 27, 2023 · b6ecd3f · b6ecd3f
2 parents c434421 + 733d384
commit b6ecd3f
Show file tree

Hide file tree

Showing 70 changed files with 1,141 additions and 706 deletions.
diff --git a/FE-MyCarMaster/index.html b/FE-MyCarMaster/index.html
@@ -2,7 +2,7 @@
 <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="/my-car.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>마이 카마스터</title>
   </head>

diff --git a/FE-MyCarMaster/package-lock.json b/FE-MyCarMaster/package-lock.json
diff --git a/FE-MyCarMaster/package.json b/FE-MyCarMaster/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@types/node": "^20.5.1",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",

diff --git a/FE-MyCarMaster/public/my-car.svg b/FE-MyCarMaster/public/my-car.svg
diff --git a/FE-MyCarMaster/public/vite.svg b/FE-MyCarMaster/public/vite.svg
diff --git a/FE-MyCarMaster/src/App.tsx b/FE-MyCarMaster/src/App.tsx
@@ -16,6 +16,7 @@ import {
   Quotation,
   WrittenQuotation,
   ConsultComplete,
+  Admin,
 } from "@pages/index";
 import ErrorBoundary from "./components/common/ErrorBoundary/ErrorBoundary";
 import { useFonts } from "@hooks/useFonts";
@@ -70,6 +71,7 @@ function App() {
                   element={<WrittenQuotation />}
                 />
                 <Route path="/consult-complete" element={<ConsultComplete />} />
+                <Route path="/admin" element={<Admin />} />
               </Routes>
             </Flex>
           </ErrorBoundary>

diff --git a/FE-MyCarMaster/src/assets/icons/Loading.png b/FE-MyCarMaster/src/assets/icons/Loading.png
diff --git a/FE-MyCarMaster/src/assets/icons/Setting.svg b/FE-MyCarMaster/src/assets/icons/Setting.svg
diff --git a/FE-MyCarMaster/src/assets/icons/UnderBar.svg b/FE-MyCarMaster/src/assets/icons/UnderBar.svg
diff --git a/FE-MyCarMaster/src/assets/images/FindCarmasterTooltip.png b/FE-MyCarMaster/src/assets/images/FindCarmasterTooltip.png
diff --git a/FE-MyCarMaster/src/assets/images/OptionCategoryTooltip.png b/FE-MyCarMaster/src/assets/images/OptionCategoryTooltip.png
diff --git a/FE-MyCarMaster/src/assets/images/SearchTrimTooltip.png b/FE-MyCarMaster/src/assets/images/SearchTrimTooltip.png
diff --git a/FE-MyCarMaster/src/assets/images/TryConsiderTooltip.png b/FE-MyCarMaster/src/assets/images/TryConsiderTooltip.png
diff --git a/FE-MyCarMaster/src/components/Admin/AdminView.tsx b/FE-MyCarMaster/src/components/Admin/AdminView.tsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Flex } from "@styles/core.style";
+import theme from "@styles/Theme";
+import {
+  ClientBox,
+  QuotationBox,
+  ClientBoxText,
+  QuotationLookBox,
+  QuotationIFrame,
+  ClientQuotationDetailBox,
+} from "./style";
+
+type ClientType = {
+  id: number;
+  estimateUrl: string;
+  client: {
+    name: string;
+    phone: string;
+    email: string;
+  };
+};
+
+type AdminViewProps = {
+  clientList: ClientType[];
+};
+
+export default function AdminView({ clientList }: AdminViewProps) {
+  const [isQuotationUrl, setIsQuotationUrl] = useState<string | null>(null);
+  const [clientId, setClientId] = useState<number>(0);
+  const handleQuotationUrl = (url: string, id: number) => {
+    setIsQuotationUrl(url);
+    setClientId(id);
+  };
+  return (
+    <QuotationBox>
+      {isQuotationUrl === null && (
+        <Flex
+          $flexDirection="row"
+          $wrap={true}
+          $alignContent="flex-start"
+          $gap="1rem"
+        >
+          {clientList &&
+            clientList.map((client, index) => (
+              <ClientBox
+                key={index}
+                $justifyContent="center"
+                $alignItems="center"
+                onClick={() => handleQuotationUrl(client.estimateUrl, index)}
+              >
+                <Flex $flexDirection="column" $gap="0.5rem">
+                  <ClientBoxText $font={theme.fonts.Medium15}>
+                    이름 : {client.client.name.slice(0, 1)}**
+                  </ClientBoxText>
+                  <ClientBoxText $font={theme.fonts.Regular10}>
+                    전화번호 : {client.client.phone.slice(0, 9)}****
+                  </ClientBoxText>
+                  <ClientBoxText $font={theme.fonts.Regular10}>
+                    이메일 : {client.client.email}
+                  </ClientBoxText>
+                </Flex>
+              </ClientBox>
+            ))}
+        </Flex>
+      )}
+
+      {isQuotationUrl && (
+        <>
+          <ClientQuotationDetailBox
+            $flexDirection="column"
+            $position="absolute"
+          >
+            <ClientBoxText
+              $font={theme.fonts.Medium10}
+              $color={theme.colors.SMOOTH_RED}
+              $isHover={true}
+              onClick={() => setIsQuotationUrl(null)}
+            >
+              돌아가려면 클릭해주세요.
+            </ClientBoxText>
+            <ClientBoxText $font={theme.fonts.Medium15}>
+              이름 : {clientList[clientId].client.name}
+            </ClientBoxText>
+            <ClientBoxText $font={theme.fonts.Regular10}>
+              전화번호 : {clientList[clientId].client.phone}
+            </ClientBoxText>
+            <ClientBoxText $font={theme.fonts.Regular10}>
+              이메일 : {clientList[clientId].client.email}
+            </ClientBoxText>
+          </ClientQuotationDetailBox>
+
+          <QuotationLookBox>
+            {/* client.estimateUrl에 해당하는 견적서를 보여주는 페이지 */}
+            <QuotationIFrame src={isQuotationUrl} title="견적서" />
+          </QuotationLookBox>
+        </>
+      )}
+    </QuotationBox>
+  );
+}
diff --git a/FE-MyCarMaster/src/components/Admin/style.ts b/FE-MyCarMaster/src/components/Admin/style.ts
@@ -0,0 +1,77 @@
+import styled from "styled-components";
+
+import { Flex, Text, TextProps } from "@styles/core.style";
+
+export const QuotationBox = styled(Flex)`
+  width: 100%;
+  height: 100%;
+`;
+export const ClientBox = styled(Flex)`
+  width: 20rem;
+  height: 10rem;
+  background-color: ${(props) => props.theme.colors.WHITE};
+  padding: 2.5rem;
+  margin: 2rem;
+
+  border-radius: 1rem;
+  box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.1);
+  animation: showAdminText 0.1s ease-in-out;
+
+  @keyframes showAdminText {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.3);
+  }
+`;
+
+interface ClientTextProps extends TextProps {
+  $isHover?: boolean | null;
+}
+
+export const ClientBoxText = styled(Text)<ClientTextProps>`
+  text-align: left;
+  width: 100%;
+
+  // underline
+  &:hover {
+    text-decoration: ${(props) => (props.$isHover ? "underline" : "none")};
+    cursor: ${(props) => (props.$isHover ? "pointer" : "default")};
+  }
+`;
+
+export const QuotationLookBox = styled(Flex)`
+  width: 100%;
+  height: 100%;
+`;
+
+export const QuotationIFrame = styled.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 1rem;
+  box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.1);
+`;
+
+export const ClientQuotationDetailBox = styled(Flex)`
+  width: 20rem;
+  height: auto;
+  position: absolute;
+  gap: 1rem;
+  top: 0;
+  left: 0;
+  background-color: ${(props) => props.theme.colors.WHITE};
+  padding: 2.5rem;
+  border-radius: 0 0 2rem 0;
+
+  &:hover {
+    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.3);
+  }
+`;
diff --git a/FE-MyCarMaster/src/components/Footer/FoldScreen.tsx b/FE-MyCarMaster/src/components/Footer/FoldScreen.tsx
@@ -10,6 +10,7 @@ import { useTrimState, useTrimDispatch } from "@contexts/TrimContext";
 import { useQuotationDispatch } from "@contexts/QuotationContext";
 import { SnackBar, Modals } from "@common/index";
 import { ModalType } from "@constants/Modal.constants";
+import SearchTrimTooltip from "@assets/images/SearchTrimTooltip.png";
 
 type FoldScreenProps = {
   text: string;
@@ -118,6 +119,10 @@ export default function FoldScreen({ text, $switch }: FoldScreenProps) {
             ? "원하는 기능을 선택하시면 해당 기능이 포함된 트림을 추천해드려요!"
             : "추가 옵션 선택하러 가기"}
         </Text>
+        <ToolTip
+          src={SearchTrimTooltip}
+          $showTooltip={!isFold && $switch === "searchTrim"}
+        />
 
         {!isFold && $switch === "searchTrim" && <Bar $show={loading} />}
         {$switch === "searchTrim" ? (
@@ -317,3 +322,39 @@ const ButtonContainer = styled.div<{ $style: boolean }>`
     }
   }
 `;
+
+const ToolTip = styled.img<{ $showTooltip: boolean }>`
+  display: ${({ $showTooltip }) => ($showTooltip ? "block" : "none")};
+  position: absolute;
+  top: 60%;
+  right: -15rem;
+  transform: translateY(-50%);
+  width: 15rem;
+  height: auto;
+
+  animation: ${({ $showTooltip }) =>
+    $showTooltip
+      ? "fadeInToolTip 0.5s ease-in-out"
+      : "fadeOutToolTip 0.5s ease-in-out"};
+  @keyframes fadeInToolTip {
+    0% {
+      opacity: 0;
+      right: -15rem;
+    }
+    100% {
+      opacity: 1;
+      right: -15rem;
+    }
+  }
+
+  @keyframes fadeOutToolTip {
+    0% {
+      opacity: 1;
+      right: -15rem;
+    }
+    100% {
+      opacity: 0;
+      right: -15rem;
+    }
+  }
+`;
diff --git a/FE-MyCarMaster/src/components/Footer/screen_view/DefaultOptionScreen.tsx b/FE-MyCarMaster/src/components/Footer/screen_view/DefaultOptionScreen.tsx
@@ -173,7 +173,7 @@ const PageButtonContainer = styled.div`
   width: 80%;
   text-align: center;
   gap: 1rem;
-  ${(props) => props.theme.fonts.Bold20};
+  ${(props) => props.theme.fonts.Medium20};
   color: ${({ theme }) => theme.colors.NAVYBLUE5};
 `;
 

diff --git a/FE-MyCarMaster/src/components/Footer/view/ColorView/ExteriorColorSelectView.tsx b/FE-MyCarMaster/src/components/Footer/view/ColorView/ExteriorColorSelectView.tsx
@@ -27,6 +27,7 @@ export default function InteriorColorSelectView() {
         name: exteriorList[index].name,
         price: exteriorList[index].price,
         imgUrl: exteriorList[index].colorImgUrl,
+        coloredImgUrl: exteriorList[index].coloredImgUrl,
       },
     });
     carPaintDispatch({

diff --git a/FE-MyCarMaster/src/components/Footer/view/OptionSelect.tsx b/FE-MyCarMaster/src/components/Footer/view/OptionSelect.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Tooltip } from "@/styles/core.style";
 import { BlurFlex, OptionFlex, ScrollButton } from "./style";
 import { useOptionDispatch, useOptionState } from "@contexts/OptionContext";
 import { useQuotationState } from "@contexts/QuotationContext";
@@ -8,11 +9,13 @@ import filterOptionCategory from "@utils/Option/filterOptionCategory";
 import { OptionType } from "types/options.types";
 import ArrowRightLong from "@assets/icons/ArrowRightLong.svg";
 import ArrowLeftLong from "@assets/icons/ArrowLeftLong.svg";
+import TryConsiderTooltip from "@assets/images/TryConsiderTooltip.png";
 
 export default function OptionSelect() {
   const { optionList, selectedOption, consideredOption, optionCategoryId } =
     useOptionState();
   const [isTrimCheckOption, setIsTrimCheckOption] = useState<boolean>(false);
+  const [isTooltipOpen, setIsTooltipOpen] = useState<boolean>(true);
   const { optionQuotation } = useQuotationState();
   // const [current, setCurrent] = useState<number>(0);
   const optionDispatch = useOptionDispatch();
@@ -47,6 +50,7 @@ export default function OptionSelect() {
   }, [optionQuotation.selectedQuotation, optionDispatch]);
 
   const changeOptionId = (index: number) => {
+    setIsTooltipOpen(false);
     optionDispatch({
       type: "SET_OPTION_ID",
       payload: {
@@ -99,6 +103,15 @@ export default function OptionSelect() {
             );
           })}
       </OptionFlex>
+      {isTooltipOpen && (
+        <Tooltip
+          $width="30%"
+          $height="auto"
+          $top="80%"
+          $left="0"
+          src={TryConsiderTooltip}
+        />
+      )}
       <ScrollButton
         $direction="left"
         onClick={() => handleScrollButton("left")}