diff --git a/src/pages/Suggestion/index.tsx b/src/pages/Suggestion/index.tsx new file mode 100644 index 00000000..9c80b82e --- /dev/null +++ b/src/pages/Suggestion/index.tsx @@ -0,0 +1,79 @@ +import postSuggestion from '@apis/suggestion/post-suggestion'; +import Button from '@components/Common/Button'; +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 { THEME } from '@styles/ThemeProvider/theme'; +import React, { useRef, useState } from 'react'; + +const SuggestionPage = () => { + const { openModal, closeModal } = useModals(); + const areaRef = useRef(null); + const [isInValidInput, setIsInValidInput] = useState(true); + + const onChange = (e: React.ChangeEvent) => { + if (!e.currentTarget.value || e.currentTarget.value.length < 5) { + setIsInValidInput(true); + return; + } + setIsInValidInput(false); + }; + + const onButtonClick = () => { + postSuggestion(areaRef.current?.value); + openModal(modals.alert, { + message: MODAL_MESSAGE.SUCCEED.POST_SUGGESTION, + buttonMessage: MODAL_BUTTON_MESSAGE.CONFIRM, + onClose: () => closeModal(modals.alert), + }); + }; + + return ( + <> + + + + + + + + ); +}; + +export default SuggestionPage; + +const StyledTextArea = styled.textarea` + display: block; + padding: 20px; + width: 80%; + margin: 0 auto; + margin-bottom: 2rem; + line-height: 1.5; + resize: none; + font-size: 16px; + border-radius: 20px; + overflow-y: scoll; + border: 1px solid ${THEME.TEXT.GRAY}; + + &::placeholder { + color: ${THEME.TEXT.GRAY}; + } +`;