style: 스타일 조정

LikeLion-KNU · Aug 28, 2024 · dffdd2a · dffdd2a
1 parent c809916
commit dffdd2a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 53 deletions.
diff --git a/src/pages/SelectPage.style.ts b/src/pages/SelectPage.style.ts
@@ -2,57 +2,26 @@ import { motion } from "framer-motion";
 
 import styled from "@emotion/styled";
 
-export const SelectPageContainer = styled.div`
+export const SelectPageWrapper = styled.div`
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    height: 100%;
-`;
-
-export const OptionLeft = styled(motion.div)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    padding: 10px 20px;
-    overflow: hidden; /* 내용이 넘치면 숨김 */
-    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
-    text-overflow: clip; /* 텍스트가 넘치면 그냥 잘라냄 */
-    background-color: #d9d9d9;
-    color: #000;
-    border-radius: 0 15px 15px 0;
 `;
 
-export const OptionRight = styled(motion.div)`
+export const SelectPageContainer = styled.div`
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
-    width: 100%;
-    height: 100%;
-    padding: 10px 20px;
-    overflow: hidden; /* 내용이 넘치면 숨김 */
-    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
-    text-overflow: clip; /* 텍스트가 넘치면 그냥 잘라냄 */
-    background-color: #37cdcd;
-    color: #fff;
-    border-radius: 15px 0 0 15px;
-`;
-
-export const OptionWrapper = styled.div`
+    margin-top: 8vh;
+    overflow: hidden;
     height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 `;
 
 export const Item = styled(motion.div)`
     position: relative;
     background-color: #fff;
-    width: 80vw;
-    max-width: 400px;
+    width: min(80vw, 400px);
+
     aspect-ratio: 3 / 4; /* 가로 세로 비율을 4:3으로 설정 */
     border-radius: 20px;
     background-size: cover;
@@ -64,27 +33,62 @@ export const ItemWrapper = styled(motion.div)`
     justify-content: center;
     align-items: center;
     position: relative;
-    padding: 80px;
 `;
 export const CardWrapper = styled.div`
     display: flex;
     justify-content: space-between;
-    width: 100%;
     height: auto;
-    margin-top: 20px;
 `;
 
 export const CardContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 3rem;
 `;
 
-export const SelectPageWrapper = styled.div`
+export const OptionWrapper = styled.div`
+    position: fixed;
+    bottom: 3rem;
+    width: min(100%, 800px);
     display: flex;
-    flex-direction: column;
-    justify-content: space-around;
+    justify-content: space-between;
+`;
+
+export const OptionContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+export const OptionLeft = styled(motion.div)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
     height: 100%;
+    padding: 10px 20px;
+    overflow: hidden; /* 내용이 넘치면 숨김 */
+    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
+    text-overflow: clip; /* 텍스트가 넘치면 그냥 잘라냄 */
+    background-color: #d9d9d9;
+    color: #000;
+    border-radius: 0 15px 15px 0;
+`;
+
+export const OptionRight = styled(motion.div)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 10px 20px;
+    overflow: hidden; /* 내용이 넘치면 숨김 */
+    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
+    text-overflow: clip; /* 텍스트가 넘치면 그냥 잘라냄 */
+    background-color: #37cdcd;
+    color: #fff;
+    border-radius: 15px 0 0 15px;
 `;
 
 export const ModalOverlay = styled.div`

diff --git a/src/pages/SelectPage.tsx b/src/pages/SelectPage.tsx
@@ -23,6 +23,7 @@ import {
     OptionWrapper,
     OptionLeft,
     OptionRight,
+    OptionContainer,
 } from "./SelectPage.style";
 import ProgressBar from "@ramonak/react-progress-bar";
 
@@ -95,11 +96,11 @@ export default function SelectPage() {
                         )}
                     </CardWrapper>
 
-                    <div style={{ flexDirection: animateRightToLeft ? "row-reverse" : "row" }}>
-                        <OptionWrapper style={{ display: animateRightToLeft ? "none" : "flex" }}>
+                    <OptionWrapper style={{ flexDirection: animateRightToLeft ? "row-reverse" : "row" }}>
+                        <OptionContainer style={{ display: animateRightToLeft ? "none" : "flex" }}>
                             <OptionLeft
                                 initial={{ width: "auto" }}
-                                animate={animateLeftToRight ? { width: "100vw" } : { width: "auto" }}
+                                animate={animateLeftToRight ? { width: "102vw" } : { width: "auto" }}
                                 transition={{
                                     delay: 0.2,
                                     duration: 1, // Decreased animation duration to make it faster
@@ -111,12 +112,12 @@ export default function SelectPage() {
                             </OptionLeft>
 
                             <img src={leftArrow} />
-                        </OptionWrapper>
-                        <OptionWrapper style={{ display: animateLeftToRight ? "none" : "flex" }}>
+                        </OptionContainer>
+                        <OptionContainer style={{ display: animateLeftToRight ? "none" : "flex" }}>
                             <img src={rightArrow} />
                             <OptionRight
                                 initial={{ width: "auto" }}
-                                animate={animateRightToLeft ? { width: "100vw" } : { width: "auto" }}
+                                animate={animateRightToLeft ? { width: "102vw" } : { width: "auto" }}
                                 transition={{
                                     delay: 0.2,
                                     duration: 1, // Decreased animation duration to make it faster
@@ -126,8 +127,8 @@ export default function SelectPage() {
                             >
                                 <Text size="xs">{questions[currentQuestionIndex].option[1]}</Text>
                             </OptionRight>
-                        </OptionWrapper>
-                    </div>
+                        </OptionContainer>
+                    </OptionWrapper>
                 </SelectPageContainer>
             </SelectPageWrapper>
         </>