diff --git a/src/components/home/profile/profileEdit/profileCorrection/index.tsx b/src/components/home/profile/profileEdit/profileCorrection/index.tsx index c53eec3..e1518d2 100644 --- a/src/components/home/profile/profileEdit/profileCorrection/index.tsx +++ b/src/components/home/profile/profileEdit/profileCorrection/index.tsx @@ -1,37 +1,29 @@ -import React, { useState } from "react"; +import React from "react"; import * as S from "./style"; import { ModalProps } from "src/types/profile/Modal.type"; -import { buttonWrap, cancelButton, Input, pwTitle, saveButton, Select } from "./style"; -import { useGetProfileList } from "src/queries/profile/profile.query"; import { schoolOptions } from "src/constants/profile/schoolOptions"; +import useModal from "src/hooks/profile/useModal"; -const Modal = ({ isOpen, onClose, title, value, onSave }: ModalProps) => { - const [inputValue, setInputValue] = useState(value); - const [selectedSchool, setSelectedSchool] = useState(schoolOptions[0]); - const [password, setPassword] = useState(""); +const Modal: React.FC = ({ isOpen, onClose, title, value, onSave }) => { + const { + inputValue, + selectedSchool, + password, + setInputValue, + setSelectedSchool, + setPassword, + handleSave + } = useModal(value, title); if (!isOpen) return null; - const handleSave = () => { - if (title === "학교") { - onSave(selectedSchool); - } else if (title === "이름") { - onSave(inputValue); - } else if (title === "비밀번호") { - onSave(password); - } else { - onSave(inputValue); - } - onClose(); - }; - return ( {title === "학교" ? ( <> 새로운 학교를 선택해주세요 - + ) : title === "이름" ? ( <> 새로운 이름을 입력해주세요 - setInputValue(e.target.value)} placeholder="새로운 이름 입력" /> - ) : title === "이메일" ? ( + ) : title === "이메일" ? ( <> 새로운 이메일을 입력해주세요 - setInputValue(e.target.value)} placeholder="새로운 이메일을 입력" /> - ) :title === "비밀번호" ? ( + ) : title === "비밀번호" ? ( <> 새로운 비밀번호를 입력해주세요 - setInputValue(e.target.value)} @@ -74,7 +66,7 @@ const Modal = ({ isOpen, onClose, title, value, onSave }: ModalProps) => { ) : ( <> - setInputValue(e.target.value)} @@ -82,21 +74,21 @@ const Modal = ({ isOpen, onClose, title, value, onSave }: ModalProps) => { )} - {title === "학교" || title === "이름" || title === "이메일" || title === "비밀번호" ? ( + {(title === "학교" || title === "이름" || title === "이메일" || title === "비밀번호") && ( <> 기존의 비밀번호를 입력해주세요 - setPassword(e.target.value)} placeholder="비밀번호 입력" /> - ) : null} + )} 취소 - 저장 + handleSave(onSave, onClose)}>저장 diff --git a/src/hooks/profile/useModal.ts b/src/hooks/profile/useModal.ts new file mode 100644 index 0000000..6086b6d --- /dev/null +++ b/src/hooks/profile/useModal.ts @@ -0,0 +1,33 @@ +import { useState } from "react"; +import { schoolOptions } from "src/constants/profile/schoolOptions"; + +const useModal = (value: string, title: string) => { + const [inputValue, setInputValue] = useState(value); + const [selectedSchool, setSelectedSchool] = useState(schoolOptions[0]); + const [password, setPassword] = useState(""); + + const handleSave = (onSave: (newValue: string) => void, onClose: () => void) => { + if (title === "학교") { + onSave(selectedSchool); + } else if (title === "이름") { + onSave(inputValue); + } else if (title === "비밀번호") { + onSave(password); + } else { + onSave(inputValue); + } + onClose(); + }; + + return { + inputValue, + selectedSchool, + password, + setInputValue, + setSelectedSchool, + setPassword, + handleSave + }; +}; + +export default useModal;