Merge branch 'feat/home-banner-top/#64' of https://github.com/SOPT-al…

…l/35-APPJAM-WEB-CONFETI into feat/home-banner-top/#64

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/confeti-detail.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  padding: '2.4rem 2rem',
+  gridColumnGap: '1.75rem',
+  gridRowGap: '3rem',
+});

apps/client/src/pages/my/page/confeti-detail.tsx

@@ -0,0 +1,22 @@
+import { FestivalCard, Header } from '@confeti/design-system';
+import { PERFORMANCE_DATA } from '@shared/mocks/performance-data';
+import * as styles from './confeti-detail.css';
+
+const ConfetiDetail = () => {
+  return (
+    <>
+      <Header variant="detail" title="My Confeti" />
+      <div className={styles.container}>
+        {PERFORMANCE_DATA.data.performances.map((performance) => (
+          <FestivalCard
+            key={performance.performanceId}
+            title={performance.title}
+            imageSrc={performance.posterUrl}
+          />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default ConfetiDetail;

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/constants/path.ts

@@ -1,4 +1,5 @@
 export const routePath = {
   ROOT: '/',
   MY: '/my',
+  MYCONFETI: '/my-confeti',
 } as const;

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;

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

@@ -0,0 +1,48 @@
+export const PERFORMANCE_DATA = {
+  data: {
+    performances: [
+      {
+        performanceId: 1,
+        title: 'TONE STUDIO LIVE 〈고고학(GOGOHAWK)〉',
+        posterUrl:
+          'https://cdnticket.melon.co.kr/resource/image/upload/product/2024/12/2024122617060697685b42-e726-4421-b1e0-eb803e95bd7c.jpg/melon/resize/180x254/strip/true/quality/90/optimize',
+      },
+      {
+        performanceId: 2,
+        title: '2024 위버스 콘 페스티벌',
+        posterUrl:
+          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUYECrN1uLKcS2DYqamPLikzzmusDz15fFBg&s',
+      },
+      {
+        performanceId: 3,
+        title: 'TONE STUDIO LIVE 〈고고학(GOGOHAWK)〉',
+        posterUrl:
+          'https://cdnticket.melon.co.kr/resource/image/upload/product/2024/12/2024122617060697685b42-e726-4421-b1e0-eb803e95bd7c.jpg/melon/resize/180x254/strip/true/quality/90/optimize',
+      },
+      {
+        performanceId: 4,
+        title: 'TONE STUDIO LIVE 〈고고학(GOGOHAWK)〉',
+        posterUrl:
+          'https://cdnticket.melon.co.kr/resource/image/upload/product/2024/12/2024122617060697685b42-e726-4421-b1e0-eb803e95bd7c.jpg/melon/resize/180x254/strip/true/quality/90/optimize',
+      },
+      {
+        performanceId: 5,
+        title: 'TONE STUDIO LIVE 〈고고학(GOGOHAWK)〉',
+        posterUrl:
+          'https://cdnticket.melon.co.kr/resource/image/upload/product/2024/12/2024122617060697685b42-e726-4421-b1e0-eb803e95bd7c.jpg/melon/resize/180x254/strip/true/quality/90/optimize',
+      },
+      {
+        performanceId: 6,
+        title: 'TONE STUDIO LIVE 〈고고학(GOGOHAWK)〉',
+        posterUrl:
+          'https://cdnticket.melon.co.kr/resource/image/upload/product/2024/12/2024122617060697685b42-e726-4421-b1e0-eb803e95bd7c.jpg/melon/resize/180x254/strip/true/quality/90/optimize',
+      },
+      {
+        performanceId: 7,
+        title: '2025 검정치마 단독공연＂SONGS TO BRING YOU HOME＂',
+        posterUrl:
+          'https://ticketimage.interpark.com/Play/image/large/25/25000084_p.gif',
+      },
+    ],
+  },
+} as const;

apps/client/src/shared/router/lazy.ts

@@ -2,3 +2,6 @@ import { lazy } from 'react';
 
 export const HomePage = lazy(() => import('@pages/home/page/home'));
 export const MyPage = lazy(() => import('@pages/my/page/my'));
+export const MyConfetiPage = lazy(
+  () => import('@pages/my/page/confeti-detail'),
+);

apps/client/src/shared/router/router.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import GlobalLayout from './global-layout';
-import { HomePage, MyPage } from './lazy';
+import { HomePage, MyConfetiPage, MyPage } from './lazy';
 import { routePath } from '@shared/constants/path';
 
 export default function Router() {
@@ -11,6 +11,7 @@ export default function Router() {
         <Route element={<GlobalLayout />}>
           <Route path={routePath.ROOT} element={<HomePage />} />
           <Route path={routePath.MY} element={<MyPage />} />
+          <Route path={routePath.MYCONFETI} element={<MyConfetiPage />} />
         </Route>
       </Routes>
     </Suspense>