[fix, refactor] 스크롤 커스텀 및 토스트/로그인 로직 및 훅 분리 (#84)

ahk0413 · EunbinJung · commit 2e724f4370b8 · 2025-09-30T11:51:17.000+09:00
* [fix] next이미지 경고 수정 및 챗봇 챗 로딩 위치 이동

* [style] 전체페이지 스크롤 커스텀

* [fix] toast 훅으로 변경, 로그아웃 로직 훅으로 변경

* [refactor] 훅 분리

* [docs] useToast 훅 폴더 경로 변경

* [docs] 폴더 명 변경
diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
@@ -4,7 +4,6 @@ import Button from '@/shared/components/button/Button';
 import TextButton from '@/shared/components/button/TextButton';
 import Input from '@/shared/components/Input-box/Input';
 import { useState } from 'react';
-import { customToast } from '@/shared/components/toast/CustomToastUtils';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
 import SelectBox from '@/domains/shared/components/select-box/SelectBox';
 
@@ -13,10 +12,12 @@ import LikeBtn from '@/domains/community/components/like/LikeBtn';
 import Share from '@/domains/shared/components/share/Share';
 import Keep from '@/domains/shared/components/keep/Keep';
 import ConfirmModal from '@/shared/components/modal-pop/ConfirmModal';
+import { useToast } from '@/shared/hook/useToast';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
   const [isConfirmOpen, setConfirmOpen] = useState(false);
+  const { toastSuccess, toastInfo, toastError } = useToast();
 
   return (
     <div className="p-6 space-y-6 bg-primary">
@@ -78,21 +79,21 @@ function Page() {
           <div className="flex gap-2">
             <button
               className="px-4 py-2 bg-green-300 text-black rounded"
-              onClick={() => customToast.success('성공 메시지 \n 줄바꿈은 이렇게')}
+              onClick={() => toastSuccess('성공 메시지 \n 줄바꿈은 이렇게')}
             >
               Success Toast
             </button>
 
             <button
               className="px-4 py-2 bg-yellow-100 text-black rounded"
-              onClick={() => customToast.info('정보 메시지')}
+              onClick={() => toastInfo('정보 메시지')}
             >
               Info Toast
             </button>
 
             <button
               className="px-4 py-2 bg-red-200 text-black rounded"
-              onClick={() => customToast.error('오류 메시지')}
+              onClick={() => toastError('오류 메시지')}
             >
               Error Toast
             </button>
diff --git a/src/domains/login/components/LoginRedirectHandler.tsx b/src/domains/login/components/LoginRedirectHandler.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import Spinner from '@/shared/components/spinner/Spinner';
+import WelcomeModal from '@/domains/login/components/WelcomeModal';
+import { useLoginRedirect } from '../hook/useAuthHooks';
+
+function LoginRedirectHandler() {
+  const { loading, welcomeModalOpen, handleCloseWelcomeModal, user } = useLoginRedirect();
+
+  if (loading) {
+    return (
+      <div className="page-layout max-w-824 flex-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* 첫 유저 모달 */}
+      {user && (
+        <WelcomeModal
+          userNickname={user.nickname}
+          open={welcomeModalOpen}
+          onClose={handleCloseWelcomeModal}
+        />
+      )}
+    </>
+  );
+}
+export default LoginRedirectHandler;
diff --git a/src/domains/login/components/LogoutConfirm.tsx b/src/domains/login/components/LogoutConfirm.tsx
@@ -1,18 +1,23 @@
 import ConfirmModal from '@/shared/components/modal-pop/ConfirmModal';
+import { useLogout } from '../hook/useAuthHooks';
 
 interface Props {
   open: boolean;
   onClose: () => void;
-  onLogout: () => void;
 }
 
-function LogoutConfirm({ open, onClose, onLogout }: Props) {
+function LogoutConfirm({ open, onClose }: Props) {
+  const logoutHandler = useLogout();
+
   return (
     <ConfirmModal
       open={open}
       onClose={onClose}
       description="정말 로그아웃 하시겠어요?"
-      onConfirm={onLogout}
+      onConfirm={async () => {
+        await logoutHandler();
+        onClose();
+      }}
       onCancel={onClose}
     />
   );
diff --git a/src/domains/login/hook/useAuthHooks.ts b/src/domains/login/hook/useAuthHooks.ts
@@ -0,0 +1,75 @@
+import { useAuthStore } from '@/domains/shared/store/auth';
+import { useCallback } from 'react';
+import { useEffect, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { getCookie, removeCookie } from '@/domains/shared/auth/utils/cookie';
+import { useToast } from '@/shared/hook/useToast';
+
+export const useLogout = () => {
+  const logout = useAuthStore((state) => state.logout);
+  const { toastSuccess, toastError } = useToast();
+
+  const handleLogout = useCallback(async () => {
+    try {
+      await logout();
+      toastSuccess('로그아웃 되었습니다.');
+    } catch (err) {
+      console.error('로그아웃 실패', err);
+      toastError('로그아웃 실패 ❌ 다시 시도해주세요.');
+    }
+  }, [logout, toastSuccess, toastError]);
+
+  return handleLogout;
+};
+
+export const useLoginRedirect = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user, updateUser } = useAuthStore();
+  const { toastSuccess } = useToast();
+
+  const [loading, setLoading] = useState(true);
+  const [welcomeModalOpen, setWelcomeModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (!user && loading) {
+      updateUser()
+        .then((fetchedUser) => {
+          if (!fetchedUser) router.replace('/login');
+        })
+        .catch(() => router.replace('/login'))
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, [user, loading, updateUser, router]);
+
+  useEffect(() => {
+    if (!user || loading) return;
+
+    const preLoginPath = getCookie('preLoginPath') || '/';
+
+    if (user && preLoginPath === '/login') {
+      router.replace('/');
+      removeCookie('preLoginPath');
+      return;
+    }
+
+    if (pathname.startsWith('/login/user/first-user')) {
+      setWelcomeModalOpen(true);
+    } else if (pathname.startsWith('/login/user/success')) {
+      toastSuccess(`${user.nickname}님 \n 로그인 성공 🎉`);
+      router.replace(preLoginPath);
+      removeCookie('preLoginPath');
+    }
+  }, [pathname, user, loading, router, toastSuccess]);
+
+  const handleCloseWelcomeModal = () => {
+    setWelcomeModalOpen(false);
+    const preLoginPath = getCookie('preLoginPath') || '/';
+    removeCookie('preLoginPath');
+    router.replace(preLoginPath);
+  };
+
+  return { loading, welcomeModalOpen, handleCloseWelcomeModal, user };
+};
diff --git a/src/domains/recommend/components/BotMessage.tsx b/src/domains/recommend/components/BotMessage.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { useState } from 'react';
 import BotCocktailCard from './BotCocktailCard';
 import BotOptions from './BotOptions';
+import TypingIndicator from './TypingIndicator';
 
 interface Message {
   id: string;
@@ -82,6 +83,7 @@ function BotMessage() {
             )}
           </div>
         ))}
+        <TypingIndicator />
       </div>
     </article>
   );
diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
@@ -4,7 +4,6 @@ import { useState } from 'react';
 import BotMessage from './BotMessage';
 import UserMessage from './UserMessage';
 import MessageInput from './MessageInput';
-import TypingIndicator from './TypingIndicator';
 
 function ChatSection() {
   const [messages, setMessages] = useState<string[]>([]);
@@ -18,7 +17,7 @@ function ChatSection() {
       <h2 className="sr-only">대화 목록 및 입력 창</h2>
       <div className="flex flex-col gap-10 pb-20">
         <BotMessage />
-        <TypingIndicator />
+
         {messages.map((msg, i) => (
           <UserMessage key={i} message={msg} />
         ))}
diff --git a/src/domains/recommend/components/TypingIndicator.tsx b/src/domains/recommend/components/TypingIndicator.tsx
@@ -6,7 +6,15 @@ function TypingIndicator() {
     <div className="relative flex items-center w-fit p-3 rounded-2xl rounded-tl-none bg-white text-black overflow-hidden">
       <p className="inline-block animate-fade-in">준비 중…</p>
       <div className="relative w-10 h-10 animate-shake">
-        <Image src={shaker} alt="Cocktail Shaker" fill className="object-contain" priority />
+        <Image
+          src={shaker}
+          alt=""
+          width={40}
+          height={40}
+          className="object-contain"
+          priority
+          aria-hidden
+        />
       </div>
     </div>
   );
diff --git a/src/domains/shared/store/auth.ts b/src/domains/shared/store/auth.ts
@@ -0,0 +1,79 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface User {
+  id: string;
+  email: string;
+  nickname: string;
+  isFirstLogin: boolean;
+  abv_degree?: number;
+  provider?: 'naver' | 'kakao' | 'google';
+}
+
+interface AuthState {
+  user: User | null;
+  accessToken: string | null;
+  isLoggedIn: boolean;
+  setUser: (user: User, token: string) => void;
+  logout: () => Promise<void>;
+  loginWithProvider: (provider: User['provider']) => void;
+
+  updateUser: () => Promise<User | null>;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      accessToken: null,
+      isLoggedIn: false,
+
+      loginWithProvider: (provider) => {
+        window.location.href = `http://localhost:8080/oauth2/authorization/${provider}`;
+      },
+
+      setUser: (user, token) => {
+        const updatedUser = { ...user, abv_degree: 5.0 };
+        set({ user: updatedUser, accessToken: token, isLoggedIn: true });
+      },
+
+      logout: async () => {
+        try {
+          await fetch('http://localhost:8080/user/auth/logout', {
+            method: 'POST',
+            credentials: 'include',
+          });
+          set({ user: null, accessToken: null, isLoggedIn: false });
+        } catch (err) {
+          console.error('로그아웃 실패', err);
+        }
+      },
+
+      updateUser: async () => {
+        try {
+          const res = await fetch('http://localhost:8080/user/auth/refresh', {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+          });
+
+          if (!res.ok) throw new Error('토큰 갱신 실패');
+          const data = await res.json();
+          const userInfo = data?.data?.user;
+          const accessToken = data?.data?.accessToken;
+
+          if (userInfo && accessToken) {
+            set({ user: userInfo, accessToken, isLoggedIn: true });
+            return userInfo;
+          }
+          return null;
+        } catch (err) {
+          console.error('updateUser 실패', err);
+          set({ accessToken: null, user: null, isLoggedIn: false });
+          return null;
+        }
+      },
+    }),
+    { name: 'auth-storage' } // localStorage key
+  )
+);
diff --git a/src/shared/components/header/DropdownMenu.tsx b/src/shared/components/header/DropdownMenu.tsx
diff --git a/src/shared/components/header/HeaderBtn.tsx b/src/shared/components/header/HeaderBtn.tsx
diff --git a/src/shared/hook/useToast.tsx b/src/shared/hook/useToast.tsx
diff --git a/src/shared/styles/_base.css b/src/shared/styles/_base.css
