feat: 홈페이지 레이아웃 및 리스트 페이지

src/app/(home)/_api/cheer/cheer.types.ts

@@ -1,12 +1,15 @@
+import { type ImageResponse } from "@/types";
+
 export type Cheer = {
   storeId: number;
-  imageUrl: string;
+  images: ImageResponse[];
   storeName: string;
   storeDistrict: string;
   storeNeighborhood: string;
   storeCategory: string;
   cheerId: number;
   cheerDescription: string;
+  tags: string[];
 };
 
 export type CheersResponse = {

src/app/(home)/_api/shop/shop.api.ts

@@ -10,15 +10,24 @@ import { type StoresResponse } from "./shop.types";
 export const getStores = async ({
   size,
   category,
+  tag,
+  location,
 }: {
   size: number;
   category?: string;
+  tag?: string[];
+  location?: string[];
 }): Promise<StoresResponse> => {
+  const toCSV = (v?: string | string[]) =>
+    Array.isArray(v) ? v.filter(Boolean).join(",") : v || undefined;
+
   return await http
     .get("api/shops", {
       searchParams: {
         size,
         ...(category ? { category } : {}),
+        ...(toCSV(tag) ? { tag: toCSV(tag) } : {}),
+        ...(toCSV(location) ? { location: toCSV(location) } : {}),
       },
     })
     .json<StoresResponse>();

src/app/(home)/_api/shop/shop.queries.ts

@@ -4,18 +4,26 @@ import { getStores } from "./shop.api";
 
 export const storesQueryKeys = {
   all: ["stores"] as const,
-  size: (size: number, category?: string) =>
-    [...storesQueryKeys.all, size, category] as const,
+  size: (
+    size: number,
+    category?: string,
+    tag?: string[],
+    location?: string[]
+  ) => [...storesQueryKeys.all, size, category, tag, location] as const,
 };
 
 export const storesQueryOptions = ({
   size,
   category,
+  tag,
+  location,
 }: {
   size: number;
   category?: string;
+  tag?: string[];
+  location?: string[];
 }) =>
   queryOptions({
-    queryKey: storesQueryKeys.size(size, category),
-    queryFn: () => getStores({ size, category }),
+    queryKey: storesQueryKeys.size(size, category, tag, location),
+    queryFn: () => getStores({ size, category, tag, location }),
   });

src/app/(home)/_components/RecentCheers/RecentCheers.css.ts

@@ -6,7 +6,9 @@ export const recentSupportCard = style({
   borderRadius: "2.8rem",
   padding: "2rem",
   border: "2px solid #fff",
-  height: "13.6rem",
+  minHeight: "13.6rem",
+  maxHeight: "17.4rem",
+  overflow: "hidden",
 });
 
 export const cheersContent = style({
@@ -58,6 +60,7 @@ export const storeImage = style({
   width: "4rem",
   height: "4rem",
   borderRadius: radius[100],
+  objectFit: "cover",
 });
 
 export const storeImageFallback = style([

src/app/(home)/_components/RecentCheers/RecentCheers.tsx

@@ -2,7 +2,8 @@
 
 import { Suspense } from "@suspensive/react";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { chunk } from "es-toolkit";
+import { at, chunk, compact } from "es-toolkit";
+import { isEmpty } from "es-toolkit/compat";
 import Image from "next/image";
 import Link from "next/link";
 import { type HTMLAttributes, useState } from "react";
@@ -13,8 +14,10 @@ import ResetIcon from "@/assets/reset-20.svg";
 import { Button } from "@/components/ui/Button";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { HStack, VStack } from "@/components/ui/Stack";
+import { Tag } from "@/components/ui/Tag";
 import { Text } from "@/components/ui/Text";
 import { TextButton } from "@/components/ui/TextButton";
+import { ALL_TAGS } from "@/constants/tag.constants";
 import { colors } from "@/styles";
 
 import { cheerQueryOptions } from "../../_api/cheer";
@@ -66,23 +69,24 @@ const RecentSupportCardContent = () => {
                 }}
                 store={{
                   name: cheer.storeName,
-                  imageUrl: cheer.imageUrl,
+                  imageUrl: cheer.images[0]?.url ?? "",
                   location: `${cheer.storeDistrict} ${cheer.storeNeighborhood}`,
                   category: cheer.storeCategory,
                 }}
                 content={cheer.cheerDescription}
+                tags={cheer.tags}
               />
             </Link>
           ))}
         </VStack>
-        <Link href='/stores'>
+        <Link href='/cheer'>
           <Button
             variant='custom'
             size='large'
             className={styles.showAllButton}
             fullWidth
           >
-            가게 전체보기
+            응원 전체보기
           </Button>
         </Link>
       </VStack>
@@ -98,13 +102,19 @@ type RecentSupportCardProps = {
     category: string;
   };
   content: string;
+  tags: string[];
 } & HTMLAttributes<HTMLDivElement>;
 
 const RecentSupportCard = ({
   store,
   content,
+  tags,
   ...restProps
 }: RecentSupportCardProps) => {
+  const selectedTags = ALL_TAGS.filter(tag => tags?.includes(tag.name));
+
+  const visibleTags = compact(at(selectedTags, [0, 1]));
+
   return (
     <VStack gap={8} className={styles.recentSupportCard} {...restProps}>
       <HStack gap={12}>
@@ -114,7 +124,6 @@ const RecentSupportCard = ({
             height={40}
             alt={`${store.name} 가게 이미지`}
             className={styles.storeImage}
-            objectFit='cover'
             src={store.imageUrl}
             // TODO: 추후 제거
             unoptimized
@@ -152,6 +161,18 @@ const RecentSupportCard = ({
       >
         {content}
       </Text>
+
+      {isEmpty(selectedTags) ? null : (
+        <HStack gap={8}>
+          {visibleTags.map(tag => (
+            <Tag key={tag.name}>
+              <Image src={tag.iconUrl} alt={tag.label} width={14} height={14} />
+              {tag.label}
+            </Tag>
+          ))}
+          {selectedTags.length > 2 && <Tag>+{selectedTags.length - 2}</Tag>}
+        </HStack>
+      )}
     </VStack>
   );
 };

src/app/(home)/_components/StoreList/StoreList.tsx

@@ -0,0 +1,34 @@
+import { Suspense } from "react";
+
+import { ChipFilter } from "@/app/_shared/ChipFilter";
+import { StoreList as StoreListComponent } from "@/app/(store)/stores/(list)/_components";
+import { Bleed } from "@/components/ui/Bleed";
+import { FoodCategories } from "@/components/ui/FoodCategory";
+import { Spacer } from "@/components/ui/Spacer";
+import { VStack } from "@/components/ui/Stack";
+import { useFoodCategory } from "@/hooks/useFoodCategory";
+
+export const StoreList = () => {
+  const { categories, handleSelectCategory, selectedCategory } =
+    useFoodCategory("/");
+
+  return (
+    <VStack>
+      <Bleed inline={20}>
+        <FoodCategories
+          categories={categories}
+          selectedCategory={selectedCategory}
+          onSelectCategory={handleSelectCategory}
+        />
+      </Bleed>
+
+      <Spacer size={12} />
+
+      <ChipFilter />
+
+      <Suspense>
+        <StoreListComponent category={selectedCategory.name} />
+      </Suspense>
+    </VStack>
+  );
+};

src/app/(home)/_components/StoreList/index.ts

@@ -0,0 +1 @@
+export * from "./StoreList";

src/app/(home)/_components/index.ts

@@ -1,5 +1,6 @@
 export { RecentCheers } from "./RecentCheers";
 export { RecentlySupportedStores } from "./RecentlySupportStories";
 export { RegisterPopup } from "./RegisterPopup";
+export { StoreList } from "./StoreList";
 export { StoreStory } from "./StoreStory";
 export { Story } from "./Story";

src/app/(home)/page.tsx

@@ -3,8 +3,9 @@
 import { Bleed } from "@/components/ui/Bleed";
 import { Spacer } from "@/components/ui/Spacer";
 import { VStack } from "@/components/ui/Stack";
+import { colors } from "@/styles";
 
-import { RecentCheers, RegisterPopup, Story } from "./_components";
+import { RecentCheers, RegisterPopup, StoreList, Story } from "./_components";
 import { ServiceIntroBottomSheet } from "./_components/ServiceIntroBottomSheet";
 import { RegisterFloatingButton } from "./_shared/RegisterFloatingButton";
 
@@ -15,10 +16,18 @@ export default function HomePage() {
         <Spacer size={12} />
         <Story />
       </Bleed>
-      <Spacer size={12} />
       <Spacer size={32} />
-      <VStack gap={40}>
+      <VStack gap={32}>
         <RecentCheers />
+
+        <Bleed inline={20}>
+          <Spacer
+            size={12}
+            style={{ backgroundColor: colors.coolNeutral[98] }}
+          />
+        </Bleed>
+
+        <StoreList />
       </VStack>
       <RegisterFloatingButton />
       <ServiceIntroBottomSheet />

src/app/(store)/stores/(list)/_components/StoreList/StoreList.css.ts

@@ -21,6 +21,7 @@ export const storeCard = style({
 });
 
 export const storeImagesContainer = style({
+  position: "relative",
   paddingInline: "2rem",
   overflowX: "auto",
 
@@ -31,29 +32,18 @@ export const storeImagesContainer = style({
   },
 });
 
-export const storeImages = style({
-  selectors: {
-    "&::-webkit-scrollbar": {
-      display: "none",
-    },
-  },
+export const storeImageWrapper = style({
+  position: "relative",
+  width: "100%",
+  height: "168px",
 });
 
 export const storeImage = style({
   objectFit: "cover",
   overflow: "hidden",
   flexShrink: 0,
 
-  selectors: {
-    "&[data-first=true]": {
-      borderTopLeftRadius: radius[160],
-      borderBottomLeftRadius: radius[160],
-    },
-    "&[data-last=true]": {
-      borderTopRightRadius: radius[160],
-      borderBottomRightRadius: radius[160],
-    },
-  },
+  borderRadius: radius[160],
 });
 
 export const emptyImage = style({
@@ -68,16 +58,7 @@ export const emptyImage = style({
 
   backgroundColor: semantic.background.grayLight,
 
-  selectors: {
-    "&[data-first=true]": {
-      borderTopLeftRadius: radius[160],
-      borderBottomLeftRadius: radius[160],
-    },
-    "&[data-last=true]": {
-      borderTopRightRadius: radius[160],
-      borderBottomRightRadius: radius[160],
-    },
-  },
+  borderRadius: radius[160],
 });
 
 export const moreButtonText = style({