[Feat/#102] 공연 정보 입력 뷰 구현

src/assets/svgs/IconCamera.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconCamera = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
+    <path
+      fill="#626262"
+      d="M24.462 8.609H21.53l-1.442-2.222a.86.86 0 0 0-.305-.284.8.8 0 0 0-.398-.103h-6.77a.8.8 0 0 0-.399.103.86.86 0 0 0-.304.284l-1.443 2.222H7.54c-.674 0-1.32.275-1.795.764A2.65 2.65 0 0 0 5 11.217v12.174c0 .692.267 1.356.744 1.845.476.49 1.121.764 1.794.764h16.924c.673 0 1.318-.275 1.794-.764.477-.49.744-1.153.744-1.845V11.217c0-.692-.267-1.355-.744-1.844a2.5 2.5 0 0 0-1.794-.764m.846 14.782c0 .23-.09.452-.248.615a.84.84 0 0 1-.598.255H7.538a.84.84 0 0 1-.598-.255.88.88 0 0 1-.248-.615V11.217c0-.23.09-.451.248-.615a.84.84 0 0 1 .598-.254h3.385c.14 0 .277-.035.4-.103a.85.85 0 0 0 .304-.284l1.441-2.222h5.863l1.441 2.222c.078.119.183.217.305.284.123.068.26.103.4.103h3.384c.225 0 .44.091.599.254a.88.88 0 0 1 .248.615zM16 12.087c-.92 0-1.82.28-2.585.806a4.76 4.76 0 0 0-1.715 2.146 4.9 4.9 0 0 0-.264 2.764c.18.927.622 1.78 1.273 2.448a4.6 4.6 0 0 0 2.383 1.31c.903.184 1.839.09 2.689-.273a4.7 4.7 0 0 0 2.089-1.761 4.9 4.9 0 0 0 .784-2.657 4.86 4.86 0 0 0-1.365-3.38A4.6 4.6 0 0 0 16 12.086m0 7.826a2.9 2.9 0 0 1-1.645-.513 3.03 3.03 0 0 1-1.091-1.366 3.1 3.1 0 0 1-.169-1.758 3.07 3.07 0 0 1 .81-1.559 2.94 2.94 0 0 1 1.517-.832 2.9 2.9 0 0 1 1.711.173 3 3 0 0 1 1.33 1.12c.325.501.498 1.09.498 1.692 0 .807-.311 1.58-.867 2.152a2.92 2.92 0 0 1-2.094.891"
+    />
+  </svg>
+);
+export default SvgIconCamera;

src/assets/svgs/IconChecked.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconChecked = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18" {...props}>
+    <rect width={18} height={18} fill="#FB247F" rx={2} />
+    <path
+      fill="#fff"
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={0.27}
+      d="M14.09 5.634a.585.585 0 0 0-.881-.77l-5.888 6.729-2.258-2.258a.585.585 0 1 0-.827.827l2.7 2.7a.585.585 0 0 0 .853-.028z"
+    />
+  </svg>
+);
+export default SvgIconChecked;

src/assets/svgs/IconLargeBand.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconLargeBand = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
+    <path d="m20.64 27.565-5.28 3.155V8.115l5.28-3.155z" />
+    <path d="m27.726 20.48 3.155-5.28H8.276L5.12 20.48z" />
+    <path d="M31.36 27.68 7.842 4H.48L24 27.68z" />
+  </svg>
+);
+export default SvgIconLargeBand;

src/assets/svgs/IconLargeDance.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconLargeDance = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
+    <g>
+      <path d="M2.941 27.914 22.055 4h7.485L10.426 27.914zM8.286 15.957 17.84 4h-7.483L.8 15.957zM23.6 15.957l-9.557 11.957h7.485l9.557-11.957z" />
+    </g>
+  </svg>
+);
+export default SvgIconLargeDance;

src/assets/svgs/IconLargeEtc.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconLargeEtc = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
+    <g clipPath="url(#icon_large_etc_svg__a)">
+      <path d="M3.8 15.84h12.202l-1.877 12.32H1.922zM28.066 15.84H16.002l1.856-12h12.064z" />
+    </g>
+    <defs>
+      <clipPath id="icon_large_etc_svg__a">
+        <path d="M0 0h32v32H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgIconLargeEtc;

src/assets/svgs/IconLargeMusical.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconLargeMusical = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
+    <path
+      fillRule="evenodd"
+      d="M28 28.16H15.53v-7.793H7.737V10.235H3.84V4h6.235v3.897h10.131v7.794H28z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIconLargeMusical;

src/assets/svgs/IconPhotoDelete.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconPhotoDelete = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <circle cx={12} cy={12} r={9} fill="#FF006B" />
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m9 15 3-3 3 3m0-6-3 3-3-3"
+    />
+  </svg>
+);
+export default SvgIconPhotoDelete;

src/assets/svgs/index.tsx

@@ -7,7 +7,9 @@ export { default as IconArrowRight } from "./IconArrowRight";
 export { default as IconArrowUp } from "./IconArrowUp";
 export { default as IconBnk } from "./IconBnk";
 export { default as IconCalendar } from "./IconCalendar";
+export { default as IconCamera } from "./IconCamera";
 export { default as IconCheck } from "./IconCheck";
+export { default as IconChecked } from "./IconChecked";
 export { default as IconCheckboxSelectedOn } from "./IconCheckboxSelectedOn";
 export { default as IconCheckboxUnselectedOn } from "./IconCheckboxUnselectedOn";
 export { default as IconChevronBack } from "./IconChevronBack";
@@ -18,9 +20,14 @@ export { default as IconIbk } from "./IconIbk";
 export { default as IconIm } from "./IconIm";
 export { default as IconKabank } from "./IconKabank";
 export { default as IconKb } from "./IconKb";
+export { default as IconLargeBand } from "./IconLargeBand";
+export { default as IconLargeDance } from "./IconLargeDance";
+export { default as IconLargeEtc } from "./IconLargeEtc";
+export { default as IconLargeMusical } from "./IconLargeMusical";
 export { default as IconLogo } from "./IconLogo";
 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 IconSaemauel } from "./IconSaemauel";
 export { default as IconSc } from "./IconSc";

src/components/commons/bank/Bank.styled.ts

@@ -87,9 +87,10 @@ export const ToggleIcon = styled(SvgIconArrowDown)`
 // InputAccountWrapper
 export const InputAccountWrapper = styled.section`
   width: 100%;
+  margin-top: 2.4rem;
 `;
 
 export const InputAccountLabel = styled.label`
   color: ${({ theme }) => theme.colors.white};
-  ${({ theme }) => theme.fonts["body1-normal-semi"]}
+  ${({ theme }) => theme.fonts.heading4}
 `;

src/components/commons/bank/bottomSheet/BankBottomSheet.tsx

@@ -16,9 +16,9 @@ const BankBottomSheet = ({ value, onBankClick, onOutClick }: BankBottomSheetProp
         <S.BankTitle>은행을 선택해주세요</S.BankTitle>
         <Spacing marginBottom={"3.2"} />
         <S.BankWrapper>
-          {BANK_LIST.map((bank, index) => {
+          {BANK_LIST.map((bank) => {
             return (
-              <BankBtn key={index} onClick={onBankClick} icon={<bank.bankImg />}>
+              <BankBtn key={bank.id} onClick={() => onBankClick(bank.name)} icon={<bank.bankImg />}>
                 {bank.name}
               </BankBtn>
             );

src/components/commons/input/textArea/TextArea.styled.ts

@@ -10,7 +10,7 @@ export const TextAreaInput = styled.textarea`
   ${Generators.flexGenerator("row", "center", "center")}
   width: 100%;
   height: 12.9rem;
-  padding: 1.8rem;
+  padding: 1.8rem 1.2rem;
 
   color: ${({ theme }) => theme.colors.gray_0};
 

src/components/commons/input/textArea/TextArea.tsx

@@ -9,6 +9,7 @@ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
 
 const TextArea = ({ value, onChange, maxLength, placeholder, ...rest }: TextAreaProps) => {
   const handleOnInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const inputName = e.target.name;
     let inputValue = e.target.value;
     if (maxLength && inputValue.length > maxLength) {
       inputValue = inputValue.slice(0, maxLength);
@@ -18,6 +19,7 @@ const TextArea = ({ value, onChange, maxLength, placeholder, ...rest }: TextArea
       ...e,
       target: {
         ...e.target,
+        name: inputName,
         value: inputValue,
       },
     } as ChangeEvent<HTMLTextAreaElement>;