Merge pull request #36 from DeveloperBlog-Devflow/feature/home-page

feat: uid에 따른 랜덤 고유 이모지 생성 기능 구현

Author: moo1677

app/(with-sidebar)/(home)/page.tsx

@@ -119,6 +119,7 @@ const Page = () => {
       <ProfileSection
         className="grid grid-cols-1 gap-4 md:grid-cols-3"
         profile={profile}
+        uid={currentUser.uid}
       />
 
       {/* 2-2. GraphSection */}

components/home/ButtonSection.tsx

@@ -24,7 +24,7 @@ const ButtonSection = ({ onAddTodo }: ButtonSectionProps) => {
         onClick={handleAddClick}
         className="flex-1 rounded-xl border border-slate-300 bg-none py-4 text-center text-base font-semibold text-slate-700 transition hover:bg-slate-200 active:bg-slate-300 disabled:cursor-not-allowed disabled:opacity-60"
       >
-        계획 추가하기
+        플랜 추가하기
       </button>
     </div>
   );

components/home/ProfileSection.tsx

@@ -1,18 +1,20 @@
 import { Profile } from '@/lib/home/profileService';
 import Card from './Card';
-
+import { getRandomProfileIcon } from '@/utils/getRandomProfileIcon';
 interface ProfileSectionProps {
   className?: string;
   profile: Profile | null;
+  uid: string;
 }
 
-const ProfileSection = ({ className, profile }: ProfileSectionProps) => {
+const ProfileSection = ({ className, profile, uid }: ProfileSectionProps) => {
+  const icon = getRandomProfileIcon(uid);
   return (
     <div className={className}>
       <div className="md:col-span-2">
         <Card className="flex items-center gap-4">
-          <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-gray-100 bg-purple-100">
-            <span className="text-3xl">😈</span>
+          <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-gray-100 bg-purple-100 pt-1">
+            <span className="text-3xl">{icon}</span>
           </div>
 
           <div>

utils/getRandomProfileIcon.ts

@@ -0,0 +1,25 @@
+const PROFILE_ICONS = [
+  '🌱',
+  '🔥',
+  '😎',
+  '😈',
+  '🖤',
+  '💀',
+  '⚡',
+  '🌸',
+  '🐣',
+] as const;
+
+export type ProfileIcon = (typeof PROFILE_ICONS)[number];
+
+export function getRandomProfileIcon(seed: string): ProfileIcon {
+  let hash = 0;
+
+  for (let i = 0; i < seed.length; i++) {
+    hash = (hash << 5) - hash + seed.charCodeAt(i);
+    hash |= 0; // 32bit
+  }
+
+  const index = Math.abs(hash) % PROFILE_ICONS.length;
+  return PROFILE_ICONS[index];
+}