From a15fee7e1d5a7a2f4eb35d81b678852f036c4f90 Mon Sep 17 00:00:00 2001
From: sheepdog13 <mikecho1234@naver.com>
Date: Tue, 27 Feb 2024 15:16:09 +0900
Subject: [PATCH] =?UTF-8?q?Style=20:=20css=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20#34?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- css를 style 폴더에 따로 관리
---
 .../src/components/practice/PracticeModal.tsx | 131 +--------
 packages/frontend/src/pages/Practice.tsx      | 256 ++----------------
 .../components/practice/PracticeModalCSS.ts   | 106 ++++++++
 .../frontend/src/style/pages/PracticeCSS.ts   | 199 ++++++++++++++
 4 files changed, 348 insertions(+), 344 deletions(-)
 create mode 100644 packages/frontend/src/style/components/practice/PracticeModalCSS.ts
 create mode 100644 packages/frontend/src/style/pages/PracticeCSS.ts

diff --git a/packages/frontend/src/components/practice/PracticeModal.tsx b/packages/frontend/src/components/practice/PracticeModal.tsx
index b9c67bb..cfe50a9 100644
--- a/packages/frontend/src/components/practice/PracticeModal.tsx
+++ b/packages/frontend/src/components/practice/PracticeModal.tsx
@@ -1,112 +1,7 @@
-import { media } from '@/style/mediaQuery';
 import { PracticeModalProps } from '@/types/PracticeModalProps';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
-
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.3);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const ModalContent = styled.div`
-  ${media.smallMobile`
-    width: 312px;
-  `}
-  ${media.largeMobile`
-    width: 355px;
-    padding: 15px;
-  `}
-  display: flex;
-  flex-direction: column;
-  gap: 9px;
-  align-items: center;
-  background: #fff;
-  width: 417px;
-  padding: 20px;
-  border-radius: 8px;
-`;
-const XmarkImg = styled.img`
-  ${media.largeMobile`
-    width: 15px;
-    height: 15px;
-  `}
-  width: 16px;
-  height: 16px;
-  margin-left: auto;
-`;
-
-const ModalBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-`;
-
-const PencilImg = styled.img`
-  ${media.smallMobile`
-    width: 80px;
-    height: 80px;
-  `}
-  ${media.largeMobile`
-    width: 90px;
-    height: 90px;
-  `}
-  width: 110px;
-  height: 110px;
-`;
-
-const Title = styled.h1`
-  ${media.smallMobile`
-    font-size: 18px;
-  `}
-  ${media.largeMobile`
-    font-size: 20px;
-  `}
-  font-weight: 600;
-  font-size: 25px;
-`;
-
-const SubTitle = styled.h2`
-  ${media.smallMobile`
-    font-size: 12px;
-  `}
-  ${media.largeMobile`
-    font-size: 14px;
-  `}
-  font-weight: 600;
-  font-size: 16px;
-  color: #939393;
-`;
-
-const Btn = styled.button<{ $color: string }>`
-  ${media.smallMobile`
-    width: 115px;
-    height: 30px;
-    font-size: 15px;
-  `}
-  ${media.largeMobile`
-    width: 125px;
-    height: 37px;
-    font-size: 17px;
-  `}
-  width: 150px;
-  height: 47px;
-  margin-top: 15px;
-  border-radius: 20px;
-  background-color: ${(props) => props.$color};
-  color: #fff;
-  font-weight: bold;
-  font-size: 20px;
-`;
+import * as M from '../../style/components/practice/PracticeModalCSS';
 
 function PracticeModal({
   type,
@@ -120,14 +15,14 @@ function PracticeModal({
   const navigate = useNavigate();
   return (
     <>
-      <ModalOverlay>
-        <ModalContent>
-          <XmarkImg onClick={setIsOpen} src={`/img/xmark.webp`} />
-          <ModalBox>
-            <PencilImg src={img_path} />
-            <Title>{title}</Title>
-            <SubTitle>{sub_title}</SubTitle>
-            <Btn
+      <M.ModalOverlay>
+        <M.ModalContent>
+          <M.XmarkImg onClick={setIsOpen} src={`/img/xmark.webp`} />
+          <M.ModalBox>
+            <M.PencilImg src={img_path} />
+            <M.Title>{title}</M.Title>
+            <M.SubTitle>{sub_title}</M.SubTitle>
+            <M.Btn
               onClick={() => {
                 if (type === 'check') {
                   navigate('/result');
@@ -138,10 +33,10 @@ function PracticeModal({
               $color={color}
             >
               {btn_text}
-            </Btn>
-          </ModalBox>
-        </ModalContent>
-      </ModalOverlay>
+            </M.Btn>
+          </M.ModalBox>
+        </M.ModalContent>
+      </M.ModalOverlay>
     </>
   );
 }
diff --git a/packages/frontend/src/pages/Practice.tsx b/packages/frontend/src/pages/Practice.tsx
index a866847..f5f63d4 100644
--- a/packages/frontend/src/pages/Practice.tsx
+++ b/packages/frontend/src/pages/Practice.tsx
@@ -1,208 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
 import { useAppDispatch, useAppSelector } from '../redux/hook';
 import { selectChoice } from '../redux/_reducers/choices';
 import { fetchGetProblem } from '@/redux/_reducers/problem';
 import Loading from './Loading';
 import PracticeModal from '@/components/practice/PracticeModal';
-import { media } from '@/style/mediaQuery';
-
-const Wrapper = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(180deg, #2e66dd 0%, #639fc8 72.5%, #7ac3ce 100%);
-`;
-
-const HomeImg = styled.img`
-  ${media.smallMobile`
-    width: 20px;
-    height: 20px;
-  `}
-  ${media.largeMobile`
-    width: 25px;
-    height: 25px;
-  `}
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  width: 30px;
-  height: 30px;
-`;
-
-const BtnBox = styled.div`
-  ${media.smallMobile`
-    width: 280px;
-  `}
-  ${media.largeMobile`
-    width: 350px;
-  `}
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 400px;
-  margin-bottom: 13px;
-`;
-
-// 버튼에 상태에 따라 bg 설정
-const PrevBtn = styled.button<{ $isActive: boolean }>`
-  display: flex;
-  align-items: center;
-  padding: 5px;
-  width: 130px;
-  height: 50px;
-  gap: 10px;
-  border-radius: 30px;
-  background: ${(props) => (props.$isActive ? '#d9d9d9' : '#94befe')};
-  div {
-    color: #000;
-    font-size: 14px;
-    font-weight: 400;
-  }
-`;
-
-const NextBtn = styled.button<{ $isActive: boolean }>`
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  padding: 5px;
-  width: 130px;
-  height: 50px;
-  gap: 10px;
-  border-radius: 30px;
-  background: ${(props) => (props.$isActive ? '#d9d9d9' : '#94befe')};
-  div {
-    color: #000;
-    font-size: 14px;
-    font-weight: 400;
-  }
-`;
-
-const Btn = styled.div<{ $isopen: boolean }>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: #fff;
-  border-radius: 50%;
-  filter: ${(props) =>
-    props.$isopen ? 'none' : 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))'};
-`;
-
-const Arrow = styled.img`
-  display: flex;
-  width: 12px;
-`;
-
-const ContentBox = styled.div`
-  ${media.smallMobile`
-    width: 280px;
-    height: 450px;
-
-  `}
-  ${media.largeMobile`
-    width: 350px;
-    height: 500px;
-    padding: 10px;
-  `}
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 400px;
-  height: 550px;
-  padding: 15px;
-  background-color: #fff;
-  border-radius: 20px;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-`;
-
-const Box = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const ContHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  svg {
-    ${media.smallMobile`
-      width: 20px;
-      height: 20px;
-  `}
-  }
-`;
-
-const ProblemNum = styled.div`
-  ${media.smallMobile`
-    width: 30px;
-    height: 30px;
-    font-size: 18px;
-  `}
-  ${media.largeMobile`
-    width: 35px;
-    height: 35px;
-    font-size: 20px;
-  `}
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: #000;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fff;
-`;
-
-const Problem = styled.div`
-  ${media.smallMobile`
-    font-size: 20px;
-  `}
-  padding: 20px;
-  text-align: left;
-  color: #000;
-  font-size: 23px;
-  font-weight: 500;
-`;
-
-const ChoiceBox = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const Choice = styled.div`
-  ${media.smallMobile`
-    height: 40px;
-    font-size: 14px;
-  `}
-  ${media.largeMobile`
-    height: 50px;
-    padding: 10px;
-    font-size: 16px;
-  `}
-  display: flex;
-  align-items: center;
-  text-align: left;
-  height: 62px;
-  margin-bottom: 8px;
-  padding: 15px;
-  border-radius: 10px;
-  background: #eee;
-  color: #000;
-  font-size: 18px;
-  font-weight: 500;
-  &:hover {
-    background-color: #fff741 !important;
-  }
-`;
+import * as P from '../style/pages/PracticeCSS';
 
 function Practice() {
   // redux problem slice의 isLoading
@@ -231,6 +33,7 @@ function Practice() {
       : setIsNextDisabled(false);
   }, [questionIndex, isLoading]);
 
+  // 현재 페이지의 문제 data
   const problemdata = data.questions[questionIndex];
   const problem = problemdata.content;
   const choices = problemdata.choice;
@@ -259,6 +62,7 @@ function Practice() {
     }
   };
 
+  // 정답 확인 함수
   const checkCorrect = (exAnswer: string) => {
     if (exAnswer === problemdata.answer) {
       return true;
@@ -303,7 +107,7 @@ function Practice() {
   const [isOpenOutModal, setIsOpenOutModal] = useState(false);
 
   return (
-    <Wrapper>
+    <P.Wrapper>
       {isLoading ? (
         <Loading />
       ) : (
@@ -332,27 +136,27 @@ function Practice() {
               btn_text="나가기"
             />
           )}
-          <HomeImg
+          <P.HomeImg
             onClick={() => {
               setIsOpenOutModal(true);
             }}
             src={`/img/homewhite.webp`}
           />
           {/* 버튼영역 */}
-          <BtnBox>
-            <PrevBtn
+          <P.BtnBox>
+            <P.PrevBtn
               disabled={isPrevDisabled}
               $isActive={isPrevDisabled}
               onClick={() => {
                 setQuestionIndex((prev) => prev - 1);
               }}
             >
-              <Btn $isopen={isOpenCheckModal || isOpenOutModal}>
-                <Arrow src={`/img/prevarrow.webp`} alt="prevarrow" />
-              </Btn>
+              <P.Btn $isopen={isOpenCheckModal || isOpenOutModal}>
+                <P.Arrow src={`/img/prevarrow.webp`} alt="prevarrow" />
+              </P.Btn>
               <div>이전 문제</div>
-            </PrevBtn>
-            <NextBtn
+            </P.PrevBtn>
+            <P.NextBtn
               // 비활성화 속성
               disabled={isNextDisabled}
               // 비활성화 boolean값 styled에서 쓰기위한 속성추가
@@ -362,16 +166,16 @@ function Practice() {
               }}
             >
               <div>다음 문제</div>
-              <Btn $isopen={isOpenCheckModal || isOpenOutModal}>
-                <Arrow src={`/img/nextarrow.webp`} alt="nextarrow" />
-              </Btn>
-            </NextBtn>
-          </BtnBox>
-          <ContentBox>
-            <Box>
+              <P.Btn $isopen={isOpenCheckModal || isOpenOutModal}>
+                <P.Arrow src={`/img/nextarrow.webp`} alt="nextarrow" />
+              </P.Btn>
+            </P.NextBtn>
+          </P.BtnBox>
+          <P.ContentBox>
+            <P.Box>
               {/* 번호와 즐겨찾기 영역 */}
-              <ContHeader>
-                <ProblemNum>{questionIndex + 1}</ProblemNum>
+              <P.ContHeader>
+                <P.ProblemNum>{questionIndex + 1}</P.ProblemNum>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="25"
@@ -384,14 +188,14 @@ function Practice() {
                     fill="#D9D9D9"
                   />
                 </svg>
-              </ContHeader>
-              <Problem>{problem}</Problem>
-            </Box>
+              </P.ContHeader>
+              <P.Problem>{problem}</P.Problem>
+            </P.Box>
             {/* 선택영역 */}
-            <ChoiceBox>
+            <P.ChoiceBox>
               {/* 문자열을 배열로 만든 선택 배열을 map으로 나열 */}
               {choicesArray?.map((choice, i) => (
-                <Choice
+                <P.Choice
                   style={{
                     backgroundColor:
                       i === currentChoiceIndex ? '#fff741' : '#eee',
@@ -400,13 +204,13 @@ function Practice() {
                   key={i}
                 >
                   {choice}
-                </Choice>
+                </P.Choice>
               ))}
-            </ChoiceBox>
-          </ContentBox>
+            </P.ChoiceBox>
+          </P.ContentBox>
         </>
       )}
-    </Wrapper>
+    </P.Wrapper>
   );
 }
 
diff --git a/packages/frontend/src/style/components/practice/PracticeModalCSS.ts b/packages/frontend/src/style/components/practice/PracticeModalCSS.ts
new file mode 100644
index 0000000..4689a43
--- /dev/null
+++ b/packages/frontend/src/style/components/practice/PracticeModalCSS.ts
@@ -0,0 +1,106 @@
+import styled from 'styled-components';
+import { media } from '@/style/mediaQuery';
+
+export const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ModalContent = styled.div`
+  ${media.smallMobile`
+    width: 312px;
+  `}
+  ${media.largeMobile`
+    width: 355px;
+    padding: 15px;
+  `}
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  align-items: center;
+  background: #fff;
+  width: 417px;
+  padding: 20px;
+  border-radius: 8px;
+`;
+export const XmarkImg = styled.img`
+  ${media.largeMobile`
+    width: 15px;
+    height: 15px;
+  `}
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+`;
+
+export const ModalBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+`;
+
+export const PencilImg = styled.img`
+  ${media.smallMobile`
+    width: 80px;
+    height: 80px;
+  `}
+  ${media.largeMobile`
+    width: 90px;
+    height: 90px;
+  `}
+  width: 110px;
+  height: 110px;
+`;
+
+export const Title = styled.h1`
+  ${media.smallMobile`
+    font-size: 18px;
+  `}
+  ${media.largeMobile`
+    font-size: 20px;
+  `}
+  font-weight: 600;
+  font-size: 25px;
+`;
+
+export const SubTitle = styled.h2`
+  ${media.smallMobile`
+    font-size: 12px;
+  `}
+  ${media.largeMobile`
+    font-size: 14px;
+  `}
+  font-weight: 600;
+  font-size: 16px;
+  color: #939393;
+`;
+
+export const Btn = styled.button<{ $color: string }>`
+  ${media.smallMobile`
+    width: 115px;
+    height: 30px;
+    font-size: 15px;
+  `}
+  ${media.largeMobile`
+    width: 125px;
+    height: 37px;
+    font-size: 17px;
+  `}
+  width: 150px;
+  height: 47px;
+  margin-top: 15px;
+  border-radius: 20px;
+  background-color: ${(props) => props.$color};
+  color: #fff;
+  font-weight: bold;
+  font-size: 20px;
+`;
diff --git a/packages/frontend/src/style/pages/PracticeCSS.ts b/packages/frontend/src/style/pages/PracticeCSS.ts
new file mode 100644
index 0000000..0ae78a6
--- /dev/null
+++ b/packages/frontend/src/style/pages/PracticeCSS.ts
@@ -0,0 +1,199 @@
+import styled from 'styled-components';
+import { media } from '@/style/mediaQuery';
+
+export const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, #2e66dd 0%, #639fc8 72.5%, #7ac3ce 100%);
+`;
+
+export const HomeImg = styled.img`
+  ${media.smallMobile`
+    width: 20px;
+    height: 20px;
+  `}
+  ${media.largeMobile`
+    width: 25px;
+    height: 25px;
+  `}
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  width: 30px;
+  height: 30px;
+`;
+
+export const BtnBox = styled.div`
+  ${media.smallMobile`
+    width: 280px;
+  `}
+  ${media.largeMobile`
+    width: 350px;
+  `}
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 400px;
+  margin-bottom: 13px;
+`;
+
+// 버튼에 상태에 따라 bg 설정
+export const PrevBtn = styled.button<{ $isActive: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  width: 130px;
+  height: 50px;
+  gap: 10px;
+  border-radius: 30px;
+  background: ${(props) => (props.$isActive ? '#d9d9d9' : '#94befe')};
+  div {
+    color: #000;
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;
+
+export const NextBtn = styled.button<{ $isActive: boolean }>`
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  padding: 5px;
+  width: 130px;
+  height: 50px;
+  gap: 10px;
+  border-radius: 30px;
+  background: ${(props) => (props.$isActive ? '#d9d9d9' : '#94befe')};
+  div {
+    color: #000;
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;
+
+export const Btn = styled.div<{ $isopen: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  border-radius: 50%;
+  filter: ${(props) =>
+    props.$isopen ? 'none' : 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))'};
+`;
+
+export const Arrow = styled.img`
+  display: flex;
+  width: 12px;
+`;
+
+export const ContentBox = styled.div`
+  ${media.smallMobile`
+    width: 280px;
+    height: 450px;
+
+  `}
+  ${media.largeMobile`
+    width: 350px;
+    height: 500px;
+    padding: 10px;
+  `}
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 400px;
+  height: 550px;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 20px;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+`;
+
+export const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ContHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  svg {
+    ${media.smallMobile`
+      width: 20px;
+      height: 20px;
+  `}
+  }
+`;
+
+export const ProblemNum = styled.div`
+  ${media.smallMobile`
+    width: 30px;
+    height: 30px;
+    font-size: 18px;
+  `}
+  ${media.largeMobile`
+    width: 35px;
+    height: 35px;
+    font-size: 20px;
+  `}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #000;
+  font-size: 24px;
+  font-weight: 500;
+  color: #fff;
+`;
+
+export const Problem = styled.div`
+  ${media.smallMobile`
+    font-size: 20px;
+  `}
+  padding: 20px;
+  text-align: left;
+  color: #000;
+  font-size: 23px;
+  font-weight: 500;
+`;
+
+export const ChoiceBox = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Choice = styled.div`
+  ${media.smallMobile`
+    height: 40px;
+    font-size: 14px;
+  `}
+  ${media.largeMobile`
+    height: 50px;
+    padding: 10px;
+    font-size: 16px;
+  `}
+  display: flex;
+  align-items: center;
+  text-align: left;
+  height: 62px;
+  margin-bottom: 8px;
+  padding: 15px;
+  border-radius: 10px;
+  background: #eee;
+  color: #000;
+  font-size: 18px;
+  font-weight: 500;
+  &:hover {
+    background-color: #fff741 !important;
+  }
+`;