Skip to content

Commit

Permalink
feat: Flex 컴포넌트로 변경 (#52)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hansoojeongsj
hansoojeongsj committed Jan 15, 2025
1 parent e5b25ba commit 421d47a
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 125 deletions.
2 changes: 1 addition & 1 deletion src/pages/class/components/Card/index.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const card = style({
alignItems: 'center',
borderRadius: '4px',
border: '0.5px solid',
borderColor: vars.colors.gray03,
borderColor: vars.colors.gray02,
backgroundColor: vars.colors.white,
gap: '0.8rem',
width: '100%',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/class/components/Intro/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Intro = () => {
const data = [
{
content:
'안녕하세요, 안무가 바다입니다.\n\n저는 인기 아이돌의 안무가로서 다양한 작업에 참여해왔고 현재는 안무 작업 뿐만 아니라 강습도 함께 진행하고 있습니다.\n\n이번 강의에서는 기본기와 프리스타일 위주로 진행하려고 합니다.\n\n💜 먼저, 연결이라는 주제로 움직여보면서 자신만의 무브를 찾아가 볼 예정이고 익숙해진 후에는 컨트롤을 주제로 다양한 루틴을 시도해 볼 예정입니다.',
'안녕하세요, 안무가 바다입니다.\n\n저는 인기 아이돌의 안무가로서 다양한 작업에 참여해왔고 현재는 안무 작업 뿐만 아니라 강습도 함께 진행하고 있습니다.\n\n이번 강의에서는 기본기와 프리스타일 위주로 진행하려고 합니다.\n\n💜먼저, 연결이라는 주제로 움직여보면서 자신만의 무브를 찾아가 볼 예정이고 익숙해진 후에는 컨트롤을 주제로 다양한 루틴을 시도해 볼 예정입니다.',
},
];

Expand Down
19 changes: 0 additions & 19 deletions src/pages/class/components/Level/index.css.ts
View file
Original file line number Diff line number Diff line change
@@ -1,19 +0,0 @@
import { style } from '@vanilla-extract/css';
export const levelContent = style({
display: 'flex',
alignItems: 'center',
gap: '0.8rem',
});
export const levelInfo = style({
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
gap: '0.6rem',
});

export const headerRow = style({
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
gap: '0.8rem',
});
20 changes: 9 additions & 11 deletions src/pages/class/components/Level/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import Flex from '@/components/Flex';
import Head from '@/components/Head';
import Text from '@/components/Text';
import { IcClose, IcQuesitonmark } from '@/assets/svg';
import { levelContent, levelInfo, headerRow } from './index.css';

const Level = () => {
const data = [
{
level: "입문자",
content:
'바다리만의 트렌디한 힙합 베이스를\n바다리만의 트렌디한 힙합 베이스를 배우고\n바다리만의 트렌디한 힙합 베이스를 배우고 싶은 분\n',
},
Expand All @@ -19,32 +19,30 @@ const Level = () => {
<Flex direction="column" gap="3.6rem">
<div>
<Card>
<div className={levelContent}>
<Flex gap="0.8rem" align="center">
<IcClose width={36} />
<Head level="h3" tag="h6">
입문자
<Head level="h6" tag="h6">
{data[0].level}
</Head>
<Text tag="b8" color="gray8">
기본 동작과 리듬 익히기 중심의 단계를 말해요!
</Text>
</div>
</Flex>
</Card>

<div className={levelInfo}>
<Flex justify="flexEnd" align="center" gap="0.6rem">
<Text tag="c3" color="gray7">
클래스 난이도는 이렇게 설정되어있어요!
</Text>
<IcQuesitonmark width={14} />
</div>
</Flex>
</div>

<Flex direction="column" gap="1.2rem">
<div className={headerRow}>
<Flex justify="flexStart" align="center" gap="0.8rem">
<IcClose width={24} />
<Head level="h5" tag="h6">
이런 분들에게 해당 클래스를 추천해요!
</Head>
</div>
</Flex>

{data.map((item, index) => (
<Text tag="b3" color="gray8" key={index}>
Expand Down
28 changes: 0 additions & 28 deletions src/pages/class/components/LocationInfo/index.css.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,5 @@
import { style } from '@vanilla-extract/css';

export const cardContent = style({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
gap: '1.6rem',
});

export const locationBox = style({
display: 'flex',
flexDirection: 'column',
gap: '0.6rem',
});

export const addressDetail = style({
display: 'flex',
flexDirection: 'column',
gap: '0.4rem',
});
export const addressRow = style({
display: 'flex',
justifyContent: 'space-between',
});

export const addressLeft = style({
marginRight: '0.4rem',
});

export const addressRight = style({
textAlign: 'left',
flex: 1,
Expand Down
58 changes: 26 additions & 32 deletions src/pages/class/components/LocationInfo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Card from '@/pages/class/components/Card';
import Flex from '@/components/Flex';
import Text from '@/components/Text';
import { IcClose } from '@/assets/svg';
import { cardContent, locationBox, addressDetail, addressRow, addressLeft, addressRight } from './index.css';
import { addressRight } from './index.css';

const LocationInfo = () => {
const data = [
Expand All @@ -22,51 +22,45 @@ const LocationInfo = () => {
<Flex direction="column" justify="center" gap="1.2rem">
{data.map((item, index) => (
<Card key={index}>
<div className={cardContent}>
<Flex align="center" justify="spaceBetween" gap="1.6rem" width="100%">
{/* 왼쪽 */}
<div className={locationBox}>
<Flex direction="column" gap="0.6rem">
<Text tag="b4" color="black">
{item.location}
</Text>
<div className={addressDetail}>
{/* 주소 */}
<div className={addressRow}>
<span className={addressLeft}>
<Flex direction="column" gap="0.4rem">
<Flex justify="spaceBetween">
<Flex marginRight="0.4rem">
<Text tag="b7" color="gray6">
주소
</Text>
</span>
<span className={addressRight}>
<Text tag="b7" color="gray7">
{item.address.split('\n').map((line, idx) => (
<React.Fragment key={idx}>
{line}
<br />
</React.Fragment>
))}
</Text>
</span>
</div>
</Flex>
<Text tag="b7" color="gray7">
{item.address.split('\n').map((line, idx) => (
<React.Fragment key={idx}>
{line}
<br />
</React.Fragment>
))}
</Text>
</Flex>

{/* 지번 */}
<div className={addressRow}>
<span className={addressLeft}>
<Flex justify="spaceBetween">
<Flex marginRight="0.4rem">
<Text tag="b7" color="gray6">
지번
</Text>
</span>
<span className={addressRight}>
<Text tag="b7" color="gray7">
{item.jibun}
</Text>
</span>
</div>
</div>
</div>
</Flex>
<Text tag="b7" color="gray7">
{item.jibun}
</Text>
</Flex>
</Flex>
</Flex>

{/* 오른쪽 */}
<IcClose width={41} />
</div>
</Flex>
</Card>
))}
</Flex>
Expand Down
5 changes: 0 additions & 5 deletions src/pages/class/components/Period/index.css.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import { style } from '@vanilla-extract/css';
import { vars } from "@/styles/theme.css";

export const cardContent = style({
display: 'flex',
alignItems: 'center',
});

export const roundBox = style({
display: 'flex',
justifyContent: 'center',
Expand Down
63 changes: 35 additions & 28 deletions src/pages/class/components/Period/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,62 @@
import Flex from "@/components/Flex";
import Card from "@/pages/class/components/Card";
import Text from "@/components/Text"
import { cardContent, roundBox } from "./index.css";
import Card from '@/pages/class/components/Card';
import Flex from '@/components/Flex';
import Text from '@/components/Text';
import { roundBox } from './index.css';

const Period = () => {
const data = [
{
round: "1회차",
date: "2025년 1월 8일 수요일",
time: "18:00 - 20:00",
duration: "총 2시간",
round: '1',
date: '2025년 1월 8일 수요일',
startTime: '18:00',
endTime: '20:00',
duration: '2',
},
{
round: "2회차",
date: "2025년 1월 9일 목요일",
time: "14:00 - 16:00",
duration: "총 2시간",
round: '2',
date: '2025년 1월 9일 목요일',
startTime: '14:00',
endTime: '20:00',
duration: '2',
},
{
round: "3회차",
date: "2025년 1월 10일 금요일",
time: "10:00 - 12:00",
duration: "총 2시간",
round: '3',
date: '2025년 1월 10일 금요일',
startTime: '10:00',
endTime: '20:00',
duration: '2',
},
{
round: "4회차",
date: "2025년 1월 11일 토요일",
time: "15:00 - 17:00",
duration: "총 2시간",
round: '4',
date: '2025년 1월 11일 토요일',
startTime: '15:00',
endTime: '20:00',
duration: '2',
},
];

return (
<>
<Flex direction="column" justify="center" gap="1.2rem">
{data.map((item, index) => (
<Card key={index}>
<div className={cardContent}>
<Flex align="center">
<div className={roundBox}>
<Text tag='b10' color='white'>{item.round}</Text></div>
<Text tag="b10" color="white">
{item.round}회차
</Text>
</div>
<div>
<Text tag="b4" color="black">{item.date}</Text>
<Text tag="b4" color="black">
{item.date}
</Text>
<Text tag="b7" color="gray7">
{item.time} ({item.duration})
{item.startTime} - {item.endTime} (총 {item.duration}시간)
</Text>
</div>
</div>
</Flex>
</Card>
))}
</Flex>
</>
</Flex>
);
};

Expand Down

0 comments on commit 421d47a

Please sign in to comment.