Merge pull request #152 from YAPP-Github/feature/PRODUCT-270

feat: 마이페이지에 응원 가게, 스토리 연결 (#147)

Author: wkdtnqls0506

src/app/(cheer)/cheer/_components/MyCheerCard/MyCheerCard.tsx

@@ -6,8 +6,10 @@ import { useRouter } from "next/navigation";
 import { type ReactNode, useRef, useState } from "react";
 import Slider, { type Settings } from "react-slick";
 
-import { cheeredMemberQueryOptions } from "@/app/(home)/_api/shop";
-import { type CheeredStore } from "@/app/(store)/_api/shop";
+import {
+  cheeredMemberQueryOptions,
+  type CheeredStore,
+} from "@/app/(store)/_api/shop";
 import { Avatar } from "@/app/member/_components/Avatar";
 import LocationIcon from "@/assets/location.svg";
 import MarketIcon from "@/assets/market-fill.svg";

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

@@ -1,7 +1,5 @@
 import { queryOptions } from "@tanstack/react-query";
 
-import { getCheeredMember } from "@/app/(store)/_api/shop";
-
 import { getStores } from "./shop.api";
 
 export const storesQueryKeys = {
@@ -21,13 +19,3 @@ export const storesQueryOptions = ({
     queryKey: storesQueryKeys.size(size, category),
     queryFn: () => getStores({ size, category }),
   });
-
-export const cheeredMemberQueryKeys = {
-  all: ["cheeredMember"] as const,
-};
-
-export const cheeredMemberQueryOptions = () =>
-  queryOptions({
-    queryKey: cheeredMemberQueryKeys.all,
-    queryFn: () => getCheeredMember(),
-  });

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

@@ -1,6 +1,11 @@
 import { queryOptions } from "@tanstack/react-query";
 
-import { getStoreCheers, getStoreDetail, getStoreImages } from "./shop.api";
+import {
+  getCheeredMember,
+  getStoreCheers,
+  getStoreDetail,
+  getStoreImages,
+} from "./shop.api";
 
 export const storeQueryKeys = {
   all: ["store"] as const,
@@ -28,3 +33,13 @@ export const storeImagesQueryOptions = (storeId: number) =>
     queryKey: storeQueryKeys.images(storeId),
     queryFn: () => getStoreImages(storeId),
   });
+
+export const cheeredMemberQueryKeys = {
+  all: ["cheeredMember"] as const,
+};
+
+export const cheeredMemberQueryOptions = () =>
+  queryOptions({
+    queryKey: cheeredMemberQueryKeys.all,
+    queryFn: () => getCheeredMember(),
+  });

src/app/member/profile/_components/Banner/Banner.css.ts

@@ -2,7 +2,7 @@
 
 import { useRouter } from "next/navigation";
 
-import ChevronLeftIcon from "@/assets/chevron-left.svg";
+import SettingIcon from "@/assets/setting.svg";
 import { GNB } from "@/components/ui/GNB";
 
 import * as styles from "./Header.css";
@@ -11,21 +11,21 @@ export const Header = () => {
   const router = useRouter();
 
   const handleClick = () => {
-    router.push("/");
+    router.push("/member/setting");
   };
 
   return (
     <GNB
       align='center'
       title='마이페이지'
-      leftAddon={
+      rightAddon={
         <button
           type='button'
           onClick={handleClick}
           aria-label='홈으로 이동하기'
           className={styles.button}
         >
-          <ChevronLeftIcon
+          <SettingIcon
             width={24}
             height={24}
             onClick={handleClick}

src/app/member/profile/_components/Banner/Banner.tsx

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-import { colors, radius } from "@/styles";
+import { colors, radius, semantic, typography } from "@/styles";
 
 export const wrapper = style({
   paddingBottom: "2rem",
@@ -17,3 +17,11 @@ export const imageBackground = style({
   borderRadius: radius.circle,
   overflow: "hidden",
 });
+
+export const myCheerRegisterButton = style({
+  ...typography.body2Sb,
+  width: "100%",
+  padding: "0.9rem 2.8rem",
+  borderRadius: radius[100],
+  border: `1px solid ${semantic.border.grayLight}`,
+});

src/app/member/profile/_components/Banner/index.ts

@@ -1,23 +1,67 @@
 "use client";
 
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import Link from "next/link";
 
+import { cheeredMemberQueryOptions } from "@/app/(store)/_api/shop";
 import { memberQueryOptions } from "@/app/member/_api";
+import { AlertModal } from "@/components/ui/AlertModal";
+import { Button } from "@/components/ui/Button";
+import { VStack } from "@/components/ui/Stack";
 import { Text } from "@/components/ui/Text";
 
+import * as styles from "./Profile.css";
 import { ProfileLayout } from "./ProfileLayout";
 
 export const Profile = () => {
   const { data: member } = useSuspenseQuery(memberQueryOptions);
+  const { data } = useSuspenseQuery(cheeredMemberQueryOptions());
+  const stores = data.stores ?? [];
 
   return (
-    <ProfileLayout>
-      <Text typo='title2Sb' color='neutral.10'>
-        {member.nickname}
-      </Text>
-      <Text typo='caption1Md' color='neutral.50'>
-        {member.email}
-      </Text>
-    </ProfileLayout>
+    <VStack gap={20}>
+      <ProfileLayout>
+        <Text typo='title2Sb' color='neutral.10'>
+          {member.nickname}
+        </Text>
+        <Text typo='caption1Md' color='neutral.50'>
+          {member.email}
+        </Text>
+      </ProfileLayout>
+
+      {stores.length >= 3 ? (
+        <AlertModal
+          title='세 가게 모두 등록 완료!'
+          content={
+            <Text typo='body2Rg' color='text.alternative'>
+              응원하는 가게는 <br /> 최대 3곳까지만 등록할 수 있어요.
+            </Text>
+          }
+          trigger={
+            <button className={styles.myCheerRegisterButton}>
+              내 응원 등록
+            </button>
+          }
+          footer={
+            <AlertDialog.Action asChild>
+              <Button
+                variant='primary'
+                size='large'
+                fullWidth
+                style={{ borderRadius: "0 0 1.2rem 1.2rem" }}
+              >
+                확인
+              </Button>
+            </AlertDialog.Action>
+          }
+        />
+      ) : (
+        <Link href='/stores/register'>
+          {/* TODO: Outline 버튼으로 변경 */}
+          <button className={styles.myCheerRegisterButton}>내 응원 등록</button>
+        </Link>
+      )}
+    </VStack>
   );
 };

src/app/member/profile/_components/Header/Header.tsx

@@ -0,0 +1,91 @@
+import { style } from "@vanilla-extract/css";
+
+import { radius, semantic } from "@/styles";
+
+export const cheerTabContent = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.2rem",
+});
+
+export const emptyWrapper = style({
+  marginTop: "9rem",
+  textAlign: "center",
+});
+
+export const wrapperBase = style({
+  padding: "2rem",
+  borderRadius: "2.4rem",
+});
+
+export const wrapperYellow = style([
+  wrapperBase,
+  { backgroundColor: "#FEF8DD" },
+]);
+export const wrapperPink = style([wrapperBase, { backgroundColor: "#FDE5E3" }]);
+export const wrapperBlue = style([wrapperBase, { backgroundColor: "#E0F2FF" }]);
+
+export const WRAPPER_COLORS = [wrapperYellow, wrapperPink, wrapperBlue];
+
+export const locationIcon = style({
+  color: semantic.icon.gray,
+});
+
+export const cheerPeopleCountWrapper = style({
+  backgroundColor: semantic.background.white,
+  padding: "0.8rem 1.2rem",
+  borderRadius: radius[100],
+});
+
+export const avatarOverlap = style({
+  border: "2px solid white",
+  marginLeft: "-18px",
+  borderRadius: radius.circle,
+  width: "2.4rem",
+  height: "2.4rem",
+
+  ":first-child": {
+    marginLeft: "0",
+  },
+});
+
+export const storyGrid = style({
+  display: "grid",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  gap: "0.1rem",
+});
+
+export const storyCard = style({
+  position: "relative",
+  width: "100%",
+  aspectRatio: "124 / 210",
+});
+
+export const storyImage = style({
+  objectFit: "cover",
+});
+
+export const overlay = style({
+  position: "absolute",
+  inset: 0,
+  background:
+    "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%)",
+});
+
+export const storeNameWrapper = style({
+  position: "absolute",
+  left: "0.6rem",
+  bottom: "1.2rem",
+
+  display: "flex",
+  alignItems: "center",
+  gap: "0.4rem",
+});
+
+export const marketIcon = style({
+  color: semantic.icon.white,
+});
+
+export const preLine = style({
+  whiteSpace: "pre-line",
+});