-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' of https://github.com/UMC-FITple/Frontend into fea…
…ture/#46
- Loading branch information
Showing
14 changed files
with
371 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요."); | ||
| } | ||
| }; |
256 changes: 190 additions & 66 deletions
256
FITple-Frontend/src/components/CompareInputPopUp/CompareInputPopUp.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,193 @@ | ||
| import { AddInputCardBtn, BackArrowBtn, BackgroundContainer, CloseBtn, CompareInput, CompareInputAndText, CompareInputAndTextContainer, CompareInputCard, CompareInputCardConfirmBtn, CompareInputCardDelBtn, CompareInputContainer, CompareInputText, ComparePopUpBackground, ComparePopUpContainer, ComparePopUpInnerContainer, ComparePopUpInnerMainContainer, ComparePopUpMainText, CompareSubText } from "./CompareInputPopUp.style" | ||
| import { useState } from "react"; | ||
| import { | ||
| AddInputCardBtn, | ||
| BackArrowBtn, | ||
| BackgroundContainer, | ||
| CloseBtn, | ||
| CompareInput, | ||
| CompareInputAndText, | ||
| CompareInputAndTextContainer, | ||
| CompareInputCard, | ||
| CompareInputCardConfirmBtn, | ||
| CompareInputCardDelBtn, | ||
| CompareInputContainer, | ||
| CompareInputText, | ||
| ComparePopUpBackground, | ||
| ComparePopUpContainer, | ||
| ComparePopUpInnerContainer, | ||
| ComparePopUpInnerMainContainer, | ||
| ComparePopUpMainText, | ||
| CompareSubText, | ||
| } from "./CompareInputPopUp.style"; | ||
|
|
||
| function CompareInputPopUp({ popupClose, comparePopUpOpen, onSave, compareSearchPopUpOpen,}) { | ||
| const [inputValues, setInputValues] = useState([ | ||
| { | ||
| size: "", | ||
| totalLength: "", | ||
| shoulderWidth: "", | ||
| chestWidth: "", | ||
| armholeWidth: "", | ||
| sleeveWidth: "", | ||
| sleeveLength: "", | ||
| hemWidth: "", | ||
| }, | ||
| ]); | ||
|
|
||
| function CompareInputPopUp() { | ||
| const handleInputChange = (index, field, value) => { | ||
| const updatedInputValues = [...inputValues]; | ||
| updatedInputValues[index][field] = value; | ||
| setInputValues(updatedInputValues); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <BackgroundContainer> | ||
| <ComparePopUpContainer> | ||
| <ComparePopUpBackground> | ||
| <ComparePopUpInnerContainer> | ||
| <ComparePopUpInnerMainContainer> | ||
| <BackArrowBtn src="../assets/_.svg" /> | ||
| <ComparePopUpMainText>사이즈 비교</ComparePopUpMainText> | ||
| <CloseBtn src="../assets/X(Compare).svg" /> | ||
| </ComparePopUpInnerMainContainer> | ||
| <CompareSubText>비교할 옷의 사이즈를 입력해주세요.</CompareSubText> | ||
| <CompareInputContainer> | ||
| <CompareInputCard> | ||
| <CompareInputAndTextContainer> | ||
| <CompareInputAndText> | ||
| <CompareInputText>사이즈</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>총장</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>어깨단면</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>가슴단면</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| </CompareInputAndTextContainer> | ||
| <CompareInputAndTextContainer> | ||
| <CompareInputAndText> | ||
| <CompareInputText>암홀단면</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>소매단면</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>소매길이</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>밑단단면</CompareInputText> | ||
| <CompareInput/> | ||
| </CompareInputAndText> | ||
| </CompareInputAndTextContainer> | ||
| <CompareInputCardDelBtn>삭제하기</CompareInputCardDelBtn> | ||
| </CompareInputCard> | ||
| <AddInputCardBtn src="../assets/Group 330.svg" /> | ||
| </CompareInputContainer> | ||
| <CompareInputCardConfirmBtn>저장하기</CompareInputCardConfirmBtn> | ||
| </ComparePopUpInnerContainer> | ||
| </ComparePopUpBackground> | ||
| </ComparePopUpContainer> | ||
| </BackgroundContainer> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default CompareInputPopUp | ||
| const handleSaveClick = () => { | ||
| onSave([...inputValues]); | ||
| }; | ||
|
|
||
| // 새로운 Input 카드를 추가하는 함수 | ||
| const addInputCard = () => { | ||
| setInputValues([ | ||
| ...inputValues, | ||
| { | ||
| size: "", | ||
| totalLength: "", | ||
| shoulderWidth: "", | ||
| chestWidth: "", | ||
| armholeWidth: "", | ||
| sleeveWidth: "", | ||
| sleeveLength: "", | ||
| hemWidth: "", | ||
| }, | ||
| ]); | ||
| }; | ||
|
|
||
| // 특정 Input 카드를 삭제하는 함수 | ||
| const removeInputCard = (index) => { | ||
| const updatedCards = inputValues.filter((_, i) => i !== index); | ||
| setInputValues(updatedCards); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <BackgroundContainer> | ||
| <ComparePopUpContainer> | ||
| <ComparePopUpBackground> | ||
| <ComparePopUpInnerContainer> | ||
| <ComparePopUpInnerMainContainer> | ||
| <BackArrowBtn src="../assets/_.svg" onClick={comparePopUpOpen} /> | ||
| <ComparePopUpMainText>사이즈 비교</ComparePopUpMainText> | ||
| <CloseBtn src="../assets/X(Compare).svg" onClick={popupClose} /> | ||
| </ComparePopUpInnerMainContainer> | ||
| <CompareSubText>비교할 옷의 사이즈를 입력해주세요.</CompareSubText> | ||
| <CompareInputContainer> | ||
| {/* 상태에 따라 각 CompareInputCard 렌더링 */} | ||
| {inputValues.map((card, index) => ( | ||
| <CompareInputCard key={index}> | ||
| <CompareInputAndTextContainer> | ||
| <CompareInputAndText> | ||
| <CompareInputText>사이즈</CompareInputText> | ||
| <CompareInput | ||
| value={card.size} | ||
| onChange={(e) => | ||
| handleInputChange(index, "size", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>총장</CompareInputText> | ||
| <CompareInput | ||
| value={card.totalLength} | ||
| onChange={(e) => | ||
| handleInputChange(index, "totalLength", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>어깨단면</CompareInputText> | ||
| <CompareInput | ||
| value={card.shoulderWidth} | ||
| onChange={(e) => | ||
| handleInputChange(index, "shoulderWidth", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>가슴단면</CompareInputText> | ||
| <CompareInput | ||
| value={card.chestWidth} | ||
| onChange={(e) => | ||
| handleInputChange(index, "chestWidth", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| </CompareInputAndTextContainer> | ||
| <CompareInputAndTextContainer> | ||
| <CompareInputAndText> | ||
| <CompareInputText>암홀단면</CompareInputText> | ||
| <CompareInput | ||
| value={card.armholeWidth} | ||
| onChange={(e) => | ||
| handleInputChange(index, "armholeWidth", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>소매단면</CompareInputText> | ||
| <CompareInput | ||
| value={card.sleeveWidth} | ||
| onChange={(e) => | ||
| handleInputChange(index, "sleeveWidth", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>소매길이</CompareInputText> | ||
| <CompareInput | ||
| value={card.sleeveLength} | ||
| onChange={(e) => | ||
| handleInputChange(index, "sleeveLength", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| <CompareInputAndText> | ||
| <CompareInputText>밑단단면</CompareInputText> | ||
| <CompareInput | ||
| value={card.hemWidth} | ||
| onChange={(e) => | ||
| handleInputChange(index, "hemWidth", e.target.value) | ||
| } | ||
| /> | ||
| </CompareInputAndText> | ||
| </CompareInputAndTextContainer> | ||
| {index !== 0 && ( | ||
| <CompareInputCardDelBtn | ||
| onClick={() => removeInputCard(index)} | ||
| > | ||
| 삭제하기 | ||
| </CompareInputCardDelBtn> | ||
| )} | ||
| </CompareInputCard> | ||
| ))} | ||
| {/* 새로운 CompareInputCard를 추가하는 버튼 */} | ||
| <AddInputCardBtn | ||
| src="../assets/Group 330.svg" | ||
| onClick={addInputCard} | ||
| /> | ||
| </CompareInputContainer> | ||
| <CompareInputCardConfirmBtn | ||
| onClick={() => { | ||
| handleSaveClick(); | ||
| compareSearchPopUpOpen(); | ||
| }} | ||
| > | ||
| 저장하기 | ||
| </CompareInputCardConfirmBtn> | ||
| </ComparePopUpInnerContainer> | ||
| </ComparePopUpBackground> | ||
| </ComparePopUpContainer> | ||
| </BackgroundContainer> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default CompareInputPopUp; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.