[Feat/#57] 수정 필요한 부분 수정하는 PR

package.json

@@ -17,11 +17,13 @@
     "@vanilla-extract/sprinkles": "^1.6.3",
     "@vanilla-extract/vite-plugin": "^5.0.1",
     "axios": "^1.10.0",
+    "fabric": "^6.7.1",
     "framer-motion": "^12.15.0",
     "katex": "^0.16.22",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {

src/pages/login/login.css.ts

@@ -31,7 +31,7 @@ export const buttonWrapper = style({
   width: '100%',
   maxWidth: '48rem',
 
-  padding: '0 3.6rem 1.6rem',
+  padding: '0 3.6rem 2.4rem',
   gap: '1.2rem',
   alignItems: 'center',
   bottom: '0',

src/pages/loginCallback/LoginCallback.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { routePath } from '@routes/routePath';
 import { instance } from '@apis/instance';
+import Loading from '@pages/loading/Loading';
 
 import { tokenService } from '@/shared/auth/services/tokenService';
 import { API_URL } from '@/shared/constants/apiURL';
@@ -93,7 +94,7 @@ const LoginCallback = () => {
     handleLogin();
   }, [navigate]);
 
-  return <div />;
+  return <Loading />;
 };
 
 export default LoginCallback;

src/pages/my/My.tsx

@@ -5,6 +5,7 @@ import { getKoreanParticle } from '@utils/korParticle';
 import { useNavigate } from 'react-router-dom';
 import { routePath } from '@routes/routePath';
 import { themeVars } from '@styles/theme.css';
+import Toast from '@components/toast/Toast';
 
 import * as styles from './my.css';
 import { useDeleteMe, useGetMe } from './apis/queries';
@@ -21,6 +22,7 @@ const My = () => {
 
   const [expanded, setExpanded] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showToast, setShowToast] = useState(false);
 
   const { data, isPending } = useGetMe();
   const { mutateAsync: deleteMe } = useDeleteMe();
@@ -32,6 +34,14 @@ const My = () => {
     await deleteMe();
   };
 
+  const goWhiteboard = () => {
+    if (window.innerWidth >= 768) {
+      navigate(routePath.SIMPLE_WHITEBOARD);
+    } else {
+      setShowToast(true);
+    }
+  };
+
   const mappedChips = useMemo(() => {
     return (
       data?.unitsList?.map((unit) => {
@@ -181,6 +191,11 @@ const My = () => {
 
       {/* 공통 버튼 영역 */}
       <div className={styles.buttonContainer}>
+        <button type="button" className={styles.button} onClick={goWhiteboard}>
+          연습장
+          <IcRightArrow width={6} height={12} color={themeVars.color.gray800} />
+        </button>
+
         <button
           type="button"
           className={styles.button}
@@ -199,6 +214,13 @@ const My = () => {
         onClose={closeModal}
         onConfirm={handleDelete}
       />
+
+      {showToast && (
+        <Toast
+          message={`현재 화면 크기에서는 이용할 수 없습니다.\n태블릿 이상의 기기에서 이용해 주세요.`}
+          onClose={() => setShowToast(false)}
+        />
+      )}
     </div>
   );
 };

src/pages/reviewNotes/ReviewNotes.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
 import ReviewCard from '@components/reviewCard/ReviewCard';
 import { routePath } from '@routes/routePath';
+import Toast from '@components/toast/Toast';
 
 import * as styles from './reviewNotes.css';
 import { useGetReviewNotes, usePostReviewPdf } from './apis/queries';
@@ -24,7 +25,11 @@ const ReviewNotes = () => {
 
   const { mutateAsync: createPdf } = usePostReviewPdf();
   const [selectedCards, setSelectedCards] = useState<number[]>([]);
+  const [toasts, setToasts] = useState<string[]>([]);
 
+  const showToast = (msg: string) => {
+    setToasts((prev) => [...prev, msg]);
+  };
   const toggleSelectCard = (id: number) => {
     setSelectedCards((prev) =>
       prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
@@ -34,9 +39,9 @@ const ReviewNotes = () => {
   if (isPending) {
     return <div />;
   }
-
   const downloadPdf = async () => {
     if (!data || selectedCards.length === 0) {
+      showToast('PDF로 추출할 문제를 먼저 선택해주세요.');
       return;
     }
 
@@ -103,6 +108,15 @@ const ReviewNotes = () => {
 
   return (
     <div className={styles.reviewContainer}>
+      {toasts.map((msg, i) => (
+        <Toast
+          key={i}
+          message={msg}
+          onClose={() =>
+            setToasts((prev) => prev.filter((_, index) => index !== i))
+          }
+        />
+      ))}
       <h1 className={styles.title}>오답노트</h1>
       <button className={styles.pdfButton} onClick={downloadPdf}>
         <IcExtract width={20} height={20} />

src/pages/signup/signup.css.ts

@@ -30,7 +30,7 @@ export const buttonWrapper = style({
   width: '100%',
   maxWidth: '48rem',
 
-  padding: '0 3.6rem 1.6rem',
+  padding: '0 3.6rem 2.4rem',
   gap: '1.2rem',
   alignItems: 'center',
   bottom: '0',