Style : css 파일 분리 #34

- css를 style 폴더에 따로 관리

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>
     </>
   );
 }