Merge pull request #97 from capstone-maru/fix/layout

fix: Change the layout from desktop to tablet
capstone-maru · May 27, 2024 · 488e227 · 488e227
2 parents 66610df + 3b1c1e8
commit 488e227
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 235 deletions.
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -5,7 +5,7 @@
 :root,
 body {
   min-height: 100dvh;
-  min-width: 90rem;
+  min-width: 1194px;
   max-width: 100dvw;
 
   @media (max-width: 768px) {

diff --git a/src/app/pages/landing-page.tsx b/src/app/pages/landing-page.tsx
@@ -11,6 +11,7 @@ const styles = {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     padding: 0rem 13.75rem;
   `,
   img: styled.img`
@@ -24,9 +25,9 @@ const styles = {
   description: styled.div`
     display: flex;
     flex-direction: column;
-    align-items: end;
+    align-items: flex-end;
     gap: 1.75rem;
-    width: 27.8125rem;
+    width: 21.875rem;
     margin-top: 6.25rem;
     flex-shrink: 0;
 
@@ -38,8 +39,8 @@ const styles = {
       font-style: normal;
       font-weight: 700;
       line-height: normal;
-      margin-bottom: 2rem;
     }
+
     p {
       color: #000;
       text-align: right;
@@ -48,7 +49,6 @@ const styles = {
       font-style: normal;
       font-weight: 500;
       line-height: normal;
-      margin-bottom: 6.5rem;
     }
   `,
   loginButtons: styled.div`
@@ -71,19 +71,15 @@ const styles = {
       object-fit: cover;
     }
   `,
-  section2: styled.div`
-    position: relative;
-    width: 100dvw;
-    height: 31.25rem;
-    flex-shrink: 0;
-    background: #f7f6f9;
-  `,
   section3: styled.div`
     display: flex;
-    justify-content: end;
+    height: 30rem;
+    padding-left: 50%;
+    justify-content: center;
+    align-items: center;
 
-    height: 31.25rem;
-    padding-right: 21.25rem;
+    background: #f7f6f9;
+    overflow-y: hidden;
   `,
   imageBox: styled.div`
     display: flex;
@@ -112,35 +108,7 @@ const styles = {
     flex-shrink: 0;
 
     border-radius: 16px;
-    background: rgba(247, 246, 249, 0.5);
-  `,
-  section4: styled.div`
-    display: flex;
-    position: relative;
-    width: 100dvw;
-    height: 17.9375rem;
-    padding: 10.0625rem 38.71875rem 5.0625rem 39.90625rem;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    background: #f7f6f9;
-  `,
-  findMateButton: styled.button`
-    all: unset;
-    flex-shrink: 0;
-    padding: 0.5rem 1.5rem;
-    flex-shrink: 0;
-
-    border-radius: 8px;
-    background: #e15637;
-
-    color: #fff;
-    font-family: 'Noto Sans KR';
-    font-size: 1.25rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    cursor: pointer;
+    background: white;
   `,
 };
 
@@ -191,7 +159,6 @@ export function LandingPage() {
           </styles.loginButtons>
         </styles.description>
       </styles.section1>
-      <styles.section2 />
       <styles.section3>
         <styles.imageBox>
           {images.map((column, i) => (
@@ -209,9 +176,6 @@ export function LandingPage() {
           ))}
         </styles.imageBox>
       </styles.section3>
-      <styles.section4>
-        <styles.findMateButton>메이트 찾아보기</styles.findMateButton>
-      </styles.section4>
     </styles.container>
   );
 }
diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
@@ -20,7 +20,7 @@ const styles = {
   `,
   map: styled.div`
     width: 100%;
-    height: 50dvh;
+    height: 30rem;
 
     display: flex;
     flex-direction: column;
@@ -49,9 +49,7 @@ const styles = {
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 2.6875rem;
-
-    margin-bottom: 5rem;
+    gap: 3rem;
   `,
   mateRecommendationTitle: styled.h1`
     color: #000;
@@ -67,14 +65,14 @@ const styles = {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 2.12rem;
-    padding: 0 2.5rem;
+    gap: 2rem;
+    padding: 0 2.25rem;
   `,
   mateRecommendation: styled.div`
     display: flex;
     flex-grow: 1;
     flex-direction: row;
-    gap: 2.625rem;
+    gap: 2rem;
     overflow-x: auto;
 
     -ms-overflow-style: none;

diff --git a/src/app/pages/profile-page.tsx b/src/app/pages/profile-page.tsx
@@ -19,21 +19,23 @@ import {
 const styles = {
   pageContainer: styled.div`
     display: flex;
-    height: 98rem;
     width: 100%;
-    padding: 0rem 10rem 10rem 10rem;
+    max-width: 1194px;
     flex-direction: column;
     gap: 3rem;
     align-self: stretch;
-  `,
 
+    @media (max-width: 1440px) {
+      padding: 0 5rem 5rem 5rem;
+    }
+  `,
   userProfileContainer: styled.div`
     display: inline-flex;
     width: 100%;
     align-items: center;
     flex-shrink: 0;
     gap: 3rem;
-    margin-top: 5.12rem;
+    padding-block: 2rem;
   `,
   userProfileWithoutInfo: styled.div`
     display: inline-flex;
@@ -298,7 +300,6 @@ const styles = {
 
     background: var(--Purple, #6b5ee1);
   `,
-
   rulesContainer: styled.div`
     display: flex;
     flex-direction: column;
@@ -402,7 +403,6 @@ const styles = {
       padding: 0.5rem 1rem;
     }
   `,
-
   certificationButton: styled.button`
     display: flex;
     width: 9.5rem;

diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
@@ -28,9 +28,10 @@ import {
 
 const styles = {
   container: styled.div`
-    padding-top: 4.12rem;
-    padding-inline: 16rem;
+    padding-block: 4.12rem;
+    padding-inline: 10rem;
     width: 100%;
+    max-width: 1440px;
     height: fit-content;
 
     display: flex;
@@ -69,7 +70,6 @@ const styles = {
   posts: styled.div`
     display: flex;
     flex-direction: column;
-    padding-inline: 2rem;
     gap: 2rem;
   `,
   CircularButton: styled(CircularButton)`
@@ -108,10 +108,13 @@ const styles = {
     }
   `,
   cards: styled.div`
-    padding-left: 2.62rem;
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    gap: 2rem;
+    align-self: stretch;
     flex-wrap: wrap;
-    gap: 2rem 2.62rem;
   `,
 };