Merge pull request #38 from UMC-FITple/feat/#31

[FEAT] CompareInputPopUp + CompareSearchPopUp 구현 완료
UMC-FITple · Aug 15, 2024 · 11ba71d · 11ba71d
2 parents 9fd601a + f0fa22d
commit 11ba71d
Show file tree

Hide file tree

Showing 15 changed files with 407 additions and 185 deletions.
diff --git a/FITple-Frontend/assets/Group 330.svg b/FITple-Frontend/assets/Group 330.svg
diff --git a/FITple-Frontend/assets/X(Compare).svg b/FITple-Frontend/assets/X(Compare).svg
diff --git a/FITple-Frontend/assets/_.svg b/FITple-Frontend/assets/_.svg
diff --git a/FITple-Frontend/assets/수정 버튼.svg b/FITple-Frontend/assets/수정 버튼.svg
diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx
@@ -36,7 +36,7 @@ function App() {
           <Route path="/profile" element={<ProfilePage />} />
           <Route path="/recommend" element={<RecomMainPage />} />
           <Route path="/recommendall" element={<RecomAllPage />} />
-          <Route path="/a" element={<ComparePopUp />} /> {/* 확인용 */}
+          <Route path="/a" element={<CompareSearchPopUp />} /> {/* 확인용 */}
         </Route>
       </Routes>
     </>

diff --git a/FITple-Frontend/src/components/CompareCard/CompareCard.jsx b/FITple-Frontend/src/components/CompareCard/CompareCard.jsx
diff --git a/FITple-Frontend/src/components/CompareCard/CompareCard.style.js b/FITple-Frontend/src/components/CompareCard/CompareCard.style.js
diff --git a/FITple-Frontend/src/components/CompareInputPopUp/CompareInputPopUp.jsx b/FITple-Frontend/src/components/CompareInputPopUp/CompareInputPopUp.jsx
@@ -0,0 +1,69 @@
+import { AddInputCardBtn, BackArrowBtn, BackgroundContainer, CloseBtn, CompareInput, CompareInputAndText, CompareInputAndTextContainer, CompareInputCard, CompareInputCardConfirmBtn, CompareInputCardDelBtn, CompareInputContainer, CompareInputText, ComparePopUpBackground, ComparePopUpContainer, ComparePopUpInnerContainer, ComparePopUpInnerMainContainer, ComparePopUpMainText, CompareSubText } from "./CompareInputPopUp.style"
+
+
+function CompareInputPopUp() {
+
+    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
diff --git a/FITple-Frontend/src/components/CompareInputPopUp/CompareInputPopUp.style.js b/FITple-Frontend/src/components/CompareInputPopUp/CompareInputPopUp.style.js
@@ -0,0 +1,154 @@
+import styled from "styled-components";
+
+export const BackgroundContainer = styled.div`
+    position: fixed;
+    top:0; left: 0; bottom: 0; right: 0;
+    background: rgba(0,0,0,0.5);
+    overflow-y: auto;  /* 추가: 스크롤 가능하도록 설정 */
+`;
+
+export const ComparePopUpContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+export const ComparePopUpBackground = styled.div`
+    margin-top: 92px;
+    width: 400px;
+    height: 560px;
+    background: white;
+    border-radius: 41px;
+    border: 1px;
+    border-color: #838383;
+`;
+
+export const ComparePopUpInnerContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+export const ComparePopUpInnerMainContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 50px;
+`;
+
+export const ComparePopUpMainText = styled.div`
+    font-family: 'SUIT Variable', sans-serif;
+    color: #0276FE;
+    font-size: 24px;
+    font-weight: 700;
+`;
+
+export const CloseBtn = styled.img`
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
+    margin-right: 38px;
+`;
+
+export const BackArrowBtn = styled.img`
+    height: 40px;
+    width: 20px;
+    cursor: pointer;
+    margin-left: 38px;
+`;
+
+export const CompareSubText = styled.div`
+    font-family: 'SUIT Variable', sans-serif;
+    color: #000000;
+    font-size: 16px;
+    font-weight: 700;
+    margin-top: 27px;
+`;
+
+export const CompareInputContainer = styled.div`
+    margin-top: 19px;
+    width: 338px;
+    height: 334px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+export const CompareInputCard = styled.div`
+    margin-bottom: 12px;
+    border-radius: 15px;
+    border: 1px solid #838383;
+    width: 338px;
+    height: 200px;
+    position: relative;
+`;
+
+export const CompareInputAndTextContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+`;
+
+export const CompareInputAndText = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 22px;
+`;
+
+export const CompareInputText = styled.div`
+    font-family: 'SUIT Variable', sans-serif;
+    color: #838383;
+    font-size: 16px;
+    font-weight: 500;
+`;
+
+export const CompareInput = styled.input`
+    margin-top: 8px;
+    border-radius: 10px;
+    border: 1px solid #0276FE;
+    width: 56px;
+    height: 32px;
+    text-align: center;
+    font-family: 'SUIT Variable', sans-serif;
+    color: #000000;
+    font-size: 16px;
+    font-weight: 500;
+`;
+
+export const CompareInputCardDelBtn = styled.div`
+    font-family: 'SUIT Variable', sans-serif;
+    color: #000000;
+    font-size: 12px;
+    font-weight: 500;
+    margin-top: 12px;
+    text-decoration: underline;
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+`;
+
+export const AddInputCardBtn = styled.img`
+    height: 36px;
+    width: 36px;
+    cursor: pointer;
+    margin-top: 8px;
+`;
+
+export const CompareInputCardConfirmBtn = styled.button`
+    background-color: #0075FF;
+    height: 43px;
+    width: 220px;
+    margin-top: 4px;
+    font-family: 'SUIT Variable', sans-serif;
+    color: #FFFFFF;
+    font-size: 16px;
+    font-weight: 700;
+    text-align: center;
+    border-radius: 10px;
+    border: 0;
+    cursor: pointer;
+`;
diff --git a/FITple-Frontend/src/components/ComparePopUp/ComparePopUp.jsx b/FITple-Frontend/src/components/ComparePopUp/ComparePopUp.jsx
@@ -1,4 +1,4 @@
-import { BackgroundContainer, CompareIMGOrText, CompareIMGUploadCameraLogo, CompareIMGUploadContainer, CompareIMGUploadText, CompareInputUploadText, ComparePopUpBackground, ComparePopUpContainer, ComparePopUpInnerContainer, ComparePopUpMainText } from "./ComparePopUp.style"
+import { BackgroundContainer, CloseBtn, CompareIMGOrText, CompareIMGUploadCameraLogo, CompareIMGUploadContainer, CompareIMGUploadText, CompareInputUploadText, ComparePopUpBackground, ComparePopUpContainer, ComparePopUpInnerContainer, ComparePopUpMainText } from "./ComparePopUp.style"
 
 function ComparePopUp() {
 
@@ -11,6 +11,7 @@ function ComparePopUp() {
                   <ComparePopUpMainText>
                     사이즈 비교
                   </ComparePopUpMainText>
+                  <CloseBtn src="../assets/X(Compare).svg" />
                   <CompareIMGUploadContainer>
                     <CompareIMGUploadCameraLogo src="../assets/카메라 아이콘.svg" />
                     <CompareIMGUploadText>사이즈 정보<br/>이미지 업로드하기</CompareIMGUploadText>

diff --git a/FITple-Frontend/src/components/ComparePopUp/ComparePopUp.style.js b/FITple-Frontend/src/components/ComparePopUp/ComparePopUp.style.js
@@ -27,6 +27,7 @@ export const ComparePopUpInnerContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
 `;
 
 export const ComparePopUpMainText = styled.div`
@@ -46,6 +47,11 @@ export const CompareIMGUploadContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
+    transition: background 0.5s;
+    &:hover {
+        background: #838383;
+    }
+    cursor: pointer;
 `;
 
 export const CompareIMGUploadCameraLogo = styled.img`
@@ -82,4 +88,14 @@ export const CompareInputUploadText = styled.div`
     margin-top: 14px;
     text-align: center;
     text-decoration: underline;
+    cursor: pointer;
+`;
+
+export const CloseBtn = styled.img`
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
+    position: absolute;
+    top: 50px;
+    right: 38px;
 `;