diff --git a/src/components/home/CharacterSearchSection.tsx b/src/components/home/CharacterSearchSection.tsx new file mode 100644 index 0000000..801e049 --- /dev/null +++ b/src/components/home/CharacterSearchSection.tsx @@ -0,0 +1,47 @@ +import { FiSearch } from 'react-icons/fi' +import { useCharacterSearch } from '../../hooks/search/useCharacterSearch' +import Button from '../common/Button' + +const CharacterSearchSection = () => { + const { + searchCharacterHandler, + characterName, + setCharacterName, + searchLoading + } = useCharacterSearch() + return ( +
+
+
+
+ +
+

캐릭터 검색

+
+
+ 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" + /> + +
+
+
+ ) +} + +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 ( +
+
+
+ +
+

체험하기

+
+
+
+

비로그인 이용 가능한 기능

+
+ + 캐릭터 정보 조회 +
+
+ + 길드 정보 조회 +
+
+
+

+ 로그인 후 이용 가능한 기능 +

+
+ + 캘린더로 일정 관리하기 +
+
+ + 길드원 관리하기 +
+
+ +
+
+ ) +} + +export default FeatureShowcase diff --git a/src/components/home/GuildSearchSection.tsx b/src/components/home/GuildSearchSection.tsx new file mode 100644 index 0000000..71f1e43 --- /dev/null +++ b/src/components/home/GuildSearchSection.tsx @@ -0,0 +1,119 @@ +import { useNavigate } from 'react-router-dom' +import { FiUsers } from 'react-icons/fi' +import { useGuildSearch } from '../../hooks/search/useGuildSearch' +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 + } = useGuildSearch() + + const onSearchGuild = async () => { + nav('/searchGuild') + searchGuildHandler() + } + + return ( +
+
+
+
+ +
+

+ 길드 검색 (최대 4개) +

+
+ +
+ {/* 서버 선택과 입력 필드 */} +
+ + +
+ 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" + /> + +
+
+ + {/* 길드 목록 */} + {guildList.length > 0 && ( +
+

검색할 길드 목록

+
+ {guildList.map(guild => ( +
+ {guild} + +
+ ))} +
+
+ )} + + +
+
+
+ ) +} + +export default GuildSearchSection diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx new file mode 100644 index 0000000..340ca48 --- /dev/null +++ b/src/components/home/HeroSection.tsx @@ -0,0 +1,84 @@ +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' +import { useShallow } from 'zustand/react/shallow' + +const HeroSection = () => { + 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 () => { + try { + await storeLogin('', '', 'guest') + setCharacterOcid(guest.ocid) + nav('/character') + } catch (error) { + console.error('게스트 로그인 실패:', error) + alert('게스트 로그인에 실패했습니다.') + } + } + + const handleMemberLogin = async () => { + const userInfo = await userLogin() + if (userInfo) { + setUserInfo(userInfo) + setCharacterOcid(userInfo.ocid!) + const redirectPath = userInfo.nexonApiKey ? '/character' : '/signup' + nav(redirectPath) + } + } + + return ( +
+
+ 메이플링크 로고 +
+ + + 메이플스토리 통합 관리 플랫폼 + +
+
+

+ 메이플스토리를 +
더 스마트하게 +

+

+ 캐릭터부터 길드까지, 한눈에 관리하세요 +

+
+ + +
+
+ ) +} + +export default HeroSection diff --git a/src/components/home/HomeNavigation.tsx b/src/components/home/HomeNavigation.tsx new file mode 100644 index 0000000..f65de22 --- /dev/null +++ b/src/components/home/HomeNavigation.tsx @@ -0,0 +1,78 @@ +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 ( + + ) +} + +export default HomeNavigation 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 ( -
+
{!hide &&
} -
+
{children}
{!hide &&