From 14ff0093c2b3bf7c63ad05f3f163fda62bbaa2fd Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Fri, 5 Sep 2025 21:37:39 +0900
Subject: [PATCH 1/6] =?UTF-8?q?[Refactor]=20=ED=99=88=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20=EB=8B=A8=EC=9D=BC=20=EC=B1=85=EC=9E=84?=
 =?UTF-8?q?=20=EA=B0=80=EC=A7=80=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/CharacterSearchSection.tsx           |  75 ++++
 src/components/home/FeatureShowcase.tsx       |  64 +++
 src/components/home/GuildSearchSection.tsx    | 111 ++++++
 src/components/home/HeroSection.tsx           |  80 ++++
 src/components/home/HomeNavigation.tsx        |  42 ++
 src/data/notices.ts                           |  27 ++
 src/pages/Home.tsx                            | 372 +-----------------
 7 files changed, 413 insertions(+), 358 deletions(-)
 create mode 100644 src/components/home/CharacterSearchSection.tsx
 create mode 100644 src/components/home/FeatureShowcase.tsx
 create mode 100644 src/components/home/GuildSearchSection.tsx
 create mode 100644 src/components/home/HeroSection.tsx
 create mode 100644 src/components/home/HomeNavigation.tsx
 create mode 100644 src/data/notices.ts

diff --git a/src/components/home/CharacterSearchSection.tsx b/src/components/home/CharacterSearchSection.tsx
new file mode 100644
index 0000000..ccfe9e1
--- /dev/null
+++ b/src/components/home/CharacterSearchSection.tsx
@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { FiSearch } from 'react-icons/fi'
+import { useAuthStore } from '../../store/authStore'
+import { useUserStore } from '../../store/userStore'
+import { searchCharacterOcid } from '../../apis/character/characterController'
+import Button from '../common/Button'
+
+const CharacterSearchSection = () => {
+  const [characterName, setCharacterName] = useState('')
+  const [searchLoading, setSearchLoading] = useState(false)
+  const { storeLogin } = useAuthStore()
+  const { setCharacterOcid } = useUserStore()
+  const nav = useNavigate()
+
+  const searchCharacterHandler = async () => {
+    if (characterName.trim() === '') {
+      alert('캐릭터 이름을 입력해주세요.')
+      return
+    }
+
+    setSearchLoading(true)
+    try {
+      const { ocid } = await searchCharacterOcid(characterName.trim())
+
+      if (!ocid) {
+        alert('캐릭터를 찾을 수 없습니다.')
+        return
+      }
+      await storeLogin('', '', 'search')
+      setCharacterOcid(ocid)
+      nav('/searchCharacter')
+    } catch {
+      alert('캐릭터 검색에 실패했습니다.')
+    } finally {
+      setSearchLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden h-fit self-start">
+      <div className="flex flex-col justify-between">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-8 h-8 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center shadow-sm">
+            <FiSearch className="text-blue-600 text-lg" />
+          </div>
+          <h2 className="text-base font-semibold text-gray-800">캐릭터 검색</h2>
+        </div>
+        <div className="space-y-3">
+          <input
+            type="text"
+            placeholder="캐릭터 이름을 입력하세요"
+            value={characterName}
+            onChange={e => setCharacterName(e.target.value)}
+            className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm bg-white"
+          />
+          <Button
+            size="medium"
+            scheme="solid"
+            disabled={searchLoading}
+            className={`w-full text-sm bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 transition-all shadow-sm ${
+              searchLoading
+                ? 'bg-blue-300 cursor-not-allowed'
+                : 'bg-blue-500 hover:bg-blue-600'
+            }`}
+            onClick={searchCharacterHandler}>
+            {searchLoading ? '검색 중...' : '검색'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CharacterSearchSection
diff --git a/src/components/home/FeatureShowcase.tsx b/src/components/home/FeatureShowcase.tsx
new file mode 100644
index 0000000..a810fc4
--- /dev/null
+++ b/src/components/home/FeatureShowcase.tsx
@@ -0,0 +1,64 @@
+import { FiCalendar } from 'react-icons/fi'
+import { useAuthStore } from '../../store/authStore'
+import { useUserStore } from '../../store/userStore'
+import { useNavigate } from 'react-router-dom'
+import { guest } from '../../data/guest'
+import Button from '../common/Button'
+
+const FeatureShowcase = () => {
+  const { storeLogin } = useAuthStore()
+  const { setCharacterOcid } = useUserStore()
+  const nav = useNavigate()
+
+  const handleGuestLogin = async () => {
+    await storeLogin('', '', 'guest')
+    setCharacterOcid(guest.ocid)
+    nav('/character')
+  }
+
+  return (
+    <div className="bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow">
+      <div className="flex items-center gap-3 mb-3">
+        <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
+          <FiCalendar className="text-green-600 text-lg" />
+        </div>
+        <h2 className="text-base font-semibold">체험하기</h2>
+      </div>
+      <div className="space-y-3">
+        <div className="space-y-1.5 text-sm">
+          <p className="font-medium text-gray-900">비로그인 이용 가능한 기능</p>
+          <div className="flex items-center gap-2 text-gray-600">
+            <span className="w-1 h-1 rounded-full bg-blue-500" />
+            <span>캐릭터 정보 조회</span>
+          </div>
+          <div className="flex items-center gap-2 text-gray-600">
+            <span className="w-1 h-1 rounded-full bg-blue-500" />
+            <span>길드 정보 조회</span>
+          </div>
+        </div>
+        <div className="space-y-1.5 text-sm">
+          <p className="font-medium text-gray-900">
+            로그인 후 이용 가능한 기능
+          </p>
+          <div className="flex items-center gap-2 text-gray-600">
+            <span className="w-1 h-1 rounded-full bg-gray-400" />
+            <span>캘린더로 일정 관리하기</span>
+          </div>
+          <div className="flex items-center gap-2 text-gray-600">
+            <span className="w-1 h-1 rounded-full bg-gray-400" />
+            <span>길드원 관리하기</span>
+          </div>
+        </div>
+        <Button
+          size="medium"
+          scheme="solid"
+          className="w-full text-sm"
+          onClick={handleGuestLogin}>
+          게스트로 시작하기
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default FeatureShowcase
diff --git a/src/components/home/GuildSearchSection.tsx b/src/components/home/GuildSearchSection.tsx
new file mode 100644
index 0000000..6920b0d
--- /dev/null
+++ b/src/components/home/GuildSearchSection.tsx
@@ -0,0 +1,111 @@
+import { useNavigate } from 'react-router-dom'
+import { FiUsers } from 'react-icons/fi'
+import { useSearchGuild } from '../../hooks/search/useSearchGuild'
+import { servers } from '../../data/worlds'
+import Button from '../common/Button'
+
+const GuildSearchSection = () => {
+  const nav = useNavigate()
+  const {
+    selectedServer,
+    setSelectedServer,
+    guildList,
+    searchGuildHandler,
+    addGuildList,
+    removeGuildList,
+    handleGuildKeyPress,
+    guildName,
+    setGuildName
+  } = useSearchGuild()
+
+  const onSearchGuild = async () => {
+    nav('/searchGuild')
+    searchGuildHandler()
+  }
+
+  return (
+    <div className="md:col-span-2 md:w-2/3 md:mx-auto bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+      <div className="flex flex-col justify-between">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-8 h-8 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg flex items-center justify-center shadow-sm">
+            <FiUsers className="text-purple-600 text-lg" />
+          </div>
+          <h2 className="text-base font-semibold text-gray-800">
+            길드 검색 (최대 4개 검색 가능)
+          </h2>
+        </div>
+        <div className="space-y-3">
+          <div className="flex gap-2">
+            <select
+              value={selectedServer}
+              onChange={e => setSelectedServer(e.target.value)}
+              className="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white min-w-[120px]">
+              <option value="">서버 선택</option>
+              {servers.map(server => (
+                <option
+                  key={server.id}
+                  value={server.id}>
+                  {server.name}
+                </option>
+              ))}
+            </select>
+            <input
+              type="text"
+              placeholder="길드 이름을 입력하세요"
+              value={guildName}
+              onChange={e => setGuildName(e.target.value)}
+              onKeyPress={handleGuildKeyPress}
+              className="flex-1 px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white"
+            />
+            <Button
+              size="medium"
+              scheme="solid"
+              onClick={() => addGuildList(guildName)}
+              className="px-4 py-2.5 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-sm transition-all shadow-sm">
+              추가
+            </Button>
+          </div>
+
+          <div className="space-y-1.5">
+            <p className="text-xs text-gray-600">검색할 길드 목록</p>
+            <div className="flex flex-wrap gap-1.5">
+              {guildList.map(guild => (
+                <div
+                  key={guild}
+                  className="flex items-center gap-1 px-2.5 py-1 bg-gradient-to-r from-purple-50 to-purple-100 border border-purple-200 rounded-md group">
+                  <span className="text-sm text-purple-700">{guild}</span>
+                  <button
+                    onClick={() => removeGuildList(guild)}
+                    className="p-0.5 text-purple-400 hover:text-purple-600 rounded-full hover:bg-purple-100 transition-colors">
+                    <svg
+                      className="w-3.5 h-3.5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Button
+            size="medium"
+            scheme="solid"
+            onClick={onSearchGuild}
+            className="w-full text-sm bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 transition-all shadow-sm">
+            길드 검색
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GuildSearchSection
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
new file mode 100644
index 0000000..24e0018
--- /dev/null
+++ b/src/components/home/HeroSection.tsx
@@ -0,0 +1,80 @@
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../../hooks/useAuth'
+import { useAuthStore } from '../../store/authStore'
+import { useUserStore } from '../../store/userStore'
+import { guest } from '../../data/guest'
+import Logo from '../../assets/logo.png'
+import GoogleLogo from '../../assets/gogle.svg'
+
+const HeroSection = () => {
+  const { userLogin } = useAuth()
+  const { storeLogin } = useAuthStore()
+  const { setUserInfo, setCharacterOcid } = useUserStore()
+  const nav = useNavigate()
+
+  const handleGuestLogin = async () => {
+    await storeLogin('', '', 'guest')
+    setCharacterOcid(guest.ocid)
+    nav('/character')
+  }
+
+  const handleMemberLogin = async () => {
+    try {
+      const userInfo = await userLogin()
+      if (userInfo) {
+        setUserInfo(userInfo)
+        setCharacterOcid(userInfo.ocid!)
+        if (userInfo?.nexonApiKey) {
+          nav('/character')
+        } else {
+          nav('/signup')
+        }
+      }
+    } catch {
+      alert('로그인에 실패했습니다.')
+    }
+  }
+
+  return (
+    <div className="text-center mb-12">
+      <div className="flex flex-col items-center mb-6">
+        <img
+          src={Logo}
+          alt="메이플링크 로고"
+          className="w-16 h-16 mb-4"
+        />
+        <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-full border border-blue-100">
+          <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
+          <span className="text-sm text-blue-600 font-medium">
+            메이플스토리 통합 관리 플랫폼
+          </span>
+        </div>
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-3">
+        메이플스토리를 더 스마트하게
+      </h1>
+      <p className="text-lg text-gray-500">
+        캐릭터부터 길드까지, 한눈에 관리하세요
+      </p>
+      <div className="flex justify-center gap-4 mt-8">
+        <button
+          onClick={handleGuestLogin}
+          className="px-5 py-2.5 bg-white text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
+          체험하기
+        </button>
+        <button
+          onClick={handleMemberLogin}
+          className="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
+          <img
+            src={GoogleLogo}
+            alt="Google"
+            className="w-5 h-5"
+          />
+          Google로 시작하기
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default HeroSection
diff --git a/src/components/home/HomeNavigation.tsx b/src/components/home/HomeNavigation.tsx
new file mode 100644
index 0000000..1e660e9
--- /dev/null
+++ b/src/components/home/HomeNavigation.tsx
@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom'
+import Logo from '../../assets/logo.png'
+import KakaoOpenChatButton from '../common/KakaoOpenChatButton'
+
+const KAKAO_CHAT_LINK = 'https://open.kakao.com/o/s4tfG2Ah'
+
+const HomeNavigation = () => {
+  return (
+    <nav className="bg-white/80 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center gap-2">
+            <img
+              src={Logo}
+              className="w-8 h-8"
+              alt="MapleLink Logo"
+            />
+            <span className="font-bold text-xl text-gray-900">MapleLink</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <KakaoOpenChatButton
+              chatLink={KAKAO_CHAT_LINK}
+              className="!py-1.5 !px-3 text-sm"
+            />
+            <Link
+              to="/apiGuide"
+              className="text-gray-600 hover:text-blue-600 font-medium text-sm">
+              API 가이드
+            </Link>
+            <Link
+              to="/faq"
+              className="text-gray-600 hover:text-blue-600 font-medium text-sm">
+              FAQ
+            </Link>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default HomeNavigation
diff --git a/src/data/notices.ts b/src/data/notices.ts
new file mode 100644
index 0000000..0945b10
--- /dev/null
+++ b/src/data/notices.ts
@@ -0,0 +1,27 @@
+export const recentNotices = [
+  {
+    id: 1,
+    title: '서비스 이용 안내',
+    date: '2025.05.23'
+  },
+  {
+    id: 2,
+    title: '메이플스토리 캘린더 업데이트 안내',
+    date: '2025.06.11'
+  },
+  {
+    id: 3,
+    title: '다음 업데이트 예정 기능',
+    date: '2025.06'
+  },
+  {
+    id: 4,
+    title: '메이플링크 비로그인 기능 업데이트 안내',
+    date: '2025.06.17'
+  },
+  {
+    id: 5,
+    title: '챌린저스 서버 길드 검색 / 길드 관리 기능 업데이트 안내',
+    date: '2025.06.23'
+  }
+]
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 0a2c66c..e8db75a 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,369 +1,25 @@
-import { useNavigate, Link } from 'react-router-dom'
-import { useAuth } from '../hooks/useAuth'
-import { useAuthStore } from '../store/authStore'
-import KakaoOpenChatButton from '../components/common/KakaoOpenChatButton'
-import {
-  FiClock,
-  FiChevronRight,
-  FiSearch,
-  FiCalendar,
-  FiUsers
-} from 'react-icons/fi'
-import Logo from '../assets/logo.png'
-import GoogleLogo from '../assets/gogle.svg'
-import { useUserStore } from '../store/userStore'
-import { useState } from 'react'
-import Button from '../components/common/Button'
-import { searchCharacterOcid } from '../apis/character/characterController'
-import { useSearchGuild } from '../hooks/search/useSearchGuild'
-import { servers } from '../data/worlds'
-import { guest } from '../data/guest'
+import { Link } from 'react-router-dom'
+import { FiClock, FiChevronRight } from 'react-icons/fi'
 
-const Home = () => {
-  const { userLogin } = useAuth()
-  const { storeLogin } = useAuthStore()
-  const { setUserInfo, setCharacterOcid } = useUserStore()
-  const [searchLoading, setSearchLoading] = useState(false)
-  const nav = useNavigate()
-  const KAKAO_CHAT_LINK = 'https://open.kakao.com/o/s4tfG2Ah'
-
-  const [characterName, setCharacterName] = useState('')
-
-  const {
-    selectedServer,
-    setSelectedServer,
-    guildList,
-    searchGuildHandler,
-    addGuildList,
-    removeGuildList,
-    handleGuildKeyPress,
-    guildName,
-    setGuildName
-  } = useSearchGuild()
-
-  const handleGuestLogin = async () => {
-    await storeLogin('', '', 'guest')
-    setCharacterOcid(guest.ocid)
-
-    nav('/character')
-  }
-
-  const handleMemberLogin = async () => {
-    try {
-      const userInfo = await userLogin()
-      if (userInfo) {
-        setUserInfo(userInfo)
-        setCharacterOcid(userInfo.ocid!)
-        if (userInfo?.nexonApiKey) {
-          nav('/character')
-        } else {
-          nav('/signup')
-        }
-      }
-    } catch {
-      alert('로그인에 실패했습니다.')
-    }
-  }
-
-  const searchCharacterHandler = async () => {
-    if (characterName.trim() === '') {
-      alert('캐릭터 이름을 입력해주세요.')
-      return
-    }
-
-    setSearchLoading(true)
-    try {
-      const { ocid } = await searchCharacterOcid(characterName.trim())
-
-      if (!ocid) {
-        alert('캐릭터를 찾을 수 없습니다.')
-        return
-      }
-      await storeLogin('', '', 'search')
-      setCharacterOcid(ocid)
-      nav(`/searchCharacter`)
-    } catch {
-      alert('캐릭터 검색에 실패했습니다.')
-    } finally {
-      setSearchLoading(false)
-    }
-  }
-  const onSearchGuild = async () => {
-    nav(`/searchGuild`)
-    searchGuildHandler()
-  }
-
-  const recentNotices = [
-    {
-      id: 1,
-      title: '서비스 이용 안내',
-      date: '2025.05.23'
-    },
-    {
-      id: 2,
-      title: '메이플스토리 캘린더 업데이트 안내',
-      date: '2025.06.11'
-    },
-    {
-      id: 3,
-      title: '다음 업데이트 예정 기능',
-      date: '2025.06'
-    },
-    {
-      id: 4,
-      title: '메이플링크 비로그인 기능 업데이트 안내',
-      date: '2025.06.17'
-    },
-    {
-      id: 5,
-      title: '챌린저스 서버 길드 검색 / 길드 관리 기능 업데이트 안내',
-      date: '2025.06.23'
-    }
-  ]
+import HomeNavigation from '../components/home/HomeNavigation'
+import HeroSection from '../components/home/HeroSection'
+import GuildSearchSection from '../components/home/GuildSearchSection'
+import CharacterSearchSection from '../components/home/CharacterSearchSection'
+import FeatureShowcase from '../components/home/FeatureShowcase'
+import { recentNotices } from '../data/notices'
 
+const Home = () => {
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
-      {/* 상단 네비게이션 */}
-      <nav className="bg-white/80 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center gap-2">
-              <img
-                src={Logo}
-                className="w-8 h-8"
-                alt="MapleLink Logo"
-              />
-              <span className="font-bold text-xl text-gray-900">MapleLink</span>
-            </div>
-            <div className="flex items-center gap-4">
-              <KakaoOpenChatButton
-                chatLink={KAKAO_CHAT_LINK}
-                className="!py-1.5 !px-3 text-sm"
-              />
-              <Link
-                to="/apiGuide"
-                className="text-gray-600 hover:text-blue-600 font-medium text-sm">
-                API 가이드
-              </Link>
-              <Link
-                to="/faq"
-                className="text-gray-600 hover:text-blue-600 font-medium text-sm">
-                FAQ
-              </Link>
-            </div>
-          </div>
-        </div>
-      </nav>
-
+      <HomeNavigation />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        {/* 히어로 섹션 */}
-        <div className="text-center mb-12">
-          <div className="flex flex-col items-center mb-6">
-            <img
-              src={Logo}
-              alt="메이플링크 로고"
-              className="w-16 h-16 mb-4"
-            />
-            <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-full border border-blue-100">
-              <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
-              <span className="text-sm text-blue-600 font-medium">
-                메이플스토리 통합 관리 플랫폼
-              </span>
-            </div>
-          </div>
-          <h1 className="text-4xl font-bold text-gray-900 mb-3">
-            메이플스토리를 더 스마트하게
-          </h1>
-          <p className="text-lg text-gray-500">
-            캐릭터부터 길드까지, 한눈에 관리하세요
-          </p>
-          <div className="flex justify-center gap-4 mt-8">
-            <button
-              onClick={handleGuestLogin}
-              className="px-5 py-2.5 bg-white text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
-              체험하기
-            </button>
-            <button
-              onClick={handleMemberLogin}
-              className="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
-              <img
-                src={GoogleLogo}
-                alt="Google"
-                className="w-5 h-5"
-              />
-              Google로 시작하기
-            </button>
-          </div>
-        </div>
-
-        {/* 주요 기능 섹션 */}
+        <HeroSection />
         <div className="grid grid-cols-1 md:grid-cols-2  gap-6 mb-12">
-          {/* 길드 검색 */}
-          <div className="md:col-span-2 md:w-2/3 md:mx-auto bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
-            <div className="flex flex-col justify-between">
-              <div className="flex items-center gap-3 mb-3">
-                <div className="w-8 h-8 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg flex items-center justify-center shadow-sm">
-                  <FiUsers className="text-purple-600 text-lg" />
-                </div>
-                <h2 className="text-base font-semibold text-gray-800">
-                  길드 검색 (최대 4개 검색 가능)
-                </h2>
-              </div>
-              <div className="space-y-3">
-                <div className="flex gap-2">
-                  <select
-                    value={selectedServer}
-                    onChange={e => setSelectedServer(e.target.value)}
-                    className="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white min-w-[120px]">
-                    <option value="">서버 선택</option>
-                    {servers.map(server => (
-                      <option
-                        key={server.id}
-                        value={server.id}>
-                        {server.name}
-                      </option>
-                    ))}
-                  </select>
-                  <input
-                    type="text"
-                    placeholder="길드 이름을 입력하세요"
-                    value={guildName}
-                    onChange={e => setGuildName(e.target.value)}
-                    onKeyPress={handleGuildKeyPress}
-                    className="flex-1 px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white"
-                  />
-                  <Button
-                    size="medium"
-                    scheme="solid"
-                    onClick={() => addGuildList(guildName)}
-                    className="px-4 py-2.5 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-sm transition-all shadow-sm">
-                    추가
-                  </Button>
-                </div>
-
-                <div className="space-y-1.5">
-                  <p className="text-xs text-gray-600">검색할 길드 목록</p>
-                  <div className="flex flex-wrap gap-1.5">
-                    {guildList.map(guild => (
-                      <div
-                        key={guild}
-                        className="flex items-center gap-1 px-2.5 py-1 bg-gradient-to-r from-purple-50 to-purple-100 border border-purple-200 rounded-md group">
-                        <span className="text-sm text-purple-700">{guild}</span>
-                        <button
-                          onClick={() => removeGuildList(guild)}
-                          className="p-0.5 text-purple-400 hover:text-purple-600 rounded-full hover:bg-purple-100 transition-colors">
-                          <svg
-                            className="w-3.5 h-3.5"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M6 18L18 6M6 6l12 12"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                <Button
-                  size="medium"
-                  scheme="solid"
-                  onClick={onSearchGuild}
-                  className="w-full text-sm bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 transition-all shadow-sm">
-                  길드 검색
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {/* 캐릭터 검색 */}
-          <div className="bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden h-fit self-start">
-            <div className="flex flex-col justify-between">
-              <div className="flex items-center gap-3 mb-3">
-                <div className="w-8 h-8 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center shadow-sm">
-                  <FiSearch className="text-blue-600 text-lg" />
-                </div>
-                <h2 className="text-base font-semibold text-gray-800">
-                  캐릭터 검색
-                </h2>
-              </div>
-              <div className="space-y-3">
-                <input
-                  type="text"
-                  placeholder="캐릭터 이름을 입력하세요"
-                  value={characterName}
-                  onChange={e => setCharacterName(e.target.value)}
-                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm bg-white"
-                />
-                <Button
-                  size="medium"
-                  scheme="solid"
-                  disabled={searchLoading}
-                  className={`w-full text-sm bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 transition-all shadow-sm ${
-                    searchLoading
-                      ? 'bg-blue-300 cursor-not-allowed'
-                      : 'bg-blue-500 hover:bg-blue-600'
-                  }`}
-                  onClick={searchCharacterHandler}>
-                  {searchLoading ? '검색 중...' : '검색'}
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {/* 체험하기 */}
-          <div className="bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow">
-            <div className="flex items-center gap-3 mb-3">
-              <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
-                <FiCalendar className="text-green-600 text-lg" />
-              </div>
-              <h2 className="text-base font-semibold">체험하기</h2>
-            </div>
-            <div className="space-y-3">
-              <div className="space-y-1.5 text-sm">
-                <p className="font-medium text-gray-900">
-                  비로그인 이용 가능한 기능
-                </p>
-                <div className="flex items-center gap-2 text-gray-600">
-                  <span className="w-1 h-1 rounded-full bg-blue-500" />
-                  <span>캐릭터 정보 조회</span>
-                </div>
-                <div className="flex items-center gap-2 text-gray-600">
-                  <span className="w-1 h-1 rounded-full bg-blue-500" />
-                  <span>길드 정보 조회</span>
-                </div>
-              </div>
-              <div className="space-y-1.5 text-sm">
-                <p className="font-medium text-gray-900">
-                  로그인 후 이용 가능한 기능
-                </p>
-                <div className="flex items-center gap-2 text-gray-600">
-                  <span className="w-1 h-1 rounded-full bg-gray-400" />
-                  <span>캘린더로 일정 관리하기</span>
-                </div>
-                <div className="flex items-center gap-2 text-gray-600">
-                  <span className="w-1 h-1 rounded-full bg-gray-400" />
-                  <span>길드원 관리하기</span>
-                </div>
-              </div>
-              <Button
-                size="medium"
-                scheme="solid"
-                className="w-full text-sm"
-                onClick={handleGuestLogin}>
-                게스트로 시작하기
-              </Button>
-            </div>
-          </div>
+          <GuildSearchSection />
+          <CharacterSearchSection />
+          <FeatureShowcase />
         </div>
 
-        {/* 공지사항 섹션 */}
         <div className="bg-white rounded-xl shadow-sm">
           <div className="p-6 border-b border-gray-200">
             <div className="flex items-center justify-between">

From 04b304ace97ba5375372ef2e66c76c5591971d1c Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Fri, 5 Sep 2025 22:13:24 +0900
Subject: [PATCH 2/6] =?UTF-8?q?[Style]=20=ED=99=88=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/GuildSearchSection.tsx | 110 +++++++++++----------
 src/components/home/HeroSection.tsx        |  21 ++--
 src/components/home/HomeNavigation.tsx     |  42 +++++++-
 src/pages/Home.tsx                         |   7 +-
 4 files changed, 115 insertions(+), 65 deletions(-)

diff --git a/src/components/home/GuildSearchSection.tsx b/src/components/home/GuildSearchSection.tsx
index 6920b0d..a0e010d 100644
--- a/src/components/home/GuildSearchSection.tsx
+++ b/src/components/home/GuildSearchSection.tsx
@@ -24,22 +24,24 @@ const GuildSearchSection = () => {
   }
 
   return (
-    <div className="md:col-span-2 md:w-2/3 md:mx-auto bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+    <div className="col-span-1 lg:col-span-2 lg:max-w-4xl lg:mx-auto bg-white rounded-xl p-4 sm:p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
       <div className="flex flex-col justify-between">
-        <div className="flex items-center gap-3 mb-3">
+        <div className="flex items-center gap-3 mb-4">
           <div className="w-8 h-8 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg flex items-center justify-center shadow-sm">
             <FiUsers className="text-purple-600 text-lg" />
           </div>
-          <h2 className="text-base font-semibold text-gray-800">
-            길드 검색 (최대 4개 검색 가능)
+          <h2 className="text-sm sm:text-base font-semibold text-gray-800">
+            길드 검색 <span className="text-xs text-gray-500">(최대 4개)</span>
           </h2>
         </div>
-        <div className="space-y-3">
-          <div className="flex gap-2">
+
+        <div className="space-y-4">
+          {/* 서버 선택과 입력 필드 */}
+          <div className="flex flex-col sm:flex-row gap-3">
             <select
               value={selectedServer}
               onChange={e => setSelectedServer(e.target.value)}
-              className="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white min-w-[120px]">
+              className="w-full sm:w-auto px-3 py-3 sm:py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white min-w-[140px]">
               <option value="">서버 선택</option>
               {servers.map(server => (
                 <option
@@ -49,58 +51,64 @@ const GuildSearchSection = () => {
                 </option>
               ))}
             </select>
-            <input
-              type="text"
-              placeholder="길드 이름을 입력하세요"
-              value={guildName}
-              onChange={e => setGuildName(e.target.value)}
-              onKeyPress={handleGuildKeyPress}
-              className="flex-1 px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white"
-            />
-            <Button
-              size="medium"
-              scheme="solid"
-              onClick={() => addGuildList(guildName)}
-              className="px-4 py-2.5 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-sm transition-all shadow-sm">
-              추가
-            </Button>
-          </div>
 
-          <div className="space-y-1.5">
-            <p className="text-xs text-gray-600">검색할 길드 목록</p>
-            <div className="flex flex-wrap gap-1.5">
-              {guildList.map(guild => (
-                <div
-                  key={guild}
-                  className="flex items-center gap-1 px-2.5 py-1 bg-gradient-to-r from-purple-50 to-purple-100 border border-purple-200 rounded-md group">
-                  <span className="text-sm text-purple-700">{guild}</span>
-                  <button
-                    onClick={() => removeGuildList(guild)}
-                    className="p-0.5 text-purple-400 hover:text-purple-600 rounded-full hover:bg-purple-100 transition-colors">
-                    <svg
-                      className="w-3.5 h-3.5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              ))}
+            <div className="flex gap-2 flex-1">
+              <input
+                type="text"
+                placeholder="길드 이름을 입력하세요"
+                value={guildName}
+                onChange={e => setGuildName(e.target.value)}
+                onKeyPress={handleGuildKeyPress}
+                className="flex-1 px-4 py-3 sm:py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white"
+              />
+              <Button
+                size="medium"
+                scheme="solid"
+                onClick={() => addGuildList(guildName)}
+                className="px-4 py-3 sm:py-2.5 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-sm transition-all shadow-sm whitespace-nowrap">
+                추가
+              </Button>
             </div>
           </div>
 
+          {/* 길드 목록 */}
+          {guildList.length > 0 && (
+            <div className="space-y-2">
+              <p className="text-xs text-gray-600">검색할 길드 목록</p>
+              <div className="flex flex-wrap gap-2">
+                {guildList.map(guild => (
+                  <div
+                    key={guild}
+                    className="flex items-center gap-1 px-3 py-2 bg-gradient-to-r from-purple-50 to-purple-100 border border-purple-200 rounded-lg group">
+                    <span className="text-sm text-purple-700">{guild}</span>
+                    <button
+                      onClick={() => removeGuildList(guild)}
+                      className="p-1 text-purple-400 hover:text-purple-600 rounded-full hover:bg-purple-100 transition-colors">
+                      <svg
+                        className="w-3.5 h-3.5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24">
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M6 18L18 6M6 6l12 12"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
           <Button
             size="medium"
             scheme="solid"
             onClick={onSearchGuild}
-            className="w-full text-sm bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 transition-all shadow-sm">
-            길드 검색
+            className="w-full py-3 sm:py-2.5 text-sm bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 transition-all shadow-sm font-medium">
+            길드 검색하기
           </Button>
         </div>
       </div>
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 24e0018..43e8e8d 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -36,35 +36,36 @@ const HeroSection = () => {
   }
 
   return (
-    <div className="text-center mb-12">
+    <div className="text-center mb-8 sm:mb-12">
       <div className="flex flex-col items-center mb-6">
         <img
           src={Logo}
           alt="메이플링크 로고"
-          className="w-16 h-16 mb-4"
+          className="w-12 h-12 sm:w-16 sm:h-16 mb-4"
         />
-        <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-full border border-blue-100">
+        <div className="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-full border border-blue-100">
           <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
-          <span className="text-sm text-blue-600 font-medium">
+          <span className="text-xs sm:text-sm text-blue-600 font-medium">
             메이플스토리 통합 관리 플랫폼
           </span>
         </div>
       </div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-3">
-        메이플스토리를 더 스마트하게
+      <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-3 px-4">
+        메이플스토리를
+        <br className="sm:hidden" /> 더 스마트하게
       </h1>
-      <p className="text-lg text-gray-500">
+      <p className="text-base sm:text-lg text-gray-500 px-4">
         캐릭터부터 길드까지, 한눈에 관리하세요
       </p>
-      <div className="flex justify-center gap-4 mt-8">
+      <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4 mt-6 sm:mt-8 px-4">
         <button
           onClick={handleGuestLogin}
-          className="px-5 py-2.5 bg-white text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
+          className="w-full sm:w-auto px-5 py-3 sm:py-2.5 bg-white text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors font-medium">
           체험하기
         </button>
         <button
           onClick={handleMemberLogin}
-          className="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
+          className="w-full sm:w-auto px-5 py-3 sm:py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2 font-medium">
           <img
             src={GoogleLogo}
             alt="Google"
diff --git a/src/components/home/HomeNavigation.tsx b/src/components/home/HomeNavigation.tsx
index 1e660e9..f65de22 100644
--- a/src/components/home/HomeNavigation.tsx
+++ b/src/components/home/HomeNavigation.tsx
@@ -1,10 +1,14 @@
+import { useState } from 'react'
 import { Link } from 'react-router-dom'
+import { FiMenu, FiX } from 'react-icons/fi'
 import Logo from '../../assets/logo.png'
 import KakaoOpenChatButton from '../common/KakaoOpenChatButton'
 
 const KAKAO_CHAT_LINK = 'https://open.kakao.com/o/s4tfG2Ah'
 
 const HomeNavigation = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
   return (
     <nav className="bg-white/80 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -15,16 +19,19 @@ const HomeNavigation = () => {
               className="w-8 h-8"
               alt="MapleLink Logo"
             />
-            <span className="font-bold text-xl text-gray-900">MapleLink</span>
+            <span className="font-bold text-lg sm:text-xl text-gray-900">
+              MapleLink
+            </span>
           </div>
-          <div className="flex items-center gap-4">
+
+          <div className="hidden sm:flex items-center gap-4">
             <KakaoOpenChatButton
               chatLink={KAKAO_CHAT_LINK}
               className="!py-1.5 !px-3 text-sm"
             />
             <Link
               to="/apiGuide"
-              className="text-gray-600 hover:text-blue-600 font-medium text-sm">
+              className="text-gray-600 hover:text-blue-600 font-medium text-sm whitespace-nowrap">
               API 가이드
             </Link>
             <Link
@@ -33,7 +40,36 @@ const HomeNavigation = () => {
               FAQ
             </Link>
           </div>
+
+          <button
+            className="sm:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            {isMenuOpen ? <FiX size={20} /> : <FiMenu size={20} />}
+          </button>
         </div>
+
+        {isMenuOpen && (
+          <div className="sm:hidden border-t border-gray-200 py-4 bg-white/95 backdrop-blur-sm">
+            <div className="flex flex-col space-y-3">
+              <KakaoOpenChatButton
+                chatLink={KAKAO_CHAT_LINK}
+                className="!py-2 !px-4 text-sm mx-auto"
+              />
+              <Link
+                to="/apiGuide"
+                className="text-gray-600 hover:text-blue-600 font-medium text-sm text-center py-2"
+                onClick={() => setIsMenuOpen(false)}>
+                API 가이드
+              </Link>
+              <Link
+                to="/faq"
+                className="text-gray-600 hover:text-blue-600 font-medium text-sm text-center py-2"
+                onClick={() => setIsMenuOpen(false)}>
+                FAQ
+              </Link>
+            </div>
+          </div>
+        )}
       </div>
     </nav>
   )
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index e8db75a..88a3435 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,3 +1,4 @@
+// src/pages/Home.tsx
 import { Link } from 'react-router-dom'
 import { FiClock, FiChevronRight } from 'react-icons/fi'
 
@@ -14,8 +15,12 @@ const Home = () => {
       <HomeNavigation />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <HeroSection />
-        <div className="grid grid-cols-1 md:grid-cols-2  gap-6 mb-12">
+
+        <div className="mb-6">
           <GuildSearchSection />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
           <CharacterSearchSection />
           <FeatureShowcase />
         </div>

From 02010ef4347bcb95b239bb18de49c77831e078af Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Fri, 5 Sep 2025 22:19:25 +0900
Subject: [PATCH 3/6] =?UTF-8?q?[style]=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=ED=8C=A8=EB=94=A9=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Layout.tsx | 4 ++--
 src/pages/Home.tsx               | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index ebf2ee6..7b1949b 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -38,9 +38,9 @@ const Layout = ({ children, hide }: LayoutProps) => {
   }
 
   return (
-    <div className="w-full max-w-[1440px] min-h-screen mx-auto flex flex-col bg-gradient-to-br from-white via-blue-50 to-indigo-50">
+    <div className="max-w-[1440px] min-h-dvh mx-auto flex flex-col bg-gradient-to-br from-white via-blue-50 to-indigo-50">
       {!hide && <Header />}
-      <main className="flex flex-1 h-full items-center justify-center py-4 sm:py-6 px-4 sm:px-6">
+      <main className="flex flex-1 h-full items-center justify-center">
         <div className="w-full mx-auto ">{children}</div>
       </main>
       {!hide && <Footer />}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 88a3435..2729422 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,4 +1,3 @@
-// src/pages/Home.tsx
 import { Link } from 'react-router-dom'
 import { FiClock, FiChevronRight } from 'react-icons/fi'
 
@@ -11,7 +10,7 @@ import { recentNotices } from '../data/notices'
 
 const Home = () => {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
+    <div className="min-h-dvh bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
       <HomeNavigation />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <HeroSection />

From d5c87d6e5295de3ff8616eda3c3a57deb599afc8 Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Fri, 5 Sep 2025 23:53:41 +0900
Subject: [PATCH 4/6] =?UTF-8?q?[Refactor]=20=EC=B5=9C=EC=83=81=EB=8B=A8=20?=
 =?UTF-8?q?=EC=84=B9=EC=85=98=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HeroSection.tsx | 47 +++++++++++++++--------------
 src/hooks/useAuth.ts                | 41 +++++++++++++++++++------
 2 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 43e8e8d..340ca48 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -5,33 +5,34 @@ import { useUserStore } from '../../store/userStore'
 import { guest } from '../../data/guest'
 import Logo from '../../assets/logo.png'
 import GoogleLogo from '../../assets/gogle.svg'
+import { useShallow } from 'zustand/react/shallow'
 
 const HeroSection = () => {
-  const { userLogin } = useAuth()
-  const { storeLogin } = useAuthStore()
-  const { setUserInfo, setCharacterOcid } = useUserStore()
+  const { userLogin, isLoading } = useAuth()
+  const storeLogin = useAuthStore(s => s.storeLogin)
+  const [setUserInfo, setCharacterOcid] = useUserStore(
+    useShallow(s => [s.setUserInfo, s.setCharacterOcid])
+  )
   const nav = useNavigate()
 
   const handleGuestLogin = async () => {
-    await storeLogin('', '', 'guest')
-    setCharacterOcid(guest.ocid)
-    nav('/character')
+    try {
+      await storeLogin('', '', 'guest')
+      setCharacterOcid(guest.ocid)
+      nav('/character')
+    } catch (error) {
+      console.error('게스트 로그인 실패:', error)
+      alert('게스트 로그인에 실패했습니다.')
+    }
   }
 
   const handleMemberLogin = async () => {
-    try {
-      const userInfo = await userLogin()
-      if (userInfo) {
-        setUserInfo(userInfo)
-        setCharacterOcid(userInfo.ocid!)
-        if (userInfo?.nexonApiKey) {
-          nav('/character')
-        } else {
-          nav('/signup')
-        }
-      }
-    } catch {
-      alert('로그인에 실패했습니다.')
+    const userInfo = await userLogin()
+    if (userInfo) {
+      setUserInfo(userInfo)
+      setCharacterOcid(userInfo.ocid!)
+      const redirectPath = userInfo.nexonApiKey ? '/character' : '/signup'
+      nav(redirectPath)
     }
   }
 
@@ -60,18 +61,20 @@ const HeroSection = () => {
       <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4 mt-6 sm:mt-8 px-4">
         <button
           onClick={handleGuestLogin}
-          className="w-full sm:w-auto px-5 py-3 sm:py-2.5 bg-white text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors font-medium">
+          disabled={isLoading}
+          className="w-full sm:w-auto px-5 py-3 sm:py-2.5 bg-white text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed">
           체험하기
         </button>
         <button
           onClick={handleMemberLogin}
-          className="w-full sm:w-auto px-5 py-3 sm:py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2 font-medium">
+          disabled={isLoading}
+          className="w-full sm:w-auto px-5 py-3 sm:py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2 font-medium disabled:opacity-50 disabled:cursor-not-allowed">
           <img
             src={GoogleLogo}
             alt="Google"
             className="w-5 h-5"
           />
-          Google로 시작하기
+          {isLoading ? '로그인 중...' : 'Google로 시작하기'}
         </button>
       </div>
     </div>
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index d070fbc..2c7d15c 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -5,14 +5,20 @@ import { fetchUserInfo } from '../apis/user/userController'
 import { useNavigate } from 'react-router-dom'
 import axios from 'axios'
 import { ErrorResponse } from '../types'
+import { useShallow } from 'zustand/react/shallow'
+import { useState } from 'react'
 
 export const useAuth = () => {
-  const { storeLogin, storeLogout } = useAuthStore()
+  const [isLoading, setIsLoading] = useState(false)
+  const [storeLogin, storeLogout] = useAuthStore(
+    useShallow(s => [s.storeLogin, s.storeLogout])
+  )
   const nav = useNavigate()
 
   const userLogin = async () => {
     try {
-      const provider = await new GoogleAuthProvider()
+      setIsLoading(true)
+      const provider = new GoogleAuthProvider()
       const result = await signInWithPopup(authService, provider)
       const token = await result.user.getIdToken()
 
@@ -31,19 +37,34 @@ export const useAuth = () => {
       if (axios.isAxiosError(error) && error.response?.data) {
         const errorData = error.response.data as ErrorResponse
         alert(errorData.data.message)
+      } else {
+        // Firebase 로그인 에러나 기타 에러 처리
+        console.error('로그인 에러:', error)
+        alert('로그인 중 오류가 발생했습니다.')
       }
       return null
+    } finally {
+      setIsLoading(false)
     }
   }
 
-  const userLogout = () => {
-    signOut(authService)
-      .then(() => {
-        storeLogout()
-        nav('/')
-      })
-      .catch(error => console.error(error))
+  const userLogout = async () => {
+    try {
+      setIsLoading(true)
+      await signOut(authService)
+      storeLogout()
+      nav('/')
+    } catch (error) {
+      console.error('로그아웃 에러:', error)
+      alert('로그아웃 중 오류가 발생했습니다.')
+    } finally {
+      setIsLoading(false)
+    }
   }
 
-  return { userLogin, userLogout }
+  return {
+    userLogin,
+    userLogout,
+    isLoading
+  }
 }

From 78e1dd7e996a63515c732dcf6ec41cc4daaecb3d Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Sat, 6 Sep 2025 00:59:03 +0900
Subject: [PATCH 5/6] =?UTF-8?q?[Refactor]=20tanstack=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=ED=9B=85=EC=97=90=EC=84=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/GuildSearchSection.tsx    |  4 +-
 .../{useSearchGuild.ts => useGuildSearch.ts}  | 76 +++-------------
 src/hooks/search/useGuildSearchQuery.ts       | 89 +++++++++++++++++++
 src/pages/SearchGuild.tsx                     | 18 ++--
 4 files changed, 112 insertions(+), 75 deletions(-)
 rename src/hooks/search/{useSearchGuild.ts => useGuildSearch.ts} (57%)
 create mode 100644 src/hooks/search/useGuildSearchQuery.ts

diff --git a/src/components/home/GuildSearchSection.tsx b/src/components/home/GuildSearchSection.tsx
index a0e010d..71f1e43 100644
--- a/src/components/home/GuildSearchSection.tsx
+++ b/src/components/home/GuildSearchSection.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { FiUsers } from 'react-icons/fi'
-import { useSearchGuild } from '../../hooks/search/useSearchGuild'
+import { useGuildSearch } from '../../hooks/search/useGuildSearch'
 import { servers } from '../../data/worlds'
 import Button from '../common/Button'
 
@@ -16,7 +16,7 @@ const GuildSearchSection = () => {
     handleGuildKeyPress,
     guildName,
     setGuildName
-  } = useSearchGuild()
+  } = useGuildSearch()
 
   const onSearchGuild = async () => {
     nav('/searchGuild')
diff --git a/src/hooks/search/useSearchGuild.ts b/src/hooks/search/useGuildSearch.ts
similarity index 57%
rename from src/hooks/search/useSearchGuild.ts
rename to src/hooks/search/useGuildSearch.ts
index 22f8602..fd762ea 100644
--- a/src/hooks/search/useSearchGuild.ts
+++ b/src/hooks/search/useGuildSearch.ts
@@ -1,19 +1,14 @@
-import {
-  searchGuildMemberWithoutLogin,
-  searchGuildWithoutLogin
-} from '../../apis/guild/guildController'
 import { useCallback, useEffect, useState } from 'react'
 
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { SearchGuildResponse } from '../../types/guild'
+import { useGuildSearchQuery } from './useGuildSearchQuery'
 
-export const useSearchGuild = () => {
+export const useGuildSearch = () => {
   const [guildList, setGuildList] = useState<string[]>([])
   const [selectedServer, setSelectedServer] = useState('')
   const [guildName, setGuildName] = useState('')
   const [searchParams, setSearchParams] = useSearchParams()
-  const [isUpdating, setIsUpdating] = useState(false)
+
   const navigate = useNavigate()
   const params = new URLSearchParams(searchParams)
 
@@ -23,64 +18,18 @@ export const useSearchGuild = () => {
 
   const isQueryEnabled = serachGuildList.length > 0 && !!serachServer
 
-  const queryClient = useQueryClient()
-
   const {
-    data: guildsInfo,
+    guildsInfo,
     isLoading,
-    isError
-  } = useQuery({
-    queryKey: ['guildsInfo', serachGuildList, serachServer],
-    queryFn: () => searchGuildWithoutLogin(serachGuildList, serachServer),
-    retry: false,
-    staleTime: 1000 * 60 * 10,
+    isError,
+    searchMemberInfo,
+    isUpdatingMembers
+  } = useGuildSearchQuery({
+    guildList: serachGuildList,
+    server: serachServer,
     enabled: isQueryEnabled
   })
 
-  const mainCharacterInfoSearchMutation = useMutation({
-    mutationFn: (members: string[]) => searchGuildMemberWithoutLogin(members)
-  })
-
-  const mainCharacterInfoSearchHandler = async () => {
-    if (!guildsInfo) return
-    setIsUpdating(true)
-
-    try {
-      const allMemberNames = guildsInfo
-        .map(guild => guild.guildMember.map(member => member.name))
-        .flat()
-
-      const response =
-        await mainCharacterInfoSearchMutation.mutateAsync(allMemberNames)
-
-      queryClient.setQueryData(
-        ['guildsInfo', serachGuildList, serachServer],
-        (oldData: SearchGuildResponse[]) => {
-          if (!oldData) return oldData
-
-          return oldData.map(guild => ({
-            ...guild,
-            guildMember: guild.guildMember.map(member => {
-              const match = response.find(res => res.memberName === member.name)
-              const matchedMember = match?.mainCharacterInfo
-
-              return {
-                ...member,
-                type: match?.type ?? member.type,
-                mainCharacterInfo: matchedMember ?? member.mainCharacterInfo
-              }
-            })
-          }))
-        }
-      )
-    } catch (error) {
-      console.error('메인 캐릭터 정보 조회 중 오류 발생:', error)
-      alert('메인 캐릭터 정보 조회 중 오류가 발생했습니다.')
-    } finally {
-      setIsUpdating(false)
-    }
-  }
-
   const addGuildList = (guildName: string) => {
     if (!selectedServer) {
       alert('서버를 선택해주세요.')
@@ -154,12 +103,13 @@ export const useSearchGuild = () => {
     setGuildName,
     guildsInfo,
     isLoading,
-    isUpdating,
+    searchMemberInfo,
+    isUpdatingMembers,
     addGuildList,
     removeGuildList,
     handleGuildKeyPress,
     selectedGuildMember,
-    mainCharacterInfoSearchHandler,
+
     resetSearchParams
   }
 }
diff --git a/src/hooks/search/useGuildSearchQuery.ts b/src/hooks/search/useGuildSearchQuery.ts
new file mode 100644
index 0000000..5b26650
--- /dev/null
+++ b/src/hooks/search/useGuildSearchQuery.ts
@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  searchGuildWithoutLogin,
+  searchGuildMemberWithoutLogin
+} from '../../apis/guild/guildController'
+import { SearchGuildResponse } from '../../types/guild'
+
+interface UseGuildSearchApiProps {
+  guildList: string[]
+  server: string
+  enabled?: boolean
+}
+
+export const useGuildSearchQuery = ({
+  guildList,
+  server,
+  enabled = true
+}: UseGuildSearchApiProps) => {
+  const queryClient = useQueryClient()
+  const [isUpdatingMembers, setIsUpdatingMembers] = useState(false)
+
+  // 길드 정보 조회
+  const guildsQuery = useQuery({
+    queryKey: ['guildsInfo', guildList, server],
+    queryFn: () => searchGuildWithoutLogin(guildList, server),
+    enabled: enabled && guildList.length > 0 && !!server,
+    retry: false,
+    staleTime: 1000 * 60 * 10,
+    refetchOnWindowFocus: false
+  })
+
+  // 멤버 정보 검색
+  const memberSearchMutation = useMutation({
+    mutationFn: (members: string[]) => searchGuildMemberWithoutLogin(members),
+    onSuccess: response => {
+      queryClient.setQueryData(
+        ['guildsInfo', guildList, server],
+        (oldData: SearchGuildResponse[]) => {
+          if (!oldData) return oldData
+          return oldData.map(guild => ({
+            ...guild,
+            guildMember: guild.guildMember.map(member => {
+              const match = response.find(res => res.memberName === member.name)
+              return {
+                ...member,
+                type: match?.type ?? member.type,
+                mainCharacterInfo:
+                  match?.mainCharacterInfo ?? member.mainCharacterInfo
+              }
+            })
+          }))
+        }
+      )
+    }
+  })
+
+  // 멤버 정보 검색
+  const searchMemberInfo = async () => {
+    if (!guildsQuery.data) {
+      throw new Error('길드 정보가 없습니다.')
+    }
+
+    setIsUpdatingMembers(true)
+    try {
+      const allMemberNames = guildsQuery.data.flatMap(guild =>
+        guild.guildMember.map(member => member.name)
+      )
+
+      await memberSearchMutation.mutateAsync(allMemberNames)
+    } catch (error) {
+      console.error('메인 캐릭터 정보 조회 실패:', error)
+      throw error
+    } finally {
+      setIsUpdatingMembers(false)
+    }
+  }
+
+  return {
+    guildsInfo: guildsQuery.data,
+
+    isLoading: guildsQuery.isLoading,
+    isError: guildsQuery.isError,
+    isUpdatingMembers,
+
+    searchMemberInfo,
+    refetch: guildsQuery.refetch
+  }
+}
diff --git a/src/pages/SearchGuild.tsx b/src/pages/SearchGuild.tsx
index f5cf9a4..027dd9e 100644
--- a/src/pages/SearchGuild.tsx
+++ b/src/pages/SearchGuild.tsx
@@ -1,6 +1,6 @@
 import { FiUsers } from 'react-icons/fi'
 import Button from '../components/common/Button'
-import { useSearchGuild } from '../hooks/search/useSearchGuild'
+import { useGuildSearch } from '../hooks/search/useGuildSearch'
 
 import { servers } from '../data/worlds'
 import { MemberContainer } from '../components/guild/MemberContainer'
@@ -25,10 +25,10 @@ export const SearchGuild = () => {
     searchGuildHandler,
     isLoading,
     selectedGuildMember,
-    mainCharacterInfoSearchHandler,
-    isUpdating,
+    searchMemberInfo,
+    isUpdatingMembers,
     resetSearchParams
-  } = useSearchGuild()
+  } = useGuildSearch()
 
   const [searchCharacter, setSearchCharacter] = useState('')
   const { activeModal, openModal } = useModalStore()
@@ -173,16 +173,14 @@ export const SearchGuild = () => {
                       guildName: v.guildName
                     })) as Guild[]) || []
                   }
-                  mainCharacterInfoSearchHandler={
-                    mainCharacterInfoSearchHandler
-                  }
-                  isUpdating={isUpdating}
+                  mainCharacterInfoSearchHandler={searchMemberInfo}
+                  isUpdating={isUpdatingMembers}
                 />
               </div>
             </div>
             <div className="p-6">
               <div className="min-h-[600px]">
-                {(isLoading || isUpdating) && (
+                {(isLoading || isUpdatingMembers) && (
                   <div className="flex justify-center items-center">
                     <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
                     <p className="text-gray-600 font-medium">
@@ -193,7 +191,7 @@ export const SearchGuild = () => {
                 {guildsInfo &&
                   guildsInfo.length > 0 &&
                   !isLoading &&
-                  !isUpdating && (
+                  !isUpdatingMembers && (
                     <MemberContainer
                       members={selectedGuildMember?.guildMember}
                       allMembers={guildsInfo.map(v => ({

From 987ee7d6534e7b9ba0e4b0be6c227c960800d3d4 Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Sat, 6 Sep 2025 01:12:05 +0900
Subject: [PATCH 6/6] =?UTF-8?q?[Refactor]=20=EC=BA=90=EB=A6=AD=ED=84=B0=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=EC=BB=A4=EC=8A=A4=ED=85=80=ED=9B=85=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/CharacterSearchSection.tsx           | 42 +++---------------
 src/hooks/search/useCharacterSearch.ts        | 44 +++++++++++++++++++
 2 files changed, 51 insertions(+), 35 deletions(-)
 create mode 100644 src/hooks/search/useCharacterSearch.ts

diff --git a/src/components/home/CharacterSearchSection.tsx b/src/components/home/CharacterSearchSection.tsx
index ccfe9e1..801e049 100644
--- a/src/components/home/CharacterSearchSection.tsx
+++ b/src/components/home/CharacterSearchSection.tsx
@@ -1,42 +1,14 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { FiSearch } from 'react-icons/fi'
-import { useAuthStore } from '../../store/authStore'
-import { useUserStore } from '../../store/userStore'
-import { searchCharacterOcid } from '../../apis/character/characterController'
+import { useCharacterSearch } from '../../hooks/search/useCharacterSearch'
 import Button from '../common/Button'
 
 const CharacterSearchSection = () => {
-  const [characterName, setCharacterName] = useState('')
-  const [searchLoading, setSearchLoading] = useState(false)
-  const { storeLogin } = useAuthStore()
-  const { setCharacterOcid } = useUserStore()
-  const nav = useNavigate()
-
-  const searchCharacterHandler = async () => {
-    if (characterName.trim() === '') {
-      alert('캐릭터 이름을 입력해주세요.')
-      return
-    }
-
-    setSearchLoading(true)
-    try {
-      const { ocid } = await searchCharacterOcid(characterName.trim())
-
-      if (!ocid) {
-        alert('캐릭터를 찾을 수 없습니다.')
-        return
-      }
-      await storeLogin('', '', 'search')
-      setCharacterOcid(ocid)
-      nav('/searchCharacter')
-    } catch {
-      alert('캐릭터 검색에 실패했습니다.')
-    } finally {
-      setSearchLoading(false)
-    }
-  }
-
+  const {
+    searchCharacterHandler,
+    characterName,
+    setCharacterName,
+    searchLoading
+  } = useCharacterSearch()
   return (
     <div className="bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden h-fit self-start">
       <div className="flex flex-col justify-between">
diff --git a/src/hooks/search/useCharacterSearch.ts b/src/hooks/search/useCharacterSearch.ts
new file mode 100644
index 0000000..5edc007
--- /dev/null
+++ b/src/hooks/search/useCharacterSearch.ts
@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { useAuthStore } from '../../store/authStore'
+import { useUserStore } from '../../store/userStore'
+import { useNavigate } from 'react-router-dom'
+import { searchCharacterOcid } from '../../apis/character/characterController'
+
+export const useCharacterSearch = () => {
+  const [characterName, setCharacterName] = useState('')
+  const [searchLoading, setSearchLoading] = useState(false)
+  const storeLogin = useAuthStore(s => s.storeLogin)
+  const setCharacterOcid = useUserStore(s => s.setCharacterOcid)
+  const nav = useNavigate()
+
+  const searchCharacterHandler = async () => {
+    if (characterName.trim() === '') {
+      alert('캐릭터 이름을 입력해주세요.')
+      return
+    }
+
+    setSearchLoading(true)
+    try {
+      const { ocid } = await searchCharacterOcid(characterName.trim())
+
+      if (!ocid) {
+        alert('캐릭터를 찾을 수 없습니다.')
+        return
+      }
+      await storeLogin('', '', 'search')
+      setCharacterOcid(ocid)
+      nav('/searchCharacter')
+    } catch {
+      alert('캐릭터 검색에 실패했습니다.')
+    } finally {
+      setSearchLoading(false)
+    }
+  }
+
+  return {
+    searchCharacterHandler,
+    characterName,
+    setCharacterName,
+    searchLoading
+  }
+}