diff --git a/package-lock.json b/package-lock.json index 948d589..54d2309 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,12 +11,14 @@ "@dnd-kit/core": "^6.3.1", "@tanstack/react-query": "^5.80.2", "axios": "^1.9.0", + "clsx": "^2.1.1", "next": "14.2.25", "next-themes": "^0.4.6", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.57.0", "sonner": "^2.0.5", + "tailwind-merge": "^3.3.0", "tailwindcss-preset-px-to-rem": "^1.2.1", "zustand": "^5.0.5" }, @@ -1843,6 +1845,15 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -5962,6 +5973,16 @@ "url": "https://opencollective.com/synckit" } }, + "node_modules/tailwind-merge": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz", + "integrity": "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.17", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", diff --git a/package.json b/package.json index 788b124..2eefafa 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,14 @@ "@dnd-kit/core": "^6.3.1", "@tanstack/react-query": "^5.80.2", "axios": "^1.9.0", + "clsx": "^2.1.1", "next": "14.2.25", "next-themes": "^0.4.6", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.57.0", "sonner": "^2.0.5", + "tailwind-merge": "^3.3.0", "tailwindcss-preset-px-to-rem": "^1.2.1", "zustand": "^5.0.5" }, diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..e29071a Binary files /dev/null and b/public/favicon.png differ diff --git a/public/images/collaborator.png b/public/images/collaborator.png new file mode 100644 index 0000000..ada3878 Binary files /dev/null and b/public/images/collaborator.png differ diff --git a/public/images/crown.png b/public/images/crown.png new file mode 100644 index 0000000..0975924 Binary files /dev/null and b/public/images/crown.png differ diff --git a/public/images/invitation.png b/public/images/invitation.png new file mode 100644 index 0000000..cc58d46 Binary files /dev/null and b/public/images/invitation.png differ diff --git a/public/images/management.png b/public/images/management.png new file mode 100644 index 0000000..1990728 Binary files /dev/null and b/public/images/management.png differ diff --git a/public/images/profile.gif b/public/images/profile.gif new file mode 100644 index 0000000..72a6305 Binary files /dev/null and b/public/images/profile.gif differ diff --git a/src/app/dashboard/[id]/edit/layout.tsx b/src/app/dashboard/[id]/edit/layout.tsx new file mode 100644 index 0000000..123e37a --- /dev/null +++ b/src/app/dashboard/[id]/edit/layout.tsx @@ -0,0 +1,14 @@ +import Header from '@components/common/header/Header' + +export default function AboutLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( +
+
+
{children}
{/* 여기에 page.tsx 내용이 들어옴 */} +
+ ) +} diff --git a/src/app/dashboard/[id]/edit/page.tsx b/src/app/dashboard/[id]/edit/page.tsx new file mode 100644 index 0000000..261456c --- /dev/null +++ b/src/app/dashboard/[id]/edit/page.tsx @@ -0,0 +1,3 @@ +export default function dashBoardEditPage() { + return

대시보드 수정 페이지

+} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 449dd34..7db6c03 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,6 +7,9 @@ import { Providers } from './providers' export const metadata: Metadata = { title: 'Coplan', description: 'Generated by create next app', + icons: { + icon: '/favicon.png', + }, } export default function RootLayout({ diff --git a/src/app/shared/components/common/header/Header.tsx b/src/app/shared/components/common/header/Header.tsx new file mode 100644 index 0000000..cc34b5d --- /dev/null +++ b/src/app/shared/components/common/header/Header.tsx @@ -0,0 +1,87 @@ +'use client' + +import { useUserStore } from '@store/useUserStore' // Zustand 예시 +import { usePathname, useRouter } from 'next/navigation' +import Link from 'next/link' +import Image from 'next/image' + +export default function Header() { + const pathname = usePathname() + const router = useRouter() + const goToMypage = () => { + router.push('/mypage') + } + const { user, logout } = useUserStore() // Zustand 상태 + + return ( +
+ {/* 좌측 대시보드명 */} +
+
대시보드 명
+
+ 내가 만든 대시보드 +
+
+ + {/* 우측 사용자 정보/다크모드 */} +
+ <> + + {/* 공동작업자 프로필 이미지 */} +
+ 초대된 사용자 +
+
+ 초대된 사용자 +
+ |{/* 내 프로필 이미지 */} +
+ 프로필이미지 +
+ 배유철 {user?.name} + {/* 드롭다운 메뉴 */} + + + +
+
+ ) +} diff --git a/src/app/shared/store/useUserStore.ts b/src/app/shared/store/useUserStore.ts new file mode 100644 index 0000000..30bdda9 --- /dev/null +++ b/src/app/shared/store/useUserStore.ts @@ -0,0 +1,26 @@ +// store/useUserStore.ts +import { create } from 'zustand' +import { persist } from 'zustand/middleware' + +import { User } from '../types/User.interface' + +interface UserState { + user: User | null + accessToken: string | null + setUser: (user: User, accessToken: string) => void + logout: () => void // clearUser와 동일 +} + +export const useUserStore = create()( + persist( + (set) => ({ + user: null, + accessToken: null, + setUser: (user, accessToken) => set({ user, accessToken }), + logout: () => set({ user: null, accessToken: null }), + }), + { + name: 'user-storage', + }, + ), +) diff --git a/src/app/shared/types/user.type.ts b/src/app/shared/types/user.type.ts new file mode 100644 index 0000000..5455413 --- /dev/null +++ b/src/app/shared/types/user.type.ts @@ -0,0 +1,9 @@ +export interface User { + id: number + name: string + email: string + avatarUrl?: string // optional + role?: 'user' | 'admin' // optional 예시 + createdAt?: string // optional ISO date string + updatedAt?: string // optional ISO date string +} diff --git a/tsconfig.json b/tsconfig.json index c538582..29ebc76 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,6 +24,7 @@ // alias 설정 "@/*": ["./src/*"], "@components/*": ["./src/app/shared/components/*"], + "@store/*": ["./src/app/shared/store/*"], "@hooks/*": ["./src/app/shared/hooks/*"] } },