Merge pull request #45 from 9git9git/SCRUM-33-FE-프로필-API-연동

trivialcoding6 · web-flow · commit 645b99043fdb · 2025-04-17T22:13:15.000+09:00
✨ [SCRUM-33] FE 프로필 API 연동
diff --git a/apis/character.ts b/apis/character.ts
@@ -0,0 +1,36 @@
+export type CharacterResponse = {
+  characterName: string;
+  imageLink: string;
+  isCollected: boolean;
+  collectedDate: string;
+};
+
+export const getCharacterItems = async (userId: string): Promise<Array<CharacterResponse>> => {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/users/${userId}/characters/`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch Profile items');
+    }
+
+    if (response.status === 200) {
+      const items = await response.json();
+      console.log('items', items, items.data);
+      return items.data as Array<CharacterResponse>;
+    }
+
+    throw new Error('Failed to fetch Profile items');
+  } catch (error) {
+    console.error(error);
+
+    throw error;
+  }
+};
diff --git a/apis/profile.ts b/apis/profile.ts
@@ -0,0 +1,74 @@
+export type ProfileResponse = {
+  userID: string;
+  name: string;
+  email: string;
+  level: number;
+  exp: number;
+  characterCount: number;
+  completedTodoCount: number;
+};
+
+export const getProfileItems = async (userId: string): Promise<ProfileResponse> => {
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/users/${userId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch Profile items');
+    }
+
+    if (response.status === 200) {
+      const items = await response.json();
+      console.log('items', items, items.data);
+      return items.data;
+    }
+
+    throw new Error('Failed to fetch Profile items');
+  } catch (error) {
+    console.error(error);
+
+    throw error;
+  }
+};
+
+export type ProfileRequest = {
+  sex: string;
+  age: number;
+  job: string;
+};
+
+export const updateUserData = async (
+  userId: string,
+  sex: string,
+  age: number,
+  job: string
+): Promise<ProfileRequest> => {
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/users/${userId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ sex, age, job }),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to send Profile items');
+    }
+
+    if (response.status === 200) {
+      const items = await response.json();
+      return items.data;
+    }
+
+    throw new Error('Failed to send Profile items');
+  } catch (error) {
+    console.error(error);
+
+    throw error;
+  }
+};
diff --git a/components/service/profile/CharacterCard.tsx b/components/service/profile/CharacterCard.tsx
@@ -31,14 +31,21 @@ function CharacterCard({ imageLink, isLocked, name, className }: CharacterCardPr
       <div className="flex flex-col items-center justify-center">
         {/* 이미지 */}
         <Image
-          src={`/${imageLink}`}
+          src={imageLink}
           alt={altText}
           width={Profile_CharacterCardImage_WIDTH}
           height={Profile_CharacterCardImage_HEIGHT}
-          className="object-contain"
+          className={cn('object-contain', isLocked && 'grayscale opacity-10')}
         />
         {/* 캐릭터 이름 */}
-        <span className="text-black text-base font-normal tracking-tight">{displayName}</span>
+        <span
+          className={cn(
+            'text-black text-base font-normal tracking-tight',
+            isLocked && 'text-black'
+          )}
+        >
+          {displayName}
+        </span>
       </div>
     </div>
   );
diff --git a/components/service/profile/CharacterGrid.tsx b/components/service/profile/CharacterGrid.tsx
@@ -1,7 +1,11 @@
 import { CharacterCard } from './CharacterCard';
 
 type Props = {
-  characters: Array<{ imageLink: string; isLocked: boolean; name: string }>;
+  characters: Array<{
+    name: string;
+    imageLink: string;
+    isLocked: boolean;
+  }>;
 };
 
 export const CharacterGrid = ({ characters }: Props) => {
diff --git a/components/service/profile/CharacterGridHeader.tsx b/components/service/profile/CharacterGridHeader.tsx
@@ -3,7 +3,11 @@
 import { BookOpen } from 'lucide-react';
 import { Separator } from '@/components/ui/separator';
 
-export default function CharacterGridHeader() {
+type Props = {
+  characterCount: number;
+};
+
+export default function CharacterGridHeader({ characterCount }: Props) {
   return (
     <div className="bg-beige-base rounded-xl shadow-md p-4 w-105 max-w-md mx-auto mt-4">
       <div className="flex justify-between items-center">
@@ -12,7 +16,7 @@ export default function CharacterGridHeader() {
           <span className="text-lg font-bold text-black ml-2">고양이 도감</span>
         </div>
         <div className="text-sm font-semibold text-primary">
-          4 <span className="text-black mr-3">/ 30</span>
+          {characterCount} <span className="text-black mr-3">/ 30</span>
         </div>
       </div>
       <Separator className="bg-beige-deco mt-2 mb-2" />
diff --git a/components/service/profile/Profile.tsx b/components/service/profile/Profile.tsx
@@ -1,18 +1,66 @@
+'use client';
+
 import { Header } from '@/components/shared/Header';
 import { ProfileHeaderContent } from './ProfileHeaderContent';
 import { UserStats } from './UserStats';
 import CharacterGridHeader from './CharacterGridHeader';
 import { CharacterGrid } from './CharacterGrid';
-import { DUMMY_CHARACTER_LIST } from '@/constants/character';
+
+import { useUserStore } from '@/stores/user';
+import { getProfileItems, ProfileResponse } from '@/apis/profile';
+import { getCharacterItems, CharacterResponse } from '@/apis/character';
+import { useEffect, useState } from 'react';
+
 export const Profile = () => {
+  const user = useUserStore((state) => state.user);
+
+  const [profile, setProfile] = useState<ProfileResponse>();
+  const [characters, setCharacters] = useState<Array<CharacterResponse>>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      if (!user?.id) return;
+
+      try {
+        setIsLoading(true);
+        const profileResponse = await getProfileItems(user.id);
+        setProfile(profileResponse);
+        const characterResponse = await getCharacterItems(user.id);
+        setCharacters(characterResponse);
+      } catch (e) {
+        console.error('프로필 로딩 실패 :', e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchProfile();
+  }, [user?.id]);
+
+  if (isLoading) return <div>프로필 로딩 중...</div>;
+  if (!profile || !user?.id) return null;
+
   return (
     <div className="h-full bg-beige-light">
       <Header>
-        <ProfileHeaderContent />
+        <ProfileHeaderContent id={user.id} name={profile.name} email={profile.email} />
       </Header>
-      <UserStats />
-      <CharacterGridHeader />
-      <CharacterGrid characters={DUMMY_CHARACTER_LIST} />
+
+      <UserStats
+        level={profile.level}
+        exp={profile.exp}
+        completedTodoCount={profile.completedTodoCount}
+      />
+
+      <CharacterGridHeader characterCount={profile.characterCount} />
+      <CharacterGrid
+        characters={characters.map((c) => ({
+          imageLink: c.imageLink,
+          isLocked: !c.isCollected,
+          name: c.characterName,
+        }))}
+      />
     </div>
   );
 };
diff --git a/components/service/profile/ProfileHeaderContent.tsx b/components/service/profile/ProfileHeaderContent.tsx
@@ -5,16 +5,20 @@ import { Button } from '@/components/ui/button';
 import { useModalStore } from '@/stores/modal';
 import ProfileModal from '@/components/service/profile/ProfileModal/ProfileModal';
 import { logout } from '@/actions/logout';
-import { useUserStore } from '@/stores/user';
-export const ProfileHeaderContent = () => {
+
+type Props = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+export const ProfileHeaderContent = ({ id, name, email }: Props) => {
   const { openModal } = useModalStore();
-  const user = useUserStore((state) => state.user);
-  console.log('user', user);
 
   const clickProfile = () => {
     openModal({
       title: '나의 정보',
-      component: <ProfileModal />,
+      component: <ProfileModal id={id} email={email} />,
     });
   };
 
@@ -33,7 +37,7 @@ export const ProfileHeaderContent = () => {
           />
           <AvatarFallback className="bg-white">U</AvatarFallback>
         </Avatar>
-        <p className="text-sm font-medium">홍길동</p>
+        <p className="text-lg">{name}</p>
       </div>
       <div className="flex items-center gap-2">
         <Button
diff --git a/components/service/profile/ProfileModal/ProfileModal.tsx b/components/service/profile/ProfileModal/ProfileModal.tsx
@@ -3,6 +3,7 @@
 import { useForm, FormProvider } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { profileFormSchema, ProfileFormValues } from '@/schemas/profile';
+import { useState } from 'react';
 
 import { GenderRadio } from './GenderRadio';
 import { AgeInput } from './AgeInput';
@@ -13,8 +14,19 @@ import ConsentConfirm from './ConsentConfirm';
 import { PERSONAL_INFORMATION_AGREEMENT } from '@/constants/PERSONAL_INFORMATION_AGREEMENT';
 import { Button } from '@/components/ui/button';
 import { PencilLine } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { updateUserData, GenderEnum, ProfileRequest } from '@/apis/profile';
+
+type Props = {
+  id: string;
+  email: string;
+};
+
+export default function ProfileModal({ email, id }: Props) {
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-export default function ProfileModal() {
   const form = useForm<ProfileFormValues>({
     resolver: zodResolver(profileFormSchema),
     defaultValues: {
@@ -25,19 +37,50 @@ export default function ProfileModal() {
     },
   });
 
-  const onSubmit = form.handleSubmit((data) => {
-    console.log('제출 데이터:', data);
-    alert('제출 완료!');
+  const saveProfile = async (data: Omit<ProfileRequest, 'id'>, userId: string): Promise<void> => {
+    try {
+      setError(null);
+      setIsSubmitting(true);
+      await updateUserData(userId, data.sex, data.age, data.job);
+      toast.success('프로필이 저장되었어요!');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : '프로필 저장 실패';
+      setError(message);
+      toast.error(message);
+      throw err;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    try {
+      const ageValue = Number(data.age);
+      if (isNaN(ageValue) || ageValue <= 0) {
+        throw new Error('나이는 숫자로 입력해주세요.');
+      }
+      await saveProfile(
+        {
+          sex: data.gender,
+          age: Number(data.age),
+          job: data.job,
+        },
+        id
+      );
+      toast.success('프로필이 저장되었어요!');
+    } catch (e) {
+      console.error(e);
+    }
   });
 
-  const isSubmitDisabled = Object.keys(form.formState.errors).length > 0;
+  const isSubmitDisabled = isSubmitting || Object.keys(form.formState.errors).length > 0;
 
   return (
     <FormProvider {...form}>
       <form onSubmit={onSubmit}>
         <div className="p-4 space-y-3">
           <h2 className="text-lg text-secondary font-semibold">아이디</h2>
-          <p className="text-sm text-secondary mb-3">user0408</p>
+          <p className="text-sm text-secondary mb-3">{email}</p>
 
           <GenderRadio />
           <AgeInput />
@@ -56,7 +99,7 @@ export default function ProfileModal() {
             className="bg-transparent hover:text-primary transition-colors duration-200 cursor-pointer shadow-none border-none px-0 py-0 h-auto disabled:cursor-not-allowed"
           >
             <span className="flex items-center gap-1">
-              <PencilLine size={16} /> 완료
+              <PencilLine size={16} /> {isSubmitting ? '저장 중...' : '완료'}
             </span>
           </Button>
         </div>
diff --git a/components/service/profile/UserStats.tsx b/components/service/profile/UserStats.tsx
diff --git a/next.config.ts b/next.config.ts
