reactor: 주석 제거 및 리팩토링

- todoStore로 전역에서 관리 - 토큰 유효 시간을 하루로 늘리고 HTTPS에서만 쿠키를 전송하고, 크로스사이트 공격을 방지하는 SameSite 옵션 추가
deipanema · Oct 24, 2024 · 1076190 · 1076190
1 parent be01527
commit 1076190
Show file tree

Hide file tree

Showing 27 changed files with 146 additions and 430 deletions.
diff --git a/src/api/authAPI.ts b/src/api/authAPI.ts
diff --git a/src/api/goalAPI.ts b/src/api/goalAPI.ts
@@ -13,19 +13,13 @@ export interface ErrorType {
   };
 }
 
-// 목표 목록 가져오기 (GET)
 // 모든 목표를 가져오는 함수
 export const getGoals = async () => {
   try {
     const response = await api.get(`/goals`);
-    //  console.log(response);
     return response.data;
   } catch (error) {
     console.error("Goals fetch error:", error);
-    // const axiosError = error as AxiosError<ErrorType>;
-    // toast.error(
-    //   axiosError.response?.data?.message || axiosError.message || "목표 목록을 가져오는 중 오류가 발생했습니다.",
-    // );
   }
 };
 
@@ -44,12 +38,9 @@ export const PostGoal = async (title: string) => {
 export const getGoal = async (id: number) => {
   try {
     const response = await api.get(`/goals/${id}`);
-    //console.log(response.data);
     return response.data;
   } catch (error) {
     console.error("Goal fetch error:", error);
-    //  const axiosError = error as AxiosError<ErrorType>;
-    // toast.error(axiosError.response?.data?.message || axiosError.message || "목표를 가져오는 중 오류가 발생했습니다.");
   }
 };
 

diff --git a/src/api/noteAPI.ts b/src/api/noteAPI.ts
@@ -81,11 +81,8 @@ export async function patchNotes(noteId: number, title: string, content: string,
 export default async function deleteNote(noteId: number) {
   try {
     const response = await api.delete(`notes/${noteId}`);
-    console.log(response);
-    console.log(response.data);
     return response.data;
   } catch (e) {
     const error = e as ErrorType;
-    console.log(error);
   }
 }
diff --git a/src/api/todoAPI.ts b/src/api/todoAPI.ts
@@ -44,7 +44,6 @@ export const getTodos = async (id: number, done?: boolean, size?: number) => {
     const response = await api.get(
       `/todos?goalId=${id}&${done ? `done=${done}&` : done === false ? "done=false&" : ""}${size ? `size=${size}` : "size=27"}`,
     );
-    //console.log(response.data);
     return response.data;
   } catch (error) {
     const axiosError = error as AxiosError<ErrorType>;
@@ -60,7 +59,6 @@ export const postFile = async (file: File) => {
     const response = await api.post(`/files`, formData, {
       headers: { "Content-Type": "multipart/form-data" },
     });
-    console.log(response.data);
     return response.data;
   } catch (error) {
     const axiosError = error as AxiosError<ErrorType>;
@@ -76,10 +74,7 @@ export const createTodo = async (
 ): Promise<TodoType> => {
   try {
     const payload = { title, goalId, fileUrl, linkUrl };
-    console.log(title, goalId);
-    console.log("😲");
     const response = await api.post<TodoType>(`/todos`, payload);
-    console.log(response);
     return response.data;
   } catch (error) {
     console.log(error);
@@ -92,7 +87,6 @@ export const createTodo = async (
 export const updateTodo = async (todoId: number, updates: Partial<TodoType>): Promise<TodoType> => {
   try {
     const response = await api.patch<TodoType>(`/todos/${todoId}`, updates);
-    console.log();
     return response.data;
   } catch (error) {
     const axiosError = error as AxiosError<ErrorType>;

diff --git a/src/app/(auth)/components/LoginForm.tsx b/src/app/(auth)/components/LoginForm.tsx
@@ -38,7 +38,7 @@ export default function LoginForm() {
         setLoginError("로그인에 실패했습니다. 다시 시도해 주세요.");
       }
     } catch (error) {
-      const axiosError = error as AxiosError; 
+      const axiosError = error as AxiosError;
       console.error("로그인 중 오류 발생:", axiosError);
       setLoginError("로그인 실패했습니다. 다시 시도해 주세요.");
     }
@@ -56,12 +56,11 @@ export default function LoginForm() {
         aria-required="true"
         required
         className={`w-full rounded-tl-md rounded-tr-md border px-[10px] py-3 text-sm placeholder-slate-400 hover:bg-slate-50 focus:z-50 focus:outline-none focus:ring-1 focus:ring-blue-300 sm:px-4 sm:text-base ${
-          errors.email ? "border-red-500 focus:ring-red-50" : "border-slate-300"
+          errors.email ? "border-red-50 focus:ring-red-50" : "border-slate-300"
         }`}
         {...register("email")}
         onBlur={() => trigger("email")}
       />
-      {errors.email && <small className="text-sm text-red-50">{errors.email.message}</small>}
       <label htmlFor="password" className="sr-only">
         비밀번호
       </label>
@@ -76,6 +75,7 @@ export default function LoginForm() {
         }`}
         onBlur={() => trigger("password")}
       />
+      {errors.email && <small className="text-sm text-red-50">{errors.email.message}</small>}
       {errors.password && <small className="mb-5 text-sm text-red-50">{errors.password.message}</small>}
       {loginError && <small className="mb-5 text-sm text-red-50">{loginError}</small>}
       <button

diff --git a/src/app/(auth)/components/LoginPrompt.tsx b/src/app/(auth)/components/LoginPrompt.tsx
@@ -1,11 +1,12 @@
+import AnimatedText from "@/utils/AnimatedText";
 import Link from "next/link";
 
 export default function LoginPrompt() {
   return (
     <div className="mb-6 flex justify-center gap-x-1 text-xs sm:gap-x-[10px] sm:text-sm">
       <p>이미 아이디가 있으신가요?</p>
-      <Link href="/login" className="font-bold underline hover:text-slate-500">
-        <p>로그인</p>
+      <Link href="/login">
+        <AnimatedText text="로그인" />
       </Link>
     </div>
   );

diff --git a/src/app/(auth)/components/SignupPrompt.tsx b/src/app/(auth)/components/SignupPrompt.tsx
@@ -1,11 +1,12 @@
+import AnimatedText from "@/utils/AnimatedText";
 import Link from "next/link";
 
 export default function SignupPrompt() {
   return (
     <div className="mb-6 flex justify-center gap-x-1 text-xs sm:gap-x-[10px] sm:text-sm">
       <p>처음이신가요?</p>
-      <Link href="/signup" className="font-bold underline hover:text-slate-500">
-        <p>회원가입</p>
+      <Link href="/signup">
+        <AnimatedText text="회원가입" />
       </Link>
     </div>
   );

diff --git a/src/app/Provider.tsx b/src/app/Provider.tsx
@@ -1,9 +1,18 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+
+import ToastProvider from "@/components/ToastProvider";
 
 export default function Provider({ children }: { children: React.ReactNode }) {
   const queryClient = new QueryClient();
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SpeedInsights />
+      <ToastProvider />
+      {children}
+    </QueryClientProvider>
+  );
 }
diff --git a/src/app/dashboard/components/NoteItem.tsx b/src/app/dashboard/components/NoteItem.tsx
@@ -3,8 +3,8 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
-import { NoteType } from "@/app/Types/TodoGoalType";
 import deleteNote, { getNote } from "@/api/noteAPI";
+import { NoteType } from "@/app/types/todoGoalType";
 
 import NoteViewer from "./NoteViewer";
 
@@ -17,8 +17,6 @@ export default function NoteItem({ note }: { note: NoteType }) {
   const loadNoteItemData = async () => {
     const response = await getNote(note.id);
     if (response) {
-      console.log(isNoteOpen);
-      console.log(noteContent);
       setNoteContent(response.data);
     }
   };

diff --git a/src/app/dashboard/components/NoteViewer.tsx b/src/app/dashboard/components/NoteViewer.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { Dispatch, SetStateAction } from "react";
 
-import { NoteType } from "@/app/Types/TodoGoalType";
+import { NoteType } from "@/app/types/todoGoalType";
 
 type NoteViewerProps = {
   isNoteOpen: boolean;
@@ -21,8 +21,6 @@ export default function NoteViewer({ isNoteOpen, setIsNoteOpen, noteContent }: N
     window.open(url, "_blank", `width=${windowWidth},height=${windowHeight},left=${windowLeft},top=${windowTop}`);
   };
 
-  //console.log(noteContent);
-
   return (
     <div className="relative">
       {isNoteOpen && (

diff --git a/src/app/dashboard/components/Sidebar.tsx b/src/app/dashboard/components/Sidebar.tsx
@@ -13,7 +13,7 @@ import AnimatedText from "@/utils/AnimatedText";
 import { useGoalStore } from "@/store/goalStore";
 import { useAuthStore } from "@/store/authStore";
 import CreateNewTodo from "@/components/CreateNewTodo";
-import { GoalType } from "@/app/Types/TodoGoalType";
+import { GoalType } from "@/app/types/todoGoalType";
 
 interface GoalsPage {
   goals: GoalType[];
@@ -32,53 +32,49 @@ export default function SideBar() {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const router = useRouter();
-  const { user } = useAuthStore(); // 쿼리 클라이언트 인스턴스 생성
+  const { user } = useAuthStore();
 
   const queryClient = useQueryClient();
 
   const handleLogout = async () => {
     const success = await logout();
-
-    if (success) {
-      router.push("/");
-    } else {
-      toast.error("로그아웃에 실패했습니다.");
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    success ? router.push("/") : toast.error("로그아웃에 실패했습니다.");
   };
 
-  // Sidebar에서 새 목표를 추가하는 부분
+  // 새 목표 추가
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (goalInput.trim()) {
-      const newGoal: GoalType = await addGoal(goalInput); // 새 목표 추가
+    if (!goalInput.trim()) {
+      toast.warn("목표를 입력해 주세요.");
+      return setInputVisible(false);
+    }
+
+    if (goalInput.length > 20) {
+      toast.warn("목표는 20자 이내로 입력해 주세요.");
+      return;
+    }
+
+    try {
+      const newGoal: GoalType = await addGoal(goalInput);
       setGoalInput("");
       setInputVisible(false);
 
-      // 무한 스크롤 데이터를 업데이트
+      // 새로운 목표 추가 후 쿼리 데이터 업데이트
       queryClient.setQueryData<GoalsData>(["goals"], (oldData) => {
         if (!oldData) return { pages: [{ goals: [newGoal], nextCursor: null }], pageParams: [undefined] };
 
-        const newPages = oldData.pages.map((page, index) => {
-          if (index === 0) {
-            return {
-              ...page,
-              goals: [newGoal, ...page.goals],
-            };
-          }
-          return page;
-        });
-
-        return {
-          ...oldData,
-          pages: newPages,
-        };
+        const newPages = oldData.pages.map((page, index) =>
+          index === 0 ? { ...page, goals: [newGoal, ...page.goals] } : page,
+        );
+
+        return { ...oldData, pages: newPages };
       });
 
       queryClient.invalidateQueries({ queryKey: ["goals"] });
-    } else {
-      toast.warn("목표를 입력해 주세요.");
-      setInputVisible(false);
+    } catch (error) {
+      toast.error("새로운 목표가 추가되지 않았습니다.");
     }
   };
 
@@ -88,9 +84,7 @@ export default function SideBar() {
   }, [refreshGoals]);
 
   useEffect(() => {
-    if (inputVisible && inputRef.current) {
-      inputRef.current.focus();
-    }
+    if (inputVisible && inputRef.current) inputRef.current.focus();
   }, [inputVisible]);
 
   // 스켈레톤 UI 컴포넌트
@@ -99,7 +93,7 @@ export default function SideBar() {
       {Array(5)
         .fill("")
         .map((_, index) => (
-          <li key={index} className="h-6 w-[231px] animate-pulse rounded bg-gray-200"></li>
+          <li key={index} className="h-6 w-[231px] animate-pulse rounded bg-slate-200"></li>
         ))}
     </ul>
   );
@@ -171,7 +165,7 @@ export default function SideBar() {
               ) : (
                 <ul className="flex flex-col gap-4">
                   {goals.map((goal) => (
-                    <li key={goal.id} className="max-w-[231px] overflow-hidden text-ellipsis whitespace-nowrap">
+                    <li key={goal.id} className="max-w-[231px] truncate">
                       <Link href={`/dashboard/goal/${goal.id}`}>・{goal.title}</Link>
                     </li>
                   ))}