Merge branch 'Style/#1504-responsive-css' of github.com:42organizatio…

…n/42gg.client into Style/#1504-responsive-css
42organization · Aug 29, 2024 · ae87f61 · ae87f61
2 parents 87efcbf + b61a5b3
commit ae87f61
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 42 deletions.
diff --git a/components/agenda/Home/AgendaTitle.tsx b/components/agenda/Home/AgendaTitle.tsx
@@ -1,42 +1,46 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import MyAgendaBtn from 'components/agenda/Home/MyAgendaBtn';
 import styles from 'styles/agenda/Home/AgendaTitle.module.scss';
 
 const AgendaTitle = () => {
   return (
-    <div className={styles.agendaTitleContainer}>
-      <div className={styles.agendaTitleButtonContainer}>AGENDA</div>
-      <div className={styles.agendaTitleButtonContainer}>
-        <Link href={`/agenda/create`}>
-          <button className={styles.agendaCreateBtn}>
-            <div>개최신청</div>
-            <div className={styles.imageWrapper}>
-              <Image
-                src='/image/agenda/ArrowRight.svg'
-                width={35}
-                height={35}
-                alt='Create Agenda'
-                className={styles.imageBox}
-              />
-            </div>
-          </button>
-        </Link>
-        <Link href={`/agenda/ticket`}>
-          <button className={styles.agendaCreateBtn}>
-            <div>티켓 확인하기</div>
-            <div className={styles.imageWrapper}>
-              <Image
-                src='/image/agenda/ArrowRight.svg'
-                width={35}
-                height={35}
-                alt='Create Agenda'
-                className={styles.imageBox}
-              />
-            </div>
-          </button>
-        </Link>
+    <>
+      <div className={styles.agendaTitleContainer}>
+        <div className={`${styles.agendaTitle}`}>AGENDA</div>
+        <div className={styles.agendaTitleButton}>
+          <Link href={`/agenda/create`}>
+            <button className={styles.agendaCreateBtn}>
+              <div>개최신청</div>
+              <div className={styles.imageWrapper}>
+                <Image
+                  src='/image/agenda/ArrowRight.svg'
+                  width={35}
+                  height={35}
+                  alt='Create Agenda'
+                  className={styles.imageBox}
+                />
+              </div>
+            </button>
+          </Link>
+          <Link href={`/agenda/ticket`}>
+            <button className={styles.agendaCreateBtn}>
+              <div>티켓 확인하기</div>
+              <div className={styles.imageWrapper}>
+                <Image
+                  src='/image/agenda/ArrowRight.svg'
+                  width={35}
+                  height={35}
+                  alt='Create Agenda'
+                  className={styles.imageBox}
+                />
+              </div>
+            </button>
+          </Link>
+        </div>
       </div>
-    </div>
+      <MyAgendaBtn />
+    </>
   );
 };
 

diff --git a/pages/agenda/index.tsx b/pages/agenda/index.tsx
@@ -3,7 +3,6 @@ import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import type { NextPage } from 'next';
 import AgendaList from 'components/agenda/Home/AgendaList';
 import AgendaTitle from 'components/agenda/Home/AgendaTitle';
-import MyAgendaBtn from 'components/agenda/Home/MyAgendaBtn';
 import { TestModal, TestModal2 } from 'components/agenda/modal/testModal';
 import PageNation from 'components/Pagination';
 import useFetchGet from 'hooks/agenda/useFetchGet';
@@ -30,7 +29,6 @@ const Agenda: NextPage = () => {
   return (
     <div className={styles.agendaPageContainer}>
       <AgendaTitle />
-      <MyAgendaBtn />
       <div className={listStyles.agendaListTextWrapper}>
         <h2>AGENDA LIST</h2>
         <div>

diff --git a/styles/agenda/Home/Agenda.module.scss b/styles/agenda/Home/Agenda.module.scss
@@ -1,10 +1,17 @@
 @import 'styles/agenda/common.scss';
 
 .agendaPageContainer {
+  @include layout;
   display: flex;
   width: 100%;
   flex-direction: column;
   padding: 1rem 0;
   margin: 0;
   gap: 1.5rem;
+  @media screen and (min-width: 961px) {
+    gap: 0rem;
+    > div:not(:first-child) {
+      margin-bottom: 1.5rem;
+    }
+  }
 }
diff --git a/styles/agenda/Home/AgendaTitle.module.scss b/styles/agenda/Home/AgendaTitle.module.scss
@@ -8,12 +8,24 @@
   padding: 0 1rem;
   @include text(main-menu);
 
-  .agendaTitleButtonContainer {
+  .agendaTitle {
+    @include gridHidden(mobile);
+  }
+  .agendaTitleButton,
+  .agendaTitle {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: flex-end;
   }
+  .agendaTitleButton {
+    @media screen and (min-width: 961px) {
+      position: absolute;
+      top: 5rem;
+      right: 6rem;
+      flex-direction: row;
+    }
+  }
 
   .agendaCreateBtn {
     display: flex;

diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -17,14 +17,17 @@
   transition: width 0.15s ease, height 0.15s ease;
   gap: 1rem;
   @include text(sub-menu);
+  @include gridHead;
 }
 
 .myAgendaContainer.expandedHeight {
   height: 28rem;
+  @include gridHead;
 }
 
 .myAgendaContainer.expandedWidth {
   width: 23rem;
+  @include gridHead;
 }
 
 .myAgendaBtnToggle {

diff --git a/styles/agenda/responsive.scss b/styles/agenda/responsive.scss
@@ -34,7 +34,7 @@
   @media screen and (min-width: 481px) and (max-width: 960px) {
     display: flex;
     flex-direction: column;
-    padding: 0 5rem;
+    // padding: 0 5rem;
     border: 2px solid blue;
   }
   @media screen and (min-width: 961px) {
@@ -55,10 +55,12 @@
 // 헤더에 붙어있는 부분
 @mixin gridHead {
   @include action;
-  // @media screen and (min-width: 481px) and (max-width: 960px) {
-  // }
-  // @media screen and (min-width: 961px) {
-  // }
+  @media screen and (min-width: 961px) {
+    width: calc(100%);
+    border: var(--default-border);
+    border-top: none;
+    border-radius: 0 0 $radius-big $radius-big;
+  }
 }
 
 // 아래 컨테이너 중 가장 위에 있는 부분
@@ -76,11 +78,11 @@
   @include action;
   @if ($view == 'web') {
     @media screen and (max-width: 960px) {
-      display: none;
+      display: none !important;
     }
   } @else {
     @media screen and (min-width: 961px) {
-      display: none;
+      display: none !important;
     }
   }
 }