[#218] Coach mark

src/app/(home)/_components/SearchBar.tsx

@@ -81,7 +81,7 @@ const SearchBar = () => {
           onFocus={() => setShow(true)}
           onChange={handleKeywordChange}
           placeholder="동명(읍, 면)으로 검색(ex. 서초동)."
-          className="h-10 w-full rounded-[30px] text-sm focus:outline-none"
+          className="z-50 h-10 w-full rounded-[30px] text-sm focus:outline-none"
         />
       </div>
       {show && (

src/app/(home)/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import useMGCTotalList from '@/apis/mgcList/useMGCTotalList';
 import useSearchValueStore from '@/store/useSearchValueStore';
 import { MGCSummary } from '@/types/MGCList';
+import Image from 'next/image';
 import GeocoderProvider from '../_components/Map/GeocoderProvider';
 import MapProvider from '../_components/Map/MapProvider';
 import HomeMapContent from './_components/HomeMapContent';
@@ -13,7 +14,7 @@ import HomeMapViewer from './_components/HomeMapViewer';
 const Home = () => {
   const [MGCDataList, setMGCDataList] = useState<MGCSummary[]>([]);
   const [open, setOpen] = useState(false);
-
+  const [coached, setCoached] = useState(true);
   const mapRef = useRef<HTMLDivElement>(null);
 
   const { searchValue } = useSearchValueStore();
@@ -41,6 +42,9 @@ const Home = () => {
           console.error('Service Worker registration failed:', error);
         });
     }
+    if (!sessionStorage.getItem('coach')) {
+      setCoached(false);
+    }
   }, []);
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
@@ -61,6 +65,11 @@ const Home = () => {
     handleMouseUp();
   };
 
+  const handleCoach = () => {
+    sessionStorage.setItem('coach', 'true');
+    setCoached(true);
+  };
+
   return (
     <div className="relative -left-20pxr w-[100vw]">
       <MapProvider
@@ -73,6 +82,16 @@ const Home = () => {
             handleMarkerClick={handleMarkerClick}
             openBottomSheetAndUpdate={openBottomSheetAndUpdate}
           />
+          {!coached && (
+            <Image
+              onClick={handleCoach}
+              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center"
+              alt="coach_mark"
+              src={'/coach.png'}
+              width={400}
+              height={400}
+            />
+          )}
           <HomeMapViewer
             ref={mapRef}
             timerRef={timerRef}

src/app/_components/CreateBtn.tsx

@@ -70,7 +70,6 @@ const CreateBtn = () => {
         </PopoverTrigger>
         {token && (
           <PopoverContent className="w-auto border-0 bg-transparent p-10pxr text-sm shadow-none">
-            {/* TODO: 추후 디자인 논의 후 변경 [24/02/12] */}
             <div className="flex flex-col gap-2 text-right">
               <Button
                 className="cursor-pointer"

src/app/_components/MapCustomControl.tsx

@@ -27,7 +27,7 @@ const MapCustomControl = ({ topGap }: { topGap: 'large' | 'small' }) => {
   };
 
   return (
-    <div className={`${topVariants[topGap]} absolute right-10pxr top-10pxr z-10 rounded shadow-md`}>
+    <div className={`${topVariants[topGap]} absolute right-10pxr top-10pxr z-50 rounded shadow-md`}>
       <button
         onClick={zoomIn}
         className="flex h-32pxr w-32pxr items-center justify-center rounded-t-[3px] border-b border-solid border-gray-300 bg-white"

src/app/_components/SearchBarFilter/CategorySelectBtnGroup.tsx

@@ -75,7 +75,7 @@ const CategorySelectBtnGroup = ({
       onMouseMove={throttle(handleDragMove, 100)}
       onMouseUp={handleDragEnd}
       onMouseLeave={handleDragEnd}
-      className="flex flex-row justify-start gap-10pxr overflow-x-scroll whitespace-nowrap py-8pxr scrollbar-hide"
+      className="z-50 flex flex-row justify-start gap-10pxr overflow-x-scroll whitespace-nowrap py-8pxr scrollbar-hide"
     >
       {isSubmit ? (
         <button

src/app/_components/filter/Filter.tsx

@@ -29,7 +29,7 @@ const Filter = () => {
             className="p-0 hover:no-underline"
             aria-label="accordion trigger"
           >
-            <div className="flex w-full flex-row justify-between gap-1.5">
+            <div className="z-50 flex w-full flex-row justify-between gap-1.5">
               <span>모각코 종류</span>
               <span>개발 언어</span>
               <span>공부 분야</span>