[Feat/#84] 회원/비회원 예매 페이지 추가

src/components/commons/bottomSheet/BottomSheet.styled.ts

@@ -1,10 +1,25 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 
-export const BottomSheetWrapper = styled.section`
-  position: fixed;
+const bottomSheetUp = keyframes`
+  0% { transform: translateY(100%); }
+  100% { transform: translateY(0); }
+`;
+
+const bottomSheetDown = keyframes`
+  0% { transform: translateY(0); }
+  100% { transform: translateY(100%); }
+`;
+
+export const BottomSheetWrapper = styled.section<{ $isOpen: boolean }>`
+  position: absolute;
   bottom: 0;
-  z-index: 1;
+  left: 0;
+  z-index: 10;
   display: flex;
+  justify-content: center;
+  width: 100%;
+
+  animation: ${({ $isOpen }) => ($isOpen ? bottomSheetUp : bottomSheetDown)} 250ms ease-in-out;
 `;
 
 export const BottomSheetLayout = styled.section`

src/components/commons/bottomSheet/BottomSheet.tsx

@@ -2,13 +2,14 @@ import { ReactNode } from "react";
 import * as S from "./BottomSheet.styled";
 
 export interface BottomSheetPropType {
+  isOpen: boolean;
   children?: ReactNode;
   title?: string;
 }
 
-const BottomSheet = ({ title, children }: BottomSheetPropType) => {
+const BottomSheet = ({ isOpen, title, children }: BottomSheetPropType) => {
   return (
-    <S.BottomSheetWrapper onClick={(e) => e.stopPropagation()}>
+    <S.BottomSheetWrapper $isOpen={isOpen}>
       <S.BottomSheetLayout>
         <S.Title>{title}</S.Title>
         {children}

src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.styled.ts

@@ -2,14 +2,22 @@ import styled from "styled-components";
 
 import { IcomCopy } from "@assets/svgs";
 
-export const ActionBottomSheetWrapper = styled.section`
+export const ActionBottomSheetWrapper = styled.section<{ $isOpen: boolean }>`
   position: fixed;
-  top: 0;
   bottom: 0;
-  left: auto;
+  z-index: 30;
   display: flex;
+  justify-content: center;
   width: 100%;
   height: 100%;
+
+  background-color: rgb(0 0 0 / 50%);
+  visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+
+  transition:
+    opacity 250ms ease-in-out,
+    visibility 250ms ease-in-out;
 `;
 
 export const SubTitle = styled.h2`

src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.tsx

@@ -5,18 +5,20 @@ import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
 import ContextBox from "@components/commons/contextBox/ContextBox";
 import { ContextBoxStyle } from "@typings/contextBoxProps";
 
-import React, { ReactNode, Children, isValidElement } from "react";
+import React, { Children, isValidElement, ReactNode, useEffect } from "react";
 
 interface ActionBottomSheetProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     ContextBoxStyle {
+  isOpen: boolean;
   title?: string;
   subTitle?: string;
   children?: ReactNode;
   onClickOutside: () => void;
 }
 
 const ActionBottomSheet = ({
+  isOpen,
   title,
   subTitle,
   onClickOutside,
@@ -37,9 +39,20 @@ const ActionBottomSheet = ({
     onClickOutside();
   };
 
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
   return (
-    <S.ActionBottomSheetWrapper onClick={handleWrapperClick}>
-      <BottomSheet title={title}>
+    <S.ActionBottomSheetWrapper $isOpen={isOpen} onClick={handleWrapperClick}>
+      <BottomSheet isOpen={isOpen} title={title}>
         <ContextBox {...rest}>
           <S.SubTitle>{subTitle}</S.SubTitle>
           {innerChildren}

src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.styled.ts

@@ -1,15 +1,23 @@
 import styled from "styled-components";
 
-import { BoxTitleStyle, BoxDividerStyle } from "@typings/contextBoxProps";
+import { BoxDividerStyle, BoxTitleStyle } from "@typings/contextBoxProps";
 
-export const ViewBottomSheetWrapper = styled.section`
+export const ViewBottomSheetWrapper = styled.section<{ $isOpen: boolean }>`
   position: fixed;
-  top: 0;
   bottom: 0;
-  left: auto;
+  z-index: 30;
   display: flex;
+  justify-content: center;
   width: 100%;
   height: 100%;
+
+  background-color: rgb(0 0 0 / 50%);
+  visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+
+  transition:
+    opacity 250ms ease-in-out,
+    visibility 250ms ease-in-out;
 `;
 
 export const BoxTitle = styled.h1<BoxTitleStyle>`

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

@@ -1,11 +1,12 @@
-import * as S from "./ViewBottomSheet.styled";
 import BottomSheet from "@components/commons/bottomSheet/BottomSheet";
 import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
 import ContextBox from "@components/commons/contextBox/ContextBox";
+import * as S from "./ViewBottomSheet.styled";
 
-import { ReactNode, Children, isValidElement } from "react";
+import { Children, isValidElement, ReactNode, useEffect } from "react";
 
 interface ViewBottomSheetProps {
+  isOpen: boolean;
   title?: string;
   boxTitle?: string;
   boxTitleColor?: string;
@@ -14,6 +15,7 @@ interface ViewBottomSheetProps {
 }
 
 const ViewBottomSheet = ({
+  isOpen,
   title,
   boxTitle,
   boxTitleColor,
@@ -35,9 +37,20 @@ const ViewBottomSheet = ({
     onClickOutside();
   };
 
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
   return (
-    <S.ViewBottomSheetWrapper onClick={handleWrapperClick}>
-      <BottomSheet title={title}>
+    <S.ViewBottomSheetWrapper $isOpen={isOpen} onClick={handleWrapperClick}>
+      <BottomSheet isOpen={isOpen} title={title}>
         <ContextBox {...rest}>
           <S.BoxTitle customColor={boxTitleColor}>{boxTitle}</S.BoxTitle>
           <S.BoxDivider />

src/components/commons/input/textField/TextField.tsx

@@ -71,6 +71,7 @@ const TextField = ({
         },
       } as ChangeEvent<HTMLInputElement>;
 
+      inputRef.current.focus();
       onChange(newEvent);
     }
   };
@@ -85,8 +86,8 @@ const TextField = ({
       <S.TextFieldWrapper>
         <S.TextFieldInput
           ref={inputRef}
-          name={name}
           value={value}
+          name={name}
           onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}

src/pages/ActionBottomSheetTest.tsx

@@ -1,9 +1,9 @@
-import styled from "styled-components";
-import { useState } from "react";
 import ActionBottomSheet from "@components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet";
 import PhoneNumber from "@components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber";
-import Button from "@components/commons/button/Button";
 import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
+import Button from "@components/commons/button/Button";
+import { useState } from "react";
+import styled from "styled-components";
 
 const ActionBottomSheetTest = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,31 +19,33 @@ const ActionBottomSheetTest = () => {
   return (
     <Test>
       <button onClick={handleSheetOpen}>dd</button>
-      {isOpen && (
-        <ActionBottomSheet
-          onClickOutside={handleSheetClose}
-          title="title"
-          subTitle="sub title"
-          alignItems="center"
-          padding="2rem 2rem 2.4rem 2rem"
-        >
-          <PhoneNumber phone="010-XXXX-XXXX" />
-          <OuterLayout margin="1.6rem 0 0 0">
-            <Button variant="primary" size="xlarge">
-              확인했어요
-            </Button>
-          </OuterLayout>
-        </ActionBottomSheet>
-      )}
+
+      <ActionBottomSheet
+        isOpen={isOpen}
+        onClickOutside={handleSheetClose}
+        title="title"
+        subTitle="sub title"
+        alignItems="center"
+        padding="2rem 2rem 2.4rem 2rem"
+      >
+        <PhoneNumber phone="010-XXXX-XXXX" />
+        <OuterLayout margin="1.6rem 0 0 0">
+          <Button variant="primary" size="xlarge">
+            확인했어요
+          </Button>
+        </OuterLayout>
+      </ActionBottomSheet>
     </Test>
   );
 };
 
 export default ActionBottomSheetTest;
 
 const Test = styled.div`
-  width: 37.5rem;
-  height: 66.7rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 2.4rem;
 
   background-color: white;
 `;

src/pages/ViewBottomSheetTest.tsx

@@ -1,9 +1,9 @@
-import styled from "styled-components";
+import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
 import ViewBottomSheet from "@components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet";
-import Context from "@components/commons/contextBox/Context";
 import Button from "@components/commons/button/Button";
-import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
+import Context from "@components/commons/contextBox/Context";
 import { useState } from "react";
+import styled from "styled-components";
 
 const ViewBottomSheetTest = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,35 +19,37 @@ const ViewBottomSheetTest = () => {
   return (
     <Test>
       <button onClick={handleSheetOpen}>dd</button>
-      {isOpen && (
-        <ViewBottomSheet
-          onClickOutside={handleSheetClose}
-          title="title"
-          boxTitle="공연 제목"
-          boxTitleColor="pink_200"
-        >
-          <Context isDate={true} subTitle="날짜" date="20XX. XX. XX" time="XX:XX" />
-          <Context subTitle="가격" text="100,000원 (2매)" />
-          <Context subTitle="예매자" text="서지우" />
-          <OuterLayout gap="1.1rem" margin="2.4rem 0 0 0">
-            <Button variant="gray" size="medium">
-              다시 할게요
-            </Button>
-            <Button variant="primary" size="medium">
-              예매할게요
-            </Button>
-          </OuterLayout>
-        </ViewBottomSheet>
-      )}
+
+      <ViewBottomSheet
+        isOpen={isOpen}
+        onClickOutside={handleSheetClose}
+        title="title"
+        boxTitle="공연 제목"
+        boxTitleColor="pink_200"
+      >
+        <Context isDate={true} subTitle="날짜" date="20XX. XX. XX" time="XX:XX" />
+        <Context subTitle="가격" text="100,000원 (2매)" />
+        <Context subTitle="예매자" text="서지우" />
+        <OuterLayout gap="1.1rem" margin="2.4rem 0 0 0">
+          <Button variant="gray" size="medium">
+            다시 할게요
+          </Button>
+          <Button variant="primary" size="medium">
+            예매할게요
+          </Button>
+        </OuterLayout>
+      </ViewBottomSheet>
     </Test>
   );
 };
 
 export default ViewBottomSheetTest;
 
 const Test = styled.div`
-  width: 37.5rem;
-  height: 660.7rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 2.4rem;
 
   background-color: white;
 `;

src/pages/book/Book.styled.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 2.4rem;
+`;
+
+export const Divider = styled.div`
+  width: 375px;
+  height: 8px;
+  margin-top: 1.6rem;
+
+  background: ${({ theme }) => theme.colors.gray_800};
+  opacity: 0.6;
+  border: 1px s;
+`;
+
+export const FooterContainer = styled.div`
+  position: sticky;
+  bottom: 0;
+  padding: 2.4rem;
+
+  background-color: ${({ theme }) => theme.colors.gray_900};
+`;