fix: 공통 컴포넌트 수정

**DialogButton**
form 안에서 사용시 버튼이 submit으로 기본적으로 동작함.
- 타입을 button으로 수정
**HistoryBackButton**
svg 아이콘 모양이 이상함
- figma에서 export 해서 다시 붙여넣어 수정
**UserInviteDialog**
마찬가지로 버튼 type 수정
**UserInviteList**
버튼 type 수정 및 list에 key 값 할당

Author: gihwan-dev

src/components/common/DialogButton.tsx

@@ -25,7 +25,7 @@ function DialogButton({ classname, name, title, desc, children }: Props) {
 
   return (
     <div>
-      <button className={classname} onClick={() => openModal(dialogRef)}>
+      <button type="button" className={classname} onClick={() => openModal(dialogRef)}>
         {name}
       </button>
       <Dialog ref={dialogRef} title={title} desc={desc}>

src/components/common/HistoryBackButton.tsx

@@ -8,20 +8,14 @@ const HistoryBackButton: React.FC = () => {
   };
 
   return (
-    <div className="mr-auto w-3 md:w-4">
-      <svg
-        onClick={handleBack}
-        className={'shrink-0'}
-        width="100%"
-        height="100%"
-        viewBox="0 0 256 512"
-        fill="#429400"
-        preserveAspectRatio="xMinYMin meet"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z" />
+    <button type="button" onClick={handleBack}>
+      <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10.7 15.1595C11.6989 15.7893 13 15.0714 13 13.8907L13 2.10951C13 0.928727 11.6989 0.21091 10.7 0.840621L1.35638 6.73119C0.422984 7.31964 0.422986 8.68052 1.35638 9.26897L10.7 15.1595Z"
+          fill="#429400"
+        />
       </svg>
-    </div>
+    </button>
   );
 };
 

src/components/common/UserInviteDialog.tsx

@@ -20,7 +20,7 @@ const UserInvite: FC = () => {
       }
       setList(
         nickNames.map(({ user_nickname, id }) => {
-          return <UserInviteList user_nickname={user_nickname} id={id} />;
+          return <UserInviteList user_nickname={user_nickname} id={id} key={id + '-UserInviteList'} />;
         }),
       );
       return list;
@@ -31,7 +31,7 @@ const UserInvite: FC = () => {
     <div>
       <div className="flex items-end">
         <InputForm title={'닉네임으로 검색하기'} placeholder={'닉네임을 입력하세요'} hint={''} onChange={onChange} />
-        <button className="btn btn-outline btn-primary" onClick={onSearchClick}>
+        <button type="button" className="btn btn-outline btn-primary" onClick={onSearchClick}>
           <IconSearch />
         </button>
       </div>

src/components/common/UserInviteList.tsx

@@ -9,7 +9,7 @@ interface Props {
 const UserInviteList: FC<Props> = ({ user_nickname, id }) => {
   return (
     <li key={id} className="border-b">
-      <button className="ju btn block flex w-full justify-between border-none bg-transparent" onClick={onClick}>
+      <button type="button" className="ju btn flex w-full justify-between border-none bg-transparent" onClick={onClick}>
         {user_nickname}
         <IconPlus />
       </button>