From ba330cf77dacc2f175ea3b9d580d4c68df4672b3 Mon Sep 17 00:00:00 2001
From: chaeyoungwon <epopcy@naver.com>
Date: Thu, 7 Nov 2024 21:30:12 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Change=20px=20to=20rem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#306 rem 단위로 통일
---
 .../src/components/Footer/Footer.Styled.jsx   | 12 ++---
 .../src/components/Header/Bubble.Styled.jsx   | 44 ++++++++--------
 .../src/components/Header/Buttons.styled.jsx  |  8 +--
 .../src/components/Header/Header.Styled.jsx   |  8 +--
 .../common/Calendar/SelectOne.Styled.jsx      | 24 +++++----
 .../components/common/Input/Input.Styled.jsx  | 37 ++++++-------
 .../src/pages/HomePage/HomePage.Styled.jsx    | 22 ++++----
 .../src/pages/HomePage/TopButton.Styled.jsx   |  8 +--
 .../src/pages/Portfolio/MakePortfolio.jsx     | 12 ++---
 .../src/pages/Portfolio/Portfolio.Styled.jsx  | 52 +++++++++----------
 10 files changed, 115 insertions(+), 112 deletions(-)

diff --git a/gongjakso/src/components/Footer/Footer.Styled.jsx b/gongjakso/src/components/Footer/Footer.Styled.jsx
index ab560356..dabcb3fb 100644
--- a/gongjakso/src/components/Footer/Footer.Styled.jsx
+++ b/gongjakso/src/components/Footer/Footer.Styled.jsx
@@ -4,11 +4,11 @@ export const Footer = styled.div`
     display: flex;
     margin: auto;
     width: 100%;
-    max-width: 75rem;
-    height: 92px;
+    max-width: 77.85rem;
+    height: 5.75rem;
     align-items: center;
     justify-content: center;
-    border-top: 1.5px solid black;
+    border-top: 0.094rem solid black;
     background: inherit; // Ensures the Footer has the same background as MainContent
     position: absolute;
     bottom: 0;
@@ -31,7 +31,7 @@ export const FooterInfoBox = styled.div`
 `;
 
 export const FooterInfo = styled.div`
-    font-size: 10px;
+    font-size: 0.625rem;
     margin: auto;
 `;
 
@@ -44,10 +44,10 @@ export const FooterButtonBox = styled.div`
 `;
 
 export const FooterButton = styled.button`
-    font-size: 15px;
+    font-size: 0.938rem;
     font-weight: bold;
     display: flex;
     cursor: pointer;
     border: none;
-    margin: 10px;
+    margin: 0.625rem;
 `;
diff --git a/gongjakso/src/components/Header/Bubble.Styled.jsx b/gongjakso/src/components/Header/Bubble.Styled.jsx
index 67427bf8..49c162b6 100644
--- a/gongjakso/src/components/Header/Bubble.Styled.jsx
+++ b/gongjakso/src/components/Header/Bubble.Styled.jsx
@@ -13,12 +13,12 @@ export const BubbleContainer = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
-    top: 55px;
-    width: 370px;
-    right: -50px;
+    top: 3.438rem;
+    width: 27rem;
+    right: -3.8rem;
     display: flex;
-    border-radius: 20px;
-    border: 2px solid #eee;
+    border-radius: 1.25rem;
+    border: 0.125rem solid #eee;
     background-color: white;
     position: absolute;
     z-index: 100;
@@ -27,12 +27,12 @@ export const BubbleContainer = styled.div`
         content: '';
         position: absolute;
         border: none;
-        width: 20px;
-        height: 20px;
+        width: 1.25rem;
+        height: 1.25rem;
         background-color: white;
-        border-left: 2px solid #eee;
-        border-top: 2px solid #eee;
-        top: -12px;
+        border-left: 0.125rem #eee;
+        border-top: 0.125rem solid #eee;
+        top: -0.75rem;
         right: 17%;
         transform: rotate(45deg);
     }
@@ -40,7 +40,7 @@ export const BubbleContainer = styled.div`
 export const SubTitle = styled.span`
     font-size: ${({ theme }) => theme.fontSize.base};
     font-family: 'PreMedium';
-    margin: 10px;
+    margin: 0.625rem;
     display: flex;
     cursor: pointer;
     justify-content: space-between;
@@ -48,7 +48,7 @@ export const SubTitle = styled.span`
 `;
 
 export const ArrowImage = styled(Arrow)`
-    width: 15px;
+    width: 0.938rem;
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -66,7 +66,7 @@ export const MypageImg = styled(Mypage)`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100px;
+    width: 6.25rem;
     height: auto;
     cursor: pointer;
 `;
@@ -82,22 +82,22 @@ export const InfoBox = styled.div`
 export const NameTitle = styled.p`
     font-size: ${({ theme }) => theme.fontSize.mdd};
     font-family: 'PreMedium';
-    margin: 2px 0px;
+    margin: 0.125rem 0;
 `;
 
 //학과
 export const MajorTitle = styled.p`
     font-family: 'PreRegular';
     font-size: ${({ theme }) => theme.fontSize.base};
-    margin: 2px 0px;
+    margin: 0.125rem 0;
 `;
 
 //프로필 이미지
 export const ProfileImage = styled(defaultProfile)`
-    width: 60px;
+    width: 3.75rem;
     display: flex;
     justify-content: center;
-    padding: 5px;
+    padding: 0.313rem;
 `;
 
 export const ProfileDetail = styled.div`
@@ -110,19 +110,19 @@ export const InfoDetail = styled.div`
     flex-direction: column;
     align-items: baseline;
     justify-content: center;
-    margin: 0 10px;
+    margin: 0 0.625rem;
 `;
 
 export const BlueLine = styled.div`
     display: flex;
     width: 100%;
-    border-top: 0.7px solid #c2d6ff;
+    border-top: 0.044rem solid #c2d6ff;
 `;
 
 export const GreyLine = styled.div`
     display: flex;
     width: 100%;
-    border-top: 0.7px solid #dcdcdc;
+    border-top: 0.044rem solid #dcdcdc;
 `;
 
 export const LoginButton = styled.button`
@@ -130,7 +130,7 @@ export const LoginButton = styled.button`
     cursor: pointer;
     justify-content: baseline;
     font-family: 'PreRegular';
-    padding: 5px;
-    margin: 10px 10px 10px 30px;
+    padding: 0.313rem;
+    margin: 0.625rem 0.625rem 0.625rem 1.875rem;
     text-decoration: underline;
 `;
diff --git a/gongjakso/src/components/Header/Buttons.styled.jsx b/gongjakso/src/components/Header/Buttons.styled.jsx
index 60e96471..aa301c79 100644
--- a/gongjakso/src/components/Header/Buttons.styled.jsx
+++ b/gongjakso/src/components/Header/Buttons.styled.jsx
@@ -4,8 +4,8 @@ export const IconButton = styled.button`
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 150px;
-    gap: 5px;
+    width: 9.375rem;
+    gap: 0.313rem;
     color: ${({ theme, $active, $type }) => {
         if ($active) {
             if ($type === 'project') {
@@ -27,7 +27,7 @@ export const IconNameSpan = styled.span`
         $active ? theme.main : $hover ? theme.main : theme.mainFont};
 `;
 export const ProfileIcon = styled.img`
-    width: 30px;
+    width: 1.875rem;
     height: auto;
-    margin: 0 10px;
+    margin: 0 0.625rem;
 `;
diff --git a/gongjakso/src/components/Header/Header.Styled.jsx b/gongjakso/src/components/Header/Header.Styled.jsx
index 5ad74e36..1b820219 100644
--- a/gongjakso/src/components/Header/Header.Styled.jsx
+++ b/gongjakso/src/components/Header/Header.Styled.jsx
@@ -5,7 +5,7 @@ export const Header = styled.div`
     display: flex;
     width: 100%;
     justify-content: center;
-    padding: 15px;
+    padding: 0.938rem;
     align-items: center;
     position: absolute;
     top: 0;
@@ -15,7 +15,7 @@ export const HeaderBase = styled.div`
     width: 100%;
     justify-content: space-around;
     align-items: center;
-    height: 40px;
+    height: 2.5rem;
 `;
 export const ItemList = styled.ul`
     display: flex;
@@ -27,13 +27,13 @@ export const logo = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0 30px;
+    margin: 0 1.875rem;
 `;
 
 export const ProfileArea = styled.div`
     display: flex;
     flex-direction: row;
-    margin-left: 350px;
+    margin-left: 21.875rem;
     align-items: center;
     width: 0;
     font-weight: 700;
diff --git a/gongjakso/src/components/common/Calendar/SelectOne.Styled.jsx b/gongjakso/src/components/common/Calendar/SelectOne.Styled.jsx
index 300ed9ce..34e58d06 100644
--- a/gongjakso/src/components/common/Calendar/SelectOne.Styled.jsx
+++ b/gongjakso/src/components/common/Calendar/SelectOne.Styled.jsx
@@ -4,7 +4,7 @@ export const Container = styled.div`
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 0.625rem;
 `;
 
 export const DateContent = styled.div`
@@ -14,20 +14,20 @@ export const DateContent = styled.div`
     width: ${({ width }) => width};
     height: 3.438rem;
     background-color: white;
-    border: 1.5px solid var(--system-grey4, #d2d2d7);
+    border: 0.094rem solid var(--system-grey4, #d2d2d7);
     border-radius: 0.688rem;
     font-family: 'PreRegular';
     font-size: ${({ theme }) => theme.fontSize.m};
     color: ${({ theme }) => theme.subFont};
-    padding: 0 15px;
+    padding: 0 0.938rem;
     font-weight: 500;
 `;
 
 export const DateSelect = styled.div`
     display: flex;
     align-items: center;
-    border: 1.5px solid var(--system-grey4, #d2d2d7);
-    padding: 15px 0;
+    border: 0.094rem solid var(--system-grey4, #d2d2d7);
+    padding: 0.938rem 0;
     border-radius: 0.688rem;
     flex-direction: column;
     background-color: white;
@@ -38,16 +38,16 @@ export const ButtonContent = styled.div`
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: 30px;
+    gap: 1.875rem;
 `;
 
 export const Button = styled.button`
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 70px;
-    height: 30px;
-    border-radius: 15px;
+    width: 4.375rem;
+    height: 1.875rem;
+    border-radius: 0.938rem;
     color: ${props => (props.$isDelete ? 'black' : 'white')};
     background-color: ${props =>
         props.$isDelete ? props.theme.subFont2 : props.theme.mainFont};
@@ -55,6 +55,8 @@ export const Button = styled.button`
 
 export const CalendarEmoji = styled.div`
     background: url(${emoji});
-    width: 18px;
-    height: 16.88px;
+    width: 1.125rem;
+    height: 1.055rem;
+    background-repeat: no-repeat;
+    background-size: contain;
 `;
diff --git a/gongjakso/src/components/common/Input/Input.Styled.jsx b/gongjakso/src/components/common/Input/Input.Styled.jsx
index 46402345..1619f130 100644
--- a/gongjakso/src/components/common/Input/Input.Styled.jsx
+++ b/gongjakso/src/components/common/Input/Input.Styled.jsx
@@ -6,7 +6,7 @@ export const SelectContainer = styled.div`
 
 export const SelectValue = styled.div`
     display: block;
-    width: ${props => (props.$case === 'true' ? '155px' : '400px')};
+    width: ${props => (props.$case === 'true' ? '11rem' : '25rem')};
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -25,27 +25,28 @@ export const SelectValue = styled.div`
 export const OptionList = styled.div`
     position: absolute;
     font-family: 'PreMedium';
-    right: -10px;
-    width: ${props => (props.$case === 'true' ? '185px' : '430px')};
+    right: -1.15rem;
+    width: ${props => (props.$case === 'true' ? '13.6rem' : '26.875rem')};
     font-size: ${({ theme }) => theme.fontSize.m};
-    margin: ${props => (props.$case === 'true' ? '20px 0px' : '20px 0px')};
+    margin: ${props =>
+        props.$case === 'true' ? '1.25rem 0rem' : '1.25rem 0rem'};
     list-style: none;
-    border-radius: 4px;
+    border-radius: 0.25rem;
     background-color: #fff;
     z-index: 1;
-    border: 1px solid hsl(0, 0%, 90%);
-    max-height: 300px;
+    border: 0.063rem solid hsl(0, 0%, 90%);
+    max-height: 18.75rem;
     overflow-y: ${props => (props.$scroll === 'true' ? 'scroll' : 'hidden')};
-    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.25rem 1.063rem rgba(0, 0, 0, 0.05);
     .option {
-        font-family: PreRegular;
-        padding: 15px;
+        font-family: 'PreRegular';
+        padding: 0.938rem;
         cursor: pointer;
-        border-radius: 4px;
+        border-radius: 0.25rem;
         transition: background-color 0.1s ease;
         font-weight: 600;
         font-size: 1.125rem;
-        padding-left: 20px;
+        padding-left: 1.25rem;
 
         &:hover {
             background-color: black;
@@ -69,18 +70,18 @@ export const InputText = styled.input.attrs(props => ({
 }))`
     font-size: ${({ theme }) => theme.fontSize.base};
 
-    padding: 10px 0;
+    padding: 0.625rem 0;
     border-style: none;
-    border-bottom: 1px solid ${({ theme }) => theme.border};
+    border-bottom: 0.063rem solid ${({ theme }) => theme.border};
 
     &:focus {
         outline: none;
-        border-bottom: 1px solid ${({ theme }) => theme.mainFont};
+        border-bottom: 0.063rem solid ${({ theme }) => theme.mainFont};
     }
 
     &.warning {
-        gap: 10px;
-        border-bottom: 1px solid ${({ theme }) => theme.repo.open};
+        gap: 0.625rem;
+        border-bottom: 0.063rem solid ${({ theme }) => theme.repo.open};
     }
     /* Hide the spinners in Chrome, Safari, Edge, Opera */
     &::-webkit-outer-spin-button,
@@ -96,7 +97,7 @@ export const InputText = styled.input.attrs(props => ({
 export const Arrow = styled.img`
     display: flex;
     align-items: center;
-    padding-right: 5px;
+
     justify-content: center;
 `;
 
diff --git a/gongjakso/src/pages/HomePage/HomePage.Styled.jsx b/gongjakso/src/pages/HomePage/HomePage.Styled.jsx
index 84c8e54f..985f4d94 100644
--- a/gongjakso/src/pages/HomePage/HomePage.Styled.jsx
+++ b/gongjakso/src/pages/HomePage/HomePage.Styled.jsx
@@ -27,19 +27,19 @@ export const TitleWrapper = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 20px;
+    gap: 1.25rem;
     margin-top: 10rem;
 `;
 
 export const TitleWrapper1 = styled(TitleWrapper)`
-    gap: 7px;
+    gap: 0.438rem;
 `;
 
 export const Title = styled.span`
     font-family: 'PreMedium';
     font-size: ${({ theme }) => theme.fontSize.xxlg};
     font-weight: 900;
-    line-height: 35px;
+    line-height: 2.188rem;
     text-align: center;
     color: #212121;
 `;
@@ -59,7 +59,7 @@ export const LoginBtn = styled.div`
     margin-top: 5rem;
     cursor: pointer;
     display: flex;
-    padding-left: 15px;
+    padding-left: 0.938rem;
     text-align: center;
     align-items: center;
     justify-content: center;
@@ -67,13 +67,13 @@ export const LoginBtn = styled.div`
     position: absolute;
     top: 0;
     height: 4.5rem;
-    border-radius: 15px;
+    border-radius: 0.938rem;
     background: ${({ theme }) => theme.box1};
     font-family: 'PreMedium';
     color: white;
     font-size: ${({ theme }) => theme.fontSize.mdd};
     font-weight: 700;
-    line-height: 21.48px;
+    line-height: 1.343rem;
     text-align: center;
 `;
 
@@ -81,7 +81,7 @@ export const Arrow = styled.div`
     background: url(${arrow});
     width: 1.5rem;
     height: 1.17rem;
-    margin-left: 15px;
+    margin-left: 0.938rem;
     background-repeat: no-repeat;
     background-size: contain;
 `;
@@ -147,7 +147,7 @@ export const Bubble = styled.div`
     width: 31rem;
     height: 5.8rem;
     font-size: ${({ theme }) => theme.fontSize.lg};
-    padding-top: 15px;
+    padding-top: 0.938rem;
     background-repeat: no-repeat;
     background: url(${leftBubble});
     font-weight: 600;
@@ -161,7 +161,7 @@ export const Text = styled.div`
     top: 9.5rem;
     left: 19rem;
     font-family: 'PreMedium';
-    line-height: 35.06px;
+    line-height: 2.191rem;
     text-align: right;
     font-weight: 600;
     width: 18rem;
@@ -279,10 +279,10 @@ export const Text1 = styled(Text)`
     text-align: left;
     position: absolute;
     top: 20rem;
-    left: -110px;
+    left: -6.875rem;
     width: 30rem;
     @media (max-width: 1270px) {
-        left: 40px;
+        left: 2.5rem;
         top: 18rem;
     }
 `;
diff --git a/gongjakso/src/pages/HomePage/TopButton.Styled.jsx b/gongjakso/src/pages/HomePage/TopButton.Styled.jsx
index 1cc4e91c..76691ef1 100644
--- a/gongjakso/src/pages/HomePage/TopButton.Styled.jsx
+++ b/gongjakso/src/pages/HomePage/TopButton.Styled.jsx
@@ -5,16 +5,16 @@ export const Container = styled.div`
     position: fixed;
     width: 100%;
     transition: opacity 2s ease-in-out;
-    bottom: 150px;
+    bottom: 9.375rem;
     z-index: 1000;
 `;
 
 export const Button = styled.button`
     background: url(${TopButtonimg});
-    right: 150px;
+    right: 9.375rem;
     background-size: contain;
-    width: 50px;
-    height: 50px;
+    width: 3.125rem;
+    height: 3.125rem;
     border-radius: 100%;
     position: absolute;
     cursor: pointer;
diff --git a/gongjakso/src/pages/Portfolio/MakePortfolio.jsx b/gongjakso/src/pages/Portfolio/MakePortfolio.jsx
index 83a9d8c3..7be7dee1 100644
--- a/gongjakso/src/pages/Portfolio/MakePortfolio.jsx
+++ b/gongjakso/src/pages/Portfolio/MakePortfolio.jsx
@@ -365,7 +365,7 @@ const MakePortfolio = ({ portfolioId }) => {
                                     setEducationSections(updatedSections);
                                 }}
                             />
-                            <S.Fillter1>
+                            <S.Filter1>
                                 <SelectInput
                                     id={`Gradestatus-${index}`}
                                     selectOptions={gradeStatus_options}
@@ -381,8 +381,8 @@ const MakePortfolio = ({ portfolioId }) => {
                                     }}
                                     case={true}
                                 />
-                            </S.Fillter1>
-                            <S.Fillter1>
+                            </S.Filter1>
+                            <S.Filter1>
                                 <SelectInput
                                     id={`Educationstatus-${index}`}
                                     selectOptions={status_options}
@@ -397,7 +397,7 @@ const MakePortfolio = ({ portfolioId }) => {
                                     }}
                                     case={true}
                                 />
-                            </S.Fillter1>
+                            </S.Filter1>
                         </S.InputContainer>
                         {educationSections.length > 1 && (
                             <S.DeleteBtn
@@ -559,7 +559,7 @@ const MakePortfolio = ({ portfolioId }) => {
                                     setActivitySections(updatedSections);
                                 }}
                             />
-                            <S.Fillter1>
+                            <S.Filter1>
                                 <SelectInput
                                     id={`Activitystatus-${index}`}
                                     selectOptions={activityStatus_options}
@@ -577,7 +577,7 @@ const MakePortfolio = ({ portfolioId }) => {
                                     }}
                                     case={true}
                                 />
-                            </S.Fillter1>
+                            </S.Filter1>
                         </S.InputContainer>
                         {activitySections.length > 1 && (
                             <S.DeleteBtn
diff --git a/gongjakso/src/pages/Portfolio/Portfolio.Styled.jsx b/gongjakso/src/pages/Portfolio/Portfolio.Styled.jsx
index f968ea9e..5fb6abe7 100644
--- a/gongjakso/src/pages/Portfolio/Portfolio.Styled.jsx
+++ b/gongjakso/src/pages/Portfolio/Portfolio.Styled.jsx
@@ -5,10 +5,9 @@ import pdf from '../../assets/images/pdf.svg';
 import trash from '../../assets/images/trash.svg';
 import unchecked from '../../assets/images/unchecked.svg';
 import checked from '../../assets/images/checked.svg';
-import { SelectInput } from '../../components/common/Input/Input';
 
 export const TopBox = styled.div`
-    height: 250px;
+    height: 15.625rem;
     width: 100%;
     background-color: rgba(195, 233, 255, 0.5);
     display: flex;
@@ -42,7 +41,7 @@ export const Description = styled.span`
 
 export const GlobalBox = styled.div`
     width: 100%;
-    max-width: 1000px;
+    max-width: 62.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -51,20 +50,20 @@ export const GlobalBox = styled.div`
 
 export const SubTitle = styled.p`
     width: 100%;
-    max-width: 1000px;
+    max-width: 62.5rem;
     font-size: ${({ theme }) => theme.fontSize.lg};
     font-weight: 700;
-    margin-bottom: 25px;
+    margin-bottom: 1.563rem;
     font-family: 'PreMedium';
     display: flex;
     align-items: center;
-    margin: 0 auto;
+    margin: 0;
     line-height: 1.79rem;
 `;
 
 export const UploadInfo = styled.p`
     width: 100%;
-    max-width: 1000px;
+    max-width: 62.5rem;
     font-size: ${({ theme }) => theme.fontSize.m};
     font-weight: 500;
     color: #565656;
@@ -88,7 +87,7 @@ export const LinkIcon = styled.div`
 export const SNSInput = styled.input`
     width: 60rem;
     height: 3.438rem;
-    border: 1.5px solid var(--system-grey4, #d2d2d7);
+    border: 0.094rem solid var(--system-grey4, #d2d2d7);
     padding: 0.983rem 1.125rem;
     font-family: 'PreRegular';
     font-size: ${({ theme }) => theme.fontSize.m};
@@ -181,16 +180,16 @@ export const EducationInput = styled(SNSInput)`
     width: 33rem;
 `;
 
-export const Fillter1 = styled.div`
-    width: 220px;
+export const Filter1 = styled.div`
+    width: 13.6rem;
     height: 3.438rem;
     font-family: 'PreRegular';
     border-radius: 0.688rem;
     color: #828293;
     font-size: ${({ theme }) => theme.fontSize.m};
-    border: 1.5px solid ${({ theme }) => theme.Grey};
+    border: 0.094rem solid ${({ theme }) => theme.Grey};
     display: flex;
-    padding: 12px 18px;
+    padding: 0.7rem 1.35rem;
     align-items: center;
 `;
 
@@ -204,7 +203,7 @@ export const PositionInput = styled(SNSInput)`
 export const Textarea = styled.textarea`
     width: 64rem;
     height: 9.813rem;
-    border: 1.5px solid var(--system-grey4, #d2d2d7);
+    border: 0.094rem solid var(--system-grey4, #d2d2d7);
     padding: 0.983rem 1.125rem;
     font-family: 'PreRegular';
     font-size: ${({ theme }) => theme.fontSize.m};
@@ -228,7 +227,7 @@ export const FileUploadBox = styled.div`
     width: 64rem;
     height: 15.125rem;
     background-color: #f7f7f7;
-    border: 1.5px dotted var(--system-grey4, #d2d2d7);
+    border: 0.094rem dotted var(--system-grey4, #d2d2d7);
     font-size: ${({ theme }) => theme.fontSize.lg};
     padding: 2rem 27.313rem;
     border-radius: 1rem;
@@ -296,7 +295,7 @@ export const CheckContainer = styled.div`
     display: flex;
     align-items: center;
     height: 3.438rem;
-    gap: 10px;
+    gap: 0.625rem;
     justify-content: space-between;
 `;
 export const CareerCheck = styled.div`
@@ -307,8 +306,9 @@ export const CareerCheck = styled.div`
 export const CheckImg = styled.div`
     background-image: url(${props => (props.checked ? checked : unchecked)});
     cursor: pointer;
-    width: 33px;
-    height: 33px;
+    width: 2.063rem;
+    height: 2.063rem;
+    background-size: contain;
     background-repeat: no-repeat;
 `;
 
@@ -320,35 +320,35 @@ export const FileInfo = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 5px;
+    padding: 0.313rem;
     margin-bottom: 7rem;
     background-color: #f7f7f7;
 
-    border-radius: 5px;
-    border: 1.5px dotted #d2d2d7;
+    border-radius: 0.313rem;
+    border: 0.094rem dotted #d2d2d7;
     font-size: ${({ theme }) => theme.fontSize.m};
     color: #333;
-    max-width: 1000px;
+    max-width: 62.5rem;
     word-wrap: break-word;
 `;
 
 export const FileName = styled.div`
     flex: 1;
-    font-size: 14px;
+    font-size: 0.875rem;
     color: #333;
 `;
 export const FileSize = styled.div`
     flex: 0.5;
-    font-size: 14px;
+    font-size: 0.875rem;
     color: #666;
     text-align: right;
-    margin-right: 10px;
+    margin-right: 0.625rem;
 `;
 
 export const FileList = styled.div`
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 0.625rem;
     width: 100%;
 `;
 
@@ -356,5 +356,5 @@ export const FileItem = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 5px;
+    padding: 0.313rem;
 `;