diff --git a/public/images/logo-light2.svg b/public/images/logo-light2.svg new file mode 100644 index 0000000..59d8e60 --- /dev/null +++ b/public/images/logo-light2.svg @@ -0,0 +1,11 @@ + +
 + + + + + + + + + diff --git a/src/app/shared/components/common/sidebar/CreateDashboardButton.tsx b/src/app/shared/components/common/sidebar/CreateDashboardButton.tsx new file mode 100644 index 0000000..2bf9b52 --- /dev/null +++ b/src/app/shared/components/common/sidebar/CreateDashboardButton.tsx @@ -0,0 +1,27 @@ +'use client' + +import Image from 'next/image' + +import { CreateDashboardButtonProps } from '@/app/shared/types/dashboard' + +export default function CreateDashboardButton({ + onClick, +}: CreateDashboardButtonProps): JSX.Element { + return ( + + ) +} diff --git a/src/app/shared/components/common/sidebar/DashboardItem.tsx b/src/app/shared/components/common/sidebar/DashboardItem.tsx new file mode 100644 index 0000000..25e10d8 --- /dev/null +++ b/src/app/shared/components/common/sidebar/DashboardItem.tsx @@ -0,0 +1,47 @@ +'use client' + +import Image from 'next/image' + +import { DashboardItemProps } from '@/app/shared/types/dashboard' + +export default function DashboardItem({ + dashboard, + isActive = false, + onClick, +}: DashboardItemProps): JSX.Element { + const handleClick = () => { + onClick(dashboard.id) + } + + return ( + + ) +} diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx new file mode 100644 index 0000000..5c3ea94 --- /dev/null +++ b/src/app/shared/components/common/sidebar/Sidebar.tsx @@ -0,0 +1,110 @@ +'use client' + +import Image from 'next/image' +import Link from 'next/link' +import { usePathname, useRouter } from 'next/navigation' + +import CreateDashboardButton from './CreateDashboardButton' +import DashboardItem from './DashboardItem' + +export default function Sidebar(): JSX.Element { + const pathname = usePathname() + const router = useRouter() + + // TODO: 목데이터 - API 연동시 삭제예정 + const mockDashboards = [ + { + id: 1, + title: '비브러리', + color: '#10B981', + createdByMe: true, + createdAt: '', + updatedAt: '', + userId: 1, + }, + { + id: 2, + title: '코드잇', + color: '#8B5CF6', + createdByMe: true, + createdAt: '', + updatedAt: '', + userId: 1, + }, + { + id: 3, + title: '3분기 계획', + color: '#F59E0B', + createdByMe: false, + createdAt: '', + updatedAt: '', + userId: 2, + }, + { + id: 4, + title: '회의록', + color: '#3B82F6', + createdByMe: false, + createdAt: '', + updatedAt: '', + userId: 3, + }, + { + id: 5, + title: '중요 문서함', + color: '#EC4899', + createdByMe: false, + createdAt: '', + updatedAt: '', + userId: 4, + }, + ] + + const handleDashboardClick = (dashboardId: number) => { + router.push(`/dashboard/${dashboardId}`) + } + + const handleCreateDashboard = () => { + // TODO: 대시보드 생성 모달 열기 + console.log('대시보드 생성 모달 열기임') + } + return ( + + ) +} diff --git a/src/app/shared/types/dashboard.ts b/src/app/shared/types/dashboard.ts new file mode 100644 index 0000000..e851234 --- /dev/null +++ b/src/app/shared/types/dashboard.ts @@ -0,0 +1,34 @@ +// 사이드바용 대시보드 타입 +export interface Dashboard { + id: number + title: string + color: string + createdAt: string + updatedAt: string + createdByMe: boolean + userId: number +} + +// 대시보드 목록 조회 응답 +export interface DashboardListResponse { + cursorId: number + totalCount: number + dashboards: Dashboard[] +} + +// 사이드바 컴포넌트 Props +export interface DashboardItemProps { + dashboard: Dashboard + isActive?: boolean + onClick: (dashboardId: number) => void +} + +export interface CreateDashboardButtonProps { + onClick: () => void +} + +// 대시보드 생성 요청 타입 +export interface CreateDashboardRequest { + title: string + color: string +} diff --git a/src/app/tester/page.tsx b/src/app/tester/page.tsx index 4e6bd5e..eae818f 100644 --- a/src/app/tester/page.tsx +++ b/src/app/tester/page.tsx @@ -1,6 +1,8 @@ -import ThemeToggle from '@components/ThemeToggle' import Image from 'next/image' +import Sidebar from '@/app/shared/components/common/sidebar/Sidebar' +import ThemeToggle from '@/app/shared/components/ThemeToggle' + //<초기 설정 안내> // 이미지 파일에 접근할 때: /images/파일명 @@ -16,35 +18,56 @@ import Image from 'next/image' export default function Home() { return ( - <> -
-

- test page -

- -
- Logo +
+ {/* 사이드바 */} + + + {/* 메인 콘텐츠 영역 */} +
+ {/* 헤더 영역 */} +
+

Sidebar 테스트 페이지

+

왼쪽에 사이드바 만들어보자잇!

+ +
+ + {/* 기존 테스트 요소들 */} +
+
+

로고 테스트

+
+ Logo +
+
+ + {/* pxr 단위 테스트 */} +
+

pxr 단위 테스트

+
+

This text should be 16px (일반 px 단위)

+
+
+

This text should be 1rem → converted 16 to 1rem: using pxr

+
+
+ + {/* Gap 테스트 */} +
+

Gap 테스트

+
+
AAA
+
BBB
+
CCC
+
+
- {/* - - [300px] -> 300으로 작성하면 브라우저에서는 알아서 rem으로 변환하여 적용됨 */} -
-

This text should be 16px

-
-
-

This text should be 1rem → converted 16 to 1rem: using pxr

-
- {/* - - 원래 gap-4는 16px인데, pxr적용 시에는 gap-16으로 작성*/} -
-
AAA
-
BBB
-
CCC
-
- +
) }