feat : commentForm 비로그인시 사용 불가

ReXume · Feb 21, 2025 · ae82d47 · ae82d47
1 parent 380879b
commit ae82d47
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 36 deletions.
diff --git a/frontend/src/components/MyInfoPage/UserInfo.tsx b/frontend/src/components/MyInfoPage/UserInfo.tsx
@@ -1,8 +1,8 @@
 import { User } from "lucide-react";
-import { useUserInfo } from "../../store/LoginStore";
+import useAuthStore from "../../store/authStore";
 
 function UserInfo() {
-  const { userData } = useUserInfo();
+  const { userData } = useAuthStore();
 
   return (
     <div>

diff --git a/frontend/src/components/comment/CommentSection.tsx b/frontend/src/components/comment/CommentSection.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import CommentList from "./CommentList";
 import CommentForm from "./CommentForm";
 import ErrorMessage from "../UI/ErrorMessage.tsx";
 import LoadingSpinner from "../UI/LoadingSpinner.tsx";
 import { AddFeedbackPoint, FeedbackPoint } from "../../types.ts";
+import useAuthStore from "../../store/authStore.ts";
 
 interface CommentSectionProps {
   feedbackPoints: FeedbackPoint[];
@@ -29,6 +30,15 @@ function CommentSection({
   error = "",
 }: CommentSectionProps): React.ReactElement {
   // 일반 댓글 추가
+  const [isLogin, setIsLogin] = useState(false);
+  const { isAuthenticated } = useAuthStore();
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setIsLogin(false);
+    } else {
+      setIsLogin(true);
+    }
+  }, []);
   const handleAddComment = async (text: string) => {
     try {
       addFeedbackPoint({
@@ -67,7 +77,7 @@ function CommentSection({
         <CommentForm
           onAdd={handleAddComment}
           onAiFeedback={handleAiFeedback}
-          disabled={loading}
+          disabled={isLogin ? false : true}
         />
       </div>
     </div>

diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
@@ -3,18 +3,22 @@ import { axiosInstance } from "../api/axios.config";
 
 interface AuthState {
   isAuthenticated: boolean;
-  user: any | null;
+  userData: UserInfo | null;
   hasChecked: boolean;
-
   checkAuth: () => Promise<void>;
   logout: () => Promise<void>;
 }
 
+interface UserInfo {
+  username: string;
+  email: string;
+  role: string;
+}
+
 const useAuthStore = create<AuthState>((set, get) => ({
   isAuthenticated: false,
-  user: null,
+  userData: null,
   hasChecked: false,
-
   checkAuth: async () => {
     console.log(get().hasChecked);
     if (get().hasChecked) return; //API 요청을 한 번만 보내도록 설정
@@ -23,19 +27,19 @@ const useAuthStore = create<AuthState>((set, get) => ({
       const response = await axiosInstance.get("/user");
       set({
         isAuthenticated: true,
-        user: response.data.result.username,
+        userData: response.data?.result,
         hasChecked: true,
       });
       console.log(response);
     } catch (error) {
-      set({ isAuthenticated: false, user: null, hasChecked: true });
+      set({ isAuthenticated: false, userData: null, hasChecked: true });
       throw error;
     }
   },
   logout: async () => {
     try {
       await axiosInstance.post("/logout");
-      set({ isAuthenticated: false, user: null, hasChecked: false });
+      set({ isAuthenticated: false, userData: null, hasChecked: false });
     } catch (error) {
       console.error("로그아웃 실패!", error);
     }

diff --git a/frontend/src/utils/Token.tsx b/frontend/src/utils/Token.tsx
@@ -2,37 +2,39 @@ import { Outlet, Navigate } from "react-router-dom";
 import axios from "./axiosInstance";
 import { useEffect, useState } from "react";
 import { useLoginStatus, useUserInfo } from "../store/LoginStore";
+import useAuthStore from "../store/authStore";
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 function ProtectedRoute() {
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
-  const { setLoginStatus } = useLoginStatus();
-  const { setUserData } = useUserInfo();
+  // const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  // const { setLoginStatus } = useLoginStatus();
+  // const { setUserData } = useUserInfo();
+  const { checkAuth, isAuthenticated } = useAuthStore();
 
   useEffect(() => {
-    const checkAuth = async () => {
-      try {
-        const response = await axios.get(`${BASE_URL}/user`, {
-          withCredentials: true, // HTTP-Only 쿠키 포함
-        });
-
-        // 응답 코드가 USER_200일 경우 인증 성공
-        if (response.data?.code === "USER_200") {
-          setIsAuthenticated(true);
-          setLoginStatus(1);
-          setUserData(response.data?.result);
-        } else {
-          setIsAuthenticated(false);
-          setLoginStatus(0);
-        }
-      } catch (error) {
-        console.error("인증 요청 실패: ", error);
-        setIsAuthenticated(false);
-        setLoginStatus(0);
-      }
-    };
-
+    // const checkAuth = async () => {
+    //   try {
+    //     const response = await axios.get(`${BASE_URL}/user`, {
+    //       withCredentials: true, // HTTP-Only 쿠키 포함
+    //     });
+
+    //     // 응답 코드가 USER_200일 경우 인증 성공
+    //     if (response.data?.code === "USER_200") {
+    //       setIsAuthenticated(true);
+    //       setLoginStatus(1);
+    //       setUserData(response.data?.result);
+    //     } else {
+    //       setIsAuthenticated(false);
+    //       setLoginStatus(0);
+    //     }
+    //   } catch (error) {
+    //     console.error("인증 요청 실패: ", error);
+    //     setIsAuthenticated(false);
+    //     setLoginStatus(0);
+    //   }
+    // };
+    // checkAuth();
     checkAuth();
   }, []);