Merge pull request #78 from softeerbootcamp4th/feat/CLAP-139

feat(CLAP-139): 내 아반떼N 공유 페이지 구현
softeerbootcamp4th · Aug 14, 2024 · 72021e5 · 72021e5
2 parents 40a2fd2 + 6955cc0
commit 72021e5
Show file tree

Hide file tree

Showing 26 changed files with 429 additions and 25 deletions.
diff --git a/packages/service/src/App.tsx b/packages/service/src/App.tsx
@@ -9,8 +9,8 @@ import { ErrorBoundary } from "react-error-boundary";
 export const App = () => {
   return (
     <div>
-      <GlobalNavigationBar />
       <ErrorBoundary FallbackComponent={Error}>
+        <GlobalNavigationBar />
         <Suspense fallback={<Loading />}>
           <Outlet />
         </Suspense>

diff --git a/packages/service/src/apis/partsEvent/apiGetSharedParts.ts b/packages/service/src/apis/partsEvent/apiGetSharedParts.ts
@@ -0,0 +1,8 @@
+import { IMyParts } from "@watermelon-clap/core/src/types";
+import { customFetch } from "@watermelon-clap/core/src/utils";
+
+export const apiGetSharedParts = (link_key?: string): Promise<IMyParts[]> => {
+  return customFetch(
+    `${import.meta.env.VITE_BACK_BASE_URL}/event/parts/link/${link_key}`,
+  ).then((res) => res.json());
+};
diff --git a/packages/service/src/common/components/Button/Button.css.ts b/packages/service/src/common/components/Button/Button.css.ts
@@ -4,7 +4,7 @@ import { theme } from "@watermelon-clap/core/src/theme";
 export const longButtonStyle = css`
   ${theme.flex.center}
   ${theme.font.preM20}
-  background: ${theme.color.black};
+  background: ${theme.color.eventBlue};
   color: ${theme.color.white};
   width: 360px;
   height: 70px;
@@ -15,11 +15,10 @@ export const longButtonStyle = css`
   border: none;
 
   &:hover {
-    opacity: 0.8;
+    opacity: 0.9;
   }
   &:active {
-    background: ${theme.color.black};
-    color: ${theme.color.gray400};
+    background: ${theme.color.eventSkyblue};
   }
 `;
 

diff --git a/packages/service/src/common/components/GlobalNavigationBar/GlobalNavigationBar.tsx b/packages/service/src/common/components/GlobalNavigationBar/GlobalNavigationBar.tsx
@@ -7,9 +7,11 @@ import { useState } from "react";
 import { MenuButton } from "./MenuButton";
 import { useMobile } from "@service/common/hooks/useMobile";
 import { GNB_BREAKPOINT } from "@service/constants/breakpoints";
+import { useErrorBoundary } from "react-error-boundary";
 
 export const GlobalNavigationBar = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const { resetBoundary } = useErrorBoundary();
 
   // 800px보다 작아지면 햄버거 메뉴 생성
   const isMobile = useMobile(GNB_BREAKPOINT);
@@ -21,6 +23,7 @@ export const GlobalNavigationBar = () => {
         css={logoStyles}
         onClick={() => {
           navigate(MAIN_PAGE_ROUTE);
+          resetBoundary();
         }}
       />
 

diff --git a/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.css.ts b/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.css.ts
@@ -43,6 +43,7 @@ export const linkStyles = css`
   display: inline-flex;
   gap: 4px;
   flex-shrink: 0;
+  cursor: pointer;
 
   &:hover {
     transform: translateY(-1px);

diff --git a/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.tsx b/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.tsx
@@ -1,6 +1,7 @@
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { ReactComponent as NLogo } from "public/images/gnb/n-logo.svg";
 import { linkStyles, navsContainerStyles, nLogoStyles } from "./GlobalNavs.css";
+import { useErrorBoundary } from "react-error-boundary";
 import {
   NEW_CAR_PAGE_ROUTE,
   PICK_EVENT_PAGE_ROUTE,
@@ -9,23 +10,43 @@ import {
 } from "@service/constants/routes";
 
 const GlobalNavs = ({ isOpen }: { isOpen: boolean }) => {
+  const navigate = useNavigate();
+  const { resetBoundary } = useErrorBoundary();
+
+  const handleNavigation = (route: string) => {
+    navigate(route);
+    resetBoundary();
+  };
+
   return (
     <div css={navsContainerStyles(isOpen)}>
-      <Link to={NEW_CAR_PAGE_ROUTE} css={linkStyles}>
+      <div
+        css={linkStyles}
+        onClick={() => handleNavigation(NEW_CAR_PAGE_ROUTE)}
+      >
         아반떼 N
-      </Link>
-      <Link to={PICK_EVENT_PAGE_ROUTE} css={linkStyles}>
+      </div>
+      <div
+        css={linkStyles}
+        onClick={() => handleNavigation(PICK_EVENT_PAGE_ROUTE)}
+      >
         내 아반떼 N 뽑기
-      </Link>
-      <Link to={N_QUIZ_EVENT_PAGE_ROUTE} css={linkStyles}>
+      </div>
+      <div
+        css={linkStyles}
+        onClick={() => handleNavigation(N_QUIZ_EVENT_PAGE_ROUTE)}
+      >
         <NLogo css={nLogoStyles} /> 퀴즈
-      </Link>
-      <Link to={PARTS_COLLECTION_PAGE_ROUTE} css={linkStyles}>
+      </div>
+      <div
+        css={linkStyles}
+        onClick={() => handleNavigation(PARTS_COLLECTION_PAGE_ROUTE)}
+      >
         내 컬렉션
-      </Link>
-      <Link to="#" css={linkStyles}>
+      </div>
+      <div css={linkStyles} onClick={() => handleNavigation("#")}>
         응모 내역 확인
-      </Link>
+      </div>
     </div>
   );
 };

diff --git a/packages/service/src/components/partsCollection/CustomCard/CustomCard.css.ts b/packages/service/src/components/partsCollection/CustomCard/CustomCard.css.ts
@@ -20,6 +20,8 @@ export const bgImg = css`
   top: 0;
   left: 0;
   z-index: 1;
+  border-radius: 20px;
+  height: 100%;
 
   ${mobile(css`
     width: 400px;

diff --git a/packages/service/src/components/partsCollection/CustomCard/CustomCard.tsx b/packages/service/src/components/partsCollection/CustomCard/CustomCard.tsx
@@ -17,7 +17,7 @@ export const CustomCard = ({
     <div css={style.card}>
       <img css={style.carImg} src="images/partsCollection/defaultCar.svg" />
 
-      <img css={style.bgImg} src={bgImg} />
+      {bgImg && <img css={style.bgImg} src={bgImg} />}
       <img css={style.spoilerImg} src={spoilerImg} />
       <img css={style.wheelImg} src={wheelImg} />
       <img css={style.colorImg} src={colorImg} />

diff --git a/packages/service/src/components/share/CustomCard/CustomCard.css.ts b/packages/service/src/components/share/CustomCard/CustomCard.css.ts
@@ -0,0 +1,86 @@
+import { css } from "@emotion/react";
+import { mobile } from "@service/common/responsive/responsive";
+
+export const card = css`
+  width: 700px;
+  aspect-ratio: 16 / 9;
+  border-radius: 20px;
+  background-color: white;
+  margin: 0 auto;
+  position: relative;
+
+  ${mobile(css`
+    width: 400px;
+  `)}
+`;
+
+export const bgImg = css`
+  position: absolute;
+  width: 700px;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  border-radius: 20px;
+  height: 100%;
+
+  ${mobile(css`
+    width: 400px;
+  `)}
+`;
+
+export const carImg = css`
+  width: 700px;
+  z-index: 2;
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  ${mobile(css`
+    width: 450px;
+  `)}
+`;
+
+export const colorImg = css`
+  width: 700px;
+  z-index: 2;
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  ${mobile(css`
+    width: 450px;
+  `)}
+`;
+
+export const wheelImg = css`
+  z-index: 3;
+
+  position: absolute;
+  width: 245px;
+  bottom: 95px;
+  left: 305px;
+
+  ${mobile(css`
+    bottom: 45px;
+    left: 170px;
+    width: 161px;
+  `)}
+`;
+
+export const spoilerImg = css`
+  z-index: 3;
+  position: absolute;
+  width: 50px;
+  top: 144px;
+  right: 118px;
+
+  ${mobile(css`
+    width: 30px;
+    top: 78px;
+    right: 53px;
+  `)}
+`;
diff --git a/packages/service/src/components/share/CustomCard/CustomCard.tsx b/packages/service/src/components/share/CustomCard/CustomCard.tsx
@@ -0,0 +1,26 @@
+import * as style from "./CustomCard.css";
+
+export interface ICustomCardProps {
+  bgImg?: string;
+  spoilerImg?: string;
+  wheelImg?: string;
+  colorImg?: string;
+}
+
+export const CustomCard = ({
+  bgImg,
+  spoilerImg,
+  wheelImg,
+  colorImg,
+}: ICustomCardProps) => {
+  return (
+    <div css={style.card}>
+      <img css={style.carImg} src="/images/partsCollection/defaultCar.svg" />
+
+      {bgImg && <img css={style.bgImg} src={bgImg} />}
+      <img css={style.spoilerImg} src={spoilerImg} />
+      <img css={style.wheelImg} src={wheelImg} />
+      <img css={style.colorImg} src={colorImg} />
+    </div>
+  );
+};
diff --git a/packages/service/src/components/share/CustomCard/index.ts b/packages/service/src/components/share/CustomCard/index.ts
@@ -0,0 +1 @@
+export { CustomCard } from "./CustomCard";
diff --git a/packages/service/src/components/share/PartsTab/PartsCard/PartsCard.css.ts b/packages/service/src/components/share/PartsTab/PartsCard/PartsCard.css.ts
@@ -0,0 +1,37 @@
+import { css } from "@emotion/react";
+import { mobile } from "@service/common/responsive/responsive";
+import { theme } from "@watermelon-clap/core/src/theme";
+
+export const container = css`
+  ${theme.flex.column}
+  width : 20%;
+  flex-shrink: 1;
+
+  ${mobile(css`
+    width: 30%;
+    margin: 0 4%;
+  `)}
+`;
+
+export const card = css`
+  border-radius: 20px;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  position: relative;
+  background-color: ${theme.color.white};
+  ${theme.flex.center};
+`;
+
+export const img = (cate: string) => css`
+  width: 100%;
+  width: ${cate === "REAR" && "80%"};
+  ${cate === "DRIVE_MODE" &&
+  "height : 80%; width : 80%; border-radius : 10px; object-fit : cover"};
+`;
+
+export const name = css`
+  ${theme.font.preB};
+  font-size: clamp(0px, calc(10px + 1vw), 24px);
+  color: ${theme.color.white};
+  margin-top: 20px;
+`;
diff --git a/packages/service/src/components/share/PartsTab/PartsCard/PartsCard.tsx b/packages/service/src/components/share/PartsTab/PartsCard/PartsCard.tsx
@@ -0,0 +1,20 @@
+import * as style from "./PartsCard.css";
+import { IParts } from "@watermelon-clap/core/src/types";
+
+interface IPartsCardProps {
+  partsData: IParts;
+}
+
+export const PartsCard = ({ partsData }: IPartsCardProps) => {
+  return (
+    <div css={style.container}>
+      <div css={style.card}>
+        <img
+          src={partsData.thumbnailImgSrc}
+          css={style.img(partsData.category)}
+        />
+      </div>
+      <span css={style.name}>{partsData.name}</span>
+    </div>
+  );
+};
diff --git a/packages/service/src/components/share/PartsTab/PartsCard/index.ts b/packages/service/src/components/share/PartsTab/PartsCard/index.ts
@@ -0,0 +1 @@
+export { PartsCard } from "./PartsCard";
diff --git a/packages/service/src/components/share/PartsTab/PartsWrap.css.ts b/packages/service/src/components/share/PartsTab/PartsWrap.css.ts
@@ -0,0 +1,54 @@
+import { css } from "@emotion/react";
+import { mobile } from "@service/common/responsive/responsive";
+import { theme } from "@watermelon-clap/core/src/theme";
+
+export const container = css`
+  ${theme.flex.column}
+  margin: 0 auto;
+`;
+export const tabWrap = css`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  margin-top: 80px;
+  width: 700px;
+
+  ${mobile(css`
+    width: 100%;
+    flex-wrap: wrap;
+
+    justify-content: space-around;
+  `)}
+`;
+
+export const tabBtn = (isSelected: boolean) => css`
+  border: ${isSelected ? `2px solid ${theme.color.white}` : `none`};
+  ${theme.font.preB};
+  font-size: 20px;
+  border-radius: 100px;
+  width: 130px;
+  height: 48px;
+
+  cursor: pointer;
+  background: none;
+  color: ${isSelected ? theme.color.white : theme.color.gray300};
+  outline: none;
+
+  ${mobile(css`
+    margin: 10px 8%;
+  `)}
+`;
+
+export const partsCardWrap = css`
+  ${theme.flex.between}
+  gap: 80px 20px;
+  flex-wrap: wrap;
+  width: 90%;
+  max-width: 1000px;
+  margin-top: 100px;
+
+  ${mobile(css`
+    justify-content: center;
+    gap: 20px;
+  `)}
+`;