feat: 클래스 상세 탭 뷰 (#52)

SOPT-all · Jan 15, 2025 · ee559fe · ee559fe
1 parent 421d47a
commit ee559fe
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 69 deletions.
diff --git 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
@@ -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 (
     <>
       <TabRoot>
-        <div className={TabListStyle}>
+        <Flex paddingTop="1.6rem" paddingLeft="2rem">
           <TabList>
             <TabButton isSelected={selectedTab === 0} onClick={() => setSelectedTab(0)} colorScheme={colorScheme}>
               <Head level="h5" tag="h5">
@@ -40,7 +41,8 @@ const BottomComponent = ({ colorScheme }: BottomComponentProps) => {
               </Head>
             </TabButton>
           </TabList>
-        </div>
+        </Flex>
+
         <div className={TabPanelStyle}>
           <TabPanel isSelected={selectedTab === 0}>
             <Intro />

diff --git 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
@@ -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 <div className={styles.card}>{children}</div>;
+  return <div className={cardStyle}>{children}</div>;
 };
 
 export default Card;
diff --git 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
@@ -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 (
-    <>
-      <Flex direction="column" gap="3.6rem">
-        <div>
-          <Card>
-            <Flex gap="0.8rem" align="center">
-              <IcClose width={36} />
-              <Head level="h6" tag="h6">
-                {data[0].level}
-              </Head>
-              <Text tag="b8" color="gray8">
-                기본 동작과 리듬 익히기 중심의 단계를 말해요!
-              </Text>
-            </Flex>
-          </Card>
-          <Flex justify="flexEnd" align="center" gap="0.6rem">
-            <Text tag="c3" color="gray7">
-              클래스 난이도는 이렇게 설정되어있어요!
-            </Text>
-            <IcQuesitonmark width={14} />
-          </Flex>
-        </div>
-        <Flex direction="column" gap="1.2rem">
-          <Flex justify="flexStart" align="center" gap="0.8rem">
-            <IcClose width={24} />
-            <Head level="h5" tag="h6">
-              이런 분들에게 해당 클래스를 추천해요!
+    <Flex direction="column" gap="3.6rem">
+      <div>
+        <Card>
+          <Flex gap="0.8rem" align="center">
+            <IcClose width={36} />
+            <Head level="h6" tag="h6">
+              {data[0].level}
             </Head>
-          </Flex>
-
-          {data.map((item, index) => (
-            <Text tag="b3" color="gray8" key={index}>
-              {item.content.split('\n').map((line, idx) => (
-                <React.Fragment key={idx}>
-                  {line}
-                  <br />
-                </React.Fragment>
-              ))}
+            <Text tag="b8" color="gray8">
+              기본 동작과 리듬 익히기 중심의 단계를 말해요!
             </Text>
-          ))}
+          </Flex>
+        </Card>
+        <Flex justify="flexEnd" align="center" gap="0.6rem">
+          <Text tag="c3" color="gray7">
+            클래스 난이도는 이렇게 설정되어있어요!
+          </Text>
+          <IcQuesitonmark width={14} />
         </Flex>
+      </div>
+      <Flex direction="column" gap="1.2rem">
+        <Flex justify="flexStart" align="center" gap="0.8rem">
+          <IcClose width={24} />
+          <Head level="h5" tag="h6">
+            이런 분들에게 해당 클래스를 추천해요!
+          </Head>
+        </Flex>
+
+        {data.map((item, index) => (
+          <Text tag="b3" color="gray8" key={index}>
+            {item.content.split('\n').map((line, idx) => (
+              <React.Fragment key={idx}>
+                {line}
+                <br />
+              </React.Fragment>
+            ))}
+          </Text>
+        ))}
       </Flex>
-    </>
+    </Flex>
   );
 };
 

diff --git 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
@@ -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
@@ -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일 수요일',