Merge pull request #317 from jangyonghan/React-장용한-sprint11

[장용한] Sprint11

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/API/CommentsAPI.ts

@@ -1,21 +1,22 @@
 interface comment {
+  images: string;
+  nickname: string;
   id: number;
   name: string;
   content: string;
   createdAt: string;
-  images: string;
-  nickname: string;
   updatedAt: number;
 }
 
-interface commentList {
+interface commentResponse {
   list: comment[];
+  nextCursor: number;
 }
 
 export async function getComments(
   productId = 9,
   limit = 5
-): Promise<commentList> {
+): Promise<commentResponse> {
   const path = `/products/${productId}/comments?`;
   const query = `limit=${limit}`;
   const response = await fetch(

src/API/ItemAPI.ts

@@ -9,14 +9,14 @@ interface Produect {
   tags: string;
 }
 
-interface ProduectList {
+interface ProduectResponse {
   list: Produect[];
 }
 
 export async function getProducts(
   pageSize = 10,
   orderBy = "recent"
-): Promise<ProduectList> {
+): Promise<ProduectResponse> {
   const query = `pageSize=${pageSize}&orderBy=${orderBy}`;
   const response = await fetch(
     `https://panda-market-api.vercel.app/products?${query}`

src/App.js

@@ -4,24 +4,30 @@ 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 { ItemProvider } from "../src/context/ItemContext.tsx";
+import { ProductProvider } from "./context/ProductContext.tsx";
+import CommunityFeedPage from "./pages/CommunityFeedPage/CommunityFeedPage.tsx";
 
 function App() {
   return (
-    <ItemProvider>
+    <ProductProvider>
       <BrowserRouter>
         <div>
           <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>
       </BrowserRouter>
-    </ItemProvider>
+    </ProductProvider>
   );
 }
 

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/Layout/UI/FileInput.tsx

@@ -14,7 +14,8 @@ function FileInput({ name, value, onChange }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const nextValue = e.target.files ? e.target.files[0] : null;
+    const nextValue =
+      e.target.files && e.target.files.length > 0 ? e.target.files[0] : null;
     onChange(name, nextValue);
   };
 
@@ -40,18 +41,21 @@ function FileInput({ name, value, onChange }: FileInputProps) {
 
   return (
     <div className="fileInput-container">
-      <img src={preview} alt="" className="inputImage" />
       <input
         id="imgFile"
         type="file"
         accept="image/png, image/jpeg"
         onChange={handleChange}
         ref={inputRef}
       />
+
       {value && (
-        <button onClick={handleClearClick} className="button">
-          <img src={xbutton} alt="취소버튼" />
-        </button>
+        <>
+          <button onClick={handleClearClick} className="button">
+            <img src={xbutton} alt="취소버튼" />
+          </button>
+          <img src={preview} alt="" className="inputImage" />
+        </>
       )}
     </div>
   );

src/context/ItemContext.tsx → src/context/ProductContext.tsx

@@ -12,13 +12,15 @@ interface Product {
   tags: string;
 }
 
-interface ItemProviderPropt {
+interface ProductProviderPropt {
   children: ReactNode;
 }
 
-export const ItemContext = createContext<Product[]>([]);
+export const ProductContext = createContext<Product[]>([]);
 
-export const ItemProvider: React.FC<ItemProviderPropt> = ({ children }) => {
+export const ProductProvider: React.FC<ProductProviderPropt> = ({
+  children,
+}) => {
   const [itemList, setItemList] = useState<Product[]>([]);
 
   useEffect(() => {
@@ -34,6 +36,8 @@ export const ItemProvider: React.FC<ItemProviderPropt> = ({ children }) => {
   }, []);
 
   return (
-    <ItemContext.Provider value={itemList}>{children}</ItemContext.Provider>
+    <ProductContext.Provider value={itemList}>
+      {children}
+    </ProductContext.Provider>
   );
 };