diff --git a/index.html b/index.html
index b822ee43..7f593388 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
+
비트
diff --git a/src/components/commons/bottomSheet/BottomSheetStyle.tsx b/src/components/commons/bottomSheet/BottomSheetStyle.tsx
index e9e338cf..3e5c8f7c 100644
--- 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
index b51586f6..72fb0608 100644
--- 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 (
+ 공연 제목
+
+ {/* 사용 시 빠른 이해를 위해 임시로 넣어둔 context입니다. 사용 시 원하는 내용을 props로 넘겨주세요! */}
+ {/* 날짜의 경우 isDate를 true로 주고, date와 time에 날짜와 시간을 넣어주면 됩니다. */}
+
-
+
diff --git a/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheetStyle.tsx b/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheetStyle.tsx
index dd2d73fc..96f63249 100644
--- 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`
+ 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`
+ 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
index 11f82f60..0865d2d8 100644
--- 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 (
- {subTitle}
- {text}
+ {isDate ? (
+
+ {subTitle}
+ {date}
+
+ {time}
+
+ ) : (
+
+ {subTitle}
+ {text}
+
+ )}
);
};
diff --git a/src/components/commons/contextBox/ContextBox.tsx b/src/components/commons/contextBox/ContextBox.tsx
index 573daefa..bcd33c99 100644
--- 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 (
- {children}
+
+ {children}
+
);
};
diff --git a/src/components/commons/contextBox/ContextStyle.tsx b/src/components/commons/contextBox/ContextStyle.tsx
index ce521214..5e62b4c8 100644
--- 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,10 +19,8 @@ export const SubTitle = styled.div`
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`
@@ -24,5 +28,15 @@ export const Text = styled.section`
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
index 7919c213..f729186e 100644
--- 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 (
-
+
Test Page
- Test Page
+ Test Page
-