diff --git a/.gitignore b/.gitignore
index 7037a53..10a301f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,4 +45,6 @@ yarn-error.log*
 .gemini/
 
 .cursorrules
-.gitmessage.txt
\ No newline at end of file
+.gitmessage.txt
+
+temp/
diff --git a/GEMINI.md b/GEMINI.md
new file mode 100644
index 0000000..77f90e1
--- /dev/null
+++ b/GEMINI.md
@@ -0,0 +1,45 @@
+# SingCode Project Context
+
+## Project Overview
+
+SingCode is a Karaoke number search service built as a Monorepo. It aggregates song data from various sources and provides a web interface for users to search and manage songs.
+
+## Tech Stack (Global)
+
+- **Monorepo Manager:** TurboRepo
+- **Package Manager:** pnpm (@9.0.0)
+- **Language:** TypeScript (v5.8.2)
+- **Core Framework:** React 19
+- **Engines:** Node.js >= 18
+
+## Project Structure
+
+The project follows a standard pnpm workspace structure:
+
+- **`apps/web/`**: The main user-facing web application (Next.js).
+- **`packages/`**: Shared libraries and configurations.
+  - **`crawling/`**: Scripts and logic for crawling song data (DB input).
+  - **`open-api/`**: Internal API module for providing karaoke numbers (Domestic songs).
+  - **`query/`**: Shared TanStack Query hooks and configurations.
+  - **`ui/`**: Shared UI components (Design System).
+  - **`eslint-config/`**: Shared ESLint configurations.
+  - **`typescript-config/`**: Shared `tsconfig` bases.
+
+## Development Workflow (TurboRepo)
+
+Use the following commands from the root directory:
+
+- **`pnpm dev`**: Starts the development server for all apps (runs `turbo run dev`).
+- **`pnpm dev-web`**: Starts only the web application (`turbo run dev --filter=web`).
+- **`pnpm build`**: Builds all apps and packages.
+- **`pnpm lint`**: Runs linting across the workspace.
+- **`pnpm format`**: Formats code using Prettier.
+- **`pnpm check-types`**: Runs TypeScript type checking.
+
+## Key Conventions
+
+1. **Workspace Dependencies**: Packages utilize `workspace:*` to reference internal packages (e.g., `@repo/ui`).
+2. **React 19**: All applications and UI packages are compatible with React 19.
+3. **Strict Typing**: All code must be strictly typed via TypeScript.
+
+Context is in English, but please answer in Korean.
diff --git a/README.md b/README.md
index e131981..c990528 100644
--- a/README.md
+++ b/README.md
@@ -171,6 +171,8 @@ sing-code/
 - 2025.6.17 : github action schedule 활용하여 매일마다 TJ 최신곡을 DB에 업데이트하는 프로세스 구축
 - 2025.6.18 : 버전 1.6.0 배포. 회원탈퇴 기능 추가. mac 환경 이슈 해결.
 - 2025.10.26 : 버전 1.8.0 배포. 최근곡 기능 추가. 비동기 요청 포기, isPending으로 제어
+- 2026.1.4 : 버전 1.9.0 배포. OPENAI 활용 챗봇 기능 추가.
+- 2026.1.27 : 버전 2.0.0 배포. DB 재설계 및 로직 리펙토링. 출석 체크, 유저 별 포인트, 곡 추천 기능 추가.
   
 ## 📝 회고
 
diff --git a/apps/web/GEMINI.md b/apps/web/GEMINI.md
new file mode 100644
index 0000000..7919e9b
--- /dev/null
+++ b/apps/web/GEMINI.md
@@ -0,0 +1,40 @@
+# Web Application Context (`apps/web`)
+
+## Overview
+
+This is the main Next.js web application for SingCode. It serves as the frontend client for searching songs, viewing lyrics, and user interaction.
+
+## Tech Stack
+
+- **Framework:** Next.js 15.2.7 (App Router)
+- **Language:** TypeScript
+- **Styling:** Tailwind CSS v4, `tailwind-merge`, `clsx`, `class-variance-authority` (CVA).
+- **UI Components:** Radix UI Primitives, Lucide React (Icons).
+- **State Management:**
+  - **Server State:** TanStack Query (`@repo/query`, v5).
+  - **Client Global State:** Zustand.
+  - **Local State:** React Hooks (`useState`, `useReducer`).
+- **Backend & Auth:** Supabase (Auth, DB, SSR).
+- **Animations:** GSAP, Motion (Framer Motion), Lottie, `tw-animate-css`.
+- **Utilities:** `date-fns`, `immer`, `axios`.
+
+## Key Features & Libraries
+
+- **Drag & Drop:** `@dnd-kit` is used for interaction.
+- **Physics Engine:** `matter-js` is used for specific visual effects.
+- **AI Integration:** `openai` SDK is integrated for AI-related features.
+- **Analytics:** PostHog, Vercel Analytics/Speed Insights.
+
+## Coding Conventions & Guidelines
+
+### 1. Component Structure
+
+- Use **Functional Components** with TypeScript interfaces for props.
+- Use `shadcn/ui` patterns: Combine Radix UI primitives with Tailwind CSS.
+- Use `cn()` utility (clsx + tailwind-merge) for conditional class names.
+  ```tsx
+  // Example
+  <div className={cn('bg-white p-4', className)}>...</div>
+  ```
+
+Context is in English, but please answer in Korean.
diff --git a/apps/web/package.json b/apps/web/package.json
index ee690ef..b7bcb60 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.9.1",
+  "version": "2.0.1",
   "type": "module",
   "private": true,
   "scripts": {
diff --git a/apps/web/public/changelog.json b/apps/web/public/changelog.json
index aa0ff78..edc5cc9 100644
--- a/apps/web/public/changelog.json
+++ b/apps/web/public/changelog.json
@@ -80,5 +80,12 @@
       "포인트를 사용해 곡을 추천할 수 있습니다.",
       "인기곡 페이지에서는 추천곡 순위를 확인할 수 있습니다."
     ]
+  },
+  "2.0.1": {
+    "title": "버전 2.0.1",
+    "message": [
+      "로컬 스토리지 저장 기능을 개선했습니다.",
+      "검색 카드 디자인 및 기능을 개선했습니다."
+    ]
   }
 }
diff --git a/apps/web/src/app/search/HomePage.tsx b/apps/web/src/app/search/HomePage.tsx
index a36e1e2..25abbc1 100644
--- a/apps/web/src/app/search/HomePage.tsx
+++ b/apps/web/src/app/search/HomePage.tsx
@@ -9,9 +9,9 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useSearchHistory } from '@/hooks/useSearchHistory';
 import useSearchSong from '@/hooks/useSearchSong';
 import { type ChatMessage } from '@/lib/api/openAIchat';
+import { useSearchHistoryStore } from '@/stores/useSearchHistoryStore';
 import { SearchSong } from '@/types/song';
 import { ChatResponseType } from '@/utils/safeParseJson';
 
@@ -57,7 +57,7 @@ export default function SearchPage() {
     searchSongs = searchResults.pages.flatMap(page => page.data);
   }
 
-  const { searchHistory, removeFromHistory } = useSearchHistory();
+  const { searchHistory, removeFromHistory } = useSearchHistoryStore();
 
   // 엔터 키 처리
   const handleKeyUp = (e: React.KeyboardEvent) => {
@@ -66,16 +66,6 @@ export default function SearchPage() {
     }
   };
 
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (inView && hasNextPage && !isFetchingNextPage && !isError) {
-        fetchNextPage();
-      }
-    }, 1000); // 1000ms 정도 지연
-
-    return () => clearTimeout(timeout);
-  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isError]);
-
   const handleSearchClick = () => {
     if (!search.trim()) {
       toast.error('검색어를 입력해주세요.');
@@ -100,6 +90,16 @@ export default function SearchPage() {
     }
   };
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (inView && hasNextPage && !isFetchingNextPage && !isError) {
+        fetchNextPage();
+      }
+    }, 1000); // 1000ms 정도 지연
+
+    return () => clearTimeout(timeout);
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isError]);
+
   return (
     <div className="bg-background">
       <div className="flex flex-col gap-4">
@@ -157,9 +157,9 @@ export default function SearchPage() {
           </div>
         )}
       </div>
-      <ScrollArea className="h-[calc(100vh-24rem)]">
+      <div className="h-[calc(100vh-24rem)] overflow-x-hidden overflow-y-auto">
         {searchSongs.length > 0 && (
-          <div className="flex w-full max-w-md flex-col gap-4 py-4">
+          <div className="flex w-full max-w-md flex-col gap-4 p-4">
             {searchSongs.map((song, index) => (
               <SearchResultCard
                 key={song.artist + song.title + index}
@@ -169,6 +169,7 @@ export default function SearchPage() {
                 }
                 onToggleLike={() => handleToggleLike(song.id, song.isLike ? 'DELETE' : 'POST')}
                 onClickSave={() => handleToggleSave(song, song.isSave ? 'PATCH' : 'POST')}
+                onClickArtist={() => setSearch(song.artist)}
               />
             ))}
             {hasNextPage && !isFetchingNextPage && (
@@ -197,7 +198,7 @@ export default function SearchPage() {
             <p className="m-2">노래 제목이나 가수를 검색해보세요</p>
           </div>
         )}
-      </ScrollArea>
+      </div>
 
       {selectedSaveSong && (
         <AddFolderModal
diff --git a/apps/web/src/app/search/SearchResultCard.tsx b/apps/web/src/app/search/SearchResultCard.tsx
index f3260cb..e7c316c 100644
--- a/apps/web/src/app/search/SearchResultCard.tsx
+++ b/apps/web/src/app/search/SearchResultCard.tsx
@@ -14,6 +14,7 @@ interface IProps {
   onToggleToSing: () => void;
   onToggleLike: () => void;
   onClickSave: () => void;
+  onClickArtist: () => void;
 }
 
 export default function SearchResultCard({
@@ -21,6 +22,7 @@ export default function SearchResultCard({
   onToggleToSing,
   onToggleLike,
   onClickSave,
+  onClickArtist,
 }: IProps) {
   const { id, title, artist, num_tj, num_ky, isToSing, isLike, isSave } = song;
   const { isAuthenticated } = useAuthStore();
@@ -36,16 +38,21 @@ export default function SearchResultCard({
   };
 
   return (
-    <Card className="relative overflow-hidden">
+    <Card className="w-full overflow-hidden p-4">
       {/* 메인 콘텐츠 영역 */}
-      <div className="h-[150px] w-full gap-4 p-3">
+      <div className="gap-4">
         {/* 노래 정보 */}
         <div className="mb-8 flex flex-col">
           {/* 제목 및 가수 */}
-          <div className="mb-1 flex justify-between pr-6">
-            <div>
+          <div className="mb-1 flex justify-between pr-2">
+            <div className="w-[calc(100%-40px)]">
               <h3 className="truncate text-base font-medium">{title}</h3>
-              <p className="text-muted-foreground truncate text-sm">{artist}</p>
+              <span
+                className="text-muted-foreground cursor-pointer truncate text-sm hover:underline"
+                onClick={onClickArtist}
+              >
+                {artist}
+              </span>
             </div>
 
             <Dialog open={open} onOpenChange={setOpen}>
@@ -79,7 +86,7 @@ export default function SearchResultCard({
         </div>
 
         {/* 버튼 영역 - 우측 하단에 고정 */}
-        <div className="absolute bottom-3 flex w-full space-x-2 pr-6">
+        <div className="flex w-full space-x-2">
           <Button
             variant="ghost"
             size="icon"
diff --git a/apps/web/src/components/reactBits/CountUp.tsx b/apps/web/src/components/reactBits/CountUp.tsx
index 1723cfd..e7c7eab 100644
--- a/apps/web/src/components/reactBits/CountUp.tsx
+++ b/apps/web/src/components/reactBits/CountUp.tsx
@@ -24,7 +24,7 @@ export default function CountUp({
   startWhen = true,
   separator = '',
   onStart,
-  onEnd
+  onEnd,
 }: CountUpProps) {
   const ref = useRef<HTMLSpanElement>(null);
   const motionValue = useMotionValue(direction === 'down' ? to : from);
@@ -34,7 +34,7 @@ export default function CountUp({
 
   const springValue = useSpring(motionValue, {
     damping,
-    stiffness
+    stiffness,
   });
 
   const isInView = useInView(ref, { once: true, margin: '0px' });
@@ -59,14 +59,14 @@ export default function CountUp({
       const options: Intl.NumberFormatOptions = {
         useGrouping: !!separator,
         minimumFractionDigits: hasDecimals ? maxDecimals : 0,
-        maximumFractionDigits: hasDecimals ? maxDecimals : 0
+        maximumFractionDigits: hasDecimals ? maxDecimals : 0,
       };
 
       const formattedNumber = Intl.NumberFormat('en-US', options).format(latest);
 
       return separator ? formattedNumber.replace(/,/g, separator) : formattedNumber;
     },
-    [maxDecimals, separator]
+    [maxDecimals, separator],
   );
 
   useEffect(() => {
@@ -91,7 +91,7 @@ export default function CountUp({
             onEnd();
           }
         },
-        delay * 1000 + duration * 1000
+        delay * 1000 + duration * 1000,
       );
 
       return () => {
diff --git a/apps/web/src/components/reactBits/GradientText.tsx b/apps/web/src/components/reactBits/GradientText.tsx
index 2b2ac28..8fff41a 100644
--- a/apps/web/src/components/reactBits/GradientText.tsx
+++ b/apps/web/src/components/reactBits/GradientText.tsx
@@ -1,5 +1,5 @@
-import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';
-import { motion, useMotionValue, useAnimationFrame, useTransform } from 'motion/react';
+import { motion, useAnimationFrame, useMotionValue, useTransform } from 'motion/react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
 interface GradientTextProps {
   children: ReactNode;
@@ -20,7 +20,7 @@ export default function GradientText({
   showBorder = false,
   direction = 'horizontal',
   pauseOnHover = false,
-  yoyo = true
+  yoyo = true,
 }: GradientTextProps) {
   const [isPaused, setIsPaused] = useState(false);
   const progress = useMotionValue(0);
@@ -84,41 +84,50 @@ export default function GradientText({
   }, [pauseOnHover]);
 
   const gradientAngle =
-    direction === 'horizontal' ? 'to right' : direction === 'vertical' ? 'to bottom' : 'to bottom right';
+    direction === 'horizontal'
+      ? 'to right'
+      : direction === 'vertical'
+        ? 'to bottom'
+        : 'to bottom right';
   // Duplicate first color at the end for seamless looping
   const gradientColors = [...colors, colors[0]].join(', ');
 
   const gradientStyle = {
     backgroundImage: `linear-gradient(${gradientAngle}, ${gradientColors})`,
-    backgroundSize: direction === 'horizontal' ? '300% 100%' : direction === 'vertical' ? '100% 300%' : '300% 300%',
-    backgroundRepeat: 'repeat'
+    backgroundSize:
+      direction === 'horizontal'
+        ? '300% 100%'
+        : direction === 'vertical'
+          ? '100% 300%'
+          : '300% 300%',
+    backgroundRepeat: 'repeat',
   };
 
   return (
     <motion.div
-      className={`relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 overflow-hidden cursor-pointer ${showBorder ? 'py-1 px-2' : ''} ${className}`}
+      className={`relative mx-auto flex max-w-fit cursor-pointer flex-row items-center justify-center overflow-hidden rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 ${showBorder ? 'px-2 py-1' : ''} ${className}`}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       {showBorder && (
         <motion.div
-          className="absolute inset-0 z-0 pointer-events-none rounded-[1.25rem]"
+          className="pointer-events-none absolute inset-0 z-0 rounded-[1.25rem]"
           style={{ ...gradientStyle, backgroundPosition }}
         >
           <div
-            className="absolute bg-black rounded-[1.25rem] z-[-1]"
+            className="absolute z-[-1] rounded-[1.25rem] bg-black"
             style={{
               width: 'calc(100% - 2px)',
               height: 'calc(100% - 2px)',
               left: '50%',
               top: '50%',
-              transform: 'translate(-50%, -50%)'
+              transform: 'translate(-50%, -50%)',
             }}
           />
         </motion.div>
       )}
       <motion.div
-        className="inline-block relative z-2 text-transparent bg-clip-text"
+        className="relative z-2 inline-block bg-clip-text text-transparent"
         style={{ ...gradientStyle, backgroundPosition, WebkitBackgroundClip: 'text' }}
       >
         {children}
diff --git a/apps/web/src/components/reactBits/Shuffle.tsx b/apps/web/src/components/reactBits/Shuffle.tsx
index ece1827..f1abf7d 100644
--- a/apps/web/src/components/reactBits/Shuffle.tsx
+++ b/apps/web/src/components/reactBits/Shuffle.tsx
@@ -1,8 +1,8 @@
-import React, { useRef, useEffect, useState, useMemo } from 'react';
+import { useGSAP } from '@gsap/react';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { SplitText as GSAPSplitText } from 'gsap/SplitText';
-import { useGSAP } from '@gsap/react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { JSX } from 'react';
 
 gsap.registerPlugin(ScrollTrigger, GSAPSplitText);
@@ -56,7 +56,7 @@ const Shuffle: React.FC<ShuffleProps> = ({
   colorTo,
   triggerOnce = true,
   respectReducedMotion = true,
-  triggerOnHover = true
+  triggerOnHover = true,
 }) => {
   const ref = useRef<HTMLElement>(null);
   const [fontsLoaded, setFontsLoaded] = useState(false);
@@ -87,7 +87,11 @@ const Shuffle: React.FC<ShuffleProps> = ({
   useGSAP(
     () => {
       if (!ref.current || !text || !fontsLoaded) return;
-      if (respectReducedMotion && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      if (
+        respectReducedMotion &&
+        window.matchMedia &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      ) {
         onShuffleComplete?.();
         return;
       }
@@ -133,7 +137,7 @@ const Shuffle: React.FC<ShuffleProps> = ({
           wordsClass: 'shuffle-word',
           linesClass: 'shuffle-line',
           smartWrap: true,
-          reduceWhiteSpace: false
+          reduceWhiteSpace: false,
         });
 
         const chars = (splitRef.current.chars || []) as HTMLElement[];
@@ -155,25 +159,29 @@ const Shuffle: React.FC<ShuffleProps> = ({
           Object.assign(wrap.style, {
             width: w + 'px',
             height: shuffleDirection === 'up' || shuffleDirection === 'down' ? h + 'px' : 'auto',
-            verticalAlign: 'bottom'
+            verticalAlign: 'bottom',
           });
 
           const inner = document.createElement('span');
           inner.className =
             'inline-block will-change-transform origin-left transform-gpu ' +
-            (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'whitespace-normal' : 'whitespace-nowrap');
+            (shuffleDirection === 'up' || shuffleDirection === 'down'
+              ? 'whitespace-normal'
+              : 'whitespace-nowrap');
 
           parent.insertBefore(wrap, ch);
           wrap.appendChild(inner);
 
           const firstOrig = ch.cloneNode(true) as HTMLElement;
           firstOrig.className =
-            'text-left ' + (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
+            'text-left ' +
+            (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
           Object.assign(firstOrig.style, { width: w + 'px', fontFamily: computedFont });
 
           ch.setAttribute('data-orig', '1');
           ch.className =
-            'text-left ' + (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
+            'text-left ' +
+            (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
           Object.assign(ch.style, { width: w + 'px', fontFamily: computedFont });
 
           inner.appendChild(firstOrig);
@@ -181,7 +189,8 @@ const Shuffle: React.FC<ShuffleProps> = ({
             const c = ch.cloneNode(true) as HTMLElement;
             if (scrambleCharset) c.textContent = rand(scrambleCharset);
             c.className =
-              'text-left ' + (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
+              'text-left ' +
+              (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
             Object.assign(c.style, { width: w + 'px', fontFamily: computedFont });
             inner.appendChild(c);
           }
@@ -239,7 +248,9 @@ const Shuffle: React.FC<ShuffleProps> = ({
           if (!strip) return;
           const kids = Array.from(strip.children) as HTMLElement[];
           for (let i = 1; i < kids.length - 1; i++) {
-            kids[i].textContent = scrambleCharset.charAt(Math.floor(Math.random() * scrambleCharset.length));
+            kids[i].textContent = scrambleCharset.charAt(
+              Math.floor(Math.random() * scrambleCharset.length),
+            );
           }
         });
       };
@@ -270,9 +281,13 @@ const Shuffle: React.FC<ShuffleProps> = ({
           onRepeat: () => {
             if (scrambleCharset) randomizeScrambles();
             if (isVertical) {
-              gsap.set(strips, { y: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-y') || '0') });
+              gsap.set(strips, {
+                y: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-y') || '0'),
+              });
             } else {
-              gsap.set(strips, { x: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-x') || '0') });
+              gsap.set(strips, {
+                x: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-x') || '0'),
+              });
             }
             onShuffleComplete?.();
           },
@@ -284,7 +299,7 @@ const Shuffle: React.FC<ShuffleProps> = ({
               onShuffleComplete?.();
               armHover();
             }
-          }
+          },
         });
 
         const addTween = (targets: HTMLElement[], at: number) => {
@@ -292,12 +307,14 @@ const Shuffle: React.FC<ShuffleProps> = ({
             duration,
             ease,
             force3D: true,
-            stagger: animationMode === 'evenodd' ? stagger : 0
+            stagger: animationMode === 'evenodd' ? stagger : 0,
           };
           if (isVertical) {
-            vars.y = (i: number, t: HTMLElement) => parseFloat(t.getAttribute('data-final-y') || '0');
+            vars.y = (i: number, t: HTMLElement) =>
+              parseFloat(t.getAttribute('data-final-y') || '0');
           } else {
-            vars.x = (i: number, t: HTMLElement) => parseFloat(t.getAttribute('data-final-x') || '0');
+            vars.x = (i: number, t: HTMLElement) =>
+              parseFloat(t.getAttribute('data-final-x') || '0');
           }
 
           tl.to(targets, vars, at);
@@ -318,7 +335,7 @@ const Shuffle: React.FC<ShuffleProps> = ({
             const vars: any = {
               duration,
               ease,
-              force3D: true
+              force3D: true,
             };
             if (isVertical) {
               vars.y = parseFloat(strip.getAttribute('data-final-y') || '0');
@@ -326,7 +343,8 @@ const Shuffle: React.FC<ShuffleProps> = ({
               vars.x = parseFloat(strip.getAttribute('data-final-x') || '0');
             }
             tl.to(strip, vars, d);
-            if (colorFrom && colorTo) tl.fromTo(strip, { color: colorFrom }, { color: colorTo, duration, ease }, d);
+            if (colorFrom && colorTo)
+              tl.fromTo(strip, { color: colorFrom }, { color: colorTo, duration, ease }, d);
           });
         }
 
@@ -358,7 +376,7 @@ const Shuffle: React.FC<ShuffleProps> = ({
         trigger: el,
         start,
         once: triggerOnce,
-        onEnter: create
+        onEnter: create,
       });
 
       return () => {
@@ -388,36 +406,41 @@ const Shuffle: React.FC<ShuffleProps> = ({
         triggerOnce,
         respectReducedMotion,
         triggerOnHover,
-        onShuffleComplete
+        onShuffleComplete,
       ],
-      scope: ref
-    }
+      scope: ref,
+    },
   );
 
-  const baseTw = 'inline-block whitespace-normal break-words will-change-transform uppercase text-2xl leading-none';
+  const baseTw =
+    'inline-block whitespace-normal break-words will-change-transform uppercase text-2xl leading-none';
   const userHasFont = useMemo(() => className && /font[-[]/i.test(className), [className]);
 
   const fallbackFont = useMemo(
     () => (userHasFont ? {} : { fontFamily: `'Press Start 2P', sans-serif` }),
-    [userHasFont]
+    [userHasFont],
   );
 
   const commonStyle = useMemo(
     () => ({
       textAlign,
       ...fallbackFont,
-      ...style
+      ...style,
     }),
-    [textAlign, fallbackFont, style]
+    [textAlign, fallbackFont, style],
   );
 
   const classes = useMemo(
     () => `${baseTw} ${ready ? 'visible' : 'invisible'} ${className}`.trim(),
-    [baseTw, ready, className]
+    [baseTw, ready, className],
   );
   const Tag = (tag || 'p') as keyof JSX.IntrinsicElements;
 
-  return React.createElement(Tag, { ref: ref as any, className: classes, style: commonStyle }, text);
+  return React.createElement(
+    Tag,
+    { ref: ref as any, className: classes, style: commonStyle },
+    text,
+  );
 };
 
 export default Shuffle;
diff --git a/apps/web/src/hooks/useSearchHistory.ts b/apps/web/src/hooks/useSearchHistory.ts
deleted file mode 100644
index ececcf5..0000000
--- a/apps/web/src/hooks/useSearchHistory.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const SEARCH_HISTORY_KEY = 'search_history';
-const MAX_HISTORY_ITEMS = 20;
-
-export const useSearchHistory = () => {
-  const [searchHistory, setSearchHistory] = useState<string[]>([]);
-
-  useEffect(() => {
-    const savedHistory = localStorage.getItem(SEARCH_HISTORY_KEY);
-    if (savedHistory) {
-      setSearchHistory(JSON.parse(savedHistory));
-    }
-  }, []);
-
-  const addToHistory = (searchTerm: string) => {
-    if (!searchTerm.trim()) return;
-
-    setSearchHistory(prev => {
-      const filtered = prev.filter(item => item !== searchTerm);
-      const newHistory = [searchTerm, ...filtered].slice(0, MAX_HISTORY_ITEMS);
-      localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(newHistory));
-      return newHistory;
-    });
-  };
-
-  const removeFromHistory = (searchTerm: string) => {
-    setSearchHistory(prev => {
-      const newHistory = prev.filter(item => item !== searchTerm);
-      localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(newHistory));
-      return newHistory;
-    });
-  };
-
-  return {
-    searchHistory,
-    addToHistory,
-    removeFromHistory,
-  };
-};
diff --git a/apps/web/src/hooks/useSearchSong.ts b/apps/web/src/hooks/useSearchSong.ts
index 07bb2be..d429a11 100644
--- a/apps/web/src/hooks/useSearchSong.ts
+++ b/apps/web/src/hooks/useSearchSong.ts
@@ -9,11 +9,10 @@ import {
   useToggleToSingMutation,
 } from '@/queries/searchSongQuery';
 import useAuthStore from '@/stores/useAuthStore';
+import useSearchHistoryStore from '@/stores/useSearchHistoryStore';
 import { Method } from '@/types/common';
 import { SearchSong } from '@/types/song';
 
-import { useSearchHistory } from './useSearchHistory';
-
 type SearchType = 'all' | 'title' | 'artist';
 
 type SaveModalType = '' | 'POST' | 'PATCH';
@@ -46,7 +45,7 @@ export default function useSearchSong() {
     isError,
   } = useInfiniteSearchSongQuery(query, searchType, isAuthenticated);
 
-  const { addToHistory } = useSearchHistory();
+  const { addToHistory } = useSearchHistoryStore();
 
   const handleSearch = () => {
     // trim 제거
diff --git a/apps/web/src/posthog.tsx b/apps/web/src/posthog.tsx
index c2ae0da..59eb2f5 100644
--- a/apps/web/src/posthog.tsx
+++ b/apps/web/src/posthog.tsx
@@ -9,6 +9,10 @@ import { Suspense, useEffect } from 'react';
 
 // app/providers.tsx
 
+// app/providers.tsx
+
+// app/providers.tsx
+
 export function PostHogProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY as string, {
diff --git a/apps/web/src/stores/useAuthStore.ts b/apps/web/src/stores/useAuthStore.ts
index 181a6f6..76632bc 100644
--- a/apps/web/src/stores/useAuthStore.ts
+++ b/apps/web/src/stores/useAuthStore.ts
@@ -37,11 +37,15 @@ interface ModalResponseState {
   message: string;
 }
 
+const initialState: Pick<AuthState, 'user' | 'isLoading' | 'isAuthenticated'> = {
+  user: null,
+  isLoading: false,
+  isAuthenticated: false,
+};
+
 const useAuthStore = create(
   immer<AuthState>((set, get) => ({
-    user: null,
-    isLoading: false,
-    isAuthenticated: false,
+    ...initialState,
 
     register: async (email, password) => {
       return await withLoading(set, get, async () => {
@@ -123,7 +127,7 @@ const useAuthStore = create(
 
       const { error } = await supabase.auth.signOut();
       if (!error) {
-        set({ user: null, isAuthenticated: false });
+        set(initialState);
         return true;
       }
       return false;
diff --git a/apps/web/src/stores/useModalStore.ts b/apps/web/src/stores/useModalStore.ts
index feaf16f..a0ccce5 100644
--- a/apps/web/src/stores/useModalStore.ts
+++ b/apps/web/src/stores/useModalStore.ts
@@ -23,13 +23,17 @@ interface ModalState {
   closeMessage: () => void;
 }
 
-const useModalStore = create<ModalState>(set => ({
+const initialState = {
   isOpen: false,
-  title: undefined,
-  message: '',
-  variant: 'default',
-  buttonText: undefined,
-  onButtonClick: undefined,
+  title: undefined as string | undefined,
+  message: '' as React.ReactNode,
+  variant: 'default' as MessageVariant,
+  buttonText: undefined as string | undefined,
+  onButtonClick: undefined as (() => void) | undefined,
+};
+
+const useModalStore = create<ModalState>(set => ({
+  ...initialState,
   // onButtonClick 없어도 closeMessage는 기본적으로 호출 된다
 
   openMessage: ({ title, message, variant = 'default', buttonText, onButtonClick }) => {
@@ -45,7 +49,7 @@ const useModalStore = create<ModalState>(set => ({
   },
 
   closeMessage: () => {
-    set({ isOpen: false });
+    set(initialState);
   },
 }));
 
diff --git a/apps/web/src/stores/useSearchHistoryStore.ts b/apps/web/src/stores/useSearchHistoryStore.ts
new file mode 100644
index 0000000..917bb21
--- /dev/null
+++ b/apps/web/src/stores/useSearchHistoryStore.ts
@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+interface SearchHistoryState {
+  searchHistory: string[];
+  addToHistory: (searchQuery: string) => void;
+  removeFromHistory: (searchQuery: string) => void;
+  clearHistory: () => void;
+}
+
+const SEARCH_HISTORY_KEY = 'search_history';
+const MAX_HISTORY_ITEMS = 20;
+
+const initialState = {
+  searchHistory: [] as string[],
+};
+
+const useSearchHistoryStore = create(
+  persist<SearchHistoryState>(
+    set => ({
+      ...initialState,
+      addToHistory: (searchQuery: string) => {
+        if (!searchQuery.trim()) return;
+
+        set(state => {
+          const filtered = state.searchHistory.filter(item => item !== searchQuery);
+          const newHistory = [searchQuery, ...filtered].slice(0, MAX_HISTORY_ITEMS);
+          return { searchHistory: newHistory };
+        });
+      },
+      removeFromHistory: (searchQuery: string) => {
+        set(state => ({
+          searchHistory: state.searchHistory.filter(item => item !== searchQuery),
+        }));
+      },
+      clearHistory: () => {
+        set(initialState);
+      },
+    }),
+    {
+      name: SEARCH_HISTORY_KEY,
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
+
+export default useSearchHistoryStore;