Feat(client): 마이페이지 퍼블리싱 (#87)

* feat: reset.css내 margin추가

* refactor: 아티스트 카드 컴포넌트 width 반응형으로 수정

* feat: 아이콘 경로 추가

* feat: Footer 하단 고정

* feat: ArtistCard export 추가

* feat: 마이페이지 아티스트 및 공연 섹션 추가

apps/client/src/pages/my/components/artist-section.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: '3.2rem',
+  margin: '0.8rem 0 1.2rem 0',
+});

apps/client/src/pages/my/components/artist-section.tsx

@@ -0,0 +1,30 @@
+import { ArtistCard } from '@confeti/design-system';
+import * as styles from './artist-section.css';
+
+type Artist = {
+  artistId: string;
+  name: string;
+  profileUrl: string;
+};
+
+interface ArtistSectionProps {
+  artists: Artist[];
+}
+
+const ArtistSection = ({ artists }: ArtistSectionProps) => {
+  return (
+    <div className={styles.container}>
+      {artists.map((artist) => (
+        <ArtistCard
+          key={artist.artistId}
+          artistId={artist.artistId}
+          title={artist.name}
+          imageSrc={artist.profileUrl}
+          size="lg"
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ArtistSection;

apps/client/src/pages/my/components/box.css.ts

@@ -0,0 +1,33 @@
+import { themeVars } from '@confeti/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  padding: '2.4rem 2rem',
+});
+
+export const header = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '2rem',
+});
+
+export const title = style({
+  ...themeVars.fontStyles.title4_b_16,
+  color: themeVars.color.gray500,
+});
+
+export const buttonWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const button = style({
+  ...themeVars.fontStyles.subtitle5_sb_12,
+  color: themeVars.color.gray500,
+});
+
+export const icon = style({
+  width: '1.2rem',
+  height: '1.2rem',
+});

apps/client/src/pages/my/components/box.tsx

@@ -0,0 +1,27 @@
+import { IcArrowGray16 } from '@confeti/design-system/icons';
+import * as styles from './box.css';
+
+interface BoxProps {
+  title: string;
+  children: React.ReactNode;
+  showMore?: boolean;
+}
+
+const Box = ({ title, children, showMore = false }: BoxProps) => {
+  return (
+    <section className={styles.container}>
+      <div className={styles.header}>
+        <h3 className={styles.title}>{title}</h3>
+        {showMore && (
+          <div className={styles.buttonWrapper}>
+            <button className={styles.button}>더보기</button>
+            <IcArrowGray16 className={styles.icon} />
+          </div>
+        )}
+      </div>
+      <div>{children}</div>
+    </section>
+  );
+};
+
+export default Box;

apps/client/src/pages/my/components/confeti-section.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: '1.8rem',
+});

apps/client/src/pages/my/components/conteti-section.tsx

@@ -0,0 +1,28 @@
+import { FestivalCard } from '@confeti/design-system';
+import * as styles from './confeti-section.css';
+
+type Confeti = {
+  performanceId: number;
+  title: string;
+  posterUrl: string;
+};
+
+interface ConfetiProps {
+  confeti: Confeti[];
+}
+
+const ConfetiSection = ({ confeti }: ConfetiProps) => {
+  return (
+    <div className={styles.container}>
+      {confeti.map((confeti) => (
+        <FestivalCard
+          key={confeti.performanceId}
+          title={confeti.title}
+          imageSrc={confeti.posterUrl}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ConfetiSection;

apps/client/src/pages/my/components/no-artist-section.css.ts

@@ -0,0 +1,20 @@
+import { themeVars } from '@confeti/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  ...themeVars.display.flexCenter,
+  flexDirection: 'column',
+});
+
+export const title = style({
+  ...themeVars.fontStyles.body3_m_14,
+  margin: '2rem',
+  color: themeVars.color.gray500,
+  whiteSpace: 'pre-line',
+  lineHeight: '100%',
+  fontWeight: '500',
+});
+
+export const button = style({
+  width: '18rem',
+});

apps/client/src/pages/my/components/no-artist-section.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@confeti/design-system';
+import * as styles from './no-artist-section.css';
+
+const NoArtistSection = () => {
+  return (
+    <div className={styles.wrapper}>
+      <p className={styles.title}>
+        {`관심있는 아티스트가 궁금해요! \n
+                아티스트를 선택하러 가볼까요?`}
+      </p>
+
+      <div className={styles.button}>
+        <Button text="아티스트 선택하기" />
+      </div>
+    </div>
+  );
+};
+
+export default NoArtistSection;

apps/client/src/pages/my/components/no-confeti-section.css.ts

@@ -0,0 +1,9 @@
+import { themeVars } from '@confeti/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  ...themeVars.display.flexCenter,
+  ...themeVars.fontStyles.body3_m_14,
+  color: themeVars.color.gray500,
+  padding: '6.4rem',
+});

apps/client/src/pages/my/components/no-confeti-section.tsx

@@ -0,0 +1,11 @@
+import * as styles from './no-confeti-section.css';
+
+const NoConfetiSection = () => {
+  return (
+    <div className={styles.wrapper}>
+      <p>아직 My Confeti가 없어요</p>
+    </div>
+  );
+};
+
+export default NoConfetiSection;

apps/client/src/pages/my/components/user-info.css.ts

@@ -16,7 +16,9 @@ export const img = style({
 });
 
 export const userInfo = style({
-  marginBottom: '1rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.6rem',
 });
 
 export const title = style({

apps/client/src/pages/my/page/my.tsx

@@ -1,14 +1,41 @@
-import { Header } from '@confeti/design-system';
-import UserInfo from '../components/user-info';
+import { Header, Footer, Spacing } from '@confeti/design-system';
 import { USER_DATA } from '@shared/mocks/user-data';
+import { ARTISTS_DATA } from '@shared/mocks/artists-data';
+import { PERFORMANCE_DATA } from '@shared/mocks/performance-data';
+
+import UserInfo from '../components/user-info';
+import Box from '../components/box';
+import NoArtistSection from '../components/no-artist-section';
+import NoConfetiSection from '../components/no-confeti-section';
+import ArtistSection from '../components/artist-section';
+import ConfetiSection from '../components/conteti-section';
 
 const My = () => {
   const { userName, profileUrl } = USER_DATA.data;
+  const artists = [...ARTISTS_DATA.data.artists];
+  const confetis = [...PERFORMANCE_DATA.data.performances.slice(0, 3)]; // 임의로 앞에 3개만 가져옴
 
   return (
     <>
       <Header variant="detail" title="마이페이지" />
       <UserInfo userName={userName} profileUrl={profileUrl} />
+      <Spacing />
+      <Box title="My Artist" showMore={artists.length > 0}>
+        {artists.length > 0 ? (
+          <ArtistSection artists={artists} />
+        ) : (
+          <NoArtistSection />
+        )}
+      </Box>
+      <Spacing />
+      <Box title="My Confeti" showMore={confetis.length > 0}>
+        {confetis.length > 0 ? (
+          <ConfetiSection confeti={confetis} />
+        ) : (
+          <NoConfetiSection />
+        )}
+      </Box>
+      <Footer />
     </>
   );
 };

apps/client/src/shared/mocks/artists-data.ts

@@ -0,0 +1,24 @@
+export const ARTISTS_DATA = {
+  data: {
+    artists: [
+      {
+        artistId: '5kVZa4lFUmAQlBogl1fkd6',
+        name: 'Aimyon',
+        profileUrl:
+          'https://i.scdn.co/image/ab6761610000f17893db4a195c102e95153eb2e5',
+      },
+      {
+        artistId: '5kVZa4lFUmAQlBogl1fkd6',
+        name: 'Aimyon',
+        profileUrl:
+          'https://i.scdn.co/image/ab6761610000f17893db4a195c102e95153eb2e5',
+      },
+      {
+        artistId: '5kVZa4lFUmAQlBogl1fkd6',
+        name: 'Aimyon',
+        profileUrl:
+          'https://i.scdn.co/image/ab6761610000f17893db4a195c102e95153eb2e5',
+      },
+    ],
+  },
+} as const;

packages/design-system/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "exports": {
     ".": "./src/components/index.ts",
-    "./styles": "./src/styles/index.ts"
+    "./styles": "./src/styles/index.ts",
+    "./icons": "./src/icons/src/index.ts"
   },
   "scripts": {
     "lint": "eslint --max-warnings 0",

packages/design-system/src/components/artist-card/artist-card.css.ts

@@ -8,35 +8,15 @@ export const artistCardVariants = recipe({
     position: 'relative',
     gap: '1.2rem',
     cursor: 'pointer',
-  },
-  variants: {
-    size: {
-      sm: { width: '7rem' },
-      md: { width: '8rem' },
-      lg: { width: '9rem' },
-    },
+    width: '100%',
   },
 });
 
 export const artistImg = recipe({
   base: {
     borderRadius: '50%',
-  },
-  variants: {
-    size: {
-      sm: {
-        width: '7rem',
-        height: '7rem',
-      },
-      md: {
-        width: '8rem',
-        height: '8rem',
-      },
-      lg: {
-        width: '9rem',
-        height: '9rem',
-      },
-    },
+    width: '100%',
+    height: '100%',
   },
 });
 

packages/design-system/src/components/artist-card/artist-card.stories.tsx

@@ -17,7 +17,27 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    data: [{ id: 1, name: '데이식스', image: 'https://dummyimage.com/80X80' }],
+    artistId: '1',
+    title: '데이식스',
+    imageSrc: 'https://dummyimage.com/80X80',
+    size: 'lg',
+  },
+};
+
+export const Sm: Story = {
+  args: {
+    artistId: '1',
+    title: '데이식스',
+    imageSrc: 'https://dummyimage.com/80X80',
     size: 'sm',
   },
 };
+
+export const Md: Story = {
+  args: {
+    artistId: '1',
+    title: '데이식스',
+    imageSrc: 'https://dummyimage.com/80X80',
+    size: 'md',
+  },
+};