Merge pull request #242 from Podo-Store/feat/main-QA-4

Feat/main qa 4

Author: game240

src/App.jsx

@@ -56,7 +56,7 @@ import "./styles/utilities.css";
 function App() {
   return (
     <div className="App">
-      <BrowserWarning />
+      {/* <BrowserWarning /> */}
       <BrowserRouter>
         <AuthProvider>
           <Routes>

src/pages/MainVer2.jsx

@@ -31,7 +31,7 @@ import "./MainVer2Page2.scss";
 const MainVer2 = () => {
   const navigate = useNavigate();
   const {
-    widthConditions: { isLaptop, isTablet, isMobile },
+    widthConditions: { isDesktop, isLaptop, isTablet, isMobile },
   } = useWindowDimensions();
 
   const content2Title = () => "작품 둘러보기";
@@ -64,40 +64,44 @@ const MainVer2 = () => {
 
       <div>
         <div className="page1">
-          <section className=" page1-width">
+          <section className="page1-width">
             <div
-              className={` page1-title-img w-fit pt-[110px]  ${
+              className={`page1-title-img pt-[136px]  ${
                 isLaptop
-                  ? "items-center  gap-[80px]"
+                  ? "items-center gap-[80px]"
                   : isTablet
-                  ? " gap-[60px]"
+                  ? "gap-[60px]"
                   : "gap-[42px]"
-              }  justify-center`}
+              }  justify-between`}
             >
               <div
                 className={` ${
                   isLaptop ? "" : ""
                 }  h-fit title-wrap f-dir-column p-relative`}
               >
-                <h1 className=" title">
+                <h1 className="title">
                   대본과 {isLaptop && <br />}공연권 거래
                   <br />
                   포도상점에서
                 </h1>
 
-                <h5 className="sub-title">
+                <h5 className="sub-title whitespace-nowrap">
                   편리하게 대본과 공연권을 거래해요.
                   <br />
                   여러분들이 원하던 스토리 IP 플랫폼,
                   <br />
                   포도상점을 시작하세요!
                 </h5>
               </div>
-              {!isMobile ? (
-                <img src={circleIcon} alt="circle" className="" />
+              {!isTablet && !isMobile ? (
+                <img src={circleIcon} alt="circle" className="circle-icon" />
               ) : (
                 <div className="flex justify-end">
-                  <img src={circleIcon} alt="circle" className=" w-[438px]" />
+                  <img
+                    src={circleIcon}
+                    alt="circle"
+                    className="circle-icon w-[438px]"
+                  />
                 </div>
               )}
             </div>

src/pages/MainVer2.scss

@@ -1,11 +1,12 @@
 @use "./../styles/_responsive.scss" as r;
 
 .main-ver2 .page1 {
-  height: 1361px;
-
+  margin-bottom: 98px;
   background: linear-gradient(180deg, #f5f0ff 0%, #fff 100%);
   @include r.media-tablet {
-    align-items: end;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
   @include r.media-mobile {
     align-items: center;
@@ -17,26 +18,33 @@
   height: 85vh;
 
   @include r.media-tablet {
-    width: calc(100% - 80px);
+    // width: calc(100% - 80px);
+    width: 100%;
     height: auto;
   }
   @include r.media-mobile {
     width: 100%;
   }
 }
 
-.page1-title-img {
+.main-ver2 .page1-title-img {
   display: flex;
   flex-direction: row;
 
   margin: auto;
 
+  width: 1280px;
+  @include r.media-laptop {
+    width: 1120px;
+  }
   @include r.media-tablet {
     flex-direction: column;
     gap: 0px;
+
+    width: 768px;
   }
   @include r.media-mobile {
-    width: 100%;
+    width: 480px;
   }
 }
 .main-ver2 .page1 .title-wrap {
@@ -48,19 +56,24 @@
 
   @include r.media-tablet {
     gap: 0;
-    width: 768px;
+
+    padding-left: 80px;
   }
+
   @include r.media-mobile {
-    width: 480px;
+    padding-left: 25px;
   }
 }
 
 .main-ver2 .page1 .title {
+  padding-top: 138px;
+
   font-size: 6.667vh; /* 72px */
   font-style: normal;
   font-weight: 700;
   line-height: 120%; /* 86.4px */
   @include r.media-tablet {
+    padding-top: 0;
     margin-bottom: 70px;
 
     font-size: 64px;
@@ -114,18 +127,10 @@
 }
 
 .main-ver2 .page1 .circle-icon {
-  position: absolute;
-  top: 11.852vh; // 128px
-  right: 12.5vw; // 240px
-
   width: 652px;
   height: 641px;
 
-  transform: translateX(-18px);
   @include r.media-laptop {
-    top: 12.5926vh; // 136px
-    right: 80px;
-
     width: 616px;
     height: 606px;
   }