Merge pull request #319 from TeamPiickle/feat/#317-coach_mark

Feat/#317 coach mark
TeamPiickle · Aug 15, 2023 · d11f703 · d11f703
2 parents 4191f36 + 9f5b41c
commit d11f703
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 6 deletions.
diff --git a/src/@components/@common/Modal/index.tsx b/src/@components/@common/Modal/index.tsx
@@ -5,7 +5,7 @@ import useOutClickCloser from "../hooks/useOutClickCloser";
 import ModalPortal from "./Portal";
 import * as St from "./style";
 
-type ModalTheme = "DEFAULT" | "WHITE_BOTTOM" | "GRAY_CENTER" | "GRAY_BOTTOM";
+type ModalTheme = "DEFAULT" | "WHITE_BOTTOM" | "GRAY_CENTER" | "GRAY_BOTTOM" | "COACHMARK";
 
 interface ModalContents {
   theme?: ModalTheme;
@@ -19,6 +19,17 @@ export default function Modal(props: PropsWithChildren<ModalContents>) {
   const { theme = "DEFAULT", closeHandler, closeOpacityClassName, closeBtnClassName, isNoCloseBtn, children } = props;
   const outClickCloserRef = useOutClickCloser(closeHandler, true);
 
+  if (theme === "COACHMARK")
+    return (
+      <ModalPortal>
+        <St.CoachMarkRoot>
+          <St.CoachMarkModal ref={outClickCloserRef}>
+            <St.ModalContents>{children}</St.ModalContents>
+          </St.CoachMarkModal>
+        </St.CoachMarkRoot>
+      </ModalPortal>
+    );
+
   if (theme === "GRAY_CENTER")
     return (
       <ModalPortal>

diff --git a/src/@components/@common/Modal/style.ts b/src/@components/@common/Modal/style.ts
@@ -15,7 +15,6 @@ export const Root = styled.div`
 
   z-index: 10;
 
-  background-color: rgb(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
 `;
@@ -29,8 +28,17 @@ export const fadeOut = keyframes`
   }
 `;
 
+export const CoachMarkRoot = styled(Root)`
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill;
+
+  background-color: ${({ theme }) => theme.newColors.blackblur};
+`;
+
 export const GrayRoot = styled(Root)`
   animation: ${fadeOut} 0.8s ease-in-out;
+  background-color: ${({ theme }) => theme.newColors.black50};
 `;
 
 export const WhiteRoot = styled(Root)`
@@ -41,6 +49,8 @@ export const WhiteRoot = styled(Root)`
   min-height: -webkit-fill-available;
 
   animation: ${fadeOut} 0.8s ease-in-out;
+
+  background-color: ${({ theme }) => theme.newColors.black50};
 `;
 
 export const DefaultRoot = styled(Root)`
@@ -50,6 +60,8 @@ export const DefaultRoot = styled(Root)`
   height: calc(var(--vh, 1vh) * 100);
   min-height: -webkit-fill-available;
   padding: 1.6rem;
+
+  background-color: ${({ theme }) => theme.newColors.black50};
 `;
 
 export const bottomUp = keyframes`
@@ -70,6 +82,14 @@ const CenterModal = styled.section`
   transform: translateY(-50%);
 `;
 
+export const CoachMarkModal = styled(CenterModal)`
+  width: 100%;
+  ${({ theme }) => theme.media.desktop`
+    width: 36rem;
+  `};
+  height: 100%;
+`;
+
 export const GrayCenterModal = styled(CenterModal)`
   width: 100%;
   ${({ theme }) => theme.media.desktop`

diff --git a/src/@components/CardCollectionPage/CoachMark/index.tsx b/src/@components/CardCollectionPage/CoachMark/index.tsx
@@ -0,0 +1,37 @@
+import IcMenuBtn from "../../../asset/icon/IcMenuBtn";
+import IcShareBtn from "../../../asset/icon/IcShareBtn";
+import useOutClickCloser from "../../@common/hooks/useOutClickCloser";
+import Modal from "../../@common/Modal";
+import * as St from "./style";
+
+interface CoachMarkProps {
+  closeHandler: () => void;
+}
+
+export default function CoachMark(props: CoachMarkProps) {
+  const { closeHandler } = props;
+  const outClickCloserRef = useOutClickCloser(closeHandler, true);
+
+  return (
+    <Modal theme={"COACHMARK"} closeHandler={closeHandler}>
+      <St.Container ref={outClickCloserRef}>
+        <St.Contents>
+          새로 생긴 기능들을
+          <br />
+          확인해보세요
+        </St.Contents>
+        <St.ImageWrapper>
+          <St.ButtonWrapper>
+            <IcMenuBtn isLighted={true} />
+          </St.ButtonWrapper>
+          <St.ButtonWrapper>
+            <St.IconWrapper>
+              <IcShareBtn isLighted={true} />
+            </St.IconWrapper>
+            <St.ButtonLabel>공유하기</St.ButtonLabel>
+          </St.ButtonWrapper>
+        </St.ImageWrapper>
+      </St.Container>
+    </Modal>
+  );
+}
diff --git a/src/@components/CardCollectionPage/CoachMark/style.ts b/src/@components/CardCollectionPage/CoachMark/style.ts
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const Container = styled.section`
+  position: absolute;
+  right: 0;
+
+  margin-top: 5.2rem;
+  height: calc((100% + 3.3rem) * 0.77);
+  padding-bottom: 10.5rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+
+export const Contents = styled.p`
+  text-align: right;
+  padding-right: 1.6rem;
+  margin-bottom: 2.5rem;
+
+  ${({ theme }) => theme.newFonts.caption1}
+  color: ${({ theme }) => theme.newColors.white};
+`;
+
+export const ImageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 2.1rem;
+
+  gap: 2.4rem;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 4.1rem;
+`;
+
+export const IconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 4rem;
+  height: 4rem;
+`;
+
+export const ButtonLabel = styled.p`
+  margin-top: 0.6rem;
+
+  ${({ theme }) => theme.newFonts.caption1};
+  color: ${({ theme }) => theme.newColors.white};
+`;
diff --git a/src/@components/CardCollectionPage/hooks/useCoachMark.ts b/src/@components/CardCollectionPage/hooks/useCoachMark.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+const COACH_MARK_SESSION_KEY = "coach-mark-shown";
+
+export default function useCoachMark() {
+  const [isOpened, setIsOpened] = useState(false);
+
+  useEffect(() => {
+    const isCoachMarkShown = localStorage.getItem(COACH_MARK_SESSION_KEY);
+    if (!isCoachMarkShown || isOpened) {
+      setIsOpened(true);
+      localStorage.setItem(COACH_MARK_SESSION_KEY, "true");
+    }
+  }, []);
+
+  const handleCloseCoachMark = () => {
+    setIsOpened(false);
+  };
+
+  return { isOpened, handleCloseCoachMark };
+}
diff --git a/src/@components/CardCollectionPage/index.tsx b/src/@components/CardCollectionPage/index.tsx
@@ -10,12 +10,12 @@ import useModal from "../@common/hooks/useModal";
 import useScroll from "../@common/hooks/useScrollToTop";
 import LoginModal from "../@common/LoginModal";
 import SuspenseBoundary from "../@common/SuspenseBoundary";
-import useToast from "../@common/Toast/hooks/useToast";
-import Toast from "../@common/Toast/ToastProvider";
 import MenuModal from "./Card/MenuModal";
 import CardSlider from "./CardSlider";
+import CoachMark from "./CoachMark";
 import FilterModal from "./FilterModal";
 import { useCardLists } from "./hooks/useCardLists";
+import useCoachMark from "./hooks/useCoachMark";
 import useCTAFilter from "./hooks/useCTAFilter";
 import * as St from "./style";
 
@@ -39,12 +39,13 @@ function CardCollectionContent() {
   const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal();
   const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal();
 
+  const { isOpened: isCoachMarkOpen, handleCloseCoachMark: toggleCoachMark } = useCoachMark();
+
   const isSliderDown = useRecoilValue(isSliderDownState);
 
   return (
     <St.MainPage>
       {isSliderDown ? <HeaderMinVer /> : <Header />}
-
       <CardSlider
         toggleMenuModal={toggleMenuModal}
         openLoginModalHandler={toggleLoginModal}
@@ -61,7 +62,7 @@ function CardCollectionContent() {
           필터 설정하기
         </HeadlessCTAButton>
       )}
-
+      {isCoachMarkOpen && <CoachMark closeHandler={toggleCoachMark} />}
       {isLoginModalOpen && <LoginModal closeHandler={toggleLoginModal} contents={"북마크 기능인 마이피클을"} />}
       {isFilterModalOpen && (
         <FilterModal closeHandler={toggleFilterModal} fetchCardListsWithFilter={fetchCardListsWithFilter} />

diff --git a/src/style/theme.ts b/src/style/theme.ts
@@ -50,6 +50,7 @@ const newColors = {
   white: "#FFFFFF",
   black: "#000000",
   black50: "rgba(0, 0, 0, 0.5)",
+  blackblur: "rgba(0, 0, 0, 0.60)",
   kakaoyellow: "#FEE500",
   navergreen: "#03C75A",
   gradation: "linear-gradient(180deg, #DBFFF1 0%, #FFFFEB 100%);",