[Feat] 토스트 메세지 구현 및 툴팁 CSS 수정

.github/pull_request_template.md

@@ -1,4 +1,3 @@
-# .github/pull_request_template.md
 
 ## 🔍 작업 유형
 

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.11.0",
     "browser-image-compression": "^2.0.2",
     "env": "^0.0.2",
+    "framer-motion": "^12.23.12",
     "imagemin": "^9.0.1",
     "imagemin-webp": "^8.0.0",
     "react": "^19.1.0",

src/App.tsx

@@ -1,6 +1,11 @@
 import { RouterProvider } from 'react-router-dom';
 import router from './routes/router';
+import ToastContextProvider from './context/ToastContextProvider';
 
 export default function App() {
-    return <RouterProvider router={router} />;
+    return (
+        <ToastContextProvider>
+            <RouterProvider router={router} />
+        </ToastContextProvider>
+    );
 }

src/api/fetchChapters.ts

@@ -1,6 +1,6 @@
 import { ApiError } from '../types/@common/api';
 import type { Chapter } from '../types/@common/chapter';
-import { transformChapters } from '../utils/transformChapter';
+import { transformChapters } from '../types/transformers/chapters';
 
 export default async function fetchChapters(): Promise<Chapter[]> {
     const accessToken = localStorage.getItem('accessToken');

src/api/fetchUnits.ts

@@ -3,7 +3,17 @@ import type { Unit } from '../types/@common/unit';
 import transformUnits from '../types/transformers/units';
 
 export default async function fetchUnits(id: number): Promise<Unit[]> {
+    if (!Number.isFinite(id)) {
+        throw new ApiError('유효하지 않은 학습 ID입니다.', 'INVALID_ARGUMENT');
+    }
+
     const accessToken = localStorage.getItem('accessToken');
+
+    if (!accessToken) {
+        console.log('로그인이 필요합니다.', 'UNAUTHORIZED');
+        throw new ApiError('로그인이 필요합니다.', 'UNAUTHORIZED');
+    }
+
     try {
         const response = await fetch(`https://grav-it.inuappcenter.kr/api/v1/learning/${id}/units`, {
             method: 'GET',

src/components/@common/auth/ProtectedRoute.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useAuthHandler } from '../../../hooks/useAuthHandler';
+
+interface ProtectedRouteProps {
+    children: React.ReactNode;
+}
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+    const { checkAuthToken, redirectToLogin } = useAuthHandler();
+
+    useEffect(() => {
+        if (!checkAuthToken()) {
+            redirectToLogin();
+        }
+    }, [checkAuthToken, redirectToLogin]);
+
+    if (!checkAuthToken()) {
+        return null;
+    }
+
+    return <>{children}</>;
+}

src/components/chapter-page/Tooltip.tsx

@@ -4,9 +4,9 @@ function Tooltip({ chapterName, chapterNumber, xp }: { chapterName: string; chap
     return (
         <div className="absolute transform top-full left-1/2 -translate-x-1/2 translate-y-3">
             {/* 툴팁 꼬리 */}
-            <div className="w-0 h-0 mx-auto border-l-[12px] border-r-[12px] border-b-[12px] border-transparent border-b-[#FFB608]" />
+            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-7 w-7 bg-[#FFB608] border-l border-t border-transparent rotate-45 z-40" />
             {/* 툴팁 몸통 */}
-            <div className="bg-[#FFB608] flex flex-col p-4 w-[371px] h-[130px] rounded-2xl justify-between z-50">
+            <div className="bg-[#FFB608] flex flex-col p-4 w-[371px] h-[130px] rounded-2xl justify-between z-50 transform -translate-x-1/2 left-1/2 relative">
                 <h2 className="text-2xl font-bold text-white text-start">{`${chapterName}: ${chapterNumber}챕터`}</h2>
                 <Link
                     to="/lesson"

src/context/ToastContext.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import type { ToastType } from '../types/@common/toast';
+
+type ToastContextType = {
+    showToast: (toast: ToastType) => void;
+};
+
+const ToastContext = createContext<ToastContextType>({
+    showToast: () => {},
+});
+
+export default ToastContext;

src/context/ToastContextProvider.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type PropsWithChildren } from 'react';
+import type { ToastType } from '../types/@common/toast';
+import ToastContext from './ToastContext';
+import { AnimatePresence, motion } from 'framer-motion';
+
+function ToastContextProvider({ children }: PropsWithChildren) {
+    const [toast, setToast] = useState<ToastType | null>(null);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const showToast = useCallback(({ message, duration = 2 }: ToastType) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        setToast({ message, duration });
+
+        timeoutRef.current = setTimeout(() => {
+            setToast(null);
+            timeoutRef.current = null;
+        }, duration * 1000);
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    const contextValue = useMemo(() => ({ showToast }), [showToast]);
+
+    return (
+        <ToastContext.Provider value={contextValue}>
+            {children}
+            <AnimatePresence>
+                {toast && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -20, scale: 0.9 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: -20, scale: 0.9 }}
+                        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                        className="fixed top-1/6 left-1/2 -translate-x-1/2 z-[1000] bg-main-2 text-white rounded-full px-3 py-2"
+                    >
+                        {toast.message}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </ToastContext.Provider>
+    );
+}
+
+export default ToastContextProvider;

src/hooks/useAuthHandler.tsx

@@ -0,0 +1,34 @@
+import { useNavigate } from 'react-router-dom';
+import useToast from './useToast';
+import { useCallback } from 'react';
+import { ApiError } from '../types/@common/api';
+
+export function useAuthHandler() {
+    const navigate = useNavigate();
+    const showToast = useToast();
+
+    const redirectToLogin = useCallback(() => {
+        showToast({ message: '로그인 후 이용할 수 있는 서비스입니다.' });
+        navigate('/', { replace: true });
+    }, [navigate, showToast]);
+
+    const handleApiError = useCallback(
+        (error: unknown) => {
+            if (error instanceof ApiError) {
+                if (['UNAUTHORIZED', 'FORBIDDEN'].includes(error.error)) {
+                    redirectToLogin();
+                    return true;
+                }
+                return false;
+            }
+            return false;
+        },
+        [redirectToLogin]
+    );
+
+    const checkAuthToken = useCallback(() => {
+        return !!localStorage.getItem('accessToken');
+    }, []);
+
+    return { handleApiError, checkAuthToken, redirectToLogin };
+}

src/hooks/useToast.tsx

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import ToastContext from '../context/ToastContext';
+import type { ToastType } from '../types/@common/toast';
+
+export default function useToast() {
+    const { showToast } = useContext(ToastContext);
+    return (toast: ToastType) => showToast(toast);
+}

src/pages/ChapterDetailPage.tsx

@@ -2,14 +2,16 @@ import backgroundImg from '@/assets/images/background.webp';
 import defaultPlanet from '@/assets/images/planets/Moon.png';
 import { useParams } from 'react-router-dom';
 import { getPlanetImage } from '../constants/planet-image';
-
 import MascotSvg from '@/assets/mascot/mascot-space-suit.svg?react';
 import Line from '@/assets/mascot/line.svg?react';
 import CircularSegmentIndicator from '../components/chapter-page/CircularSegmentIndicator';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Tooltip from '../components/chapter-page/Tooltip';
 import fetchUnits from '../api/fetchUnits';
 import { useQuery } from '@tanstack/react-query';
+import shouldRetryApiRequest from '../utils/api-retry';
+import { useAuthHandler } from '../hooks/useAuthHandler';
+import { ApiError } from '../types/@common/api';
 
 const positions = [
     { x: 70, y: 170 },
@@ -23,33 +25,40 @@ const positions = [
 
 function ChapterDetailPage() {
     const { chapterId } = useParams();
+    const { handleApiError } = useAuthHandler();
     const [tooltip, setTooltip] = useState<number | null>(null);
 
-    const { data, isPending, isError, error } = useQuery({
+    const {
+        data: units,
+        isPending,
+        isError,
+        error,
+    } = useQuery({
         queryKey: ['unit-list', { id: chapterId }],
         queryFn: () => fetchUnits(Number(chapterId)),
+        retry: shouldRetryApiRequest,
     });
 
     // 최대 y 좌표 + 여유 공간으로 실제 높이 계산
     const maxY = Math.max(...positions.map((pos) => pos.y));
     const contentHeight = maxY + 200; // 여유 공간 추가
 
-    if (isPending) {
-        <div>로딩중</div>;
-    }
+    useEffect(() => {
+        if (isError && error instanceof ApiError) {
+            handleApiError(error);
+        }
+    }, [isError, error, handleApiError]);
 
-    if (isError) {
-        <div>{error.message}</div>;
+    if (isPending) {
+        return <div>로딩중</div>;
     }
 
-    const units = data;
-
-    if (!data) {
-        return <div></div>;
+    if (!units) {
+        return <div>유닛 정보가 없습니다.</div>;
     }
 
-    if (data) {
-        console.log(data);
+    if (units) {
+        console.log(units);
     }
 
     return (

src/pages/ChapterListPage.tsx

@@ -3,19 +3,27 @@ import Banner from '../components/@common/banner/Banner';
 import ChapterCard from '../components/study-page/ChapterCard';
 import fetchChapters from '../api/fetchChapters';
 import { Link } from 'react-router-dom';
+import shouldRetryApiRequest from '../utils/api-retry';
+import { useAuthHandler } from '../hooks/useAuthHandler';
+import { useEffect } from 'react';
+import { ApiError } from '../types/@common/api';
 
 function ChapterListPage() {
+    const { handleApiError } = useAuthHandler();
     const { data, isPending, isError, error } = useQuery({
-        queryKey: ['learning'],
+        queryKey: ['chapter-list'],
         queryFn: fetchChapters,
+        retry: shouldRetryApiRequest,
     });
 
-    if (isPending) {
-        return <div>패칭중</div>;
-    }
+    useEffect(() => {
+        if (isError && error instanceof ApiError) {
+            handleApiError(error);
+        }
+    }, [isError, error, handleApiError]);
 
-    if (isError) {
-        return <div>{error.message}</div>;
+    if (isPending) {
+        return <div>로딩중</div>;
     }
 
     return (