feat: view 바텀 시트 만드는 중 폰트 오류 해결을 위한 commit

src/components/commons/bottomSheet/BottomSheet.tsx

@@ -1,14 +1,17 @@
+import { ReactNode } from "react";
 import * as S from "../bottomSheet/BottomSheetStyle";
 
 export interface BottomSheetPropType {
-  title: string;
+  children?: ReactNode;
+  title?: string;
 }
 
-const BottomSheet = ({ title }: BottomSheetPropType) => {
+const BottomSheet = ({ title, children }: BottomSheetPropType) => {
   return (
     <S.BottomSheetWrapper>
       <S.BottomSheetLayout>
         <S.Title>{title}</S.Title>
+        {children}
       </S.BottomSheetLayout>
     </S.BottomSheetWrapper>
   );

src/components/commons/bottomSheet/BottomSheetStyle.tsx

@@ -1,15 +1,15 @@
 import styled from "styled-components";
 
 export const BottomSheetWrapper = styled.section`
-  display: flex;
+  width: auto;
 `;
 
 export const BottomSheetLayout = styled.section`
-  flex-shrink: 0;
   width: 37.5rem;
   padding: 4rem 2.4rem 3.2rem;
 
-  background-color: ${({ theme }) => theme.colors.gray_800};
+  color: ${({ theme }) => theme.colors.gray_800};
+
   border-radius: 2rem 2rem 0 0;
 `;
 

src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import * as S from "./ViewBottomSheetStyle";
+
+import BottomSheet from "../BottomSheet";
+import ContextBox from "@components/commons/contextBox/ContextBox";
+import Context from "@components/commons/contextBox/Context";
+
+const ViewBottomSheet = () => {
+  return (
+    <S.ViewBottomSheetWrapper>
+      <BottomSheet title={"title"}>
+        <ContextBox padding="2rem 1.6rem">
+          <Context subTitle="가격" text="100,000원 (2매)" />
+          <Context subTitle="가격" text="100,000원 (2매)" />
+        </ContextBox>
+      </BottomSheet>
+    </S.ViewBottomSheetWrapper>
+  );
+};
+
+export default ViewBottomSheet;

src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheetStyle.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const ViewBottomSheetWrapper = styled.section`
+  display: flex;
+`;

src/components/commons/contextBox/Context.tsx

@@ -0,0 +1,17 @@
+import * as S from "./ContextStyle";
+
+export interface contextPropsTypes {
+  subTitle: string;
+  text: string;
+}
+
+const Context = ({ subTitle, text }: contextPropsTypes) => {
+  return (
+    <S.ContextWrapper>
+      <S.SubTitle>{subTitle}</S.SubTitle>
+      <S.Text>{text}</S.Text>
+    </S.ContextWrapper>
+  );
+};
+
+export default Context;

src/components/commons/contextBox/ContextBox.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import * as S from "./ContextBoxStyle";
+import { contextBoxPropsTypes } from "../../../types/contextBoxPropsTypes";
+
+const ContextBox = ({ className, padding, children, ...rest }: contextBoxPropsTypes) => {
+  return (
+    <S.ContextBoxWrapper>
+      <S.ContextBoxLayout padding={padding}>{children}</S.ContextBoxLayout>
+    </S.ContextBoxWrapper>
+  );
+};
+
+export default ContextBox;

src/components/commons/bottomSheet/ContentBoxStyle.tsx → src/components/commons/contextBox/ContextBoxStyle.tsx

@@ -1,25 +1,28 @@
 import styled, { css } from "styled-components";
 
-import { contentBoxStyle } from "../../../types/contextBoxPropsTypes";
+import { contextBoxStyle } from "../../../types/contextBoxPropsTypes";
 
-export const ContentBoxWrapper = styled.section`
-  display: flex;
+export const ContextBoxWrapper = styled.section`
+  width: auto;
 `;
 
-export const ContentBoxLayout = styled.section<contentBoxStyle>`
+export const ContextBoxLayout = styled.section<contextBoxStyle>`
+  display: flex;
   flex-direction: column;
 
-  background: ${({ theme }) => theme.colors.gray_700};
+  background-color: ${({ theme }) => theme.colors.gray_700};
 
   ${({
     width = "32.7rem",
     height = "auto",
     margin = "auto",
     padding = "auto",
+    gap = "2rem",
     borderRadius = "0.6rem",
     alignItems = "flex-start",
     justifyContent = "center",
   }) => css`
+    gap: ${gap};
     align-items: ${alignItems};
     justify-content: ${justifyContent};
     width: ${width};

src/components/commons/contextBox/ContextStyle.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+import { subTitleStyle, textStyle } from "../../../types/contextBoxPropsTypes";
+
+export const ContextWrapper = styled.section`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const SubTitle = styled.div<subTitleStyle>`
+  width: ${({ width = "5.4rem" }) => width};
+  margin-right: ${({ marginRight = "0.8rem" }) => marginRight};
+
+  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"]}
+`;
+
+export const Text = styled.section<textStyle>`
+  width: ${({ width = "auto" }) => width};
+
+  color: ${({ theme }) => theme.colors.white};
+
+  ${({ theme }) => theme.fonts["body1-normal-medi"]}
+`;

src/pages/test/TestPage.tsx

@@ -1,8 +1,12 @@
+import ViewBottomSheet from "../../components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet";
+import Context from "@components/commons/contextBox/Context";
+
 const TestPage = () => {
   return (
     <div>
       <h1>Test Page</h1>
       <p>Test Page</p>
+      <ViewBottomSheet />
     </div>
   );
 };

src/types/contextBoxPropsTypes.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 
-export interface contentBoxStyle {
+export interface contextBoxStyle {
   width?: string;
   height?: string;
   margin?: string;
@@ -9,11 +9,34 @@ export interface contentBoxStyle {
   borderRadius?: string;
   alignItems?: "stretch" | "center" | "flex-start" | "flex-end";
   justifyContent?: "start" | "center" | "space-between" | "space-around" | "space-evenly";
+  gap?: string;
+}
+export interface contextBoxPropsTypes
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    contextBoxStyle {
+  children: ReactNode;
+  className?: string;
+}
+
+export interface subTitleStyle {
+  width?: string;
+  marginRight?: string;
+  customFont?: string;
 }
 
-export interface contentBoxPropsTypes
+export interface subTitlePropsTypes
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    contentBoxStyle {
+    subTitleStyle {
+  children: ReactNode;
+  className?: string;
+}
+
+export interface textStyle {
+  width?: string;
+  customFont?: string;
+}
+
+export interface textPropsTypes extends React.ButtonHTMLAttributes<HTMLButtonElement>, textStyle {
   children: ReactNode;
   className?: string;
 }