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) => ( -
+