Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] refactor: 리뷰 작성 페이지에 useModals 훅 적용 #282

Merged
merged 2 commits into from
Aug 12, 2024
Merged

[FE] refactor: 리뷰 작성 페이지에 useModals 훅 적용 #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2755276
chore: 코드가 중복되는 각 모달 훅 제거
chysis Aug 9, 2024
2dc4c19
refactor: 리뷰 작성 페이지에 useModals 적용
chysis Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 0 additions & 16 deletions frontend/src/hooks/useAlertModal.ts
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions frontend/src/hooks/useConfirmModal.ts
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions frontend/src/hooks/useErrorModal.ts
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions frontend/src/hooks/useReviewForm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import { Keyword, Question, ReviewContent, WritingReviewInfoData } from '@/types

interface UseReviewFormProps {
dataToWrite: WritingReviewInfoData;
openErrorModal: (errorMessage: string) => void;
}

const useReviewForm = ({ dataToWrite, openErrorModal }: UseReviewFormProps) => {
const useReviewForm = ({ dataToWrite }: UseReviewFormProps) => {
const [answers, setAnswers] = useState<ReviewContent[]>(
dataToWrite.questions.map((question: Question) => ({ questionId: question.id, answer: '' })) || [],
);
const [selectedKeywords, setSelectedKeywords] = useState<number[]>([]);
const [errorMessage, setErrorMessage] = useState('');

const isValidAnswersLength = !answers.some((id) => id.answer.length < REVIEW.answerMinLength);
const isValidKeywordSelection =
Expand All @@ -27,8 +27,7 @@ const useReviewForm = ({ dataToWrite, openErrorModal }: UseReviewFormProps) => {

const handleKeywordButtonClick = (keyword: Keyword) => {
if (selectedKeywords.length === REVIEW.keywordMaxCount && !selectedKeywords.includes(keyword.id)) {
openErrorModal('키워드는 최대 5개까지 선택할 수 있어요.');
return;
setErrorMessage('키워드는 최대 5개까지 선택할 수 있어요.');
}

setSelectedKeywords((prev) =>
Expand All @@ -38,6 +37,7 @@ const useReviewForm = ({ dataToWrite, openErrorModal }: UseReviewFormProps) => {

return {
answers,
errorMessage,
selectedKeywords,
isValidForm,
handleAnswerChange,
Expand Down
39 changes: 21 additions & 18 deletions frontend/src/pages/ReviewWriting/components/ReviewWritingContents/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import Button from '@/components/common/Button';
import LongReviewItem from '@/components/common/LongReviewItem';
import useGetDataToWrite from '@/hooks/review/useGetDataToWrite';
import useMutateReview from '@/hooks/review/useMutateReview';
import useConfirmModal from '@/hooks/useConfirmModal';
import useErrorModal from '@/hooks/useErrorModal';
import useModals from '@/hooks/useModals';
import useReviewForm from '@/hooks/useReviewForm';
import useReviewRequestCode from '@/hooks/useReviewRequestCode';
import { ReviewData } from '@/types';
Expand All @@ -22,23 +21,27 @@ import * as S from './styles';
const SUBMIT_CONFIRM_MESSAGE = `리뷰를 제출할까요?
제출한 뒤에는 수정할 수 없어요.`;

const MODAL_KEYS = {
confirm: 'CONFIRM',
error: 'ERROR',
};

const ReviewWritingContents = () => {
const navigate = useNavigate();

const { reviewRequestCode } = useReviewRequestCode();
const { isConfirmModalOpen, openConfirmModal, closeConfirmModal } = useConfirmModal();
const { isErrorModalOpen, errorMessage, openErrorModal, closeErrorModal } = useErrorModal();
const { isOpen, openModal, closeModal } = useModals();
const { postReview } = useMutateReview();
const { dataToWrite } = useGetDataToWrite({ reviewRequestCode });

const { answers, selectedKeywords, isValidForm, handleAnswerChange, handleKeywordButtonClick } = useReviewForm({
dataToWrite,
openErrorModal,
});
const { answers, errorMessage, selectedKeywords, isValidForm, handleAnswerChange, handleKeywordButtonClick } =
useReviewForm({
dataToWrite,
});

const handleClickSubmitButton = async (event: React.FormEvent) => {
event.preventDefault();
openConfirmModal();
openModal(MODAL_KEYS.confirm);
};

const handleSubmitReview = async () => {
Expand All @@ -50,11 +53,11 @@ const ReviewWritingContents = () => {

try {
postReview({ reviewData });
closeConfirmModal();
closeModal(MODAL_KEYS.confirm);
navigate('/user/review-writing-complete', { replace: true });
} catch (error) {
closeConfirmModal();
openErrorModal('리뷰를 제출할 수 없어요.');
closeModal(MODAL_KEYS.confirm);
openModal(MODAL_KEYS.error);
}
};

Expand Down Expand Up @@ -128,21 +131,21 @@ const ReviewWritingContents = () => {
</Button>
</S.ButtonContainer>
</S.ReviewFormMain>
{isConfirmModalOpen && (
{isOpen(MODAL_KEYS.confirm) && (
<ConfirmModal
confirmButton={{ type: 'primary', text: '확인', handleClick: handleSubmitReview }}
cancelButton={{ type: 'secondary', text: '취소', handleClick: closeConfirmModal }}
handleClose={closeConfirmModal}
cancelButton={{ type: 'secondary', text: '취소', handleClick: () => closeModal(MODAL_KEYS.confirm) }}
handleClose={() => closeModal(MODAL_KEYS.confirm)}
isClosableOnBackground={true}
>
{SUBMIT_CONFIRM_MESSAGE}
</ConfirmModal>
)}
{isErrorModalOpen && (
{isOpen(MODAL_KEYS.error) && (
<ErrorAlertModal
errorText={errorMessage}
closeButton={{ content: '닫기', type: 'primary', handleClick: closeErrorModal }}
handleClose={closeErrorModal}
closeButton={{ content: '닫기', type: 'primary', handleClick: () => closeModal(MODAL_KEYS.error) }}
handleClose={() => closeModal(MODAL_KEYS.error)}
/>
)}
</S.ReviewWritingContents>
Expand Down