[Feat] DashboardList 컴포넌트 레이아웃 구성

- 나의 대시보드 페이지에서 대시보드 목록을 보여주는 부분의 레이아웃 구성

src/pages/myDashboard/components/DashboardList/DashboardList.module.scss

@@ -0,0 +1,18 @@
+.container {
+  width: 1024px;
+}
+
+.dashboardList {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 70px 70px;
+  gap: 13px;
+}
+
+.pagination {
+  height: 40px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 13px;
+}

src/pages/myDashboard/components/DashboardList/DashboardList.tsx

@@ -0,0 +1,26 @@
+import styles from './DashboardList.module.scss';
+
+/*  대시보드 목록을 보여주는 컴포넌트입니다.
+    - 대시보드 목록을 보여주는 ul 부분과  
+    - 다음 목록을 불러오기 위한 부분으로 나뉩니다  */
+
+function DashboardList() {
+  return (
+    <div className={styles.container}>
+      <ul className={styles.dashboardList}>
+        <li>새로운 대시보드</li>
+        <li>코드잇</li>
+        <li>3분기 계획</li>
+        <li>회의록</li>
+        <li>중요 문서함</li>
+        <li>테스트 123</li>
+      </ul>
+      <div className={styles.pagination}>
+        <p>1페이지 중 1</p>
+        <div>페이지 이동 버튼</div>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardList;

src/pages/myDashboard/index.tsx

@@ -1,3 +1,4 @@
+import DashboardList from './components/DashboardList/DashboardList';
 import styles from './index.module.scss';
 
 /*  나의 대시보드 페이지
@@ -10,7 +11,7 @@ function MyDashboard() {
       <div>
         <div>header</div>
         <div>
-          <div>dashboard list</div>
+          <DashboardList />
           <div>invited dashboard</div>
         </div>
       </div>