feat: 온보딩중에 close 아이콘 추가

#269
boostcampwm-2024 · Dec 2, 2024 · 371ef7a · 371ef7a
1 parent 8407e70
commit 371ef7a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git 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
@@ -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,
           }}
         >
+          <button onClick={handleOverlayClose} className={closeButton}>
+            <CloseIcon />
+          </button>
           <div className={IndicatorContainer}>
             {steps.map((_, index) => (
               <div key={index} className={stepIndicator({ active: index === currentStep })} />