Skip to content

Commit

Permalink
chore(change modal code): 건의사항 페이지에서 사용하는 모달을 합성 컴포넌트로 변경
Browse files Browse the repository at this point in the history
- 건의사항을 보낼 때 한번 더 내용을 확인하는 로직 추가
  • Loading branch information
hwinkr committed Dec 28, 2023
1 parent 1f840f0 commit 68e5948
Showing 1 changed file with 24 additions and 8 deletions.
32 changes: 24 additions & 8 deletions src/pages/Suggestion/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import postSuggestion from '@apis/suggestion/post-suggestion';
import Button from '@components/Common/Button';
import Modal from '@components/Common/Modal';
import InformUpperLayout from '@components/InformUpperLayout';
import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
import PLCACEHOLDER_MESSAGES from '@constants/placeholder-message';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import useModals, { modals } from '@hooks/useModals';
import useModals from '@hooks/useModals';
import { THEME } from '@styles/ThemeProvider/theme';
import React, { useRef, useState } from 'react';

const SuggestionPage = () => {
const { openModal, closeModal } = useModals();
const { openModal } = useModals();
const areaRef = useRef<HTMLTextAreaElement>(null);
const [isInValidInput, setIsInValidInput] = useState<boolean>(true);

Expand All @@ -24,11 +25,26 @@ const SuggestionPage = () => {

const onButtonClick = () => {
postSuggestion(areaRef.current?.value);
openModal<typeof modals.alert>(modals.alert, {
message: MODAL_MESSAGE.SUCCEED.POST_SUGGESTION,
buttonMessage: MODAL_BUTTON_MESSAGE.CONFIRM,
onClose: () => closeModal(modals.alert),
});
openModal(
<Modal>
<Modal.ModalTitle title={MODAL_MESSAGE.SUCCEED.POST_SUGGESTION} />
<Modal.ModalButton text={MODAL_BUTTON_MESSAGE.CONFIRM} />
</Modal>,
);
areaRef.current ? (areaRef.current.value = '') : null;
};

const handlePostSuggestion = () => {
openModal(
<Modal>
<Modal.ModalTitle title={MODAL_MESSAGE.CONFIRM.POST_SUGGESTION} />
<Modal.ModalButton text={MODAL_BUTTON_MESSAGE.NO} />
<Modal.ModalButton
text={MODAL_BUTTON_MESSAGE.YES}
onClick={onButtonClick}
/>
</Modal>,
);
};

return (
Expand All @@ -46,7 +62,7 @@ const SuggestionPage = () => {
/>
<Button
disabled={isInValidInput}
onClick={onButtonClick}
onClick={handlePostSuggestion}
css={css`
width: 50%;
margin: 0 auto;
Expand Down

0 comments on commit 68e5948

Please sign in to comment.