From 86023eea0088002d374af2143d904ae9035f4013 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Fri, 12 Jul 2024 20:13:19 +0900
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20role=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.styled.ts  | 23 +++++---
 src/pages/register/RegisterMaker.tsx   | 13 +++++
 src/pages/register/components/Role.tsx | 81 ++++++++++++++++++++++++++
 src/routes/Router.tsx                  |  4 ++
 4 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/register/RegisterMaker.tsx
 create mode 100644 src/pages/register/components/Role.tsx

diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index 5902a382..22b91a49 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -96,6 +96,11 @@ export const NonCheck = styled.div`
   border-radius: 2px;
 `;
 
+export const TextInputWrpper = styled.section`
+  ${Generators.flexGenerator("column", "start", "space-between")}
+  gap: 0.8rem;
+`;
+
 export const FileInputWrapper = styled.div`
   position: relative;
 
@@ -107,25 +112,25 @@ export const HiddenFileInput = styled.input`
   display: none;
 `;
 
-export const CustomFileInput = styled.label`
+export const CustomFileInput = styled.label<{ width: number; height: number }>`
   ${Generators.flexGenerator()}
-  width: 10.8rem;
-  height: 15.4rem;
+  width: ${({ width }) => (width ? width : 10.8)}rem;
+  height: ${({ height }) => (height ? height : 15.4)}rem;
 
   background: ${({ theme }) => theme.colors.gray_800};
   cursor: pointer;
   border-radius: 6px;
 `;
 
-export const PreviewImageWrapper = styled.article`
+export const PreviewImageWrapper = styled.article<{ width: number; height: number }>`
   position: relative;
-  width: 10.8rem;
-  height: 15.4rem;
+  width: ${({ width }) => (width ? width : 10.8)}rem;
+  height: ${({ height }) => (height ? height : 15.4)}rem;
 `;
 
-export const PreviewImage = styled.img`
-  width: 10.8rem;
-  height: 15.4rem;
+export const PreviewImage = styled.img<{ width: number; height: number }>`
+  width: ${({ width }) => (width ? width : 10.8)}rem;
+  height: ${({ height }) => (height ? height : 15.4)}rem;
   object-fit: cover;
 
   border-radius: 10px;
diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
new file mode 100644
index 00000000..18c4b65c
--- /dev/null
+++ b/src/pages/register/RegisterMaker.tsx
@@ -0,0 +1,13 @@
+import RoleComponent from "./components/Role";
+
+const RegisterMaker = () => {
+  return (
+    <>
+      {/* 페이지 구현 PR에서 로직 구현 에정 */}
+      <RoleComponent title="출연진" />
+      <RoleComponent title="스태프" />
+    </>
+  );
+};
+
+export default RegisterMaker;
diff --git a/src/pages/register/components/Role.tsx b/src/pages/register/components/Role.tsx
new file mode 100644
index 00000000..ae4785dc
--- /dev/null
+++ b/src/pages/register/components/Role.tsx
@@ -0,0 +1,81 @@
+import { ChangeEvent, useState } from "react";
+import * as S from "../Register.styled";
+import Spacing from "@components/commons/spacing/Spacing";
+import { IconCamera } from "@assets/svgs";
+import TextField from "@components/commons/input/textField/TextField";
+
+interface RoleProps {
+  title: string;
+  onImageUpload: (imageUrl: string) => void;
+}
+
+const Role = ({ title, onImageUpload }: RoleProps) => {
+  const [postImg, setPostImg] = useState<File | null>(null);
+  const [previewImg, setPreviewImg] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [role, setRole] = useState("");
+
+  function uploadFile(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) {
+      setPostImg(file);
+
+      const fileReader = new FileReader();
+      fileReader.onload = function (event) {
+        const imageUrl = event.target?.result as string;
+        setPreviewImg(imageUrl);
+        onImageUpload(imageUrl);
+      };
+
+      fileReader.readAsDataURL(file);
+    }
+  }
+
+  const removeImage = () => {
+    setPostImg(null);
+    setPreviewImg(null);
+  };
+
+  return (
+    <S.InputRegisterBox $marginBottom={2.8}>
+      <S.InputTitle>{title}</S.InputTitle>
+      <Spacing marginBottom="1.4" />
+      <S.FileInputWrapper>
+        {previewImg ? (
+          <S.PreviewImageWrapper width={13.6} height={15.8}>
+            <S.PreviewImage src={previewImg} alt="Preview" width={13.6} height={15.8} />
+            <S.RemoveImageButton onClick={removeImage} />
+          </S.PreviewImageWrapper>
+        ) : (
+          <>
+            <S.HiddenFileInput type="file" id="file" onChange={uploadFile} />
+            <S.CustomFileInput htmlFor="file" width={13.6} height={15.8}>
+              <IconCamera width={"3.2rem"} />
+            </S.CustomFileInput>
+          </>
+        )}
+      </S.FileInputWrapper>
+      <Spacing marginBottom="1.6" />
+      <S.TextInputWrpper>
+        <TextField
+          type="input"
+          name="name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          narrow={true}
+          placeholder="이름"
+        />
+        <TextField
+          type="input"
+          name="role"
+          value={role}
+          onChange={(e) => setRole(e.target.value)}
+          narrow={true}
+          placeholder="역할"
+        />
+      </S.TextInputWrpper>
+    </S.InputRegisterBox>
+  );
+};
+
+export default Role;
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index e4dc3e96..7e4b27a9 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -8,7 +8,9 @@ import Manage from "@pages/manage/Manage";
 import ModalTest from "@pages/ModalTest";
 import MyRegisterdShow from "@pages/MyRegisterdShow/MyRegisterdShow";
 import NonMbLookup from "@pages/nonMbLookup/NonMbLookup";
+import Role from "@pages/register/components/Role";
 import Register from "@pages/register/Register";
+import RegisterMaker from "@pages/register/RegisterMaker";
 import TestPage from "@pages/test/TestPage";
 import ViewBottomSheetTest from "@pages/ViewBottomSheetTest";
 import { createBrowserRouter } from "react-router-dom";
@@ -53,6 +55,8 @@ const router = createBrowserRouter([
   //     element: <CPage />,
   //   },
   { path: "/testpage", element: <TestPage /> },
+
+  { path: "/role", element: <RegisterMaker /> },
   { path: "/myregisteredshow", element: <MyRegisterdShow /> },
   //   ...
 ]);

From 690a28cac66adc8389b8c2e270ccc836d4c559e4 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Fri, 12 Jul 2024 21:31:27 +0900
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20add=EB=B2=84=ED=8A=BC=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/svgs/icon_role_add.svg                 |  6 +++
 src/assets/svgs/IconRoleAdd.tsx               | 12 ++++++
 src/assets/svgs/index.tsx                     |  1 +
 src/pages/register/Register.styled.ts         | 11 +++++
 src/pages/register/RegisterMaker.tsx          |  6 +--
 src/pages/register/components/RoleLayout.tsx  | 40 +++++++++++++++++++
 .../components/{Role.tsx => RoleWrapper.tsx}  | 21 ++++------
 src/routes/Router.tsx                         |  2 +-
 8 files changed, 81 insertions(+), 18 deletions(-)
 create mode 100644 public/svgs/icon_role_add.svg
 create mode 100644 src/assets/svgs/IconRoleAdd.tsx
 create mode 100644 src/pages/register/components/RoleLayout.tsx
 rename src/pages/register/components/{Role.tsx => RoleWrapper.tsx} (86%)

diff --git a/public/svgs/icon_role_add.svg b/public/svgs/icon_role_add.svg
new file mode 100644
index 00000000..ca40a3c6
--- /dev/null
+++ b/public/svgs/icon_role_add.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic_role_add">
+<circle id="Ellipse 873" cx="16" cy="16" r="12" fill="#2A2A2A"/>
+<path id="Vector" d="M23 16C23 16.5523 22.5523 17 22 17H17V22C17 22.5523 16.5523 23 16 23C15.4477 23 15 22.5523 15 22V17H10C9.44772 17 9 16.5523 9 16C9 15.4477 9.44772 15 10 15H15V10C15 9.44772 15.4477 9 16 9C16.5523 9 17 9.44772 17 10V15H22C22.5523 15 23 15.4477 23 16Z" fill="#626262"/>
+</g>
+</svg>
diff --git a/src/assets/svgs/IconRoleAdd.tsx b/src/assets/svgs/IconRoleAdd.tsx
new file mode 100644
index 00000000..0916fd16
--- /dev/null
+++ b/src/assets/svgs/IconRoleAdd.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconRoleAdd = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
+    <circle cx={16} cy={16} r={12} fill="#2A2A2A" />
+    <path
+      fill="#626262"
+      d="M23 16a1 1 0 0 1-1 1h-5v5a1 1 0 1 1-2 0v-5h-5a1 1 0 1 1 0-2h5v-5a1 1 0 1 1 2 0v5h5a1 1 0 0 1 1 1"
+    />
+  </svg>
+);
+export default SvgIconRoleAdd;
diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
index 56e6ec11..1bdf5994 100644
--- a/src/assets/svgs/index.tsx
+++ b/src/assets/svgs/index.tsx
@@ -24,6 +24,7 @@ export { default as IconMinus } from "./IconMinus";
 export { default as IconNonghyup } from "./IconNonghyup";
 export { default as IconPhotoDelete } from "./IconPhotoDelete";
 export { default as IconPlus } from "./IconPlus";
+export { default as IconRoleAdd } from "./IconRoleAdd";
 export { default as IconSaemauel } from "./IconSaemauel";
 export { default as IconSc } from "./IconSc";
 export { default as IconShinhan } from "./IconShinhan";
diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index 22b91a49..c162bf17 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -179,3 +179,14 @@ export const TimePickerWrapper = styled.section`
   ${Generators.flexGenerator("column", "center", "center")}
   gap: 1.6rem;
 `;
+
+export const RoleAddBtn = styled.section`
+  ${Generators.flexGenerator()}
+
+  width: 13.6rem;
+  height: 26.6rem;
+
+  background: ${({ theme }) => theme.colors.gray_900};
+  border: 1px dashed ${({ theme }) => theme.colors.gray_700};
+  border-radius: 6px;
+`;
diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index 18c4b65c..ea282eba 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -1,11 +1,11 @@
-import RoleComponent from "./components/Role";
+import RoleLayout from "./components/RoleLayout";
 
 const RegisterMaker = () => {
   return (
     <>
       {/* 페이지 구현 PR에서 로직 구현 에정 */}
-      <RoleComponent title="출연진" />
-      <RoleComponent title="스태프" />
+      <RoleLayout title="출연진" />
+      <RoleLayout title="스태프" />
     </>
   );
 };
diff --git a/src/pages/register/components/RoleLayout.tsx b/src/pages/register/components/RoleLayout.tsx
new file mode 100644
index 00000000..f0b8a1ef
--- /dev/null
+++ b/src/pages/register/components/RoleLayout.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import * as S from "../Register.styled";
+import Spacing from "@components/commons/spacing/Spacing";
+import { IconRoleAdd } from "@assets/svgs";
+import TextField from "@components/commons/input/textField/TextField";
+import RoleWrapper from "./RoleWrapper";
+
+interface RoleLayoutProps {
+  title: string;
+  onImageUpload: (imageUrl: string) => void;
+}
+
+const RoleLayout = ({ title, onImageUpload }: RoleLayoutProps) => {
+  const [makerList, setMakerList] = useState([]);
+
+  const handelAddRole = () => {
+    setMakerList((prev) => [
+      ...prev,
+      {
+        makerList: "",
+        makerRole: "",
+        makerPhoto: "",
+      },
+    ]);
+  };
+  return (
+    <S.InputRegisterBox $marginBottom={2.8}>
+      <S.InputTitle>{title}</S.InputTitle>
+      <Spacing marginBottom="1.4" />
+      <S.RoleAddBtn onClick={handelAddRole}>
+        <IconRoleAdd width={"3.2rem"} />
+      </S.RoleAddBtn>
+      {makerList.map((role, index) => (
+        <RoleWrapper key={index} />
+      ))}
+    </S.InputRegisterBox>
+  );
+};
+
+export default RoleLayout;
diff --git a/src/pages/register/components/Role.tsx b/src/pages/register/components/RoleWrapper.tsx
similarity index 86%
rename from src/pages/register/components/Role.tsx
rename to src/pages/register/components/RoleWrapper.tsx
index ae4785dc..a2588db0 100644
--- a/src/pages/register/components/Role.tsx
+++ b/src/pages/register/components/RoleWrapper.tsx
@@ -1,15 +1,10 @@
-import { ChangeEvent, useState } from "react";
-import * as S from "../Register.styled";
 import Spacing from "@components/commons/spacing/Spacing";
-import { IconCamera } from "@assets/svgs";
+import * as S from "../Register.styled";
 import TextField from "@components/commons/input/textField/TextField";
+import { IconCamera } from "@assets/svgs";
+import { ChangeEvent, useState } from "react";
 
-interface RoleProps {
-  title: string;
-  onImageUpload: (imageUrl: string) => void;
-}
-
-const Role = ({ title, onImageUpload }: RoleProps) => {
+const RoleWrapper = () => {
   const [postImg, setPostImg] = useState<File | null>(null);
   const [previewImg, setPreviewImg] = useState<string | null>(null);
   const [name, setName] = useState("");
@@ -37,9 +32,7 @@ const Role = ({ title, onImageUpload }: RoleProps) => {
   };
 
   return (
-    <S.InputRegisterBox $marginBottom={2.8}>
-      <S.InputTitle>{title}</S.InputTitle>
-      <Spacing marginBottom="1.4" />
+    <>
       <S.FileInputWrapper>
         {previewImg ? (
           <S.PreviewImageWrapper width={13.6} height={15.8}>
@@ -74,8 +67,8 @@ const Role = ({ title, onImageUpload }: RoleProps) => {
           placeholder="역할"
         />
       </S.TextInputWrpper>
-    </S.InputRegisterBox>
+    </>
   );
 };
 
-export default Role;
+export default RoleWrapper;
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index 7e4b27a9..e075d5b8 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -8,7 +8,7 @@ import Manage from "@pages/manage/Manage";
 import ModalTest from "@pages/ModalTest";
 import MyRegisterdShow from "@pages/MyRegisterdShow/MyRegisterdShow";
 import NonMbLookup from "@pages/nonMbLookup/NonMbLookup";
-import Role from "@pages/register/components/Role";
+import Role from "@pages/register/components/RoleLayout";
 import Register from "@pages/register/Register";
 import RegisterMaker from "@pages/register/RegisterMaker";
 import TestPage from "@pages/test/TestPage";

From 5f6d8a8acb2f2df6ae65299eea1a1692cfc7cbd2 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 13 Jul 2024 00:08:08 +0900
Subject: [PATCH 03/16] =?UTF-8?q?design:=20narrow=20input=20height=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../input/textField/TextField.styled.ts       |  4 +--
 .../commons/input/textField/TextField.tsx     |  1 +
 src/pages/register/Register.styled.ts         | 18 +++++++++++-
 src/pages/register/components/RoleLayout.tsx  | 29 ++++++++++++++-----
 src/pages/register/components/RoleWrapper.tsx | 17 ++++-------
 src/styles/global.ts                          |  2 +-
 6 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/components/commons/input/textField/TextField.styled.ts b/src/components/commons/input/textField/TextField.styled.ts
index c0867bf6..a27a401a 100644
--- a/src/components/commons/input/textField/TextField.styled.ts
+++ b/src/components/commons/input/textField/TextField.styled.ts
@@ -11,9 +11,9 @@ export const TextFieldWrapper = styled.article`
   ${Generators.flexGenerator("row", "center", "center")}
 `;
 
-export const TextFieldInput = styled.input`
+export const TextFieldInput = styled.input<{ narrow?: false | true }>`
   width: 100%;
-  height: 4.8rem;
+  height: ${({ narrow }) => (narrow ? "4.2rem" : "4.8rem")};
   padding: 0 1.6rem;
 
   color: ${({ theme }) => theme.colors.gray_0};
diff --git a/src/components/commons/input/textField/TextField.tsx b/src/components/commons/input/textField/TextField.tsx
index 1e51ef41..bce6e352 100644
--- a/src/components/commons/input/textField/TextField.tsx
+++ b/src/components/commons/input/textField/TextField.tsx
@@ -80,6 +80,7 @@ const TextField = ({
           onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}
+          // narrow={narrow}
           {...rest}
         />
         {!narrow && !unit && value && <S.TextClear onClick={handleClearInput} />}
diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index c162bf17..191cd101 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -180,9 +180,20 @@ export const TimePickerWrapper = styled.section`
   gap: 1.6rem;
 `;
 
+export const RoleListWrapper = styled.section`
+  display: flex;
+  gap: 1.6rem;
+  width: 37.5rem;
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
 export const RoleAddBtn = styled.section`
   ${Generators.flexGenerator()}
-
+  flex-shrink: 0;
   width: 13.6rem;
   height: 26.6rem;
 
@@ -190,3 +201,8 @@ export const RoleAddBtn = styled.section`
   border: 1px dashed ${({ theme }) => theme.colors.gray_700};
   border-radius: 6px;
 `;
+
+export const RoleWrapper = styled.div`
+  ${Generators.flexGenerator("column", "center", "center")}
+  height: 26.6rem;
+`;
diff --git a/src/pages/register/components/RoleLayout.tsx b/src/pages/register/components/RoleLayout.tsx
index f0b8a1ef..af47605a 100644
--- a/src/pages/register/components/RoleLayout.tsx
+++ b/src/pages/register/components/RoleLayout.tsx
@@ -17,22 +17,37 @@ const RoleLayout = ({ title, onImageUpload }: RoleLayoutProps) => {
     setMakerList((prev) => [
       ...prev,
       {
-        makerList: "",
+        id: Date.now(),
+        makerName: "",
         makerRole: "",
         makerPhoto: "",
       },
     ]);
   };
+
+  const handleremoveRole = (id: number) => {
+    setMakerList((prev) => prev.filter((role) => role.id !== id));
+  };
+
+  console.log(makerList);
+
   return (
     <S.InputRegisterBox $marginBottom={2.8}>
       <S.InputTitle>{title}</S.InputTitle>
       <Spacing marginBottom="1.4" />
-      <S.RoleAddBtn onClick={handelAddRole}>
-        <IconRoleAdd width={"3.2rem"} />
-      </S.RoleAddBtn>
-      {makerList.map((role, index) => (
-        <RoleWrapper key={index} />
-      ))}
+      <S.RoleListWrapper>
+        {makerList.map((role) => (
+          <RoleWrapper
+            key={role.id}
+            id={role.id}
+            removeRole={handleremoveRole}
+            onImageUpload={onImageUpload}
+          />
+        ))}
+        <S.RoleAddBtn onClick={handelAddRole}>
+          <IconRoleAdd width={"3.2rem"} />
+        </S.RoleAddBtn>
+      </S.RoleListWrapper>
     </S.InputRegisterBox>
   );
 };
diff --git a/src/pages/register/components/RoleWrapper.tsx b/src/pages/register/components/RoleWrapper.tsx
index a2588db0..dff78abf 100644
--- a/src/pages/register/components/RoleWrapper.tsx
+++ b/src/pages/register/components/RoleWrapper.tsx
@@ -4,7 +4,7 @@ import TextField from "@components/commons/input/textField/TextField";
 import { IconCamera } from "@assets/svgs";
 import { ChangeEvent, useState } from "react";
 
-const RoleWrapper = () => {
+const RoleWrapper = ({ id, removeRole, onImageUpload }) => {
   const [postImg, setPostImg] = useState<File | null>(null);
   const [previewImg, setPreviewImg] = useState<string | null>(null);
   const [name, setName] = useState("");
@@ -26,23 +26,18 @@ const RoleWrapper = () => {
     }
   }
 
-  const removeImage = () => {
-    setPostImg(null);
-    setPreviewImg(null);
-  };
-
   return (
-    <>
+    <S.RoleWrapper>
       <S.FileInputWrapper>
         {previewImg ? (
           <S.PreviewImageWrapper width={13.6} height={15.8}>
             <S.PreviewImage src={previewImg} alt="Preview" width={13.6} height={15.8} />
-            <S.RemoveImageButton onClick={removeImage} />
+            <S.RemoveImageButton onClick={() => removeRole(id)} />
           </S.PreviewImageWrapper>
         ) : (
           <>
-            <S.HiddenFileInput type="file" id="file" onChange={uploadFile} />
-            <S.CustomFileInput htmlFor="file" width={13.6} height={15.8}>
+            <S.HiddenFileInput type="file" id={`file-${id}`} onChange={uploadFile} />
+            <S.CustomFileInput htmlFor={`file-${id}`} width={13.6} height={15.8}>
               <IconCamera width={"3.2rem"} />
             </S.CustomFileInput>
           </>
@@ -67,7 +62,7 @@ const RoleWrapper = () => {
           placeholder="역할"
         />
       </S.TextInputWrpper>
-    </>
+    </S.RoleWrapper>
   );
 };
 
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 30e76f15..d6559536 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -12,7 +12,7 @@ const global = createGlobalStyle`
     html {
     font-size: 62.5%;
 
-    background-color: ${({ theme }) => theme.colors.black};
+    background-color: ${({ theme }) => theme.colors.gray_900};
 
     user-select: none;
     -webkit-touch-callout: none;

From 137993df362939dfaaafdd27b8cc6fc21964e64b Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 13 Jul 2024 01:25:18 +0900
Subject: [PATCH 04/16] =?UTF-8?q?feat:=20=EB=B0=B0=EC=97=B4=EC=97=90=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84,=20=EC=97=AD=ED=95=A0,=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commons/input/textField/TextField.tsx     |  2 +-
 src/pages/register/Register.styled.ts         |  6 ++--
 src/pages/register/RegisterMaker.tsx          |  7 +++--
 .../register/components/PosterThumbnail.tsx   |  4 +--
 src/pages/register/components/RoleLayout.tsx  | 12 +++++---
 src/pages/register/components/RoleWrapper.tsx | 30 +++++++++++--------
 6 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/components/commons/input/textField/TextField.tsx b/src/components/commons/input/textField/TextField.tsx
index bce6e352..e5190856 100644
--- a/src/components/commons/input/textField/TextField.tsx
+++ b/src/components/commons/input/textField/TextField.tsx
@@ -80,7 +80,7 @@ const TextField = ({
           onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}
-          // narrow={narrow}
+          narrow={narrow}
           {...rest}
         />
         {!narrow && !unit && value && <S.TextClear onClick={handleClearInput} />}
diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index 191cd101..69983a13 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -112,7 +112,7 @@ export const HiddenFileInput = styled.input`
   display: none;
 `;
 
-export const CustomFileInput = styled.label<{ width: number; height: number }>`
+export const CustomFileInput = styled.label<{ width?: number; height?: number }>`
   ${Generators.flexGenerator()}
   width: ${({ width }) => (width ? width : 10.8)}rem;
   height: ${({ height }) => (height ? height : 15.4)}rem;
@@ -122,13 +122,13 @@ export const CustomFileInput = styled.label<{ width: number; height: number }>`
   border-radius: 6px;
 `;
 
-export const PreviewImageWrapper = styled.article<{ width: number; height: number }>`
+export const PreviewImageWrapper = styled.article<{ width?: number; height?: number }>`
   position: relative;
   width: ${({ width }) => (width ? width : 10.8)}rem;
   height: ${({ height }) => (height ? height : 15.4)}rem;
 `;
 
-export const PreviewImage = styled.img<{ width: number; height: number }>`
+export const PreviewImage = styled.img<{ width?: number; height?: number }>`
   width: ${({ width }) => (width ? width : 10.8)}rem;
   height: ${({ height }) => (height ? height : 15.4)}rem;
   object-fit: cover;
diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index ea282eba..00accad1 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -1,12 +1,13 @@
 import RoleLayout from "./components/RoleLayout";
+import * as S from "./Register.styled";
 
 const RegisterMaker = () => {
   return (
-    <>
-      {/* 페이지 구현 PR에서 로직 구현 에정 */}
+    <S.RegisterContainer>
       <RoleLayout title="출연진" />
+      <S.Divider />
       <RoleLayout title="스태프" />
-    </>
+    </S.RegisterContainer>
   );
 };
 
diff --git a/src/pages/register/components/PosterThumbnail.tsx b/src/pages/register/components/PosterThumbnail.tsx
index 8cf464c9..a64c6ae3c 100644
--- a/src/pages/register/components/PosterThumbnail.tsx
+++ b/src/pages/register/components/PosterThumbnail.tsx
@@ -11,7 +11,7 @@ const PosterThumbnail = ({ onImageUpload }: PosterThumbnailProps) => {
   const [postImg, setPostImg] = useState<File | null>(null);
   const [previewImg, setPreviewImg] = useState<string | null>(null);
 
-  function uploadFile(e: ChangeEvent<HTMLInputElement>) {
+  const uploadFile = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       setPostImg(file);
@@ -25,7 +25,7 @@ const PosterThumbnail = ({ onImageUpload }: PosterThumbnailProps) => {
 
       fileReader.readAsDataURL(file);
     }
-  }
+  };
 
   const removeImage = () => {
     setPostImg(null);
diff --git a/src/pages/register/components/RoleLayout.tsx b/src/pages/register/components/RoleLayout.tsx
index af47605a..75995da9 100644
--- a/src/pages/register/components/RoleLayout.tsx
+++ b/src/pages/register/components/RoleLayout.tsx
@@ -2,15 +2,13 @@ import { useState } from "react";
 import * as S from "../Register.styled";
 import Spacing from "@components/commons/spacing/Spacing";
 import { IconRoleAdd } from "@assets/svgs";
-import TextField from "@components/commons/input/textField/TextField";
 import RoleWrapper from "./RoleWrapper";
 
 interface RoleLayoutProps {
   title: string;
-  onImageUpload: (imageUrl: string) => void;
 }
 
-const RoleLayout = ({ title, onImageUpload }: RoleLayoutProps) => {
+const RoleLayout = ({ title }: RoleLayoutProps) => {
   const [makerList, setMakerList] = useState([]);
 
   const handelAddRole = () => {
@@ -29,6 +27,12 @@ const RoleLayout = ({ title, onImageUpload }: RoleLayoutProps) => {
     setMakerList((prev) => prev.filter((role) => role.id !== id));
   };
 
+  const handleUpdateRole = (id: number, name: string, value: string) => {
+    setMakerList((prev) =>
+      prev.map((role) => (role.id === id ? { ...role, [name]: value } : role))
+    );
+  };
+
   console.log(makerList);
 
   return (
@@ -41,7 +45,7 @@ const RoleLayout = ({ title, onImageUpload }: RoleLayoutProps) => {
             key={role.id}
             id={role.id}
             removeRole={handleremoveRole}
-            onImageUpload={onImageUpload}
+            onUpdateRole={handleUpdateRole}
           />
         ))}
         <S.RoleAddBtn onClick={handelAddRole}>
diff --git a/src/pages/register/components/RoleWrapper.tsx b/src/pages/register/components/RoleWrapper.tsx
index dff78abf..7775a708 100644
--- a/src/pages/register/components/RoleWrapper.tsx
+++ b/src/pages/register/components/RoleWrapper.tsx
@@ -4,13 +4,17 @@ import TextField from "@components/commons/input/textField/TextField";
 import { IconCamera } from "@assets/svgs";
 import { ChangeEvent, useState } from "react";
 
-const RoleWrapper = ({ id, removeRole, onImageUpload }) => {
+interface RoleWrapperProps {
+  id: number;
+  removeRole: (id: number) => void;
+  onUpdateRole: (id: number, name: string, value: string) => void;
+}
+
+const RoleWrapper = ({ id, removeRole, onUpdateRole }: RoleWrapperProps) => {
   const [postImg, setPostImg] = useState<File | null>(null);
   const [previewImg, setPreviewImg] = useState<string | null>(null);
-  const [name, setName] = useState("");
-  const [role, setRole] = useState("");
 
-  function uploadFile(e: ChangeEvent<HTMLInputElement>) {
+  const uploadFile = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       setPostImg(file);
@@ -19,13 +23,17 @@ const RoleWrapper = ({ id, removeRole, onImageUpload }) => {
       fileReader.onload = function (event) {
         const imageUrl = event.target?.result as string;
         setPreviewImg(imageUrl);
-        onImageUpload(imageUrl);
+        onUpdateRole(id, "makerPhoto", imageUrl);
       };
 
       fileReader.readAsDataURL(file);
     }
-  }
+  };
 
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    onUpdateRole(id, name, value);
+  };
   return (
     <S.RoleWrapper>
       <S.FileInputWrapper>
@@ -47,17 +55,15 @@ const RoleWrapper = ({ id, removeRole, onImageUpload }) => {
       <S.TextInputWrpper>
         <TextField
           type="input"
-          name="name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
+          name="makerName"
+          onChange={handleInputChange}
           narrow={true}
           placeholder="이름"
         />
         <TextField
           type="input"
-          name="role"
-          value={role}
-          onChange={(e) => setRole(e.target.value)}
+          name="makerRole"
+          onChange={handleInputChange}
           narrow={true}
           placeholder="역할"
         />

From 4c073524329ca4f8bbdaacf10668cb9b7c5eecd4 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 13 Jul 2024 02:15:15 +0900
Subject: [PATCH 05/16] =?UTF-8?q?design:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=A7=A4=EB=A6=BC=20=ED=98=84=EC=83=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.styled.ts | 4 +++-
 src/styles/global.ts                  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index 69983a13..cd928495 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -183,7 +183,9 @@ export const TimePickerWrapper = styled.section`
 export const RoleListWrapper = styled.section`
   display: flex;
   gap: 1.6rem;
-  width: 37.5rem;
+  width: calc(100% + 4.8rem);
+  margin-left: -2.4rem;
+  padding: 0 2.4rem;
   overflow-x: scroll;
 
   &::-webkit-scrollbar {
diff --git a/src/styles/global.ts b/src/styles/global.ts
index d6559536..30e76f15 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -12,7 +12,7 @@ const global = createGlobalStyle`
     html {
     font-size: 62.5%;
 
-    background-color: ${({ theme }) => theme.colors.gray_900};
+    background-color: ${({ theme }) => theme.colors.black};
 
     user-select: none;
     -webkit-touch-callout: none;

From 541ee69a66552a15df33d1821af50b76f9fa793e Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 13 Jul 2024 02:23:03 +0900
Subject: [PATCH 06/16] =?UTF-8?q?design:=20=ED=91=B8=ED=84=B0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.styled.ts |  8 ++++++++
 src/pages/register/RegisterMaker.tsx  | 18 +++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index cd928495..c7a95e96 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -208,3 +208,11 @@ export const RoleWrapper = styled.div`
   ${Generators.flexGenerator("column", "center", "center")}
   height: 26.6rem;
 `;
+
+export const FooterInfo = styled.div`
+  margin-bottom: 2.4rem;
+
+  color: ${({ theme }) => theme.colors.gray_200};
+  ${({ theme }) => theme.fonts["body2-normal-semi"]};
+  text-align: center;
+`;
diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index 00accad1..d757ed06 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -1,13 +1,21 @@
+import Button from "@components/commons/button/Button";
 import RoleLayout from "./components/RoleLayout";
 import * as S from "./Register.styled";
 
 const RegisterMaker = () => {
   return (
-    <S.RegisterContainer>
-      <RoleLayout title="출연진" />
-      <S.Divider />
-      <RoleLayout title="스태프" />
-    </S.RegisterContainer>
+    <>
+      <S.RegisterContainer>
+        <RoleLayout title="출연진" />
+        <S.Divider />
+        <RoleLayout title="스태프" />
+      </S.RegisterContainer>
+      <S.FooterContainer>
+        <S.FooterDivider />
+        <S.FooterInfo>공연진 상세정보는 선택사항 입니다.</S.FooterInfo>
+        <Button onClick={() => console.log("예매하기 클릭")}>다음</Button>
+      </S.FooterContainer>
+    </>
   );
 };
 

From 6b9da2bc8443be3515c17ca7e5d0c2172af9b905 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 13 Jul 2024 18:27:31 +0900
Subject: [PATCH 07/16] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20ste?=
 =?UTF-8?q?p=20=EB=82=98=EB=88=A0=EC=84=9C=20gigInfo=EC=97=90=20=EA=B3=B5?=
 =?UTF-8?q?=EC=97=B0=EC=A7=84=20=EC=A0=95=EB=B3=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.styled.ts        |   2 -
 src/pages/register/Register.tsx              | 397 ++++++++++---------
 src/pages/register/RegisterMaker.tsx         |  47 ++-
 src/pages/register/RegisterPage.tsx          |  59 +++
 src/pages/register/components/RoleLayout.tsx |  34 +-
 src/routes/Router.tsx                        |   2 +-
 6 files changed, 343 insertions(+), 198 deletions(-)
 create mode 100644 src/pages/register/RegisterPage.tsx

diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index c7a95e96..61c9aa22 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -16,8 +16,6 @@ export const Divider = styled.div`
 `;
 
 export const FooterContainer = styled.div`
-  position: sticky;
-  bottom: 0;
   padding: 2.4rem;
 
   background-color: ${({ theme }) => theme.colors.gray_900};
diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index 5e361d76..4eb4fe47 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -16,7 +16,6 @@ import PosterThumbnail from "./components/PosterThumbnail";
 import Spacing from "@components/commons/spacing/Spacing";
 import { GENRE_LIST } from "./constants/genreList";
 import { Dayjs } from "dayjs";
-
 import {
   handleImageUpload,
   handleGenreSelect,
@@ -33,8 +32,10 @@ import {
 import { GigInfo } from "./typings/gigInfo";
 import Button from "@components/commons/button/Button";
 import { IconChecked } from "@assets/svgs";
+import RegisterMaker from "./RegisterMaker";
 
 const Register = () => {
+  const [registerStep, setRegisterStep] = useState(2);
   const [gigInfo, setGigInfo] = useState<GigInfo>({
     performanceTitle: "", // 공연명
     genre: "", // 공연 장르
@@ -90,7 +91,7 @@ const Register = () => {
   } = gigInfo;
 
   const [round, setRound] = useState(1); // 회차
-  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null); // 선택한 날짜
+  // const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null); // 선택한 날짜
   const [bankOpen, setBankOpen] = useState(false);
   const [bankInfo, setBankInfo] = useState("");
   const [isChecked, setIsChecked] = useState(false);
@@ -111,208 +112,230 @@ const Register = () => {
     }
   }, [isFree]);
 
+  const handleRegisterStep = () => {
+    setRegisterStep((prev) => prev + 1);
+  };
+  const updateGigInfo = (newInfo: Partial<GigInfo>) => {
+    setGigInfo((prev) => ({
+      ...prev,
+      ...newInfo,
+    }));
+  };
+  console.log(registerStep);
   console.log(gigInfo);
 
-  return (
-    <>
-      <S.RegisterContainer>
-        <PosterThumbnail onImageUpload={(url) => handleImageUpload(url, setGigInfo)} />
-        <S.Divider />
+  if (registerStep === 1) {
+    {
+      return (
+        <>
+          <S.RegisterContainer>
+            <PosterThumbnail onImageUpload={(url) => handleImageUpload(url, setGigInfo)} />
+            <S.Divider />
 
-        <GenreSelect
-          title="공연 장르"
-          genres={GENRE_LIST}
-          selectedGenre={genre}
-          onGenreSelect={(selectedGenre) => handleGenreSelect(selectedGenre, setGigInfo)}
-          marginBottom={2.4}
-        />
-        <S.Divider />
+            <GenreSelect
+              title="공연 장르"
+              genres={GENRE_LIST}
+              selectedGenre={genre}
+              onGenreSelect={(selectedGenre) => handleGenreSelect(selectedGenre, setGigInfo)}
+              marginBottom={2.4}
+            />
+            <S.Divider />
 
-        <InputRegisterBox title="공연명">
-          <TextField
-            type="input"
-            name="performanceTitle"
-            value={performanceTitle}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            placeholder="등록될 공연의 이름을 입력해주세요."
-            maxLength={30}
-            cap={true}
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            <InputRegisterBox title="공연명">
+              <TextField
+                type="input"
+                name="performanceTitle"
+                value={performanceTitle}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                placeholder="등록될 공연의 이름을 입력해주세요."
+                maxLength={30}
+                cap={true}
+              />
+            </InputRegisterBox>
+            <S.Divider />
 
-        <InputRegisterBox title="주최 단체명">
-          <TextField
-            type="input"
-            name="performanceTeamName"
-            value={performanceTeamName}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            placeholder="주최하는 공연진(단체)의 이름을 입력해주세요."
-            maxLength={10}
-            cap={true}
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            <InputRegisterBox title="주최 단체명">
+              <TextField
+                type="input"
+                name="performanceTeamName"
+                value={performanceTeamName}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                placeholder="주최하는 공연진(단체)의 이름을 입력해주세요."
+                maxLength={10}
+                cap={true}
+              />
+            </InputRegisterBox>
+            <S.Divider />
 
-        <InputRegisterBox title="공연 소개">
-          <TextArea
-            name="performanceDescription"
-            value={performanceDescription}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            placeholder="공연을 예매할 예매자들에게 공연을 소개해주세요."
-            maxLength={300}
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            <InputRegisterBox title="공연 소개">
+              <TextArea
+                name="performanceDescription"
+                value={performanceDescription}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                placeholder="공연을 예매할 예매자들에게 공연을 소개해주세요."
+                maxLength={300}
+              />
+            </InputRegisterBox>
+            <S.Divider />
+
+            <InputRegisterBox title="러닝 타임">
+              <TextField
+                type="input"
+                name="runningTime"
+                value={runningTime}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                filter={numericFilter}
+                unit="time"
+                placeholder="공연의 러닝 타임을 분 단위로 입력해주세요."
+              />
+            </InputRegisterBox>
+            <S.Divider />
 
-        <InputRegisterBox title="러닝 타임">
-          <TextField
-            type="input"
-            name="runningTime"
-            value={runningTime}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            filter={numericFilter}
-            unit="time"
-            placeholder="공연의 러닝 타임을 분 단위로 입력해주세요."
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            <StepperRegisterBox title="회차 수">
+              <Stepper
+                max={3}
+                round={totalScheduleCount}
+                onMinusClick={() => onMinusClick(setGigInfo)}
+                onPlusClick={() => onPlusClick(setGigInfo)}
+              />
+            </StepperRegisterBox>
+            <S.Divider />
 
-        <StepperRegisterBox title="회차 수">
-          <Stepper
-            max={3}
-            round={totalScheduleCount}
-            onMinusClick={() => onMinusClick(setGigInfo)}
-            onPlusClick={() => onPlusClick(setGigInfo)}
-          />
-        </StepperRegisterBox>
-        <S.Divider />
+            <TimePickerRegisterBox title="회차별 시간대">
+              {scheduleList.map((schedule, index) => (
+                <div key={index}>
+                  <S.InputDescription>{index + 1}회차</S.InputDescription>
+                  <Spacing marginBottom={"1"} />
+                  <TimePicker
+                    value={schedule.performanceDate}
+                    onChangeValue={(date) => handleDateChange(index, date, setGigInfo)}
+                  />
+                </div>
+              ))}
+            </TimePickerRegisterBox>
+            <S.Divider />
 
-        <TimePickerRegisterBox title="회차별 시간대">
-          {scheduleList.map((schedule, index) => (
-            <div key={index}>
-              <S.InputDescription>{index + 1}회차</S.InputDescription>
-              <Spacing marginBottom={"1"} />
-              <TimePicker
-                value={schedule.performanceDate}
-                onChangeValue={(date) => handleDateChange(index, date, setGigInfo)}
+            <InputRegisterBox title="공연 장소">
+              <TextField
+                type="input"
+                name="performanceVenue"
+                value={performanceVenue}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                placeholder="ex:) 홍익아트홀 303호 소극장"
+                maxLength={15}
+                cap={true}
               />
-            </div>
-          ))}
-        </TimePickerRegisterBox>
-        <S.Divider />
+            </InputRegisterBox>
+            <S.Divider />
 
-        <InputRegisterBox title="공연 장소">
-          <TextField
-            type="input"
-            name="performanceVenue"
-            value={performanceVenue}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            placeholder="ex:) 홍익아트홀 303호 소극장"
-            maxLength={15}
-            cap={true}
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            <InputRegisterBox
+              title="티켓 가격"
+              description="*티켓 가격은 수정불가합니다."
+              isFree={isFree}
+              onFreeClick={() => onFreeClick(setIsFree)}
+            >
+              <TextField
+                type="input"
+                name="ticketPrice"
+                value={ticketPrice}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                placeholder="가격을 입력해주세요."
+                filter={priceFilter}
+                disabled={isFree}
+                unit="amount"
+              />
+            </InputRegisterBox>
+            <S.Divider />
+
+            <InputRegisterBox title="회차별 티켓 판매수">
+              <TextField
+                type="input"
+                name="totalTicketCount"
+                value={scheduleList[0].totalTicketCount}
+                onChange={(e) => handleTotalTicketCountChange(e, setGigInfo)}
+                placeholder="판매할 티켓의 매 수를 입력해주세요."
+                filter={numericFilter}
+                unit="ticket"
+              />
+            </InputRegisterBox>
+            <S.Divider />
 
-        <InputRegisterBox
-          title="티켓 가격"
-          description="*티켓 가격은 수정불가합니다."
-          isFree={isFree}
-          onFreeClick={() => onFreeClick(setIsFree)}
-        >
-          <TextField
-            type="input"
-            name="ticketPrice"
-            value={ticketPrice}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            placeholder="가격을 입력해주세요."
-            filter={priceFilter}
-            disabled={isFree}
-            unit="amount"
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            <InputRegisterBox title="유의사항">
+              <TextArea
+                name="performanceAttentionNote"
+                value={performanceAttentionNote}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                placeholder="입장 안내, 공연 중 인터미션, 공연장 반입금지 물품, 촬영 가능 여부, 주차 안내 등 예매자들이 꼭 알고 있어야할 유의사항을 입력해주세요."
+                maxLength={300}
+              />
+            </InputRegisterBox>
+            <S.Divider />
 
-        <InputRegisterBox title="회차별 티켓 판매수">
-          <TextField
-            type="input"
-            name="totalTicketCount"
-            value={scheduleList[0].totalTicketCount}
-            onChange={(e) => handleTotalTicketCountChange(e, setGigInfo)}
-            placeholder="판매할 티켓의 매 수를 입력해주세요."
-            filter={numericFilter}
-            unit="ticket"
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            <InputAccountWrapper>
+              <InputBank bankOpen={bankOpen} onClick={() => handleBankOpen(setBankOpen)}>
+                {bankInfo}
+              </InputBank>
+              <TextField
+                name="accountNumber"
+                value={accountNumber}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                filter={numericFilter}
+                placeholder="입금 받으실 계좌번호를 (-)제외 숫자만 입력해주세요."
+              />
+            </InputAccountWrapper>
+            <S.Divider />
 
-        <InputRegisterBox title="유의사항">
-          <TextArea
-            name="performanceAttentionNote"
-            value={performanceAttentionNote}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            placeholder="입장 안내, 공연 중 인터미션, 공연장 반입금지 물품, 촬영 가능 여부, 주차 안내 등 예매자들이 꼭 알고 있어야할 유의사항을 입력해주세요."
-            maxLength={300}
-          />
-        </InputRegisterBox>
-        <S.Divider />
+            {bankOpen && (
+              <BankBottomSheet
+                value={bankInfo}
+                onBankClick={(value) =>
+                  handleBankClick(value, setGigInfo, setBankInfo, setBankOpen)
+                }
+                onOutClick={() => handleBankOpen(setBankOpen)}
+              />
+            )}
 
-        <InputAccountWrapper>
-          <InputBank bankOpen={bankOpen} onClick={() => handleBankOpen(setBankOpen)}>
-            {bankInfo}
-          </InputBank>
-          <TextField
-            name="accountNumber"
-            value={accountNumber}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            filter={numericFilter}
-            placeholder="입금 받으실 계좌번호를 (-)제외 숫자만 입력해주세요."
-          />
-        </InputAccountWrapper>
-        <S.Divider />
+            <InputRegisterBox title="대표자 연락처">
+              <TextField
+                type="input"
+                name="performanceContact"
+                value={performanceContact}
+                filter={phoneNumberFilter}
+                onChange={(e) => handleChange(e, setGigInfo)}
+                placeholder="문의 가능한 대표 번호를 숫자만 입력해주세요."
+              />
+            </InputRegisterBox>
+          </S.RegisterContainer>
+          <S.FooterContainer>
+            <S.FooterDivider />
+            <S.CheckboxContainer>
+              <S.CheckboxLabel>
+                <S.Checkbox
+                  type="checkbox"
+                  checked={isChecked}
+                  onChange={handleCheckboxChange}
+                ></S.Checkbox>
+                한 명 이상의 예매자가 있을 경우, 공연 삭제가 불가해요.
+                {isChecked ? <IconChecked width={18} /> : <S.NonCheck />}
+              </S.CheckboxLabel>
+            </S.CheckboxContainer>
+            <Button
+              onClick={handleRegisterStep}
+              disabled={!isAllFieldsFilled(gigInfo) || !isChecked}
+            >
+              다음
+            </Button>
+          </S.FooterContainer>
+        </>
+      );
+    }
+  }
 
-        {bankOpen && (
-          <BankBottomSheet
-            value={bankInfo}
-            onBankClick={(value) => handleBankClick(value, setGigInfo, setBankInfo, setBankOpen)}
-            onOutClick={() => handleBankOpen(setBankOpen)}
-          />
-        )}
+  if (registerStep === 2) {
+    return <RegisterMaker handleRegisterStep={handleRegisterStep} updateGigInfo={updateGigInfo} />;
+  }
 
-        <InputRegisterBox title="대표자 연락처">
-          <TextField
-            type="input"
-            name="performanceContact"
-            value={performanceContact}
-            filter={phoneNumberFilter}
-            onChange={(e) => handleChange(e, setGigInfo)}
-            placeholder="문의 가능한 대표 번호를 숫자만 입력해주세요."
-          />
-        </InputRegisterBox>
-      </S.RegisterContainer>
-      <S.FooterContainer>
-        <S.FooterDivider />
-        <S.CheckboxContainer>
-          <S.CheckboxLabel>
-            <S.Checkbox
-              type="checkbox"
-              checked={isChecked}
-              onChange={handleCheckboxChange}
-            ></S.Checkbox>
-            한 명 이상의 예매자가 있을 경우, 공연 삭제가 불가해요.
-            {isChecked ? <IconChecked width={18} /> : <S.NonCheck />}
-          </S.CheckboxLabel>
-        </S.CheckboxContainer>
-        <Button
-          onClick={() => console.log("예매하기 클릭")}
-          disabled={!isAllFieldsFilled(gigInfo) || !isChecked}
-        >
-          다음
-        </Button>
-      </S.FooterContainer>
-    </>
-  );
+  return <></>;
 };
 
 export default Register;
diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index d757ed06..90b6806c 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -1,19 +1,58 @@
 import Button from "@components/commons/button/Button";
 import RoleLayout from "./components/RoleLayout";
 import * as S from "./Register.styled";
+import { useEffect, useState } from "react";
+import { Cast, Staff } from "./typings/gigInfo";
 
-const RegisterMaker = () => {
+interface RegisterMakerProps {
+  handleRegisterStep: () => void;
+  updateGigInfo: (newInfo: Partial<{ castList: Cast[]; staffList: Staff[] }>) => void;
+}
+
+const RegisterMaker = ({ handleRegisterStep, updateGigInfo }: RegisterMakerProps) => {
+  const [castList, setCastList] = useState<Cast[]>([]);
+  const [staffList, setStaffList] = useState<Staff[]>([]);
+
+  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+
+  useEffect(() => {
+    const allCastFieldsFilled = castList.every(
+      (cast) => cast.castName && cast.castRole && cast.castPhoto
+    );
+    const allStaffFieldsFilled = staffList.every(
+      (staff) => staff.staffName && staff.staffRole && staff.staffPhoto
+    );
+    setIsButtonDisabled(
+      !(castList.length === 0 || allCastFieldsFilled) ||
+        !(staffList.length === 0 || allStaffFieldsFilled)
+    );
+  }, [castList, staffList]);
+
+  const handleUpdateList = (title: string, updatedList: Cast[] | Staff[]) => {
+    if (title === "출연진") {
+      setCastList(updatedList as Cast[]);
+    } else if (title === "스태프") {
+      setStaffList(updatedList as Staff[]);
+    }
+  };
+
+  const handleList = () => {
+    updateGigInfo({ castList, staffList });
+    handleRegisterStep();
+  };
   return (
     <>
       <S.RegisterContainer>
-        <RoleLayout title="출연진" />
+        <RoleLayout title="출연진" updateList={(list) => handleUpdateList("출연진", list)} />
         <S.Divider />
-        <RoleLayout title="스태프" />
+        <RoleLayout title="스태프" updateList={(list) => handleUpdateList("스태프", list)} />
       </S.RegisterContainer>
       <S.FooterContainer>
         <S.FooterDivider />
         <S.FooterInfo>공연진 상세정보는 선택사항 입니다.</S.FooterInfo>
-        <Button onClick={() => console.log("예매하기 클릭")}>다음</Button>
+        <Button onClick={handleList} disabled={isButtonDisabled}>
+          다음
+        </Button>
       </S.FooterContainer>
     </>
   );
diff --git a/src/pages/register/RegisterPage.tsx b/src/pages/register/RegisterPage.tsx
new file mode 100644
index 00000000..88a2c9d2
--- /dev/null
+++ b/src/pages/register/RegisterPage.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import Register from "./Register";
+import RegisterMaker from "./RegisterMaker";
+import { GigInfo } from "./typings/gigInfo";
+
+const RegisterPage = () => {
+  const [registerStep, setRegisterStep] = useState(1);
+  const [gigInfo, setGigInfo] = useState<GigInfo>({
+    performanceTitle: "", // 공연명
+    genre: "", // 공연 장르
+    runningTime: "", // 러닝 타임
+    performanceDescription: "", // 공연 소개
+    performanceAttentionNote: "", // 유의사항
+    bankName: "", // 은행명
+    accountNumber: "", // 계좌번호
+    posterImage: "", // 포스터 이미지 URL
+    performanceTeamName: "", // 공연 팀명
+    performanceVenue: "", // 공연 장소
+    performanceContact: "", // 대표자 연락처
+    performancePeriod: "", // 2023.12.28~2023.12.29
+    ticketPrice: "", // 가격
+    totalScheduleCount: 1, // 총 회차 수
+    scheduleList: [
+      {
+        performanceDate: null, // 공연 일시
+        totalTicketCount: "", // 총 티켓 수
+        scheduleNumber: "FIRST", // 회차 번호
+      },
+    ],
+    castList: [
+      {
+        castName: "", // 이름
+        castRole: "", // 역할
+        castPhoto: "", // 출연진 사진 URL
+      },
+    ],
+    staffList: [
+      {
+        staffName: "", // 이름
+        staffRole: "", // 역할
+        staffPhoto: "", // 스태프 사진 URL
+      },
+    ],
+  });
+
+  const handleRegisterStep = () => {
+    setRegisterStep((prev) => prev + 1);
+  };
+
+  if (registerStep === 1) {
+    return <Register handleRegisterStep={handleRegisterStep} handleGigInfo={handleGigInfo} />;
+  }
+  if (registerStep === 2) {
+    return <RegisterMaker handleRegisterStep={handleRegisterStep} handleGigInfo={handleGigInfo} />;
+  }
+  return <>미리보기</>;
+};
+
+export default RegisterPage;
diff --git a/src/pages/register/components/RoleLayout.tsx b/src/pages/register/components/RoleLayout.tsx
index 75995da9..5157d8ed 100644
--- a/src/pages/register/components/RoleLayout.tsx
+++ b/src/pages/register/components/RoleLayout.tsx
@@ -1,15 +1,23 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import * as S from "../Register.styled";
 import Spacing from "@components/commons/spacing/Spacing";
 import { IconRoleAdd } from "@assets/svgs";
 import RoleWrapper from "./RoleWrapper";
 
+interface Role {
+  id: number;
+  makerName: string;
+  makerRole: string;
+  makerPhoto: string;
+}
+
 interface RoleLayoutProps {
+  updateList: (list: any[]) => void;
   title: string;
 }
 
-const RoleLayout = ({ title }: RoleLayoutProps) => {
-  const [makerList, setMakerList] = useState([]);
+const RoleLayout = ({ updateList, title }: RoleLayoutProps) => {
+  const [makerList, setMakerList] = useState<Role[]>([]);
 
   const handelAddRole = () => {
     setMakerList((prev) => [
@@ -33,7 +41,25 @@ const RoleLayout = ({ title }: RoleLayoutProps) => {
     );
   };
 
-  console.log(makerList);
+  useEffect(() => {
+    const newMakerList = makerList.map((role) => {
+      if (title === "출연진") {
+        return {
+          castName: role.makerName,
+          castRole: role.makerRole,
+          castPhoto: role.makerPhoto,
+        };
+      }
+      if (title === "스태프") {
+        return {
+          staffName: role.makerName,
+          staffRole: role.makerRole,
+          staffPhoto: role.makerPhoto,
+        };
+      }
+    });
+    updateList(newMakerList);
+  }, [makerList]);
 
   return (
     <S.InputRegisterBox $marginBottom={2.8}>
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index e075d5b8..de7b77b8 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -8,9 +8,9 @@ import Manage from "@pages/manage/Manage";
 import ModalTest from "@pages/ModalTest";
 import MyRegisterdShow from "@pages/MyRegisterdShow/MyRegisterdShow";
 import NonMbLookup from "@pages/nonMbLookup/NonMbLookup";
-import Role from "@pages/register/components/RoleLayout";
 import Register from "@pages/register/Register";
 import RegisterMaker from "@pages/register/RegisterMaker";
+import RegisterPage from "@pages/register/RegisterPage";
 import TestPage from "@pages/test/TestPage";
 import ViewBottomSheetTest from "@pages/ViewBottomSheetTest";
 import { createBrowserRouter } from "react-router-dom";

From f465219220ac5a6c66f0d8ec7fe0b2f71170d424 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 13 Jul 2024 21:37:43 +0900
Subject: [PATCH 08/16] =?UTF-8?q?fix:=20narrow=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commons/input/textField/TextField.styled.ts           | 8 ++++----
 src/components/commons/input/textField/TextField.tsx      | 6 +++---
 src/pages/register/Register.tsx                           | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/commons/input/textField/TextField.styled.ts b/src/components/commons/input/textField/TextField.styled.ts
index a27a401a..017c0d87 100644
--- a/src/components/commons/input/textField/TextField.styled.ts
+++ b/src/components/commons/input/textField/TextField.styled.ts
@@ -2,18 +2,18 @@ import { IconTextfiedlDelete } from "@assets/svgs";
 import { Generators } from "@styles/generator";
 import styled from "styled-components";
 
-export const TextFieldLayout = styled.section<{ narrow?: false | true }>`
+export const TextFieldLayout = styled.section<{ $narrow: boolean | undefined }>`
   position: relative;
-  width: ${({ narrow }) => (narrow ? "13.6rem" : "32.7rem")};
+  width: ${({ $narrow }) => ($narrow ? "13.6rem" : "32.7rem")};
 `;
 
 export const TextFieldWrapper = styled.article`
   ${Generators.flexGenerator("row", "center", "center")}
 `;
 
-export const TextFieldInput = styled.input<{ narrow?: false | true }>`
+export const TextFieldInput = styled.input<{ $narrow: boolean | undefined }>`
   width: 100%;
-  height: ${({ narrow }) => (narrow ? "4.2rem" : "4.8rem")};
+  height: ${({ $narrow }) => ($narrow ? "4.2rem" : "4.8rem")};
   padding: 0 1.6rem;
 
   color: ${({ theme }) => theme.colors.gray_0};
diff --git a/src/components/commons/input/textField/TextField.tsx b/src/components/commons/input/textField/TextField.tsx
index e5190856..eed70bc3 100644
--- a/src/components/commons/input/textField/TextField.tsx
+++ b/src/components/commons/input/textField/TextField.tsx
@@ -5,7 +5,7 @@ export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   maxLength?: number;
   placeholder: string;
-  narrow?: false | true;
+  narrow?: boolean;
   unit?: "time" | "ticket" | "amount"; // 단위 : "분", "매", "원"
   filter?: (value: string) => string;
   cap?: false | true;
@@ -71,7 +71,7 @@ const TextField = ({
   };
 
   return (
-    <S.TextFieldLayout narrow={narrow}>
+    <S.TextFieldLayout $narrow={narrow}>
       <S.TextFieldWrapper>
         <S.TextFieldInput
           ref={inputRef}
@@ -80,7 +80,7 @@ const TextField = ({
           onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}
-          narrow={narrow}
+          $narrow={narrow}
           {...rest}
         />
         {!narrow && !unit && value && <S.TextClear onClick={handleClearInput} />}
diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index 4eb4fe47..b760b65a 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -15,7 +15,6 @@ import GenreSelect from "./components/GenreSelect";
 import PosterThumbnail from "./components/PosterThumbnail";
 import Spacing from "@components/commons/spacing/Spacing";
 import { GENRE_LIST } from "./constants/genreList";
-import { Dayjs } from "dayjs";
 import {
   handleImageUpload,
   handleGenreSelect,
@@ -35,7 +34,8 @@ import { IconChecked } from "@assets/svgs";
 import RegisterMaker from "./RegisterMaker";
 
 const Register = () => {
-  const [registerStep, setRegisterStep] = useState(2);
+  const [registerStep, setRegisterStep] = useState(1); // 등록 step 나누기
+  // gigInfo 초기화
   const [gigInfo, setGigInfo] = useState<GigInfo>({
     performanceTitle: "", // 공연명
     genre: "", // 공연 장르
@@ -90,7 +90,7 @@ const Register = () => {
     scheduleList,
   } = gigInfo;
 
-  const [round, setRound] = useState(1); // 회차
+  // const [round, setRound] = useState(1); // 회차
   // const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null); // 선택한 날짜
   const [bankOpen, setBankOpen] = useState(false);
   const [bankInfo, setBankInfo] = useState("");

From 6b73458c84c0b15350889ac00b4dee7c49a251aa Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 13 Jul 2024 21:51:09 +0900
Subject: [PATCH 09/16] =?UTF-8?q?feat:=20header=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index b760b65a..f8c67ca6 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -32,6 +32,8 @@ import { GigInfo } from "./typings/gigInfo";
 import Button from "@components/commons/button/Button";
 import { IconChecked } from "@assets/svgs";
 import RegisterMaker from "./RegisterMaker";
+import { useHeader } from "./../../hooks/useHeader";
+import { NAVIGATION_STATE } from "@constants/navigationState";
 
 const Register = () => {
   const [registerStep, setRegisterStep] = useState(1); // 등록 step 나누기
@@ -121,9 +123,28 @@ const Register = () => {
       ...newInfo,
     }));
   };
-  console.log(registerStep);
   console.log(gigInfo);
 
+  const { setHeader } = useHeader();
+
+  const handleLeftBtn = () => {
+    setRegisterStep((prev) => prev - 1);
+  };
+  const handleRightBtn = () => {
+    alert("오른쪽 버튼 클릭!");
+  };
+  useEffect(() => {
+    const pageTitle =
+      registerStep === 1 ? "공연 등록하기" : registerStep === 2 ? "공연진 상세정보" : "미리보기";
+    setHeader({
+      headerStyle: NAVIGATION_STATE.ICON_TITLE,
+      title: pageTitle,
+      subText: "굿",
+      leftOnClick: handleLeftBtn,
+      rightOnClick: handleRightBtn,
+    });
+  }, [setHeader, registerStep]);
+
   if (registerStep === 1) {
     {
       return (

From 1f76e4a9f1e12eb0155bb1f64ad516a4ad943463 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sun, 14 Jul 2024 07:01:12 +0900
Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=EC=9D=B4=EC=A0=84=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9D=EC=9C=BC=EB=A1=9C=20=EB=8F=8C=EC=95=84=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.tsx               | 24 ++++++---
 src/pages/register/RegisterMaker.tsx          | 50 +++++++++++++++----
 .../register/components/PosterThumbnail.tsx   | 11 ++--
 src/pages/register/components/RoleLayout.tsx  | 14 +++++-
 src/pages/register/components/RoleWrapper.tsx | 14 +++++-
 yarn.lock                                     |  2 +-
 6 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index f8c67ca6..f0cfe82a 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -84,12 +84,15 @@ const Register = () => {
     performanceDescription,
     performanceAttentionNote,
     accountNumber,
+    posterImage,
     performanceTeamName,
     performanceVenue,
     performanceContact,
     ticketPrice,
     totalScheduleCount,
     scheduleList,
+    castList,
+    staffList,
   } = gigInfo;
 
   // const [round, setRound] = useState(1); // 회차
@@ -117,6 +120,7 @@ const Register = () => {
   const handleRegisterStep = () => {
     setRegisterStep((prev) => prev + 1);
   };
+
   const updateGigInfo = (newInfo: Partial<GigInfo>) => {
     setGigInfo((prev) => ({
       ...prev,
@@ -130,18 +134,14 @@ const Register = () => {
   const handleLeftBtn = () => {
     setRegisterStep((prev) => prev - 1);
   };
-  const handleRightBtn = () => {
-    alert("오른쪽 버튼 클릭!");
-  };
+
   useEffect(() => {
     const pageTitle =
       registerStep === 1 ? "공연 등록하기" : registerStep === 2 ? "공연진 상세정보" : "미리보기";
     setHeader({
       headerStyle: NAVIGATION_STATE.ICON_TITLE,
       title: pageTitle,
-      subText: "굿",
       leftOnClick: handleLeftBtn,
-      rightOnClick: handleRightBtn,
     });
   }, [setHeader, registerStep]);
 
@@ -150,7 +150,10 @@ const Register = () => {
       return (
         <>
           <S.RegisterContainer>
-            <PosterThumbnail onImageUpload={(url) => handleImageUpload(url, setGigInfo)} />
+            <PosterThumbnail
+              value={posterImage}
+              onImageUpload={(url) => handleImageUpload(url, setGigInfo)}
+            />
             <S.Divider />
 
             <GenreSelect
@@ -353,7 +356,14 @@ const Register = () => {
   }
 
   if (registerStep === 2) {
-    return <RegisterMaker handleRegisterStep={handleRegisterStep} updateGigInfo={updateGigInfo} />;
+    return (
+      <RegisterMaker
+        castList={castList}
+        staffList={staffList}
+        handleRegisterStep={handleRegisterStep}
+        updateGigInfo={updateGigInfo}
+      />
+    );
   }
 
   return <></>;
diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index 90b6806c..3634b1e8 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -1,17 +1,24 @@
 import Button from "@components/commons/button/Button";
 import RoleLayout from "./components/RoleLayout";
 import * as S from "./Register.styled";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Cast, Staff } from "./typings/gigInfo";
 
 interface RegisterMakerProps {
+  castList: Cast[];
+  staffList: Staff[];
   handleRegisterStep: () => void;
   updateGigInfo: (newInfo: Partial<{ castList: Cast[]; staffList: Staff[] }>) => void;
 }
 
-const RegisterMaker = ({ handleRegisterStep, updateGigInfo }: RegisterMakerProps) => {
-  const [castList, setCastList] = useState<Cast[]>([]);
-  const [staffList, setStaffList] = useState<Staff[]>([]);
+const RegisterMaker = ({
+  castList: prevCastList,
+  staffList: prevStaffList,
+  handleRegisterStep,
+  updateGigInfo,
+}: RegisterMakerProps) => {
+  const [castList, setCastList] = useState<Cast[]>(prevCastList);
+  const [staffList, setStaffList] = useState<Staff[]>(prevStaffList);
 
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
 
@@ -19,12 +26,26 @@ const RegisterMaker = ({ handleRegisterStep, updateGigInfo }: RegisterMakerProps
     const allCastFieldsFilled = castList.every(
       (cast) => cast.castName && cast.castRole && cast.castPhoto
     );
+
     const allStaffFieldsFilled = staffList.every(
       (staff) => staff.staffName && staff.staffRole && staff.staffPhoto
     );
+
     setIsButtonDisabled(
-      !(castList.length === 0 || allCastFieldsFilled) ||
-        !(staffList.length === 0 || allStaffFieldsFilled)
+      !(
+        (castList.length === 1 &&
+          !castList[0].castName &&
+          !castList[0].castRole &&
+          !castList[0].castPhoto) ||
+        allCastFieldsFilled
+      ) ||
+        !(
+          (castList.length === 1 &&
+            !staffList[0].staffName &&
+            !staffList[0].staffRole &&
+            !staffList[0].staffPhoto) ||
+          allStaffFieldsFilled
+        )
     );
   }, [castList, staffList]);
 
@@ -36,16 +57,25 @@ const RegisterMaker = ({ handleRegisterStep, updateGigInfo }: RegisterMakerProps
     }
   };
 
-  const handleList = () => {
+  const handleList = useCallback(() => {
     updateGigInfo({ castList, staffList });
     handleRegisterStep();
-  };
+  }, [castList, staffList, updateGigInfo, handleRegisterStep]);
+
   return (
     <>
       <S.RegisterContainer>
-        <RoleLayout title="출연진" updateList={(list) => handleUpdateList("출연진", list)} />
+        <RoleLayout
+          title="출연진"
+          list={castList}
+          updateList={(list) => handleUpdateList("출연진", list)}
+        />
         <S.Divider />
-        <RoleLayout title="스태프" updateList={(list) => handleUpdateList("스태프", list)} />
+        <RoleLayout
+          title="스태프"
+          list={staffList}
+          updateList={(list) => handleUpdateList("스태프", list)}
+        />
       </S.RegisterContainer>
       <S.FooterContainer>
         <S.FooterDivider />
diff --git a/src/pages/register/components/PosterThumbnail.tsx b/src/pages/register/components/PosterThumbnail.tsx
index a64c6ae3c..828216f8 100644
--- a/src/pages/register/components/PosterThumbnail.tsx
+++ b/src/pages/register/components/PosterThumbnail.tsx
@@ -1,15 +1,20 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import * as S from "../Register.styled";
 import { IconCamera } from "@assets/svgs";
 import Spacing from "@components/commons/spacing/Spacing";
 
 interface PosterThumbnailProps {
+  value?: string | undefined;
   onImageUpload: (imageUrl: string) => void;
 }
 
-const PosterThumbnail = ({ onImageUpload }: PosterThumbnailProps) => {
+const PosterThumbnail = ({ value, onImageUpload }: PosterThumbnailProps) => {
   const [postImg, setPostImg] = useState<File | null>(null);
-  const [previewImg, setPreviewImg] = useState<string | null>(null);
+  const [previewImg, setPreviewImg] = useState<string | null>(value || null);
+
+  useEffect(() => {
+    setPreviewImg(value || null);
+  }, [value]);
 
   const uploadFile = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
diff --git a/src/pages/register/components/RoleLayout.tsx b/src/pages/register/components/RoleLayout.tsx
index 5157d8ed..5602d8dd 100644
--- a/src/pages/register/components/RoleLayout.tsx
+++ b/src/pages/register/components/RoleLayout.tsx
@@ -3,6 +3,7 @@ import * as S from "../Register.styled";
 import Spacing from "@components/commons/spacing/Spacing";
 import { IconRoleAdd } from "@assets/svgs";
 import RoleWrapper from "./RoleWrapper";
+import { Cast, Staff } from "../typings/gigInfo";
 
 interface Role {
   id: number;
@@ -12,12 +13,20 @@ interface Role {
 }
 
 interface RoleLayoutProps {
+  list: Cast[] | Staff[];
   updateList: (list: any[]) => void;
   title: string;
 }
 
-const RoleLayout = ({ updateList, title }: RoleLayoutProps) => {
-  const [makerList, setMakerList] = useState<Role[]>([]);
+const RoleLayout = ({ list, updateList, title }: RoleLayoutProps) => {
+  const [makerList, setMakerList] = useState<Role[]>(
+    list.map((item, index) => ({
+      id: index, // ID 생성
+      makerName: "castName" in item ? item.castName : item.staffName,
+      makerRole: "castRole" in item ? item.castRole : item.staffRole,
+      makerPhoto: "castPhoto" in item ? item.castPhoto : item.staffPhoto,
+    }))
+  );
 
   const handelAddRole = () => {
     setMakerList((prev) => [
@@ -70,6 +79,7 @@ const RoleLayout = ({ updateList, title }: RoleLayoutProps) => {
           <RoleWrapper
             key={role.id}
             id={role.id}
+            role={role}
             removeRole={handleremoveRole}
             onUpdateRole={handleUpdateRole}
           />
diff --git a/src/pages/register/components/RoleWrapper.tsx b/src/pages/register/components/RoleWrapper.tsx
index 7775a708..4195039c 100644
--- a/src/pages/register/components/RoleWrapper.tsx
+++ b/src/pages/register/components/RoleWrapper.tsx
@@ -4,15 +4,23 @@ import TextField from "@components/commons/input/textField/TextField";
 import { IconCamera } from "@assets/svgs";
 import { ChangeEvent, useState } from "react";
 
+interface Role {
+  id: number;
+  makerName: string;
+  makerRole: string;
+  makerPhoto: string;
+}
 interface RoleWrapperProps {
   id: number;
+  role: Role;
   removeRole: (id: number) => void;
   onUpdateRole: (id: number, name: string, value: string) => void;
 }
 
-const RoleWrapper = ({ id, removeRole, onUpdateRole }: RoleWrapperProps) => {
+const RoleWrapper = ({ id, role, removeRole, onUpdateRole }: RoleWrapperProps) => {
+  const { makerName, makerRole, makerPhoto } = role;
   const [postImg, setPostImg] = useState<File | null>(null);
-  const [previewImg, setPreviewImg] = useState<string | null>(null);
+  const [previewImg, setPreviewImg] = useState<string | null>(makerPhoto || null);
 
   const uploadFile = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -56,6 +64,7 @@ const RoleWrapper = ({ id, removeRole, onUpdateRole }: RoleWrapperProps) => {
         <TextField
           type="input"
           name="makerName"
+          value={makerName}
           onChange={handleInputChange}
           narrow={true}
           placeholder="이름"
@@ -63,6 +72,7 @@ const RoleWrapper = ({ id, removeRole, onUpdateRole }: RoleWrapperProps) => {
         <TextField
           type="input"
           name="makerRole"
+          value={makerRole}
           onChange={handleInputChange}
           narrow={true}
           placeholder="역할"
diff --git a/yarn.lock b/yarn.lock
index dd849248..7f9d15e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12098,4 +12098,4 @@ __metadata:
   resolution: "yocto-queue@npm:0.1.0"
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
-  linkType: hard
\ No newline at end of file
+  linkType: hard

From 2775854af82b9d1aa13d2636f0d95d18b332f33e Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sun, 14 Jul 2024 07:11:43 +0900
Subject: [PATCH 11/16] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=A0=20role=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=ED=96=88=EC=9D=84=EB=95=8C=20undefined=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/RegisterMaker.tsx          | 12 ++++++------
 src/pages/register/components/RoleWrapper.tsx |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index 3634b1e8..8b93232b 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -34,16 +34,16 @@ const RegisterMaker = ({
     setIsButtonDisabled(
       !(
         (castList.length === 1 &&
-          !castList[0].castName &&
-          !castList[0].castRole &&
-          !castList[0].castPhoto) ||
+          !castList[0]?.castName &&
+          !castList[0]?.castRole &&
+          !castList[0]?.castPhoto) ||
         allCastFieldsFilled
       ) ||
         !(
           (castList.length === 1 &&
-            !staffList[0].staffName &&
-            !staffList[0].staffRole &&
-            !staffList[0].staffPhoto) ||
+            !staffList[0]?.staffName &&
+            !staffList[0]?.staffRole &&
+            !staffList[0]?.staffPhoto) ||
           allStaffFieldsFilled
         )
     );
diff --git a/src/pages/register/components/RoleWrapper.tsx b/src/pages/register/components/RoleWrapper.tsx
index 4195039c..5d4bfe02 100644
--- a/src/pages/register/components/RoleWrapper.tsx
+++ b/src/pages/register/components/RoleWrapper.tsx
@@ -42,6 +42,7 @@ const RoleWrapper = ({ id, role, removeRole, onUpdateRole }: RoleWrapperProps) =
     const { name, value } = e.target;
     onUpdateRole(id, name, value);
   };
+
   return (
     <S.RoleWrapper>
       <S.FileInputWrapper>

From 8dd6ab7e30bd78b22c5b88bc7628778dc9f268d8 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sun, 14 Jul 2024 07:17:59 +0900
Subject: [PATCH 12/16] =?UTF-8?q?feat:=20=EB=B9=88=20=EA=B0=9D=EC=B2=B4=20?=
 =?UTF-8?q?=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/RegisterMaker.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index 8b93232b..a59fc0de 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -57,10 +57,18 @@ const RegisterMaker = ({
     }
   };
 
-  const handleList = useCallback(() => {
-    updateGigInfo({ castList, staffList });
+  const handleList = () => {
+    // 모든 속성이 비어있는 객체들 필터링
+    const filteredCastList = castList.filter(
+      (cast) => cast.castName || cast.castRole || cast.castPhoto
+    );
+    const filteredStaffList = staffList.filter(
+      (staff) => staff.staffName || staff.staffRole || staff.staffPhoto
+    );
+
+    updateGigInfo({ castList: filteredCastList, staffList: filteredStaffList });
     handleRegisterStep();
-  }, [castList, staffList, updateGigInfo, handleRegisterStep]);
+  };
 
   return (
     <>

From d8d4a16960ea7da9d5cd1859b77216768dce3ee4 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sun, 14 Jul 2024 16:43:20 +0900
Subject: [PATCH 13/16] =?UTF-8?q?delete:=20RegisterPage=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/RegisterPage.tsx | 59 -----------------------------
 1 file changed, 59 deletions(-)
 delete mode 100644 src/pages/register/RegisterPage.tsx

diff --git a/src/pages/register/RegisterPage.tsx b/src/pages/register/RegisterPage.tsx
deleted file mode 100644
index 88a2c9d2..00000000
--- a/src/pages/register/RegisterPage.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useState } from "react";
-import Register from "./Register";
-import RegisterMaker from "./RegisterMaker";
-import { GigInfo } from "./typings/gigInfo";
-
-const RegisterPage = () => {
-  const [registerStep, setRegisterStep] = useState(1);
-  const [gigInfo, setGigInfo] = useState<GigInfo>({
-    performanceTitle: "", // 공연명
-    genre: "", // 공연 장르
-    runningTime: "", // 러닝 타임
-    performanceDescription: "", // 공연 소개
-    performanceAttentionNote: "", // 유의사항
-    bankName: "", // 은행명
-    accountNumber: "", // 계좌번호
-    posterImage: "", // 포스터 이미지 URL
-    performanceTeamName: "", // 공연 팀명
-    performanceVenue: "", // 공연 장소
-    performanceContact: "", // 대표자 연락처
-    performancePeriod: "", // 2023.12.28~2023.12.29
-    ticketPrice: "", // 가격
-    totalScheduleCount: 1, // 총 회차 수
-    scheduleList: [
-      {
-        performanceDate: null, // 공연 일시
-        totalTicketCount: "", // 총 티켓 수
-        scheduleNumber: "FIRST", // 회차 번호
-      },
-    ],
-    castList: [
-      {
-        castName: "", // 이름
-        castRole: "", // 역할
-        castPhoto: "", // 출연진 사진 URL
-      },
-    ],
-    staffList: [
-      {
-        staffName: "", // 이름
-        staffRole: "", // 역할
-        staffPhoto: "", // 스태프 사진 URL
-      },
-    ],
-  });
-
-  const handleRegisterStep = () => {
-    setRegisterStep((prev) => prev + 1);
-  };
-
-  if (registerStep === 1) {
-    return <Register handleRegisterStep={handleRegisterStep} handleGigInfo={handleGigInfo} />;
-  }
-  if (registerStep === 2) {
-    return <RegisterMaker handleRegisterStep={handleRegisterStep} handleGigInfo={handleGigInfo} />;
-  }
-  return <>미리보기</>;
-};
-
-export default RegisterPage;

From 5001bb630d70952b82e936a2fb3d1f18237d8ad4 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Mon, 15 Jul 2024 00:17:54 +0900
Subject: [PATCH 14/16] =?UTF-8?q?fix:=20=EC=97=AD=ED=95=A0=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.tsx      | 4 +---
 src/pages/register/RegisterMaker.tsx | 7 ++++---
 src/routes/Router.tsx                | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index f0cfe82a..5db07ae5 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -353,9 +353,7 @@ const Register = () => {
         </>
       );
     }
-  }
-
-  if (registerStep === 2) {
+  } else if (registerStep === 2) {
     return (
       <RegisterMaker
         castList={castList}
diff --git a/src/pages/register/RegisterMaker.tsx b/src/pages/register/RegisterMaker.tsx
index a59fc0de..184301c5 100644
--- a/src/pages/register/RegisterMaker.tsx
+++ b/src/pages/register/RegisterMaker.tsx
@@ -1,7 +1,7 @@
 import Button from "@components/commons/button/Button";
 import RoleLayout from "./components/RoleLayout";
 import * as S from "./Register.styled";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Cast, Staff } from "./typings/gigInfo";
 
 interface RegisterMakerProps {
@@ -33,14 +33,14 @@ const RegisterMaker = ({
 
     setIsButtonDisabled(
       !(
-        (castList.length === 1 &&
+        (castList.length <= 1 &&
           !castList[0]?.castName &&
           !castList[0]?.castRole &&
           !castList[0]?.castPhoto) ||
         allCastFieldsFilled
       ) ||
         !(
-          (castList.length === 1 &&
+          (castList.length <= 1 &&
             !staffList[0]?.staffName &&
             !staffList[0]?.staffRole &&
             !staffList[0]?.staffPhoto) ||
@@ -55,6 +55,7 @@ const RegisterMaker = ({
     } else if (title === "스태프") {
       setStaffList(updatedList as Staff[]);
     }
+    updateGigInfo({ castList, staffList });
   };
 
   const handleList = () => {
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index 4939cf7b..64dc1490 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -25,7 +25,7 @@ const router = createBrowserRouter([
       { path: "a", element: <Apage /> },
       { path: "lookup", element: <Lookup /> },
       { path: "testpage", element: <TestPage /> },
-      { path: "register", element: <Register /> },
+      { path: "gig-register", element: <Register /> },
       { path: "register-complete", element: <RegisterComplete /> },
       { path: "gig/:performanceId", element: <Gig /> },
       { path: "manage", element: <Manage /> },

From d805152b4caa53d0f3f111f9323b793195b84473 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Mon, 15 Jul 2024 00:37:08 +0900
Subject: [PATCH 15/16] =?UTF-8?q?feat:=20=EB=93=B1=EB=A1=9D=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EC=9D=B4=ED=83=88=20=ED=8C=9D=EC=97=85=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index 5db07ae5..a2166bc4 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -34,9 +34,12 @@ import { IconChecked } from "@assets/svgs";
 import RegisterMaker from "./RegisterMaker";
 import { useHeader } from "./../../hooks/useHeader";
 import { NAVIGATION_STATE } from "@constants/navigationState";
+import useModal from "@hooks/useModal";
+import { useNavigate } from "react-router-dom";
 
 const Register = () => {
   const [registerStep, setRegisterStep] = useState(1); // 등록 step 나누기
+  const { openConfirm } = useModal();
   // gigInfo 초기화
   const [gigInfo, setGigInfo] = useState<GigInfo>({
     performanceTitle: "", // 공연명
@@ -101,6 +104,7 @@ const Register = () => {
   const [bankInfo, setBankInfo] = useState("");
   const [isChecked, setIsChecked] = useState(false);
   const [isFree, setIsFree] = useState(false);
+  const navigate = useNavigate();
 
   // 약관 동의
   const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -132,7 +136,22 @@ const Register = () => {
   const { setHeader } = useHeader();
 
   const handleLeftBtn = () => {
-    setRegisterStep((prev) => prev - 1);
+    if (registerStep === 1) {
+      openConfirm({
+        title: "정말 나가시겠습니까?",
+        subTitle: "지금 나가실 경우 작성하신 내용이 저장되지 않습니다.",
+        okText: "작성할게요",
+        okCallback: () => {
+          setRegisterStep(1);
+        },
+        noText: "나갈게요",
+        noCallback: () => {
+          navigate("/main");
+        },
+      });
+    } else {
+      setRegisterStep((prev) => prev - 1);
+    }
   };
 
   useEffect(() => {

From 79200389f57f5eba8bf40255da1035a3aff1f750 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Mon, 15 Jul 2024 06:20:54 +0900
Subject: [PATCH 16/16] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A6=84=20=EB=84=A4?=
 =?UTF-8?q?=EC=9E=84=ED=95=84=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/components/RoleWrapper.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/register/components/RoleWrapper.tsx b/src/pages/register/components/RoleWrapper.tsx
index 5d4bfe02..3c70d91b 100644
--- a/src/pages/register/components/RoleWrapper.tsx
+++ b/src/pages/register/components/RoleWrapper.tsx
@@ -3,6 +3,7 @@ import * as S from "../Register.styled";
 import TextField from "@components/commons/input/textField/TextField";
 import { IconCamera } from "@assets/svgs";
 import { ChangeEvent, useState } from "react";
+import { nameFilter } from "@utils/useInputFilter";
 
 interface Role {
   id: number;
@@ -67,6 +68,7 @@ const RoleWrapper = ({ id, role, removeRole, onUpdateRole }: RoleWrapperProps) =
           name="makerName"
           value={makerName}
           onChange={handleInputChange}
+          filter={nameFilter}
           narrow={true}
           placeholder="이름"
         />