Merge pull request #156 from YAPP-Github/feature/PRODUCT-274

Seojunhwan · web-flow · commit 5d1c82f0e138 · 2025-08-22T22:44:53.000+09:00
diff --git a/src/app/(store)/_api/shop/shop.api.ts b/src/app/(store)/_api/shop/shop.api.ts
@@ -5,6 +5,7 @@ import {
   type StoreCheersResponse,
   type StoreDetailResponse,
   type StoreImagesResponse,
+  type StoreTagsResponse,
 } from "./shop.types";
 
 export const STORE_ERROR_CODES = {
@@ -69,3 +70,14 @@ export const getCheeredMember = async (): Promise<CheeredMemberResponse> => {
     .get("api/shops/cheered-member")
     .json<CheeredMemberResponse>();
 };
+
+/**
+ * 가게별 태그 조회 API
+ * @params storeId 조회할 가게 ID
+ * @returns 가게별 태그 정보
+ */
+export const getStoreTags = async (
+  storeId: number
+): Promise<StoreTagsResponse> => {
+  return await http.get(`api/shops/${storeId}/tags`).json<StoreTagsResponse>();
+};
diff --git a/src/app/(store)/_api/shop/shop.queries.ts b/src/app/(store)/_api/shop/shop.queries.ts
@@ -5,6 +5,7 @@ import {
   getStoreCheers,
   getStoreDetail,
   getStoreImages,
+  getStoreTags,
 } from "./shop.api";
 
 export const storeQueryKeys = {
@@ -14,6 +15,7 @@ export const storeQueryKeys = {
     [...storeQueryKeys.all, storeId, "cheers", size] as const,
   images: (storeId: number) =>
     [...storeQueryKeys.all, storeId, "images"] as const,
+  tags: (storeId: number) => [...storeQueryKeys.all, storeId, "tags"] as const,
 };
 
 export const storeDetailQueryOptions = (storeId: number) =>
@@ -43,3 +45,9 @@ export const cheeredMemberQueryOptions = () =>
     queryKey: cheeredMemberQueryKeys.all,
     queryFn: () => getCheeredMember(),
   });
+
+export const storeTagsQueryOptions = (storeId: number) =>
+  queryOptions({
+    queryKey: storeQueryKeys.tags(storeId),
+    queryFn: () => getStoreTags(storeId),
+  });
diff --git a/src/app/(store)/_api/shop/shop.types.ts b/src/app/(store)/_api/shop/shop.types.ts
@@ -15,6 +15,7 @@ type StoreCheers = {
   memberId: number;
   memberNickname: string;
   description: string;
+  tags: string[];
 };
 
 export type StoreCheersResponse = { cheers: StoreCheers[] };
@@ -34,3 +35,7 @@ export type CheeredStore = {
 export type CheeredMemberResponse = {
   stores: CheeredStore[];
 };
+
+export type StoreTagsResponse = {
+  tags: string[];
+};
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreCheers/StoreCheers.css.ts b/src/app/(store)/stores/[storeId]/_components/StoreCheers/StoreCheers.css.ts
@@ -1,36 +1,37 @@
 import { style } from "@vanilla-extract/css";
 
-import { colors, radius, semantic } from "@/styles";
+import { radius } from "@/styles";
 
 export const storeCheersContainer = style({
   paddingTop: "2.4rem",
   paddingBottom: "4rem",
 });
 
-export const cheerCardProfileImage = style({
-  width: "2.8rem",
-  height: "2.8rem",
+export const cheerCard = style({
+  width: "100%",
+  borderRadius: radius[160],
+  overflow: "hidden",
+});
+
+export const cheerCardHeader = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.8rem",
+  padding: "1.2rem 2rem",
 });
 
-export const cheerCardDivider = style({
-  width: "0.2rem",
-  height: "auto",
-  alignSelf: "stretch",
-  flexShrink: 0,
-  backgroundColor: colors.coolNeutral[97],
-  marginLeft: "1.4rem",
-  marginRight: "2.1rem",
+export const cheerCardAvatar = style({
+  width: "2.4rem",
+  height: "2.4rem",
 });
 
 export const cheerCardContent = style({
-  width: "100%",
-  height: "100%",
-  padding: "1.6rem",
-  backgroundColor: semantic.background.grayLight,
-  borderRadius: radius[160],
+  padding: "2rem",
+  paddingBottom: "1.6rem",
 });
 
 export const cheerCardContentText = style({
+  width: "100%",
   selectors: {
     "&[data-long-text='true'][data-expanded='false']": {
       display: "-webkit-box",
@@ -41,3 +42,17 @@ export const cheerCardContentText = style({
     },
   },
 });
+
+export const tag = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.4rem",
+  padding: "0.6rem 0.8rem",
+  backgroundColor: "#ffffff",
+  borderRadius: "999px",
+  border: "1px solid #f0f0f0",
+});
+
+export const tagIcon = style({
+  fontSize: "1.2rem",
+});
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreCheers/StoreCheers.tsx b/src/app/(store)/stores/[storeId]/_components/StoreCheers/StoreCheers.tsx
@@ -2,7 +2,9 @@
 
 import { Suspense } from "@suspensive/react";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import Link from "next/link";
+import { slice } from "es-toolkit/compat";
+import { motion } from "motion/react";
+import Image from "next/image";
 import { useState } from "react";
 
 import { storeCheersQueryOptions } from "@/app/(store)/_api/shop";
@@ -11,10 +13,13 @@ import { Button } from "@/components/ui/Button";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { Spacer } from "@/components/ui/Spacer";
 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 * as styles from "./StoreCheers.css";
+import { getContentBackgroundColor, getHeaderBackgroundColor } from "./utils";
 
 export const StoreCheers = ({ storeId }: { storeId: number }) => {
   return (
@@ -32,17 +37,21 @@ export const StoreCheers = ({ storeId }: { storeId: number }) => {
 
 const CHEERS_SIZE = 50;
 
+const ITEMS_PER_PAGE = 3;
+
+const THEMES = ["yellow", "pink", "blue"] as const;
+type Theme = (typeof THEMES)[number];
+
 const CheerContent = ({ storeId }: { storeId: number }) => {
   const {
     data: { cheers },
   } = useSuspenseQuery(storeCheersQueryOptions(storeId, CHEERS_SIZE));
 
   const [visibleCount, setVisibleCount] = useState(3);
 
-  const ITEMS_PER_PAGE = 3;
   const totalItems = cheers.length;
   const isAllVisible = visibleCount >= totalItems;
-  const shouldShowToggleButton = totalItems > ITEMS_PER_PAGE;
+  const showToggleButton = totalItems > ITEMS_PER_PAGE;
 
   const handleToggle = () => {
     if (isAllVisible) {
@@ -59,16 +68,17 @@ const CheerContent = ({ storeId }: { storeId: number }) => {
   return (
     <VStack>
       <VStack gap={24}>
-        {visibleCards.map(card => (
+        {visibleCards.map((card, index) => (
           <CheerCard
             key={card.id}
             author={card.memberNickname}
             content={card.description}
-            memberId={card.memberId}
+            tags={card.tags}
+            theme={THEMES[index % THEMES.length] as Theme}
           />
         ))}
       </VStack>
-      {shouldShowToggleButton && (
+      {showToggleButton && (
         <>
           <Spacer size={20} />
           <Button
@@ -82,64 +92,114 @@ const CheerContent = ({ storeId }: { storeId: number }) => {
         </>
       )}
 
-      <Spacer size={shouldShowToggleButton ? 12 : 20} />
-
-      <Link href={`/stores/register?storeId=${storeId}`}>
-        <Button variant='primary' size='large' fullWidth>
-          가게 응원하기
-        </Button>
-      </Link>
+      <Spacer size={showToggleButton ? 12 : 20} />
     </VStack>
   );
 };
 
 const CheerCard = ({
   author,
   content,
-  memberId,
+  tags,
+  theme,
 }: {
   author: string;
   content: string;
-  memberId: number;
+  tags: string[];
+  theme: Theme;
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
-
   const isLongText = content.length > 50;
 
+  const selectedTags = ALL_TAGS.filter(tag => tags.includes(tag.name));
+  const visibleTags = isExpanded ? selectedTags : slice(selectedTags, 0, 2);
+  const additionalTagsCount = Math.max(
+    0,
+    selectedTags.length - visibleTags.length
+  );
+  const showAdditionalTags = additionalTagsCount > 0 && !isExpanded;
+
   return (
-    <VStack gap={12}>
-      <HStack align='center' gap={8}>
-        <Avatar memberId={memberId} className={styles.cheerCardProfileImage} />
+    <motion.div
+      className={styles.cheerCard}
+      onClick={() => setIsExpanded(!isExpanded)}
+      role='button'
+      tabIndex={0}
+      transition={{ duration: 0.3 }}
+      whileTap={{ scale: 0.99 }}
+    >
+      <div
+        className={styles.cheerCardHeader}
+        style={{
+          backgroundColor: getHeaderBackgroundColor(theme),
+        }}
+      >
+        <Avatar
+          // TODO: 추후 theme 지정 가능하게끔 수정
+          memberId={THEMES.findIndex(t => t === theme)}
+          className={styles.cheerCardAvatar}
+        />
         <Text as='span' typo='body1Sb' color='text.normal'>
           {author}
         </Text>
-      </HStack>
-
-      <HStack align='stretch'>
-        <hr className={styles.cheerCardDivider} />
-        <VStack className={styles.cheerCardContent} gap={4} align='start'>
-          <Text
-            as='p'
-            typo='body2Rg'
-            color='text.normal'
-            className={styles.cheerCardContentText}
-            data-expanded={isExpanded}
-            data-long-text={isLongText}
-          >
-            {content}
-          </Text>
-          {isLongText && (
-            <TextButton
-              size='small'
-              variant='assistive'
-              onClick={() => setIsExpanded(!isExpanded)}
+      </div>
+
+      <div
+        className={styles.cheerCardContent}
+        style={{
+          backgroundColor: getContentBackgroundColor(theme),
+        }}
+      >
+        <VStack gap={8} align='start'>
+          <VStack gap={4} align='start'>
+            <Text
+              as='p'
+              typo='body2Rg'
+              color='text.normal'
+              className={styles.cheerCardContentText}
+              data-expanded={isExpanded}
+              data-long-text={isLongText}
             >
-              {isExpanded ? "접기" : "더보기"}
-            </TextButton>
-          )}
+              {content}
+            </Text>
+            {isLongText && (
+              <TextButton
+                size='small'
+                variant='assistive'
+                onClick={() => setIsExpanded(!isExpanded)}
+              >
+                {isExpanded ? "접기" : "더보기"}
+              </TextButton>
+            )}
+          </VStack>
+
+          <HStack gap={8} align='start' wrap='wrap'>
+            {visibleTags.map(tag => (
+              <Tag key={tag.name}>
+                <Image
+                  src={tag.iconUrl}
+                  alt={tag.label}
+                  width={16}
+                  height={16}
+                  className={styles.tagIcon}
+                />
+                <Text as='span' typo='caption1Sb' color='text.primary'>
+                  {tag.label}
+                </Text>
+              </Tag>
+            ))}
+
+            {showAdditionalTags && (
+              <Tag>
+                <Text as='span' typo='caption1Sb' color='text.primary'>
+                  +{additionalTagsCount}
+                </Text>
+              </Tag>
+            )}
+          </HStack>
         </VStack>
-      </HStack>
-    </VStack>
+      </div>
+    </motion.div>
   );
 };
 
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreCheers/types.ts b/src/app/(store)/stores/[storeId]/_components/StoreCheers/types.ts
@@ -0,0 +1 @@
+export type Theme = "yellow" | "pink" | "blue";
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreCheers/utils.ts b/src/app/(store)/stores/[storeId]/_components/StoreCheers/utils.ts
@@ -0,0 +1,32 @@
+import { type Theme } from "./types";
+
+export const getCheerCardTheme = (memberId: number) => {
+  return ["yellow", "pink", "blue"][memberId % 3];
+};
+
+// 색상 테마별 배경색 헬퍼 함수
+export const getHeaderBackgroundColor = (colorName: Theme) => {
+  switch (colorName) {
+    case "yellow":
+      return "#fceb9c";
+    case "pink":
+      return "#fabdb8";
+    case "blue":
+      return "#b2dfff";
+    default:
+      return "#fceb9c";
+  }
+};
+
+export const getContentBackgroundColor = (colorName: Theme) => {
+  switch (colorName) {
+    case "yellow":
+      return "#fef8dd";
+    case "pink":
+      return "#fde5e3";
+    case "blue":
+      return "#e0f2ff";
+    default:
+      return "#fef8dd";
+  }
+};
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreInfo/StoreInfo.tsx b/src/app/(store)/stores/[storeId]/_components/StoreInfo/StoreInfo.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export type Theme = "yellow" \| "pink" \| "blue";`