[feat] css 정리, 마이 페이지 추가

ticketping/src/App.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom'
+import LoginRequiredRoute from './utils/LoginRequiredRoute';
 import Main from './pages/Main';
 import PerformanceDetail from './pages/PerformanceDetail'
 import AppLayout from './component/AppLayout';
 import Login from './pages/Login';
 import VerificationInfo from './pages/Join';
+import MyPage from './pages/MyPage';
 import NotFound from './pages/NotFound';
 
 function App() {
   return (
     <AppLayout>
       <Routes>
         <Route path='/' element={<Main />}></Route>
+        <Route path='/mypage' element={<LoginRequiredRoute><MyPage /></LoginRequiredRoute>}></Route>
         <Route path="/performance/:id" element={<PerformanceDetail />} />
         <Route path='/login' element={<Login />}></Route>
         <Route path='/join' element={<VerificationInfo />}></Route>

ticketping/src/component/AppLayout.js

@@ -2,19 +2,17 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useAppContext } from "../store";
 import { Button } from "antd";
-import { processLogout } from "./Logout"; 
-import "./AppLayout.css"; 
+import { Logout } from "./Logout";
+import "../style/AppLayout.css";
 
 function AppLayout({ children }) {
   const navigate = useNavigate();
-  const { dispatch } = useAppContext();
+  const {
+    store: { isAuthenticated },
+  } = useAppContext();
 
-  const { store: { jwtToken, isAuthenticated } } = useAppContext();
+  const { handleLogout } = Logout();
 
-  const handleLogout = () => {
-    processLogout(dispatch, jwtToken, navigate); 
-  };
-
   return (
     <div className="app">
       <div className="header">
@@ -29,12 +27,15 @@ function AppLayout({ children }) {
         </h1>
 
         <div className="topnav">
+          <Button
+            type="link"
+            className="auth-button"
+            onClick={() => navigate("/mypage")}
+          >
+            MyPage
+          </Button>
           {isAuthenticated ? (
-            <Button
-              type="link"
-              className="auth-button"
-              onClick={handleLogout} 
-            >
+            <Button type="link" className="auth-button" onClick={handleLogout}>
               Logout
             </Button>
           ) : (

ticketping/src/component/Logout.js

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

ticketping/src/index.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 import { AppProvider } from "./store";
-import "./index.css";
 
 const rootElement = document.getElementById('root');
 ReactDOM.render(

ticketping/src/pages/Join.js

@@ -91,11 +91,9 @@ export default function Join() {
             <Input.Password className="form-wrapper" />
           </Form.Item>
 
-          <div className="tail-wrapper">
-            <Button htmlType="submit" className="button">
-              Submit
-            </Button>
-          </div>
+          <Button htmlType="submit" className="button">
+            Submit
+          </Button>
         </Form>
       </Card>
     </div>

ticketping/src/pages/Login.js

@@ -10,7 +10,7 @@ export default function Login() {
   const navigate = useNavigate();
   const { dispatch } = useAppContext();
   const [fieldErrors, setFieldErrors] = useState({});
-  const [form] = Form.useForm(); 
+  const [form] = Form.useForm();
 
   const onFinish = async (values) => {
     const { email, password } = values;
@@ -82,13 +82,11 @@ export default function Login() {
             <Input.Password className="form-wrapper" />
           </Form.Item>
 
-          <div className="tail-wrapper">
+          <div className="button-container">
             <Button htmlType="submit" className="button">
               Login
             </Button>
-          </div>
 
-          <div className="tail-wrapper">
             <Button className="button">
               <a href="/join">Join</a>
             </Button>

ticketping/src/pages/Main.js

@@ -17,7 +17,7 @@ function Main() {
     setIsLoading(true);
 
     try {
-      const response = await axiosInstance.get("http://localhost:10001/api/v1/performances", {
+      const response = await axiosInstance.get("/api/v1/performances", {
         params: {
           page,
           size: ITEMS_PER_LOAD,

ticketping/src/pages/MyPage.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MyPage() {
+  return null;
+}

ticketping/src/store.js

@@ -3,11 +3,9 @@ import { getStorageItem, setStorageItem } from "./utils/useLocalStorage";
 
 const AppContext = createContext();
 
-// Actions
 const SET_TOKEN = "APP/SET_TOKEN";
 const DELETE_TOKEN = "APP/DELETE_TOKEN";
 
-// Action Creators
 export const setToken = token => ({ type: SET_TOKEN, payload: token });
 export const deleteToken = () => ({ type: DELETE_TOKEN });
 
@@ -43,7 +41,6 @@ export const AppProvider = ({ children }) => {
     isAuthenticated: jwtToken.length > 0
   });
 
-  // Side effect 처리를 위한 useEffect
   useEffect(() => {
     if (store.jwtToken) {
       setStorageItem("jwtToken", store.jwtToken);

ticketping/src/component/AppLayout.css → ticketping/src/style/AppLayout.css

@@ -8,22 +8,24 @@
 
 .header {
     background-color: #4A90E2; 
-    padding: 8px 64px;
+    padding: 32px 128px 0px 64px; 
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between; 
+    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; 
+    display: flex;
+    align-items: center; 
 }
 
 .topnav {
     display: flex;
-    align-items: center;
+    align-items: center; 
     gap: 16px; 
 }
 

ticketping/src/style/Join.css

@@ -8,24 +8,15 @@
 
 .card {
     width: 500px;
+    height: 310px;
     border-radius: 8px; 
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
-    padding: 20px; 
 }
 
 .card-title {
     color: #666666; 
 }
 
-.tail-wrapper {
-    display: flex;
-    justify-content: center; 
-}
-
-.button {
-    width: 20%; 
-}
-
 .form-item {
     display: flex;
     flex-direction: column;
@@ -40,7 +31,6 @@
     text-align: left; 
 }
 
-.form-wrapper {
-    flex: 1;
-    width: calc(100% - 0px); 
-}
+.button {
+    width: 20%; 
+}

ticketping/src/style/Login.css

@@ -8,25 +8,15 @@
 
 .card {
     width: 500px;
+    height: 310px;
     border-radius: 8px; 
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
-    padding: 20px; 
 }
 
 .card-title {
     color: #666666; 
 }
 
-.tail-wrapper {
-    display: flex;
-    justify-content: center; 
-    margin-top: 12px; 
-}
-
-.button {
-    width: 20%; 
-}
-
 .form-item {
     display: flex;
     flex-direction: column;
@@ -41,7 +31,16 @@
     text-align: left; 
 }
 
-.form-wrapper {
-    flex: 1;
-    width: calc(100% - 0px); 
+.button-container {
+    margin-top: 48px;
+    display: flex;
+    flex-direction: column; 
+}
+
+.button {
+    width: 20%; 
+}
+
+.button:last-child {
+    margin-top: 16px;
 }