From 7e3aa2780910b9fc7e3d1761ab9866757e613d95 Mon Sep 17 00:00:00 2001 From: rivertw777 <105557972+rivertw777@users.noreply.github.com> Date: Fri, 20 Dec 2024 21:05:09 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20css=20=EC=A0=95=EB=A6=AC,=20=EB=A7=88?= =?UTF-8?q?=EC=9D=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ticketping/src/App.js | 3 ++ ticketping/src/component/AppLayout.js | 27 ++++++------ ticketping/src/component/Logout.js | 42 ++++++++++++------- ticketping/src/index.css | 13 ------ ticketping/src/index.js | 1 - ticketping/src/pages/Join.js | 8 ++-- ticketping/src/pages/Login.js | 6 +-- ticketping/src/pages/Main.js | 2 +- ticketping/src/pages/MyPage.js | 5 +++ ticketping/src/store.js | 3 -- .../src/{component => style}/AppLayout.css | 10 +++-- ticketping/src/style/Join.css | 18 ++------ ticketping/src/style/Login.css | 27 ++++++------ 13 files changed, 77 insertions(+), 88 deletions(-) delete mode 100644 ticketping/src/index.css create mode 100644 ticketping/src/pages/MyPage.js rename ticketping/src/{component => style}/AppLayout.css (90%) diff --git a/ticketping/src/App.js b/ticketping/src/App.js index d480e4d..bc82916 100644 --- a/ticketping/src/App.js +++ b/ticketping/src/App.js @@ -1,10 +1,12 @@ 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() { @@ -12,6 +14,7 @@ function App() { }> + }> } /> }> }> diff --git a/ticketping/src/component/AppLayout.js b/ticketping/src/component/AppLayout.js index 4b31a5a..67f17b2 100644 --- a/ticketping/src/component/AppLayout.js +++ b/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 (
@@ -29,12 +27,15 @@ function AppLayout({ children }) {
+ {isAuthenticated ? ( - ) : ( diff --git a/ticketping/src/component/Logout.js b/ticketping/src/component/Logout.js index 9ba59b1..56a54ff 100644 --- a/ticketping/src/component/Logout.js +++ b/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: , - }); + const handleLogout = async () => { + const headers = { Authorization: jwtToken }; + + try { + await axiosInstance.post("/api/v1/auth/logout", {}, { headers }); + + notification.open({ + message: "로그아웃 완료", + icon: , + }); + + dispatch(deleteToken()); + navigate("/"); + } catch (error) { + console.error("로그아웃 중 오류 발생:", error); + } + }; - dispatch(deleteToken()); - navigate("/"); - } catch (error) { - console.error("로그아웃 중 오류 발생:", error); - } -}; + return { handleLogout }; +}; \ No newline at end of file diff --git a/ticketping/src/index.css b/ticketping/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/ticketping/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/ticketping/src/index.js b/ticketping/src/index.js index aa5f7df..3ac26fa 100644 --- a/ticketping/src/index.js +++ b/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( diff --git a/ticketping/src/pages/Join.js b/ticketping/src/pages/Join.js index e14f89f..d94588c 100644 --- a/ticketping/src/pages/Join.js +++ b/ticketping/src/pages/Join.js @@ -91,11 +91,9 @@ export default function Join() { -
- -
+
diff --git a/ticketping/src/pages/Login.js b/ticketping/src/pages/Login.js index 1edc978..8500c92 100644 --- a/ticketping/src/pages/Login.js +++ b/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() { -
+
-
-
diff --git a/ticketping/src/pages/Main.js b/ticketping/src/pages/Main.js index 7efa6ae..bd4a905 100644 --- a/ticketping/src/pages/Main.js +++ b/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, diff --git a/ticketping/src/pages/MyPage.js b/ticketping/src/pages/MyPage.js new file mode 100644 index 0000000..629590e --- /dev/null +++ b/ticketping/src/pages/MyPage.js @@ -0,0 +1,5 @@ +import React from "react"; + +export default function MyPage() { + return null; +} diff --git a/ticketping/src/store.js b/ticketping/src/store.js index d53db7b..add6cbc 100644 --- a/ticketping/src/store.js +++ b/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); diff --git a/ticketping/src/component/AppLayout.css b/ticketping/src/style/AppLayout.css similarity index 90% rename from ticketping/src/component/AppLayout.css rename to ticketping/src/style/AppLayout.css index e0e450f..8959f26 100644 --- a/ticketping/src/component/AppLayout.css +++ b/ticketping/src/style/AppLayout.css @@ -8,10 +8,10 @@ .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; } @@ -19,11 +19,13 @@ .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; } diff --git a/ticketping/src/style/Join.css b/ticketping/src/style/Join.css index 119f30e..9dc24dd 100644 --- a/ticketping/src/style/Join.css +++ b/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%; +} \ No newline at end of file diff --git a/ticketping/src/style/Login.css b/ticketping/src/style/Login.css index 8bf7360..5c349a9 100644 --- a/ticketping/src/style/Login.css +++ b/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; }