Merge pull request #97 from YAPP-Github/feature/PRODUCT-51

Author: Seojunhwan

src/app/(store)/_api/shop/index.ts

@@ -0,0 +1,3 @@
+export * from "./shop.api";
+export * from "./shop.queries";
+export * from "./shop.types";

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

@@ -0,0 +1,56 @@
+import { http } from "@/lib/api";
+
+import {
+  type StoreCheersResponse,
+  type StoreDetailResponse,
+  type StoreImagesResponse,
+} from "./shop.types";
+
+export const STORE_ERROR_CODES = {
+  NOT_FOUND: "ST0012",
+} as const;
+
+/**
+ * 가게 상세 조회 API
+ * @params storeId 조회할 가게 ID
+ * @returns 가게 상세 정보
+ */
+export const getStoreDetail = async (
+  storeId: string
+): Promise<StoreDetailResponse> => {
+  return await http.get(`api/shops/${storeId}`).json<StoreDetailResponse>();
+};
+
+/**
+ * 가게별 응원 조회 API
+ * @params storeId 조회할 가게 ID
+ * @params size 조회할 응원 개수
+ * @returns 가게별 응원 정보
+ */
+export const getStoreCheers = async (
+  storeId: string,
+  size: number
+): Promise<StoreCheersResponse> => {
+  return await http
+    .get(`api/shops/${storeId}/cheers`, {
+      searchParams: {
+        size,
+      },
+    })
+    .json<StoreCheersResponse>();
+};
+
+// /api/shops/{storeId}/images
+
+/**
+ * 가게별 이미지 조회 API
+ * @params storeId 조회할 가게 ID
+ * @returns 가게별 이미지 정보
+ */
+export const getStoreImages = async (
+  storeId: string
+): Promise<StoreImagesResponse> => {
+  return await http
+    .get(`api/shops/${storeId}/images`)
+    .json<StoreImagesResponse>();
+};

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

@@ -0,0 +1,30 @@
+import { queryOptions } from "@tanstack/react-query";
+
+import { getStoreCheers, getStoreDetail, getStoreImages } from "./shop.api";
+
+export const storeQueryKeys = {
+  all: ["store"] as const,
+  detail: (storeId: string) => [...storeQueryKeys.all, storeId] as const,
+  cheers: (storeId: string, size: number) =>
+    [...storeQueryKeys.all, storeId, "cheers", size] as const,
+  images: (storeId: string) =>
+    [...storeQueryKeys.all, storeId, "images"] as const,
+};
+
+export const storeDetailQueryOptions = (storeId: string) =>
+  queryOptions({
+    queryKey: storeQueryKeys.detail(storeId),
+    queryFn: () => getStoreDetail(storeId),
+  });
+
+export const storeCheersQueryOptions = (storeId: string, size: number) =>
+  queryOptions({
+    queryKey: storeQueryKeys.cheers(storeId, size),
+    queryFn: () => getStoreCheers(storeId, size),
+  });
+
+export const storeImagesQueryOptions = (storeId: string) =>
+  queryOptions({
+    queryKey: storeQueryKeys.images(storeId),
+    queryFn: () => getStoreImages(storeId),
+  });

src/app/(store)/_api/shop/shop.types.ts

@@ -0,0 +1,24 @@
+type StoreDetail = {
+  id: number;
+  kakaoId: string;
+  name: string;
+  district: string;
+  neighborhood: string;
+  category: string;
+  placeUrl: string;
+};
+
+export type StoreDetailResponse = StoreDetail;
+
+type StoreCheers = {
+  id: number;
+  memberId: number;
+  memberNickname: string;
+  description: string;
+};
+
+export type StoreCheersResponse = { cheers: StoreCheers[] };
+
+export type StoreImagesResponse = {
+  imageUrls: string[];
+};

src/app/(store)/stores/[storeId]/_components/StoreCheers/StoreCheers.css.ts

@@ -0,0 +1,44 @@
+import { style } from "@vanilla-extract/css";
+
+import { colors, radius, semantic } from "@/styles";
+
+export const storeCheersContainer = style({
+  paddingTop: "2.4rem",
+  paddingBottom: "4rem",
+});
+
+export const cheerCardProfileImage = style({
+  width: "2.8rem",
+  height: "2.8rem",
+  borderRadius: "50%",
+});
+
+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 cheerCardContent = style({
+  width: "100%",
+  height: "100%",
+  padding: "1.6rem",
+  backgroundColor: semantic.background.grayLight,
+  borderRadius: radius[160],
+});
+
+export const cheerCardContentText = style({
+  selectors: {
+    "&[data-long-text='true'][data-expanded='false']": {
+      display: "-webkit-box",
+      WebkitLineClamp: 4,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
+  },
+});

src/app/(store)/stores/[storeId]/_components/StoreCheers/StoreCheers.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { Suspense } from "@suspensive/react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { useState } from "react";
+
+import { storeCheersQueryOptions } from "@/app/(store)/_api/shop";
+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 { Text } from "@/components/ui/Text";
+import { TextButton } from "@/components/ui/TextButton";
+
+import * as styles from "./StoreCheers.css";
+
+export const StoreCheers = ({ storeId }: { storeId: string }) => {
+  return (
+    <VStack gap={16} className={styles.storeCheersContainer}>
+      <Text as='h3' typo='title2Sb' color='text.normal'>
+        가게에 담긴 응원
+      </Text>
+
+      <Suspense clientOnly fallback={<CheerCardSkeleton />}>
+        <CheerContent storeId={storeId} />
+      </Suspense>
+    </VStack>
+  );
+};
+
+const CHEERS_SIZE = 50;
+
+const CheerContent = ({ storeId }: { storeId: string }) => {
+  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 handleToggle = () => {
+    if (isAllVisible) {
+      // 접기: 처음 3개만 보여주기
+      setVisibleCount(ITEMS_PER_PAGE);
+    } else {
+      // 더보기: 3개씩 추가
+      setVisibleCount(prev => Math.min(prev + ITEMS_PER_PAGE, totalItems));
+    }
+  };
+
+  const visibleCards = cheers.slice(0, visibleCount);
+
+  return (
+    <VStack>
+      <VStack gap={24}>
+        {visibleCards.map(card => (
+          <CheerCard
+            key={card.id}
+            author={card.memberNickname}
+            content={card.description}
+          />
+        ))}
+      </VStack>
+      {shouldShowToggleButton && (
+        <>
+          <Spacer size={20} />
+          <Button
+            variant='assistive'
+            size='large'
+            fullWidth
+            onClick={handleToggle}
+          >
+            {isAllVisible ? "접기" : "더보기"}
+          </Button>
+        </>
+      )}
+
+      <Spacer size={shouldShowToggleButton ? 12 : 20} />
+
+      {/* 
+        TODO: 가게 응원하기 버튼 클릭 시 가게 응원 페이지로 이동
+        추후 가게 응원 등록 작업할 때 연결 예정
+      */}
+      <Link href={""}>
+        <Button variant='primary' size='large' fullWidth>
+          가게 응원하기
+        </Button>
+      </Link>
+    </VStack>
+  );
+};
+
+const CheerCard = ({
+  author,
+  content,
+}: {
+  author: string;
+  content: string;
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const isLongText = content.length > 50;
+
+  return (
+    <VStack gap={12}>
+      <HStack align='center' gap={8}>
+        <span className={styles.cheerCardProfileImage}>아이콘</span>
+        <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)}
+            >
+              {isExpanded ? "접기" : "더보기"}
+            </TextButton>
+          )}
+        </VStack>
+      </HStack>
+    </VStack>
+  );
+};
+
+const CheerCardSkeleton = () => {
+  return (
+    <VStack gap={12}>
+      <Skeleton width='30%' height={28} radius={12} />
+      <Skeleton width='100%' height={54} radius={12} />
+    </VStack>
+  );
+};

src/app/(store)/stores/[storeId]/_components/StoreCheers/index.ts

@@ -0,0 +1 @@
+export { StoreCheers } from "./StoreCheers";

src/app/(store)/stores/[storeId]/_components/StoreDetailGNB/StoreDetailGNB.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
+
+import { storeDetailQueryOptions } from "@/app/(store)/_api/shop";
+import ChevronLeftIcon from "@/assets/chevron-left.svg";
+import ShareIcon from "@/assets/share-24.svg";
+import { GNB } from "@/components/ui/GNB";
+import { semantic } from "@/styles";
+
+export const StoreDetailGNB = () => {
+  const router = useRouter();
+  const { storeId } = useParams<{ storeId: string }>();
+
+  const { data: store } = useQuery(storeDetailQueryOptions(storeId));
+
+  const handleClickBack = () => {
+    router.back();
+  };
+
+  const handleClickShare = () => {
+    navigator.share({
+      title: store?.name,
+      text: store?.name,
+      url: window.location.href,
+    });
+  };
+
+  return (
+    <GNB
+      leftAddon={
+        <button
+          style={{ display: "flex", alignItems: "center" }}
+          onClick={handleClickBack}
+        >
+          <ChevronLeftIcon width={24} height={24} />
+        </button>
+      }
+      rightAddon={
+        <button onClick={handleClickShare}>
+          <ShareIcon width={24} height={24} color={semantic.icon.black} />
+        </button>
+      }
+    />
+  );
+};

src/app/(store)/stores/[storeId]/_components/StoreDetailGNB/index.ts

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