From 83fe383c5f538f94ea255bba451256a993f4e69a Mon Sep 17 00:00:00 2001
From: Anhye0n <49294599+Anhye0n@users.noreply.github.com>
Date: Fri, 9 Aug 2024 06:33:16 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=95=99=EB=B2=88=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95=20(#82)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DeleteAccount/DeleteAccountForm.tsx       | 76 ++++++++++---------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/components/DeleteAccount/DeleteAccountForm.tsx b/src/components/DeleteAccount/DeleteAccountForm.tsx
index fa0087e..430fbe2 100644
--- 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,12 +39,12 @@ 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>
@@ -46,54 +52,54 @@ function DeleteAccountForm() {
 }
 
 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;