feat: 레이아웃, 로그인, 회원가입 페이지 구현

ticketping/package.json

@@ -3,11 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^5.22.5",
+    "axios": "^1.7.9",
+    "axios-hooks": "^5.0.2",
     "cra-template": "1.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.0.2",
+    "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",
     "web-vitals": "^4.2.4"
   },
   "scripts": {

ticketping/src/App.js

@@ -1,24 +1,21 @@
 import React from 'react';
-import { Routes, Route} from 'react-router-dom'
+import { Routes, Route } from 'react-router-dom'
 import Main from './pages/Main';
-import Nav from "./component/Nav";
+import AppLayout from './component/AppLayout';
 import Login from './pages/Login';
 import VerificationInfo from './pages/Join';
 import NotFound from './pages/NotFound';
 
 function App() {
   return (
-    <div className="App">
-      <div>
-        <Nav/>
-        <Routes>
-          <Route path='/' element={<Main />}></Route>
-          <Route path='/login' element={<Login />}></Route>
-          <Route path='/join' element={<VerificationInfo />}></Route>
-          <Route path='*' element={<NotFound />}></Route>
-        </Routes>
-      </div>
-    </div>
+    <AppLayout>
+      <Routes>
+        <Route path='/' element={<Main />}></Route>
+        <Route path='/login' element={<Login />}></Route>
+        <Route path='/join' element={<VerificationInfo />}></Route>
+        <Route path='*' element={<NotFound />}></Route>
+      </Routes>
+    </AppLayout>
   );
 }
 

ticketping/src/Constants.js

@@ -0,0 +1 @@
+export const API_HOST = process.env.REACT_APP_API_HOST || "http://localhost:10001";

ticketping/src/api.js

@@ -0,0 +1,11 @@
+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
+});

ticketping/src/component/AppLayout.css

@@ -0,0 +1,95 @@
+.app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    background-color: white; /* 전체 배경색 */
+}
+
+.header {
+    background-color: #4A90E2; /* 채도가 높은 하늘색으로 변경 */
+    padding: 8px 64px;
+    display: flex;
+    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; /* 홈 버튼 폰트 변경 */
+}
+
+.topnav {
+    display: flex;
+    align-items: center;
+    gap: 16px; /* 버튼 간격 */
+}
+
+.home-button {
+    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; /* 호버 색상 변경 */
+}
+
+.auth-button {
+    color: white; /* 로그인 버튼 텍스트 색상 */
+    font-family: 'Arial', sans-serif;
+    font-weight: bold;
+    font-size: 18px;
+    padding: 0;
+    transition: color 0.3s ease;
+}
+
+.auth-button:hover {
+    color: #d0e1ff; /* 호버 색상 변경 */
+}
+
+.contents {
+    flex: 1;
+    padding: 24px 32px;
+    background-color: white; /* 콘텐츠 배경색 */
+    min-height: 400px; /* 콘텐츠 최소 높이 증가 */
+}
+
+.footer {
+    text-align: center;
+    padding: 24px 32px;
+    background-color: #f0f2f5; /* 연한 회색으로 변경 */
+    border-top: 1px solid #e8e8e8;
+    color: #6c757d;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer-links {
+    display: flex;
+    gap: 24px; /* 링크 간격 */
+    margin: 16px 0; /* 링크와 텍스트 간격 */
+}
+
+.footer-links a {
+    color: #999; /* 링크 색상 변경 */
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+    color: #666; /* 링크 호버 색상 변경 */
+}
+
+.footer-info {
+    font-size: 12px;
+    color: #999;
+    margin-top: 16px; /* 푸터 정보와 링크 간격 추가 */
+}

ticketping/src/component/AppLayout.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { Button } from "antd";
+import { useAppContext } from "../store";
+import { useNavigate } from "react-router-dom";
+import "./AppLayout.css"; // CSS 파일 임포트
+
+function AppLayout({ children }) {
+  const navigate = useNavigate();
+  const {
+    store: { isAuthenticated },
+  } = useAppContext();
+
+  return (
+    <div className="app">
+      <div className="header">
+        <h1 className="page-title">
+          <Button
+            type="link"
+            className="home-button"
+            onClick={() => navigate("/")}
+          >
+            TicketPing
+          </Button>
+        </h1>
+
+        <div className="topnav">
+          {isAuthenticated ? (
+            <Button
+              type="link"
+              className="auth-button"
+              onClick={() => navigate("/logout")}
+            >
+              Logout
+            </Button>
+          ) : (
+            <Button
+              type="link"
+              className="auth-button"
+              onClick={() => navigate("/login")}
+            >
+              Login
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="contents">{children}</div>
+
+      <div className="footer">
+        <div className="footer-links">
+          <a href="/about">About Us</a>
+          <a href="/contact">Contact</a>
+          <a href="/terms">Terms of Service</a>
+          <a href="/privacy">Privacy Policy</a>
+        </div>
+        <div className="footer-info">
+          Copyright ⓒ TicketPing Corp. All Rights Reserved.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AppLayout;

ticketping/src/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import ReactDOM from 'react-dom'; 
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
+import { AppProvider } from "./store";
+import "./index.css";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <BrowserRouter>
+const rootElement = document.getElementById('root');
+ReactDOM.render(
+  <BrowserRouter>
+    <AppProvider>
       <App />
-    </BrowserRouter>
-  </React.StrictMode>
-);
+    </AppProvider>
+  </BrowserRouter>,
+  rootElement
+);

ticketping/src/pages/Join.css

@@ -0,0 +1,46 @@
+.Join {
+    display: flex;
+    justify-content: center; 
+    align-items: center; 
+    min-height: 60vh;
+    background-color: #ffffff;
+}
+
+.card {
+    width: 500px;
+    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;
+    margin-bottom: 24px; 
+    width: 100%; 
+    max-width: 500px; 
+}
+
+.form-label {
+    width: 50px; 
+    min-width: 70px; 
+    text-align: left; 
+}
+
+.form-wrapper {
+    flex: 1;
+    width: calc(100% - 0px); 
+}