diff --git a/client/src/features/workSpace/components/OnboardingOverlay.style.ts b/client/src/features/workSpace/components/OnboardingOverlay.style.ts index b073e41..acc35e5 100644 --- a/client/src/features/workSpace/components/OnboardingOverlay.style.ts +++ b/client/src/features/workSpace/components/OnboardingOverlay.style.ts @@ -37,7 +37,25 @@ export const tooltipDescription = css({ marginBottom: "4", color: "gray.600", }); - +export const closeButton = css({ + position: "absolute", + top: "2", + right: "2", + borderRadius: "8px", + padding: "1", + color: "gray.500", + transition: "all", + _hover: { + color: "gray.700", + backgroundColor: "gray.100", + }, + "& svg": { + // SVG 스타일 추가 + width: "4", + height: "4", + color: "black", + }, +}); export const IndicatorContainer = css({ display: "flex", gap: "2px" }); export const stepIndicator = cva({ base: { diff --git a/client/src/features/workSpace/components/OnboardingOverlay.tsx b/client/src/features/workSpace/components/OnboardingOverlay.tsx index cc371a4..47c1a12 100644 --- a/client/src/features/workSpace/components/OnboardingOverlay.tsx +++ b/client/src/features/workSpace/components/OnboardingOverlay.tsx @@ -1,5 +1,6 @@ import { motion } from "framer-motion"; import { useState, useEffect } from "react"; +import CloseIcon from "@assets/icons/close.svg?react"; import { overlayContainer, highlightBox, @@ -8,6 +9,7 @@ import { tooltipDescription, stepIndicator, nextButton, + closeButton, IndicatorContainer, } from "./OnboardingOverlay.style"; @@ -85,6 +87,10 @@ export const OnboardingOverlay = ({ isShow }: OnboardingOverlayProps) => { setCurrentStep((prev) => prev - 1); } }; + const handleOverlayClose = () => { + setIsVisible(false); + sessionStorage.setItem("hasCompletedOnboarding", "true"); + }; const getTargetPosition = (selector: string) => { const element = document.querySelector(selector); if (!element) { @@ -161,6 +167,9 @@ export const OnboardingOverlay = ({ isShow }: OnboardingOverlayProps) => { top: tooltipPosition.top, }} > +