[feat] 로그아웃 구현

ticketping/package.json

@@ -10,8 +10,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.28.0",
-    "react-scripts": "5.0.1",
-    "use-reducer-with-side-effects": "^2.2.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^4.2.4"
   },
   "scripts": {

ticketping/src/api.js

@@ -1,11 +1,7 @@
 import Axios from "axios";
-import { makeUseAxios } from "axios-hooks";
 import { API_HOST } from "./Constants";
 
 export const axiosInstance = Axios.create({
   baseURL: API_HOST,
-});
-
-export const useAxios = makeUseAxios({
-  axios: axiosInstance
-});
+  withCredentials: true
+});

ticketping/src/component/AppLayout.css

@@ -3,45 +3,45 @@
     flex-direction: column;
     min-height: 100vh;
     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    background-color: white; /* 전체 배경색 */
+    background-color: white; 
 }
 
 .header {
-    background-color: #4A90E2; /* 채도가 높은 하늘색으로 변경 */
+    background-color: #4A90E2; 
     padding: 8px 64px;
     display: flex;
-    justify-content: center; /* 중앙 정렬 */
+    justify-content: center;
     align-items: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     border-bottom: 1px solid white;
 }
 
 .page-title {
-    margin-right: auto; /* 홈 버튼 왼쪽에 여백 추가 */
-    font-family: 'Poppins', sans-serif; /* 홈 버튼 폰트 변경 */
+    margin-right: auto; 
+    font-family: 'Poppins', sans-serif; 
 }
 
 .topnav {
     display: flex;
     align-items: center;
-    gap: 16px; /* 버튼 간격 */
+    gap: 16px; 
 }
 
 .home-button {
-    color: white; /* 홈 버튼 텍스트 색상 */
-    font-family: 'Poppins', sans-serif; /* 홈 버튼 폰트 변경 */
+    color: white; 
+    font-family: 'Poppins', sans-serif; 
     font-weight: bold;
     font-size: 28px;
     padding: 0;
     transition: color 0.3s ease;
 }
 
 .home-button:hover {
-    color: #d0e1ff; /* 호버 색상 변경 */
+    color: #d0e1ff;
 }
 
 .auth-button {
-    color: white; /* 로그인 버튼 텍스트 색상 */
+    color: white; 
     font-family: 'Arial', sans-serif;
     font-weight: bold;
     font-size: 18px;
@@ -50,20 +50,20 @@
 }
 
 .auth-button:hover {
-    color: #d0e1ff; /* 호버 색상 변경 */
+    color: #d0e1ff; 
 }
 
 .contents {
     flex: 1;
     padding: 24px 32px;
-    background-color: white; /* 콘텐츠 배경색 */
-    min-height: 400px; /* 콘텐츠 최소 높이 증가 */
+    background-color: white; 
+    min-height: 400px; 
 }
 
 .footer {
     text-align: center;
     padding: 24px 32px;
-    background-color: #f0f2f5; /* 연한 회색으로 변경 */
+    background-color: #f0f2f5; 
     border-top: 1px solid #e8e8e8;
     color: #6c757d;
     font-size: 14px;
@@ -74,22 +74,22 @@
 
 .footer-links {
     display: flex;
-    gap: 24px; /* 링크 간격 */
-    margin: 16px 0; /* 링크와 텍스트 간격 */
+    gap: 24px; 
+    margin: 16px 0; 
 }
 
 .footer-links a {
-    color: #999; /* 링크 색상 변경 */
+    color: #999; 
     text-decoration: none;
     transition: color 0.3s ease;
 }
 
 .footer-links a:hover {
-    color: #666; /* 링크 호버 색상 변경 */
+    color: #666; 
 }
 
 .footer-info {
     font-size: 12px;
     color: #999;
-    margin-top: 16px; /* 푸터 정보와 링크 간격 추가 */
+    margin-top: 16px; 
 }

ticketping/src/component/AppLayout.js

@@ -1,15 +1,20 @@
 import React from "react";
-import { Button } from "antd";
-import { useAppContext } from "../store";
 import { useNavigate } from "react-router-dom";
-import "./AppLayout.css"; // CSS 파일 임포트
+import { useAppContext } from "../store";
+import { Button } from "antd";
+import { processLogout } from "./Logout"; 
+import "./AppLayout.css"; 
 
 function AppLayout({ children }) {
   const navigate = useNavigate();
-  const {
-    store: { isAuthenticated },
-  } = useAppContext();
+  const { dispatch } = useAppContext();
+
+  const { store: { jwtToken, isAuthenticated } } = useAppContext();
 
+  const handleLogout = () => {
+    processLogout(dispatch, jwtToken, navigate); 
+  };
+
   return (
     <div className="app">
       <div className="header">
@@ -28,7 +33,7 @@ function AppLayout({ children }) {
             <Button
               type="link"
               className="auth-button"
-              onClick={() => navigate("/logout")}
+              onClick={handleLogout} 
             >
               Logout
             </Button>

ticketping/src/component/Logout.js

@@ -0,0 +1,22 @@
+import { notification } from "antd";
+import { MehOutlined } from "@ant-design/icons";
+import { axiosInstance } from "../api";
+import { deleteToken } from "../store";
+
+export const processLogout = async (dispatch, jwtToken, navigate) => {
+  const headers = { Authorization: jwtToken };
+
+  try {
+    await axiosInstance.post("/api/v1/auth/logout", {}, { headers });
+
+    notification.open({
+      message: "로그아웃 완료",
+      icon: <MehOutlined style={{ color: "#fa8c16" }} />,
+    });
+
+    dispatch(deleteToken());
+    navigate("/");
+  } catch (error) {
+    console.error("로그아웃 중 오류 발생:", error);
+  }
+};

ticketping/src/pages/Join.js

@@ -8,61 +8,58 @@ import "./Join.css";
 export default function Join() {
   const navigate = useNavigate();
   const [fieldErrors, setFieldErrors] = useState({});
+  const [form] = Form.useForm(); 
 
-  const onFinish = (values) => {
-    async function fn() {
-      const { email, nickname, password } = values;
+  const onFinish = async (values) => {
+    const { email, nickname, password } = values;
 
-      setFieldErrors({});
+    setFieldErrors({});
 
-      const data = { email, nickname, password };
-      try {
-        await axiosInstance.post("/api/v1/users/signup", data);
+    const data = { email, nickname, password };
+    try {
+      await axiosInstance.post("/api/v1/users/signup", data);
 
+      notification.open({
+        message: "회원가입 완료",
+        icon: <SmileOutlined style={{ color: "#108ee9" }} />,
+      });
+
+      navigate("/login");
+    } catch (error) {
+      if (error.response) {
         notification.open({
-          message: "회원가입 완료",
-          icon: <SmileOutlined style={{ color: "#108ee9" }} />,
+          message: `회원가입 실패`,
+          description: error.response.data.message,
+          icon: <FrownOutlined style={{ color: "#ff3333" }} />,
         });
 
-        navigate("/login");
-      } catch (error) {
-        if (error.response) {
-
-          notification.open({
-            message: `회원가입 실패`,
-            icon: <FrownOutlined style={{ color: "#ff3333" }} />,
-          });
-
-          setFieldErrors((prevErrors) => {
-            const updatedErrors = {};
-            for (const [fieldName, errors] of Object.entries(prevErrors)) {
-              const errorMessage =
-                errors instanceof Array ? errors.join(" ") : errors;
-              updatedErrors[fieldName] = {
-                validateStatus: "error",
-                help: errorMessage,
-              };
-            }
-            return {
-              ...prevErrors,
-              ...updatedErrors,
+        setFieldErrors((prevErrors) => {
+          const updatedErrors = {};
+          for (const [fieldName, errors] of Object.entries(prevErrors)) {
+            const errorMessage =
+              errors instanceof Array ? errors.join(" ") : errors;
+            updatedErrors[fieldName] = {
+              validateStatus: "error",
+              help: errorMessage,
             };
-          });
-        }
+          }
+          return {
+            ...prevErrors,
+            ...updatedErrors,
+          };
+        });
       }
     }
-    fn();
   };
 
   return (
     <div className="Join">
       <Card className="card" title={<span className="card-title">회원가입</span>}>
-
-        <Form onFinish={onFinish} autoComplete={"false"}>
+        <Form form={form} onFinish={onFinish} autoComplete="off">
           <Form.Item
             className="form-item"
             label={<span className="form-label">Email</span>}
-            name="name"
+            name="email"
             rules={[{ required: true, message: "Please input your email!" }]}
             hasFeedback
             {...fieldErrors.email}
@@ -74,7 +71,7 @@ export default function Join() {
           <Form.Item
             className="form-item"
             label={<span className="form-label">Nickname</span>}
-            name="name"
+            name="nickname"
             rules={[{ required: true, message: "Please input your nickname!" }]}
             hasFeedback
             {...fieldErrors.nickname}