From ee559fe9e116c6e0b2f9ea72a4a1b91f07419608 Mon Sep 17 00:00:00 2001 From: hansoojeongsj Date: Thu, 16 Jan 2025 05:05:18 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=ED=83=AD=20=EB=B7=B0=20(#52)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/BottomComponent/index.css.ts | 4 - .../components/BottomComponent/index.tsx | 14 ++-- src/pages/class/components/Card/index.css.ts | 2 +- src/pages/class/components/Card/index.tsx | 4 +- src/pages/class/components/Intro/index.tsx | 6 +- src/pages/class/components/Level/index.tsx | 83 ++++++++++--------- .../components/LocationInfo/index.css.ts | 6 -- .../class/components/LocationInfo/index.tsx | 15 ++-- src/pages/class/components/Period/index.tsx | 12 ++- 9 files changed, 77 insertions(+), 69 deletions(-) diff --git a/src/pages/class/components/BottomComponent/index.css.ts b/src/pages/class/components/BottomComponent/index.css.ts index d02daff..f6fd4c7 100644 --- a/src/pages/class/components/BottomComponent/index.css.ts +++ b/src/pages/class/components/BottomComponent/index.css.ts @@ -1,10 +1,6 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -export const TabListStyle = style({ - padding: '1.6rem 2rem 0 ', -}); - export const TabPanelStyle = style({ padding: '2.4rem 2rem', borderTop: '1px solid', diff --git a/src/pages/class/components/BottomComponent/index.tsx b/src/pages/class/components/BottomComponent/index.tsx index 88f9550..cef0edc 100644 --- a/src/pages/class/components/BottomComponent/index.tsx +++ b/src/pages/class/components/BottomComponent/index.tsx @@ -1,11 +1,12 @@ import { useState } from 'react'; +import { TabPanelStyle } from '@/pages/class/components/BottomComponent/index.css'; +import Intro from '@/pages/class/components/Intro'; +import Level from '@/pages/class/components/Level'; import LocationInfo from '@/pages/class/components/LocationInfo'; +import Period from '@/pages/class/components/Period'; +import Flex from '@/components/Flex'; import Head from '@/components/Head'; import { TabRoot, TabList, TabButton, TabPanel } from '@/components/Tab'; -import Intro from '../Intro'; -import Level from '../Level'; -import Period from '../Period'; -import { TabListStyle, TabPanelStyle } from './index.css'; interface BottomComponentProps { colorScheme: 'primary' | 'secondary'; @@ -17,7 +18,7 @@ const BottomComponent = ({ colorScheme }: BottomComponentProps) => { return ( <> -
+ setSelectedTab(0)} colorScheme={colorScheme}> @@ -40,7 +41,8 @@ const BottomComponent = ({ colorScheme }: BottomComponentProps) => { -
+ +
diff --git a/src/pages/class/components/Card/index.css.ts b/src/pages/class/components/Card/index.css.ts index 013f146..863eee4 100644 --- a/src/pages/class/components/Card/index.css.ts +++ b/src/pages/class/components/Card/index.css.ts @@ -1,7 +1,7 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -export const card = style({ +export const cardStyle = style({ display: 'inline-flex', padding: '1.6rem 2rem', alignItems: 'center', diff --git a/src/pages/class/components/Card/index.tsx b/src/pages/class/components/Card/index.tsx index 1c9daec..e58c275 100644 --- a/src/pages/class/components/Card/index.tsx +++ b/src/pages/class/components/Card/index.tsx @@ -1,10 +1,10 @@ import { PropsWithChildren } from 'react'; -import * as styles from './index.css'; +import { cardStyle } from '@/pages/class/components/Card/index.css'; type CardProps = PropsWithChildren<{}>; const Card = ({ children }: CardProps) => { - return
{children}
; + return
{children}
; }; export default Card; diff --git a/src/pages/class/components/Intro/index.tsx b/src/pages/class/components/Intro/index.tsx index 8c8392b..7689423 100644 --- a/src/pages/class/components/Intro/index.tsx +++ b/src/pages/class/components/Intro/index.tsx @@ -2,8 +2,12 @@ import React from "react"; import Text from '@/components/Text' import Flex from "@/components/Flex"; +interface IntroData { + content: string; +} + const Intro = () => { - const data = [ + const data:IntroData[] = [ { content: '안녕하세요, 안무가 바다입니다.\n\n저는 인기 아이돌의 안무가로서 다양한 작업에 참여해왔고 현재는 안무 작업 뿐만 아니라 강습도 함께 진행하고 있습니다.\n\n이번 강의에서는 기본기와 프리스타일 위주로 진행하려고 합니다.\n\n💜먼저, 연결이라는 주제로 움직여보면서 자신만의 무브를 찾아가 볼 예정이고 익숙해진 후에는 컨트롤을 주제로 다양한 루틴을 시도해 볼 예정입니다.', diff --git a/src/pages/class/components/Level/index.tsx b/src/pages/class/components/Level/index.tsx index 5019477..3f43790 100644 --- a/src/pages/class/components/Level/index.tsx +++ b/src/pages/class/components/Level/index.tsx @@ -5,58 +5,61 @@ import Head from '@/components/Head'; import Text from '@/components/Text'; import { IcClose, IcQuesitonmark } from '@/assets/svg'; +interface LevelData { + level: string; + content: string; +} + const Level = () => { - const data = [ + const data: LevelData[] = [ { - level: "입문자", + level: '입문자', content: '바다리만의 트렌디한 힙합 베이스를\n바다리만의 트렌디한 힙합 베이스를 배우고\n바다리만의 트렌디한 힙합 베이스를 배우고 싶은 분\n', }, ]; return ( - <> - -
- - - - - {data[0].level} - - - 기본 동작과 리듬 익히기 중심의 단계를 말해요! - - - - - - 클래스 난이도는 이렇게 설정되어있어요! - - - -
- - - - - 이런 분들에게 해당 클래스를 추천해요! + +
+ + + + + {data[0].level} - - - {data.map((item, index) => ( - - {item.content.split('\n').map((line, idx) => ( - - {line} -
- - ))} + + 기본 동작과 리듬 익히기 중심의 단계를 말해요! - ))} + + + + + 클래스 난이도는 이렇게 설정되어있어요! + + +
+ + + + + 이런 분들에게 해당 클래스를 추천해요! + + + + {data.map((item, index) => ( + + {item.content.split('\n').map((line, idx) => ( + + {line} +
+ + ))} + + ))} - + ); }; diff --git a/src/pages/class/components/LocationInfo/index.css.ts b/src/pages/class/components/LocationInfo/index.css.ts index 9f214ab..e69de29 100644 --- a/src/pages/class/components/LocationInfo/index.css.ts +++ b/src/pages/class/components/LocationInfo/index.css.ts @@ -1,6 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -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 44bdf5e..02f6475 100644 --- a/src/pages/class/components/LocationInfo/index.tsx +++ b/src/pages/class/components/LocationInfo/index.tsx @@ -3,17 +3,18 @@ import Card from '@/pages/class/components/Card'; import Flex from '@/components/Flex'; import Text from '@/components/Text'; import { IcClose } from '@/assets/svg'; -import { addressRight } from './index.css'; + +type LocationData = { + location: string; + address: string; + jibun: string; +}; const LocationInfo = () => { - const data = [ + const data: LocationData[] = [ { - round: '1회차', - date: '2025년 1월 8일 수요일', - time: '18:00 - 20:00', - duration: '총 2시간', location: '로제이 댄스홀 합정점', - address: '서울특별시 마포구 잔다리로 3길 31\n 2층 (우) 04043', + address: '서울특별시 마포구 잔다리로 3길 31\n2층 (우) 04043', jibun: '서교동 395-135', }, ]; diff --git a/src/pages/class/components/Period/index.tsx b/src/pages/class/components/Period/index.tsx index c260472..07899fc 100644 --- a/src/pages/class/components/Period/index.tsx +++ b/src/pages/class/components/Period/index.tsx @@ -1,10 +1,18 @@ import Card from '@/pages/class/components/Card'; import Flex from '@/components/Flex'; import Text from '@/components/Text'; -import { roundBox } from './index.css'; +import { roundBox } from '@/pages/class/components/Period/index.css'; + +interface PeriodData { + round: string; + date: string; + startTime: string; + endTime: string; + duration: string; +} const Period = () => { - const data = [ + const data: PeriodData[] = [ { round: '1', date: '2025년 1월 8일 수요일',