diff --git a/FITple-Frontend/assets/SearchIcon.svg b/FITple-Frontend/assets/SearchIcon.svg index 659329c..0b4629d 100644 --- a/FITple-Frontend/assets/SearchIcon.svg +++ b/FITple-Frontend/assets/SearchIcon.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/FITple-Frontend/assets/Star5.svg b/FITple-Frontend/assets/Star5.svg new file mode 100644 index 0000000..a4f0dce --- /dev/null +++ b/FITple-Frontend/assets/Star5.svg @@ -0,0 +1,3 @@ + + + diff --git a/FITple-Frontend/assets/Star8.svg b/FITple-Frontend/assets/Star8.svg new file mode 100644 index 0000000..c158301 --- /dev/null +++ b/FITple-Frontend/assets/Star8.svg @@ -0,0 +1,3 @@ + + + diff --git a/FITple-Frontend/assets/Xicon.svg b/FITple-Frontend/assets/Xicon.svg new file mode 100644 index 0000000..ae4fdbb --- /dev/null +++ b/FITple-Frontend/assets/Xicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/FITple-Frontend/assets/changebutton.svg b/FITple-Frontend/assets/changebutton.svg index 7ef12fc..088e8ea 100644 --- a/FITple-Frontend/assets/changebutton.svg +++ b/FITple-Frontend/assets/changebutton.svg @@ -1,10 +1,10 @@ - - + + - - + + - + diff --git a/FITple-Frontend/assets/emptybookmark.svg b/FITple-Frontend/assets/emptybookmark.svg new file mode 100644 index 0000000..041305c --- /dev/null +++ b/FITple-Frontend/assets/emptybookmark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/FITple-Frontend/assets/filledbookmark.svg b/FITple-Frontend/assets/filledbookmark.svg new file mode 100644 index 0000000..2f78df7 --- /dev/null +++ b/FITple-Frontend/assets/filledbookmark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/FITple-Frontend/assets/filledheart.svg b/FITple-Frontend/assets/filledheart.svg new file mode 100644 index 0000000..34e3c9c --- /dev/null +++ b/FITple-Frontend/assets/filledheart.svg @@ -0,0 +1,3 @@ + + + diff --git a/FITple-Frontend/assets/plus.svg b/FITple-Frontend/assets/plus.svg index 7231eb3..9a7ede1 100644 --- a/FITple-Frontend/assets/plus.svg +++ b/FITple-Frontend/assets/plus.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/FITple-Frontend/assets/registerimage.svg b/FITple-Frontend/assets/registerimage.svg new file mode 100644 index 0000000..509c6a7 --- /dev/null +++ b/FITple-Frontend/assets/registerimage.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/FITple-Frontend/package.json b/FITple-Frontend/package.json index f9aa954..6f90ba6 100644 --- a/FITple-Frontend/package.json +++ b/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" diff --git a/FITple-Frontend/pnpm-lock.yaml b/FITple-Frontend/pnpm-lock.yaml index d0b18e6..a41301c 100644 --- a/FITple-Frontend/pnpm-lock.yaml +++ b/FITple-Frontend/pnpm-lock.yaml @@ -14,6 +14,12 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-hook-form: + specifier: ^7.52.2 + version: 7.52.2(react@18.3.1) + react-modal: + specifier: ^3.16.1 + version: 3.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-router-dom: specifier: ^6.24.1 version: 6.24.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -32,13 +38,13 @@ importers: version: 18.3.0 '@vitejs/plugin-react-swc': specifier: ^3.5.0 - version: 3.7.0(vite@5.3.3) + version: 3.7.0(vite@5.3.5) eslint: specifier: ^8.57.0 version: 8.57.0 eslint-plugin-react: specifier: ^7.34.2 - version: 7.34.3(eslint@8.57.0) + version: 7.34.4(eslint@8.57.0) eslint-plugin-react-hooks: specifier: ^4.6.2 version: 4.6.2(eslint@8.57.0) @@ -46,8 +52,8 @@ importers: specifier: ^0.4.7 version: 0.4.8(eslint@8.57.0) vite: - specifier: ^5.3.3 - version: 5.3.3 + specifier: ^5.3.5 + version: 5.3.5 packages: @@ -657,6 +663,9 @@ packages: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} + exenv@1.2.2: + resolution: {integrity: sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==} + fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} @@ -1041,9 +1050,25 @@ packages: peerDependencies: react: ^18.3.1 + react-hook-form@7.52.2: + resolution: {integrity: sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 || ^19 + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-lifecycles-compat@3.0.4: + resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} + + react-modal@3.16.1: + resolution: {integrity: sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==} + engines: {node: '>=8'} + peerDependencies: + react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 + react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 + react-router-dom@6.24.1: resolution: {integrity: sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==} engines: {node: '>=14.0.0'} @@ -1249,6 +1274,9 @@ packages: terser: optional: true + warning@4.0.3: + resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} + which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} @@ -1946,6 +1974,8 @@ snapshots: esutils@2.0.3: {} + exenv@1.2.2: {} + fast-deep-equal@3.1.3: {} fast-json-stable-stringify@2.1.0: {} @@ -2328,8 +2358,23 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-hook-form@7.52.2(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} + react-lifecycles-compat@3.0.4: {} + + react-modal@3.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + exenv: 1.2.2 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-lifecycles-compat: 3.0.4 + warning: 4.0.3 + react-router-dom@6.24.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@remix-run/router': 1.17.1 @@ -2587,6 +2632,10 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + warning@4.0.3: + dependencies: + loose-envify: 1.4.0 + which-boxed-primitive@1.0.2: dependencies: is-bigint: 1.0.4 diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index a6c8232..3de8097 100644 --- a/FITple-Frontend/src/App.jsx +++ b/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() { } /> } /> } /> + } /> {/* Navbar 있는 layout */} }> } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/FITple-Frontend/src/components/BrandNumberSearch/BrandNumberSearch.jsx b/FITple-Frontend/src/components/BrandNumberSearch/BrandNumberSearch.jsx new file mode 100644 index 0000000..a1041e9 --- /dev/null +++ b/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 ( + + + 제품번호 검색 + + + + + + + + + + + + ); +}; +export default BrandNumberSearch; diff --git a/FITple-Frontend/src/components/BrandNumberSearch/BrandNumberSearch.style.js b/FITple-Frontend/src/components/BrandNumberSearch/BrandNumberSearch.style.js new file mode 100644 index 0000000..76e7ffa --- /dev/null +++ b/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; +`; diff --git a/FITple-Frontend/src/components/BrandSearch/BrandSearch.jsx b/FITple-Frontend/src/components/BrandSearch/BrandSearch.jsx new file mode 100644 index 0000000..9f5a5a0 --- /dev/null +++ b/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 ( + + + 브랜드 검색 + + + + + + + + + + + + ); +}; +export default BrandSearch; diff --git a/FITple-Frontend/src/components/BrandSearch/BrandSearch.style.js b/FITple-Frontend/src/components/BrandSearch/BrandSearch.style.js new file mode 100644 index 0000000..76e7ffa --- /dev/null +++ b/FITple-Frontend/src/components/BrandSearch/BrandSearch.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; +`; diff --git a/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.jsx b/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.jsx new file mode 100644 index 0000000..4b68da8 --- /dev/null +++ b/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.jsx @@ -0,0 +1,30 @@ +import { + DeletePopup, + DeletePopupBack, + DeletePopupDelete, + DeletePopupText, + PopupButtonContainer, +} from "./DeletePopUp.style"; +import { useState } from "react"; + +const DeletePopUp = ({ onClose }) => { + const handlePopupback = () => { + onClose(); + }; + const [popupdelete, setPopupdelete] = useState(false); + const handlePopupdelete = () => { + setPopupdelete(!popupdelete); + }; + return ( + + 정말 삭제하시겠습니까? + + 뒤로가기 + + 삭제하기 + + + + ); +}; +export default DeletePopUp; diff --git a/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.style.js b/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.style.js new file mode 100644 index 0000000..0c9cd47 --- /dev/null +++ b/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.style.js @@ -0,0 +1,52 @@ +import styled from "styled-components"; +//삭제버튼 누를 씨 팝업 +export const DeletePopup = styled.div` + display: flex; + border: 1px solid #ffffff; + width: 650px; + height: 250px; + border-radius: 20px; + background-color: white; + position: absolute; + right: 420px; + bottom: 150px; + flex-direction: column; + justify-content: center; + z-index: 1; +`; +export const DeletePopupText = styled.div` + align-items: center; + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: 600; + color: #000000; + margin-left: 230px; +`; +export const PopupButtonContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 10px; +`; +export const DeletePopupBack = styled.button` + padding: 10px 40px; + border: 1px solid #d9d9d9; + color: #000000; + font-size: 16px; + font-weight: 700; + font-family: "SUIT Variable", sans-serif; + border-radius: 10px; + background-color: #d9d9d9; + cursor: pointer; +`; +export const DeletePopupDelete = styled.button` + padding: 10px 40px; + border: 1px solid; + color: white; + font-size: 16px; + font-weight: 700; + font-family: "SUIT Variable", sans-serif; + border-radius: 10px; + background-color: #ff004c; + cursor: pointer; +`; diff --git a/FITple-Frontend/src/components/Navbar/Navbar.jsx b/FITple-Frontend/src/components/Navbar/Navbar.jsx index 4c70ea3..24cf4d2 100644 --- a/FITple-Frontend/src/components/Navbar/Navbar.jsx +++ b/FITple-Frontend/src/components/Navbar/Navbar.jsx @@ -1,4 +1,3 @@ -import React from "react"; import Logo from "/assets/Logo.svg"; import SearchIcon from "/assets/SearchIcon.svg"; import { diff --git a/FITple-Frontend/src/components/Navbar/Navbar.style.js b/FITple-Frontend/src/components/Navbar/Navbar.style.js index 27e35bc..c44a359 100644 --- a/FITple-Frontend/src/components/Navbar/Navbar.style.js +++ b/FITple-Frontend/src/components/Navbar/Navbar.style.js @@ -80,4 +80,3 @@ export const SearchIconBox = styled.button` padding: 0px; left: 28px; `; - diff --git a/FITple-Frontend/src/components/PlusOpen/PlusOpen.jsx b/FITple-Frontend/src/components/PlusOpen/PlusOpen.jsx new file mode 100644 index 0000000..560a0ab --- /dev/null +++ b/FITple-Frontend/src/components/PlusOpen/PlusOpen.jsx @@ -0,0 +1,17 @@ +import { PlusOpenButton, PlusOpenButtons } from "./PlusOpen.style"; +import { useNavigate } from "react-router-dom"; + +const PlusOpen = () => { + const navigate = useNavigate(); + const handleNavigate = () => { + navigate("/clothregister"); + }; + return ( + + 직접 등록하기 + 검색하기 + + ); +}; + +export default PlusOpen; diff --git a/FITple-Frontend/src/components/PlusOpen/PlusOpen.style.js b/FITple-Frontend/src/components/PlusOpen/PlusOpen.style.js new file mode 100644 index 0000000..fafd633 --- /dev/null +++ b/FITple-Frontend/src/components/PlusOpen/PlusOpen.style.js @@ -0,0 +1,30 @@ +import styled from "styled-components"; + +export const PlusOpenButtons = styled.div` + display: flex; + position: absolute; + bottom: 100px; + right: 50px; + width: auto; + height: auto; + flex-direction: column; + justify-content: center; +`; +export const PlusOpenButton = styled.button` + display: flex; + width: 170px; + height: 50px; + justify-content: center; + align-items: center; + border: 1px solid #000000; + color: #000000; + font-size: 20px; + font-weight: 700; + font-family: "SUIT Variable", sans-serif; + border-radius: 10px; + background-color: #efefef; + cursor: pointer; + &:hover { + background-color: #626262; + } +`; diff --git a/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.jsx b/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.jsx new file mode 100644 index 0000000..e677eb4 --- /dev/null +++ b/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.jsx @@ -0,0 +1,25 @@ +import { + Container, + Text1, + Text2, + ButtonContainer, + Button, + Button2, +} from "./RegisterPopUp.style"; + +const RegisterPopUp = ({ onClose }) => { + const handleClose = () => { + onClose(); + }; + return ( + + 등록된 옷 정보는 다른사용자도 볼 수 있어요👀 + 개인정보 등 민감한 정보는 수정해주세요! + + + 등록하기 + + + ); +}; +export default RegisterPopUp; diff --git a/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.style.js b/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.style.js new file mode 100644 index 0000000..911f785 --- /dev/null +++ b/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.style.js @@ -0,0 +1,57 @@ +import styled from "styled-components"; + +export const Container = styled.div` + display: flex; + position: absolute; + justify-content: center; + flex-direction: column; + width: 760px; + height: 280px; + background-color: white; + border-radius: 20px; + top: 150px; + margin-left: 450px; +`; +export const Text1 = styled.div` + display: flex; + justify-content: center; + font-family: "SUIT Variable", sans-serif; + color: #000000; + font-size: 24px; + font-weight: 600; + margin-left: 20px; + margin-top: 20px; +`; +export const Text2 = styled.div` + display: flex; + justify-content: center; + font-family: "SUIT Variable", sans-serif; + color: #0075ff; + font-size: 20px; + font-weight: 700; + margin-left: 20px; + margin-top: 20px; +`; +export const ButtonContainer = styled.div` + display: flex; + justify-content: center; + margin-top: 20px; +`; +export const Button = styled.button` + width: 100px; + height: 40px; + background-color: #d9d9d9; + border: none; + border-radius: 10px; + cursor: pointer; +`; +export const Button2 = styled.button` + width: 100px; + height: 40px; + background-color: #0075ff; + color: white; + border: none; + border-radius: 10px; + cursor: pointer; + margin-left: 20px; +`; diff --git a/FITple-Frontend/src/components/SideBar/SideBar.style.js b/FITple-Frontend/src/components/SideBar/SideBar.style.js index 0afa98b..6e58bd8 100644 --- a/FITple-Frontend/src/components/SideBar/SideBar.style.js +++ b/FITple-Frontend/src/components/SideBar/SideBar.style.js @@ -12,6 +12,7 @@ export const SideBarContainer = styled.div` export const Menu = styled.div` display: flex; + position: relative; align-items: center; padding: 10px 15px; font-family: "SUIT Variable", sans-serif; @@ -23,4 +24,15 @@ export const Menu = styled.div` props.selected ? "#000000" : "#838383"}; /* 선택된 카테고리는 검은 글씨, 다른 카테고리는 회색 글씨 */ + &::before { + content: ""; + position: absolute; + width: 80%; + height: 10%; + background-color: #0276fe; + opacity: 0.3; + bottom: 10px; + left: 14px; + display: ${(props) => (props.selected ? "block" : "none")}; + } `; diff --git a/FITple-Frontend/src/components/SideBar/Store.js b/FITple-Frontend/src/components/SideBar/Store.js deleted file mode 100644 index e69de29..0000000 diff --git a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx index af8d34f..8bd30d1 100644 --- a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx +++ b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx @@ -16,28 +16,98 @@ import { Detailbox, CurvedRectangle, NoteArea, - TableContainer, - TableRow, - TableCell, - MeasureCell, - MeasureLabel, + EditButtons, + EditButton, + CurvedRectangle3, + MeasureArea, + MeasureNamebox, + MeasureName, + FullStar, + EmptyStar, + ProductContainer, + StarContainer, + Imgcontainer, + ProductDeImagemin, + ChangeButton, + EmptyBookmark, + FilledBookmark, } from "./ClothdetailPage.style"; import { useState } from "react"; - +import { useNavigate } from "react-router-dom"; +import Modal from "react-modal"; +import DeletePopUp from "../../components/DeletePopUp/DeletePopUp"; const ClothdetailPage = () => { + const navigate = useNavigate(); + //노트 const [note, setNote] = useState(""); + //수정하기,삭제하기 칸 열 기 + + const [isEdit, setIsEdit] = useState(false); + const toggleEdit = () => { + setIsEdit(!isEdit); + }; + const handleNavigate = () => { + navigate("/clothupdate"); + }; + const [isDeletePopupOpen, setisDeletePopupOpen] = useState(false); + const handleDeleteCloth = () => { + setisDeletePopupOpen(!isDeletePopupOpen); + }; + const handleInputchange = (e) => { setNote(e.target.value); }; + //별점 + const [rating, setRating] = useState(0); + const handleStarClick = (newRating) => { + setRating(newRating); + }; + const renderStars = () => { + const stars = []; + for (let i = 0; i < 5; i++) { + const isFilledStar = i < rating; + const StarComponent = isFilledStar ? FullStar : EmptyStar; + stars.push( + handleStarClick(i + 1)} + style={{ cursor: "pointer" }} + /> + ); + } + return stars; + }; + //찜하기 + const [isBookmark, setIsBookmark] = useState(false); + const handleBookmark = () => { + setIsBookmark(!isBookmark); + }; return (
+ + {isBookmark ? ( + + ) : ( + + )} 옷장{">"}아우터 + + + + + + + + + + {renderStars()} + @@ -45,10 +115,39 @@ const ClothdetailPage = () => { 에센셜 풀집 후디 - + + {isEdit && ( + + + 옷 정보 수정하기 + + + 옷 정보 삭제하기 + + + )} + {isDeletePopupOpen && ( + setisDeletePopupOpen(false)} + style={{ + overlay: { backgroundColor: "rgba(81, 78, 78, 0.162)" }, + content: { + border: "none", + backgroundColor: "transparent", + overflow: "hidden", + }, + }} + > + setisDeletePopupOpen(false)} + /> + + )} @@ -76,44 +175,56 @@ const ClothdetailPage = () => { onChange={handleInputchange} /> - - - - - 총기장 - - - 69cm - - - - - - 어깨너비 - - - 71cm - - - - - - 가슴둘레 - - - 66cm - - - - - - 소매길이 - - - 62cm - - - + 실축 사이즈 + + 총장 + + 40 + + cm + + + 어깨너비 + + 71 + + cm + + + 가슴단면 + + 73 + + cm + + + 암홀단면 + + - + + cm + + + 소매단면 + + - + + cm + + + 소매길이 + + - + + cm + + + 밑단단면 + + - + + cm +
diff --git a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js index a36cd9b..0b39f7d 100644 --- a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js +++ b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js @@ -2,25 +2,79 @@ import styled from "styled-components"; export const Parent1 = styled.div` display: flex; - align-items: center; + align-items: flex-start; justify-content: flex-start; + flex-direction: column; margin-top: 20px; + margin-left: 60px; `; export const Parent2 = styled.div` display: flex; align-items: center; justify-content: flex-start; - margin-left: 60px; + margin-left: 80px; `; export const Parent3 = styled.div` display: flex; align-items: flex-start; - flex-wrap: wrap; justify-content: flex-start; flex-direction: column; - margin-left: 40px; + margin-left: 80px; margin-top: 40px; `; +export const ProductContainer = styled.div` + display: flex; + position: absolute; + align-items: flex-start; + flex-wrap: wrap; + justify-content: flex-start; + flex-direction: column; + margin-left: 50px; + margin-bottom: 60px; +`; +export const StarContainer = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + margin-left: 200px; + margin-top: 20px; +`; + +export const Imgcontainer = styled.div` + display: flex; + width: 400px; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + overflow-x: scroll; + margin-top: 10px; + &::-webkit-scrollbar { + width: 7px; + height: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: #ddd; + border-radius: 5px; + } + + &::-webkit-scrollbar-track { + background-color: #f1f1f1; + } +`; +export const ProductDeImagemin = styled.img` + width: 80px; + height: 80px; + flex: 0 0 auto; + border-color: 1px solid gray; + border-radius: 10px; + margin-right: 10px; + margin-bottom: 10px; + background-color: #efefef; + background-image: url(); + background-position: center; + background-size: cover; +`; export const ClothNamebox = styled.div` display: flex; @@ -29,17 +83,21 @@ export const ClothNamebox = styled.div` margin-left: 30px; `; export const ClothName = styled.div` - font-size: 25px; + font-size: 35px; font-family: "SUIT Variable", sans-serif; - font-weight: 400; + font-weight: 700; color: #000000; margin-top: 20px; `; export const ClothdebarContainer = styled.div` display: flex; flex-direction: column; - margin-left: 400px; + margin-left: 250px; margin-bottom: 60px; + cursor: pointer; + &:hover { + background-color: #f0f0f0; + } `; export const Clothdebar = styled.div` //옷 이름 옆 점 세개(추가,수정나오는칸) @@ -55,26 +113,29 @@ export const BackIcon = styled.div` height: 38.83px; background: url(assets/back.svg); margin-left: 70px; + margin-top: 20px; `; export const CurrentCloth = styled.div` //옷장{">"}아우터 - font-size: 25px; + font-size: 20px; font-family: "SUIT Variable", sans-serif; - font-weight: 400; + font-weight: 600; color: #000000; - margin-left: 290px; - margin-top: 20px; + margin-left: 370px; `; - +//상세 정보 옷사진 나중에 fetch로 받아오기 export const ProductDeImage = styled.img` - width: 600px; - height: 600px; + width: 400px; + height: 400px; border-color: gray; + border-radius: 10px; background-color: #d9d9d9; background-image: url(); background-position: center; background-size: cover; + margin-bottom: 620px; + margin-left: 50px; `; /*메모*/ @@ -98,12 +159,12 @@ export const NoteArea = styled.textarea` `; export const DetailName = styled.div` - font-size: 30px; + font-size: 25px; font-family: "SUIT Variable", sans-serif; - font-weight: 400; - color: #838383; + font-weight: 600; + color: #0276fe; margin-left: 30px; - margin-top: 20px; + margin-top: 40px; `; export const DetailNamebox = styled.div` display: flex; @@ -118,30 +179,116 @@ export const DetailboxContainer = styled.div` export const Detailbox = styled.div` font-size: 25px; font-family: "SUIT Variable", sans-serif; - font-weight: 400; + font-weight: 700; color: #000000; - margin-left: 40px; + margin-left: 30px; + margin-top: 20px; `; -export const TableContainer = styled.div` + +/*수정하기 삭제하기*/ +export const EditButtons = styled.div` display: flex; + position: absolute; + right: 390px; + bottom: 330px; flex-direction: column; - width: 50%; - margin-top: 50px; + justify-content: center; + opacity: ${(props) => (props.isEdit ? 1 : 0)}; + transition: opacity 0.2s ease-in-out; +`; +export const EditButton = styled.button` + padding: 10px 40px; + border: 1px solid #000000; + color: #000000; + font-size: 16px; + font-weight: 500; + font-family: "SUIT Variable", sans-serif; + border-radius: 10px; + background-color: #efefef; + cursor: pointer; + &:hover { + background-color: #626262; + } +`; + +export const FullStar = styled.div` + width: 38px; + height: 37px; + background: url(assets/Star8.svg); +`; +export const EmptyStar = styled.div` + width: 38px; + height: 37px; + background: url(assets/Star5.svg); `; -export const TableRow = styled.table` - display: flex; - border: 1px solid #d9d9d9; - padding: 8px; +export const MeasureName = styled.div` + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: 600; + color: #838383; + margin-top: 20px; + width: 100%; `; -export const TableCell = styled.div` - text-align: center; - width: 25%; +export const MeasureNamebox = styled.div` + display: flex; + width: 80%; + margin-left: 70px; + justify-content: center; + align-items: center; `; -export const MeasureCell = styled.div` +export const CurvedRectangle3 = styled.div` + /*메모*/ + width: 180px; + height: 20px; + border: 1px solid #efefef; + border-radius: 16px; + padding: 10px; + margin-top: 20px; + margin-left: 10px; + margin-right: 10px; + background-color: #efefef; +`; +export const MeasureArea = styled.textarea` + width: 100%; + height: 100%; + resize: none; + border: none; + outline: none; + font-family: "SUIT Variable", sans-serif; + font-size: 15px; font-weight: bold; + background-color: transparent; + margin-left: 130px; + margin-right: 20px; +`; +//비교 +export const ChangeButton = styled.div` + position: fixed; + background: url(assets/changebutton.svg); + width: 97px; + height: 97px; + top: 450px; + left: 1280px; + cursor: pointer; +`; +// 하얀찜 +export const EmptyBookmark = styled.div` + position: fixed; + background: url(assets/emptybookmark.svg); + width: 97px; + height: 97px; + top: 550px; + left: 1280px; + cursor: pointer; `; -export const MeasureLabel = styled.div` - font-style: italic; - border-left: 1px solid #d9d9d9; +//파란색찜 +export const FilledBookmark = styled.div` + position: fixed; + background: url(assets/filledbookmark.svg); + width: 97px; + height: 97px; + top: 550px; + left: 1280px; + cursor: pointer; `; diff --git a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx index be7d48a..b5bc8db 100644 --- a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx +++ b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import SideBar from "../../components/SideBar/SideBar"; +import PlusOpen from "../../components/PlusOpen/PlusOpen"; import { ProductDetail, ProductImage, @@ -7,6 +8,9 @@ import { ProductName, ProductContainer, Parent, + FilledHeart, + Imgcontainer, + PLUSbutton, } from "./ClothmainPage.style"; const clothData = [ @@ -16,6 +20,7 @@ const clothData = [ size: "XL", detail: "오버핏", type: "아우터", + wish: "찜", }, { id: 1, @@ -23,6 +28,7 @@ const clothData = [ size: "L", detail: "오버핏", type: "아우터", + wish: "찜", }, { id: 2, @@ -30,6 +36,7 @@ const clothData = [ size: "M", detail: "여유로운 핏", type: "상의", + wish: "찜", }, { id: 3, @@ -37,6 +44,7 @@ const clothData = [ size: "L", detail: "짧고 편안함", type: "바지", + wish: "찜", }, { id: 4, @@ -44,6 +52,7 @@ const clothData = [ size: "38", detail: "여성스러운 디자인", type: "스커트", + wish: "찜", }, { id: 5, @@ -87,6 +96,12 @@ const ClothmainPage = () => { setFilteredData(clothData); }, []); + //plusopen 클릭시 이벤트 처리 함수 + const [isplusopen, setIsplusopen] = useState(false); + const handlePlusOpen = () => { + setIsplusopen(!isplusopen); + }; + return (
@@ -95,15 +110,21 @@ const ClothmainPage = () => { {filteredData.length === 0 &&
검색 결과가 없습니다.
} {filteredData.map((item) => ( - + + + {item.wish === "찜" && } + {item.name} {item.size}•{item.detail} ))} + + {isplusopen && } +
diff --git a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js index 87281c5..6f165b4 100644 --- a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js +++ b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js @@ -25,6 +25,10 @@ export const ProductImage = styled.img` background-size: cover; /* 이미지 크기 설정 */ margin-bottom: 10px; /* 하단 여백 */ `; +export const Imgcontainer = styled.div` + display: flex; + position: relative; +`; export const ProductName = styled.div` font-size: 20px; @@ -49,3 +53,23 @@ export const Parent = styled.div` display: flex; align-items: flex-start; `; + +export const FilledHeart = styled.div` + background: url(assets/filledheart.svg); + position: absolute; + top: 20px; + right: 15px; + width: 33.33px; + height: 30.58px; + z-index: 1; +`; + +export const PLUSbutton = styled.div` + background: url(assets/plus.svg); + position: fixed; + width: 97px; + height: 97px; + right: 100px; + top: 500px; + cursor: pointer; +`; diff --git a/FITple-Frontend/src/pages/ClothregisterPage/ClothregisterPage.jsx b/FITple-Frontend/src/pages/ClothregisterPage/ClothregisterPage.jsx new file mode 100644 index 0000000..efea774 --- /dev/null +++ b/FITple-Frontend/src/pages/ClothregisterPage/ClothregisterPage.jsx @@ -0,0 +1,359 @@ +import { + BackIcon, + SS, + Parent1, + Parent2, + Parent3, + ProductDeImage, + ProductDeImagemin, + Imgcontainer, + CurvedRectangle, + DetailNamebox, + DetailName, + Detailbox, + NoteArea, + FullStar, + EmptyStar, + CurvedRectangle2, + Toggledown, + DropdownContainer, + DropdownItem, + DropdownList, + Dropdefault, + MeasureArea, + MeasureNamebox, + MeasureName, + CurvedRectangle3, + StyledButton, + Registerimage, + SearchIconBox, +} from "./ClothregisterPage.style"; +import { useState } from "react"; +import SearchIcon from "/assets/SearchIcon.svg"; +import BrandSearch from "../../components/BrandSearch/BrandSearch"; +import BrandNumberSearch from "../../components/BrandNumberSearch/BrandNumberSearch"; +import RegisterPopUp from "../../components/RegisterPopUp/RegisterPopUp"; +import Modal from "react-modal"; + +const ClothregisterPage = () => { + //더미데이터 + const clothingCategories = [ + { value: "아우터", label: "아우터" }, + { value: "반소매 상의", label: "반소매 상의" }, + { value: "긴소매 상의", label: "긴소매 상의" }, + { value: "슬리브리스 상의", label: "슬리브리스 상의" }, + { value: "롱팬츠", label: "롱팬츠" }, + { value: "숏팬츠", label: "숏팬츠" }, + { value: "스커트", label: "스커트" }, + { value: "원피스", label: "원피스" }, + { value: "신발", label: "신발" }, + ]; + + const fitOptions = [ + { value: "세미", label: "세미" }, + { value: "오버", label: "오버" }, + { value: "세미오버", label: "세미오버" }, + ]; + //드롭다운 + const [dropdown, setDropdown] = useState({ + category: { + isOpen: false, + value: "", + }, + fit: { + isOpen: false, + value: "", + }, + }); + const handleDropdown = (type) => { + setDropdown((prevstate) => ({ + ...prevstate, + [type]: { + ...prevstate[type], + isOpen: !prevstate[type].isOpen, + }, + })); + }; + const handelDropdownSelect = (type, value) => { + setDropdown((prevstate) => ({ + ...prevstate, + [type]: { + ...prevstate[type], + isOpen: false, + value, + }, + })); + }; + //별점 + const [rating, setRating] = useState(0); + const handleStarClick = (newRating) => { + setRating(newRating); + }; + const renderStars = () => { + const stars = []; + for (let i = 0; i < 5; i++) { + const isFilledStar = i < rating; + const StarComponent = isFilledStar ? FullStar : EmptyStar; + stars.push( + handleStarClick(i + 1)} + style={{ cursor: "pointer" }} + /> + ); + } + return stars; + }; + //브랜드 검색 + const [brand, setBrand] = useState(false); + const handleBrand = () => { + setBrand(!brand); + }; + //제품번호 검색 + const [number, setNumber] = useState(false); + const handleNumber = () => { + setNumber(!number); + }; + //옷정보등록하기 + const [registerpopup, setRegisterpopup] = useState(false); + const handleRegister = () => { + setRegisterpopup(!registerpopup); + }; + + return ( +
+ + + + + + + + + + + + + + + + + + 브랜드 + + + + + + {brand && ( + handleBrand(false)} + style={{ + overlay: { backgroundColor: "rgba(81, 78, 78, 0.162)" }, + content: { + border: "none", + backgroundColor: "transparent", + overflow: "hidden", + }, + }} + > + + + )} + + + + + 제품명 * + + + + + + + + + 제품번호* + + + + + + + {number && ( + handleNumber(false)} + style={{ + overlay: { backgroundColor: "rgba(81, 78, 78, 0.162)" }, + content: { + border: "none", + backgroundColor: "transparent", + overflow: "hidden", + }, + }} + > + + + )} + + + + 분류* + + + {dropdown.category.value} + handleDropdown("category")}> + < + + + + + {clothingCategories.map((category) => ( + + handelDropdownSelect("category", category.value) + } + > + {category.label} + + ))} + + + + + + + 사이즈* + + + + + + + + 핏* + + + {dropdown.fit.value} + handleDropdown("fit")}> + < + + + + + {fitOptions.map((fit) => ( + handelDropdownSelect("fit", fit.value)} + > + {fit.label} + + ))} + + + + + 색상 + + + + + + URL + + + + + + 평가 + + {renderStars()} + + + + 메모 + + + + + + 실축 사이즈 + + 총장 + + + + cm + + + 어깨너비 + + + + cm + + + 가슴단면 + + + + cm + + + 암홀단면 + + - + + cm + + + 소매단면 + + - + + cm + + + 소매길이 + + - + + cm + + + 밑단단면 + + - + + cm + + + 옷 정보 등록하기 + + {registerpopup && ( + handleRegister(false)} + style={{ + overlay: { backgroundColor: "rgba(81, 78, 78, 0.162)" }, + content: { + border: "none", + backgroundColor: "transparent", + overflow: "hidden", + }, + }} + > + + + )} + + + +
+ ); +}; + +export default ClothregisterPage; diff --git a/FITple-Frontend/src/pages/ClothregisterPage/ClothregisterPage.style.js b/FITple-Frontend/src/pages/ClothregisterPage/ClothregisterPage.style.js new file mode 100644 index 0000000..390966e --- /dev/null +++ b/FITple-Frontend/src/pages/ClothregisterPage/ClothregisterPage.style.js @@ -0,0 +1,278 @@ +import styled from "styled-components"; + +export const Parent1 = styled.div` + display: flex; + align-items: flex-start; + justify-content: flex-start; + margin-top: 20px; +`; +export const BackIcon = styled.div` + //뒤로가기 아이콘 + width: 11px; + height: 40px; + background: url(assets/back.svg); +`; +// *모양 +export const SS = styled.div` + font-family: "SUIT"; + font-size: 20px; + font-weight: bold; + color: #ff84a9; +`; + +export const FullStar = styled.div` + width: 38px; + height: 37px; + background: url(assets/Star8.svg); +`; +export const EmptyStar = styled.div` + width: 38px; + height: 37px; + background: url(assets/Star5.svg); +`; +export const Parent2 = styled.div` + display: flex; + align-items: flex-start; + flex-wrap: wrap; + justify-content: flex-start; + flex-direction: column; + margin-left: 80px; + margin-top: 20px; + margin-right: 150px; +`; +export const ProductDeImage = styled.div` + width: 400px; + height: 400px; + border-color: gray; + border-radius: 10px; + background-color: #efefef; + background-image: url(); + background-position: center; + background-size: cover; +`; +export const Registerimage = styled.div` + margin-left: 140px; + margin-top: 120px; + width: 105px; + height: 141px; + background: url(assets/registerimage.svg); + cursor: pointer; +`; + +export const Imgcontainer = styled.div` + display: flex; + width: 400px; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + overflow-x: scroll; + margin-top: 10px; + &::-webkit-scrollbar { + width: 7px; + height: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: #ddd; + border-radius: 5px; + } + + &::-webkit-scrollbar-track { + background-color: #f1f1f1; + } +`; +export const ProductDeImagemin = styled.img` + width: 80px; + height: 80px; + flex: 0 0 auto; + border-color: 1px solid gray; + border-radius: 10px; + margin-right: 10px; + margin-bottom: 10px; + background-color: #efefef; + background-image: url(); + background-position: center; + background-size: cover; +`; + +export const CurvedRectangle = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 400px; + height: 20px; + border: 1px solid #efefef; + border-radius: 15px; + padding: 10px; + margin-top: 20px; + margin-left: 30px; + background-color: #efefef; +`; +export const CurvedRectangle2 = styled.div` + /*메모*/ + width: 400px; + height: 70px; + border: 1px solid #efefef; + border-radius: 15px; + padding: 10px; + margin-top: 20px; + margin-left: 30px; + background-color: #efefef; +`; +export const NoteArea = styled.textarea` + width: 100%; + height: 100%; + resize: none; + border: none; + outline: none; + font-family: sans-serif; + font-size: 15px; + font-weight: bold; + background-color: transparent; + margin-left: 20px; +`; +export const DetailName = styled.div` + display: flex; + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: 600; + color: #0075ff; + margin-left: 30px; + margin-top: 20px; +`; +export const DetailNamebox = styled.div` + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; +`; + +export const Parent3 = styled.div` + display: flex; + align-items: column; + justify-content: column; + flex-direction: column; + margin-top: 50px; +`; +export const Detailbox = styled.div` + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: bold; + color: #000000; + margin-left: 20px; +`; + +export const Toggledown = styled.div` + font-family: "SUIT"; + font-style: normal; + font-weight: 500; + font-size: 28px; + line-height: 55px; + display: flex; + align-items: center; + text-align: center; + color: #838383; + transform: rotate(-90deg); + margin-right: 20px; + cursor: pointer; +`; +export const DropdownContainer = styled.div` + position: relative; + width: 400px; + left: 260px; + display: ${(props) => (props.isToggle ? "block" : "none")}; +`; +export const DropdownList = styled.ul` + display: flex; + flex-direction: column; + box-sizing: border-box; + justify-content: flex-start; + align-items: flex-start; + position: absolute; + top: 100%; + right: 210px; + background-color: #f8f8f8; + padding: 0; + z-index: 1; +`; +export const DropdownItem = styled.li` + display: flex; + padding: 1rem 1.5rem; + width: 370px; + cursor: pointer; + + &:hover { + background-color: #f0f0f0; + } +`; +export const Dropdefault = styled.div` + width: 100%; + height: 70%; + font-family: "SUIT"; + font-size: 15px; + font-weight: bold; + margin-left: 20px; +`; + +/*실축사이즈 */ + +export const MeasureName = styled.div` + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: 600; + color: #838383; + margin-top: 20px; + width: 100%; +`; +export const MeasureNamebox = styled.div` + display: flex; + width: 80%; + margin-left: 70px; + justify-content: center; + align-items: center; +`; +export const CurvedRectangle3 = styled.div` + /*메모*/ + width: 180px; + height: 20px; + border: 1px solid #efefef; + border-radius: 16px; + padding: 10px; + margin-top: 20px; + margin-left: 10px; + margin-right: 10px; + background-color: #efefef; +`; +export const MeasureArea = styled.textarea` + width: 100%; + height: 100%; + resize: none; + border: none; + outline: none; + font-family: "SUIT Variable", sans-serif; + font-size: 15px; + font-weight: bold; + background-color: transparent; + margin-left: 130px; + margin-right: 20px; +`; +export const StyledButton = styled.button` + width: 500px; + height: 50px; + background-color: #0075ff; + border: none; + border-radius: 10px; + color: white; + font-size: 15px; + font-weight: bold; + cursor: pointer; + margin-top: 30px; +`; +export const SearchIconBox = styled.button` + background: none; + border: none; + cursor: pointer; + position: absolute; + padding: 0px; + margin-left: 10px; +`; diff --git a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx new file mode 100644 index 0000000..ecbb3b5 --- /dev/null +++ b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx @@ -0,0 +1,234 @@ +import { + BackIcon, + SS, + Parent1, + Parent2, + Parent3, + ProductDeImage, + ProductDeImagemin, + Imgcontainer, + CurvedRectangle, + DetailNamebox, + DetailName, + Detailbox, + NoteArea, + FullStar, + EmptyStar, + CurvedRectangle2, + Toggledown, + DropdownContainer, + DropdownItem, + DropdownList, + Dropdefault, + MeasureArea, + MeasureNamebox, + MeasureName, + CurvedRectangle3, + StyledButton, +} from "./ClothupdatePage.style"; +import { useState } from "react"; + +const ClothupdatePage = () => { + //드롭다운 + const [isToggle, setIsToggle] = useState(false); + const [selectedValue, setSelectedValue] = useState("아우터"); + const handleToggle = () => { + setIsToggle(!isToggle); + }; + const handleSelect = (value) => { + setSelectedValue(value); + setIsToggle(false); + }; + //별점 + const [rating, setRating] = useState(0); + const handleStarClick = (newRating) => { + setRating(newRating); + }; + const renderStars = () => { + const stars = []; + for (let i = 0; i < 5; i++) { + const isFilledStar = i < rating; + const StarComponent = isFilledStar ? FullStar : EmptyStar; + stars.push( + handleStarClick(i + 1)} + style={{ cursor: "pointer" }} + /> + ); + } + return stars; + }; + return ( +
+ + + + + + + + + + + + + + + + 브랜드 + + 나이키 + + + + + 제품명 * + + + + 에센셜 풀집 후디 + + + + + 제품번호* + + + + + + + + 분류* + + + {selectedValue} + < + + + + handleSelect("아우터")}> + 아우터 + + handleSelect("반소매 상의")}> + 반소매 상의 + + handleSelect("긴소매 상의")}> + 긴소매 상의 + + handleSelect("슬리브리스 상의")}> + 슬리브리스 상의 + + handleSelect("롱팬츠")}> + 롱팬츠 + + handleSelect("숏팬츠")}> + 숏팬츠 + + handleSelect("스커트")}> + 스커트 + + handleSelect("원피스")}> + 원피스 + + handleSelect("신발")}> + 신발 + + + + + + 사이즈 + + + + + + 핏 + + 세미 + + + + URL + + + + https:://adidas.co.kr/1245 + + + + + + 평가 + + {renderStars()} + + + + 메모 + + 길이는 딱 맞고,팔이 조금 길다. + + + + 실축 사이즈 + + 총장 + + 40 + + cm + + + 어깨너비 + + 71 + + cm + + + 가슴단면 + + 73 + + cm + + + 암홀단면 + + - + + cm + + + 소매단면 + + - + + cm + + + 소매길이 + + - + + cm + + + 밑단단면 + + - + + cm + + 옷 정보 수정하기 + + + +
+ ); +}; + +export default ClothupdatePage; diff --git a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.style.js b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.style.js new file mode 100644 index 0000000..2657b00 --- /dev/null +++ b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.style.js @@ -0,0 +1,261 @@ +import styled from "styled-components"; + +export const Parent1 = styled.div` + display: flex; + align-items: flex-start; + justify-content: flex-start; + margin-top: 20px; +`; +export const BackIcon = styled.div` + //뒤로가기 아이콘 + width: 11px; + height: 40px; + background: url(assets/back.svg); +`; +// *모양 +export const SS = styled.div` + font-family: "SUIT"; + font-size: 20px; + font-weight: bold; + color: #ff84a9; +`; + +export const FullStar = styled.div` + width: 38px; + height: 37px; + background: url(assets/Star8.svg); +`; +export const EmptyStar = styled.div` + width: 38px; + height: 37px; + background: url(assets/Star5.svg); +`; +export const Parent2 = styled.div` + display: flex; + align-items: flex-start; + flex-wrap: wrap; + justify-content: flex-start; + flex-direction: column; + margin-left: 80px; + margin-top: 20px; + margin-right: 150px; +`; +export const ProductDeImage = styled.img` + width: 400px; + height: 400px; + border-color: gray; + border-radius: 10px; + background-color: #efefef; + background-image: url(); + background-position: center; + background-size: cover; +`; +export const Imgcontainer = styled.div` + display: flex; + width: 400px; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + overflow-x: scroll; + margin-top: 10px; + &::-webkit-scrollbar { + width: 7px; + height: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: #ddd; + border-radius: 5px; + } + + &::-webkit-scrollbar-track { + background-color: #f1f1f1; + } +`; +export const ProductDeImagemin = styled.img` + width: 80px; + height: 80px; + flex: 0 0 auto; + border-color: 1px solid gray; + border-radius: 10px; + margin-right: 10px; + margin-bottom: 10px; + background-color: #efefef; + background-image: url(); + background-position: center; + background-size: cover; +`; + +export const CurvedRectangle = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 400px; + height: 20px; + border: 1px solid #efefef; + border-radius: 15px; + padding: 10px; + margin-top: 20px; + margin-left: 30px; + background-color: #efefef; +`; +export const CurvedRectangle2 = styled.div` + /*메모*/ + width: 400px; + height: 70px; + border: 1px solid #efefef; + border-radius: 15px; + padding: 10px; + margin-top: 20px; + margin-left: 30px; + background-color: #efefef; +`; +export const NoteArea = styled.textarea` + width: 100%; + height: 100%; + resize: none; + border: none; + outline: none; + font-family: sans-serif; + font-size: 15px; + font-weight: bold; + background-color: transparent; + margin-left: 20px; +`; +export const DetailName = styled.div` + display: flex; + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: 600; + color: #0075ff; + margin-left: 30px; + margin-top: 20px; +`; +export const DetailNamebox = styled.div` + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; +`; + +export const Parent3 = styled.div` + display: flex; + align-items: column; + justify-content: column; + flex-direction: column; + margin-top: 50px; +`; +export const Detailbox = styled.div` + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: bold; + color: #000000; + margin-left: 20px; +`; + +export const Toggledown = styled.div` + font-family: "SUIT"; + font-style: normal; + font-weight: 500; + font-size: 28px; + line-height: 55px; + display: flex; + align-items: center; + text-align: center; + color: #838383; + transform: rotate(-90deg); + margin-right: 20px; + cursor: pointer; +`; +export const DropdownContainer = styled.div` + position: relative; + width: 400px; + left: 260px; + display: ${(props) => (props.isToggle ? "block" : "none")}; +`; +export const DropdownList = styled.ul` + display: flex; + flex-direction: column; + box-sizing: border-box; + justify-content: flex-start; + align-items: flex-start; + position: absolute; + top: 100%; + right: 210px; + background-color: #f8f8f8; + padding: 0; + z-index: 1; +`; +export const DropdownItem = styled.li` + display: flex; + padding: 1rem 1.5rem; + width: 370px; + cursor: pointer; + + &:hover { + background-color: #f0f0f0; + } +`; +export const Dropdefault = styled.div` + width: 100%; + height: 70%; + font-family: "SUIT"; + font-size: 15px; + font-weight: bold; + margin-left: 20px; +`; + +/*실축사이즈 */ + +export const MeasureName = styled.div` + font-size: 20px; + font-family: "SUIT Variable", sans-serif; + font-weight: 600; + color: #838383; + margin-top: 20px; + width: 100%; +`; +export const MeasureNamebox = styled.div` + display: flex; + width: 80%; + margin-left: 70px; + justify-content: center; + align-items: center; +`; +export const CurvedRectangle3 = styled.div` + /*메모*/ + width: 180px; + height: 20px; + border: 1px solid #efefef; + border-radius: 16px; + padding: 10px; + margin-top: 20px; + margin-left: 10px; + margin-right: 10px; + background-color: #efefef; +`; +export const MeasureArea = styled.textarea` + width: 100%; + height: 100%; + resize: none; + border: none; + outline: none; + font-family: "SUIT Variable", sans-serif; + font-size: 15px; + font-weight: bold; + background-color: transparent; + margin-left: 130px; + margin-right: 20px; +`; +export const StyledButton = styled.button` + width: 500px; + height: 50px; + background-color: #0075ff; + border: none; + border-radius: 10px; + color: white; + font-size: 15px; + font-weight: bold; + cursor: pointer; + margin-top: 30px; +`;