운영 서버 반영

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>
   );

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

@@ -1,20 +1,23 @@
 'use client';
 
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import KeywordReview from '@/entities/user/ui/keyword-review';
+import MoreKeywordReviewModal from '@/entities/user/ui/more-keyword-review-modal';
 import { MyReviewItem } from '@/features/study/api/types';
 import {
   useMyNegativeKeywordsQuery,
   useMyReviewsInfinityQuery,
   useUserPositiveKeywordsQuery,
 } from '@/features/study/model/use-review-query';
 import { formatKoreaRelativeTime } from '@/shared/lib/time';
+import UserAvatar from '@/shared/ui/avatar';
 
 export default function MyStudyReview() {
   const { data: positiveKeywordsData } = useUserPositiveKeywordsQuery({
     pageSize: 5,
   });
+
   const { data: negativeKeywordsData } = useMyNegativeKeywordsQuery({
     pageSize: 5,
   });
@@ -55,11 +58,7 @@ export default function MyStudyReview() {
             <div className="mb-200 flex justify-between">
               <h3 className="font-designer-16b text-text-default">좋았던 점</h3>
 
-              {positiveKeywords.length > 5 && (
-                <button className="font-designer-12m text-text-subtlest cursor-pointer">
-                  더보기
-                </button>
-              )}
+              <MorePositiveKeywordsModal />
             </div>
 
             <ul className="flex flex-col gap-50">
@@ -85,11 +84,7 @@ export default function MyStudyReview() {
                 개선이 필요한 점
               </h3>
 
-              {negativeKeywords.length > 5 && (
-                <button className="font-designer-12m text-text-subtlest cursor-pointer">
-                  더보기
-                </button>
-              )}
+              <MoreNegativeKeywordsModal />
             </div>
 
             <ul className="flex flex-col gap-50">
@@ -153,18 +148,52 @@ export default function MyStudyReview() {
   );
 }
 
+function MorePositiveKeywordsModal() {
+  const { data: allPositiveKeywordsData } = useUserPositiveKeywordsQuery({});
+
+  const allPositiveKeywords = allPositiveKeywordsData?.keywords || [];
+
+  return (
+    <MoreKeywordReviewModal title="좋았던 점" keywords={allPositiveKeywords} />
+  );
+}
+
+function MoreNegativeKeywordsModal() {
+  const { data: allNegativeKeywordsData } = useMyNegativeKeywordsQuery({});
+
+  const allNegativeKeywords = allNegativeKeywordsData?.keywords || [];
+
+  return (
+    <MoreKeywordReviewModal
+      title="개선이 필요한 점"
+      keywords={allNegativeKeywords}
+    />
+  );
+}
+
 function Review({ data }: { data: MyReviewItem }) {
   const [expanded, setExpanded] = useState(false);
+  const [showButton, setShowButton] = useState(false);
+  const contentRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const lineHeight = parseInt(
+        window.getComputedStyle(contentRef.current).lineHeight,
+        10,
+      );
+      const maxHeight = lineHeight * 3; // 3줄 기준
+      setShowButton(contentRef.current.scrollHeight > maxHeight);
+    }
+  }, [data.content]);
 
   return (
     <li className="border-b-border-subtle flex flex-col gap-150 border-b py-250">
       <div className="flex items-center gap-150">
-        <Image
-          src={data.writer.profileImageUrl || '/profile-default.svg'}
-          width={32}
-          height={32}
+        <UserAvatar
+          size={32}
+          image={data.writer.profileImageUrl}
           alt={`${data.writer.memberName} 프로필 이미지`}
-          className="rounded-full"
         />
 
         <div>
@@ -180,18 +209,23 @@ function Review({ data }: { data: MyReviewItem }) {
 
       <div>
         <p
-          className={`text-text-default font-designer-15r ${expanded ? 'line-clamp-none' : 'line-clamp-3'}`}
+          ref={contentRef}
+          className={`text-text-default font-designer-15r ${
+            expanded ? 'line-clamp-none' : 'line-clamp-3'
+          }`}
         >
           {data.content}
         </p>
-        <button
-          className="font-designer-14r text-text-subtlest cursor-pointer"
-          onClick={() => setExpanded(!expanded)}
-        >
-          {expanded ? '접기' : '더보기'}
-        </button>
-      </div>
 
+        {showButton && (
+          <button
+            className="font-designer-14r text-text-subtlest cursor-pointer"
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? '접기' : '더보기'}
+          </button>
+        )}
+      </div>
       <div>
         <div className="text-text-subtle">
           <span className="font-designer-14b mr-100">스터디 기간</span>
@@ -203,7 +237,7 @@ function Review({ data }: { data: MyReviewItem }) {
         <div className="text-text-subtle">
           <span className="font-designer-14b mr-100">스터디 주제</span>
           <span className="font-designer-13r">
-            {data.studySubjects.join(', ')}
+            {data.studySubjects.filter((subject) => subject).join(', ')}
           </span>
         </div>
       </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/more-keyword-review-modal.tsx

@@ -0,0 +1,44 @@
+import { XIcon } from 'lucide-react';
+import { Modal } from '@/shared/ui/modal';
+import KeywordReview from './keyword-review';
+
+export default function MoreKeywordReviewModal({
+  title,
+  keywords,
+}: {
+  title: string;
+  keywords: { id: number; content: string; count: number }[];
+}) {
+  return (
+    <Modal.Root>
+      <Modal.Trigger asChild>
+        {keywords.length > 5 && (
+          <button className="font-designer-12m text-text-subtlest cursor-pointer">
+            더보기
+          </button>
+        )}
+      </Modal.Trigger>
+      <Modal.Portal>
+        <Modal.Overlay />
+        <Modal.Content size="large" className="w-full">
+          <Modal.Header className="border-border-default flex justify-between border-b">
+            <Modal.Title className="font-designer-20b text-text-strong">
+              {title}
+            </Modal.Title>
+            <Modal.Close>
+              <XIcon />
+            </Modal.Close>
+          </Modal.Header>
+
+          <Modal.Body className="flex flex-col gap-400 p-400">
+            <ul className="flex flex-col gap-50">
+              {keywords.map((keyword) => (
+                <KeywordReview key={keyword.id} {...keyword} />
+              ))}
+            </ul>
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Portal>
+    </Modal.Root>
+  );
+}