Fix: PR 리뷰에 관한 사항들

- import 상대경로 보다는 절대경로로 설정 - CamelCase: Myagenda -> MyAgenda - �Scss Style: color, border, box-shadow 등 공통 사항들 변수로 빼서 사용
42organization · Jul 24, 2024 · 1d3c7bd · 1d3c7bd
1 parent 20a313c
commit 1d3c7bd
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;