diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx index ef88708..ffacca9 100644 --- a/src/app/(app)/dashboard/page.tsx +++ b/src/app/(app)/dashboard/page.tsx @@ -1,16 +1,15 @@ "use client"; -import { useEffect } from "react"; -import { useRouter } from "next/navigation"; +import { UserProfileSimple, useUserProfile } from "@/features/user"; import { useAuthStore } from "@/store/useAuthStore"; -import { UserProfileCard, useUserProfile } from "@/features/user"; +import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; export default function DashboardPage() { const router = useRouter(); const { logout, isAuthenticated } = useAuthStore(); - - // Feature 모듈에서 로직과 데이터를 가져옴 - const { user, isLoading, error } = useUserProfile(); + const { user, isLoading } = useUserProfile(); + const [focusGoal, setFocusGoal] = useState(""); useEffect(() => { if (!isAuthenticated) { @@ -24,30 +23,84 @@ export default function DashboardPage() { }; return ( -
-
-

VibeRoom Dashboard

- -
- -
- {/* Feature 컴포넌트에 데이터와 상태만 전달 */} - - -
-
-

나의 스페이스 관리 (준비 중)

+
+
+
+
+ + V + +

VibeRoom

-
-

타이머 통계 (준비 중)

+ +
+ +
-
-
+ + +
+
+ V +
+ +
+

+ 지금, 몰입을 시작해보세요 +

+

+ VibeRoom은 집중 루틴을 빠르게 시작하는 앱 홈입니다. 가상공간을 + 선택하고 바로 세션에 들어가세요. +

+ +
+
+ 여기서 집중해보세요! 세션 시작과 동시에 공간 톤과 사운드가 + 맞춰집니다. +
+ +
+
+ setFocusGoal(event.target.value)} + placeholder="오늘 무엇에 집중할까요?" + className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-brand-dark placeholder:text-brand-dark/45 focus:border-brand-primary/45 focus:bg-white focus:outline-none sm:flex-1" + /> + +
+
+
+
+
+
); } diff --git a/src/features/user/components/UserProfileSimple.tsx b/src/features/user/components/UserProfileSimple.tsx new file mode 100644 index 0000000..c985bfc --- /dev/null +++ b/src/features/user/components/UserProfileSimple.tsx @@ -0,0 +1,30 @@ +import { UserProfile } from "../types"; + +interface UserProfileSimpleProps { + user: UserProfile | null; + isLoading: boolean; +} + +export const UserProfileSimple = ({ user, isLoading }: UserProfileSimpleProps) => { + if (isLoading) { + return ( +
+
+
+
+ ); + } + + if (!user) return null; + + return ( +
+
+ {user.name[0]} +
+ + {user.name} + +
+ ); +}; diff --git a/src/features/user/index.ts b/src/features/user/index.ts index fd0b66a..09bcb9c 100644 --- a/src/features/user/index.ts +++ b/src/features/user/index.ts @@ -1,4 +1,5 @@ export * from "./types"; export * from "./hooks/useUserProfile"; export * from "./components/UserProfileCard"; +export * from "./components/UserProfileSimple"; export * from "./api/userApi";