feature: 의견 바랍니다.

src/apis/brand/getBrands.ts

@@ -0,0 +1,22 @@
+import { axiosInstance } from '@/apis/axios/axios';
+import type { GetBrandsResponse, GetBrandsResult, DeviceType } from '@/types/brand/brand';
+import { useQuery } from '@tanstack/react-query';
+import { queryKey } from '@/constants/queryKey';
+
+// 브랜드 목록 조회
+export const getBrands = async (deviceType: DeviceType): Promise<GetBrandsResult> => {
+  const { data } = await axiosInstance.get<GetBrandsResponse>(
+    `/api/brands?deviceType=${deviceType}`
+  );
+  return data.result ?? [];
+};
+
+export const useGetBrands = (deviceType: DeviceType | null) => {
+  return useQuery<GetBrandsResult>({
+    queryKey: [queryKey.BRANDS, deviceType],
+    queryFn: () => getBrands(deviceType!),
+    enabled: deviceType !== null,
+    staleTime: 5 * 60 * 1000, // 5분
+    gcTime: 10 * 60 * 1000, // 10분
+  });
+};

src/apis/device/searchDevices.ts

@@ -0,0 +1,36 @@
+import { axiosInstance } from '@/apis/axios/axios';
+import type { SearchDevicesParams, SearchDevicesResponse, SearchDevicesResult } from '@/types/device/device';
+import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
+import { queryKey } from '@/constants/queryKey';
+
+// 기기 검색
+export const searchDevices = async (params: SearchDevicesParams): Promise<SearchDevicesResult> => {
+  const { data } = await axiosInstance.get<SearchDevicesResponse>('/api/devices/search', {
+    params,
+    paramsSerializer: {
+      indexes: null, // array를 deviceTypes=A&deviceTypes=B 형식으로 직렬화
+    },
+  });
+  return data.result ?? { devices: [], nextCursor: null, hasNext: false };
+};
+
+export const useSearchDevices = (params: SearchDevicesParams) => {
+  return useQuery<SearchDevicesResult>({
+    queryKey: [queryKey.DEVICES, 'search', params],
+    queryFn: () => searchDevices(params),
+    staleTime: 1 * 60 * 1000, // 1분
+    gcTime: 5 * 60 * 1000, // 5분
+  });
+};
+
+// 무한 스크롤을 위한 hook
+export const useInfiniteSearchDevices = (params: Omit<SearchDevicesParams, 'cursor'>) => {
+  return useInfiniteQuery<SearchDevicesResult>({
+    queryKey: [queryKey.DEVICES, 'search', params],
+    queryFn: ({ pageParam }) => searchDevices({ ...params, cursor: pageParam as string | undefined }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.nextCursor : undefined),
+    staleTime: 1 * 60 * 1000, // 1분
+    gcTime: 5 * 60 * 1000, // 5분
+  });
+};

src/components/ProductCard/ProductCard.tsx

@@ -8,7 +8,7 @@ interface ProductCardProps {
 const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
   return (
     <div
-      className="px-40 py-32 cursor-pointer group"
+      className="w-full px-40 py-32 cursor-pointer group"
       onClick={onClick}
     >
       {/* Image - 정사각형 */}
@@ -24,7 +24,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
 
         {/* Price */}
         <p className="font-body-1-sm text-gray-500">
-          {product.price.toLocaleString()}
+          {(product.price ?? 0).toLocaleString()}
         </p>
 
         {/* Color Chips */}

src/constants/devices.ts

@@ -7,6 +7,7 @@ import KeyboardIcon from '@/assets/icons/keyboard.svg?react';
 import MouseIcon from '@/assets/icons/mouse.svg?react';
 import ChargeIcon from '@/assets/icons/charge.svg?react';
 import type { ComponentType, SVGProps } from 'react';
+import type { DeviceType } from '@/types/brand/brand';
 
 export interface DeviceCategory {
   id: number;
@@ -30,6 +31,17 @@ export const DEVICE_CATEGORIES: DeviceCategory[] = [
   { id: 8, name: '충전기', Icon: ChargeIcon },
 ];
 
+export const CATEGORY_TO_DEVICE_TYPE: Record<number, DeviceType> = {
+  1: 'SMARTPHONE',
+  2: 'LAPTOP',
+  3: 'TABLET',
+  4: 'SMARTWATCH',
+  5: 'AUDIO',
+  6: 'KEYBOARD',
+  7: 'MOUSE',
+  8: 'CHARGER',
+};
+
 export const SORT_OPTIONS: FilterOption[] = [
   { value: 'latest', label: '최신순' },
   { value: 'alphabetical', label: '가나다순' },

src/constants/queryKey.ts

@@ -7,4 +7,6 @@ export const queryKey = {
   TAGS: 'tags',
   COMBOS: 'combos',
   COMBO_DETAIL: 'combo',
+  BRANDS: 'brands',
+  DEVICES: 'devices',
 } as const;

src/index.css

@@ -77,11 +77,13 @@
   --spacing-164: 164px;
   --spacing-184: 184px;
   --spacing-196: 196px;
+  --spacing-200: 200px;
   --spacing-204: 204px;
   --spacing-228: 228px;
   --spacing-268: 268px;
   --spacing-280: 280px;
   --spacing-300: 300px;
+  --spacing-600: 600px;
 
   /* Typography */
   --font-service: 'KIMM_Bold', system-ui, sans-serif;