Merge pull request #88 from oodd-team/feat/OD-137

[OD-137] accountCancel 페이지 UI 수정 및 기타

Author: gustn99

src/pages/AccountCancel/index.tsx

@@ -10,48 +10,61 @@ import back from '../../assets/arrow/left.svg';
 
 import BottomButton from '../../components/BottomButton';
 import { patchUserWithdrawApi } from '../../apis/user';
-
+import Modal from '../../components/Modal'; 
 
 const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
+	const [modalContent, setModalContent] = useState<string | null>(null); 
+	const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 	const navigate = useNavigate();
 
 	const handleCheckboxChange = () => {
 		setIsChecked(!isChecked);
 	};
 
+	const handleModalClose = () => {
+		setIsModalVisible(false);
+		setModalContent(null);
+	};
+
 	const handleDeleteAccount = async () => {
 		try {
 			if (!isChecked) {
-				alert('탈퇴 안내사항에 동의해야 합니다.');
+				setModalContent('탈퇴 안내사항에 동의해야 합니다.');
+				setIsModalVisible(true);
 				return;
 			}
 
 			const storedUserId = Number(localStorage.getItem('my_id'));
 			const token = localStorage.getItem('new_jwt_token');
 
 			if (!storedUserId || !token) {
+				setModalContent('사용자 정보를 찾을 수 없습니다.');
+				setIsModalVisible(true);
 				return;
 			}
 
 			// API 요청
 			const response = await patchUserWithdrawApi(storedUserId);
 
-			// 요청이 성공했는지 확인
 			if (response.isSuccess) {
-				// 성공 메시지 출력
-				alert('계정이 성공적으로 삭제되었습니다.');
+				setModalContent('계정이 성공적으로 삭제되었습니다.');
+				setIsModalVisible(true);
 
 				// 계정 삭제 시 localStorage에서 사용자 정보 제거
 				localStorage.clear();
+
+				setTimeout(() => {
+					navigate('/login'); 
+				}, 2000); 
 			} else {
-				// 요청 실패 시 오류 메시지 출력
-				console.error('API Error:', response.code || '알 수 없는 오류가 발생했습니다.');
-				alert(response.code || 'Failed to delete account');
+				setModalContent(response.code || '알 수 없는 오류가 발생했습니다.');
+				setIsModalVisible(true);
 			}
 		} catch (error) {
 			console.error('계정 삭제하는데 오류남:', error);
-			alert('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.');
+			setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.');
+			setIsModalVisible(true);
 		}
 	};
 
@@ -77,16 +90,29 @@ const AccountCancel: React.FC = () => {
 				</Text>
 				<InfoBox>
 					<InfoItem as="div">
-						<StyledText as="div" $textTheme={{ style: 'body1-medium', lineHeight: 2 }} color={theme.colors.black}>
-							지금까지 OODD를 이용해주셔서 감사합니다!
-						</StyledText>
+					<StyledText
+						as="div"
+						$textTheme={{ style: 'body1-medium', lineHeight: 2 }}
+						color={theme.colors.black}
+						style={{ whiteSpace: 'nowrap' }} // 줄 바꿈 방지
+					>
+						지금까지 OODD를 이용해주셔서 감사합니다!
+					</StyledText>
+
 					</InfoItem>
 				</InfoBox>
 				<CheckboxWrapper as="div">
-					<input type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
+					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+					<input
+						type="checkbox"
+						checked={isChecked}
+						onChange={handleCheckboxChange}
+						style={{ marginRight: '8px' }} // 텍스트와 체크박스 간격 조절
+					/>
 					<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
 						안내사항을 모두 확인하였으며, 이에 동의합니다.
 					</StyledText>
+					</label>
 				</CheckboxWrapper>
 			</CancelContainer>
 			<div
@@ -98,6 +124,15 @@ const AccountCancel: React.FC = () => {
 			>
 				<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
 			</div>
+			{isModalVisible && (
+ 				 <Modal
+   					 content={modalContent || ''} // null일 경우 빈 문자열로 처리
+   					 onClose={handleModalClose}
+   					 isCloseButtonVisible={true}
+   				 	button={{ content: '확인', onClick: handleModalClose }}
+				 />
+)}
+
 		</OODDFrame>
 	);
 };

src/pages/AccountCancel/styles.tsx

@@ -42,13 +42,12 @@ export const InfoBox = styled.div`
 export const InfoItem = styled.p`
 	font-size: 0.875rem; /* 14px */
 	margin-bottom: 0.625rem; /* 10px */
-	padding: 10px 1.25rem; /* 20px */
+	padding: 2px 10px; 
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	text-align: center;
 	height: 100%; /* 부모 컨테이너의 높이에 맞추기 */
-
 `;
 
 export const CheckboxWrapper = styled.div`