Skip to content

Commit

Permalink
feat: 홈 메인 퍼블리싱 (#63)
Browse files Browse the repository at this point in the history
  • Loading branch information
rtttr1 committed Jan 16, 2025
1 parent 1081829 commit 6198c67
Show file tree
Hide file tree
Showing 10 changed files with 204 additions and 65 deletions.
3 changes: 3 additions & 0 deletions src/assets/svg/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
export { default as IcAssetTop1 } from './IcAssetTop1'
export { default as IcAssetTop2 } from './IcAssetTop2'
export { default as IcAssetTop3 } from './IcAssetTop3'
export { default as IcBack } from './IcBack'
export { default as IcClose } from './IcClose'
11 changes: 11 additions & 0 deletions src/pages/home/components/ClassItem/index.css.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { style } from '@vanilla-extract/css';
import { vars } from '@/styles/theme.css';

export const classImageStyle = style({
width: '16.4rem',
Expand All @@ -17,8 +18,18 @@ export const teacherImageStyle = style({
export const wrapperStyle = style({
position: 'relative',
});

export const deadlineTagStyle = style({
position: 'absolute',

top: '0.8rem',
});

export const genreWrapperStyle = style({
width: '100%',

marginTop: '4.8rem',
padding: '3.2rem 2rem 3.8rem 2rem',

backgroundColor: vars.colors.gray01,
});
7 changes: 7 additions & 0 deletions src/pages/home/components/DancerItem/index.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { style } from '@vanilla-extract/css';

export const dancerImageStyle = style({
borderRadius: '50%',

backgroundSize: 'cover',
});
24 changes: 24 additions & 0 deletions src/pages/home/components/DancerItem/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { dancerImageStyle } from '@/pages/home/components/DancerItem/index.css';
import Flex from '@/components/Flex';
import Head from '@/components/Head';
import Text from '@/components/Text';

interface DanceItemProps {
teacherImageUrl: string;
teacherGenre: string;
teacherNickName: string;
}

const DancerItem = ({ teacherImageUrl, teacherGenre, teacherNickName }: DanceItemProps) => {
return (
<Flex tag="li" direction="column" gap="1.2rem" align="center">
<img src={teacherImageUrl} alt="댄서 프로필" width={78} height={78} className={dancerImageStyle} />
<Flex direction="column" gap="0.4rem" align="center">
<Head tag="h6">{teacherNickName}</Head>
<Text tag="b6">{teacherGenre}</Text>
</Flex>
</Flex>
);
};

export default DancerItem;
Empty file.
5 changes: 5 additions & 0 deletions src/pages/home/components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const Footer = () => {
return<Ic></Ic>;
};

export default Footer;
23 changes: 23 additions & 0 deletions src/pages/home/components/GenreItem/index.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { style } from '@vanilla-extract/css';
import { vars } from '@/styles/theme.css';

export const containerStyle = style({
position: 'relative',
width: '100%',
height: '7.6rem',

borderRadius: '4px',
backgroundColor: vars.colors.white,
});

export const medalStyle = style({
position: 'absolute',
top: 0,
left: '0.8rem',
});

export const genreStyle = style({
position: 'absolute',
bottom: '1rem',
right: '1rem',
});
21 changes: 21 additions & 0 deletions src/pages/home/components/GenreItem/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { containerStyle, genreStyle, medalStyle } from '@/pages/home/components/GenreItem/index.css';
import Text from '@/components/Text';

interface GenreItemProps {
medalIcon: JSX.Element;
genre: string;
}

const GenreItem = ({ medalIcon, genre }: GenreItemProps) => {
return (
<li className={containerStyle}>
<div className={medalStyle}>{medalIcon}</div>

<Text tag="b2" className={genreStyle}>
{genre}
</Text>
</li>
);
};

export default GenreItem;
29 changes: 27 additions & 2 deletions src/pages/home/index.css.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,33 @@
import { style } from '@vanilla-extract/css';

export const containerStyle = style({
paddingLeft: '2rem',

overflow: 'auto',
whiteSpace: 'nowrap',
});

export const rowScrollwrapperStyle = style({
width: '100%',

paddingLeft: '2rem',
});

export const recommandClassWrapperStyle = style({
width: '100%',

paddingLeft: '2rem',
marginTop: '3.2rem',
});

export const dancerListWrapperstyle = style({
width: '100%',

paddingLeft: '2rem',
marginTop: '4.8rem',
});

export const deadlineClassWrapperStyle = style({
width: '100%',

paddingLeft: '2rem',
marginTop: '6.1rem',
});
146 changes: 83 additions & 63 deletions src/pages/home/index.tsx
Original file line number Diff line number Diff line change
@@ -1,71 +1,91 @@
import ClassItem from '@/pages/home/components/ClassItem';
import { containerStyle } from '@/pages/home/index.css';
import { genreWrapperStyle } from '@/pages/home/components/ClassItem/index.css';
import DancerItem from '@/pages/home/components/DancerItem';
import GenreItem from '@/pages/home/components/GenreItem';
import {
containerStyle,
dancerListWrapperstyle,
deadlineClassWrapperStyle,
recommandClassWrapperStyle,
} from '@/pages/home/index.css';
import Flex from '@/components/Flex';
import Head from '@/components/Head';
import { DANCERLIST, GENRELIST, RECOMMAND_CLASSLIST } from '@/constants/home';

const Home = () => {
return (
<Flex tag="ul" className={containerStyle}>
<ClassItem
lessonId={67890}
lessonImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonLevel="초급"
lessonGenre="힙합"
lessonName="기초 힙합 댄스"
teacherNickname="김민수"
teacherImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonStartDateTime="2025-01-16T10:00:00"
lessonEndDateTime="2025-01-01T12:00:00"
lessonStreetAddress="서울특별시 강남구 테헤란로 123"
/>
<ClassItem
lessonId={67890}
lessonImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonLevel="초급"
lessonGenre="힙합"
lessonName="기초 힙합 댄스"
teacherNickname="김민수"
teacherImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonStartDateTime="2025-01-16T10:00:00"
lessonEndDateTime="2025-01-01T12:00:00"
lessonStreetAddress="서울특별시 강남구 테헤란로 123"
/>
<ClassItem
lessonId={67890}
lessonImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonLevel="초급"
lessonGenre="힙합"
lessonName="기초 힙합 댄스"
teacherNickname="김민수"
teacherImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonStartDateTime="2025-01-16T10:00:00"
lessonEndDateTime="2025-01-01T12:00:00"
lessonStreetAddress="서울특별시 강남구 테헤란로 123"
/>
<ClassItem
lessonId={67890}
lessonImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonLevel="초급"
lessonGenre="힙합"
lessonName="기초 힙합 댄스"
teacherNickname="김민수"
teacherImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonStartDateTime="2025-01-16T10:00:00"
lessonEndDateTime="2025-01-01T12:00:00"
lessonStreetAddress="서울특별시 강남구 테헤란로 123"
/>
<ClassItem
lessonId={67890}
lessonImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonLevel="초급"
lessonGenre="힙합"
lessonName="기초 힙합 댄스"
teacherNickname="김민수"
teacherImageUrl="https://i.namu.wiki/i/B8j2IU2giY7fFeK_M9_QHGinGLoXp---93tHjwIac--A3yKtejXsamDw8sTv-xpjxRQSCfP1fuxRmSW2xFr5NV4_b0-OpTK9_7biMhp4tuuHKExvXq9W-vJHWkSd8SI8hthHj7ctXncHef30HHzC4A.webp"
lessonStartDateTime="2025-01-16T10:00:00"
lessonEndDateTime="2025-01-01T12:00:00"
lessonStreetAddress="서울특별시 강남구 테헤란로 123"
/>
</Flex>
<>
<div className={recommandClassWrapperStyle}>
<Head level="h2" tag="h4">
이 클래스는 꼭 들어야 해요!
</Head>
<Flex tag="ul" gap="0.8rem" marginTop="2rem" className={containerStyle}>
{RECOMMAND_CLASSLIST.map((data) => (
<ClassItem
lessonId={data.lessonId}
lessonImageUrl={data.teacherImageUrl}
lessonLevel={data.lessonLevel}
lessonGenre={data.lessonGenre}
lessonName={data.lessonName}
teacherNickname={data.teacherNickname}
teacherImageUrl={data.teacherImageUrl}
lessonStartDateTime={data.lessonStartDateTime}
lessonEndDateTime={data.lessonEndDateTime}
lessonStreetAddress={data.lessonStreetAddress}
/>
))}
</Flex>
</div>

<div className={genreWrapperStyle}>
<Head level="h2" tag="h4">
지금 가장 인기있는 댄스 장르
</Head>
<Flex tag="ul" gap="0.7rem" marginTop="2rem">
{GENRELIST.map((data) => (
<GenreItem medalIcon={data.medal} genre={data.genre} />
))}
</Flex>
</div>

<div className={dancerListWrapperstyle}>
<Head level="h2" tag="h4">
가장 핫한 댄서들만 모아봤어요
</Head>
<Flex tag="ul" gap="0.8rem" marginTop="2rem" className={containerStyle}>
{DANCERLIST.map((data) => (
<DancerItem
key={data.teacherId}
teacherImageUrl={data.teacherImageUrl}
teacherGenre={data.teacherGenre}
teacherNickName={data.teacherNickName}
/>
))}
</Flex>
</div>

<div className={deadlineClassWrapperStyle}>
<Head level="h2" tag="h4">
놓치면 아쉬울 마지막 기회
</Head>
<Flex tag="ul" marginTop="2rem" gap="0.8rem" className={containerStyle}>
{RECOMMAND_CLASSLIST.map((data) => (
<ClassItem
lessonId={data.lessonId}
lessonImageUrl={data.teacherImageUrl}
lessonLevel={data.lessonLevel}
lessonGenre={data.lessonGenre}
lessonName={data.lessonName}
teacherNickname={data.teacherNickname}
teacherImageUrl={data.teacherImageUrl}
lessonStartDateTime={data.lessonStartDateTime}
lessonEndDateTime={data.lessonEndDateTime}
lessonStreetAddress={data.lessonStreetAddress}
/>
))}
</Flex>
</div>
</>
);
};

Expand Down

0 comments on commit 6198c67

Please sign in to comment.