Merge pull request #77 from UMC-FITple/feat/#71

Feat/#71 검색 페이지 UI 수정 / Navbar UI 수정
UMC-FITple · Aug 21, 2024 · a244386 · a244386
2 parents b1955b3 + bcd48a7
commit a244386
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 15 deletions.
diff --git a/FITple-Frontend/data/SearchMainApi.jsx b/FITple-Frontend/data/SearchMainApi.jsx
@@ -0,0 +1,29 @@
+const localhost = "http://localhost:3000";
+
+export const searchMain = async (category, clothId, size) => {
+  try {
+    const url = new URL(`${localhost}/FITple/search/main`);
+
+    // 쿼리 파라미터 추가
+    if (category !== undefined) url.searchParams.append("category", category);
+    if (clothId !== undefined) url.searchParams.append("clothId", clothId);
+    if (size !== undefined) url.searchParams.append("size", size);
+
+    console.log("url", url);
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`서버 오류: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("검색 요청 중 오류가 발생했습니다.", error);
+    throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
+  }
+};
diff --git a/FITple-Frontend/src/components/Navbar/Navbar.style.js b/FITple-Frontend/src/components/Navbar/Navbar.style.js
@@ -1,15 +1,18 @@
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 export const Container = styled.div`
+  display: flex;
+  justify-content: center;
   background-color: ${(props) => (props.$blue ? "#0075FF" : "white")};
-  padding: 12px 114px;
+  padding: 12px 0px;
   border-bottom: ${(props) => (props.$blue ? "none" : "1px solid #e0e0e0")};
 `;
 
 export const NavBarBox = styled.div`
   display: flex;
   align-items: center;
-  width: 100%;
+  justify-content: space-between;
+  width: 1200px;
 `;
 
 export const MainBox = styled.div`

diff --git a/FITple-Frontend/src/components/UserItem/UserItem.style.js b/FITple-Frontend/src/components/UserItem/UserItem.style.js
@@ -53,5 +53,5 @@ export const Size = styled.p`
 export const Wrap = styled.div`
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  width: 1250x;
 `;
diff --git a/FITple-Frontend/src/pages/SearchMainPage/SearchMainPage.jsx b/FITple-Frontend/src/pages/SearchMainPage/SearchMainPage.jsx
@@ -35,27 +35,28 @@ import {
 import React from "react";
 import SideBar from "../../components/SideBar/SideBar";
 import ItemList from "../../components/ItemList/ItemList";
+import { searchMain } from "../../../data/SearchMainApi";
 
 const SearchMainPage = () => {
   const getData = async () => {
-    const response = await fetch("http://localhost:3000/FITple/search/main");
-    const data = await response.json();
-    console.log("response", data);
+    const response = await searchMain(undefined, undefined, 5);
+    console.log(response);
   };
   getData();
+
   return (
     <Container>
       <Blur />
       {/* 위에 파란색 영역 */}
       <MainContainer>
-        <SunIconImg src={SunIcon} />
+        {/* <SunIconImg src={SunIcon} />
         <FireIconImg src={FireIcon} />
         <SpringIconImg src={SpringIcon} />
         <HeartIconImg src={HeartRedIcon} />
         <ThumbIconImg src={ThumbIcon} />
         <ThunderIconImg src={ThunderIcon} />
-        <StartRedIconImg src={StarRedIcon} />
-        <TitleBox>
+        <StartRedIconImg src={StarRedIcon} /> */}
+        {/* <TitleBox>
           <SubTitle>
             옷장에 <ImpactText>많이 담긴</ImpactText> 아이템이에요.
           </SubTitle>
@@ -66,7 +67,7 @@ const SearchMainPage = () => {
             </TitleBackground>
             <Box>)</Box>
           </Title>
-        </TitleBox>
+        </TitleBox> */}
 
         <SearchContainer>
           <SearchText>내 아이템들을 검색해서 등록해보세요!</SearchText>

diff --git a/FITple-Frontend/src/pages/SearchMainPage/SearchMainPage.style.js b/FITple-Frontend/src/pages/SearchMainPage/SearchMainPage.style.js
@@ -11,10 +11,9 @@ export const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px 0 41px 0;
   position: relative;
-  width: 1440px;
   height: fit-content;
+  padding: 40px 0;
 `;
 export const TitleContainer = styled.div``;
 export const TitleBox = styled.div`
@@ -50,7 +49,6 @@ export const TitleBackground = styled.div`
 `;
 export const SearchContainer = styled.div`
   width: 504px;
-  margin-top: 30px;
 `;
 export const SearchText = styled.div`
   font-size: 24px;
@@ -62,13 +60,12 @@ export const ItemContainer = styled.div`
   box-sizing: border-box;
   padding: 50px 114px;
   width: 100%;
-  border: 2px solid red;
 `;
 
 export const Blur = styled.div`
   position: absolute;
   width: 100%;
-  height: 470px;
+  height: 300px;
   top: -117px;
   transform: scaleX(1.2);
   z-index: -1;