Merge pull request #321 from Nexters/fix/qa-1

fix: 사용자 코드 수정 대응 QA

Author: alstn2468

apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts

@@ -94,12 +94,6 @@ const TextFieldWrap = styled.div`
   }
 `;
 
-const HashTag = styled.span`
-  color: ${({ theme }) => theme.palette.grey.g90};
-  line-height: 24px;
-  padding-right: 4px;
-`;
-
 const Input = styled.input`
   width: 100%;
   line-height: 24px;
@@ -247,7 +241,6 @@ export default {
   ShowInfoFormLabel,
   InputWrapper,
   Handle,
-  HashTag,
   Input,
   Row,
   TrashCanButton,

apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx

@@ -75,22 +75,19 @@ const ShowCastInfoMemberRow = forwardRef<HTMLDivElement, ShowCastInfoMemberRowPr
                       </Styled.RemoveButton>
                     </>
                   ) : (
-                    <>
-                      <Styled.HashTag>#</Styled.HashTag>
-                      <Styled.Input
-                        placeholder="ID"
-                        required
-                        onChange={(e) => {
-                          const nextValue = replaceUserCode(e.target.value);
-                          onChange(nextValue);
-                        }}
-                        onBlur={async (event) => {
-                          onBlur();
-                          onSetUser?.(event.target.value);
-                        }}
-                        value={value ?? ''}
-                      />
-                    </>
+                    <Styled.Input
+                      placeholder="ID"
+                      required
+                      onChange={(e) => {
+                        const nextValue = replaceUserCode(e.target.value);
+                        onChange(nextValue);
+                      }}
+                      onBlur={async (event) => {
+                        onBlur();
+                        onSetUser?.(event.target.value);
+                      }}
+                      value={value ?? ''}
+                    />
                   )}
                 </Styled.InputWrapper>
                 {isError && <Styled.ErrorMessage>필수 입력사항입니다.</Styled.ErrorMessage>}

apps/admin/src/components/ShowSettingDialogContent/components/HostInputForm/HostInputForm.styles.ts

@@ -31,12 +31,6 @@ const InputWrapper = styled.div<InputWrapperProps>`
   align-items: center;
 `;
 
-const HashTag = styled.span`
-  color: ${({ theme }) => theme.palette.grey.g90};
-  line-height: 24px;
-  padding-right: 4px;
-`;
-
 const Input = styled.input<InputProps>`
   width: ${({ value }) => (value ? 'calc(100% - 80px)' : '100%')};
   line-height: 24px;
@@ -128,7 +122,6 @@ const InviteButton = styled(Button)`
 export default {
   Form,
   InputWrapper,
-  HashTag,
   Input,
   Dropdown,
   DropdownList,

apps/admin/src/components/ShowSettingDialogContent/components/HostInputForm/index.tsx

@@ -72,7 +72,6 @@ const HostInputForm = ({ showId }: HostInputFormProps) => {
   return (
     <Styled.Form onSubmit={onSubmit}>
       <Styled.InputWrapper text={memberId}>
-        <Styled.HashTag>#</Styled.HashTag>
         <Styled.Input
           placeholder="그룹원의 ID를 입력해 주세요"
           value={memberId}

apps/admin/src/utils/replace.ts

@@ -1,6 +1,4 @@
+// 20자 이내의 ID 생성 가능 (영어 소문자, 숫자, _ 사용 가능)
 export const replaceUserCode = (text: string) => {
-  return text
-    .replace(/[^a-z0-9]/gi, '')
-    .toUpperCase()
-    .slice(0, 8);
+  return text.replace(/[^a-z0-9_]/g, '').slice(0, 20);
 };