From a4946ff5b4e3b8505ff05b61e815fdf1dbeea642 Mon Sep 17 00:00:00 2001 From: mxkxx Date: Wed, 31 Jul 2024 15:46:34 +0900 Subject: [PATCH 1/7] =?UTF-8?q?style:=20=EB=B0=98=EC=9D=91=ED=98=95=20gap?= =?UTF-8?q?=20=EB=AF=B9=EC=8A=A4=EC=9D=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/mixins/_common.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/styles/mixins/_common.scss b/styles/mixins/_common.scss index 0ad2f86..23830b2 100644 --- a/styles/mixins/_common.scss +++ b/styles/mixins/_common.scss @@ -28,3 +28,15 @@ $desktop-min: 1200px; @content; } } + +@mixin ResponsiveGap($desktop, $tablet, $mobile) { + gap: #{$desktop}px; + + @include tablet { + gap: #{$tablet}px; + } + + @include mobile { + gap: #{$mobile}px; + } +} From 1aff4173887c26bddceea0ced11f5fe251dac7ff Mon Sep 17 00:00:00 2001 From: mxkxx Date: Wed, 31 Jul 2024 15:50:15 +0900 Subject: [PATCH 2/7] =?UTF-8?q?style:=20=EB=B0=98=EC=9D=91=ED=98=95=20line?= =?UTF-8?q?-height=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/mixins/_common.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/styles/mixins/_common.scss b/styles/mixins/_common.scss index 23830b2..8228440 100644 --- a/styles/mixins/_common.scss +++ b/styles/mixins/_common.scss @@ -40,3 +40,15 @@ $desktop-min: 1200px; gap: #{$mobile}px; } } + +@mixin ResponsiveLineHeight($desktop, $tablet, $mobile) { + line-height: #{$desktop}px; + + @include tablet { + line-height: #{$tablet}px; + } + + @include mobile { + line-height: #{$mobile}px; + } +} From ebae3bcdea9f16ff1418296c985bf6f2763769b4 Mon Sep 17 00:00:00 2001 From: mxkxx Date: Wed, 31 Jul 2024 23:44:41 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20column=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/id/column/Column.module.scss | 55 +++++++++ containers/dashboard/id/column/Column.tsx | 113 ++++++++++++++++++ containers/dashbord/id/chips/ChipProgress.tsx | 20 ---- 3 files changed, 168 insertions(+), 20 deletions(-) create mode 100644 containers/dashboard/id/column/Column.module.scss create mode 100644 containers/dashboard/id/column/Column.tsx delete mode 100644 containers/dashbord/id/chips/ChipProgress.tsx diff --git a/containers/dashboard/id/column/Column.module.scss b/containers/dashboard/id/column/Column.module.scss new file mode 100644 index 0000000..41af208 --- /dev/null +++ b/containers/dashboard/id/column/Column.module.scss @@ -0,0 +1,55 @@ +@use '@/styles/index.scss' as *; +@import '@/styles/mixins/mixinChip'; + +.column { + width: 355px; + height: 1010px; + border-right: 1px solid $gray-ee; + padding: 20px; + @include Flex(column, null, null); + @include ResponsiveGap(24, 24, 16); + + @include tablet { + width: 100%; + height: 346px; + border-bottom: 1px solid $gray-ee; + } + + @include mobile { + height: 470px; + padding: 16px 12px 12px; + } + + svg { + @include GetCircleColor('violet'); + } + + .header { + @include Flex(row, space-between, cneter); + + .header-left { + @include Flex(row, null, center); + gap: 8px; + } + } + + .title { + @include Flex(row, null, center); + gap: 12px; + .column-title { + @include FontStyle(18, 700, 16, 14); + @include ResponsiveLineHeight(21.5, 21.5, 19); + color: $black-33; + } + } +} + +.card-list { + overflow-y: auto; + @include Flex(column, null, null); + @include ResponsiveGap(16, 16, 10); + + button { + justify-content: center; + } +} diff --git a/containers/dashboard/id/column/Column.tsx b/containers/dashboard/id/column/Column.tsx new file mode 100644 index 0000000..21a047b --- /dev/null +++ b/containers/dashboard/id/column/Column.tsx @@ -0,0 +1,113 @@ +import styles from './Column.module.scss'; +import { IconCircleChip, IconSetting } from '@/assets/icongroup'; +import ChipNum from '@/containers/dashboard/id/chips/ChipNum'; +import { useRouter } from 'next/router'; +import Button from '@/components/Button'; +import Card from '@/containers/dashboard/id/card/Card'; + +// 컬럼 목록을 토대로 각 아이디를 통해 카드 목록 가져오기 이것도 저장 + +// 임시 mock 데이터 +const cardList = [ + { + id: 9769, + title: '123', + description: '123', + tags: ['dsaf', 'z', 'df', 'f', 's'], + dueDate: '2024-07-31 14:30', + assignee: { + id: 4358, + nickname: '1234123213', + profileImageUrl: null, + }, + imageUrl: null, + teamId: '6-13', + dashboardId: 11342, + columnId: 38317, + createdAt: '2024-07-31T14:16:18.173Z', + updatedAt: '2024-07-31T14:16:18.173Z', + }, + { + id: 9770, + title: 'z', + description: 'asfd', + tags: ['mm', 'z', 'zdf', 'asdf', 'a'], + dueDate: null, + assignee: { + id: 4358, + nickname: '1234123213', + profileImageUrl: null, + }, + imageUrl: null, + teamId: '6-13', + dashboardId: 11342, + columnId: 38317, + createdAt: '2024-07-31T14:17:36.067Z', + updatedAt: '2024-07-31T14:17:36.067Z', + }, + { + id: 9771, + title: '123', + description: '123', + tags: ['dsaf', 'z', 'df', 'f', 's'], + dueDate: '2024-07-31 14:30', + assignee: { + id: 4358, + nickname: '1234123213', + profileImageUrl: null, + }, + imageUrl: null, + teamId: '6-13', + dashboardId: 11342, + columnId: 38317, + createdAt: '2024-07-31T14:16:18.173Z', + updatedAt: '2024-07-31T14:16:18.173Z', + }, + { + id: 9772, + title: '123', + description: '123', + tags: ['dsaf', 'z', 'df', 'f', 's'], + dueDate: '2024-07-31 14:30', + assignee: { + id: 4358, + nickname: '1234123213', + profileImageUrl: null, + }, + imageUrl: null, + teamId: '6-13', + dashboardId: 11342, + columnId: 38317, + createdAt: '2024-07-31T14:16:18.173Z', + updatedAt: '2024-07-31T14:16:18.173Z', + }, +]; + +function Column({ id, title }: { id: number; title: string }) { + const router = useRouter(); + + return ( +
+
+
+ +
+

{title}

{' '} + +
+
+ router.push('/dashboard/id')} /> +
+
+
+
+ ); + // id를 통해서 카드 목록 가져오기 + // {cardList.map((card)=> )} +} + +export default Column; diff --git a/containers/dashbord/id/chips/ChipProgress.tsx b/containers/dashbord/id/chips/ChipProgress.tsx deleted file mode 100644 index 7b36679..0000000 --- a/containers/dashbord/id/chips/ChipProgress.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { IconCircleChip } from '@/assets/icongroup'; -import styles from './Chip.module.scss'; -import classNames from 'classNames'; - -function ChipProgress({ - title, - color = 'violet', -}: { - title: string; - color?: string; -}) { - return ( -
- - {title} -
- ); -} - -export default ChipProgress; From 9facaf1df998cc4ed93ae7661735ed078f9b320a Mon Sep 17 00:00:00 2001 From: mxkxx Date: Wed, 31 Jul 2024 23:45:22 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20dashboard=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- containers/dashboard/id/DashboardId.tsx | 25 ++++++++++++++++++ containers/dashboard/id/index.module.scss | 31 +++++++++++++++++++++++ pages/dashboard/[id]/index.tsx | 7 +++++ 3 files changed, 63 insertions(+) create mode 100644 containers/dashboard/id/DashboardId.tsx create mode 100644 containers/dashboard/id/index.module.scss create mode 100644 pages/dashboard/[id]/index.tsx diff --git a/containers/dashboard/id/DashboardId.tsx b/containers/dashboard/id/DashboardId.tsx new file mode 100644 index 0000000..c44adcf --- /dev/null +++ b/containers/dashboard/id/DashboardId.tsx @@ -0,0 +1,25 @@ +import Button from '@/components/Button'; +import Column from '@/containers/dashboard/id/column/Column'; +import styles from './index.module.scss'; + +function DashboardId() { + // zustand로 저장한 컬럼 목록 가져오기 + + return ( +
+ {/* 컬럼 목록 배열을 map 메소드로 Column 렌더링 */} + + + +
+ +
+
+ ); +} + +export default DashboardId; + +// diff --git a/containers/dashboard/id/index.module.scss b/containers/dashboard/id/index.module.scss new file mode 100644 index 0000000..885097a --- /dev/null +++ b/containers/dashboard/id/index.module.scss @@ -0,0 +1,31 @@ +@use '@/styles/index.scss' as *; + +.main-section { + background-color: $gray-fa; + + @include Flex(row, null, flex-start); + + @include tablet { + flex-wrap: wrap; + } + + .etc-wrapper { + width: 100%; + padding: 68px 20px 20px; + white-space: nowrap; + + button { + @include Flex(row, center, center); + } + + @include tablet { + button { + width: 100%; + } + padding: 20px; + } + @include mobile { + padding: 16px 12px 225px; + } + } +} diff --git a/pages/dashboard/[id]/index.tsx b/pages/dashboard/[id]/index.tsx new file mode 100644 index 0000000..e8bb21e --- /dev/null +++ b/pages/dashboard/[id]/index.tsx @@ -0,0 +1,7 @@ +import DashboardId from '@/containers/dashboard/id/DashboardId'; + +function DashboardIdPage() { + return ; +} + +export default DashboardIdPage; From 5c5a806fbe30e45b5d30732d108730361bce030b Mon Sep 17 00:00:00 2001 From: mxkxx Date: Wed, 31 Jul 2024 23:45:48 +0900 Subject: [PATCH 5/7] =?UTF-8?q?style:=20=EB=AF=B9=EC=8A=A4=EC=9D=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit gap, line-height 수정 --- containers/dashboard/id/card/Card.module.scss | 26 +++++-------------- .../dashboard/id/chips/Chip.module.scss | 6 +---- 2 files changed, 7 insertions(+), 25 deletions(-) diff --git a/containers/dashboard/id/card/Card.module.scss b/containers/dashboard/id/card/Card.module.scss index 3412f0a..f001a2a 100644 --- a/containers/dashboard/id/card/Card.module.scss +++ b/containers/dashboard/id/card/Card.module.scss @@ -9,20 +9,18 @@ border: 1px solid $gray-d9; background-color: $white; + @include Flex(column, null, null); - gap: 12px; + @include ResponsiveGap(12, 20, 11); @include tablet { height: 93px; width: 100%; - @include Flex(row, null, null); - gap: 20px; } @include mobile { flex-direction: column; - gap: 10.18px; height: auto; } @@ -44,39 +42,31 @@ // 태그, 캘린더, 프로필 감싸는 div .card-information { @include Flex(column, null, null); - gap: 10px; + @include ResponsiveGap(10, 16, 6); @include tablet { @include Flex(row, null, center); - gap: 16px; } @include mobile { @include Flex(column, null, flex-start); - gap: 6px; } } // 이미지 제외 부분 .card-content { @include Flex(column, null, null); - gap: 10px; + @include ResponsiveGap(10, 10, 6); @include tablet { width: 100%; } - @include mobile { - gap: 6px; - } // 제목 .title { @include FontStyle(16, 500, 16, 14); + @include ResponsiveLineHeight(19, 19, 16.7); line-height: 19px; color: $black-33; - - @include mobile { - line-height: 16.7px; - } } // 태그들 @@ -100,11 +90,7 @@ p { color: $gray-78; @include FontStyle(12, 500, 12, 10); - line-height: 14px; - - @include mobile { - line-height: 12px; - } + @include ResponsiveLineHeight(14, 14, 12); } } diff --git a/containers/dashboard/id/chips/Chip.module.scss b/containers/dashboard/id/chips/Chip.module.scss index 14bc334..23631da 100644 --- a/containers/dashboard/id/chips/Chip.module.scss +++ b/containers/dashboard/id/chips/Chip.module.scss @@ -37,11 +37,7 @@ border-radius: 4px; @include FontStyle(12, 400, 12, 10); - line-height: 14.3px; - - @include mobile { - line-height: 12px; - } + @include ResponsiveLineHeight(14.3, 14.3, 12); } // chip - progress 컴포넌트 From 35a0ea65be849d8201e5f94c6880d0384e073f37 Mon Sep 17 00:00:00 2001 From: mxkxx Date: Wed, 31 Jul 2024 23:56:01 +0900 Subject: [PATCH 6/7] =?UTF-8?q?style:=20common=20=EB=AF=B9=EC=8A=A4?= =?UTF-8?q?=EC=9D=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit size, calculateRem, border-radius --- styles/mixins/_common.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/styles/mixins/_common.scss b/styles/mixins/_common.scss index 8228440..68fb7f6 100644 --- a/styles/mixins/_common.scss +++ b/styles/mixins/_common.scss @@ -52,3 +52,20 @@ $desktop-min: 1200px; line-height: #{$mobile}px; } } + +@mixin Size($width, $height: $width) { + width: $width; + height: $height; +} + +//rem 사이즈 구할때 사용? +@function CalculateRem($size) { + $remSize: $size / 16px; + @return $remSize * 1rem; +} + +@mixin border-radius($value) { + -webkit-border-radius: $value; + -moz-border-radius: $value; + border-radius: $value; +} From 0e1c743be7b1fb6116caf17533e70fbaa9804c40 Mon Sep 17 00:00:00 2001 From: mxkxx Date: Thu, 1 Aug 2024 00:10:42 +0900 Subject: [PATCH 7/7] =?UTF-8?q?style:=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- containers/dashboard/id/column/Column.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/containers/dashboard/id/column/Column.module.scss b/containers/dashboard/id/column/Column.module.scss index 41af208..3977da4 100644 --- a/containers/dashboard/id/column/Column.module.scss +++ b/containers/dashboard/id/column/Column.module.scss @@ -49,7 +49,7 @@ @include Flex(column, null, null); @include ResponsiveGap(16, 16, 10); - button { + button > div { justify-content: center; } }