Merge pull request #144 from DeviceLife-Official/feature/141-combo_eval-api

feat: 조합평가 api 연동

Author: Seony777

src/apis/combo/deleteComboDevice.ts

@@ -2,6 +2,7 @@ import { axiosInstance } from '@/apis/axios/axios';
 import type { DeleteComboDeviceResponse } from '@/types/combo/combo';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { queryKey } from '@/constants/queryKey';
+import { usePollComboEvaluation } from '@/hooks/usePollComboEvaluation';
 
 // 조합에서 기기 삭제
 export const deleteComboDevice = async (
@@ -16,14 +17,17 @@ export const deleteComboDevice = async (
 
 export const useDeleteComboDevice = () => {
   const queryClient = useQueryClient();
+  const { poll } = usePollComboEvaluation();
 
   return useMutation({
     mutationFn: ({ comboId, deviceId }: { comboId: number; deviceId: number }) =>
       deleteComboDevice(comboId, deviceId),
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       // 조합 목록과 상세 정보 캐시 무효화
       queryClient.invalidateQueries({ queryKey: [queryKey.COMBOS] });
       queryClient.invalidateQueries({ queryKey: [queryKey.COMBO_DETAIL] });
+      // 조합 평가 폴링 시작
+      poll(variables.comboId);
     },
   });
 };

src/apis/combo/getComboEvaluation.ts

@@ -0,0 +1,24 @@
+import { axiosInstance } from '@/apis/axios/axios';
+import type { GetComboEvaluationResponse, ComboEvaluationResult } from '@/types/combo/evaluation';
+import { useQuery } from '@tanstack/react-query';
+import { queryKey } from '@/constants/queryKey';
+
+// 조합 평가 점수 조회 API
+export const getComboEvaluation = async (comboId: number): Promise<ComboEvaluationResult> => {
+  const { data } = await axiosInstance.get<GetComboEvaluationResponse>(
+    `/api/combos/${comboId}/evaluation`
+  );
+  return data.result!;
+};
+
+// 조합 평가 조회 훅 (캐시 구독 + 초기 fetch)
+export const useComboEvaluation = (comboId: number | undefined) => {
+  return useQuery({
+    queryKey: [queryKey.COMBO_EVALUATION, comboId],
+    queryFn: () => getComboEvaluation(comboId!),
+    enabled: !!comboId,
+    staleTime: Infinity, // 폴링이 setQueryData로 갱신하므로 자동 refetch 불필요
+    retry: false, // 404(EVAL_4041)일 때 무한 재시도 방지
+  });
+};
+

src/apis/combo/postComboDevices.ts

@@ -5,6 +5,7 @@ import type {
 } from '@/types/combo/combo';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { queryKey } from '@/constants/queryKey';
+import { usePollComboEvaluation } from '@/hooks/usePollComboEvaluation';
 
 // 조합에 기기 추가
 export const postComboDevice = async (
@@ -20,13 +21,16 @@ export const postComboDevice = async (
 
 export const usePostComboDevice = () => {
   const queryClient = useQueryClient();
+  const { poll } = usePollComboEvaluation();
 
   return useMutation({
     mutationFn: ({ comboId, deviceId }: { comboId: number; deviceId: number }) =>
       postComboDevice(comboId, { deviceId }),
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       // 조합 목록/상세 캐시 무효화
       queryClient.invalidateQueries({ queryKey: [queryKey.COMBOS] });
+      // 조합 평가 폴링 시작
+      poll(variables.comboId);
     },
   });
 };

src/components/Combination/CombinationEvaluationCard.tsx

@@ -0,0 +1,52 @@
+import type { CombinationName, CombinationStatus } from '@/constants/combination';
+import {
+  COMBINATION_NAME_STYLE_MAP,
+  COMBINATION_STATUS_STYLE_MAP,
+} from '@/constants/combination';
+import type { Grade } from '@/constants/evaluation/grade';
+
+interface CombinationEvaluationCardProps {
+  category: CombinationName;
+  grade: Grade;
+  description: string;
+  tags: string[];
+}
+
+// 등급 텍스트 색상 클래스 추출 (COMBINATION_STATUS_STYLE_MAP에서 색상만 추출)
+const getGradeTextColorClass = (grade: Grade): string => {
+  const statusStyle = COMBINATION_STATUS_STYLE_MAP[grade as CombinationStatus];
+  // 'font-caption-sm text-optimal' 형태에서 색상 부분만 추출
+  return statusStyle.split(' ').find((cls) => cls.startsWith('text-')) ?? 'text-optimal';
+};
+
+const CombinationEvaluationCard = ({
+  category,
+  grade,
+  description,
+  tags,
+}: CombinationEvaluationCardProps) => {
+  const gradeTextColorClass = getGradeTextColorClass(grade);
+  const tagStyleClass = COMBINATION_NAME_STYLE_MAP[category];
+
+  return (
+    <div className="bg-white rounded-card px-42 py-30 flex flex-col gap-30">
+      <div className="flex items-center gap-16">
+        <p className="font-heading-4 text-black">{category}:</p>
+        <p className={`font-heading-4 ${gradeTextColorClass}`}>{grade}</p>
+      </div>
+      <p className="font-body-3-r text-black leading-28">{description}</p>
+      <div className="flex gap-8 -ml-4">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className={`${tagStyleClass} font-body-2-sm px-12 py-8 rounded-full`}
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CombinationEvaluationCard;

src/components/Combination/Stage1Section.tsx

@@ -9,7 +9,7 @@ const Stage1Section = () => {
           <p className="font-body-4-sm text-black text-center">
             나만의 기기 조합을 만들어보세요! <br /> 조합명을 입력하고, 조합 생성하기 버튼을 누르면
             <br />
-            나만의 조합이 생성돼요!
+            나만의 조합이 생성됩니다.
           </p>
         </div>
         <Stage1 className="w-236 h-60" />

src/components/Combination/Stage2Section.tsx

@@ -10,7 +10,7 @@ const Stage2Section = () => {
             기기검색 창에서 원하는 기기들을 골라
             <br /> 내가 만든 조합에 담아보세요!
             <br /> 이때 한 조합에는 동일한 카테고리의 기기를 <br />
-            하나씩만 담는 것을 추천해요!
+            하나씩만 담는 것을 추천합니다.
           </p>
         </div>
         <Stage2 className="w-176 h-128" />

src/constants/combination.ts

@@ -1,5 +1,5 @@
 export const COMBINATION_NAMES = ['연동성', '편의성', '라이프스타일'] as const;
-export const COMBINATION_STATUSES = ['최적', '보통', '미흡', '-'] as const;
+export const COMBINATION_STATUSES = ['최적', '양호', '보통', '미흡', '-'] as const;
 
 export type CombinationName = (typeof COMBINATION_NAMES)[number];
 export type CombinationStatus = (typeof COMBINATION_STATUSES)[number];
@@ -12,6 +12,7 @@ export const COMBINATION_NAME_STYLE_MAP: Record<CombinationName, string> = {
 
 export const COMBINATION_STATUS_STYLE_MAP: Record<CombinationStatus, string> = {
   최적: 'font-caption-sm text-optimal',
+  양호: 'font-caption-sm text-good',
   보통: 'font-caption-sm text-normal',
   미흡: 'font-caption-sm text-poor',
   '-': 'font-caption-sm text-optimal',

src/constants/evaluation/connectivity.ts

@@ -0,0 +1,32 @@
+import { GRADE } from './grade';
+import type { Grade } from './grade';
+
+// 연동성 카드 데이터 타입
+export type EvaluationCardData = {
+  tags: string[];
+  text: string;
+};
+
+// 연동성 매핑 테이블
+export const CONNECTIVITY: Record<Grade, EvaluationCardData> = {
+  [GRADE.BEST]: {
+    tags: ['OS통합', '완벽 호환성'],
+    text: '모든 기기가 하나의 OS 생태계로 완벽하게 통합되어 있습니다. 호환성 기준이 다수 충족된 최상의 상태입니다.',
+  },
+  [GRADE.GOOD]: {
+    tags: ['안정적 연결', '품질 우수'],
+    text: '주요 기기 간의 연결이 안정적입니다. 다만 조합에 따라 마우스 제스처나 오디오 코덱 등 세부적인 부가 기능 중 일부가 제한적으로 작동할 수 있습니다.',
+  },
+  [GRADE.NORMAL]: {
+    tags: ['OS 혼합'],
+    text: '기본적인 연결은 가능하나 서로 다른 OS가 섞여 있습니다. 키보드 레이아웃 불일치나 단축키 활용에 제약이 예상되어, 기기 간의 시너지를 확인해 볼 필요가 있습니다.',
+  },
+  [GRADE.POOR]: {
+    tags: ['OS 고립', '연동성 부족'],
+    text: '스마트워치와 스마트폰의 OS가 달라 핵심 기능을 쓸 수 없거나, 연결 대상이 없어 활용도가 떨어지는 기기가 포함되어 있습니다. 연동성이 매우 낮은 조합입니다.',
+  },
+  [GRADE.UNKNOWN]: {
+    tags: ['-'],
+    text: '-',
+  },
+};

src/constants/evaluation/convenience.ts

@@ -0,0 +1,27 @@
+import { GRADE } from './grade';
+import type { Grade } from './grade';
+import type { EvaluationCardData } from './connectivity';
+
+// 편의성 매핑 테이블
+export const CONVENIENCE: Record<Grade, EvaluationCardData> = {
+  [GRADE.BEST]: {
+    tags: ['USB-C', '배터리 효율 우수'],
+    text: '모든 기기가 USB-C로 통일되었으며 배터리 효율 또한 우수입니다. 단일 충전기로 노트북까지 완벽하게 커버 가능한 이상적인 환경입니다.',
+  },
+  [GRADE.GOOD]: {
+    tags: ['안정적 충전', '멀티태스킹', '배터리 준수'],
+    text: '전반적인 배터리 효율과 충전 속도가 안정적입니다. 무선 충전이나 고출력 PD 충전 등 핵심 편의 기능 중 일부가 포함되어 관리가 수월합니다.',
+  },
+  [GRADE.NORMAL]: {
+    tags: ['단자 혼재', '충전 속도 확인', '포트 배분'],
+    text: '사용에 큰 지장은 없으나, 기기에 따라 충전 단자가 다르거나 충전기 출력이 다소 낮을 수 있습니다. 동시 충전 시 포트 배분을 고려해야 합니다.',
+  },
+  [GRADE.POOR]: {
+    tags: ['어댑터 필요', '단자 불일치', '충전 병목'],
+    text: '노트북 충전을 위해 전용 어댑터가 필요하거나 충전 포트가 기기 수에 비해 부족합니다. 단자 혼재로 인해 케이블 관리가 번거로운 조합입니다.',
+  },
+  [GRADE.UNKNOWN]: {
+    tags: ['-'],
+    text: '-',
+  },
+};

src/constants/evaluation/grade.ts

@@ -0,0 +1,17 @@
+// 등급 상수 및 타입 정의
+
+export const GRADE = {
+  BEST: '최적',
+  GOOD: '양호',
+  NORMAL: '보통',
+  POOR: '미흡',
+  UNKNOWN: '-',
+} as const;
+
+export type Grade = (typeof GRADE)[keyof typeof GRADE];
+
+// API 응답 등급 문자열 → Grade 타입 변환
+export const toGrade = (raw: string): Grade => {
+  const valid: string[] = [GRADE.BEST, GRADE.GOOD, GRADE.NORMAL, GRADE.POOR];
+  return valid.includes(raw) ? (raw as Grade) : GRADE.UNKNOWN;
+};