[Feat] 스터디 후기

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

@@ -0,0 +1,212 @@
+'use client';
+
+import Image from 'next/image';
+import { useState } from 'react';
+import KeywordReview from '@/entities/user/ui/keyword-review';
+import { MyReviewItem } from '@/features/study/api/types';
+import {
+  useMyNegativeKeywordsQuery,
+  useMyReviewsInfinityQuery,
+  useUserPositiveKeywordsQuery,
+} from '@/features/study/model/use-review-query';
+import { formatKoreaRelativeTime } from '@/shared/lib/time';
+
+export default function MyStudyReview() {
+  const { data: positiveKeywordsData } = useUserPositiveKeywordsQuery({
+    pageSize: 5,
+  });
+  const { data: negativeKeywordsData } = useMyNegativeKeywordsQuery({
+    pageSize: 5,
+  });
+  const {
+    data: myReviewsData,
+    fetchNextPage,
+    hasNextPage,
+  } = useMyReviewsInfinityQuery();
+
+  const positiveKeywords = positiveKeywordsData?.keywords || [];
+  const negativeKeywords = negativeKeywordsData?.keywords || [];
+
+  const positiveKeywordsCount = positiveKeywordsData?.totalCount || 0;
+  const negativeKeywordsCount = negativeKeywordsData?.totalCount || 0;
+
+  const totalKeywordsCount = positiveKeywordsCount + negativeKeywordsCount;
+
+  const myReviews = myReviewsData?.reviews || [];
+
+  return (
+    <>
+      <section>
+        <div className="mb-200">
+          <div className="flex items-center gap-100">
+            <div className="font-designer-20b text-text-default">받은 평가</div>
+            <div className="font-designer-20b text-text-default">
+              {totalKeywordsCount}
+            </div>
+          </div>
+
+          <span className="font-designer-14r text-text-subtle">
+            개선이 필요한 점은 나에게만 보여요
+          </span>
+        </div>
+
+        <div className="mb-400 grid grid-cols-2 gap-300">
+          <div className="rounded-100 border-border-subtle min-h-[280px] border p-200">
+            <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>
+              )}
+            </div>
+
+            <ul className="flex flex-col gap-50">
+              {positiveKeywords.length > 0 ? (
+                positiveKeywords.map((keyword) => (
+                  <KeywordReview
+                    key={keyword.id}
+                    content={keyword.content}
+                    count={keyword.count}
+                  />
+                ))
+              ) : (
+                <span className="text-text-subtle font-designer-14r text-center">
+                  아직 받은 평가가 없습니다.
+                </span>
+              )}
+            </ul>
+          </div>
+
+          <div className="rounded-100 border-border-subtle min-h-[280px] border p-200">
+            <div className="mb-200 flex justify-between">
+              <h3 className="font-designer-16b text-text-default">
+                개선이 필요한 점
+              </h3>
+
+              {negativeKeywords.length > 5 && (
+                <button className="font-designer-12m text-text-subtlest cursor-pointer">
+                  더보기
+                </button>
+              )}
+            </div>
+
+            <ul className="flex flex-col gap-50">
+              {negativeKeywords.length > 0 ? (
+                negativeKeywords.map((keyword) => (
+                  <KeywordReview
+                    key={keyword.id}
+                    content={keyword.content}
+                    count={keyword.count}
+                  />
+                ))
+              ) : (
+                <span className="text-text-subtle font-designer-14r text-center">
+                  아직 받은 평가가 없습니다.
+                </span>
+              )}
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div className="flex items-center gap-100">
+          <div className="font-designer-20b text-text-default">후기</div>
+          <div className="font-designer-20b text-text-default">
+            {myReviewsData?.totalCount || 0}
+          </div>
+        </div>
+
+        <span className="font-designer-14r text-text-subtle">
+          모든 후기는 나에게만 보여요
+        </span>
+
+        <ul>
+          {myReviews.length > 0 ? (
+            myReviews.map((review) => <Review key={review.id} data={review} />)
+          ) : (
+            <div className="text-text-subtle font-designer-14r flex h-[200px] items-center justify-center text-center">
+              아직까지 받은 후기가 없습니다.
+            </div>
+          )}
+
+          {hasNextPage && (
+            <button
+              className="font-designer-14m text-text-subtle hover:bg-background-accent-gray-default rounded-50 flex w-full cursor-pointer items-center justify-center py-200"
+              onClick={() => fetchNextPage()}
+            >
+              <span>더보기</span>
+
+              <Image
+                src="/icons/arrow-down.svg"
+                width={20}
+                height={20}
+                alt="후기 더보기"
+              />
+            </button>
+          )}
+        </ul>
+      </section>
+    </>
+  );
+}
+
+function Review({ data }: { data: MyReviewItem }) {
+  const [expanded, setExpanded] = useState(false);
+
+  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}
+          alt={`${data.writer.memberName} 프로필 이미지`}
+          className="rounded-full"
+        />
+
+        <div>
+          <span className="font-designer-14b text-text-default mr-50">
+            {data.writer.memberName}
+          </span>
+          <span className="font-designer-14r text-text-subtle mr-50">·</span>
+          <span className="font-designer-14r text-text-subtle">
+            {formatKoreaRelativeTime(data.reviewedAt)}
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <p
+          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>
+
+      <div>
+        <div className="text-text-subtle">
+          <span className="font-designer-14b mr-100">스터디 기간</span>
+          <span className="font-designer-13r">
+            {data.startDate.replace(/-/g, '.')} ~{' '}
+            {data.endDate.replace(/-/g, '.')}
+          </span>
+        </div>
+        <div className="text-text-subtle">
+          <span className="font-designer-14b mr-100">스터디 주제</span>
+          <span className="font-designer-13r">
+            {data.studySubjects.join(', ')}
+          </span>
+        </div>
+      </div>
+    </li>
+  );
+}

app/global.css

@@ -192,6 +192,10 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   --color-background-brand-default: var(--color-rose-500);
   --color-background-brand-strong: var(--color-rose-700);
 
+  --color-background-neutral-subtle: var(--color-gray-200);
+  --color-background-neutral-default: var(--color-gray-500);
+  --color-background-neutral-strong: var(--color-gray-900);
+
   --color-background-accent-blue-subtle: var(--color-blue-50);
   --color-background-accent-blue-default: var(--color-blue-100);
   --color-background-accent-blue-strong: var(--color-blue-600);
@@ -226,6 +230,10 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   --color-background-accent-yellow-default: var(--color-yellow-100);
   --color-background-accent-yellow-strong: var(--color-yellow-600);
 
+  --color-background-success-subtle: var(--color-green-300);
+  --color-background-success-default: var(--color-green-500);
+  --color-background-success-strong: var(--color-green-700);
+
   --color-fill-brand-default-default: var(--color-rose-500);
   --color-fill-brand-default-hover: var(--color-rose-600);
   --color-fill-brand-default-pressed: var(--color-rose-700);

next.config.ts

@@ -15,6 +15,11 @@ const nextConfig: NextConfig = {
         hostname: 'test-api.zeroone.it.kr',
         pathname: '/profile-image/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'api.zeroone.it.kr',
+        pathname: '/profile-image/**',
+      },
       {
         protocol: 'https',
         hostname: 'lh3.googleusercontent.com',

src/entities/user/ui/keyword-review.tsx

@@ -0,0 +1,14 @@
+export default function KeywordReview({
+  content,
+  count,
+}: {
+  content: string;
+  count: number;
+}) {
+  return (
+    <li className="bg-background-accent-gray-default text-text-default rounded-50 flex justify-between px-200 py-100">
+      <span className="font-designer-14r">{content}</span>
+      <span className="font-designer-14b">{count}</span>
+    </li>
+  );
+}

src/widgets/my-page/profileinfo-card.tsx → src/entities/user/ui/profile-info-card.tsx

@@ -6,7 +6,7 @@ interface Props {
 export default function ProfileInfoCard({ title, content }: Props) {
   return (
     <div className="rounded-75 bg-background-alternative flex gap-400 p-250">
-      <div className="font-designer-16b text-text-default w-1/5 shrink-0">
+      <div className="font-designer-16b text-text-default w-[132px] shrink-0">
         {title}
       </div>
       <div className="font-designer-15r text-text-default flex-1">

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

@@ -2,14 +2,16 @@
 
 import { XIcon } from 'lucide-react';
 import { useUserProfileQuery } from '@/entities/user/model/use-user-profile-query';
+import KeywordReview from '@/entities/user/ui/keyword-review';
+import ProfileInfoCard from '@/entities/user/ui/profile-info-card';
 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 { useUserPositiveKeywordsQuery } from '@/features/study/model/use-review-query';
 import UserAvatar from '@/shared/ui/avatar';
 import Badge from '@/shared/ui/badge';
 import { Modal } from '@/shared/ui/modal';
-import ProfileInfoCard from '@/widgets/my-page/profileinfo-card';
 
 interface UserProfileModalProps {
   memberId: number;
@@ -21,8 +23,13 @@ export default function UserProfileModal({
   trigger,
 }: UserProfileModalProps) {
   const { data: profile, isLoading, isError } = useUserProfileQuery(memberId);
+  const { data: positiveKeywordsData } = useUserPositiveKeywordsQuery({
+    memberId,
+  });
 
-  if (isLoading || isError || !profile) return null;
+  if (isLoading || isError || !profile || !positiveKeywordsData) return null;
+
+  const positiveKeywords = positiveKeywordsData?.keywords || [];
 
   return (
     <Modal.Root>
@@ -71,25 +78,22 @@ export default function UserProfileModal({
                   <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} />
-                      {profile.memberProfile.birthDate ??
-                        '생일을 입력해주세요!'}
+                      {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 ?? '번호를 입력해주세요!'}
+                      {profile.memberProfile.tel ?? ''}
                     </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} />
-                      {profile.memberProfile.githubLink?.url ??
-                        '깃허브 링크를 입력해주세요!'}
+                      {profile.memberProfile.githubLink?.url ?? ''}
                     </div>
                     <div className="font-designer-14r text-text-subtle flex items-center gap-100">
                       <GlobeIcon width={16} height={16} />
-                      {profile.memberProfile.blogOrSnsLink?.url ??
-                        '블로그 링크를 입력해주세요!'}
+                      {profile.memberProfile.blogOrSnsLink?.url ?? ''}
                     </div>
                   </div>
                 </div>
@@ -122,6 +126,35 @@ export default function UserProfileModal({
                 content={profile.memberInfo.studyPlan}
               />
             </div>
+
+            <div className="bg-border-subtle h-[2px] w-full" />
+
+            <div className="flex gap-400 px-250">
+              <span className="font-designer-16b text-text-default w-[132px] shrink-0">
+                받은 평가
+              </span>
+
+              <div className="text-text-default font-designer-14r">
+                {/* todo: 기획 fix되면 수정 */}
+                {/* <span>n명의 유저들이 이런 점이 좋다고 했어요.</span> */}
+
+                <ul className="flex flex-col gap-100">
+                  {positiveKeywords.length > 0 ? (
+                    positiveKeywords.map((keyword) => (
+                      <KeywordReview
+                        key={keyword.id}
+                        content={keyword.content}
+                        count={keyword.count}
+                      />
+                    ))
+                  ) : (
+                    <span className="text-text-subtle font-designer-14r">
+                      아직 받은 평가가 없습니다.
+                    </span>
+                  )}
+                </ul>
+              </div>
+            </div>
           </Modal.Body>
         </Modal.Content>
       </Modal.Portal>

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { MemberInfo } from '@/entities/user/api/types';
+import ProfileInfoCard from '@/entities/user/ui/profile-info-card';
 import ProfileInfoEditModal from '@/features/my-page/ui/profile-info-edit-modal';
-import ProfileInfoCard from '@/widgets/my-page/profileinfo-card';
 
 interface ProfileInfoProps {
   memberId: number;