fix: 학번 타입 에러 수정 (#82)

tutorial-sejong · Aug 8, 2024 · 83fe383 · 83fe383
1 parent eaf84fc
commit 83fe383
Showing 1 changed file with 41 additions and 35 deletions.
diff --git a/src/components/DeleteAccount/DeleteAccountForm.tsx b/src/components/DeleteAccount/DeleteAccountForm.tsx
@@ -4,20 +4,26 @@ import {useNavigate} from 'react-router-dom';
 import {withdrawal} from '@/apis/api/auth';
 import FormInput from '@components/LoginForm/FormInput.tsx';
 
+export type setType = string | number | undefined;
+
 function DeleteAccountForm() {
-  const [id, setId] = useState('');
+  const [id, setId] = useState<setType>('');
   const [error, setError] = useState<string | null>(null);
 
   const navigate = useNavigate();
 
   const handleDelete = async () => {
-    if (id.length < 11) {
+    if (typeof id === 'undefined') {
+      return;
+    }
+
+    if (id.toString().length < 11) {
       setError('11자리 이상의 임의 학번을 입력해주세요!');
       return;
     }
 
     try {
-      const response = await withdrawal(id);
+      const response = await withdrawal(id.toString());
       console.log(response);
       console.log('Withdrawal successful');
 
@@ -33,67 +39,67 @@ function DeleteAccountForm() {
       <InputContainer>
         <InputBox>
           <LabelWrap>학번</LabelWrap>
-          <FormInput value={id} setValue={setId} type='number' />
+          <FormInput value={id} setValue={setId} type="number" />
         </InputBox>
         <FindWrap onClick={() => navigate('/login')}>로그인 페이지</FindWrap>
       </InputContainer>
       {error && <ErrorMessage>{error}</ErrorMessage>}
-      <LoginBtnWrap onClick={handleDelete} type='button'>
+      <LoginBtnWrap onClick={handleDelete} type="button">
         제거
       </LoginBtnWrap>
     </FormContainer>
   );
 }
 
 const FormContainer = styled.div`
-  padding: 1.5rem 4rem;
-  background-color: ${props => props.theme.colors.white};
-  border-radius: 0.3rem;
-  margin-bottom: 2rem;
+    padding: 1.5rem 4rem;
+    background-color: ${props => props.theme.colors.white};
+    border-radius: 0.3rem;
+    margin-bottom: 2rem;
 `;
 
 const InputContainer = styled.div`
-  margin-bottom: 2.5rem;
+    margin-bottom: 2.5rem;
 `;
 
 const InputBox = styled.div`
-  margin-top: 2rem;
+    margin-top: 2rem;
 `;
 
 const LabelWrap = styled.div`
-  ${props => props.theme.texts.loginContent};
-  margin-bottom: 0.7rem;
+    ${props => props.theme.texts.loginContent};
+    margin-bottom: 0.7rem;
 `;
 
 const LoginBtnWrap = styled.button`
-  width: 100%;
-  height: 5rem;
-  background-color: ${props => props.theme.colors.secondary};
-  border: none;
-  border-radius: 5rem;
-  color: ${props => props.theme.colors.white};
-  font-size: 1.7rem;
-  font-weight: 700;
-  box-shadow: 0px 4px 5px lightgray;
-  margin-bottom: 2rem;
-
-  &:hover {
-    background-color: #c3002fc7;
-  }
+    width: 100%;
+    height: 5rem;
+    background-color: ${props => props.theme.colors.secondary};
+    border: none;
+    border-radius: 5rem;
+    color: ${props => props.theme.colors.white};
+    font-size: 1.7rem;
+    font-weight: 700;
+    box-shadow: 0px 4px 5px lightgray;
+    margin-bottom: 2rem;
+
+    &:hover {
+        background-color: #c3002fc7;
+    }
 `;
 
 const FindWrap = styled.div`
-  ${props => props.theme.texts.tableTitle};
-  color: ${props => props.theme.colors.neutral4};
-  float: inline-end;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+    ${props => props.theme.texts.tableTitle};
+    color: ${props => props.theme.colors.neutral4};
+    float: inline-end;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
 `;
 
 const ErrorMessage = styled.div`
-  color: red;
-  margin-bottom: 1rem;
-  text-align: center;
+    color: red;
+    margin-bottom: 1rem;
+    text-align: center;
 `;
 
 export default DeleteAccountForm;