refactor: MyPage

package.json

@@ -14,13 +14,15 @@
     "@react-oauth/google": "^0.13.4",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-query-devtools": "^5.91.2",
+    "@types/react-window": "^1.8.8",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.71.1",
     "react-router-dom": "^7.12.0",
     "react-spinners": "^0.17.0",
+    "react-window": "^2.2.6",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.3.5",
     "zustand": "^5.0.10"

src/components/DeviceSearch/DeviceDetailModal.tsx

@@ -1,4 +1,4 @@
-import type { Product } from '@/constants/mockData';
+import type { Product } from '@/types/product';
 import type { SearchDevice } from '@/types/devices';
 import PrimaryButton from '@/components/Button/PrimaryButton';
 import XIcon from '@/assets/icons/X.svg?react';

src/components/MyPage/CombinationCard.tsx

@@ -0,0 +1,171 @@
+import { useState, memo } from 'react';
+import StarIcon from '@/assets/icons/star.svg?react';
+import StarXIcon from '@/assets/icons/starx.svg?react';
+import StarHoverIcon from '@/assets/icons/starhover.svg?react';
+import { formatDate } from '@/utils/format';
+import type { ComboListItem } from '@/types/combo/combo';
+
+interface CombinationCardProps {
+  combination: ComboListItem;
+  index: number;
+  columns: 3 | 4;
+  isEditing: boolean;
+  editingName: string;
+  nameError: string | null;
+  onTogglePin: (e: React.MouseEvent, comboId: number) => void;
+  onNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onNameBlur: (name: string) => void;
+}
+
+const CombinationCard = ({
+  combination,
+  index,
+  columns,
+  isEditing,
+  editingName,
+  nameError,
+  onTogglePin,
+  onNameChange,
+  onNameBlur,
+}: CombinationCardProps) => {
+  const [hoveredStarComboId, setHoveredStarComboId] = useState<number | null>(null);
+
+  // 그라데이션 로직
+  const gradientThreshold = columns === 4 ? 9 : 7;
+  const shouldShowGradient = combination.devices.length >= gradientThreshold;
+  const maxDisplay = columns === 4 ? 8 : 6;
+  const displayedDevices = shouldShowGradient
+    ? combination.devices.slice(0, maxDisplay)
+    : combination.devices;
+
+  return (
+    <div className="px-36 pt-24 pb-36">
+      {/* 조합 정보 (생성일 포함) */}
+      <div className="flex flex-col gap-13 pl-20 py-24">
+        {isEditing ? (
+          /* 수정 모드: 인풋박스 + 별 아이콘 + 에러 메시지 */
+          <div className="flex flex-col gap-8">
+            <div className="flex items-center gap-8 min-h-48">
+              <input
+                type="text"
+                value={editingName}
+                onChange={onNameChange}
+                onClick={(e) => e.stopPropagation()}
+                onBlur={() => onNameBlur(editingName)}
+                maxLength={20}
+                className={`h-52 px-12 rounded-button font-body-1-sm text-gray-300 focus:outline-none ${
+                  nameError ? 'border-2 border-warning' : 'border border-blue-600'
+                }`}
+                autoFocus
+              />
+              {combination.isPinned ? (
+                <StarIcon
+                  onClick={(e) => onTogglePin(e, combination.comboId)}
+                  className={`!w-22 !h-22 -mt-2 cursor-pointer transition-opacity ${
+                    hoveredStarComboId === combination.comboId ? 'opacity-80' : ''
+                  }`}
+                  onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
+                  onMouseLeave={() => setHoveredStarComboId(null)}
+                />
+              ) : (
+                <>
+                  {hoveredStarComboId === combination.comboId ? (
+                    <StarHoverIcon
+                      onClick={(e) => onTogglePin(e, combination.comboId)}
+                      className="!w-22 !h-22 -mt-2 cursor-pointer"
+                      onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
+                      onMouseLeave={() => setHoveredStarComboId(null)}
+                    />
+                  ) : (
+                    <StarXIcon
+                      onClick={(e) => onTogglePin(e, combination.comboId)}
+                      className="!w-22 !h-22 -mt-2 cursor-pointer"
+                      onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
+                      onMouseLeave={() => setHoveredStarComboId(null)}
+                    />
+                  )}
+                </>
+              )}
+            </div>
+            {nameError && <p className="pl-12 font-body-4-r text-warning">{nameError}</p>}
+          </div>
+        ) : (
+          /* 일반 모드: 조합 번호 + 생성일 + 조합명 */
+          <div className="flex flex-col gap-8">
+            <div className="flex items-center gap-16">
+              <p className="font-body-3-r text-gray-400">조합{index + 1}</p>
+              <p className="font-body-3-r text-gray-400">
+                생성일: {formatDate(combination.createdAt)}
+              </p>
+            </div>
+            <div className="flex items-center gap-8">
+              <p className="font-body-1-sm text-black">{combination.comboName}</p>
+              {combination.isPinned ? (
+                <StarIcon
+                  onClick={(e) => onTogglePin(e, combination.comboId)}
+                  className={`!w-22 !h-22 -mt-3 cursor-pointer transition-opacity ${
+                    hoveredStarComboId === combination.comboId ? 'opacity-80' : ''
+                  }`}
+                  onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
+                  onMouseLeave={() => setHoveredStarComboId(null)}
+                />
+              ) : (
+                <>
+                  {hoveredStarComboId === combination.comboId ? (
+                    <StarHoverIcon
+                      onClick={(e) => onTogglePin(e, combination.comboId)}
+                      className="!w-22 !h-22 -mt-3 cursor-pointer"
+                      onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
+                      onMouseLeave={() => setHoveredStarComboId(null)}
+                    />
+                  ) : (
+                    <StarXIcon
+                      onClick={(e) => onTogglePin(e, combination.comboId)}
+                      className="!w-22 !h-22 -mt-3 cursor-pointer"
+                      onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
+                      onMouseLeave={() => setHoveredStarComboId(null)}
+                    />
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 기기 그리드 - 일반 모드에서도 기기 카드 표시 (그라데이션 포함) */}
+      <div className="pl-8 mt-24 relative">
+        <div
+          className={`grid ${columns === 4 ? 'grid-cols-4' : 'grid-cols-3'} gap-x-28 gap-y-12`}
+        >
+          {displayedDevices.map((device) => (
+            <div
+              key={device.deviceId}
+              className="bg-white rounded-card shadow-[0_0_4px_rgba(0,0,0,0.1)] p-12 w-244 flex items-center gap-12"
+            >
+              <div className="w-64 h-64 bg-gray-200 flex-shrink-0" />
+              <div className="flex flex-col gap-4 flex-1">
+                <p className="font-body-3-sm text-black truncate w-120">{device.name}</p>
+                <p className="font-body-4-r text-gray-300">{device.brandName}</p>
+                <p className="font-body-3-r text-gray-300">{device.deviceType}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* 그라데이션 오버레이 */}
+        {shouldShowGradient && (
+          <div
+            className="absolute right-0 bottom-0 w-244 h-80 rounded-card pointer-events-none"
+            style={{
+              background:
+                'linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%)',
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default memo(CombinationCard);