[Feat/#69] 마이페이지 API 연결 & 글로우 표기 변경(온도)

src/app/(layout)/mypage/_components/MypageData/index.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+import IconEdit from '@/assets/icons/icon-edit.svg';
+import IconProfilePic from '@/assets/icons/icon-profilepic.svg';
+import { usePatchUserProfileImage } from '@/hooks/user/usePatchUserProfileImage';
+
+interface MypageDataProps {
+  profileImage?: string;
+  nickname: string;
+  onNicknameChange: (nickname: string) => void;
+  isNicknameUpdating?: boolean;
+}
+
+export default function MypageData({
+  profileImage,
+  nickname,
+  onNicknameChange,
+  isNicknameUpdating,
+}: MypageDataProps) {
+  const [currentNickname, setCurrentNickname] = useState(nickname);
+  const { mutate: patchProfileImage, isPending: isPatchingProfileImage } =
+    usePatchUserProfileImage();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setCurrentNickname(nickname);
+  }, [nickname]);
+
+  const handleNicknameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurrentNickname(e.target.value);
+  };
+
+  const handleNicknameBlur = () => {
+    if (nickname !== currentNickname) {
+      onNicknameChange(currentNickname);
+    }
+  };
+
+  const handleProfileImageEditClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleProfileImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      const formData = new FormData();
+      formData.append('image', file);
+      patchProfileImage(formData, {
+        onError: (err) => {
+          console.error('프로필 이미지 변경 실패:', err);
+        },
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col">
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleProfileImageChange}
+        accept="image/*"
+        style={{ display: 'none' }}
+      />
+      <div className="flex items-end gap-4">
+        <div className="bg-layout-grey2 h-[200px] w-[200px] overflow-hidden rounded-[12.5px]">
+          {profileImage ? (
+            <Image
+              src={profileImage}
+              alt="프로필 이미지"
+              width={200}
+              height={200}
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div className="bg-layout-grey3 flex h-full w-full items-center justify-center">
+              <IconProfilePic aria-label="기본 프로필 이미지" />
+            </div>
+          )}
+        </div>
+
+        <button
+          type="button"
+          className="button-sm text-layout-grey6 flex items-center gap-1 disabled:opacity-50"
+          onClick={handleProfileImageEditClick}
+          disabled={isPatchingProfileImage}
+        >
+          <IconEdit aria-label="편집 아이콘" />
+          {isPatchingProfileImage ? '업로드 중...' : '프로필 사진 수정'}
+        </button>
+      </div>
+
+      <div className="mt-10 flex h-[44px] w-[473px] items-center justify-between">
+        <span className="button-lg text-layout-grey6">닉네임</span>
+        <div className="border-layout-grey5 flex h-[44px] w-[400px] items-center rounded-[6px] border px-3">
+          <input
+            type="text"
+            value={currentNickname}
+            onChange={handleNicknameInputChange}
+            onBlur={handleNicknameBlur}
+            className="body-lg text-layout-grey7 h-full w-full bg-transparent outline-none disabled:opacity-50"
+            placeholder="닉네임을 입력하세요"
+            disabled={isNicknameUpdating}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(layout)/mypage/_components/MypageGlow/index.tsx

@@ -0,0 +1,76 @@
+import IconGlowScore from '@/assets/icons/icon-glow-score-big.svg';
+
+interface MypageGlowProps {
+  glowScore: number;
+}
+
+export default function MypageGlow({ glowScore }: MypageGlowProps) {
+  const getTemperatureStyle = (score: number) => {
+    // 0~100 범위로 제한
+    const limitedScore = Math.min(Math.max(score, 0), 100);
+
+    if (limitedScore >= 90) {
+      return {
+        background: '#16135B', // purple7
+        text: '#F0EFFA',
+        label: '셰익스피어, 시대를 초월한 문장의 마술사',
+      };
+    } else if (limitedScore >= 75) {
+      return {
+        background: '#403AC0', // purple5
+        text: '#F0EFFA',
+        label: '헤밍웨이, 간결하고 힘있는 문장의 대가',
+      };
+    } else if (limitedScore >= 60) {
+      return {
+        background: '#7D76FA', // purple4
+        text: '#F0EFFA',
+        label: '무라카미, 독특한 문체로 매력을 전하는 작가',
+      };
+    } else if (limitedScore >= 45) {
+      return {
+        background: '#B3B0F9', // purple3
+        text: '#161184',
+        label: '에세이스트, 일상의 감성을 글로 표현하는 작가',
+      };
+    } else if (limitedScore >= 30) {
+      return {
+        background: '#E2E0FB', // purple2
+        text: '#161184',
+        label: '필사가, 꾸준한 글쓰기로 성장하는 중',
+      };
+    } else {
+      return {
+        background: '#F0EFFA', // purple1
+        text: '#161184',
+        label: '새싹, 글쓰기를 시작하는 첫 걸음',
+      };
+    }
+  };
+
+  const style = getTemperatureStyle(glowScore);
+
+  return (
+    <div className="bg-layout-grey1 h-[145px] w-[473px] rounded-[6px] p-4">
+      <div className="flex flex-col">
+        <div className="flex items-center gap-3">
+          <IconGlowScore aria-label="글로우 점수 아이콘" />
+          <div className={`rounded-full px-3 py-1`} style={{ backgroundColor: style.background }}>
+            <span className="button-lg" style={{ color: style.text }}>
+              {glowScore.toFixed(1)}℃
+            </span>
+          </div>
+          <span className="detail text-layout-grey5">{style.label}</span>
+        </div>
+
+        <p className="detail text-layout-grey6 mt-2">
+          온도(글로우)는 나의 활동, 받은 좋아요 수 등을 통해 계산됩니다.
+        </p>
+
+        <div className="mt-4">
+          <p className="button-lg text-layout-grey6">나의 템플릿 작성 내역</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(layout)/mypage/page.tsx

@@ -1,43 +1,64 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import MypageData from './_components/MypageData';
-import MypageGlow from './_components/MypageGlow';
-import MypageCancelAccount from './_components/MypageCancelAccount';
+import MypageData from './_components/MypageData/index';
+import MypageGlow from './_components/MypageGlow/index';
+import MypageCancelAccount from './_components/MypageCancelAccount/index';
+import { useUserMe } from '@/hooks/user/useUserMe';
+import { usePatchUserNickname } from '@/hooks/user/usePatchUserNickname';
 
 export default function MyPage() {
   const [nickname, setNickname] = useState('');
-  const glowScore = 1213;
+  const { data: userData, isLoading, error } = useUserMe();
+  const { mutate: patchNickname, isPending: isPatchingNickname } = usePatchUserNickname();
 
   useEffect(() => {
-    const userStr = localStorage.getItem('user');
-    if (userStr) {
-      try {
-        const userData = JSON.parse(userStr);
-        if (userData.name) {
-          setNickname(userData.name);
-        }
-      } catch (error) {
-        console.error('Failed to parse user data:', error);
+    if (userData) {
+      if (userData.name) {
+        setNickname(userData.name);
       }
     }
-  }, []);
+  }, [userData]);
 
   const handleNicknameChange = (newNickname: string) => {
     setNickname(newNickname);
+    patchNickname(
+      { nickname: newNickname },
+      {
+        onError: (err) => {
+          if (userData?.name) {
+            setNickname(userData.name);
+          }
+          console.error('닉네임 변경 실패:', err);
+        },
+      },
+    );
   };
 
+  if (isLoading) {
+    return <div>로딩 중...</div>;
+  }
+
+  if (error) {
+    return <div>에러 발생: {error.message}</div>;
+  }
+
   return (
     <div className="flex justify-center">
       <div className="flex h-[664px] w-[473px] flex-col">
         <h1 className="title-lg text-layout-grey7">마이페이지</h1>
 
         <div className="mt-[60px]">
-          <MypageData nickname={nickname} onNicknameChange={handleNicknameChange} />
+          <MypageData
+            profileImage={userData?.profileImageUrl}
+            nickname={nickname}
+            onNicknameChange={handleNicknameChange}
+            isNicknameUpdating={isPatchingNickname}
+          />
         </div>
 
         <div className="mt-10 flex justify-center">
-          <MypageGlow glowScore={glowScore} />
+          {userData?.score !== undefined && <MypageGlow glowScore={userData.score} />}
         </div>
 
         <div className="mt-[39px]">