diff --git a/apps/client/src/pages/my/components/artist-section.css.ts b/apps/client/src/pages/my/components/artist-section.css.ts new file mode 100644 index 0000000..b9fa55c --- /dev/null +++ b/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', +}); diff --git a/apps/client/src/pages/my/components/artist-section.tsx b/apps/client/src/pages/my/components/artist-section.tsx new file mode 100644 index 0000000..a15ed78 --- /dev/null +++ b/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 ( +
+ {artists.map((artist) => ( + + ))} +
+ ); +}; + +export default ArtistSection; diff --git a/apps/client/src/pages/my/components/box.css.ts b/apps/client/src/pages/my/components/box.css.ts new file mode 100644 index 0000000..e1030d7 --- /dev/null +++ b/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', +}); diff --git a/apps/client/src/pages/my/components/box.tsx b/apps/client/src/pages/my/components/box.tsx new file mode 100644 index 0000000..7b0c82c --- /dev/null +++ b/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 ( +
+
+

{title}

+ {showMore && ( +
+ + +
+ )} +
+
{children}
+
+ ); +}; + +export default Box; diff --git a/apps/client/src/pages/my/components/confeti-section.css.ts b/apps/client/src/pages/my/components/confeti-section.css.ts new file mode 100644 index 0000000..9f8e912 --- /dev/null +++ b/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', +}); diff --git a/apps/client/src/pages/my/components/conteti-section.tsx b/apps/client/src/pages/my/components/conteti-section.tsx new file mode 100644 index 0000000..fa27c12 --- /dev/null +++ b/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 ( +
+ {confeti.map((confeti) => ( + + ))} +
+ ); +}; + +export default ConfetiSection; diff --git a/apps/client/src/pages/my/components/no-artist-section.css.ts b/apps/client/src/pages/my/components/no-artist-section.css.ts new file mode 100644 index 0000000..e41838d --- /dev/null +++ b/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', +}); diff --git a/apps/client/src/pages/my/components/no-artist-section.tsx b/apps/client/src/pages/my/components/no-artist-section.tsx new file mode 100644 index 0000000..3c05a75 --- /dev/null +++ b/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 ( +
+

+ {`관심있는 아티스트가 궁금해요! \n + 아티스트를 선택하러 가볼까요?`} +

+ +
+
+
+ ); +}; + +export default NoArtistSection; diff --git a/apps/client/src/pages/my/components/no-confeti-section.css.ts b/apps/client/src/pages/my/components/no-confeti-section.css.ts new file mode 100644 index 0000000..635c1a5 --- /dev/null +++ b/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', +}); diff --git a/apps/client/src/pages/my/components/no-confeti-section.tsx b/apps/client/src/pages/my/components/no-confeti-section.tsx new file mode 100644 index 0000000..db870c0 --- /dev/null +++ b/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 ( +
+

아직 My Confeti가 없어요

+
+ ); +}; + +export default NoConfetiSection; diff --git a/apps/client/src/pages/my/components/user-info.css.ts b/apps/client/src/pages/my/components/user-info.css.ts index f250d14..7a48333 100644 --- a/apps/client/src/pages/my/components/user-info.css.ts +++ b/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({ diff --git a/apps/client/src/pages/my/page/my.tsx b/apps/client/src/pages/my/page/my.tsx index 7166f9f..2c2bfe7 100644 --- a/apps/client/src/pages/my/page/my.tsx +++ b/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 ( <>
+ + 0}> + {artists.length > 0 ? ( + + ) : ( + + )} + + + 0}> + {confetis.length > 0 ? ( + + ) : ( + + )} + +