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 (
<>
-
+
{columns.map((column, columnIndex) => (
{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 =
(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 (
<>
-
+
{columns.map((column, columnIndex) => (
{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) => (
-
+