feat : Profile Page

src/app/profile/layout.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const metadata = {
+  title: 'User Profile',
+  description: 'View and edit your user profile',
+};
+
+interface ProfileLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function ProfileLayout({ children }: ProfileLayoutProps) {
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">User Profile</h1>
+      <div className="bg-white shadow-md rounded-lg p-4">{children}</div>
+    </div>
+  );
+}

src/app/profile/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/hooks/useAuth';
+import { UserProfileContainer } from '@/components/containers/UserProfileContainer';
+
+export default function ProfilePage() {
+  const { user, isAuthenticated } = useAuth();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push('/auth');
+    }
+  }, [isAuthenticated, router]);
+
+  if (!user) {
+    return <p className="text-red-500">User not found. Please log in.</p>;
+  }
+
+  return <UserProfileContainer userId={user.userId} />;
+}

src/components/containers/UserProfileContainer.tsx

@@ -10,7 +10,7 @@ interface UserProfileContainerProps {
   userId: string;
 }
 
-const UserProfileContainer: React.FC<UserProfileContainerProps> = ({
+export const UserProfileContainer: React.FC<UserProfileContainerProps> = ({
   userId,
 }) => {
   const { data: user, isLoading, isError } = useUserProfile(userId);
@@ -40,5 +40,3 @@ const UserProfileContainer: React.FC<UserProfileContainerProps> = ({
     />
   );
 };
-
-export default UserProfileContainer;

src/components/organisms/ChatLayout.tsx

@@ -21,6 +21,7 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
       <div className="flex-1 overflow-y-auto p-4 space-y-2">
         {messages.map((msg) => (
           <MessageBubble
+            key={msg.sender}
             message={msg.message}
             sender={msg.sender}
             timestamp={msg.createdAt}

src/hooks/useAuth.ts

@@ -13,9 +13,10 @@ import {
   serverTimestamp,
   Timestamp,
 } from 'firebase/firestore';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setUser, clearUser, setError } from '@/redux/slice/authSlice';
 import type { User } from '@/types';
+import type { RootState } from '@/redux/store';
 
 interface AuthParams {
   email: string;
@@ -24,6 +25,8 @@ interface AuthParams {
 
 export const useAuth = () => {
   const dispatch = useDispatch();
+  const user = useSelector((state: RootState) => state.auth.user);
+  const isAuthenticated = !!user;
 
   const signUp = useMutation({
     mutationFn: async ({ email, password }: AuthParams) => {
@@ -109,6 +112,8 @@ export const useAuth = () => {
   });
 
   return {
+    user,
+    isAuthenticated,
     signUp: {
       mutate: signUp.mutate,
       isPending: signUp.isPending,