Merge branch 'main' into feat/main-QA-4

Author: game240

src/pages/MainVer2Page2.scss

@@ -31,8 +31,8 @@
   width: 407px;
   height: 635px;
   @include r.media-laptop {
-    width: 382px;
-    height: 596px;
+    width: 407px;
+    height: 635px; /* 635px */
   }
   @include r.media-tablet {
     width: 608px;

src/pages/work/PostWork.jsx

@@ -111,23 +111,23 @@ const PostWork = () => {
         )}
         <div className=" left-side">
           <div className=" inside-field">
-            <div className="inside-field-title">
-              <h1>자신만의</h1>
-              <h1>작품을</h1>
-              <h1>등록해주세요!</h1>
+            <div className="inside-field-title h1-bold">
+              <p>자신만의</p>
+              <p>작품을</p>
+              <p>등록해주세요!</p>
             </div>
 
-            <div className="stage-info-container">
-              <h5 className="title">스테이지 시스템 안내</h5>
+            <div className=" stage-info-container">
+              <h5 className="title h5-bold">스테이지 시스템 안내</h5>
 
-              <div className="contants">
+              <div className=" contants">
                 {/* 포도알 */}
-                <div className="step">
+                <div className=" step">
                   <div className="icon">
                     <img src={podoalIcon} alt="podoal" />
-                    <p>포도알</p>
+                    <p className="p-large-medium">포도알</p>
                   </div>
-                  <div className="info">
+                  <div className="p-small-medium info">
                     <p>
                       • 대본 가격 <span>무료</span>만 설정 가능
                     </p>
@@ -145,10 +145,10 @@ const PostWork = () => {
                 </div>
 
                 {/* 포도송이 */}
-                <div className="step">
+                <div className="step ">
                   <div className="icon">
                     <img src={podoSongIIcon} alt="podoSongI" />
-                    <p>포도송이</p>{" "}
+                    <p className="p-large-medium">포도송이</p>{" "}
                   </div>
                   <div className="info">
                     <div className="TBD-info">
@@ -165,14 +165,14 @@ const PostWork = () => {
                 <div className="step">
                   <div className="icon">
                     <img src={wine} alt="wine" style={{ height: "43px" }} />
-                    <p>와인</p>
+                    <p className="p-large-medium">와인</p>
                   </div>
                 </div>
               </div>
             </div>
 
             <div>
-              <div className="upload-title items-center gap-[8px] relative">
+              <div className="upload-title items-center gap-[8px] relative ">
                 <h6>작품 등록 신청</h6>
                 {/* 팝업 메뉴 */}
                 <button

src/pages/work/PostWork.scss

@@ -3,8 +3,18 @@
 
 .post-work {
   width: 100vw;
-
   height: 1080px;
+  // 이미지를 absolute로 설정하여 높이 직접 입력 필요
+  // height: fit-content;
+  @include r.media-desktop {
+    height: 1080px;
+  }
+  @include r.media-laptop {
+    height: 1080px;
+  }
+  @include r.media-mobile {
+    height: 1000px;
+  }
 }
 
 .post-work .post-work-wrap {
@@ -73,7 +83,7 @@
 .post-work .inside-field-title {
   margin-top: 174px;
   @include r.media-laptop {
-    margin-top: 90px;
+    margin-top: 174px;
   }
   @include r.media-mobile {
     margin-top: 50px;
@@ -98,34 +108,20 @@
   display: flex;
   flex-direction: column;
   margin-top: 87px;
-  margin-bottom: 66px;
+  margin-bottom: 64px;
 
   @include r.media-mobile {
     margin-top: 58px;
   }
 
-  .title {
-    color: #000;
-    /* H5/Bold */
-    font-family: Pretendard;
-    font-size: 1.25rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 1.75rem; /* 140% */
-    letter-spacing: -0.025rem;
-  }
-
   .contants {
     display: grid;
     grid-template-columns: 37fr 5fr 30fr 5fr 25fr;
 
-    margin-top: 4.907vh;
+    margin-top: 53px;
 
     height: 100%;
 
-    @include r.media-mobile {
-      grid-template-columns: 120px 30px 104px 30px 110px;
-    }
     p {
       white-space: nowrap;
     }
@@ -138,38 +134,19 @@
     .icon {
       display: flex;
       flex-direction: column;
-      gap: 1.0185vh;
+      gap: 11px;
 
       align-items: center;
       justify-content: center;
-      margin-bottom: 1.9444vh;
+      margin-bottom: 21px;
 
       box-sizing: border-box;
-
-      p {
-        color: #000;
-
-        /* Paragraph/Large/Medium */
-        font-family: Pretendard;
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 28px; /* 155.556% */
-      }
     }
     .info {
       display: flex;
       flex-direction: column;
       gap: 2px;
 
-      color: var(--ect-black, #000);
-
-      font-family: Pretendard;
-      font-size: 0.875rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.25rem; /* 142.857% */
-
       span {
         text-decoration-line: underline;
         text-decoration-style: solid;
@@ -236,7 +213,6 @@
   align-items: center;
 
   // FileInputBox에 상단 margin 존재 - 제거 예정, 0.63rem만큼의 차 필요
-  margin-bottom: calc(16px - 0.63rem);
 }
 
 .post-work .upload-title h6 {