From 7af6cf35bbe96b5fb058fe99372ce3e33a71921d Mon Sep 17 00:00:00 2001 From: Sinji Date: Sun, 7 Jul 2024 02:30:01 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20view=20=EB=B0=94=ED=85=80=EC=8B=9C?= =?UTF-8?q?=ED=8A=B8=20=EB=B2=84=ED=8A=BC=20=EB=B9=BC=EA=B3=A0=20=EC=99=84?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + .../commons/bottomSheet/BottomSheetStyle.tsx | 7 +++--- .../viewBottomSheet/ViewBottomSheet.tsx | 9 +++++-- .../viewBottomSheet/ViewBottomSheetStyle.tsx | 20 ++++++++++++++++ src/components/commons/contextBox/Context.tsx | 22 +++++++++++++---- .../commons/contextBox/ContextBox.tsx | 4 +++- .../commons/contextBox/ContextStyle.tsx | 24 +++++++++++++++---- src/pages/test/TestPage.tsx | 11 ++++++--- src/types/contextBoxPropsTypes.tsx | 16 ++++++------- 9 files changed, 86 insertions(+), 28 deletions(-) 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 -
+ ); }; export default TestPage; + +const Test = styled.div` + background-color: white; +`; diff --git a/src/types/contextBoxPropsTypes.tsx b/src/types/contextBoxPropsTypes.tsx index 7e882ca6..94934b54 100644 --- 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, - 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, textStyle { - children: ReactNode; - className?: string; +export interface boxDividerStyle { + width?: string; }