From fd290f684d917372696a9d26beadda41c7f449e4 Mon Sep 17 00:00:00 2001 From: siwolee Date: Wed, 24 Jul 2024 14:02:35 +0900 Subject: [PATCH 1/9] =?UTF-8?q?style:=20=ED=86=B5=ED=95=A9=20=ED=8F=B0?= =?UTF-8?q?=ED=8A=B8=20=EB=AF=B9=EC=8A=A4=EC=9D=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/agenda/common.scss | 53 ++++++++++++++++++++++++++++++--------- styles/color-theme.css | 2 ++ 2 files changed, 43 insertions(+), 12 deletions(-) diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index 81863be3f..405b879e1 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -22,14 +22,15 @@ $color-placeholder: #b4a5b5; // font-family $logo-font: 'Overgrow', sans-serif; -$font-family-menu: 'Simplehae'; +$menu-font: 'Simplehae'; $bold-text-font: '11StreetGothicBold'; $regular-text-font: '11StreetGothicRegular'; $light-text-font: '11StreetGothicLight'; -$font-default: 'Pretendard', sans-serif; +$inter-font: 'Inter'; +$font-family-menu: 'Simplehae'; +$font-default: 'Pretendard', sans-serif; // 예정 $common-font: 'Pretendard', sans-serif; - -@mixin container($level) { +/ /예정 @mixin container($level) { display: flex; width: calc(100% - 2rem); max-width: 1200px; @@ -72,10 +73,12 @@ $font-sizes: ( medium: 1rem, small: 0.8rem, ); + @function font-size($size) { @return map-get($font-sizes, $size); } +// 42GG logo @mixin logoText($size, $color) { font-family: $logo-font; font-size: $size; @@ -161,12 +164,38 @@ $font-sizes: ( font-weight: 300; } -@mixin headCountText($size: $giant-big-font) { - font-family: Inter; - font-size: $size; - font-style: normal; - font-weight: 100; - line-height: normal; - color: #000; - text-align: center; +@mixin text($type) { + color: var(--color-text); + @if ($type == 'main-menu') { + // navbar 메뉴 + font-family: $font-family-menu; + font-size: font-size(big-giant); + font-weight: 400; + } @else if ($type == 'sub-menu') { + // navbar 서브메뉴 + font-family: $font-family-menu; + font-size: font-size(giant); + font-weight: 300; + } @else if ($type == 'default') { + // 기본 텍스트 + font-family: $regular-text-font; + font-size: font-size(medium); + } @else if ($type == 'description') { + // 제목 뒤에 붙는 설명 + font-family: $light-text-font; + font-size: font-size(small); + } @else if ($type == 'title') { + // 아젠다,팀 타이틀 + font-family: $bold-text-font; + font-size: font-size(big-giant); + } @else if ($type == 'tap') { + font-family: $bold-text-font; + font-size: font-size(medium); + } @else if ($type == 'head-count') { + // 인원수 표시하는 부분 + font-family: $inter-font; + font-size: $giant-big-font; + font-weight: 100; + text-align: center; + } } diff --git a/styles/color-theme.css b/styles/color-theme.css index 697662dda..5467e8a34 100644 --- a/styles/color-theme.css +++ b/styles/color-theme.css @@ -34,6 +34,7 @@ html[data-theme='light'] { --color-bg: var(--bg-light); --color-text: var(--text-light); + --color-text-reverse: var(--text-dark); --default-border: var(--border-light); --highlight-border: var(--border-highlight-light); --default-box-shadow: var(--box-shadow-light); @@ -47,6 +48,7 @@ html[data-theme='light'] { html[data-theme='dark'] { --color-bg: var(--bg-dark); --color-text: var(--text-dark); + --color-text-reverse: var(--text-light); --default-border: var(--border-dark); --highlight-border: var(--border-highlight-dark); --default-box-shadow: var(--box-shadow-dark); From 7b554883da0fc73aa8b6120a80696fa7a924baaa Mon Sep 17 00:00:00 2001 From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com> Date: Wed, 24 Jul 2024 16:15:31 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Style:=20common.scss=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/agenda/common.scss | 202 +++++++++++++++----------------------- 1 file changed, 78 insertions(+), 124 deletions(-) diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index 298e86417..fc7bd9f86 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -2,10 +2,10 @@ // @import 'styles/globals.css'; // radius -$small-radius: 1rem; // 컴포넌트 속 요소 -$medium-radius: 1.2rem; // 기본 컴포넌트 -$big-radius: 1.4rem; // 제목, 웹용 큰 박스용 -$circle-radius: 50%; // 원 +$radius-small: 1rem; // 컴포넌트 속 요소 +$radius-medium: 1.2rem; // 기본 컴포넌트 +$radius-big: 1.4rem; // 제목, 웹용 큰 박스용 +$radius-circle: 50%; // 원 // coalition $color-coalition-autumn: #ffac65; @@ -19,35 +19,75 @@ $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% - ), +// deadline bg color +$bg-color-deadline-red: rgba(255, 75, 75, 0.8); +$agenda-list-bg: 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; -$menu-font: 'Simplehae'; -$bold-text-font: '11StreetGothicBold'; -$regular-text-font: '11StreetGothicRegular'; -$light-text-font: '11StreetGothicLight'; -$inter-font: 'Inter'; -$font-family-menu: 'Simplehae'; -$font-default: 'Pretendard', sans-serif; // 예정 -$common-font: 'Pretendard', sans-serif; -/ /예정 @mixin container($level) { +$font-text-bold: '11StreetGothicBold'; +$font-text-regular: '11StreetGothicRegular'; +$font-text-light: '11StreetGothicLight'; +$font-menu: 'Simplehae'; +$font-inter: 'Inter'; +$font-pretendard: 'Pretendard', sans-serif; +$font-logo: 'Overgrow', sans-serif; + +// font-size +$font-size-xxl: 2.1rem; +$font-size-xl: 1.8rem; +$font-size-l: 1.5rem; +$font-size-m: 1.2rem; +$font-size-s: 1rem; +$font-size-xs: 0.8rem; + +// text +@mixin text($type) { + color: var(--color-text); + @if ($type == 'head-count') { + // 인원수 표시하는 부분 + font-family: $font-inter; + font-size: $font-size-xxl; + font-weight: 100; + text-align: center; + } @else if ($type == 'main-menu') { + // navbar 메뉴 + font-family: $font-menu; + font-size: $font-size-xl; + font-weight: 400; + } @else if ($type == 'sub-menu') { + // navbar 서브메뉴 + font-family: $font-menu; + font-size: $font-size-l; + font-weight: 300; + } @else if ($type == 'title') { + // 아젠다,팀 타이틀 + font-family: $font-text-bold; + font-size: $font-size-xl; + } @else if ($type == 'date') { + // 날짜 - 월,일 + font-family: $font-text-bold; + font-size: $font-size-l; + } @else if ($type == 'sub-title') { + // 아젠다 리스트 아이템 - 타이틀 + font-family: $font-text-bold; + font-size: $font-size-m; + } @else if ($type == 'tap') { + font-family: $font-text-bold; + font-size: $font-size-s; + } @else if ($type == 'default') { + // 기본 텍스트 + font-family: $font-text-regular; + font-size: $font-size-s; + } @else if ($type == 'description') { + // 제목 뒤에 붙는 설명 + font-family: $font-text-light; + font-size: $font-size-xs; + } +} + +@mixin container($level) { display: flex; width: calc(100% - 2rem); max-width: 1200px; @@ -55,7 +95,7 @@ $common-font: 'Pretendard', sans-serif; padding: 0 1rem; margin: 1rem; border: var(--default-border); - border-radius: $medium-radius; + border-radius: $radius-medium; box-shadow: var(--default-box-shadow); justify-content: center; align-items: center; @@ -67,37 +107,13 @@ $common-font: 'Pretendard', sans-serif; background: var(--box-bg-3); } @else if $level == 'right' { background: var(--box-bg-1); - border-radius: $medium-radius 0 0 $medium-radius; + border-radius: $radius-medium 0 0 $radius-medium; } } -/* font-size */ -$giant-giant-font: 2.4rem; -$giant-big-font: 2.1rem; -$big-giant-font: 1.8rem; -$giant-font: 1.5rem; -$big-font: 1.2rem; -$medium-font: 1rem; -$small-font: 0.8rem; - -/* font-size map */ -$font-sizes: ( - giant-giant: 2.4rem, - giant-big: 2.1rem, - big-giant: 1.8rem, - giant: 1.5rem, - big: 1.2rem, - medium: 1rem, - small: 0.8rem, -); - -@function font-size($size) { - @return map-get($font-sizes, $size); -} - // 42GG logo @mixin logoText($size, $color) { - font-family: $logo-font; + font-family: $font-logo; font-size: $size; font-weight: 500; color: $color; @@ -105,40 +121,13 @@ $font-sizes: ( letter-spacing: 0.1rem; } -@mixin titleFont { - font-family: $font-family-menu; - font-size: font-size(big-giant); - font-weight: 400; -} - -@mixin subTitleFont { - font-family: $font-family-menu; - font-size: font-size(giant); - font-weight: 300; -} - -@mixin lightTextFont($size) { - font-family: $light-text-font; - font-size: font-size($size); -} - -@mixin regularTextFont($size) { - font-family: $regular-text-font; - font-size: font-size($size); -} - -@mixin boldTextFont($size) { - font-family: $bold-text-font; - font-size: font-size($size); -} - @mixin textButton($type, $style) { padding: 1rem; - font-size: $medium-font; + font-size: $font-size-s; color: var(--default-font); border: var(--default-border); border: none; - border-radius: $small-radius; + border-radius: $radius-small; box-shadow: var(--default-box-shadow); @if ($style == 'default') { border-color: var(--default-border); @@ -163,56 +152,21 @@ $font-sizes: ( } @mixin boldTitle { + // main-menu margin: 1rem 0; - font-size: $big-giant-font; + font-size: $font-size-xl; font-weight: 700; color: var(--default-font); } @mixin title { margin: 1rem 0; - font-size: $big-giant-font; + font-size: $font-size-xl; font-weight: 500; color: var(--default-font); } @mixin description { - font-size: $small-font; + font-size: $font-size-xs; font-weight: 300; } - -@mixin text($type) { - color: var(--color-text); - @if ($type == 'main-menu') { - // navbar 메뉴 - font-family: $font-family-menu; - font-size: font-size(big-giant); - font-weight: 400; - } @else if ($type == 'sub-menu') { - // navbar 서브메뉴 - font-family: $font-family-menu; - font-size: font-size(giant); - font-weight: 300; - } @else if ($type == 'default') { - // 기본 텍스트 - font-family: $regular-text-font; - font-size: font-size(medium); - } @else if ($type == 'description') { - // 제목 뒤에 붙는 설명 - font-family: $light-text-font; - font-size: font-size(small); - } @else if ($type == 'title') { - // 아젠다,팀 타이틀 - font-family: $bold-text-font; - font-size: font-size(big-giant); - } @else if ($type == 'tap') { - font-family: $bold-text-font; - font-size: font-size(medium); - } @else if ($type == 'head-count') { - // 인원수 표시하는 부분 - font-family: $inter-font; - font-size: $giant-big-font; - font-weight: 100; - text-align: center; - } -} From 5b8bfd005047be8bc284eae1c9964a78cbf1bf71 Mon Sep 17 00:00:00 2001 From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com> Date: Wed, 24 Jul 2024 16:19:23 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Style:=20Agenda=20Page=20common.scss=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=90=9C=20=EB=B3=80=EC=88=98=20replace?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/agenda/Home/AgendaDeadLine.module.scss | 11 +- styles/agenda/Home/AgendaInfo.module.scss | 8 +- styles/agenda/Home/AgendaList.module.scss | 10 +- styles/agenda/Home/AgendaTitle.module.scss | 10 +- styles/agenda/Home/MyAgendaBtn.module.scss | 12 +- styles/agenda/Layout/Header.module.scss | 2 +- styles/agenda/common.scss | 130 +++++++++++------- styles/agenda/utils/AgendaItemBtn.module.scss | 8 +- styles/agenda/utils/AgendaTag.module.scss | 10 +- 9 files changed, 114 insertions(+), 87 deletions(-) diff --git a/styles/agenda/Home/AgendaDeadLine.module.scss b/styles/agenda/Home/AgendaDeadLine.module.scss index 7a4e27e30..8bae5a70a 100644 --- a/styles/agenda/Home/AgendaDeadLine.module.scss +++ b/styles/agenda/Home/AgendaDeadLine.module.scss @@ -8,17 +8,18 @@ width: 4rem; height: 4rem; flex-direction: column; - color: $color-white; - background: $color-deadline-background; - border-radius: $circle-radius; + background: $bg-color-deadline-red; + border-radius: $radius-circle; justify-content: center; gap: 0.2rem; .agendaDeadLineText { - @include regularTextFont(small); + @include text(description); + color: var(--color-text-reverse); } .agendaDeadLine { - @include boldTextFont(medium); + @include text(tap); + color: var(--color-text-reverse); } } diff --git a/styles/agenda/Home/AgendaInfo.module.scss b/styles/agenda/Home/AgendaInfo.module.scss index a43c9cd87..c7e656262 100644 --- a/styles/agenda/Home/AgendaInfo.module.scss +++ b/styles/agenda/Home/AgendaInfo.module.scss @@ -21,14 +21,14 @@ align-items: center; justify-content: center; height: 1.5rem; - @include boldTextFont(giant); + @include text(date); } .agendaDateDay { display: flex; align-items: center; justify-content: center; height: 1.5rem; - @include lightTextFont(giant); + @include text(date); } } @@ -45,7 +45,7 @@ display: flex; align-items: center; height: 1.5rem; - @include boldTextFont(big); + @include text(sub-title); } .agendaItemTimeBox { @@ -53,7 +53,7 @@ align-items: center; height: 0.9rem; gap: 1.5rem; - @include lightTextFont(small); + @include text(description); .agendaItemTimeWrapper { display: flex; diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss index 424b8e329..da2f47ad3 100644 --- a/styles/agenda/Home/AgendaList.module.scss +++ b/styles/agenda/Home/AgendaList.module.scss @@ -9,7 +9,7 @@ .agendaListTextWrapper { margin: 0.5rem; - @include subTitleFont; + @include text(sub-menu); } } @@ -31,10 +31,10 @@ max-height: 600px; padding: 0.7rem 1.2rem; cursor: pointer; - background: $color-agenda-list-background; - border: $border-common; - border-radius: $medium-radius; - box-shadow: $box-bottom-shadow; + background: $agenda-list-bg; // poster img url 변수로 변경 예정 + border: var(--default-border); + border-radius: $radius-medium; + box-shadow: var(--default-box-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 b3977436e..01f51a71f 100644 --- a/styles/agenda/Home/AgendaTitle.module.scss +++ b/styles/agenda/Home/AgendaTitle.module.scss @@ -6,22 +6,22 @@ align-items: center; width: 100%; padding: 0 1rem; - @include titleFont; + @include text(main-menu); .agendaCreateBtn { display: flex; - align-items: center; cursor: pointer; background: none; border: none; - @include lightTextFont(medium); + align-items: center; + @include text(description); .imageWrapper { display: flex; align-items: center; justify-content: center; - width: 1.5rem; - height: 1.5rem; + width: 1rem; + height: 1rem; .imageBox { width: 100%; diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss index 7ed92c65c..f5c84d7d8 100644 --- a/styles/agenda/Home/MyAgendaBtn.module.scss +++ b/styles/agenda/Home/MyAgendaBtn.module.scss @@ -7,15 +7,15 @@ flex-direction: column; padding: 0.55rem 1rem; overflow: hidden; - background-color: $color-light-gray; - border: $border-common; + background-color: var(--box-bg-2); + border: var(--default-border); border-left-style: none; - border-top-right-radius: $big-radius; - border-bottom-right-radius: $big-radius; - box-shadow: 0 0.2rem 0 0 #000; + border-top-right-radius: $radius-big; + border-bottom-right-radius: $radius-big; + box-shadow: var(--default-box-shadow); transition: width 0.15s ease, height 0.15s ease; gap: 1rem; - @include subTitleFont; + @include text(sub-menu); } .myAgendaContainer.expandedHeight { diff --git a/styles/agenda/Layout/Header.module.scss b/styles/agenda/Layout/Header.module.scss index a34f138c0..7d873cf0c 100644 --- a/styles/agenda/Layout/Header.module.scss +++ b/styles/agenda/Layout/Header.module.scss @@ -5,7 +5,7 @@ display: flex; height: 4rem; margin: 0 0.7rem; - font-size: $giant-font; + font-size: $font-size-l; color: white; justify-content: space-between; align-items: center; diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index fc7bd9f86..d4ddce9af 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -24,6 +24,33 @@ $color-placeholder: #b4a5b5; $bg-color-deadline-red: rgba(255, 75, 75, 0.8); $agenda-list-bg: linear-gradient(180deg, #fff 65px, rgba(0, 0, 0, 0) 100%), url('/image/agenda/42.jpg') lightgray 50% / cover no-repeat; +// DELETE SOON +// @mixin titleFont { +// font-family: $font-menu; +// font-size: $font-size-xxl; +// font-weight: 400; +// } +// 삭제 예정 +// @mixin subTitleFont { +// font-family: $font-family-menu; +// font-size: $font-size-l; +// font-weight: 300; +// } +// 삭제 예정 +// @mixin lightTextFont($size) { +// font-family: $light-text-font; +// font-size: font-size($size); +// } +// 삭제 예정 +// @mixin regularTextFont($size) { +// font-family: $regular-text-font; +// font-size: font-size($size); +// } +// 삭제 예정 +// @mixin boldTextFont($size) { +// font-family: $bold-text-font; +// font-size: font-size($size); +// } // font-family $font-text-bold: '11StreetGothicBold'; @@ -34,58 +61,13 @@ $font-inter: 'Inter'; $font-pretendard: 'Pretendard', sans-serif; $font-logo: 'Overgrow', sans-serif; -// font-size -$font-size-xxl: 2.1rem; -$font-size-xl: 1.8rem; -$font-size-l: 1.5rem; -$font-size-m: 1.2rem; -$font-size-s: 1rem; -$font-size-xs: 0.8rem; - -// text -@mixin text($type) { - color: var(--color-text); - @if ($type == 'head-count') { - // 인원수 표시하는 부분 - font-family: $font-inter; - font-size: $font-size-xxl; - font-weight: 100; - text-align: center; - } @else if ($type == 'main-menu') { - // navbar 메뉴 - font-family: $font-menu; - font-size: $font-size-xl; - font-weight: 400; - } @else if ($type == 'sub-menu') { - // navbar 서브메뉴 - font-family: $font-menu; - font-size: $font-size-l; - font-weight: 300; - } @else if ($type == 'title') { - // 아젠다,팀 타이틀 - font-family: $font-text-bold; - font-size: $font-size-xl; - } @else if ($type == 'date') { - // 날짜 - 월,일 - font-family: $font-text-bold; - font-size: $font-size-l; - } @else if ($type == 'sub-title') { - // 아젠다 리스트 아이템 - 타이틀 - font-family: $font-text-bold; - font-size: $font-size-m; - } @else if ($type == 'tap') { - font-family: $font-text-bold; - font-size: $font-size-s; - } @else if ($type == 'default') { - // 기본 텍스트 - font-family: $font-text-regular; - font-size: $font-size-s; - } @else if ($type == 'description') { - // 제목 뒤에 붙는 설명 - font-family: $font-text-light; - font-size: $font-size-xs; - } -} +/* font-size */ +$font-size-xxl: 2.1rem; // $giant-big-font +$font-size-xl: 1.8rem; // $big-giant-font +$font-size-l: 1.5rem; // $giant-font +$font-size-m: 1.2rem; // $big-font +$font-size-s: 1rem; // $medium-font +$font-size-xs: 0.8rem; // $small-font @mixin container($level) { display: flex; @@ -170,3 +152,47 @@ $font-size-xs: 0.8rem; font-size: $font-size-xs; font-weight: 300; } + +@mixin text($type) { + color: var(--color-text); + @if ($type == 'head-count') { + // 인원수 표시하는 부분 + font-family: $font-inter; + font-size: $font-size-xxl; + font-weight: 100; + text-align: center; + } @else if ($type == 'main-menu') { + // navbar 메뉴 + font-family: $font-menu; + font-size: $font-size-xl; + font-weight: 400; + } @else if ($type == 'sub-menu') { + // navbar 서브메뉴 + font-family: $font-menu; + font-size: $font-size-l; + font-weight: 300; + } @else if ($type == 'title') { + // 아젠다,팀 타이틀 + font-family: $font-text-bold; + font-size: $font-size-xl; + } @else if ($type == 'date') { + // 날짜 - 월,일 + font-family: $font-text-bold; + font-size: $font-size-l; + } @else if ($type == 'sub-title') { + // 아젠다 리스트 아이템 - 타이틀 + font-family: $font-text-bold; + font-size: $font-size-m; + } @else if ($type == 'tap') { + font-family: $font-text-bold; + font-size: $font-size-s; + } @else if ($type == 'default') { + // 기본 텍스트 + font-family: $font-text-regular; + font-size: $font-size-s; + } @else if ($type == 'description') { + // 제목 뒤에 붙는 설명 + font-family: $font-text-light; + font-size: $font-size-xs; + } +} diff --git a/styles/agenda/utils/AgendaItemBtn.module.scss b/styles/agenda/utils/AgendaItemBtn.module.scss index caa7816e7..c9f60afc0 100644 --- a/styles/agenda/utils/AgendaItemBtn.module.scss +++ b/styles/agenda/utils/AgendaItemBtn.module.scss @@ -7,8 +7,8 @@ width: 100%; min-height: 5.5rem; 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); + background-color: var(--box-bg-1); + border: var(--default-border); + border-radius: $radius-big; + box-shadow: var(--default-box-shadow); } diff --git a/styles/agenda/utils/AgendaTag.module.scss b/styles/agenda/utils/AgendaTag.module.scss index c7fe91612..88b602ab2 100644 --- a/styles/agenda/utils/AgendaTag.module.scss +++ b/styles/agenda/utils/AgendaTag.module.scss @@ -2,11 +2,11 @@ .agendaTag { display: flex; - justify-content: center; - align-items: center; width: 3.3rem; height: 1.2rem; - color: #ffffff; - border-radius: $medium-radius; - @include regularTextFont(small); + color: var(--color-text-reverse); + border-radius: $radius-medium; + justify-content: center; + align-items: center; + @include text(description); } From b5dde8b54734bf84552c640f3056fea9c912c09b Mon Sep 17 00:00:00 2001 From: irenee-14 Date: Wed, 24 Jul 2024 17:41:06 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Style:=20common.scss=20=ED=86=B5=EC=9D=BC?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=8F=B0=ED=8A=B8=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD,=20tab=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/agenda/agendaDetail/AgendaInfo.tsx | 2 +- components/agenda/agendaDetail/AgendaTab.tsx | 15 +++++++++++++++ components/agenda/agendaDetail/AgendaTap.tsx | 15 --------------- .../{TapContent.tsx => TabContent.tsx} | 12 ++++++------ .../{taps => tabs}/AgendaAnnouncements.tsx | 4 ++-- .../{taps => tabs}/AgendaConditions.tsx | 2 +- .../{taps => tabs}/AgendaDescription.tsx | 2 +- .../{taps => tabs}/AgendaParticipants.tsx | 4 ++-- .../{taps => tabs}/AnnouncementItem.tsx | 2 +- .../agendaDetail/{taps => tabs}/Participant.tsx | 2 +- .../{taps => tabs}/ParticipantTeam.tsx | 4 ++-- .../{taps => tabs}/ParticipantTeamList.tsx | 4 ++-- .../{taps => tabs}/ParticipantsList.tsx | 4 ++-- components/agenda/button/TabButton.tsx | 13 +++++++++++++ .../button/{TapButtons.tsx => TabButtons.tsx} | 10 +++++----- components/agenda/button/TapButton.tsx | 13 ------------- pages/agenda/[agendaKey]/index.tsx | 4 ++-- .../agendaDetail/AgendaDetailTap.stories.tsx | 10 +++++----- .../agenda/agendaDetail/Participants.stories.tsx | 2 +- styles/agenda/Home/AgendaDeadLine.module.scss | 2 +- styles/agenda/agendaDetail/AgendaInfo.module.scss | 5 +++-- ...gendaTap.module.scss => AgendaTab.module.scss} | 2 +- .../AgendaAnnouncements.module.scss | 0 .../{taps => tabs}/AgendaConditions.module.scss | 10 ++++++---- .../{taps => tabs}/AgendaDescription.module.scss | 9 ++++++--- .../{taps => tabs}/AgendaParticipants.module.scss | 0 .../{taps => tabs}/AnnouncementItem.module.scss | 9 ++++++--- .../{taps => tabs}/Participant.module.scss | 4 ++-- .../{taps => tabs}/ParticipantTeam.module.scss | 6 +++--- .../ParticipantTeamList.module.scss | 2 +- .../{taps => tabs}/ParticipantsList.module.scss | 2 +- styles/agenda/button/Buttons.module.scss | 2 +- ...apButton.module.scss => TabButton.module.scss} | 6 +++--- styles/agenda/button/UploadBtn.module.scss | 4 ++-- styles/agenda/common.scss | 14 +++++--------- styles/agenda/utils/colorList.module.scss | 2 +- .../{taps => tabs}/agendaInfoTypes.ts | 0 .../{taps => tabs}/participantTeamTypes.ts | 0 .../{tapButtonTypes.ts => tabButtonTypes.ts} | 2 +- 39 files changed, 105 insertions(+), 100 deletions(-) create mode 100644 components/agenda/agendaDetail/AgendaTab.tsx delete mode 100644 components/agenda/agendaDetail/AgendaTap.tsx rename components/agenda/agendaDetail/{TapContent.tsx => TabContent.tsx} (73%) rename components/agenda/agendaDetail/{taps => tabs}/AgendaAnnouncements.tsx (89%) rename components/agenda/agendaDetail/{taps => tabs}/AgendaConditions.tsx (97%) rename components/agenda/agendaDetail/{taps => tabs}/AgendaDescription.tsx (97%) rename components/agenda/agendaDetail/{taps => tabs}/AgendaParticipants.tsx (92%) rename components/agenda/agendaDetail/{taps => tabs}/AnnouncementItem.tsx (95%) rename components/agenda/agendaDetail/{taps => tabs}/Participant.tsx (90%) rename components/agenda/agendaDetail/{taps => tabs}/ParticipantTeam.tsx (92%) rename components/agenda/agendaDetail/{taps => tabs}/ParticipantTeamList.tsx (96%) rename components/agenda/agendaDetail/{taps => tabs}/ParticipantsList.tsx (89%) create mode 100644 components/agenda/button/TabButton.tsx rename components/agenda/button/{TapButtons.tsx => TabButtons.tsx} (56%) delete mode 100644 components/agenda/button/TapButton.tsx rename styles/agenda/agendaDetail/{AgendaTap.module.scss => AgendaTab.module.scss} (91%) rename styles/agenda/agendaDetail/{taps => tabs}/AgendaAnnouncements.module.scss (100%) rename styles/agenda/agendaDetail/{taps => tabs}/AgendaConditions.module.scss (71%) rename styles/agenda/agendaDetail/{taps => tabs}/AgendaDescription.module.scss (68%) rename styles/agenda/agendaDetail/{taps => tabs}/AgendaParticipants.module.scss (100%) rename styles/agenda/agendaDetail/{taps => tabs}/AnnouncementItem.module.scss (72%) rename styles/agenda/agendaDetail/{taps => tabs}/Participant.module.scss (84%) rename styles/agenda/agendaDetail/{taps => tabs}/ParticipantTeam.module.scss (87%) rename styles/agenda/agendaDetail/{taps => tabs}/ParticipantTeamList.module.scss (85%) rename styles/agenda/agendaDetail/{taps => tabs}/ParticipantsList.module.scss (85%) rename styles/agenda/button/{TapButton.module.scss => TabButton.module.scss} (83%) rename types/agenda/agendaDetail/{taps => tabs}/agendaInfoTypes.ts (100%) rename types/agenda/agendaDetail/{taps => tabs}/participantTeamTypes.ts (100%) rename types/agenda/button/{tapButtonTypes.ts => tabButtonTypes.ts} (91%) diff --git a/components/agenda/agendaDetail/AgendaInfo.tsx b/components/agenda/agendaDetail/AgendaInfo.tsx index 04552d3c0..98e6e8010 100644 --- a/components/agenda/agendaDetail/AgendaInfo.tsx +++ b/components/agenda/agendaDetail/AgendaInfo.tsx @@ -1,7 +1,7 @@ import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes'; -import { ParticipantSummaryProps } from 'types/agenda/agendaDetail/taps/agendaInfoTypes'; +import { ParticipantSummaryProps } from 'types/agenda/agendaDetail/tabs/agendaInfoTypes'; import { ProfileDataProps } from 'types/agenda/profile/profileDataTypes'; import { AgendaLocation, diff --git a/components/agenda/agendaDetail/AgendaTab.tsx b/components/agenda/agendaDetail/AgendaTab.tsx new file mode 100644 index 000000000..32e89953c --- /dev/null +++ b/components/agenda/agendaDetail/AgendaTab.tsx @@ -0,0 +1,15 @@ +import { useState } from 'react'; +import { TABS, TabValues } from 'constants/agenda/agendaDetail/agendaTabs'; +import TabContent from 'components/agenda/agendaDetail/TabContent'; +import TabButtons from 'components/agenda/button/TabButtons'; + +export default function AgendaTab() { + const [activeTab, setActiveTab] = useState(TABS.DESCRIPTION); + + return ( + <> + + + + ); +} diff --git a/components/agenda/agendaDetail/AgendaTap.tsx b/components/agenda/agendaDetail/AgendaTap.tsx deleted file mode 100644 index eaa17e944..000000000 --- a/components/agenda/agendaDetail/AgendaTap.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useState } from 'react'; -import { TABS, TabValues } from 'constants/agenda/agendaDetail/agendaTabs'; -import TapContent from 'components/agenda/agendaDetail/TapContent'; -import TapButtons from 'components/agenda/button/TapButtons'; - -export default function AgendaTap() { - const [activeTab, setActiveTab] = useState(TABS.DESCRIPTION); - - return ( - <> - - - - ); -} diff --git a/components/agenda/agendaDetail/TapContent.tsx b/components/agenda/agendaDetail/TabContent.tsx similarity index 73% rename from components/agenda/agendaDetail/TapContent.tsx rename to components/agenda/agendaDetail/TabContent.tsx index a79b76e74..8b1eab87a 100644 --- a/components/agenda/agendaDetail/TapContent.tsx +++ b/components/agenda/agendaDetail/TabContent.tsx @@ -1,9 +1,9 @@ -import { TabContentProps } from 'types/agenda/button/tapButtonTypes'; -import AgendaAnnouncements from 'components/agenda/agendaDetail/taps/AgendaAnnouncements'; -import AgendaConditions from 'components/agenda/agendaDetail/taps/AgendaConditions'; -import AgendaDescription from 'components/agenda/agendaDetail/taps/AgendaDescription'; -import AgendaParticipants from 'components/agenda/agendaDetail/taps/AgendaParticipants'; -import styles from 'styles/agenda/agendaDetail/AgendaTap.module.scss'; +import { TabContentProps } from 'types/agenda/button/tabButtonTypes'; +import AgendaAnnouncements from 'components/agenda/agendaDetail/tabs/AgendaAnnouncements'; +import AgendaConditions from 'components/agenda/agendaDetail/tabs/AgendaConditions'; +import AgendaDescription from 'components/agenda/agendaDetail/tabs/AgendaDescription'; +import AgendaParticipants from 'components/agenda/agendaDetail/tabs/AgendaParticipants'; +import styles from 'styles/agenda/agendaDetail/AgendaTab.module.scss'; export default function TabContent({ activeTab, tabs }: TabContentProps) { const renderContent = () => { diff --git a/components/agenda/agendaDetail/taps/AgendaAnnouncements.tsx b/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx similarity index 89% rename from components/agenda/agendaDetail/taps/AgendaAnnouncements.tsx rename to components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx index 9905c120b..d02f644d0 100644 --- a/components/agenda/agendaDetail/taps/AgendaAnnouncements.tsx +++ b/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { AnnouncementProps } from 'types/agenda/agendaDetail/announcementTypes'; -import AnnouncementItem from 'components/agenda/agendaDetail/taps/AnnouncementItem'; -import styles from 'styles/agenda/agendaDetail/taps/AgendaAnnouncements.module.scss'; +import AnnouncementItem from 'components/agenda/agendaDetail/tabs/AnnouncementItem'; +import styles from 'styles/agenda/agendaDetail/tabs/AgendaAnnouncements.module.scss'; const mockData = [ { diff --git a/components/agenda/agendaDetail/taps/AgendaConditions.tsx b/components/agenda/agendaDetail/tabs/AgendaConditions.tsx similarity index 97% rename from components/agenda/agendaDetail/taps/AgendaConditions.tsx rename to components/agenda/agendaDetail/tabs/AgendaConditions.tsx index c8a2f08d8..8ca4d0172 100644 --- a/components/agenda/agendaDetail/taps/AgendaConditions.tsx +++ b/components/agenda/agendaDetail/tabs/AgendaConditions.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes'; import { AgendaStatus } from 'constants/agenda/agenda'; -import styles from 'styles/agenda/agendaDetail/taps/AgendaConditions.module.scss'; +import styles from 'styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss'; const mockData: AgendaDataProps = { agendaTitle: '아 기다리고기다리던대회', diff --git a/components/agenda/agendaDetail/taps/AgendaDescription.tsx b/components/agenda/agendaDetail/tabs/AgendaDescription.tsx similarity index 97% rename from components/agenda/agendaDetail/taps/AgendaDescription.tsx rename to components/agenda/agendaDetail/tabs/AgendaDescription.tsx index 935e078bb..cbd256191 100644 --- a/components/agenda/agendaDetail/taps/AgendaDescription.tsx +++ b/components/agenda/agendaDetail/tabs/AgendaDescription.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes'; import { AgendaStatus } from 'constants/agenda/agenda'; import { formatDate } from 'components/agenda/utils/formatDate'; -import styles from 'styles/agenda/agendaDetail/taps/AgendaDescription.module.scss'; +import styles from 'styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss'; const mockData: AgendaDataProps = { agendaTitle: '아 기다리고기다리던대회', diff --git a/components/agenda/agendaDetail/taps/AgendaParticipants.tsx b/components/agenda/agendaDetail/tabs/AgendaParticipants.tsx similarity index 92% rename from components/agenda/agendaDetail/taps/AgendaParticipants.tsx rename to components/agenda/agendaDetail/tabs/AgendaParticipants.tsx index bc117a213..1ab1477e4 100644 --- a/components/agenda/agendaDetail/taps/AgendaParticipants.tsx +++ b/components/agenda/agendaDetail/tabs/AgendaParticipants.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { AgendaStatus } from 'constants/agenda/agenda'; -import ParticipantsList from 'components/agenda/agendaDetail/taps/ParticipantsList'; -import styles from 'styles/agenda/agendaDetail/taps/AgendaParticipants.module.scss'; +import ParticipantsList from 'components/agenda/agendaDetail/tabs/ParticipantsList'; +import styles from 'styles/agenda/agendaDetail/tabs/AgendaParticipants.module.scss'; import ParticipantTeamList from './ParticipantTeamList'; const mockData = { diff --git a/components/agenda/agendaDetail/taps/AnnouncementItem.tsx b/components/agenda/agendaDetail/tabs/AnnouncementItem.tsx similarity index 95% rename from components/agenda/agendaDetail/taps/AnnouncementItem.tsx rename to components/agenda/agendaDetail/tabs/AnnouncementItem.tsx index 6e58bef63..31403a49d 100644 --- a/components/agenda/agendaDetail/taps/AnnouncementItem.tsx +++ b/components/agenda/agendaDetail/tabs/AnnouncementItem.tsx @@ -3,7 +3,7 @@ import { AnnouncementProps } from 'types/agenda/agendaDetail/announcementTypes'; import { formatDate } from 'components/agenda/utils/formatDate'; import DownArrow from 'public/image/agenda/ChevronDown.svg'; import RightArrow from 'public/image/agenda/ChevronRight.svg'; -import styles from 'styles/agenda/agendaDetail/taps/AnnouncementItem.module.scss'; +import styles from 'styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss'; export default function AnnouncementItem({ title, diff --git a/components/agenda/agendaDetail/taps/Participant.tsx b/components/agenda/agendaDetail/tabs/Participant.tsx similarity index 90% rename from components/agenda/agendaDetail/taps/Participant.tsx rename to components/agenda/agendaDetail/tabs/Participant.tsx index 13ac1ff0f..0a02bd152 100644 --- a/components/agenda/agendaDetail/taps/Participant.tsx +++ b/components/agenda/agendaDetail/tabs/Participant.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { colorMapping, iconMapping } from 'types/agenda/utils/colorList'; import { Coalition } from 'constants/agenda/agenda'; -import styles from 'styles/agenda/agendaDetail/taps/Participant.module.scss'; +import styles from 'styles/agenda/agendaDetail/tabs/Participant.module.scss'; interface ParticipantProps { name: string; diff --git a/components/agenda/agendaDetail/taps/ParticipantTeam.tsx b/components/agenda/agendaDetail/tabs/ParticipantTeam.tsx similarity index 92% rename from components/agenda/agendaDetail/taps/ParticipantTeam.tsx rename to components/agenda/agendaDetail/tabs/ParticipantTeam.tsx index 7d8cb83b3..1630da20a 100644 --- a/components/agenda/agendaDetail/taps/ParticipantTeam.tsx +++ b/components/agenda/agendaDetail/tabs/ParticipantTeam.tsx @@ -3,11 +3,11 @@ import { useRouter } from 'next/router'; import { ParticipantTeamProps, PeopleCount, -} from 'types/agenda/agendaDetail/taps/participantTeamTypes'; +} from 'types/agenda/agendaDetail/tabs/participantTeamTypes'; import { Coalition } from 'constants/agenda/agenda'; import ColorList from 'components/agenda/utils/ColorList'; import TeamLeaderIcon from 'public/image/agenda/rock-and-roll-hand.svg'; -import styles from 'styles/agenda/agendaDetail/taps/ParticipantTeam.module.scss'; +import styles from 'styles/agenda/agendaDetail/tabs/ParticipantTeam.module.scss'; const peopleCount: PeopleCount = { [Coalition.GUN]: 2, diff --git a/components/agenda/agendaDetail/taps/ParticipantTeamList.tsx b/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx similarity index 96% rename from components/agenda/agendaDetail/taps/ParticipantTeamList.tsx rename to components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx index e2c1d6cb4..f59c3f891 100644 --- a/components/agenda/agendaDetail/taps/ParticipantTeamList.tsx +++ b/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx @@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'; import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes'; import { teamDataProps } from 'types/agenda/team/teamDataTypes'; import { AgendaStatus } from 'constants/agenda/agenda'; -import ParticipantTeam from 'components/agenda/agendaDetail/taps/ParticipantTeam'; -import styles from 'styles/agenda/agendaDetail/taps/ParticipantTeamList.module.scss'; +import ParticipantTeam from 'components/agenda/agendaDetail/tabs/ParticipantTeam'; +import styles from 'styles/agenda/agendaDetail/tabs/ParticipantTeamList.module.scss'; const agendaMockData: AgendaDataProps = { agendaTitle: '아 기다리고기다리던대회', diff --git a/components/agenda/agendaDetail/taps/ParticipantsList.tsx b/components/agenda/agendaDetail/tabs/ParticipantsList.tsx similarity index 89% rename from components/agenda/agendaDetail/taps/ParticipantsList.tsx rename to components/agenda/agendaDetail/tabs/ParticipantsList.tsx index dcc712cd9..d46688351 100644 --- a/components/agenda/agendaDetail/taps/ParticipantsList.tsx +++ b/components/agenda/agendaDetail/tabs/ParticipantsList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Coalition } from 'constants/agenda/agenda'; -import Participant from 'components/agenda/agendaDetail/taps/Participant'; -import styles from 'styles/agenda/agendaDetail/taps/ParticipantsList.module.scss'; +import Participant from 'components/agenda/agendaDetail/tabs/Participant'; +import styles from 'styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss'; export default function ParticipantsList() { const curPeople = 1; diff --git a/components/agenda/button/TabButton.tsx b/components/agenda/button/TabButton.tsx new file mode 100644 index 000000000..5550643ef --- /dev/null +++ b/components/agenda/button/TabButton.tsx @@ -0,0 +1,13 @@ +import { TabButtonProps } from 'types/agenda/button/tabButtonTypes'; +import styles from 'styles/agenda/button/TabButton.module.scss'; + +export default function TabButton({ text, isActive, onClick }: TabButtonProps) { + return ( + + ); +} diff --git a/components/agenda/button/TapButtons.tsx b/components/agenda/button/TabButtons.tsx similarity index 56% rename from components/agenda/button/TapButtons.tsx rename to components/agenda/button/TabButtons.tsx index de0a1bf98..2872e64e0 100644 --- a/components/agenda/button/TapButtons.tsx +++ b/components/agenda/button/TabButtons.tsx @@ -1,6 +1,6 @@ -import { TabButtonsProps } from 'types/agenda/button/tapButtonTypes'; -import TapButton from 'components/agenda/button/TapButton'; -import styles from 'styles/agenda/agendaDetail/AgendaTap.module.scss'; +import { TabButtonsProps } from 'types/agenda/button/tabButtonTypes'; +import TabButton from 'components/agenda/button/TabButton'; +import styles from 'styles/agenda/agendaDetail/AgendaTab.module.scss'; export default function TabButtons({ tabs, @@ -8,9 +8,9 @@ export default function TabButtons({ onTabClick, }: TabButtonsProps) { return ( -
+
{Object.values(tabs).map((tab) => ( - - {text} - - ); -} diff --git a/pages/agenda/[agendaKey]/index.tsx b/pages/agenda/[agendaKey]/index.tsx index 40f20a907..654dae58b 100644 --- a/pages/agenda/[agendaKey]/index.tsx +++ b/pages/agenda/[agendaKey]/index.tsx @@ -1,7 +1,7 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import AgendaInfo from 'components/agenda/agendaDetail/AgendaInfo'; -import AgendaTap from 'components/agenda/agendaDetail/AgendaTap'; +import AgendaTab from 'components/agenda/agendaDetail/AgendaTab'; import styles from 'styles/agenda/agendaDetail/AgendaDetail.module.scss'; export default function AgendaDetail() { @@ -13,7 +13,7 @@ export default function AgendaDetail() { <>
- +
1번 팀
diff --git a/stories/agenda/agendaDetail/AgendaDetailTap.stories.tsx b/stories/agenda/agendaDetail/AgendaDetailTap.stories.tsx index 7cf250b4a..f8093495b 100644 --- a/stories/agenda/agendaDetail/AgendaDetailTap.stories.tsx +++ b/stories/agenda/agendaDetail/AgendaDetailTap.stories.tsx @@ -1,16 +1,16 @@ -// src/components/agenda/agendaDetail/AgendaTap.stories.js +// src/components/agenda/agendaDetail/AgendaTab.stories.js import { action } from '@storybook/addon-actions'; import React from 'react'; import { TABS } from 'constants/agenda/agendaDetail/agendaTabs'; -import AgendaTap from 'components/agenda/agendaDetail/AgendaTap'; +import AgendaTab from 'components/agenda/agendaDetail/AgendaTab'; export default { - title: 'Agenda/AgendaTap', - component: AgendaTap, + title: 'Agenda/AgendaTab', + component: AgendaTab, }; -const Template = (args) => ; +const Template = (args) => ; export const Default = Template.bind({}); Default.args = {}; diff --git a/stories/agenda/agendaDetail/Participants.stories.tsx b/stories/agenda/agendaDetail/Participants.stories.tsx index ea1fba410..5ca93f019 100644 --- a/stories/agenda/agendaDetail/Participants.stories.tsx +++ b/stories/agenda/agendaDetail/Participants.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import React from 'react'; import { Coalition } from 'constants/agenda/agenda'; -import Participant from 'components/agenda/agendaDetail/taps/Participant'; +import Participant from 'components/agenda/agendaDetail/tabs/Participant'; interface ParticipantProps { name: string; diff --git a/styles/agenda/Home/AgendaDeadLine.module.scss b/styles/agenda/Home/AgendaDeadLine.module.scss index 8bae5a70a..35f74d960 100644 --- a/styles/agenda/Home/AgendaDeadLine.module.scss +++ b/styles/agenda/Home/AgendaDeadLine.module.scss @@ -19,7 +19,7 @@ } .agendaDeadLine { - @include text(tap); + @include text('tab'); color: var(--color-text-reverse); } } diff --git a/styles/agenda/agendaDetail/AgendaInfo.module.scss b/styles/agenda/agendaDetail/AgendaInfo.module.scss index 3c7ad722e..4cdf1dbe8 100644 --- a/styles/agenda/agendaDetail/AgendaInfo.module.scss +++ b/styles/agenda/agendaDetail/AgendaInfo.module.scss @@ -40,7 +40,7 @@ $info-gradient: linear-gradient( justify-content: space-between; align-items: center; h2 { - @include boldTitle; + @include text('agenda-title'); } } @@ -58,5 +58,6 @@ $info-gradient: linear-gradient( } .organizerWrap { - @include regularTextFont(big); + @include text('default'); // medium + // @include regularTextFont(big); // } diff --git a/styles/agenda/agendaDetail/AgendaTap.module.scss b/styles/agenda/agendaDetail/AgendaTab.module.scss similarity index 91% rename from styles/agenda/agendaDetail/AgendaTap.module.scss rename to styles/agenda/agendaDetail/AgendaTab.module.scss index 5ea8bc991..66bdf592e 100644 --- a/styles/agenda/agendaDetail/AgendaTap.module.scss +++ b/styles/agenda/agendaDetail/AgendaTab.module.scss @@ -5,7 +5,7 @@ width: 100%; } -.tapButtonList { +.tabButtonList { display: inline-flex; width: 100%; padding: 1rem 0.5rem; diff --git a/styles/agenda/agendaDetail/taps/AgendaAnnouncements.module.scss b/styles/agenda/agendaDetail/tabs/AgendaAnnouncements.module.scss similarity index 100% rename from styles/agenda/agendaDetail/taps/AgendaAnnouncements.module.scss rename to styles/agenda/agendaDetail/tabs/AgendaAnnouncements.module.scss diff --git a/styles/agenda/agendaDetail/taps/AgendaConditions.module.scss b/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss similarity index 71% rename from styles/agenda/agendaDetail/taps/AgendaConditions.module.scss rename to styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss index e98e11658..f115dfb80 100644 --- a/styles/agenda/agendaDetail/taps/AgendaConditions.module.scss +++ b/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss @@ -14,11 +14,13 @@ } .conditionTitle { - @include boldTextFont(big); + @include text('sub-title'); + // @include boldTextFont(big); } .conditionWarp { - @include regularTextFont(medium); + // @include regularTextFont(medium); + @include text('default'); display: flex; flex-direction: column; gap: 1rem; @@ -31,8 +33,8 @@ flex: 1; .boldText { - @include boldTextFont(medium); - + // @include boldTextFont(medium); + @include text('tab'); width: 3rem; text-align: center; } diff --git a/styles/agenda/agendaDetail/taps/AgendaDescription.module.scss b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss similarity index 68% rename from styles/agenda/agendaDetail/taps/AgendaDescription.module.scss rename to styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss index f881ba91c..a721808df 100644 --- a/styles/agenda/agendaDetail/taps/AgendaDescription.module.scss +++ b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss @@ -14,11 +14,13 @@ } .descriptionTitle { - @include boldTextFont(big); + @include text('sub-title'); + // @include boldTextFont(big); } .descriptionWarp { - @include regularTextFont(medium); + // @include regularTextFont(medium); + @include text('default'); display: flex; flex-direction: column; gap: 1rem; @@ -29,6 +31,7 @@ flex-direction: column; gap: 0.5rem; h3 { - @include boldTextFont(medium); + // @include boldTextFont(medium); + @include text('tab'); } } diff --git a/styles/agenda/agendaDetail/taps/AgendaParticipants.module.scss b/styles/agenda/agendaDetail/tabs/AgendaParticipants.module.scss similarity index 100% rename from styles/agenda/agendaDetail/taps/AgendaParticipants.module.scss rename to styles/agenda/agendaDetail/tabs/AgendaParticipants.module.scss diff --git a/styles/agenda/agendaDetail/taps/AnnouncementItem.module.scss b/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss similarity index 72% rename from styles/agenda/agendaDetail/taps/AnnouncementItem.module.scss rename to styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss index b530419e7..836c5bf7c 100644 --- a/styles/agenda/agendaDetail/taps/AnnouncementItem.module.scss +++ b/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss @@ -33,12 +33,15 @@ } .announcementTitle { - @include boldTextFont(big); + @include text('sub-title'); + // @include boldTextFont(big); } .announcementDate { - @include regularTextFont(medium); + @include text('default'); + // @include regularTextFont(medium); } .announcementContent { - @include regularTextFont(medium); + @include text('default'); + // @include regularTextFont(medium); } diff --git a/styles/agenda/agendaDetail/taps/Participant.module.scss b/styles/agenda/agendaDetail/tabs/Participant.module.scss similarity index 84% rename from styles/agenda/agendaDetail/taps/Participant.module.scss rename to styles/agenda/agendaDetail/tabs/Participant.module.scss index ac9a84570..ea7d4aab7 100644 --- a/styles/agenda/agendaDetail/taps/Participant.module.scss +++ b/styles/agenda/agendaDetail/tabs/Participant.module.scss @@ -8,7 +8,7 @@ flex: 1 0 0; padding: 1rem 0.6rem 1rem 1rem; - border-radius: $medium-radius; + border-radius: $radius-medium; box-shadow: var(--box-shadow-bottom); align-items: center; } @@ -22,5 +22,5 @@ } .participantcontent { - @include boldTextFont(medium); + @include text('tab'); } diff --git a/styles/agenda/agendaDetail/taps/ParticipantTeam.module.scss b/styles/agenda/agendaDetail/tabs/ParticipantTeam.module.scss similarity index 87% rename from styles/agenda/agendaDetail/taps/ParticipantTeam.module.scss rename to styles/agenda/agendaDetail/tabs/ParticipantTeam.module.scss index 6868def91..e4ab1acba 100644 --- a/styles/agenda/agendaDetail/taps/ParticipantTeam.module.scss +++ b/styles/agenda/agendaDetail/tabs/ParticipantTeam.module.scss @@ -31,7 +31,7 @@ } .teamTitle { - @include boldTextFont(big); + @include text('sub-title'); } .LeaderIcon { @@ -46,12 +46,12 @@ align-self: stretch; p { - @include regularTextFont(medium); + @include text('default'); } } .headCount { - @include headCountText(); + @include text('head-count'); } .coalition { diff --git a/styles/agenda/agendaDetail/taps/ParticipantTeamList.module.scss b/styles/agenda/agendaDetail/tabs/ParticipantTeamList.module.scss similarity index 85% rename from styles/agenda/agendaDetail/taps/ParticipantTeamList.module.scss rename to styles/agenda/agendaDetail/tabs/ParticipantTeamList.module.scss index 2ac3ae6fd..37f215df1 100644 --- a/styles/agenda/agendaDetail/taps/ParticipantTeamList.module.scss +++ b/styles/agenda/agendaDetail/tabs/ParticipantTeamList.module.scss @@ -10,5 +10,5 @@ } .participantsTitle { - @include boldTextFont(big); + @include text('sub-title'); } diff --git a/styles/agenda/agendaDetail/taps/ParticipantsList.module.scss b/styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss similarity index 85% rename from styles/agenda/agendaDetail/taps/ParticipantsList.module.scss rename to styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss index 4c4151297..b8a70082c 100644 --- a/styles/agenda/agendaDetail/taps/ParticipantsList.module.scss +++ b/styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss @@ -8,5 +8,5 @@ } .participantsTitle { - @include boldTextFont(big); + @include text('sub-title'); } diff --git a/styles/agenda/button/Buttons.module.scss b/styles/agenda/button/Buttons.module.scss index d47f46e9a..f3742ad07 100644 --- a/styles/agenda/button/Buttons.module.scss +++ b/styles/agenda/button/Buttons.module.scss @@ -10,7 +10,7 @@ width: 2rem; height: 2rem; padding: 1rem; - font-size: $medium-font; + font-size: $font-size-s; border: none; border-color: none; border-style: none; diff --git a/styles/agenda/button/TapButton.module.scss b/styles/agenda/button/TabButton.module.scss similarity index 83% rename from styles/agenda/button/TapButton.module.scss rename to styles/agenda/button/TabButton.module.scss index 467da4272..241e8075f 100644 --- a/styles/agenda/button/TapButton.module.scss +++ b/styles/agenda/button/TabButton.module.scss @@ -1,14 +1,14 @@ @import 'styles/agenda/common.scss'; -.TapButton { +.TabButton { display: flex; padding: 0.3rem 0.6rem; - @include boldTextFont(medium); + @include text('tab'); cursor: pointer; background: var(--box-bg-1-light); border: var(--border-light); - border-radius: $medium-radius; + border-radius: $radius-medium; box-shadow: var(--box-shadow-light); diff --git a/styles/agenda/button/UploadBtn.module.scss b/styles/agenda/button/UploadBtn.module.scss index ce0a1fbd1..24966854e 100644 --- a/styles/agenda/button/UploadBtn.module.scss +++ b/styles/agenda/button/UploadBtn.module.scss @@ -8,13 +8,13 @@ background: var(--box-bg-1-light); - border-radius: $medium-radius; + border-radius: $radius-medium; box-shadow: var(--box-shadow-bottom); justify-content: center; align-items: center; gap: 0.3rem; span { - @include boldTextFont(medium); + @include text('tab'); } } diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index d4ddce9af..a4db97935 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -133,14 +133,6 @@ $font-size-xs: 0.8rem; // $small-font } } -@mixin boldTitle { - // main-menu - margin: 1rem 0; - font-size: $font-size-xl; - font-weight: 700; - color: var(--default-font); -} - @mixin title { margin: 1rem 0; font-size: $font-size-xl; @@ -183,7 +175,7 @@ $font-size-xs: 0.8rem; // $small-font // 아젠다 리스트 아이템 - 타이틀 font-family: $font-text-bold; font-size: $font-size-m; - } @else if ($type == 'tap') { + } @else if ($type == 'tab') { font-family: $font-text-bold; font-size: $font-size-s; } @else if ($type == 'default') { @@ -194,5 +186,9 @@ $font-size-xs: 0.8rem; // $small-font // 제목 뒤에 붙는 설명 font-family: $font-text-light; font-size: $font-size-xs; + } @else if ($type == 'agenda-title') { + font-family: $font-text-bold; + font-size: $font-size-xl; + font-weight: 700; } } diff --git a/styles/agenda/utils/colorList.module.scss b/styles/agenda/utils/colorList.module.scss index 5f8baa934..b266d9d7c 100644 --- a/styles/agenda/utils/colorList.module.scss +++ b/styles/agenda/utils/colorList.module.scss @@ -13,5 +13,5 @@ .colorBar { width: 100%; height: 1.2rem; - border-radius: $medium-radius; + border-radius: $radius-medium; } diff --git a/types/agenda/agendaDetail/taps/agendaInfoTypes.ts b/types/agenda/agendaDetail/tabs/agendaInfoTypes.ts similarity index 100% rename from types/agenda/agendaDetail/taps/agendaInfoTypes.ts rename to types/agenda/agendaDetail/tabs/agendaInfoTypes.ts diff --git a/types/agenda/agendaDetail/taps/participantTeamTypes.ts b/types/agenda/agendaDetail/tabs/participantTeamTypes.ts similarity index 100% rename from types/agenda/agendaDetail/taps/participantTeamTypes.ts rename to types/agenda/agendaDetail/tabs/participantTeamTypes.ts diff --git a/types/agenda/button/tapButtonTypes.ts b/types/agenda/button/tabButtonTypes.ts similarity index 91% rename from types/agenda/button/tapButtonTypes.ts rename to types/agenda/button/tabButtonTypes.ts index 83693885b..6a28cea71 100644 --- a/types/agenda/button/tapButtonTypes.ts +++ b/types/agenda/button/tabButtonTypes.ts @@ -1,6 +1,6 @@ import { TabValues } from 'constants/agenda/agendaDetail/agendaTabs'; -export interface TapButtonProps { +export interface TabButtonProps { text: string; isActive?: boolean; onClick: () => void; From 610784df7f19fd84428a966d6d59f1c07229d63f Mon Sep 17 00:00:00 2001 From: siwolee Date: Wed, 24 Jul 2024 18:08:24 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80?= =?UTF-8?q?=20=EC=95=8A=EB=8A=94=20css=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tmp/style.module.scss | 2 +- .../agenda/Form/AgendaResultForm.module.scss | 4 +- styles/agenda/Form/Form.module.scss | 7 ++- styles/agenda/Input/CheckboxInput.module.scss | 13 ++---- .../agenda/Input/DescriptionInput.module.scss | 7 +-- styles/agenda/Input/Input.module.scss | 9 ++-- .../agendaDetail/AgendaInfo.module.scss | 1 - .../tabs/AgendaConditions.module.scss | 3 -- .../tabs/AgendaDescription.module.scss | 3 -- .../tabs/AnnouncementItem.module.scss | 3 -- .../button/SubmitInputButton.module.scss | 2 +- styles/agenda/common.scss | 43 ++----------------- styles/agenda/pages/CreateAgenda.module.scss | 6 +-- styles/agenda/pages/create-team.module.scss | 5 +-- 14 files changed, 24 insertions(+), 84 deletions(-) diff --git a/components/tmp/style.module.scss b/components/tmp/style.module.scss index 6e7b0af48..ad8c85484 100644 --- a/components/tmp/style.module.scss +++ b/components/tmp/style.module.scss @@ -13,7 +13,7 @@ color: red; border: var(--default-border); box-shadow: var(--default-box-shadow); - border-radius: $small-radius; + border-radius: $radius-small; } .test_box { diff --git a/styles/agenda/Form/AgendaResultForm.module.scss b/styles/agenda/Form/AgendaResultForm.module.scss index 3860365b5..2de8472e8 100644 --- a/styles/agenda/Form/AgendaResultForm.module.scss +++ b/styles/agenda/Form/AgendaResultForm.module.scss @@ -10,11 +10,11 @@ } .title { - @include title; + @include text('title'); } .description { - @include description; + @include text('description'); } .awardUl { diff --git a/styles/agenda/Form/Form.module.scss b/styles/agenda/Form/Form.module.scss index 9d7cef11e..8bc8e2e00 100644 --- a/styles/agenda/Form/Form.module.scss +++ b/styles/agenda/Form/Form.module.scss @@ -16,11 +16,11 @@ } .title { - @include title; + @include text('title'); } .description { - @include description; + @include text('description'); } %item-container { @@ -69,9 +69,8 @@ gap: 0.5rem; } .label { + @include text('label'); margin: 2rem 0 0.5rem 0.5rem; - font-size: $medium-font; - font-weight: bold; } .highlight { color: var(--highlight-violet); diff --git a/styles/agenda/Input/CheckboxInput.module.scss b/styles/agenda/Input/CheckboxInput.module.scss index e322c46f8..6d999b92a 100644 --- a/styles/agenda/Input/CheckboxInput.module.scss +++ b/styles/agenda/Input/CheckboxInput.module.scss @@ -14,13 +14,13 @@ display: inline-block; /* 체크박스 만들기 */ - width: $medium-font; - height: $medium-font; + width: $font-size-m; + height: $font-size-m; vertical-align: middle; cursor: pointer; user-select: none; /* 드래그 금지 */ border: 1px solid #000; - border-radius: $small-radius; + border-radius: $radius-small; } .checkbox:checked { /* 체크되었을 때 */ @@ -30,10 +30,3 @@ .checkBoxInput { display: none; } - -// .label { -// padding: 0 0 0 0.5rem; -// // margin-bottom: 10px; -// font-size: $medium-font; -// font-weight: bold; -// } diff --git a/styles/agenda/Input/DescriptionInput.module.scss b/styles/agenda/Input/DescriptionInput.module.scss index 0312f5e8c..4d9ef2de3 100644 --- a/styles/agenda/Input/DescriptionInput.module.scss +++ b/styles/agenda/Input/DescriptionInput.module.scss @@ -1,15 +1,12 @@ @import './Input.module.scss'; .container { - // padding: 1rem 0.5rem; margin: 1rem 0; - // font-family: $font-default; } .description_input { + // 확인필요 + @include container(1); width: calc(100% - 1rem); height: 4rem; - // margin-left: 0.5rem; - border: var(--default-border); - border-radius: $medium-radius; } diff --git a/styles/agenda/Input/Input.module.scss b/styles/agenda/Input/Input.module.scss index 02cb95749..34a74a2a2 100644 --- a/styles/agenda/Input/Input.module.scss +++ b/styles/agenda/Input/Input.module.scss @@ -3,17 +3,16 @@ .container { display: flex; flex-direction: column; - font-family: $font-default; gap: 1rem; justify-content: center; - // width: max-content; + @include text('default'); } .input { width: calc(100% - 1rem); padding: 0.5rem; // margin: 0 0.5rem; background: none; - // border-radius: $small-radius; + // border-radius: $radius-small; border: none; border-bottom: var(--default-border); -webkit-appearance: none; @@ -25,8 +24,6 @@ } .label { + @include text('label'); padding: 0 0 0 0.5rem; - // margin-bottom: 10px; - font-size: $medium-font; - font-weight: bold; } diff --git a/styles/agenda/agendaDetail/AgendaInfo.module.scss b/styles/agenda/agendaDetail/AgendaInfo.module.scss index 4cdf1dbe8..8e70ffc12 100644 --- a/styles/agenda/agendaDetail/AgendaInfo.module.scss +++ b/styles/agenda/agendaDetail/AgendaInfo.module.scss @@ -59,5 +59,4 @@ $info-gradient: linear-gradient( .organizerWrap { @include text('default'); // medium - // @include regularTextFont(big); // } diff --git a/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss b/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss index f115dfb80..b943e271d 100644 --- a/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss +++ b/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss @@ -15,11 +15,9 @@ .conditionTitle { @include text('sub-title'); - // @include boldTextFont(big); } .conditionWarp { - // @include regularTextFont(medium); @include text('default'); display: flex; flex-direction: column; @@ -33,7 +31,6 @@ flex: 1; .boldText { - // @include boldTextFont(medium); @include text('tab'); width: 3rem; text-align: center; diff --git a/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss index a721808df..6c71196a6 100644 --- a/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss +++ b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss @@ -15,11 +15,9 @@ .descriptionTitle { @include text('sub-title'); - // @include boldTextFont(big); } .descriptionWarp { - // @include regularTextFont(medium); @include text('default'); display: flex; flex-direction: column; @@ -31,7 +29,6 @@ flex-direction: column; gap: 0.5rem; h3 { - // @include boldTextFont(medium); @include text('tab'); } } diff --git a/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss b/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss index 836c5bf7c..80d56bd87 100644 --- a/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss +++ b/styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss @@ -34,14 +34,11 @@ .announcementTitle { @include text('sub-title'); - // @include boldTextFont(big); } .announcementDate { @include text('default'); - // @include regularTextFont(medium); } .announcementContent { @include text('default'); - // @include regularTextFont(medium); } diff --git a/styles/agenda/button/SubmitInputButton.module.scss b/styles/agenda/button/SubmitInputButton.module.scss index 43d41fef0..ba3c490f6 100644 --- a/styles/agenda/button/SubmitInputButton.module.scss +++ b/styles/agenda/button/SubmitInputButton.module.scss @@ -14,5 +14,5 @@ vertical-align: middle; cursor: pointer; user-select: none; /* 드래그 금지 */ - border-radius: $small-radius; + border-radius: $radius-small; } diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index a4db97935..79e2bb0fd 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -24,33 +24,6 @@ $color-placeholder: #b4a5b5; $bg-color-deadline-red: rgba(255, 75, 75, 0.8); $agenda-list-bg: linear-gradient(180deg, #fff 65px, rgba(0, 0, 0, 0) 100%), url('/image/agenda/42.jpg') lightgray 50% / cover no-repeat; -// DELETE SOON -// @mixin titleFont { -// font-family: $font-menu; -// font-size: $font-size-xxl; -// font-weight: 400; -// } -// 삭제 예정 -// @mixin subTitleFont { -// font-family: $font-family-menu; -// font-size: $font-size-l; -// font-weight: 300; -// } -// 삭제 예정 -// @mixin lightTextFont($size) { -// font-family: $light-text-font; -// font-size: font-size($size); -// } -// 삭제 예정 -// @mixin regularTextFont($size) { -// font-family: $regular-text-font; -// font-size: font-size($size); -// } -// 삭제 예정 -// @mixin boldTextFont($size) { -// font-family: $bold-text-font; -// font-size: font-size($size); -// } // font-family $font-text-bold: '11StreetGothicBold'; @@ -133,18 +106,6 @@ $font-size-xs: 0.8rem; // $small-font } } -@mixin title { - margin: 1rem 0; - font-size: $font-size-xl; - font-weight: 500; - color: var(--default-font); -} - -@mixin description { - font-size: $font-size-xs; - font-weight: 300; -} - @mixin text($type) { color: var(--color-text); @if ($type == 'head-count') { @@ -190,5 +151,9 @@ $font-size-xs: 0.8rem; // $small-font font-family: $font-text-bold; font-size: $font-size-xl; font-weight: 700; + } @else if ($type == 'label') { + // form 내부 label + font-size: $font-size-s; + font-weight: bold; } } diff --git a/styles/agenda/pages/CreateAgenda.module.scss b/styles/agenda/pages/CreateAgenda.module.scss index e8045616f..2c048132c 100644 --- a/styles/agenda/pages/CreateAgenda.module.scss +++ b/styles/agenda/pages/CreateAgenda.module.scss @@ -3,7 +3,7 @@ .container { @include container(1); padding: 0.5rem; - font-family: $font-default; + @include text('default'); text-align: left; } @@ -12,9 +12,9 @@ } .title { - @include title; + @include text('title'); } .description { - @include description; + @include text('description'); } diff --git a/styles/agenda/pages/create-team.module.scss b/styles/agenda/pages/create-team.module.scss index 74f2cb93d..7b7cc4146 100644 --- a/styles/agenda/pages/create-team.module.scss +++ b/styles/agenda/pages/create-team.module.scss @@ -3,11 +3,10 @@ .container { @include container(1); padding: 1rem 0.5rem; - font-family: $font-default; + @include text('default'); } .title { + @include text('title'); margin: 0 0 1rem; - font-size: 1.5rem; - font-weight: 500; } From 2895d20ba3353eec311ef6e64d4a9c8db5674637 Mon Sep 17 00:00:00 2001 From: siwolee Date: Thu, 25 Jul 2024 11:08:58 +0900 Subject: [PATCH 6/9] chore: minor css types --- styles/agenda/Input/CheckboxInput.module.scss | 2 -- styles/agenda/Input/DescriptionInput.module.scss | 3 +-- styles/agenda/common.scss | 7 +++++++ 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/styles/agenda/Input/CheckboxInput.module.scss b/styles/agenda/Input/CheckboxInput.module.scss index 6d999b92a..213e8e424 100644 --- a/styles/agenda/Input/CheckboxInput.module.scss +++ b/styles/agenda/Input/CheckboxInput.module.scss @@ -6,8 +6,6 @@ } .checkbox { - // width: 1.3rem; - // height: 1.3rem; justify-content: left; align-items: center; gap: 2rem; diff --git a/styles/agenda/Input/DescriptionInput.module.scss b/styles/agenda/Input/DescriptionInput.module.scss index 4d9ef2de3..37b297f27 100644 --- a/styles/agenda/Input/DescriptionInput.module.scss +++ b/styles/agenda/Input/DescriptionInput.module.scss @@ -6,7 +6,6 @@ .description_input { // 확인필요 - @include container(1); - width: calc(100% - 1rem); + @include inner-container; height: 4rem; } diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index 79e2bb0fd..60f656b39 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -66,6 +66,13 @@ $font-size-xs: 0.8rem; // $small-font } } +@mixin inner-container { + display: flex; + width: 100%; + border: var(--default-border); + border-radius: $radius-medium; +} + // 42GG logo @mixin logoText($size, $color) { font-family: $font-logo; From f3b54fb568d103b1735f2bef733a3a061e133754 Mon Sep 17 00:00:00 2001 From: siwolee Date: Thu, 25 Jul 2024 14:04:38 +0900 Subject: [PATCH 7/9] style: css fix --- .../agenda/Form/AgendaResultForm.module.scss | 3 ++- styles/agenda/Form/Form.module.scss | 6 +++--- .../agenda/Input/DescriptionInput.module.scss | 18 +++++++++++++++++- styles/agenda/Input/Input.module.scss | 4 +--- styles/agenda/Input/SelectInput.module.scss | 3 +++ styles/agenda/pages/CreateAgenda.module.scss | 5 +++-- 6 files changed, 29 insertions(+), 10 deletions(-) diff --git a/styles/agenda/Form/AgendaResultForm.module.scss b/styles/agenda/Form/AgendaResultForm.module.scss index 2de8472e8..207e399a0 100644 --- a/styles/agenda/Form/AgendaResultForm.module.scss +++ b/styles/agenda/Form/AgendaResultForm.module.scss @@ -6,11 +6,11 @@ display: flex; flex-direction: column; padding-right: 0; - // width: 350px; } .title { @include text('title'); + padding: 1rem; } .description { @@ -23,6 +23,7 @@ flex-direction: column; padding-right: 0; justify-content: flex-end; + margin: 0 0 2rem; } .awardLi { display: flex; diff --git a/styles/agenda/Form/Form.module.scss b/styles/agenda/Form/Form.module.scss index 8bc8e2e00..ede5f7a8d 100644 --- a/styles/agenda/Form/Form.module.scss +++ b/styles/agenda/Form/Form.module.scss @@ -21,6 +21,7 @@ .description { @include text('description'); + padding: 0.5rem; } %item-container { @@ -48,14 +49,13 @@ .dateContainer { display: flex; - // margin-bottom: 1rem; align-items: flex-end; + width: 100%; } .inputContainer { display: flex; - // margin: 1rem 1rem; - // align-items: space-between; + width: 100%; gap: 2rem; @media (max-width: 500px) { flex-direction: column; diff --git a/styles/agenda/Input/DescriptionInput.module.scss b/styles/agenda/Input/DescriptionInput.module.scss index 37b297f27..7f2d7d3d9 100644 --- a/styles/agenda/Input/DescriptionInput.module.scss +++ b/styles/agenda/Input/DescriptionInput.module.scss @@ -2,10 +2,26 @@ .container { margin: 1rem 0; + overflow-y: scroll; } .description_input { // 확인필요 @include inner-container; - height: 4rem; + height: max-content; + padding: 1rem; + overflow-y: scroll; +} + +.description_input::-webkit-scrollbar { + width: 10px; +} +.description_input::-webkit-scrollbar-thumb { + background-color: #2f3542; + border-radius: 10px; +} +.description_input::-webkit-scrollbar-track { + background-color: grey; + border-radius: 10px; + box-shadow: inset 0px 0px 5px white; } diff --git a/styles/agenda/Input/Input.module.scss b/styles/agenda/Input/Input.module.scss index 34a74a2a2..1372982fc 100644 --- a/styles/agenda/Input/Input.module.scss +++ b/styles/agenda/Input/Input.module.scss @@ -2,17 +2,15 @@ .container { display: flex; + width: 100%; flex-direction: column; gap: 1rem; justify-content: center; @include text('default'); } .input { - width: calc(100% - 1rem); padding: 0.5rem; - // margin: 0 0.5rem; background: none; - // border-radius: $radius-small; border: none; border-bottom: var(--default-border); -webkit-appearance: none; diff --git a/styles/agenda/Input/SelectInput.module.scss b/styles/agenda/Input/SelectInput.module.scss index 67e70a317..494402172 100644 --- a/styles/agenda/Input/SelectInput.module.scss +++ b/styles/agenda/Input/SelectInput.module.scss @@ -43,3 +43,6 @@ .unselected { border-style: dotted; } +.selected { + border-style: solid; +} diff --git a/styles/agenda/pages/CreateAgenda.module.scss b/styles/agenda/pages/CreateAgenda.module.scss index 2c048132c..8939ff859 100644 --- a/styles/agenda/pages/CreateAgenda.module.scss +++ b/styles/agenda/pages/CreateAgenda.module.scss @@ -1,4 +1,4 @@ -@import 'styles/agenda/common.scss'; +@import 'styles/agenda/Form/Form.module.scss'; .container { @include container(1); @@ -15,6 +15,7 @@ @include text('title'); } -.description { +.descriptionInput { @include text('description'); + padding: 0.5rem; } From 32e884d32d83d5e4e0ce5dd9f4c51d2f1a68e0be Mon Sep 17 00:00:00 2001 From: siwolee Date: Thu, 25 Jul 2024 14:05:18 +0900 Subject: [PATCH 8/9] feat: selectInput form selected feature --- components/agenda/Form/AgendaResultForm.tsx | 47 ++++++++++++-------- components/agenda/Form/CreateAgendaForm.tsx | 4 +- components/agenda/Input/DescriptionInput.tsx | 4 +- components/agenda/Input/SelectInput.tsx | 42 ++++++++++++++--- components/agenda/Input/TimeInput.tsx | 12 ----- 5 files changed, 68 insertions(+), 41 deletions(-) diff --git a/components/agenda/Form/AgendaResultForm.tsx b/components/agenda/Form/AgendaResultForm.tsx index 00815475e..bcfa72db0 100644 --- a/components/agenda/Form/AgendaResultForm.tsx +++ b/components/agenda/Form/AgendaResultForm.tsx @@ -8,7 +8,7 @@ interface AgendaResultFormProps { } const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => { - const [awardlist, setAwardList] = useState< + const [awardList, setAwardList] = useState< { award: string; teams: string[]; @@ -19,20 +19,25 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => { { award: '참가상', teams: [] }, ]); const newAwardInputRef = useRef(null); + const defaultTeam = '팀을 선택해주세요'; - // const addEventHandler = (e: MouseEvent) => { - // e.preventDefault(); - // alert(newAwardInputRef.current?.value); - // const input: string | undefined = newAwardInputRef.current?.value; - // newAwardInputRef.current ? (newAwardInputRef.current.value = '') : null; - // input ? awardlist.push(input) : null; - // awardlist && input ? setAwardList(awardlist) : null; - // }; - - const addTeam = (idx: number, newTeam: string) => { - const newAwardList = awardlist; - newAwardList[idx].teams.push(newTeam); - setAwardList(newAwardList); + const addTeam = ( + idx: number, + e: React.ChangeEvent, + selected: boolean + ) => { + if (!selected) return; + const newTeam = e.target.value; + console.log('addTeam called', idx, newTeam); + awardList[idx].teams.push(newTeam); + e.target.value = defaultTeam; + setAwardList([...awardList]); + }; + console.log(awardList); + const removeTeam = (idx: number, teamidx: number) => { + console.log('removeTeam called', idx, teamidx); + awardList[idx].teams.splice(teamidx, 1); + setAwardList([...awardList]); }; return ( @@ -40,7 +45,7 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {

결과 입력

팀별 결과를 입력해주세요

    - {awardlist?.map((data, idx) => ( + {awardList?.map((data, idx) => (
  • alert('DEV::dragbutton called' + e)} />
    @@ -60,14 +65,18 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => { options={teamlist} name={`selected-team${idx}-${teamidx}`} message='팀을 선택해주세요' + onChange={(e, selected) => { + if (!selected) removeTeam(idx, teamidx); + }} /> ))} { - addTeam(idx, e.target.value); + selected='' + onChange={(e, selected) => { + addTeam(idx, e, selected); }} />
    @@ -103,8 +112,8 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {
{/*