Merge pull request #216 from Nexters/fix/remove-button

fix: 삭제 버튼 클릭시 값 undefined로 리셋
Nexters · Oct 11, 2024 · c708537 · c708537
2 parents ee974d5 + d9bd46e
commit c708537
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts
@@ -24,7 +24,7 @@ const ShowInfoFormLabel = styled.span<ShowInfoFormLabelProps>`
     margin-left: 2px;
   }
 
-  &:first-child {
+  &:first-of-type {
     padding-top: 8px;
   }
 `;

diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx
@@ -56,9 +56,10 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
       : [{ userCode: false, roleName: false }],
   );
 
+  const memberFieldState = getFieldState('members');
   const disabled =
     !getValues('name') ||
-    (getFieldState('members').isTouched &&
+    ((memberFieldState.isDirty || memberFieldState.isTouched) &&
       controlledFields.some(
         ({ userImgPath, userNickname, roleName }, index) =>
           (isMemberFieldBlurred[index].roleName || isMemberFieldBlurred[index].userCode) &&
@@ -94,16 +95,17 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
       />
       <Styled.ShowInfoFormLabel>팀원</Styled.ShowInfoFormLabel>
       <Styled.MemberList>
-        {fields.map((field, index) => (
+        {controlledFields.map((field, index) => (
           <Styled.Row key={field._id}>
             <Controller
               control={control}
               defaultValue={field.userCode}
-              render={({ field: { onChange, onBlur, value } }) => {
+              render={({ field: { onChange, onBlur } }) => {
+                const value = field.userCode;
                 const isError = Boolean(
-                  isMemberFieldBlurred[index].userCode &&
-                    value &&
-                    (!field.userImgPath || !field.userNickname),
+                  isMemberFieldBlurred[index].userCode
+                    ? !value || !field.userImgPath || !field.userNickname
+                    : false,
                 );
                 return (
                   <Styled.FieldWrap>
@@ -120,7 +122,15 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
                           <Styled.Username>{field.userNickname}</Styled.Username>
                           <Styled.RemoveButton
                             onClick={() => {
-                              update(index, { roleName: field.roleName });
+                              onChange(undefined);
+                              setIsMemberFieldBlurred((prev) => {
+                                const nextMemberFieldBlurred = [...prev];
+                                nextMemberFieldBlurred[index].userCode = true;
+                                return nextMemberFieldBlurred;
+                              });
+                              update(index, {
+                                roleName: field.roleName,
+                              });
                             }}
                           >
                             <ClearIcon />
@@ -180,7 +190,8 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
               rules={{
                 required: true,
               }}
-              render={({ field: { onChange, onBlur, value } }) => {
+              render={({ field: { onChange, onBlur } }) => {
+                const value = field.roleName;
                 const isError = isMemberFieldBlurred[index].roleName && !value;
                 return (
                   <Styled.FieldWrap>