feat: dashboard 페이지 퍼블리싱

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 (
+    <section className={styles['main-section']}>
+      {/* 컬럼 목록 배열을 map 메소드로 Column 렌더링 */}
+      <Column id={5} title='To Do' />
+      <Column id={5} title='To Do' />
+      <Column id={5} title='To Do' />
+      <div className={styles['etc-wrapper']}>
+        <Button deviceType='desktop' buttonType='add-column'>
+          새로운 컬럼 추가하기
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+export default DashboardId;
+
+//

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);
       }
     }
 

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 컴포넌트

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 > div {
+    justify-content: center;
+  }
+}

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 (
+    <div className={styles['column']}>
+      <div className={styles['header']}>
+        <div className={styles['header-left']}>
+          <IconCircleChip />
+          <div className={styles['title']}>
+            <p className={styles['column-title']}>{title}</p>{' '}
+            <ChipNum num={3} />
+          </div>
+        </div>
+        <IconSetting onClick={() => router.push('/dashboard/id')} />
+      </div>
+      <div className={styles['card-list']}>
+        <Button deviceType='desktop' buttonType='add-todo' />
+        {cardList.map((card) => (
+          <Card card={card} key={card.id} />
+        ))}
+      </div>
+    </div>
+  );
+  // id를 통해서 카드 목록 가져오기
+  // {cardList.map((card)=> <Card card={card}/>)}
+}
+
+export default Column;

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;
+    }
+  }
+}

pages/dashboard/[id]/index.tsx

@@ -0,0 +1,7 @@
+import DashboardId from '@/containers/dashboard/id/DashboardId';
+
+function DashboardIdPage() {
+  return <DashboardId />;
+}
+
+export default DashboardIdPage;

styles/mixins/_common.scss

@@ -28,3 +28,44 @@ $desktop-min: 1200px;
     @content;
   }
 }
+
+@mixin ResponsiveGap($desktop, $tablet, $mobile) {
+  gap: #{$desktop}px;
+
+  @include tablet {
+    gap: #{$tablet}px;
+  }
+
+  @include mobile {
+    gap: #{$mobile}px;
+  }
+}
+
+@mixin ResponsiveLineHeight($desktop, $tablet, $mobile) {
+  line-height: #{$desktop}px;
+
+  @include tablet {
+    line-height: #{$tablet}px;
+  }
+
+  @include mobile {
+    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;
+}