Merge pull request #112 from Devminjeong-eum/feat/DEV-175

[DEV-175] 퀴즈 결과 페이지 공유 기능 툴팁 UI 추가

Author: uk11

public/sw.js.map

@@ -4,9 +4,7 @@ import Search from '@/components/pages/search';
 
 // eslint-disable-next-line react-refresh/only-export-components
 export async function generateMetadata(
-  {
-    searchParams,
-  }: { searchParams: { keyword: string } },
+  { searchParams }: { searchParams: { keyword: string } },
   parent: ResolvingMetadata,
 ) {
   const parentMetadata = (await parent) || [];
@@ -47,11 +45,11 @@ export default async function SearchPage({ searchParams }: Props) {
   const word = decodeURI(searchParams.keyword);
 
   return (
-    <>
+    <div className="h-full bg-[#FBFCFE]">
       <Header />
       <main className="rounded-[24px] bg-[#FBFCFE] -mt-[20px] z-50 flex flex-col gap-[8px]">
         <Search word={word} />
       </main>
-    </>
+    </div>
   );
 }

src/app/word/search/page.tsx

@@ -31,19 +31,19 @@ export default function Header() {
   return (
     <>
       <div className="bg-main-gradient-top h-[48px] flex items-center p-6 justify-between border-none">
-        <div className="flex-1">
-          <Link href={WORD_LIST_PATH}>
-            <LogoTextSvg />
+        <Link href={WORD_LIST_PATH}>
+          <LogoTextSvg />
+        </Link>
+        <div className="flex gap-[14px]">
+          <Link href={QUIZ_PATH}>
+            <QuizButton />
+          </Link>
+          <Link href={PROFILE_PATH}>
+            <div className="pt-[2px]">
+              <MypageIconSvg />
+            </div>
           </Link>
         </div>
-        <Link href={QUIZ_PATH}>
-          <QuizButton />
-        </Link>
-        <Link href={PROFILE_PATH}>
-          <div className="text-[#A8B8FF]">
-            <MypageIconSvg />
-          </div>
-        </Link>
       </div>
       <SearchBar />
       {!isScrolled && <DynamicToolTip isOpen={isOpen} setIsOpen={setIsOpen} />}

src/components/layout/Header.tsx

@@ -157,7 +157,8 @@ export default function SearchBar() {
       <div
         className={clsx(
           'relative rounded-[16px] z-[60]',
-          isDropdownOpen && 'bg-white ring-[1px] ring-[#4357DB] drop-shadow',
+          isDropdownOpen &&
+            'bg-white ring-[1px] ring-[#4357DB] drop-shadow overflow-hidden',
         )}
         ref={searchBarRef}
       >

src/components/layout/SearchBar.tsx

@@ -1,7 +1,7 @@
 export default function QuizButton() {
   return (
     <>
-      <button className="relative text-white w-[57px] h-[28px] bg-[#354BD2] ring-1 ring-[#5368EB] flex items-center justify-center rounded-[8px] mr-[14px]">
+      <button className="relative text-white w-[57px] h-[28px] bg-[#354BD2] ring-1 ring-[#5368EB] flex items-center justify-center rounded-[8px]">
         <svg
           width="34"
           height="13"

src/components/pages/home/QuizButton.tsx

@@ -12,9 +12,11 @@ import {
 import { useRouter } from 'next/navigation';
 import ShareButtonSvg from '@/components/svg-component/ShareButtonSvg.tsx';
 import useAuthQuery from '@/hooks/query/useAuthQuery.ts';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import LoginAlertModal from '@/components/common/LoginAlertModal.tsx';
 import Link from 'next/link';
+import QuizShareTooltip from './QuizShareTooltip';
+import useScroll from '@/hooks/useScroll';
 
 type Props = {
   quizResultId: string;
@@ -36,6 +38,17 @@ export default function QuizResult({
   const [isOpenModal, setIsOpenModal] = useState(false);
   const isLoggedIn = !data?.error ?? false;
   const isGuest = quizResultId === 'guest';
+  const isScrolled = useScroll();
+  const [isOpen, setIsOpen] = useState(
+    () =>
+      typeof window !== 'undefined' &&
+      sessionStorage.getItem('isQuizShareOpen') !== 'false',
+  );
+
+  useEffect(() => {
+    if (sessionStorage.getItem('isQuizShareOpen')) setIsOpen(false);
+    if (!isOpen) sessionStorage.setItem('isQuizShareOpen', 'false');
+  }, [isOpen]);
 
   const handleNeedLogin = () => {
     setIsOpenModal(true);
@@ -87,6 +100,9 @@ export default function QuizResult({
         </button>
       </Link>
       <LoginAlertModal isOpen={isOpenModal} />
+      {!isScrolled && (
+        <QuizShareTooltip isOpen={isOpen} setIsOpen={setIsOpen} />
+      )}
     </div>
   );
 }