-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #98 from GDSC-PKNU-21-22/dev
부리미 0.12v 배포
- Loading branch information
Showing
13 changed files
with
163 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import http from '@apis/http'; | ||
| import Button from '@components/Button'; | ||
| import { SERVER_URL } from '@config/index'; | ||
| import { css } from '@emotion/react'; | ||
| import styled from '@emotion/styled'; | ||
| import { THEME } from '@styles/ThemeProvider/theme'; | ||
| import { areaResize } from '@utils/styles/textarea-resize'; | ||
| import React, { Dispatch, SetStateAction, useRef, useState } from 'react'; | ||
|
|
||
| interface SuggestionInputProps { | ||
| setIsSended: Dispatch<SetStateAction<boolean>>; | ||
| } | ||
|
|
||
| const SuggestionInput = ({ setIsSended }: SuggestionInputProps) => { | ||
| const areaRef = useRef<HTMLTextAreaElement>(null); | ||
| const [isInvalid, setIsInvalid] = useState<boolean>(true); | ||
|
|
||
| const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| if (!e.currentTarget.value || e.currentTarget.value.length < 5) { | ||
| setIsInvalid(true); | ||
| return; | ||
| } | ||
| setIsInvalid(false); | ||
| }; | ||
| const onResize = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { | ||
| areaResize(e.currentTarget); | ||
| }; | ||
|
|
||
| const onSuggest = async () => { | ||
| setIsSended((prev) => !prev); | ||
| await http.post( | ||
| `${SERVER_URL}/api/suggestion`, | ||
| { | ||
| content: areaRef.current?.value, | ||
| }, | ||
| { | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }, | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <span | ||
| css={css` | ||
| color: ${THEME.TEXT.BLACK}; | ||
| font-weight: bold; | ||
| margin-bottom: 15px; | ||
| `} | ||
| > | ||
| 건의사항 | ||
| </span> | ||
| <TextArea | ||
| minLength={5} | ||
| placeholder="건의사항을 5글자 이상 남겨주세요." | ||
| rows={1} | ||
| ref={areaRef} | ||
| onKeyDown={onResize} | ||
| onKeyUp={onResize} | ||
| onChange={onChange} | ||
| ></TextArea> | ||
| <Button onClick={onSuggest} disabled={isInvalid}> | ||
| 보내기 | ||
| </Button> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SuggestionInput; | ||
|
|
||
| const TextArea = styled.textarea` | ||
| line-height: 1.5; | ||
| padding: 10px; | ||
| resize: none; | ||
| overflow-y: hidden; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| border-radius: 8px; | ||
| &::placeholder { | ||
| color: ${THEME.TEXT.GRAY}; | ||
| font-weight: lighter; | ||
| } | ||
| `; |
20 changes: 20 additions & 0 deletions
20
src/components/Modal/SuggestionModal/SuggestionThxMessage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { css } from '@emotion/react'; | ||
|
|
||
| const SuggestionThxMessage = () => { | ||
| return ( | ||
| <> | ||
| <span | ||
| css={css` | ||
| display: flex; | ||
| justify-content: center; | ||
| line-height: 30px; | ||
| `} | ||
| > | ||
| 🙇♂️ 건의사항을 남겨 주셔서 정말 감사드립니다! 🙇♂️ <br />더 좋은 서비스를 | ||
| 제공할 수 있도록 노력하겠습니다. | ||
| </span> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SuggestionThxMessage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,24 @@ | ||
| import http from '@apis/http'; | ||
| import Button from '@components/Button'; | ||
| import { SERVER_URL } from '@config/index'; | ||
| import { css } from '@emotion/react'; | ||
| import styled from '@emotion/styled'; | ||
| import { THEME } from '@styles/ThemeProvider/theme'; | ||
| import { areaResize } from '@utils/styles/textarea-resize'; | ||
| import React, { useRef, useState } from 'react'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import SuggestionInput from './SuggestionInput'; | ||
| import SuggestionThxMessage from './SuggestionThxMessage'; | ||
| import Modal from '..'; | ||
|
|
||
| interface SuggestionModalProps { | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| const SuggestionModal = ({ onClose }: SuggestionModalProps) => { | ||
| const areaRef = useRef<HTMLTextAreaElement>(null); | ||
| const [isEmtpy, setIsEmpty] = useState<boolean>(true); | ||
|
|
||
| const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| if (e.currentTarget.value) setIsEmpty(false); | ||
| else setIsEmpty(true); | ||
| }; | ||
| const onResize = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { | ||
| areaResize(e.currentTarget); | ||
| }; | ||
|
|
||
| const onSuggest = async () => { | ||
| await http.post( | ||
| `${SERVER_URL}/api/suggestion`, | ||
| { | ||
| content: areaRef.current?.value, | ||
| }, | ||
| { | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }, | ||
| ); | ||
| }; | ||
|
|
||
| const [isSended, setIsSended] = useState<boolean>(false); | ||
| return ( | ||
| <Modal onClose={onClose}> | ||
| <ModalContent> | ||
| <span | ||
| css={css` | ||
| color: ${THEME.TEXT.BLACK}; | ||
| font-weight: bold; | ||
| margin-bottom: 15px; | ||
| `} | ||
| > | ||
| 건의사항 | ||
| </span> | ||
| <TextArea | ||
| placeholder="건의사항을 남겨주세요." | ||
| rows={1} | ||
| ref={areaRef} | ||
| onKeyDown={onResize} | ||
| onKeyUp={onResize} | ||
| onChange={onChange} | ||
| ></TextArea> | ||
| <Button onClick={onSuggest} disabled={isEmtpy}> | ||
| 보내기 | ||
| </Button> | ||
| </ModalContent> | ||
| {isSended ? ( | ||
| <SuggestionThxMessage /> | ||
| ) : ( | ||
| <SuggestionInput setIsSended={setIsSended} /> | ||
| )} | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default SuggestionModal; | ||
|
|
||
| const ModalContent = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: ${THEME.TEXT.WHITE}; | ||
| padding: 30px; | ||
| border-radius: 15px; | ||
| `; | ||
|
|
||
| const TextArea = styled.textarea` | ||
| line-height: 1.5; | ||
| padding: 10px; | ||
| resize: none; | ||
| overflow-y: hidden; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| border-radius: 8px; | ||
| &::placeholder { | ||
| color: ${THEME.TEXT.GRAY}; | ||
| font-weight: lighter; | ||
| } | ||
| `; |
Oops, something went wrong.