Qnrr 466 조민주 성실 온도 UI 및 api 추가

app/(my)/my-page/page.tsx

@@ -15,7 +15,11 @@ export default async function MyPage() {
 
   return (
     <div className="flex flex-col gap-[26.67px]">
-      <Profile memberId={memberId} memberProfile={userProfile.memberProfile} />
+      <Profile
+        memberId={memberId}
+        memberProfile={userProfile.memberProfile}
+        sincerityTemp={userProfile.sincerityTemp}
+      />
       <ProfileInfo memberId={memberId} memberInfo={userProfile.memberInfo} />
     </div>
   );

next.config.ts

@@ -12,18 +12,18 @@ const nextConfig: NextConfig = {
       },
       {
         protocol: 'https',
-        hostname: 'test-api.zeroone.it.kr',
-        pathname: '/profile-image/**',
+        hostname: 'lh3.googleusercontent.com',
+        pathname: '/**', // 구글 이미지 전체 허용
       },
       {
         protocol: 'https',
-        hostname: 'api.zeroone.it.kr',
-        pathname: '/profile-image/**',
+        hostname: 'test-api.zeroone.it.kr',
+        pathname: '/**',
       },
       {
         protocol: 'https',
-        hostname: 'lh3.googleusercontent.com',
-        pathname: '/**', // 구글 이미지 전체 허용
+        hostname: 'www.zeroone.it.kr',
+        pathname: '/**',
       },
     ],
   },

package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dialog": "^1.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-switch": "^1.2.4",
     "@radix-ui/react-toggle": "^1.1.9",

src/entities/user/api/types.ts

@@ -65,19 +65,26 @@ export interface MemberProfile {
   simpleIntroduction: string;
   mbti: string;
   interests: Interest[];
-  hobbies: Hobby[];
+  hobbies?: Hobby[];
   birthDate: string;
   githubLink: SocialLink | undefined;
   blogOrSnsLink: SocialLink | undefined;
   tel: string;
 }
 
+export interface SincerityTemp {
+  temperature: number;
+  levelId: number;
+  levelName: string;
+}
+
 export interface GetUserProfileResponse {
   memberId: number;
   autoMatching: boolean;
   studyApplied: boolean;
   memberInfo: MemberInfo;
   memberProfile: MemberProfile;
+  sincerityTemp: SincerityTemp;
 }
 
 export interface PatchAutoMatchingParams {

src/entities/user/ui/my-profile-card.tsx

@@ -5,12 +5,15 @@ import React, { useState } from 'react';
 import { usePatchAutoMatchingMutation } from '@/entities/user/model/use-user-profile-query';
 import { useReviewReminder } from '@/features/study/lib/use-reminder-review';
 import StudyReviewModal from '@/features/study/ui/study-review-modal';
+import { getSincerityPresetByLevelId } from '@/shared/config/sincerity-temp-presets';
+import { cn } from '@/shared/shadcn/lib/utils';
 import UserAvatar from '@/shared/ui/avatar';
 import { ToggleSwitch } from '@/shared/ui/toggle';
 import AccessTimeIcon from 'public/icons/access_time.svg';
 import AssignmentIcon from 'public/icons/assignment.svg';
 import CodeIcon from 'public/icons/code.svg';
 import SettingIcon from 'public/icons/setting.svg';
+import { SincerityTemp } from '../api/types';
 
 interface MyProfileCardProps {
   memberId: number;
@@ -21,6 +24,7 @@ interface MyProfileCardProps {
   time?: string;
   techStacks?: string;
   studyApplied?: boolean;
+  sincerityTemp: SincerityTemp;
 }
 
 export default function MyProfileCard({
@@ -32,10 +36,12 @@ export default function MyProfileCard({
   time,
   techStacks,
   studyApplied,
+  sincerityTemp,
 }: MyProfileCardProps) {
   const { showReviewReminder, setShowReviewReminder } = useReviewReminder();
 
   const [enabled, setEnabled] = useState(matching);
+  const temperPreset = getSincerityPresetByLevelId(sincerityTemp.levelId);
 
   const { mutate: patchAutoMatching, isPending } =
     usePatchAutoMatchingMutation();
@@ -72,9 +78,20 @@ export default function MyProfileCard({
               <SettingIcon />
             </Link>
           </div>
-          <div className="flex flex-col">
-            <div className="font-designer-18b">
-              {name?.trim() || '비회원'}님
+          <div className="flex flex-col gap-75">
+            <div className="flex flex-row items-center gap-50">
+              <div className="font-designer-18b">
+                {name?.trim() || '비회원'}님
+              </div>
+              <div
+                className={cn(
+                  'font-designer-13m rounded-full px-150 py-50',
+                  temperPreset.bgClass,
+                  temperPreset.textClass,
+                )}
+              >
+                {sincerityTemp.temperature.toFixed(1)} ℃
+              </div>
             </div>
             <div className="flex flex-row items-center gap-100">
               <span className="font-designer-14r text-gray-800">

src/entities/user/ui/user-profile-modal.tsx

@@ -9,6 +9,7 @@ import GithubIcon from '@/features/my-page/ui/icon/github-logo.svg';
 import GlobeIcon from '@/features/my-page/ui/icon/globe-simple.svg';
 import PhoneIcon from '@/features/my-page/ui/icon/phone.svg';
 import { useUserPositiveKeywordsQuery } from '@/features/study/model/use-review-query';
+import { getSincerityPresetByLevelId } from '@/shared/config/sincerity-temp-presets';
 import UserAvatar from '@/shared/ui/avatar';
 import Badge from '@/shared/ui/badge';
 import { Modal } from '@/shared/ui/modal';
@@ -30,6 +31,9 @@ export default function UserProfileModal({
   if (isLoading || isError || !profile || !positiveKeywordsData) return null;
 
   const positiveKeywords = positiveKeywordsData?.keywords || [];
+  const temperPreset = getSincerityPresetByLevelId(
+    profile.sincerityTemp.levelId,
+  );
 
   return (
     <Modal.Root>
@@ -68,33 +72,55 @@ export default function UserProfileModal({
                       </Badge>
                     ))}
                 </div>
-                <div className="font-designer-28b pb-50">
-                  {profile.memberProfile.memberName}
+                <div className="flex items-center justify-start">
+                  <div className="font-designer-28b pb-50">
+                    {profile.memberProfile.memberName}
+                  </div>
+
+                  <span
+                    className="bg-border-default mx-150 block h-[12px] w-[1px]"
+                    aria-hidden="true"
+                  />
+
+                  <div className="flex items-center">
+                    <temperPreset.Icon className="h-400 w-400" />
+                    <span
+                      className={`${temperPreset.textClass} font-designer-14b pl-[2px]`}
+                    >
+                      {profile.sincerityTemp.temperature.toFixed(1)} ℃
+                    </span>
+                  </div>
                 </div>
                 <div className="font-designer-15m pb-300">
                   {profile.memberProfile.simpleIntroduction}
                 </div>
-                <div className="flex gap-250">
-                  <div className="flex flex-col gap-100">
-                    <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                      <CakeIcon width={16} height={16} />
+
+                <div className="grid grid-cols-2 gap-x-250 gap-y-100">
+                  <div className="flex items-center gap-100">
+                    <CakeIcon />
+                    <span className="font-designer-14r text-text-subtle leading-none">
                       {profile.memberProfile.birthDate ?? ''}
-                    </div>
-                    <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                      <PhoneIcon width={16} height={16} />
-                      {profile.memberProfile.tel ?? ''}
-                    </div>
+                    </span>
                   </div>
 
-                  <div className="flex flex-col gap-100">
-                    <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                      <GithubIcon width={16} height={16} />
+                  <div className="flex items-center gap-100">
+                    <GithubIcon />
+                    <span className="font-designer-14r text-text-subtle leading-none">
                       {profile.memberProfile.githubLink?.url ?? ''}
-                    </div>
-                    <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                      <GlobeIcon width={16} height={16} />
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-100">
+                    <PhoneIcon />
+                    <span className="font-designer-14r text-text-subtle leading-none">
+                      {profile.memberProfile.tel ?? ''}
+                    </span>
+                  </div>
+
+                  <div className="flex items-center gap-100">
+                    <GlobeIcon />
+                    <span className="font-designer-14r text-text-subtle leading-none">
                       {profile.memberProfile.blogOrSnsLink?.url ?? ''}
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>

src/features/my-page/ui/profile.tsx

@@ -1,18 +1,29 @@
-import { MemberProfile } from '@/entities/user/api/types';
+import Image from 'next/image';
+import { MemberProfile, SincerityTemp } from '@/entities/user/api/types';
 import CakeIcon from '@/features/my-page/ui/icon/cake.svg';
 import GithubIcon from '@/features/my-page/ui/icon/github-logo.svg';
 import GlobeIcon from '@/features/my-page/ui/icon/globe-simple.svg';
 import PhoneIcon from '@/features/my-page/ui/icon/phone.svg';
 import ProfileEditModal from '@/features/my-page/ui/profile-edit-modal';
+import { getSincerityPresetByLevelId } from '@/shared/config/sincerity-temp-presets';
+import { cn } from '@/shared/shadcn/lib/utils';
 import UserAvatar from '@/shared/ui/avatar';
 import Badge from '@/shared/ui/badge';
+import Progress from '@/shared/ui/progress';
 
 interface ProfileProps {
   memberId: number;
   memberProfile: MemberProfile;
+  sincerityTemp: SincerityTemp;
 }
 
-export default function Profile({ memberId, memberProfile }: ProfileProps) {
+export default function Profile({
+  memberId,
+  memberProfile,
+  sincerityTemp,
+}: ProfileProps) {
+  const temperPreset = getSincerityPresetByLevelId(sincerityTemp.levelId);
+
   return (
     <div className="flex w-full max-w-[80%] gap-300 px-200">
       <UserAvatar
@@ -38,29 +49,59 @@ export default function Profile({ memberId, memberProfile }: ProfileProps) {
             </p>
           </div>
 
-          <div className="flex gap-250">
-            <div className="flex flex-col gap-100">
-              <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                <CakeIcon width={16} height={16} />
+          <div className="grid grid-cols-[200px_1fr] gap-y-100">
+            <div className="flex items-center gap-100">
+              <CakeIcon />
+              <span className="font-designer-14r text-text-subtle leading-none">
                 {memberProfile.birthDate ?? '생일을 입력해주세요!'}
-              </div>
-              <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                <PhoneIcon width={16} height={16} />
+              </span>
+            </div>
+            <div className="flex items-center gap-100">
+              <GithubIcon />
+              <span className="font-designer-14r text-text-subtle leading-none">
+                {memberProfile.githubLink?.url ?? '깃허브 링크를 입력해주세요!'}
+              </span>
+            </div>
+            <div className="flex items-center gap-100">
+              <PhoneIcon />
+              <span className="font-designer-14r text-text-subtle leading-none">
                 {memberProfile.tel ?? '번호를 입력해주세요!'}
-              </div>
+              </span>
             </div>
+            <div className="flex items-center gap-100">
+              <GlobeIcon />
+              <span className="font-designer-14r text-text-subtle leading-none">
+                {memberProfile.blogOrSnsLink?.url ??
+                  '블로그 링크를 입력해주세요!'}
+              </span>
+            </div>
+          </div>
 
-            <div className="flex flex-col gap-100">
-              <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                <GithubIcon width={16} height={16} />
-                {memberProfile.githubLink?.url || '깃허브 링크를 입력해주세요!'}
+          <div className="flex flex-col gap-100">
+            <div className="flex flex-row justify-between">
+              <div className="flex flex-row items-center gap-50">
+                <span>성실 온도</span>
+                <Image
+                  src="/images/help_outline.png"
+                  alt="성실온도 설명"
+                  width={16}
+                  height={16}
+                />
               </div>
-              <div className="font-designer-14r text-text-subtle flex items-center gap-100">
-                <GlobeIcon width={16} height={16} />
-                {memberProfile.blogOrSnsLink?.url ||
-                  '블로그 링크를 입력해주세요!'}
+              <div
+                className={cn(
+                  'font-designer-14b flex flex-row items-center gap-[2px]',
+                  temperPreset.textClass,
+                )}
+              >
+                <temperPreset.Icon />
+                <div>{sincerityTemp.temperature.toFixed(1)} ℃</div>
               </div>
             </div>
+            <Progress
+              value={sincerityTemp.temperature}
+              indicatorColor={temperPreset.indicatorClass}
+            />
           </div>
         </div>