From 0408b5707af5a745bc166e8f5864e2c9554cb28f Mon Sep 17 00:00:00 2001 From: NYeonK Date: Mon, 14 Aug 2023 23:43:10 +0900 Subject: [PATCH 1/6] [ feat ] add theme new color --- src/style/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/theme.ts b/src/style/theme.ts index 50ec82fd..b81f14ec 100644 --- 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%);", From e85f09fa10e4f73f6e157268f49e039c89343aef Mon Sep 17 00:00:00 2001 From: NYeonK Date: Mon, 14 Aug 2023 23:44:35 +0900 Subject: [PATCH 2/6] [ feat ] add ModalTheme 'COACHMARK' --- src/@components/@common/Modal/index.tsx | 16 +++++++++++++++- src/@components/@common/Modal/style.ts | 22 +++++++++++++++++++++- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/@components/@common/Modal/index.tsx b/src/@components/@common/Modal/index.tsx index f2159e8f..beb3d8bf 100644 --- 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,20 @@ export default function Modal(props: PropsWithChildren) { const { theme = "DEFAULT", closeHandler, closeOpacityClassName, closeBtnClassName, isNoCloseBtn, children } = props; const outClickCloserRef = useOutClickCloser(closeHandler, true); + if (theme === "COACHMARK") + return ( + + + + + + + {children} + + + + ); + if (theme === "GRAY_CENTER") return ( diff --git a/src/@components/@common/Modal/style.ts b/src/@components/@common/Modal/style.ts index 49fec432..c0b77a24 100644 --- 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` From 8785490be6907ee6b275262de895fe018494df36 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Mon, 14 Aug 2023 23:47:08 +0900 Subject: [PATCH 3/6] [ feat ] create coachMark custom hook --- .../CardCollectionPage/hooks/useCoachMark.ts | 21 +++++++++++++++++++ src/@components/CardCollectionPage/index.tsx | 9 ++++---- 2 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 src/@components/CardCollectionPage/hooks/useCoachMark.ts diff --git a/src/@components/CardCollectionPage/hooks/useCoachMark.ts b/src/@components/CardCollectionPage/hooks/useCoachMark.ts new file mode 100644 index 00000000..10ed82d8 --- /dev/null +++ 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 index 997e6500..75de89e0 100644 --- 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 ( {isSliderDown ? :
} - )} - + {isCoachMarkOpen && } {isLoginModalOpen && } {isFilterModalOpen && ( From 1d32ad2ac28076cbfb39ba3d94094caebd8680f3 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Mon, 14 Aug 2023 23:48:40 +0900 Subject: [PATCH 4/6] [ feat ] create CoachMark component --- .../CardCollectionPage/CoachMark/index.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/@components/CardCollectionPage/CoachMark/index.tsx diff --git a/src/@components/CardCollectionPage/CoachMark/index.tsx b/src/@components/CardCollectionPage/CoachMark/index.tsx new file mode 100644 index 00000000..01e823d5 --- /dev/null +++ b/src/@components/CardCollectionPage/CoachMark/index.tsx @@ -0,0 +1,35 @@ +import IcMenuBtn from "../../../asset/icon/IcMenuBtn"; +import IcShareBtn from "../../../asset/icon/IcShareBtn"; +import Modal from "../../@common/Modal"; +import * as St from "./style"; + +interface CoachMarkProps { + closeHandler: () => void; +} + +export default function CoachMark(props: CoachMarkProps) { + const { closeHandler } = props; + + return ( + + + + 새로 생긴 기능들을 +
+ 확인해보세요 + + + + + + + + + + 공유하기 + + + + + ); +} From ec314caacd5189d8ad817a9b7eb4151aa5620df5 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Mon, 14 Aug 2023 23:50:15 +0900 Subject: [PATCH 5/6] [ design ] add style to CoachMark --- .../CardCollectionPage/CoachMark/style.ts | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/@components/CardCollectionPage/CoachMark/style.ts diff --git a/src/@components/CardCollectionPage/CoachMark/style.ts b/src/@components/CardCollectionPage/CoachMark/style.ts new file mode 100644 index 00000000..63527d78 --- /dev/null +++ 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}; +`; From 9f5b41c18a2054ac3ac729a75f732e0ebbe2a62e Mon Sep 17 00:00:00 2001 From: NYeonK Date: Wed, 16 Aug 2023 00:49:51 +0900 Subject: [PATCH 6/6] [ feat ] add coach mark close ref --- src/@components/@common/Modal/index.tsx | 3 --- src/@components/CardCollectionPage/CoachMark/index.tsx | 4 +++- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/@components/@common/Modal/index.tsx b/src/@components/@common/Modal/index.tsx index beb3d8bf..75b2e565 100644 --- a/src/@components/@common/Modal/index.tsx +++ b/src/@components/@common/Modal/index.tsx @@ -24,9 +24,6 @@ export default function Modal(props: PropsWithChildren) { - - - {children} diff --git a/src/@components/CardCollectionPage/CoachMark/index.tsx b/src/@components/CardCollectionPage/CoachMark/index.tsx index 01e823d5..706fedb7 100644 --- a/src/@components/CardCollectionPage/CoachMark/index.tsx +++ b/src/@components/CardCollectionPage/CoachMark/index.tsx @@ -1,5 +1,6 @@ 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"; @@ -9,10 +10,11 @@ interface CoachMarkProps { export default function CoachMark(props: CoachMarkProps) { const { closeHandler } = props; + const outClickCloserRef = useOutClickCloser(closeHandler, true); return ( - + 새로 생긴 기능들을