[Feat/#115] 공연진 정보 등록 뷰 구현

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;

src/assets/svgs/index.tsx

@@ -32,6 +32,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";

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`
+export const TextFieldInput = styled.input<{ $narrow: boolean | undefined }>`
   width: 100%;
-  height: 4.8rem;
+  height: ${({ $narrow }) => ($narrow ? "4.2rem" : "4.8rem")};
   padding: 0 1.6rem;
 
   color: ${({ theme }) => theme.colors.gray_0};

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

@@ -6,7 +6,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;
@@ -82,7 +82,7 @@ const TextField = ({
   };
 
   return (
-    <S.TextFieldLayout narrow={narrow}>
+    <S.TextFieldLayout $narrow={narrow}>
       <S.TextFieldWrapper>
         <S.TextFieldInput
           ref={inputRef}
@@ -91,6 +91,7 @@ const TextField = ({
           onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}
+          $narrow={narrow}
           type={isPasswordVisible ? "text" : "password"} // 비밀번호 보이기 여부를 위해 타입에 조건을 걸음
           {...rest}
         />

src/pages/register/Register.styled.ts

@@ -105,6 +105,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;
 
@@ -116,25 +121,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;
@@ -184,6 +189,43 @@ export const TimePickerWrapper = styled.section`
   gap: 1.6rem;
 `;
 
+export const RoleListWrapper = styled.section`
+  display: flex;
+  gap: 1.6rem;
+  width: calc(100% + 4.8rem);
+  margin-left: -2.4rem;
+  padding: 0 2.4rem;
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const RoleAddBtn = styled.section`
+  ${Generators.flexGenerator()}
+  flex-shrink: 0;
+  width: 13.6rem;
+  height: 26.6rem;
+
+  background: ${({ theme }) => theme.colors.gray_900};
+  border: 1px dashed ${({ theme }) => theme.colors.gray_700};
+  border-radius: 6px;
+`;
+
+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;
+`;
+
 // 완료 페이지
 export const RegisterCompleteLayout = styled.section`
   width: 37.4rem;