feat: view 바텀시트 버튼 빼고 완성

imddoy · Jul 6, 2024 · 7af6cf3 · 7af6cf3
1 parent 8d4abae
commit 7af6cf3
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="./src/styles/fonts/fonts.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>비트</title>
   </head>

diff --git a/src/components/commons/bottomSheet/BottomSheetStyle.tsx b/src/components/commons/bottomSheet/BottomSheetStyle.tsx
@@ -6,15 +6,14 @@ export const BottomSheetWrapper = styled.section`
 
 export const BottomSheetLayout = styled.section`
   width: 37.5rem;
-  padding: 4rem 2.4rem 3.2rem;
-
-  color: ${({ theme }) => theme.colors.gray_800};
+  padding: 3.6rem 2.4rem 2.8rem;
 
+  background-color: ${({ theme }) => theme.colors.gray_800};
   border-radius: 2rem 2rem 0 0;
 `;
 
 export const Title = styled.h1`
-  margin-bottom: 3.2rem;
+  margin-bottom: 2.8rem;
 
   color: ${({ theme }) => theme.colors.white};
   ${({ theme }) => theme.fonts.heading4};

diff --git a/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.tsx b/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.tsx
@@ -6,13 +6,18 @@ import BottomSheet from "../BottomSheet";
 import ContextBox from "@components/commons/contextBox/ContextBox";
 import Context from "@components/commons/contextBox/Context";
 
-const ViewBottomSheet = () => {
+const ViewBottomSheet = ({ ...rest }) => {
   return (
     <S.ViewBottomSheetWrapper>
       <BottomSheet title={"title"}>
         <ContextBox padding="2rem 1.6rem">
+          <S.BoxTitle customColor="pink_200">공연 제목</S.BoxTitle>
+          <S.BoxDivider />
+          {/* 사용 시 빠른 이해를 위해 임시로 넣어둔 context입니다. 사용 시 원하는 내용을 props로 넘겨주세요! */}
+          {/* 날짜의 경우 isDate를 true로 주고, date와 time에 날짜와 시간을 넣어주면 됩니다. */}
+          <Context isDate={true} subTitle="날짜" date="20XX. XX. XX" time="XX:XX" />
           <Context subTitle="가격" text="100,000원 (2매)" />
-          <Context subTitle="가격" text="100,000원 (2매)" />
+          <Context subTitle="예매자" text="서지우" />
         </ContextBox>
       </BottomSheet>
     </S.ViewBottomSheetWrapper>

diff --git a/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheetStyle.tsx b/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheetStyle.tsx
@@ -1,5 +1,25 @@
 import styled from "styled-components";
 
+import { boxTitleStyle, boxDividerStyle } from "../../../../types/contextBoxPropsTypes";
+
 export const ViewBottomSheetWrapper = styled.section`
   display: flex;
 `;
+
+export const BoxTitle = styled.h1<boxTitleStyle>`
+  width: ${({ width = "auto" }) => width};
+
+  color: ${({ theme, customColor = "white" }) =>
+    theme.colors[customColor as keyof typeof theme.colors]};
+
+  ${({ theme, customFont = "body1-normal-medi" }) =>
+    theme.fonts[customFont as keyof typeof theme.fonts]};
+`;
+export const BoxDivider = styled.div<boxDividerStyle>`
+  width: ${({ width = "29.5rem" }) => width};
+  margin: 0.6rem 0;
+
+  color: ${({ theme }) => theme.colors.gray_500};
+
+  border-top: 0.1rem solid;
+`;
diff --git a/src/components/commons/contextBox/Context.tsx b/src/components/commons/contextBox/Context.tsx
@@ -2,14 +2,28 @@ import * as S from "./ContextStyle";
 
 export interface contextPropsTypes {
   subTitle: string;
-  text: string;
+  text?: string;
+  isDate?: boolean;
+  date?: string;
+  time?: string;
 }
 
-const Context = ({ subTitle, text }: contextPropsTypes) => {
+const Context = ({ subTitle, text, isDate, date, time }: contextPropsTypes) => {
   return (
     <S.ContextWrapper>
-      <S.SubTitle>{subTitle}</S.SubTitle>
-      <S.Text>{text}</S.Text>
+      {isDate ? (
+        <S.ContextLayout>
+          <S.SubTitle>{subTitle}</S.SubTitle>
+          <S.Text>{date}</S.Text>
+          <S.DateBar />
+          <S.Text>{time}</S.Text>
+        </S.ContextLayout>
+      ) : (
+        <S.ContextLayout>
+          <S.SubTitle>{subTitle}</S.SubTitle>
+          <S.Text>{text}</S.Text>
+        </S.ContextLayout>
+      )}
     </S.ContextWrapper>
   );
 };

diff --git a/src/components/commons/contextBox/ContextBox.tsx b/src/components/commons/contextBox/ContextBox.tsx
@@ -6,7 +6,9 @@ import { contextBoxPropsTypes } from "../../../types/contextBoxPropsTypes";
 const ContextBox = ({ className, padding, children, ...rest }: contextBoxPropsTypes) => {
   return (
     <S.ContextBoxWrapper>
-      <S.ContextBoxLayout padding={padding}>{children}</S.ContextBoxLayout>
+      <S.ContextBoxLayout padding={padding} gap="1.2rem">
+        {children}
+      </S.ContextBoxLayout>
     </S.ContextBoxWrapper>
   );
 };

diff --git a/src/components/commons/contextBox/ContextStyle.tsx b/src/components/commons/contextBox/ContextStyle.tsx
@@ -4,6 +4,12 @@ import { subTitleStyle, textStyle } from "../../../types/contextBoxPropsTypes";
 
 export const ContextWrapper = styled.section`
   display: flex;
+
+  background-color: ${({ theme }) => theme.colors.gray_700};
+`;
+
+export const ContextLayout = styled.section`
+  display: flex;
   flex-direction: row;
 `;
 
@@ -13,16 +19,24 @@ export const SubTitle = styled.div<subTitleStyle>`
 
   color: ${({ theme }) => theme.colors.gray_400};
 
-  /* ${({ theme, customFont = "body1-normal-medi" }) =>
-    theme.fonts[customFont as keyof typeof theme.fonts]}; */
-
-  ${({ theme }) => theme.fonts["body1-normal-medi"]}
+  ${({ theme, customFont = "body1-normal-medi" }) =>
+    theme.fonts[customFont as keyof typeof theme.fonts]};
 `;
 
 export const Text = styled.section<textStyle>`
   width: ${({ width = "auto" }) => width};
 
   color: ${({ theme }) => theme.colors.white};
 
-  ${({ theme }) => theme.fonts["body1-normal-medi"]}
+  ${({ theme, customFont = "body1-normal-medi" }) =>
+    theme.fonts[customFont as keyof typeof theme.fonts]};
+`;
+
+export const DateBar = styled.div`
+  height: 1.2rem;
+  margin: 0.5rem 1rem 0;
+
+  color: ${({ theme }) => theme.colors.gray_500};
+
+  border-right: 0.1rem solid;
 `;
diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx
@@ -1,14 +1,19 @@
+import styled from "styled-components";
 import ViewBottomSheet from "../../components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet";
 import Context from "@components/commons/contextBox/Context";
 
 const TestPage = () => {
   return (
-    <div>
+    <Test>
       <h1>Test Page</h1>
-      <p>Test Page</p>
+      <Test>Test Page</Test>
       <ViewBottomSheet />
-    </div>
+    </Test>
   );
 };
 
 export default TestPage;
+
+const Test = styled.div`
+  background-color: white;
+`;
diff --git a/src/types/contextBoxPropsTypes.tsx b/src/types/contextBoxPropsTypes.tsx
@@ -24,19 +24,17 @@ export interface subTitleStyle {
   customFont?: string;
 }
 
-export interface subTitlePropsTypes
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    subTitleStyle {
-  children: ReactNode;
-  className?: string;
+export interface textStyle {
+  width?: string;
+  customFont?: string;
 }
 
-export interface textStyle {
+export interface boxTitleStyle {
   width?: string;
   customFont?: string;
+  customColor?: string;
 }
 
-export interface textPropsTypes extends React.ButtonHTMLAttributes<HTMLButtonElement>, textStyle {
-  children: ReactNode;
-  className?: string;
+export interface boxDividerStyle {
+  width?: string;
 }