From 421d47abb7f9eec39b80304f50544364b74946d1 Mon Sep 17 00:00:00 2001 From: hansoojeongsj Date: Thu, 16 Jan 2025 04:30:46 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Flex=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20(#52)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/class/components/Card/index.css.ts | 2 +- src/pages/class/components/Intro/index.tsx | 2 +- src/pages/class/components/Level/index.css.ts | 19 ------ src/pages/class/components/Level/index.tsx | 20 +++--- .../components/LocationInfo/index.css.ts | 28 --------- .../class/components/LocationInfo/index.tsx | 58 ++++++++--------- .../class/components/Period/index.css.ts | 5 -- src/pages/class/components/Period/index.tsx | 63 ++++++++++--------- 8 files changed, 72 insertions(+), 125 deletions(-) diff --git a/src/pages/class/components/Card/index.css.ts b/src/pages/class/components/Card/index.css.ts index 274118d..013f146 100644 --- a/src/pages/class/components/Card/index.css.ts +++ b/src/pages/class/components/Card/index.css.ts @@ -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%', diff --git a/src/pages/class/components/Intro/index.tsx b/src/pages/class/components/Intro/index.tsx index 01b573e..8c8392b 100644 --- a/src/pages/class/components/Intro/index.tsx +++ b/src/pages/class/components/Intro/index.tsx @@ -6,7 +6,7 @@ const Intro = () => { const data = [ { content: - '안녕하세요, 안무가 바다입니다.\n\n저는 인기 아이돌의 안무가로서 다양한 작업에 참여해왔고 현재는 안무 작업 뿐만 아니라 강습도 함께 진행하고 있습니다.\n\n이번 강의에서는 기본기와 프리스타일 위주로 진행하려고 합니다.\n\n💜 먼저, 연결이라는 주제로 움직여보면서 자신만의 무브를 찾아가 볼 예정이고 익숙해진 후에는 컨트롤을 주제로 다양한 루틴을 시도해 볼 예정입니다.', + '안녕하세요, 안무가 바다입니다.\n\n저는 인기 아이돌의 안무가로서 다양한 작업에 참여해왔고 현재는 안무 작업 뿐만 아니라 강습도 함께 진행하고 있습니다.\n\n이번 강의에서는 기본기와 프리스타일 위주로 진행하려고 합니다.\n\n💜먼저, 연결이라는 주제로 움직여보면서 자신만의 무브를 찾아가 볼 예정이고 익숙해진 후에는 컨트롤을 주제로 다양한 루틴을 시도해 볼 예정입니다.', }, ]; diff --git a/src/pages/class/components/Level/index.css.ts b/src/pages/class/components/Level/index.css.ts index 035edfc..e69de29 100644 --- a/src/pages/class/components/Level/index.css.ts +++ b/src/pages/class/components/Level/index.css.ts @@ -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', -}); diff --git a/src/pages/class/components/Level/index.tsx b/src/pages/class/components/Level/index.tsx index 82db3d3..5019477 100644 --- a/src/pages/class/components/Level/index.tsx +++ b/src/pages/class/components/Level/index.tsx @@ -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', }, @@ -19,32 +19,30 @@ const Level = () => {
-
+ - - 입문자 + + {data[0].level} 기본 동작과 리듬 익히기 중심의 단계를 말해요! -
+ - -
+ 클래스 난이도는 이렇게 설정되어있어요! -
+
- -
+ 이런 분들에게 해당 클래스를 추천해요! -
+ {data.map((item, index) => ( diff --git a/src/pages/class/components/LocationInfo/index.css.ts b/src/pages/class/components/LocationInfo/index.css.ts index 1299069..9f214ab 100644 --- a/src/pages/class/components/LocationInfo/index.css.ts +++ b/src/pages/class/components/LocationInfo/index.css.ts @@ -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, diff --git a/src/pages/class/components/LocationInfo/index.tsx b/src/pages/class/components/LocationInfo/index.tsx index bb2cb6d..44bdf5e 100644 --- a/src/pages/class/components/LocationInfo/index.tsx +++ b/src/pages/class/components/LocationInfo/index.tsx @@ -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 = [ @@ -22,51 +22,45 @@ const LocationInfo = () => { {data.map((item, index) => ( -
+ {/* 왼쪽 */} -
+ {item.location} -
- {/* 주소 */} -
- + + + 주소 - - - - {item.address.split('\n').map((line, idx) => ( - - {line} -
- - ))} - - -
+ + + {item.address.split('\n').map((line, idx) => ( + + {line} +
+ + ))} + + - {/* 지번 */} -
- + + 지번 - - - - {item.jibun} - - -
-
-
+ + + {item.jibun} + + + + {/* 오른쪽 */} -
+ ))} diff --git a/src/pages/class/components/Period/index.css.ts b/src/pages/class/components/Period/index.css.ts index 3d28654..5befa27 100644 --- a/src/pages/class/components/Period/index.css.ts +++ b/src/pages/class/components/Period/index.css.ts @@ -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', diff --git a/src/pages/class/components/Period/index.tsx b/src/pages/class/components/Period/index.tsx index 0528040..c260472 100644 --- a/src/pages/class/components/Period/index.tsx +++ b/src/pages/class/components/Period/index.tsx @@ -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 ( - <> {data.map((item, index) => ( -
+
- {item.round}
+ + {item.round}회차 + +
- {item.date} + + {item.date} + - {item.time} ({item.duration}) + {item.startTime} - {item.endTime} (총 {item.duration}시간)
- + ))} - - + ); };