Merge pull request #1453 from 42organization/Feat/#1437-agenda-list-l…

…ayout [Feat] agenda list layout #1437
42organization · Jul 24, 2024 · 8b7a92e · 8b7a92e
2 parents c12a87b + 1d3c7bd
commit 8b7a92e
Show file tree

Hide file tree

Showing 14 changed files with 341 additions and 167 deletions.
diff --git a/components/agenda/Home/AgendaDeadLine.tsx b/components/agenda/Home/AgendaDeadLine.tsx
@@ -0,0 +1,13 @@
+import styles from 'styles/agenda/Home/AgendaDeadLine.module.scss';
+
+// props : API
+const AgendaDeadLine = () => {
+  return (
+    <div className={styles.agendaItemDeadLineBox}>
+      <div className={styles.agendaDeadLineText}>모집마감</div>
+      <div className={styles.agendaDeadLine}>D-2</div>
+    </div>
+  );
+};
+
+export default AgendaDeadLine;
diff --git a/components/agenda/Home/AgendaInfo.tsx b/components/agenda/Home/AgendaInfo.tsx
@@ -0,0 +1,56 @@
+import Image from 'next/image';
+import AgendaTag from 'components/agenda/utils/AgendaTag';
+import styles from 'styles/agenda/Home/AgendaInfo.module.scss';
+
+// Props: API data
+const AagendaInfo = () => {
+  return (
+    <div className={styles.agendaInfoContainer}>
+      <div className={styles.agendaDateBox}>
+        <div className={styles.agendaDateMonth}>12</div>
+        <div className={styles.agendaDateDay}>31</div>
+      </div>
+
+      <div className={styles.agendaInfoWrapper}>
+        <div className={styles.agendaItemTitleBox}>PUSH SWAP 경진대회</div>
+
+        <div className={styles.agendaItemTimeBox}>
+          <div className={styles.agendaItemTimeWrapper}>
+            <div className={styles.imageWrapper}>
+              <Image
+                src='/image/agenda/Time.svg'
+                width={15}
+                height={15}
+                alt='Time'
+                className={styles.imageBox}
+              />
+            </div>
+            <div>12.31</div>
+            <div>14:00 ~ 17:00</div>
+          </div>
+
+          <div className={styles.agendaItemTimeWrapper}>
+            <div className={styles.imageWrapper}>
+              <Image
+                src='/image/agenda/People.svg'
+                width={15}
+                height={15}
+                alt='count'
+                className={styles.imageBox}
+              />
+            </div>
+            <div>20/100</div>
+          </div>
+        </div>
+
+        <div className={styles.agendaItemTagBox}>
+          <AgendaTag tagName='공식' />
+          <AgendaTag tagName='팀' />
+          <AgendaTag tagName='과제' />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AagendaInfo;
diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx
@@ -1,74 +1,27 @@
-import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
-import AgendaTag from 'components/agenda/utils/AgendaTag';
+import AgendaDeadLine from 'components/agenda/Home/AgendaDeadLine';
+import AgendaInfo from 'components/agenda/Home/AgendaInfo';
 import styles from 'styles/agenda/Home/AgendaList.module.scss';
 
 const AgendaList = () => {
   return (
     <div className={styles.agendaListContainer}>
       <div className={styles.agendaListTextWrapper}>AGENDA LIST</div>
       <div className={styles.agendaListItemContainer}>
-        <AgendaListBtn />
-        <AgendaListBtn />
+        <AgendaListItem />
+        <AgendaListItem />
       </div>
     </div>
   );
 };
 
-const AgendaListBtn = () => {
+const AgendaListItem = () => {
   return (
     <Link href={`/agenda/1`}>
       <button className={styles.agendaListItemBtn}>
-        <div className={styles.agendaInfoContainer}>
-          <div className={styles.agendaDateBox}>
-            <div className={styles.agendaDateMonth}>12</div>
-            <div className={styles.agendaDateDay}>31</div>
-          </div>
-
-          <div className={styles.agendaInfoWrapper}>
-            <div className={styles.agendaItemTitleBox}>PUSH SWAP 경진대회</div>
-
-            <div className={styles.agendaItemTimeBox}>
-              <div className={styles.agendaItemTimeWrapper}>
-                <div className={styles.imageWrapper}>
-                  <Image
-                    src='/image/agenda/Time.svg'
-                    width={15}
-                    height={15}
-                    alt='Time'
-                    className={styles.imageBox}
-                  />
-                </div>
-                <div>12.31</div>
-                <div>14:00 ~ 17:00</div>
-              </div>
-
-              <div className={styles.agendaItemTimeWrapper}>
-                <div className={styles.imageWrapper}>
-                  <Image
-                    src='/image/agenda/People.svg'
-                    width={15}
-                    height={15}
-                    alt='count'
-                    className={styles.imageBox}
-                  />
-                </div>
-                <div>20/100</div>
-              </div>
-            </div>
-
-            <div className={styles.agendaItemTagBox}>
-              <AgendaTag tagName='공식' />
-              <AgendaTag tagName='팀' />
-              <AgendaTag tagName='과제' />
-            </div>
-          </div>
-        </div>
-        <div className={styles.agendaItemDeadLineBox}>
-          <div className={styles.agendaDeadLineText}>모집마감</div>
-          <div className={styles.agendaDeadLine}>D-2</div>
-        </div>
+        <AgendaInfo />
+        <AgendaDeadLine />
       </button>
     </Link>
   );

diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
@@ -1,20 +1,61 @@
 import Image from 'next/image';
+import { useState } from 'react';
+import AgendaItemBtn from 'components/agenda/utils/AgendaItemBtn';
 import styles from 'styles/agenda/Home/MyAgendaBtn.module.scss';
 
 const MyAgendaBtn = () => {
+  const [widthExpanded, setWidthExpanded] = useState(false);
+  const [heightExpanded, setHeightExpanded] = useState(false);
+  const [expanding, setExpanding] = useState(false);
+
+  const handleClick = () => {
+    if (expanding) return;
+    setExpanding(true);
+
+    if (widthExpanded) {
+      setHeightExpanded(false);
+      setTimeout(() => {
+        setWidthExpanded(false);
+        setExpanding(false);
+      }, 200);
+    } else {
+      setWidthExpanded(true);
+      setTimeout(() => {
+        setHeightExpanded(true);
+        setExpanding(false);
+      }, 200);
+    }
+  };
+
   return (
-    <button className={styles.myagendaBtn}>
-      <div>my agenda</div>
-      <div className={styles.imageWrapper}>
-        <Image
-          src='/image/agenda/ArrowRight.svg'
-          width={35}
-          height={35}
-          alt='Go To My Agenda'
-          className={styles.imageBox}
-        />
+    <div
+      className={`${styles.myAgendaContainer} ${
+        widthExpanded ? styles.expandedWidth : ''
+      } ${heightExpanded ? styles.expandedHeight : ''}`}
+    >
+      <div className={styles.myAgendaBtnToggle} onClick={handleClick}>
+        <div className={styles.myAgendaText}>my agenda</div>
+        <div className={styles.imageWrapper}>
+          <Image
+            src='/image/agenda/ChevronRight.svg'
+            width={35}
+            height={35}
+            alt='Go To My Agenda'
+            className={`${styles.imageBox} ${
+              widthExpanded ? styles.rotateDown : ''
+            }`}
+          />
+        </div>
+      </div>
+
+      <div className={styles.myAgendaListContainer}>
+        <AgendaItemBtn />
+        <AgendaItemBtn />
+        <AgendaItemBtn />
+        <AgendaItemBtn />
+        <AgendaItemBtn />
       </div>
-    </button>
+    </div>
   );
 };
 

diff --git a/components/agenda/utils/AgendaItemBtn.tsx b/components/agenda/utils/AgendaItemBtn.tsx
@@ -0,0 +1,12 @@
+import AgendaInfo from 'components/agenda/Home/AgendaInfo';
+import styles from 'styles/agenda/utils/AgendaItemBtn.module.scss';
+
+const AgendaItemBtn = () => {
+  return (
+    <div className={styles.myagendaItemContainer}>
+      <AgendaInfo />
+    </div>
+  );
+};
+
+export default AgendaItemBtn;
diff --git a/styles/agenda/Home/Agenda.module.scss b/styles/agenda/Home/Agenda.module.scss
@@ -1,4 +1,4 @@
-@import '../common.scss';
+@import 'styles/agenda/common.scss';
 
 .agendaPageContainer {
   display: flex;

diff --git a/styles/agenda/Home/AgendaDeadLine.module.scss b/styles/agenda/Home/AgendaDeadLine.module.scss
@@ -0,0 +1,24 @@
+@import 'styles/agenda/common.scss';
+
+.agendaItemDeadLineBox {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  flex-direction: column;
+  color: $color-white;
+  background: $color-deadline-background;
+  border-radius: $circle-radius;
+  justify-content: center;
+  gap: 0.2rem;
+
+  .agendaDeadLineText {
+    @include regularTextFont(small);
+  }
+
+  .agendaDeadLine {
+    @include boldTextFont(medium);
+  }
+}
diff --git a/styles/agenda/Home/AgendaInfo.module.scss b/styles/agenda/Home/AgendaInfo.module.scss
@@ -0,0 +1,80 @@
+@import 'styles/agenda/common.scss';
+
+.agendaInfoContainer {
+  display: flex;
+  width: 100%;
+  height: 4.5rem;
+  gap: 1rem;
+}
+
+.agendaDateBox {
+  display: flex;
+  width: fit-content;
+  height: 100%;
+  flex-direction: column;
+  margin-top: 0.5rem;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.2rem;
+  .agendaDateMonth {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    @include boldTextFont(giant);
+  }
+  .agendaDateDay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    @include lightTextFont(giant);
+  }
+}
+
+.agendaInfoWrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.3rem;
+
+  .agendaItemTitleBox {
+    display: flex;
+    align-items: center;
+    height: 1.5rem;
+    @include boldTextFont(big);
+  }
+
+  .agendaItemTimeBox {
+    display: flex;
+    align-items: center;
+    height: 0.9rem;
+    gap: 1.5rem;
+    @include lightTextFont(small);
+
+    .agendaItemTimeWrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+  }
+
+  .agendaItemTagBox {
+    display: flex;
+    gap: 1rem;
+  }
+}
+
+.imageWrapper {
+  display: flex;
+  width: 0.8rem;
+  height: 0.8rem;
+  .imageBox {
+    width: 100%;
+    height: 100%;
+  }
+}