feat: select 페이지 생성

src/pages/SelectPage.style.ts

@@ -9,53 +9,44 @@ export const SelectPageContainer = styled.div`
     align-items: center;
     overflow: hidden;
     height: 100%;
+`;
 
-    .optionWrapper {
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .optionLeft,
-    .optionRight {
-        display: flex;
-
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        padding: 10px 20px;
-        overflow: hidden; /* 내용이 넘치면 숨김 */
-        white-space: nowrap; /* 텍스트를 한 줄로 유지 */
-        text-overflow: clip; /* 텍스트가 넘치면 그냥 잘라냄 */
-    }
-
-    .optionLeft {
-        background-color: #d9d9d9;
-        color: #000;
-        border-radius: 0 15px 15px 0;
-    }
-
-    .optionRight {
-        background-color: #37cdcd;
-        color: #fff;
-        border-radius: 15px 0 0 15px;
-    }
-    .container {
-    }
+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;
+`;
 
-    .item {
-    }
-    .box {
-        width: 200px;
-        height: 200px;
-        background: var(--accent);
-        background-color: #000;
-    }
+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 OptionContainer = styled.div``;
+export const OptionWrapper = styled.div`
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
 
 export const Item = styled(motion.div)`
     position: relative;

src/pages/SelectPage.tsx

@@ -20,6 +20,9 @@ import {
     CardContainer,
     ItemWrapper,
     Item,
+    OptionWrapper,
+    OptionLeft,
+    OptionRight,
 } from "./SelectPage.style";
 import ProgressBar from "@ramonak/react-progress-bar";
 
@@ -92,13 +95,9 @@ export default function SelectPage() {
                         )}
                     </CardWrapper>
 
-                    <div
-                        className="optionContainer"
-                        style={{ flexDirection: animateRightToLeft ? "row-reverse" : "row" }}
-                    >
-                        <div className="optionWrapper" style={{ display: animateRightToLeft ? "none" : "flex" }}>
-                            <motion.div
-                                className="optionLeft"
+                    <div style={{ flexDirection: animateRightToLeft ? "row-reverse" : "row" }}>
+                        <OptionWrapper style={{ display: animateRightToLeft ? "none" : "flex" }}>
+                            <OptionLeft
                                 initial={{ width: "auto" }}
                                 animate={animateLeftToRight ? { width: "100vw" } : { width: "auto" }}
                                 transition={{
@@ -109,13 +108,13 @@ export default function SelectPage() {
                                 onAnimationComplete={animateLeftToRight ? handleAnimationComplete : undefined}
                             >
                                 <Text size="xs">{questions[currentQuestionIndex].option[0]}</Text>
-                            </motion.div>
-                            <img src={leftArrow} className="leftArrow" />
-                        </div>
-                        <div className="optionWrapper" style={{ display: animateLeftToRight ? "none" : "flex" }}>
-                            <img src={rightArrow} className="rightArrow" />
-                            <motion.div
-                                className="optionRight"
+                            </OptionLeft>
+
+                            <img src={leftArrow} />
+                        </OptionWrapper>
+                        <OptionWrapper style={{ display: animateLeftToRight ? "none" : "flex" }}>
+                            <img src={rightArrow} />
+                            <OptionRight
                                 initial={{ width: "auto" }}
                                 animate={animateRightToLeft ? { width: "100vw" } : { width: "auto" }}
                                 transition={{
@@ -126,8 +125,8 @@ export default function SelectPage() {
                                 onAnimationComplete={animateRightToLeft ? handleAnimationComplete : undefined}
                             >
                                 <Text size="xs">{questions[currentQuestionIndex].option[1]}</Text>
-                            </motion.div>
-                        </div>
+                            </OptionRight>
+                        </OptionWrapper>
                     </div>
                 </SelectPageContainer>
             </SelectPageWrapper>