From 5f762ba1002d462c9ff173f7ed16db093a907b84 Mon Sep 17 00:00:00 2001
From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com>
Date: Mon, 22 Jul 2024 18:04:48 +0900
Subject: [PATCH 1/4] Feat: MyAgendaBtn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MyAgendaBtn 토글 형식의 버튼 구현 (누를 시, 등록한 아젠다 보이기)
- AgendaDeadLine, AgendaInfo 컴포넌트로 분리
---
 components/agenda/Home/AgendaDeadLine.tsx     | 13 +++
 components/agenda/Home/AgendaInfo.tsx         | 56 +++++++++++++
 components/agenda/Home/AgendaList.tsx         | 61 ++------------
 components/agenda/Home/MyAgendaBtn.tsx        | 61 +++++++++++---
 components/agenda/utils/AgendaItemBtn.tsx     | 12 +++
 styles/agenda/Home/AgendaDeadLine.module.scss | 24 ++++++
 styles/agenda/Home/AgendaInfo.module.scss     | 59 ++++++++++++++
 styles/agenda/Home/AgendaList.module.scss     | 81 -------------------
 styles/agenda/Home/MyAgendaBtn.module.scss    | 38 ++++++++-
 styles/agenda/utils/AgendaItemBtn.module.scss | 14 ++++
 10 files changed, 269 insertions(+), 150 deletions(-)
 create mode 100644 components/agenda/Home/AgendaDeadLine.tsx
 create mode 100644 components/agenda/Home/AgendaInfo.tsx
 create mode 100644 components/agenda/utils/AgendaItemBtn.tsx
 create mode 100644 styles/agenda/Home/AgendaDeadLine.module.scss
 create mode 100644 styles/agenda/Home/AgendaInfo.module.scss
 create mode 100644 styles/agenda/utils/AgendaItemBtn.module.scss

diff --git a/components/agenda/Home/AgendaDeadLine.tsx b/components/agenda/Home/AgendaDeadLine.tsx
new file mode 100644
index 000000000..c8589003a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..029922e41
--- /dev/null
+++ 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
index 66cd76031..6b208cb41 100644
--- a/components/agenda/Home/AgendaList.tsx
+++ b/components/agenda/Home/AgendaList.tsx
@@ -1,7 +1,7 @@
-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 = () => {
@@ -9,66 +9,19 @@ const AgendaList = () => {
     <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
index 00f9466b1..a173a917a 100644
--- a/components/agenda/Home/MyAgendaBtn.tsx
+++ b/components/agenda/Home/MyAgendaBtn.tsx
@@ -1,20 +1,59 @@
 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>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>
+      </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
new file mode 100644
index 000000000..58ab8acd1
--- /dev/null
+++ 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/AgendaDeadLine.module.scss b/styles/agenda/Home/AgendaDeadLine.module.scss
new file mode 100644
index 000000000..578edacc9
--- /dev/null
+++ b/styles/agenda/Home/AgendaDeadLine.module.scss
@@ -0,0 +1,24 @@
+@import '../common.scss';
+
+.agendaItemDeadLineBox {
+  position: absolute;
+  right: 2rem;
+  bottom: 2rem;
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  flex-direction: column;
+  color: #ffffff;
+  background: rgba(255, 75, 75, 0.39);
+  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
new file mode 100644
index 000000000..d6abc8930
--- /dev/null
+++ b/styles/agenda/Home/AgendaInfo.module.scss
@@ -0,0 +1,59 @@
+@import '../common.scss';
+
+.agendaInfoContainer {
+  display: flex;
+  width: 100%;
+  gap: 1.5rem;
+}
+.agendaDateBox {
+  width: 2.5rem;
+  margin-left: 0.5rem;
+  .agendaDateMonth {
+    @include boldTextFont(giant);
+  }
+  .agendaDateDay {
+    @include lightTextFont(giant);
+  }
+}
+
+.agendaInfoWrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.1rem;
+
+  .agendaItemTitleBox {
+    @include boldTextFont(big);
+  }
+
+  .agendaItemTimeBox {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    @include lightTextFont(small);
+
+    .agendaItemTimeWrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+  }
+
+  .agendaItemTagBox {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.4rem;
+  }
+}
+
+.imageWrapper {
+  display: flex;
+  width: 0.8rem;
+  height: 0.8rem;
+  .imageBox {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss
index 53b90dd25..15c96be71 100644
--- a/styles/agenda/Home/AgendaList.module.scss
+++ b/styles/agenda/Home/AgendaList.module.scss
@@ -36,85 +36,4 @@
     url('/image/agenda/42.jpg') lightgray 50% / cover no-repeat;
   border: 0.1rem solid black;
   border-radius: $medium-radius;
-
-  .agendaInfoContainer {
-    display: flex;
-    width: 100%;
-    gap: 1.5rem;
-  }
-  .agendaDateBox {
-    width: 2.5rem;
-    margin-left: 0.5rem;
-    .agendaDateMonth {
-      @include boldTextFont(giant);
-    }
-    .agendaDateDay {
-      @include lightTextFont(giant);
-    }
-  }
-
-  .agendaItemDeadLineBox {
-    position: absolute;
-    right: 2rem;
-    bottom: 2rem;
-    display: flex;
-    width: 4rem;
-    height: 4rem;
-    flex-direction: column;
-    color: #ffffff;
-    background: rgba(255, 75, 75, 0.39);
-    border-radius: $circle-radius;
-    justify-content: center;
-    gap: 0.2rem;
-
-    .agendaDeadLineText {
-      @include regularTextFont(small);
-    }
-
-    .agendaDeadLine {
-      @include boldTextFont(medium);
-    }
-  }
-
-  .agendaInfoWrapper {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.1rem;
-
-    .agendaItemTitleBox {
-      @include boldTextFont(big);
-    }
-
-    .agendaItemTimeBox {
-      display: flex;
-      align-items: center;
-      gap: 1.5rem;
-      @include lightTextFont(small);
-
-      .agendaItemTimeWrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.5rem;
-      }
-    }
-
-    .agendaItemTagBox {
-      display: flex;
-      gap: 1rem;
-      margin-top: 0.4rem;
-    }
-  }
-}
-
-.imageWrapper {
-  display: flex;
-  width: 0.8rem;
-  height: 0.8rem;
-  .imageBox {
-    width: 100%;
-    height: 100%;
-  }
 }
diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
index 484e84bd1..6bbfaf660 100644
--- a/styles/agenda/Home/MyAgendaBtn.module.scss
+++ b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -1,19 +1,39 @@
 @import '../common.scss';
 
-.myagendaBtn {
+.myagendaContainer {
   display: flex;
   width: 13rem;
   height: 3rem;
-  padding: 0.3rem 0 0.3rem 1rem;
-  cursor: pointer;
+  flex-direction: column;
+  padding: 0.3rem 1rem;
+  overflow: hidden;
+  background-color: #e3e3e3;
   border: 0.1rem solid black;
   border-left-style: none;
   border-top-right-radius: $big-radius;
   border-bottom-right-radius: $big-radius;
   box-shadow: 0 0.2rem 0 0 #000;
-  align-items: center;
+  transition: width 0.15s ease, height 0.15s ease;
   gap: 1rem;
   @include subTitleFont;
+}
+
+.myagendaContainer.expandedHeight {
+  height: 28rem;
+}
+
+.myagendaContainer.expandedWidth {
+  width: 23rem;
+}
+
+.myagendaBtnToggle {
+  display: flex;
+  width: fit-content;
+  max-height: 3rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
 
   .imageWrapper {
     display: flex;
@@ -28,3 +48,13 @@
     }
   }
 }
+
+.myagendaListContainer {
+  display: flex;
+  width: 100%;
+  height: 23rem;
+  flex-direction: column;
+  overflow-y: scroll;
+  align-items: flex-start;
+  gap: 1rem;
+}
diff --git a/styles/agenda/utils/AgendaItemBtn.module.scss b/styles/agenda/utils/AgendaItemBtn.module.scss
new file mode 100644
index 000000000..fee037600
--- /dev/null
+++ b/styles/agenda/utils/AgendaItemBtn.module.scss
@@ -0,0 +1,14 @@
+@import '../common.scss';
+
+.myagendaItemContainer {
+  display: flex;
+  width: 100%;
+  min-height: 5.5rem;
+  padding: 1rem;
+  background-color: #ffffff;
+  border: 1px solid #000;
+  border-radius: $big-radius;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  justify-content: center;
+  align-items: center;
+}

From 7b5683d9d05dbb0d8ad6d10c68bca8196bd77beb Mon Sep 17 00:00:00 2001
From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:39:12 +0900
Subject: [PATCH 2/4] =?UTF-8?q?[Style]=20Agenda=20Home=20Page=20UI=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DedaLine 컴포넌트 사용 시, 위치 재설정
- MyAgendBtn 화살표 애니메이션 설정
- AgendaInfo 컴포넌트 재사용시, UI 다르게 나타나는 에러 수정 (전반적인 태그들의 height rem단위로 설정 및 가로-세로정렬 설정)
- AgendaItem 반응형으로 window width 커질 시, white background 크기는 변하지 않도록 px단위로 설정
---
 components/agenda/Home/MyAgendaBtn.tsx        |  6 ++--
 styles/agenda/Home/AgendaDeadLine.module.scss |  6 ++--
 styles/agenda/Home/AgendaInfo.module.scss     | 31 ++++++++++++++++---
 styles/agenda/Home/AgendaList.module.scss     | 10 +++---
 styles/agenda/Home/MyAgendaBtn.module.scss    |  5 +++
 styles/agenda/utils/AgendaItemBtn.module.scss |  6 ++--
 styles/agenda/utils/AgendaTag.module.scss     |  6 +++-
 7 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
index a173a917a..216de403e 100644
--- a/components/agenda/Home/MyAgendaBtn.tsx
+++ b/components/agenda/Home/MyAgendaBtn.tsx
@@ -37,11 +37,13 @@ const MyAgendaBtn = () => {
         <div>my agenda</div>
         <div className={styles.imageWrapper}>
           <Image
-            src='/image/agenda/ArrowRight.svg'
+            src='/image/agenda/ChevronRight.svg'
             width={35}
             height={35}
             alt='Go To My Agenda'
-            className={styles.imageBox}
+            className={`${styles.imageBox} ${
+              widthExpanded ? styles.rotateDown : ''
+            }`}
           />
         </div>
       </div>
diff --git a/styles/agenda/Home/AgendaDeadLine.module.scss b/styles/agenda/Home/AgendaDeadLine.module.scss
index 578edacc9..979285fc6 100644
--- a/styles/agenda/Home/AgendaDeadLine.module.scss
+++ b/styles/agenda/Home/AgendaDeadLine.module.scss
@@ -2,14 +2,14 @@
 
 .agendaItemDeadLineBox {
   position: absolute;
-  right: 2rem;
-  bottom: 2rem;
+  right: 1rem;
+  bottom: 1rem;
   display: flex;
   width: 4rem;
   height: 4rem;
   flex-direction: column;
   color: #ffffff;
-  background: rgba(255, 75, 75, 0.39);
+  background: rgba(255, 75, 75, 0.8);
   border-radius: $circle-radius;
   justify-content: center;
   gap: 0.2rem;
diff --git a/styles/agenda/Home/AgendaInfo.module.scss b/styles/agenda/Home/AgendaInfo.module.scss
index d6abc8930..3b7496be8 100644
--- a/styles/agenda/Home/AgendaInfo.module.scss
+++ b/styles/agenda/Home/AgendaInfo.module.scss
@@ -3,15 +3,31 @@
 .agendaInfoContainer {
   display: flex;
   width: 100%;
-  gap: 1.5rem;
+  height: 4.5rem;
+  gap: 1rem;
 }
+
 .agendaDateBox {
-  width: 2.5rem;
-  margin-left: 0.5rem;
+  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);
   }
 }
@@ -19,16 +35,22 @@
 .agendaInfoWrapper {
   display: flex;
   width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.1rem;
+  justify-content: center;
+  gap: 0.3rem;
 
   .agendaItemTitleBox {
+    display: flex;
+    align-items: center;
+    height: 1.5rem;
     @include boldTextFont(big);
   }
 
   .agendaItemTimeBox {
     display: flex;
+    height: 0.9rem;
     align-items: center;
     gap: 1.5rem;
     @include lightTextFont(small);
@@ -44,7 +66,6 @@
   .agendaItemTagBox {
     display: flex;
     gap: 1rem;
-    margin-top: 0.4rem;
   }
 }
 
diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss
index 15c96be71..6d963c4db 100644
--- a/styles/agenda/Home/AgendaList.module.scss
+++ b/styles/agenda/Home/AgendaList.module.scss
@@ -17,7 +17,7 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
 }
 
 .agendaListItemBtn {
@@ -29,11 +29,13 @@
   height: calc(150px + (100vw - 352px) * ((600 - 150) / (750 - 352)));
   min-height: 180px;
   max-height: 600px;
-  flex-direction: column;
-  padding: 1rem 0.6rem;
+  padding: 0.7rem 1.2rem;
   cursor: pointer;
-  background: linear-gradient(180deg, #fff 37%, rgba(0, 0, 0, 0) 100%),
+  background: linear-gradient(180deg, #fff 65px, rgba(0, 0, 0, 0) 100%),
     url('/image/agenda/42.jpg') lightgray 50% / cover no-repeat;
   border: 0.1rem solid black;
   border-radius: $medium-radius;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  justify-content: center;
+  align-items: flex-start;
 }
diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
index 6bbfaf660..06f836d27 100644
--- a/styles/agenda/Home/MyAgendaBtn.module.scss
+++ b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -45,6 +45,11 @@
     .imageBox {
       width: 100%;
       height: 100%;
+      transition: transform 0.3s ease-in-out;
+    }
+
+    .rotateDown {
+      transform: rotate(90deg);
     }
   }
 }
diff --git a/styles/agenda/utils/AgendaItemBtn.module.scss b/styles/agenda/utils/AgendaItemBtn.module.scss
index fee037600..caa7816e7 100644
--- a/styles/agenda/utils/AgendaItemBtn.module.scss
+++ b/styles/agenda/utils/AgendaItemBtn.module.scss
@@ -2,13 +2,13 @@
 
 .myagendaItemContainer {
   display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   min-height: 5.5rem;
-  padding: 1rem;
+  padding: 0 1.2rem;
   background-color: #ffffff;
   border: 1px solid #000;
   border-radius: $big-radius;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-  justify-content: center;
-  align-items: center;
 }
diff --git a/styles/agenda/utils/AgendaTag.module.scss b/styles/agenda/utils/AgendaTag.module.scss
index 1abdd33db..c7fe91612 100644
--- a/styles/agenda/utils/AgendaTag.module.scss
+++ b/styles/agenda/utils/AgendaTag.module.scss
@@ -1,7 +1,11 @@
 @import '../common.scss';
 
 .agendaTag {
-  padding: 0.1rem 0.7rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3.3rem;
+  height: 1.2rem;
   color: #ffffff;
   border-radius: $medium-radius;
   @include regularTextFont(small);

From 8524c2048874b4d06ccacdf98d4bede5550b179d Mon Sep 17 00:00:00 2001
From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com>
Date: Tue, 23 Jul 2024 15:03:25 +0900
Subject: [PATCH 3/4] Style: myagendaBtn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- myagendaBtn 전반적인 크기 작게 수정 (화살표 이미지 포함)
---
 components/agenda/Home/MyAgendaBtn.tsx     |  2 +-
 styles/agenda/Home/MyAgendaBtn.module.scss | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
index 216de403e..f0891bc69 100644
--- a/components/agenda/Home/MyAgendaBtn.tsx
+++ b/components/agenda/Home/MyAgendaBtn.tsx
@@ -34,7 +34,7 @@ const MyAgendaBtn = () => {
       } ${heightExpanded ? styles.expandedHeight : ''}`}
     >
       <div className={styles.myagendaBtnToggle} onClick={handleClick}>
-        <div>my agenda</div>
+        <div className={styles.myagendaText}>my agenda</div>
         <div className={styles.imageWrapper}>
           <Image
             src='/image/agenda/ChevronRight.svg'
diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
index 06f836d27..f2a80543f 100644
--- a/styles/agenda/Home/MyAgendaBtn.module.scss
+++ b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -2,10 +2,10 @@
 
 .myagendaContainer {
   display: flex;
-  width: 13rem;
+  width: 12.5rem;
   height: 3rem;
   flex-direction: column;
-  padding: 0.3rem 1rem;
+  padding: 0.55rem 1rem;
   overflow: hidden;
   background-color: #e3e3e3;
   border: 0.1rem solid black;
@@ -33,14 +33,19 @@
   cursor: pointer;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.5rem;
+  gap: 0.2rem;
+
+  .myagendaText {
+    width: 9rem;
+    height: fit-content;
+  }
 
   .imageWrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2.2rem;
+    width: 1.5rem;
+    height: 1.7rem;
 
     .imageBox {
       width: 100%;

From 1d3c7bd0dd10b4c4baffa032485f2f0dd76164bc Mon Sep 17 00:00:00 2001
From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com>
Date: Wed, 24 Jul 2024 12:43:52 +0900
Subject: [PATCH 4/4] =?UTF-8?q?Fix:=20PR=20=EB=A6=AC=EB=B7=B0=EC=97=90=20?=
 =?UTF-8?q?=EA=B4=80=ED=95=9C=20=EC=82=AC=ED=95=AD=EB=93=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- import 상대경로 보다는 절대경로로 설정
- CamelCase: Myagenda -> MyAgenda
- Scss Style: color, border, box-shadow 등 공통 사항들 변수로 빼서 사용
---
 components/agenda/Home/MyAgendaBtn.tsx        |  8 +++----
 styles/agenda/Home/Agenda.module.scss         |  2 +-
 styles/agenda/Home/AgendaDeadLine.module.scss |  6 ++---
 styles/agenda/Home/AgendaInfo.module.scss     |  4 ++--
 styles/agenda/Home/AgendaList.module.scss     |  9 ++++---
 styles/agenda/Home/AgendaTitle.module.scss    |  6 ++---
 styles/agenda/Home/MyAgendaBtn.module.scss    | 24 +++++++++----------
 styles/agenda/common.scss                     | 17 +++++++++++++
 8 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
index f0891bc69..7b10ffc83 100644
--- a/components/agenda/Home/MyAgendaBtn.tsx
+++ b/components/agenda/Home/MyAgendaBtn.tsx
@@ -29,12 +29,12 @@ const MyAgendaBtn = () => {
 
   return (
     <div
-      className={`${styles.myagendaContainer} ${
+      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.myAgendaBtnToggle} onClick={handleClick}>
+        <div className={styles.myAgendaText}>my agenda</div>
         <div className={styles.imageWrapper}>
           <Image
             src='/image/agenda/ChevronRight.svg'
@@ -48,7 +48,7 @@ const MyAgendaBtn = () => {
         </div>
       </div>
 
-      <div className={styles.myagendaListContainer}>
+      <div className={styles.myAgendaListContainer}>
         <AgendaItemBtn />
         <AgendaItemBtn />
         <AgendaItemBtn />
diff --git a/styles/agenda/Home/Agenda.module.scss b/styles/agenda/Home/Agenda.module.scss
index b4fe41933..32c5c510b 100644
--- 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
index 979285fc6..7a4e27e30 100644
--- a/styles/agenda/Home/AgendaDeadLine.module.scss
+++ b/styles/agenda/Home/AgendaDeadLine.module.scss
@@ -1,4 +1,4 @@
-@import '../common.scss';
+@import 'styles/agenda/common.scss';
 
 .agendaItemDeadLineBox {
   position: absolute;
@@ -8,8 +8,8 @@
   width: 4rem;
   height: 4rem;
   flex-direction: column;
-  color: #ffffff;
-  background: rgba(255, 75, 75, 0.8);
+  color: $color-white;
+  background: $color-deadline-background;
   border-radius: $circle-radius;
   justify-content: center;
   gap: 0.2rem;
diff --git a/styles/agenda/Home/AgendaInfo.module.scss b/styles/agenda/Home/AgendaInfo.module.scss
index 3b7496be8..a43c9cd87 100644
--- a/styles/agenda/Home/AgendaInfo.module.scss
+++ b/styles/agenda/Home/AgendaInfo.module.scss
@@ -1,4 +1,4 @@
-@import '../common.scss';
+@import 'styles/agenda/common.scss';
 
 .agendaInfoContainer {
   display: flex;
@@ -50,8 +50,8 @@
 
   .agendaItemTimeBox {
     display: flex;
-    height: 0.9rem;
     align-items: center;
+    height: 0.9rem;
     gap: 1.5rem;
     @include lightTextFont(small);
 
diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss
index 6d963c4db..424b8e329 100644
--- a/styles/agenda/Home/AgendaList.module.scss
+++ b/styles/agenda/Home/AgendaList.module.scss
@@ -1,4 +1,4 @@
-@import '../common.scss';
+@import 'styles/agenda/common.scss';
 
 .agendaListContainer {
   display: flex;
@@ -31,11 +31,10 @@
   max-height: 600px;
   padding: 0.7rem 1.2rem;
   cursor: pointer;
-  background: linear-gradient(180deg, #fff 65px, rgba(0, 0, 0, 0) 100%),
-    url('/image/agenda/42.jpg') lightgray 50% / cover no-repeat;
-  border: 0.1rem solid black;
+  background: $color-agenda-list-background;
+  border: $border-common;
   border-radius: $medium-radius;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: $box-bottom-shadow;
   justify-content: center;
   align-items: flex-start;
 }
diff --git a/styles/agenda/Home/AgendaTitle.module.scss b/styles/agenda/Home/AgendaTitle.module.scss
index ff145a01b..b3977436e 100644
--- a/styles/agenda/Home/AgendaTitle.module.scss
+++ b/styles/agenda/Home/AgendaTitle.module.scss
@@ -1,11 +1,11 @@
-@import '../common.scss';
+@import 'styles/agenda/common.scss';
 
 .agendaTitleContainer {
   display: flex;
-  width: 100%;
-  padding: 0 1rem;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  padding: 0 1rem;
   @include titleFont;
 
   .agendaCreateBtn {
diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
index f2a80543f..7ed92c65c 100644
--- a/styles/agenda/Home/MyAgendaBtn.module.scss
+++ b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -1,14 +1,14 @@
-@import '../common.scss';
+@import 'styles/agenda/common.scss';
 
-.myagendaContainer {
+.myAgendaContainer {
   display: flex;
   width: 12.5rem;
   height: 3rem;
   flex-direction: column;
   padding: 0.55rem 1rem;
   overflow: hidden;
-  background-color: #e3e3e3;
-  border: 0.1rem solid black;
+  background-color: $color-light-gray;
+  border: $border-common;
   border-left-style: none;
   border-top-right-radius: $big-radius;
   border-bottom-right-radius: $big-radius;
@@ -18,24 +18,24 @@
   @include subTitleFont;
 }
 
-.myagendaContainer.expandedHeight {
+.myAgendaContainer.expandedHeight {
   height: 28rem;
 }
 
-.myagendaContainer.expandedWidth {
+.myAgendaContainer.expandedWidth {
   width: 23rem;
 }
 
-.myagendaBtnToggle {
+.myAgendaBtnToggle {
   display: flex;
-  width: fit-content;
-  max-height: 3rem;
-  cursor: pointer;
   align-items: center;
   justify-content: flex-start;
+  width: fit-content;
+  max-height: 3rem;
   gap: 0.2rem;
+  cursor: pointer;
 
-  .myagendaText {
+  .myAgendaText {
     width: 9rem;
     height: fit-content;
   }
@@ -59,7 +59,7 @@
   }
 }
 
-.myagendaListContainer {
+.myAgendaListContainer {
   display: flex;
   width: 100%;
   height: 23rem;
diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss
index cbc9a0d6a..0c321c2ea 100644
--- a/styles/agenda/common.scss
+++ b/styles/agenda/common.scss
@@ -19,6 +19,23 @@ $color-coalition-lee: #ff8a85;
 
 // color
 $color-placeholder: #b4a5b5;
+$color-white: #ffffff;
+$color-light-gray: #e3e3e3;
+
+// background
+$color-deadline-background: rgba(255, 75, 75, 0.8);
+$color-agenda-list-background: linear-gradient(
+    180deg,
+    #fff 65px,
+    rgba(0, 0, 0, 0) 100%
+  ),
+  url('/image/agenda/42.jpg') lightgray 50% / cover no-repeat;
+
+// border
+$border-common: 0.1rem solid black;
+
+// box-shadow
+$box-bottom-shadow: 0 0.3rem 0.3rem 0 rgba(0, 0, 0, 0.25);
 
 // font-family
 $logo-font: 'Overgrow', sans-serif;