Merge branch 'dev' into feat/#29

FITple-Frontend/package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.2",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.24.1",
     "styled-components": "^6.1.11",
     "zustand": "^4.5.4"

FITple-Frontend/src/App.jsx

@@ -4,17 +4,19 @@ import { Route } from "react-router-dom";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import SignupPage from "./pages/SignupPage/SignupPage";
 import ClothdetailPage from "./pages/ClothdetailPage/ClothdetailPage";
+import ClothregisterPage from "./pages/ClothregisterPage/ClothregisterPage";
 import ClothmainPage from "./pages/ClothmainPage/ClothmainPage";
 import UserInfoPage from "./pages/UserInfoPage/UserInfoPage";
 import ProfilePage from "./pages/ProfilePage/ProfilePage";
 import RecomMainPage from "./pages/RecomMainPage/RecomMainPage";
 import RecomAllPage from "./pages/RecomAllPage/RecomAllPage";
-import RecomUserFeedPage from "./pages/RecomUserFeedPage/RecomUserFeedPage";
+//import RecomUserFeedPage from "./pages/RecomUserFeedPage/RecomUserFeedPage";
 // import RecomAllPage from "./pages/RecomAllPage/RecomAllPage";
 
 import LayoutNonNav from "./layout/LayoutNonNav";
 import Layout from "./layout/Layout";
-import ComparePopUp from "./components/ComparePopUp/ComparePopUp"; //확인용
+import ClothupdatePage from "./pages/ClothupdatePage/ClothupdatePage";
+
 function App() {
   return (
     <>
@@ -24,11 +26,13 @@ function App() {
           <Route path="/" element={<LoginPage />} />
           <Route path="/signup" element={<SignupPage />} />
           <Route path="/user" element={<UserInfoPage />} />
+          <Route path="/clothregister" element={<ClothregisterPage />} />
         </Route>
         {/* Navbar 있는 layout */}
         <Route element={<Layout />}>
           <Route path="/cloth" element={<ClothmainPage />} />
-          <Route path="/detail" element={<ClothdetailPage />} />
+          <Route path="/clothdetail" element={<ClothdetailPage />} />
+          <Route path="/clothupdate" element={<ClothupdatePage />} />
           <Route path="/profile" element={<ProfilePage />} />
           <Route path="/recommend" element={<RecomMainPage />} />
           <Route path="/recommendall" element={<RecomAllPage />} />

FITple-Frontend/src/components/BrandNumberSearch/BrandNumberSearch.jsx

@@ -0,0 +1,34 @@
+import {
+  SearchBox,
+  Searchtitle,
+  SearchInputBox,
+  SearchIconBox,
+  Container,
+  TitleContainer,
+  Xiconbox,
+} from "./BrandNumberSearch.style";
+import SearchIcon from "/assets/SearchIcon.svg";
+import XIcon from "/assets/Xicon.svg";
+
+const BrandNumberSearch = ({ onClose }) => {
+  const handleClose = () => {
+    onClose();
+  };
+  return (
+    <Container>
+      <TitleContainer>
+        <Searchtitle>제품번호 검색</Searchtitle>
+        <Xiconbox onClick={handleClose}>
+          <img src={XIcon} />
+        </Xiconbox>
+      </TitleContainer>
+      <SearchBox>
+        <SearchIconBox>
+          <img src={SearchIcon} />
+        </SearchIconBox>
+        <SearchInputBox type="text" placeholder="제품번호를 입력하세요." />
+      </SearchBox>
+    </Container>
+  );
+};
+export default BrandNumberSearch;

FITple-Frontend/src/components/BrandNumberSearch/BrandNumberSearch.style.js

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+export const Container = styled.div`
+  display: flex;
+  position: absolute;
+  justify-content: flex-start;
+  flex-direction: column;
+  width: 430px;
+  height: 600px;
+  background-color: white;
+  border-radius: 20px;
+  margin-left: 450px;
+`;
+export const TitleContainer = styled.div`
+  display: flex;
+  position: relative;
+  justify-content: flex-end;
+  margin-top: 30px;
+  margin-bottom: 30px;
+`;
+export const Xiconbox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 20px;
+  margin-left: 110px;
+  cursor: pointer;
+`;
+export const SearchBox = styled.div`
+  height: 61px;
+  width: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-left: 20px;
+`;
+export const SearchInputBox = styled.input`
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-weight: 500;
+  box-sizing: border-box;
+  border: 4px solid #838383;
+  border-radius: 30px;
+  padding-left: 20px;
+  color: #838383;
+  outline: none;
+  box-shadow: 0px 1px 3px #0000001a, 0px 5px 5px #00000017,
+    0px 11px 6px #0000000d, 0px 19px 8px #00000003, 0px 29px 8px #00000000;
+`;
+
+export const SearchIconBox = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  padding: 0px;
+  right: 20px;
+`;
+//브랜드검색글씨
+export const Searchtitle = styled.div`
+  align-items: center;
+  font-size: 24px;
+  font-family: "SUIT Variable", sans-serif;
+  font-weight: 700;
+  color: #0276fe;
+  margin-left: 30px;
+`;

FITple-Frontend/src/components/BrandSearch/BrandSearch.jsx

@@ -0,0 +1,34 @@
+import {
+  SearchBox,
+  Searchtitle,
+  SearchInputBox,
+  SearchIconBox,
+  Container,
+  TitleContainer,
+  Xiconbox,
+} from "./BrandSearch.style";
+import SearchIcon from "/assets/SearchIcon.svg";
+import XIcon from "/assets/Xicon.svg";
+
+const BrandSearch = ({ onClose }) => {
+  const handleClose = () => {
+    onClose();
+  };
+  return (
+    <Container>
+      <TitleContainer>
+        <Searchtitle>브랜드 검색</Searchtitle>
+        <Xiconbox onClick={handleClose}>
+          <img src={XIcon} />
+        </Xiconbox>
+      </TitleContainer>
+      <SearchBox>
+        <SearchIconBox>
+          <img src={SearchIcon} />
+        </SearchIconBox>
+        <SearchInputBox placeholder="브랜드를 입력하세요." />
+      </SearchBox>
+    </Container>
+  );
+};
+export default BrandSearch;