diff --git a/src/components/commons/bottomSheet/BottomSheet.styled.ts b/src/components/commons/bottomSheet/BottomSheet.styled.ts
index cc1e8e5c..27f8925f 100644
--- a/src/components/commons/bottomSheet/BottomSheet.styled.ts
+++ b/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`
diff --git a/src/components/commons/bottomSheet/BottomSheet.tsx b/src/components/commons/bottomSheet/BottomSheet.tsx
index a7c35d1a..e60969f9 100644
--- a/src/components/commons/bottomSheet/BottomSheet.tsx
+++ b/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}
diff --git a/src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.styled.ts b/src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.styled.ts
index 13efa8ef..e9f1e8ee 100644
--- a/src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.styled.ts
+++ b/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`
diff --git a/src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.tsx b/src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.tsx
index a5710161..6ca94911 100644
--- a/src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.tsx
+++ b/src/components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet.tsx
@@ -5,11 +5,12 @@ 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;
@@ -17,6 +18,7 @@ interface ActionBottomSheetProps
 }
 
 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}
diff --git a/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.styled.ts b/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.styled.ts
index 76f94b06..eab61d16 100644
--- a/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.styled.ts
+++ b/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>`
diff --git a/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.tsx b/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.tsx
index 3fbc253c..8d08b216 100644
--- a/src/components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet.tsx
+++ b/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 />
diff --git a/src/components/commons/input/textField/TextField.tsx b/src/components/commons/input/textField/TextField.tsx
index a56446ab..5f9336e0 100644
--- a/src/components/commons/input/textField/TextField.tsx
+++ b/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}
diff --git a/src/pages/ActionBottomSheetTest.tsx b/src/pages/ActionBottomSheetTest.tsx
index d72445bb..370590d6 100644
--- a/src/pages/ActionBottomSheetTest.tsx
+++ b/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,22 +19,22 @@ 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>
   );
 };
@@ -42,8 +42,10 @@ const ActionBottomSheetTest = () => {
 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;
 `;
diff --git a/src/pages/ViewBottomSheetTest.tsx b/src/pages/ViewBottomSheetTest.tsx
index 97f91d7c..8010ecb4 100644
--- a/src/pages/ViewBottomSheetTest.tsx
+++ b/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,26 +19,26 @@ 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>
   );
 };
@@ -46,8 +46,10 @@ const ViewBottomSheetTest = () => {
 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;
 `;
diff --git a/src/pages/book/Book.styled.ts b/src/pages/book/Book.styled.ts
new file mode 100644
index 00000000..6e89ba13
--- /dev/null
+++ b/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};
+`;
diff --git a/src/pages/book/Book.tsx b/src/pages/book/Book.tsx
new file mode 100644
index 00000000..970e0d2c
--- /dev/null
+++ b/src/pages/book/Book.tsx
@@ -0,0 +1,219 @@
+import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
+import ViewBottomSheet from "@components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet";
+import Button from "@components/commons/button/Button";
+import Context from "@components/commons/contextBox/Context";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+import * as S from "./Book.styled";
+import BookerInfo from "./components/bookerInfo/BookerInfo";
+import Count from "./components/count/Count";
+import EasyPassEntry from "./components/easyPassEntry/EasyPassEntry";
+import Info from "./components/info/Info";
+import Select from "./components/select/Select";
+import TermCheck from "./components/termCheck/TermCheck";
+import { BOOK_DETAIL_INFO } from "./constants/dummy";
+import { FormData } from "./typings/formData";
+
+const Book = () => {
+  const { performanceId } = useParams<{ performanceId: string }>();
+
+  // TODO: 회원/비회원 여부
+  // navigate 할 때 state로 넘기기 ?
+  const isNonMember = true;
+
+  const [detail, setDetail] = useState(BOOK_DETAIL_INFO);
+  const [selectedValue, setSelectedValue] = useState<number>();
+  const [round, setRound] = useState(1);
+  const [bookerInfo, setBookerInfo] = useState({
+    bookerName: "",
+    bookerPhoneNumber: "",
+    birthDate: "",
+  });
+  const [easyPassword, setEasyPassword] = useState({
+    password: "",
+    passwordCheck: "",
+  });
+  const [isTermChecked, setIsTermChecked] = useState({
+    term1: false,
+    term2: false,
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeButton, setActiveButton] = useState(false);
+
+  const handleRadioChange = (value: number) => {
+    setSelectedValue(value);
+  };
+
+  const onChangeBookerInfo = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setBookerInfo((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const onChangeEasyPassword = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setEasyPassword((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const onMinusClick = () => {
+    setRound((prev) => prev - 1);
+  };
+
+  const onPlusClick = () => {
+    setRound((prev) => prev + 1);
+  };
+
+  const onChangeTermCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+
+    setIsTermChecked((prev) => ({ ...prev, [name]: checked }));
+  };
+
+  const handleSheetOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleSheetClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleClickBook = () => {
+    // TODO: 티켓 매수 요청 GET API 후, true 인 상태일 때 바텀 시트 열기
+
+    handleSheetOpen();
+  };
+
+  const handleClickBookRequst = () => {
+    // TODO: 티켓 매수 요청 get 요청 후, true 인 상태이면, 바텀 시트 열기
+
+    let formData = {
+      scheduleId: performanceId,
+      selectedValue,
+      purchaseTicketCount: round,
+      totalPaymentAmount: detail.ticketPrice * round,
+    } as FormData;
+
+    // TODO: 회원, 비회원 여부에 따라서 예매하기 post 요청
+    if (isNonMember) {
+      // 비회원 예매하기 post 요청
+      formData = { ...formData, ...bookerInfo, password: easyPassword.password } as FormData;
+
+      console.log(formData);
+    } else {
+      // 회원 예매하기 post 요청
+      formData = {
+        ...formData,
+        bookerName: bookerInfo.bookerName,
+        bookerPhoneNumber: bookerInfo.bookerPhoneNumber,
+      } as FormData;
+
+      console.log(formData);
+    }
+
+    // TODO: 완료 페이지로 navigate
+  };
+
+  useEffect(() => {
+    if (
+      selectedValue &&
+      bookerInfo.bookerName &&
+      bookerInfo.bookerPhoneNumber &&
+      isTermChecked.term2
+    ) {
+      if (
+        isNonMember &&
+        isTermChecked.term1 &&
+        easyPassword.password === easyPassword.passwordCheck
+      ) {
+        setActiveButton(true);
+      } else {
+        setActiveButton(false);
+      }
+    } else {
+      setActiveButton(false);
+    }
+  }, [isNonMember, selectedValue, bookerInfo, easyPassword, isTermChecked]);
+
+  return (
+    <S.ContentWrapper>
+      <Info
+        genre={detail.genre}
+        title={detail.performanceTitle}
+        teamName={detail.performanceTeamName}
+        venue={detail.performanceVenue}
+        period={detail.performancePeriod}
+      />
+      <S.Divider />
+      <Select
+        selectedValue={selectedValue as number}
+        handleRadioChange={handleRadioChange}
+        scheduleList={detail.scheduleList}
+      />
+      <Count
+        round={round}
+        onMinusClick={onMinusClick}
+        onPlusClick={onPlusClick}
+        ticketPrice={detail.ticketPrice}
+        availableTicketCount={
+          selectedValue ? detail.scheduleList[selectedValue - 1].availableTicketCount : undefined
+        }
+      />
+      <BookerInfo
+        isNonMember={isNonMember}
+        bookerInfo={bookerInfo}
+        onChangeBookerInfo={onChangeBookerInfo}
+      />
+      {isNonMember && (
+        <EasyPassEntry
+          password={easyPassword.password}
+          passwordCheck={easyPassword.passwordCheck}
+          onChangeEasyPassword={onChangeEasyPassword}
+        />
+      )}
+
+      <TermCheck
+        isNonMember={isNonMember}
+        isTermChecked={isTermChecked}
+        onClickTermCheck={onChangeTermCheck}
+      />
+      <S.FooterContainer>
+        <Button disabled={!activeButton} onClick={handleClickBook}>
+          예매하기
+        </Button>
+      </S.FooterContainer>
+
+      <ViewBottomSheet
+        isOpen={isOpen}
+        onClickOutside={handleSheetClose}
+        title="예매하신 내역이 맞나요?"
+        boxTitle={detail.performanceTitle}
+        boxTitleColor="pink_200"
+      >
+        <Context
+          isDate={true}
+          subTitle="날짜"
+          date={detail.scheduleList[(selectedValue ?? 1) - 1].performanceDate
+            .slice(0, 10)
+            .toString()}
+          time={detail.scheduleList[(selectedValue ?? 1) - 1].performanceDate
+            .slice(11, 16)
+            .toString()}
+        />
+        <Context subTitle="가격" text={`${(detail.ticketPrice * round).toLocaleString()}원`} />
+        <Context subTitle="예매자" text={bookerInfo.bookerName} />
+        <OuterLayout gap="1.1rem" margin="2.4rem 0 0 0">
+          <Button variant="gray" size="medium" onClick={handleSheetClose}>
+            다시 할게요
+          </Button>
+          <Button variant="primary" size="medium" onClick={handleClickBookRequst}>
+            예매할게요
+          </Button>
+        </OuterLayout>
+      </ViewBottomSheet>
+    </S.ContentWrapper>
+  );
+};
+
+export default Book;
diff --git a/src/pages/book/components/bookerInfo/BookerInfo.styled.ts b/src/pages/book/components/bookerInfo/BookerInfo.styled.ts
new file mode 100644
index 00000000..31e036c1
--- /dev/null
+++ b/src/pages/book/components/bookerInfo/BookerInfo.styled.ts
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem;
+  width: 100%;
+  padding: 2.4rem 0;
+
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray_800};
+`;
+
+export const Title = styled.h2`
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.heading4};
+`;
diff --git a/src/pages/book/components/bookerInfo/BookerInfo.tsx b/src/pages/book/components/bookerInfo/BookerInfo.tsx
new file mode 100644
index 00000000..54d38191
--- /dev/null
+++ b/src/pages/book/components/bookerInfo/BookerInfo.tsx
@@ -0,0 +1,50 @@
+import TextField from "@components/commons/input/textField/TextField";
+import { numericFilter, phoneNumberFilter } from "@utils/useInputFilter";
+import React from "react";
+import * as S from "./BookerInfo.styled";
+
+interface BookerInfoProps {
+  isNonMember: boolean;
+  bookerInfo: {
+    bookerName: string;
+    bookerPhoneNumber: string;
+    birthDate: string;
+  };
+  onChangeBookerInfo: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const BookerInfo = ({ isNonMember, bookerInfo, onChangeBookerInfo }: BookerInfoProps) => {
+  return (
+    <S.Wrapper>
+      <S.Title>예매자 정보</S.Title>
+      <TextField
+        name="bookerName"
+        type="input"
+        value={bookerInfo.bookerName}
+        onChange={onChangeBookerInfo}
+        placeholder="예매자(대표 예매자) 이름"
+      />
+      <TextField
+        name="bookerPhoneNumber"
+        type="input"
+        value={bookerInfo.bookerPhoneNumber}
+        onChange={onChangeBookerInfo}
+        filter={phoneNumberFilter}
+        placeholder="휴대폰 번호 (‘-’ 없이 입력)"
+      />
+      {isNonMember && (
+        <TextField
+          name="birthDate"
+          type="input"
+          value={bookerInfo.birthDate}
+          onChange={onChangeBookerInfo}
+          filter={numericFilter}
+          maxLength={6}
+          placeholder="생년월일 6자리"
+        />
+      )}
+    </S.Wrapper>
+  );
+};
+
+export default BookerInfo;
diff --git a/src/pages/book/components/count/Count.styled.ts b/src/pages/book/components/count/Count.styled.ts
new file mode 100644
index 00000000..0201e620
--- /dev/null
+++ b/src/pages/book/components/count/Count.styled.ts
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem;
+  align-items: flex-end;
+  width: 100%;
+  padding: 2.4rem 0;
+
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray_800};
+`;
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const Box = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+`;
+
+export const Title = styled.h2`
+  margin-bottom: 0.2rem;
+
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.heading4};
+`;
+
+export const Comment = styled.p`
+  color: ${({ theme }) => theme.colors.gray_400};
+  ${({ theme }) => theme.fonts["caption1-medi"]}
+`;
+
+export const PricePrefix = styled.span`
+  margin-right: 0.6rem;
+
+  color: ${({ theme }) => theme.colors.gray_100};
+  ${({ theme }) => theme.fonts["body1-long"]};
+`;
+
+export const TotalPrice = styled.p`
+  display: inline;
+  ${({ theme }) => theme.fonts.heading4};
+`;
diff --git a/src/pages/book/components/count/Count.tsx b/src/pages/book/components/count/Count.tsx
new file mode 100644
index 00000000..be9042f4
--- /dev/null
+++ b/src/pages/book/components/count/Count.tsx
@@ -0,0 +1,43 @@
+import Stepper from "@components/commons/stepper/Stepper";
+import * as S from "./Count.styled";
+
+interface CountProps {
+  round: number;
+  onMinusClick: () => void;
+  onPlusClick: () => void;
+  ticketPrice: number;
+  availableTicketCount?: number;
+}
+
+const Count = ({
+  round,
+  onMinusClick,
+  onPlusClick,
+  ticketPrice,
+  availableTicketCount,
+}: CountProps) => {
+  return (
+    <S.Wrapper>
+      <S.Container>
+        <S.Box>
+          <div>
+            <S.Title>매수 선택</S.Title>
+            {availableTicketCount && availableTicketCount <= 5 ? (
+              <S.Comment>현재 잔여 티켓이 5매 이하입니다.</S.Comment>
+            ) : (
+              <></>
+            )}
+          </div>
+
+          <Stepper max={3} round={round} onMinusClick={onMinusClick} onPlusClick={onPlusClick} />
+        </S.Box>
+      </S.Container>
+      <div>
+        <S.PricePrefix>총</S.PricePrefix>
+        <S.TotalPrice>{(round * ticketPrice).toLocaleString()}원</S.TotalPrice>
+      </div>
+    </S.Wrapper>
+  );
+};
+
+export default Count;
diff --git a/src/pages/book/components/easyPassEntry/EasyPassEntry.styled.ts b/src/pages/book/components/easyPassEntry/EasyPassEntry.styled.ts
new file mode 100644
index 00000000..31e036c1
--- /dev/null
+++ b/src/pages/book/components/easyPassEntry/EasyPassEntry.styled.ts
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem;
+  width: 100%;
+  padding: 2.4rem 0;
+
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray_800};
+`;
+
+export const Title = styled.h2`
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.heading4};
+`;
diff --git a/src/pages/book/components/easyPassEntry/EasyPassEntry.tsx b/src/pages/book/components/easyPassEntry/EasyPassEntry.tsx
new file mode 100644
index 00000000..fa24539c
--- /dev/null
+++ b/src/pages/book/components/easyPassEntry/EasyPassEntry.tsx
@@ -0,0 +1,35 @@
+import TextField from "@components/commons/input/textField/TextField";
+import React from "react";
+import * as S from "./EasyPassEntry.styled";
+
+interface EasyPassEntryProps {
+  password: string;
+  passwordCheck: string;
+  onChangeEasyPassword: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const EasyPassEntry = ({ password, passwordCheck, onChangeEasyPassword }: EasyPassEntryProps) => {
+  return (
+    <S.Wrapper>
+      <S.Title>간편 비밀번호</S.Title>
+      <TextField
+        name="password"
+        type="password"
+        value={password}
+        onChange={onChangeEasyPassword}
+        maxLength={4}
+        placeholder="숫자 4자리"
+      />
+      <TextField
+        name="passwordCheck"
+        type="password"
+        value={passwordCheck}
+        onChange={onChangeEasyPassword}
+        maxLength={4}
+        placeholder="한 번 더 입력"
+      />
+    </S.Wrapper>
+  );
+};
+
+export default EasyPassEntry;
diff --git a/src/pages/book/components/info/Info.styled.ts b/src/pages/book/components/info/Info.styled.ts
new file mode 100644
index 00000000..80c31b01
--- /dev/null
+++ b/src/pages/book/components/info/Info.styled.ts
@@ -0,0 +1,59 @@
+import styled from "styled-components";
+
+export const InfoContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
+  margin-top: 1.6rem;
+`;
+
+export const InfoTop = styled.div`
+  display: flex;
+`;
+
+export const InfoPoster = styled.img<{ $imgsrc: string }>`
+  width: 9.5rem;
+  height: 12.8rem;
+  margin-right: 1.4rem;
+
+  background-image: url(${({ $imgsrc }) => $imgsrc});
+  background-size: 100% 100%;
+  border-radius: 4px;
+`;
+
+export const InfoTextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const InfoType = styled.p`
+  color: ${({ theme }) => theme.colors.gray_500};
+  ${({ theme }) => theme.fonts["caption1-semi"]};
+`;
+
+export const InfoTitle = styled.h1`
+  color: ${({ theme }) => theme.colors.white};
+
+  ${({ theme }) => theme.fonts["body1-normal-semi"]};
+`;
+
+export const InfoTeamText = styled.span`
+  margin-right: 0.6rem;
+
+  color: ${({ theme }) => theme.colors.gray_400};
+
+  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+`;
+
+export const InfoTeamName = styled.span`
+  color: ${({ theme }) => theme.colors.white};
+
+  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+`;
+
+export const InfoBottom = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
diff --git a/src/pages/book/components/info/Info.tsx b/src/pages/book/components/info/Info.tsx
new file mode 100644
index 00000000..c179b71c
--- /dev/null
+++ b/src/pages/book/components/info/Info.tsx
@@ -0,0 +1,41 @@
+import { IconTime, IcOutlinePlace } from "@assets/svgs";
+import Spacing from "@components/commons/spacing/Spacing";
+import IconText from "@pages/gig/components/iconText/IconText";
+import * as S from "./Info.styled";
+
+interface InfoProps {
+  genre: string;
+  title: string;
+  teamName: string;
+  venue: string;
+  period: string;
+}
+
+const Info = ({ genre, title, teamName, venue, period }: InfoProps) => {
+  return (
+    <S.InfoContainer>
+      <S.InfoTop>
+        <S.InfoPoster $imgsrc={"src/pages/MyRegisterdShow/constants/silkagel.png"} />
+
+        <S.InfoTextBox>
+          {/* TODO: genre에 따라 view 변경 */}
+          <S.InfoType>{genre}</S.InfoType>
+          <Spacing marginBottom="0.2" />
+          <S.InfoTitle>{title}</S.InfoTitle>
+          <Spacing marginBottom="5.2" />
+          <div>
+            <S.InfoTeamText>공연진</S.InfoTeamText>
+            <S.InfoTeamName>{teamName}</S.InfoTeamName>
+          </div>
+        </S.InfoTextBox>
+      </S.InfoTop>
+
+      <S.InfoBottom>
+        <IconText icon={<IcOutlinePlace />} text={venue} />
+        <IconText icon={<IconTime />} text={period} />
+      </S.InfoBottom>
+    </S.InfoContainer>
+  );
+};
+
+export default Info;
diff --git a/src/pages/book/components/select/RadioButton.styled.ts b/src/pages/book/components/select/RadioButton.styled.ts
new file mode 100644
index 00000000..6d39c789
--- /dev/null
+++ b/src/pages/book/components/select/RadioButton.styled.ts
@@ -0,0 +1,76 @@
+import styled from "styled-components";
+
+export const Label = styled.label<{ checked: boolean; $isSoldOut: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.2rem 1rem 1.2rem 1.6rem;
+
+  ${({ $isSoldOut, theme }) =>
+    $isSoldOut
+      ? `
+    color: ${theme.colors.gray_600};`
+      : `color: ${theme.colors.gray_0}`};
+
+  background-color: ${({ theme }) => theme.colors.gray_800};
+  cursor: pointer;
+  border: 2px solid transparent;
+  border-radius: 6px;
+
+  ${({ checked, theme }) =>
+    checked &&
+    `
+        background-color: ${theme.colors.gray_800};
+        border: 2px solid ${theme.colors.pink_400};
+      `}
+`;
+
+export const Input = styled.input`
+  display: none;
+`;
+
+export const DateTimeDivider = styled.div`
+  display: inline-block;
+  width: 1px;
+  height: 12px;
+  margin: 0 1rem;
+
+  background-color: ${({ theme }) => theme.colors.gray_500};
+`;
+
+export const Text = styled.span`
+  ${({ theme }) => theme.fonts["body1-normal-medi"]};
+`;
+
+export const CustomRadio = styled.span<{ checked: boolean }>`
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  padding-right: 0.6rem;
+  ${({ theme, checked }) =>
+    checked
+      ? `border: 6px solid ${theme.colors.pink_400}`
+      : `border: 2px solid ${theme.colors.gray_300}`};
+
+  border-radius: 100%;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: ${({ checked }) => (checked ? "block" : "none")};
+    width: 1rem;
+    height: 1rem;
+
+    background-color: ${({ theme }) => theme.colors.white};
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+
+    content: "";
+  }
+`;
+
+export const SoldOutText = styled.span`
+  color: ${({ theme }) => theme.colors.gray_600};
+  ${({ theme }) => theme.fonts["body2-normal-semi"]};
+`;
diff --git a/src/pages/book/components/select/RadioButton.tsx b/src/pages/book/components/select/RadioButton.tsx
new file mode 100644
index 00000000..bc8e379c
--- /dev/null
+++ b/src/pages/book/components/select/RadioButton.tsx
@@ -0,0 +1,33 @@
+import * as S from "./RadioButton.styled";
+
+interface RadioButtonProps {
+  label: string;
+  value: number;
+  checked: boolean;
+  isSoldOut: boolean;
+  onChange: (value: number) => void;
+}
+
+const RadioButton = ({ label, value, checked, isSoldOut, onChange }: RadioButtonProps) => {
+  const [date, time] = label.split("T");
+  return (
+    <S.Label checked={checked} $isSoldOut={isSoldOut}>
+      <div>
+        <S.Text>{date}</S.Text>
+        <S.DateTimeDivider />
+        <S.Text>{time.slice(0, 5)}</S.Text>
+      </div>
+
+      {isSoldOut ? (
+        <S.SoldOutText>매진</S.SoldOutText>
+      ) : (
+        <>
+          <S.Input type="radio" value={value} checked={checked} onChange={() => onChange(value)} />
+          <S.CustomRadio checked={checked} />
+        </>
+      )}
+    </S.Label>
+  );
+};
+
+export default RadioButton;
diff --git a/src/pages/book/components/select/RadioGroup.tsx b/src/pages/book/components/select/RadioGroup.tsx
new file mode 100644
index 00000000..3de53251
--- /dev/null
+++ b/src/pages/book/components/select/RadioGroup.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import RadioButton from "./RadioButton";
+import { SelectProps } from "./Select";
+
+const RadioGroup = ({ selectedValue, handleRadioChange, scheduleList }: SelectProps) => {
+  return (
+    <RadioGroupWrapper>
+      {scheduleList.map((schedule, i) => (
+        <RadioButton
+          key={`schedule-${i}`}
+          label={schedule.performanceDate}
+          value={schedule.scheduleId}
+          checked={selectedValue === schedule.scheduleId}
+          isSoldOut={schedule.availableTicketCount === 0}
+          onChange={handleRadioChange}
+        />
+      ))}
+    </RadioGroupWrapper>
+  );
+};
+
+export default RadioGroup;
+
+export const RadioGroupWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+`;
diff --git a/src/pages/book/components/select/Select.styled.ts b/src/pages/book/components/select/Select.styled.ts
new file mode 100644
index 00000000..e9f71ea8
--- /dev/null
+++ b/src/pages/book/components/select/Select.styled.ts
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem;
+  width: 100%;
+  padding: 2.4rem 0;
+
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray_800};
+`;
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const Title = styled.h2`
+  margin-bottom: 0.2rem;
+
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.heading4};
+`;
diff --git a/src/pages/book/components/select/Select.tsx b/src/pages/book/components/select/Select.tsx
new file mode 100644
index 00000000..53fa0c3b
--- /dev/null
+++ b/src/pages/book/components/select/Select.tsx
@@ -0,0 +1,28 @@
+import RadioGroup from "./RadioGroup";
+import * as S from "./Select.styled";
+
+export interface SelectProps {
+  selectedValue: number;
+  handleRadioChange: (value: number) => void;
+  scheduleList: {
+    scheduleId: number;
+    performanceDate: string;
+    availableTicketCount: number;
+    scheduleNumber: string;
+  }[];
+}
+
+const Select = ({ selectedValue, handleRadioChange, scheduleList }: SelectProps) => {
+  return (
+    <S.Wrapper>
+      <S.Title>회차 선택</S.Title>
+      <RadioGroup
+        selectedValue={selectedValue}
+        handleRadioChange={handleRadioChange}
+        scheduleList={scheduleList}
+      />
+    </S.Wrapper>
+  );
+};
+
+export default Select;
diff --git a/src/pages/book/components/termCheck/TermCheck.styled.ts b/src/pages/book/components/termCheck/TermCheck.styled.ts
new file mode 100644
index 00000000..0d5821e5
--- /dev/null
+++ b/src/pages/book/components/termCheck/TermCheck.styled.ts
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 1.6rem 0 0;
+`;
+
+export const Box = styled.div`
+  display: flex;
+  gap: 0.4rem;
+  justify-content: space-between;
+`;
+
+export const HyperLinkText = styled.a`
+  color: ${({ theme }) => theme.colors.gray_100};
+  ${({ theme }) => theme.fonts["body2-normal-semi"]};
+  text-decoration: underline;
+`;
+
+export const HyperLinkSpan = styled.span`
+  color: ${({ theme }) => theme.colors.gray_300};
+  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+`;
+
+export const StyledCheckbox = styled.input`
+  position: relative;
+  display: inline-block;
+  width: 1.8rem;
+  height: 1.8rem;
+
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.colors.gray_500};
+  border-radius: 2px;
+
+  accent-color: red;
+
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.pink_400};
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 100% 100%;
+    border-color: transparent;
+  }
+`;
diff --git a/src/pages/book/components/termCheck/TermCheck.tsx b/src/pages/book/components/termCheck/TermCheck.tsx
new file mode 100644
index 00000000..ab777ebd
--- /dev/null
+++ b/src/pages/book/components/termCheck/TermCheck.tsx
@@ -0,0 +1,49 @@
+import * as S from "./TermCheck.styled";
+
+interface TermCheckProps {
+  isNonMember: boolean;
+  isTermChecked: { term1: boolean; term2: boolean };
+  onClickTermCheck: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const TermCheck = ({ isNonMember, isTermChecked, onClickTermCheck }: TermCheckProps) => {
+  return (
+    <S.Wrapper>
+      <S.Box>
+        {isNonMember && (
+          <>
+            <div>
+              <S.HyperLinkText href="https://jiwoothejay.notion.site/968da08432694908954daccbadc9906a">
+                비회원 이용약관
+              </S.HyperLinkText>
+              <S.HyperLinkSpan> 에 동의합니다.</S.HyperLinkSpan>
+            </div>
+            <S.StyledCheckbox
+              type="checkbox"
+              name="term1"
+              checked={isTermChecked.term1}
+              onChange={onClickTermCheck}
+            />
+          </>
+        )}
+      </S.Box>
+      <S.Box>
+        <div>
+          {isNonMember && <S.HyperLinkSpan>웹 발신을 위한 </S.HyperLinkSpan>}
+          <S.HyperLinkText href="https://jiwoothejay.notion.site/2e52f4f9f5a14ef3a53e3457ca5066df">
+            개인정보 처리방침
+          </S.HyperLinkText>
+          <S.HyperLinkSpan> 에 동의합니다.</S.HyperLinkSpan>
+        </div>
+        <S.StyledCheckbox
+          type="checkbox"
+          name="term2"
+          checked={isTermChecked.term2}
+          onChange={onClickTermCheck}
+        />
+      </S.Box>
+    </S.Wrapper>
+  );
+};
+
+export default TermCheck;
diff --git a/src/pages/book/constants/dummy.ts b/src/pages/book/constants/dummy.ts
new file mode 100644
index 00000000..a38df027
--- /dev/null
+++ b/src/pages/book/constants/dummy.ts
@@ -0,0 +1,30 @@
+export const BOOK_DETAIL_INFO = {
+  performanceId: 1,
+  performanceTitle: "비트밴드 정기공연",
+  ticketPrice: 5000,
+  genre: "BAND",
+  posterImage: "/src/pages/MyRegisterdShow/constants/silkagel.png",
+  performanceVenue: "홍대상상마당",
+  performancePeriod: "2023.12.28~2023.12.29",
+  performanceTeamName: "비트밴드",
+  scheduleList: [
+    {
+      scheduleId: 1,
+      performanceDate: "2023-12-28T19:30:00",
+      availableTicketCount: 0,
+      scheduleNumber: "FIRST",
+    },
+    {
+      scheduleId: 2,
+      performanceDate: "2023-12-29T19:30:00",
+      availableTicketCount: 4,
+      scheduleNumber: "SECOND",
+    },
+    {
+      scheduleId: 3,
+      performanceDate: "2023-12-30T19:30:00",
+      availableTicketCount: 8,
+      scheduleNumber: "THIRD",
+    },
+  ],
+};
diff --git a/src/pages/book/typings/formData.ts b/src/pages/book/typings/formData.ts
new file mode 100644
index 00000000..37c695b1
--- /dev/null
+++ b/src/pages/book/typings/formData.ts
@@ -0,0 +1,11 @@
+export interface FormData {
+  scheduleId: string | undefined;
+  selectedValue: number | undefined;
+  purchaseTicketCount: number;
+  totalPaymentAmount: number;
+  bookerName: string;
+  bookerPhoneNumber: string;
+  // 비회원일 경우에만 추가될 속성
+  birthDate?: string;
+  password?: string;
+}
diff --git a/src/pages/gig/Gig.tsx b/src/pages/gig/Gig.tsx
index 2a5aa041..e780bc7a 100644
--- a/src/pages/gig/Gig.tsx
+++ b/src/pages/gig/Gig.tsx
@@ -1,12 +1,13 @@
 import Button from "@components/commons/button/Button";
 import { useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 import Content from "./components/content/Content";
 import ShowInfo from "./components/showInfo/ShowInfo";
 import { SHOW_DETAIL_INFO } from "./constants";
 
 const Gig = () => {
+  const navigate = useNavigate();
   // TODO: performanceId로 상세 정보 조회(GET)
   const { performanceId } = useParams<{ performanceId: string }>();
   const [detail, setDetail] = useState(SHOW_DETAIL_INFO);
@@ -32,7 +33,7 @@ const Gig = () => {
       />
       <FooterContainer>
         {/* TODO: 토큰 여부에 따라서 리다이렉트 */}
-        <Button onClick={() => console.log("예매하기 클릭")}>예매하기</Button>
+        <Button onClick={() => navigate("/book/1")}>예매하기</Button>
       </FooterContainer>
     </div>
   );
diff --git a/src/pages/nonMbLookup/components/InputWrapper.tsx b/src/pages/nonMbLookup/components/InputWrapper.tsx
index e7a264ca..517349a4 100644
--- a/src/pages/nonMbLookup/components/InputWrapper.tsx
+++ b/src/pages/nonMbLookup/components/InputWrapper.tsx
@@ -20,7 +20,7 @@ const InputWrapper = ({ btnOn, btnOff, isReadyRequest, dataStatus }: InputProps)
   const navigate = useNavigate();
 
   const [nonMemberInfo, setNonMemberInfo] = useState({
-    name: "",
+    bookerName: "",
     birth: "",
     number: "",
     password: "",
@@ -47,7 +47,7 @@ const InputWrapper = ({ btnOn, btnOff, isReadyRequest, dataStatus }: InputProps)
 
   const resetForm = () => {
     setNonMemberInfo({
-      name: "",
+      bookerName: "",
       birth: "",
       number: "",
       password: "",
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index 5070ae7a..55747dcc 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -2,6 +2,7 @@ import Layout from "@components/layout/Layout";
 import ActionBottomSheetTest from "@pages/ActionBottomSheetTest";
 import Apage from "@pages/APage/Apage";
 import BankTest from "@pages/BankTest";
+import Book from "@pages/book/Book";
 import Gig from "@pages/gig/Gig";
 import Lookup from "@pages/lookup/Lookup";
 import Manage from "@pages/manage/Manage";
@@ -24,6 +25,7 @@ const router = createBrowserRouter([
     children: [
       { path: "a", element: <Apage /> },
       { path: "lookup", element: <Lookup /> },
+      { path: "book/:performanceId", element: <Book /> },
       { path: "testpage", element: <TestPage /> },
       { path: "register", element: <Register /> },
       { path: "register-complete", element: <RegisterComplete /> },
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 30e76f15..44648ba2 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -60,6 +60,8 @@ const global = createGlobalStyle`
         margin: 0 auto; 
         overflow-x: hidden;
 
+        color: ${({ theme }) => theme.colors.white};
+
         background-color: ${({ theme }) => theme.colors.gray_900}; 
     }