From 1b354fc83c525a6de3185f6fda0a6fdf8497ee6a Mon Sep 17 00:00:00 2001
From: ByungMMin <149650808+ByungMMin@users.noreply.github.com>
Date: Thu, 13 Aug 2026 22:51:26 +0900
Subject: [PATCH] =?UTF-8?q?[fix/#269]ootd,=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20ui=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/search/ui/OotdResultGrid.tsx       | 8 ++++----
 src/features/search/ui/SearchOotdResultGrid.tsx | 8 ++++----
 src/pages/ootd/components/ViewHeader.tsx        | 7 ++++---
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/features/search/ui/OotdResultGrid.tsx b/src/features/search/ui/OotdResultGrid.tsx
index e3ba782..c6e3cf8 100644
--- a/src/features/search/ui/OotdResultGrid.tsx
+++ b/src/features/search/ui/OotdResultGrid.tsx
@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import useIsWideLayout from '@/shared/hooks/useIsWideLayout';
 import { resolveImageUrl } from '@/shared/lib/resolveImageUrl';
 import { saveRecentOotd } from '../api/searchApi';
 import type { SearchOotdResponse } from '../api/types';
@@ -11,8 +12,6 @@ export interface OotdResultGridProps {
   onLoadMore: () => void;
 }
 
-const COLUMN_COUNT = 2;
-
 const splitIntoColumns = (items: SearchOotdResponse[], columnCount: number) => {
   const columns: SearchOotdResponse[][] = Array.from({ length: columnCount }, () => []);
   items.forEach((item, index) => columns[index % columnCount].push(item));
@@ -24,7 +23,8 @@ const splitIntoColumns = (items: SearchOotdResponse[], columnCount: number) => {
 const OotdResultGrid = ({ items, hasNext, loading, onLoadMore }: OotdResultGridProps) => {
   const navigate = useNavigate();
   const sentinelRef = useInfiniteScrollSentinel(hasNext, onLoadMore);
-  const columns = splitIntoColumns(items, COLUMN_COUNT);
+  const isWideLayout = useIsWideLayout();
+  const columns = splitIntoColumns(items, isWideLayout ? 3 : 2);
 
   const handleClick = (id: number) => {
     saveRecentOotd(id);
@@ -33,7 +33,7 @@ const OotdResultGrid = ({ items, hasNext, loading, onLoadMore }: OotdResultGridP
 
   return (
     <>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-2 gap-2 md:grid-cols-3">
         {columns.map((column, columnIndex) => (
           <div key={columnIndex} className="flex flex-col gap-2">
             {column.map((item) => (
diff --git a/src/features/search/ui/SearchOotdResultGrid.tsx b/src/features/search/ui/SearchOotdResultGrid.tsx
index d9ba40c..6d20b5f 100644
--- a/src/features/search/ui/SearchOotdResultGrid.tsx
+++ b/src/features/search/ui/SearchOotdResultGrid.tsx
@@ -1,11 +1,10 @@
 import { useNavigate } from 'react-router-dom';
+import useIsWideLayout from '@/shared/hooks/useIsWideLayout';
 import { saveRecentOotd } from '../api/searchApi';
 import type { SearchOotdResponse } from '../api/types';
 import { useInfiniteScrollSentinel } from '../lib/useInfiniteScrollSentinel';
 import SearchOotdCard from './SearchOotdCard';
 
-const COLUMN_COUNT = 2;
-
 const splitIntoColumns = <T,>(items: T[], columnCount: number) => {
   const columns: T[][] = Array.from({ length: columnCount }, () => []);
   items.forEach((item, index) => columns[index % columnCount].push(item));
@@ -37,7 +36,8 @@ const SearchOotdResultGrid = ({
 }: SearchOotdResultGridProps) => {
   const navigate = useNavigate();
   const sentinelRef = useInfiniteScrollSentinel(hasNext, onLoadMore);
-  const columns = splitIntoColumns(items, COLUMN_COUNT);
+  const isWideLayout = useIsWideLayout();
+  const columns = splitIntoColumns(items, isWideLayout ? 3 : 2);
 
   const handleClick = (id: number) => {
     saveRecentOotd(id);
@@ -46,7 +46,7 @@ const SearchOotdResultGrid = ({
 
   return (
     <>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-2 gap-2 md:grid-cols-3">
         {columns.map((column, columnIndex) => (
           <div key={columnIndex} className="flex flex-col gap-2">
             {column.map((item) => (
diff --git a/src/pages/ootd/components/ViewHeader.tsx b/src/pages/ootd/components/ViewHeader.tsx
index 0450666..0397f7d 100644
--- a/src/pages/ootd/components/ViewHeader.tsx
+++ b/src/pages/ootd/components/ViewHeader.tsx
@@ -1,4 +1,5 @@
-import { ChevronLeft, Menu } from 'lucide-react';
+import { Menu } from 'lucide-react';
+import { leftArrow } from '@/shared/assets';
 
 export interface ViewHeaderProps {
   onBack: () => void;
@@ -6,9 +7,9 @@ export interface ViewHeaderProps {
 }
 
 const ViewHeader = ({ onBack, onMoreClick }: ViewHeaderProps) => (
-  <div className="bg-bg-white sticky top-0 z-30 flex items-center justify-between px-4 py-3">
+  <div className="bg-bg-white sticky top-0 z-30 flex items-center justify-between py-3">
     <button type="button" onClick={onBack} aria-label="뒤로가기">
-      <ChevronLeft size={24} className="text-text-primary" />
+      <img src={leftArrow} alt="" className="size-5" />
     </button>
     <button type="button" onClick={onMoreClick} aria-label="더보기">
       <Menu size={22} className="text-text-primary" />