Merge pull request #218 from Nexters/develop

[운영배포] 식별 코드 제거 되지 않는 이슈 및 인풋 스타일 수정
Nexters · Oct 11, 2024 · 8702b9d · 8702b9d
2 parents e85030c + 82572b0
commit 8702b9d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts
@@ -6,7 +6,6 @@ interface ShowInfoFormLabelProps {
 }
 
 interface InputWrapperProps {
-  text: string;
   isError?: boolean;
 }
 
@@ -24,7 +23,7 @@ const ShowInfoFormLabel = styled.span<ShowInfoFormLabelProps>`
     margin-left: 2px;
   }
 
-  &:first-child {
+  &:first-of-type {
     padding-top: 8px;
   }
 `;
@@ -46,12 +45,7 @@ const FieldWrap = styled.div`
 const InputWrapper = styled.div<InputWrapperProps>`
   ${({ theme }) => theme.typo.b3};
   border: 1px solid
-    ${({ text, theme, isError }) =>
-      isError
-        ? theme.palette.status.error
-        : text
-          ? theme.palette.grey.g90
-          : theme.palette.grey.g20};
+    ${({ theme, isError }) => (isError ? theme.palette.status.error : theme.palette.grey.g20)};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   padding: 8px 12px;
@@ -61,6 +55,12 @@ const InputWrapper = styled.div<InputWrapperProps>`
   display: flex;
   align-items: center;
   width: 100%;
+  transition: border-color 0.2s ease-in-out;
+
+  &:focus-within {
+    border-color: ${({ theme, isError }) =>
+      isError ? theme.palette.status.error : theme.palette.grey.g70};
+  }
 `;
 
 const TextFieldWrap = styled.div`

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,20 +95,21 @@ 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>
-                    <Styled.InputWrapper text={value ?? ''} isError={isError}>
+                    <Styled.InputWrapper isError={isError}>
                       {field.userImgPath && field.userNickname ? (
                         <>
                           <Styled.UserImage
@@ -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,14 +190,12 @@ 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>
-                    <Styled.InputWrapper
-                      text={value ?? ''}
-                      isError={isMemberFieldBlurred[index].roleName && !value}
-                    >
+                    <Styled.InputWrapper isError={isMemberFieldBlurred[index].roleName && !value}>
                       <Styled.Input
                         placeholder="역할"
                         required