From 371ef7a1cba2b6e19798546b8b678245cf8da306 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Mon, 2 Dec 2024 23:13:55 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=A8=EB=B3=B4=EB=94=A9=EC=A4=91?=
 =?UTF-8?q?=EC=97=90=20close=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#269
---
 .../components/OnboardingOverlay.style.ts     | 20 ++++++++++++++++++-
 .../components/OnboardingOverlay.tsx          |  9 +++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

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,
           }}
         >
+          <button onClick={handleOverlayClose} className={closeButton}>
+            <CloseIcon />
+          </button>
           <div className={IndicatorContainer}>
             {steps.map((_, index) => (
               <div key={index} className={stepIndicator({ active: index === currentStep })} />