스프린트 미션 11

package.json

@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.52.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.104",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "axios": "^1.7.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",

src/API/AuthAPI.ts

@@ -0,0 +1,46 @@
+import axios from "axios";
+
+interface valuetype {
+  email: string;
+  nickname?: string;
+  password: string;
+  passwordConfirmation?: string;
+}
+
+const apiUrl = process.env.REACT_APP_API_BASE_URL as string;
+
+export const postAuthSignIn = async (body: valuetype) => {
+  try {
+    const res = await axios.post(`${apiUrl}/auth/signIn`, body, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    return res.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error("Axios error:", error.response?.data);
+    } else {
+      console.error("Unknown error:", error);
+    }
+    throw error;
+  }
+};
+
+export const postAuthSignUp = async (body: valuetype) => {
+  try {
+    const res = await axios.post(`${apiUrl}/auth/signUp`, body, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    return res.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error("Axios error:", error.response?.data);
+    } else {
+      console.error("Unknown error:", error);
+    }
+    throw error;
+  }
+};

src/App.js

@@ -4,8 +4,11 @@ import HomePage from "./pages/HomePage/HomePage.tsx";
 import AddItemPage from "./pages/AddItemPage/AddItemPage.tsx";
 import MarketPage from "./pages/MarketPage/MarketPage.tsx";
 import ProductDetail from "./pages/MarketPage/components/ProductDetail.tsx";
+import LoginPage from "./pages/LoginPage/LoginPage.tsx";
+import SignUp from "./pages/LoginPage/Signup.tsx";
 
 import { ProductProvider } from "./context/ProductContext.tsx";
+import CommunityFeedPage from "./pages/CommunityFeedPage/CommunityFeedPage.tsx";
 
 function App() {
   return (
@@ -15,8 +18,11 @@ function App() {
           <Header />
           <Routes>
             <Route index element={<HomePage />} />
-            <Route path="items" element={<MarketPage />} />
+            <Route path="/signup" element={<SignUp />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/items" element={<MarketPage />} />
             <Route path="/additem" element={<AddItemPage />} />
+            <Route path="/community" element={<CommunityFeedPage />} />
             <Route path="/product/:id" element={<ProductDetail />} />
           </Routes>
         </div>

src/Layout/Header.css → src/Layout/Header.module.css

@@ -36,6 +36,8 @@
   list-style-type: none;
   font-size: 18px;
   font-weight: 700;
+  text-decoration-line: none;
+  color: #000000;
 }
 
 @media (max-width: 768px) {

src/Layout/Header.tsx

@@ -1,6 +1,7 @@
 import Logo from "../images/logo/logo.svg";
-import "./Header.css";
-import { NavLink, useLocation } from "react-router-dom";
+import style from "./Header.module.css";
+import { Link, NavLink, useLocation } from "react-router-dom";
+import loginIMage from "../images/logo/ic_profile.svg";
 
 interface GetLinkStyleProps {
   isActive: boolean;
@@ -16,31 +17,56 @@ export function getLinkStyle({ isActive }: GetLinkStyleProps) {
 const Header = () => {
   const location = useLocation();
 
-  return (
-    <header className="mainHeader">
-      <div className="leftHeader">
-        <img className="headerLogo" src={Logo} alt="판다마켓로고" />
-        <nav>
-          <ul className="headusedmarket">
-            <li className="usedmarket">자유게시판</li>
-            <li className="usedmarket">
-              <NavLink
-                to="/items"
-                style={({ isActive }) =>
-                  location.pathname === "/additem" || isActive
-                    ? { color: "#3692ff", textDecoration: "none" }
-                    : {}
-                }
-              >
-                중고마켓
-              </NavLink>
-            </li>
-          </ul>
-        </nav>
-      </div>
-      <div className="loginbutton">로그인</div>
-    </header>
-  );
+  const isLogIn = localStorage.getItem("accessToken");
+
+  switch (location.pathname) {
+    case "/login":
+    case "/signup":
+      return null;
+
+    default:
+      return (
+        <header className={style.mainHeader}>
+          <div className={style.leftHeader}>
+            <Link to={"/"}>
+              <img className={style.headerLogo} src={Logo} alt="판다마켓로고" />
+            </Link>
+            <nav>
+              <ul className={style.headusedmarket}>
+                <NavLink
+                  className={style.usedmarket}
+                  to="/community"
+                  style={({ isActive }) =>
+                    isActive ? { color: "#3692ff", textDecoration: "none" } : {}
+                  }
+                >
+                  <li>자유게시판</li>
+                </NavLink>
+
+                <NavLink
+                  className={style.usedmarket}
+                  to="/items"
+                  style={({ isActive }) =>
+                    location.pathname === "/additem" || isActive
+                      ? { color: "#3692ff", textDecoration: "none" }
+                      : {}
+                  }
+                >
+                  <li>중고마켓</li>
+                </NavLink>
+              </ul>
+            </nav>
+          </div>
+          {isLogIn ? (
+            <img src={loginIMage} alt="로그인이미지" />
+          ) : (
+            <Link to="/login" className={style.loginbutton}>
+              로그인
+            </Link>
+          )}
+        </header>
+      );
+  }
 };
 
 export default Header;

src/index.js

@@ -2,10 +2,15 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <QueryClientProvider client={queryClient}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </QueryClientProvider>
 );

src/lib/axios.tsx

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const instance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
+  withCredentials: true,
+});
+
+export default instance;