From d92d91a2b045ff14473bf3d8ba80c1206d0d2309 Mon Sep 17 00:00:00 2001 From: "rlaeksqls@naver.com" Date: Tue, 31 Oct 2023 15:41:25 +0900 Subject: [PATCH 01/51] =?UTF-8?q?[conf]:=20msw=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index 922b437a..3d6ac776 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,11 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.46.1", "react-icons": "^4.11.0", - "react-intersection-observer": "^9.5.2", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", "react-toastify": "^9.1.3", "redux": "^4.2.1", - "shortid": "^2.2.16", "sweetalert2": "^11.7.28", - "tailwind-scrollbar-hide": "^1.1.7", "web-vitals": "^2.1.4" }, "scripts": { @@ -57,4 +54,4 @@ "prettier": "3.0.3", "tailwindcss": "^3.3.3" } -} \ No newline at end of file +} From a04f1e7dfafd069f6eda55d383495570b2dd0ae5 Mon Sep 17 00:00:00 2001 From: "rlaeksqls@naver.com" Date: Fri, 3 Nov 2023 10:16:44 +0900 Subject: [PATCH 02/51] =?UTF-8?q?[feat]:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=95=99=EC=83=9D=EC=A6=9D=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C,=20=EA=B3=B5=EA=B3=A0=EC=83=81=EC=84=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 학생증업로드는 일단 업로드하는 기능만 있어요 --- src/apis/myPage.js | 11 +++ src/apis/otherIndex.js | 11 +++ src/apis/pickerTime.js | 11 +++ src/apis/post.js | 9 +++ src/apis/postDetail.js | 4 +- src/apis/uploadCard.js | 6 ++ src/components/atoms/Time.jsx | 20 +++++ src/components/organisms/Info.jsx | 22 ++++-- src/components/organisms/Location.jsx | 6 +- src/components/templates/AdminMyPage.jsx | 16 +++- src/components/templates/GuestMyPage.jsx | 16 +++- src/components/templates/PickerMatch.jsx | 6 +- src/components/templates/PickerNoMatch.jsx | 6 +- src/components/templates/WriterMatch.jsx | 16 ++-- src/components/templates/WriterNoMatch.jsx | 11 +-- src/constant/routes.js | 1 + src/pages/CheckStudentCardPage.jsx | 86 ++++++++++++++++++++++ src/pages/PostDetailPage.jsx | 57 ++++++++++---- 18 files changed, 267 insertions(+), 48 deletions(-) create mode 100644 src/apis/myPage.js create mode 100644 src/apis/otherIndex.js create mode 100644 src/apis/pickerTime.js create mode 100644 src/apis/uploadCard.js create mode 100644 src/components/atoms/Time.jsx create mode 100644 src/pages/CheckStudentCardPage.jsx diff --git a/src/apis/myPage.js b/src/apis/myPage.js new file mode 100644 index 00000000..5b83585d --- /dev/null +++ b/src/apis/myPage.js @@ -0,0 +1,11 @@ +import { instance } from './index'; + +// eslint-disable-next-line import/prefer-default-export +export const myPage = () => { + return instance.get('/mypage'); +}; + +// eslint-disable-next-line import/prefer-default-export +export const requestPresignedUrl = () => { + return instance.get('/mypage/image/url'); +}; diff --git a/src/apis/otherIndex.js b/src/apis/otherIndex.js new file mode 100644 index 00000000..2eae7b43 --- /dev/null +++ b/src/apis/otherIndex.js @@ -0,0 +1,11 @@ +import axios from 'axios'; + +// 프론트에서 API를 활용하기 위한 기본 axios 인스턴스 +// eslint-disable-next-line import/prefer-default-export +export const instance = axios.create({ + baseURL: process.env.REACT_APP_API_URL, // production level 에서는 env에서 baseURL을 넣어주어야함(보안 관련) + timeout: 1000, // 타임아웃이 없으면 무한정 wait가 걸려버릴 수 있음 + headers: { + 'Content-Type': 'multipart/form-data', // 서버단에서 JSON 형태를 많이써서, 프론트단에서 쏴줄 때 이러한 형태로 많이 쓴다(헤더 기본 설정) + }, +}); diff --git a/src/apis/pickerTime.js b/src/apis/pickerTime.js new file mode 100644 index 00000000..dba8a3fc --- /dev/null +++ b/src/apis/pickerTime.js @@ -0,0 +1,11 @@ +import instance from './index'; + +const pickerTime = (data) => { + const { arriveTime, boardId } = data; + return instance.post('/articles/agree', { + arriveTime, + boardId, + }); +}; + +export default pickerTime; diff --git a/src/apis/post.js b/src/apis/post.js index ca9a11c3..49903cfc 100644 --- a/src/apis/post.js +++ b/src/apis/post.js @@ -13,3 +13,12 @@ import { instance } from './index'; export const getPosts = (offset = '') => { return instance.get(`/articles?offset=${offset}&limit=10`); }; + +// boardId로 공고 받아오기 +export const getPostById = (boardId) => { + if (!boardId) { + throw Error('id가 필요합니다.'); + } + /* eslint-disable-next-line */ + return instance.get('/post/' + boardId); +}; diff --git a/src/apis/postDetail.js b/src/apis/postDetail.js index d3ff6251..fcf2bcca 100644 --- a/src/apis/postDetail.js +++ b/src/apis/postDetail.js @@ -1,7 +1,7 @@ import instance from './index'; -export const postDetail = (boardId = '') => { - return instance.get(`/articles/before/${boardId}`); +export const postDetail = (boardId) => { + return instance.get(`/post/${boardId}`); }; export default postDetail; diff --git a/src/apis/uploadCard.js b/src/apis/uploadCard.js new file mode 100644 index 00000000..b3d5d7d3 --- /dev/null +++ b/src/apis/uploadCard.js @@ -0,0 +1,6 @@ +import { instance } from './otherIndex'; + +/* eslint-disable-next-line */ +export const uploadCard = () => { + return instance.patch('/mypage/image/url'); +}; diff --git a/src/components/atoms/Time.jsx b/src/components/atoms/Time.jsx new file mode 100644 index 00000000..936c0507 --- /dev/null +++ b/src/components/atoms/Time.jsx @@ -0,0 +1,20 @@ +/* eslint-disable */ +// 타임스탬프 값을 년월일로 변환 + +function Time({ date }) { + let month = date.getMonth() + 1; + let day = date.getDate(); + let hour = date.getHours(); + let minute = date.getMinutes(); + let second = date.getSeconds(); + + month = month >= 10 ? month : '0' + month; + day = day >= 10 ? day : '0' + day; + hour = hour >= 10 ? hour : '0' + hour; + minute = minute >= 10 ? minute : '0' + minute; + second = second >= 10 ? second : '0' + second; + + return date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; +} + +export default Time; diff --git a/src/components/organisms/Info.jsx b/src/components/organisms/Info.jsx index 30710e37..32567dd0 100644 --- a/src/components/organisms/Info.jsx +++ b/src/components/organisms/Info.jsx @@ -1,11 +1,23 @@ +import Time from '../atoms/Time'; + /* eslint-disable */ -const Info = () => { +const Info = ({ response }) => { + // 마감시간 + let finishTime = new Date(response.finishedAt); + + // 메뉴들 나열하는 거 + const showMenu = (item) => { + return item.map(({ name }) => { + return
{name}
; + }); + }; + return (
{/* 주문정보 */}
주문 정보
-
아이스 아메리카노 1잔
+
{showMenu(response.beverage)}
{/* 요청사항 */}
@@ -13,18 +25,18 @@ const Info = () => {
픽업팁
-
3000원
+
{response.tip}원
요청사항
-
1층 도착하시면 연락주세요!
+
{response.request}
{/* 마감기한 */}
마감기한
-
오늘 14시 10분까지
+
{
); diff --git a/src/components/organisms/Location.jsx b/src/components/organisms/Location.jsx index fc8b31e0..23c44ef4 100644 --- a/src/components/organisms/Location.jsx +++ b/src/components/organisms/Location.jsx @@ -1,17 +1,17 @@ import { BsArrowDown } from 'react-icons/bs'; import { MdLocationPin, MdOutlineLocationOn } from 'react-icons/md'; -const Location = () => { +const Location = ({ response }) => { return (
- 스타벅스 전대후문점 + {response.shopName}
- 공과대학 7호관 + {response.destination}
); diff --git a/src/components/templates/AdminMyPage.jsx b/src/components/templates/AdminMyPage.jsx index ec2c5630..78df64b0 100644 --- a/src/components/templates/AdminMyPage.jsx +++ b/src/components/templates/AdminMyPage.jsx @@ -1,8 +1,14 @@ import { CiEdit } from 'react-icons/ci'; import { PiCaretRightLight, PiReadCvLogoThin, PiCheckSquareLight } from 'react-icons/pi'; import { RiAdminLine } from 'react-icons/ri'; +import { useNavigate } from 'react-router-dom'; +import routes from '../../constant/routes'; const AdminMyPage = () => { + const navigate = useNavigate(); + const navigateAdmin = () => { + return navigate(routes.admin); + }; return (
@@ -12,9 +18,13 @@ const AdminMyPage = () => {
- -
관리자 페이지
- +
diff --git a/src/components/templates/GuestMyPage.jsx b/src/components/templates/GuestMyPage.jsx index 644282e5..1f7ef622 100644 --- a/src/components/templates/GuestMyPage.jsx +++ b/src/components/templates/GuestMyPage.jsx @@ -1,7 +1,13 @@ import { CiEdit } from 'react-icons/ci'; import { PiGraduationCapLight, PiCaretRightLight } from 'react-icons/pi'; +import { useNavigate } from 'react-router-dom'; +import routes from '../../constant/routes'; const GuestMyPage = () => { + const navigate = useNavigate(); + const checkStudentIdCard = () => { + return navigate(routes.checkStudentCard); + }; return (
@@ -11,9 +17,13 @@ const GuestMyPage = () => {
- -
학생증 인증
- +
diff --git a/src/components/templates/PickerMatch.jsx b/src/components/templates/PickerMatch.jsx index 19b74c66..3dada448 100644 --- a/src/components/templates/PickerMatch.jsx +++ b/src/components/templates/PickerMatch.jsx @@ -3,7 +3,7 @@ import OtherNav from '../atoms/OtherNav'; import Info from '../organisms/Info'; import Location from '../organisms/Location'; -const PickerMatch = () => { +const PickerMatch = ({ response }) => { return ( <> {/* 파란색 부분 */} @@ -11,11 +11,11 @@ const PickerMatch = () => {
내가 픽업할 공고입니다.
- +
{/* 하얀색 부분 */} - +
{/* 하얀색 부분 */} diff --git a/src/components/templates/WriterMatch.jsx b/src/components/templates/WriterMatch.jsx index a526b5cf..5a8c479e 100644 --- a/src/components/templates/WriterMatch.jsx +++ b/src/components/templates/WriterMatch.jsx @@ -2,7 +2,7 @@ import OtherNav from '../atoms/OtherNav'; import Info from '../organisms/Info'; import Location from '../organisms/Location'; -const WriterMatch = () => { +const WriterMatch = ({ response }) => { return ( <> {/* 파란색 부분 */} @@ -10,24 +10,26 @@ const WriterMatch = () => {
매칭을 기다리고 있어요.
- +
{/* 하얀색 부분 */} - +
피커정보
도착시간
-
3000원
+
{response.arriveTime}
계좌정보
-
농협 01010101010101010101
+
+ {response.pickerBank} {response.pickerAccount} +
-
계좌정보
-
010-1234-5678
+
전화번호
+
{response.pickerPhoneNumber}
diff --git a/src/components/templates/WriterNoMatch.jsx b/src/components/templates/WriterNoMatch.jsx index 01553fef..e1ac3fbc 100644 --- a/src/components/templates/WriterNoMatch.jsx +++ b/src/components/templates/WriterNoMatch.jsx @@ -5,7 +5,7 @@ import OtherNav from '../atoms/OtherNav'; import Info from '../organisms/Info'; import Location from '../organisms/Location'; -const WriterNoMatch = () => { +const WriterNoMatch = ({ response }) => { const navigate = useNavigate(); // 삭제 버튼 눌렀을 때 @@ -27,7 +27,7 @@ const WriterNoMatch = () => { }; // 우상단 점3개 눌렀을 때 - const control = () => { + const postControl = () => { return Swal.fire({ showDenyButton: true, confirmButtonText: '수정', @@ -50,15 +50,16 @@ const WriterNoMatch = () => {
매칭을 기다리고 있어요.
-
- +
{/* 하얀색 부분 */} - + ); }; diff --git a/src/constant/routes.js b/src/constant/routes.js index feec6a5f..6a5f001a 100644 --- a/src/constant/routes.js +++ b/src/constant/routes.js @@ -12,6 +12,7 @@ const routes = { error: '/*', admin: '/admin', adminAuth: '/admin/auth/:id', + checkStudentCard: '/checkStudentCard', }; export default routes; diff --git a/src/pages/CheckStudentCardPage.jsx b/src/pages/CheckStudentCardPage.jsx new file mode 100644 index 00000000..d502d8b3 --- /dev/null +++ b/src/pages/CheckStudentCardPage.jsx @@ -0,0 +1,86 @@ +/* eslint-disable */ +import { useState } from 'react'; +import { BsUpload } from 'react-icons/bs'; +import OtherNav from '../components/atoms/OtherNav'; +import Button from '../components/atoms/Button'; +import Swal from 'sweetalert2'; +import { useMutation } from '@tanstack/react-query'; + +const CheckStudentCardPage = () => { + const [imageSrc, setImageSrc] = useState(null); + const { mutate } = useMutation({ + mutationFn: uploadCard, + onSuccess: () => {}, + onError: () => {}, + }); + + const onUpload = (e) => { + const file = e.target.files[0]; + const reader = new FileReader(); + reader.readAsDataURL(file); + + return new Promise((resolve) => { + reader.onload = () => { + setImageSrc(reader.result || null); // 파일의 컨텐츠 + resolve(); + }; + }); + }; + + const requestCardModal = () => { + return Swal.fire({ + title: '인증을 요청 하시겠습니까?', + showCancelButton: true, + cancelButtonText: '취소', + confirmButtonText: '확인', + confirmButtonColor: '#0075ff', + heightAuto: true, + }).then((result) => { + if (result.isConfirmed) { + Swal.fire({ + icon: 'success', + title: '인증 요청이 완료됐어요!', + showConfirmButton: false, + timer: 1500, + }); + // 그리고 사진 보내고 기다림 + } + }); + }; + + return ( +
+ +
+
학생증 인증
+ +
+ onUpload(e)} + style={{ display: 'none' }} + /> + +
+ + +
+
+ ); +}; + +export default CheckStudentCardPage; diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx index 807ab90f..c5d1ddef 100644 --- a/src/pages/PostDetailPage.jsx +++ b/src/pages/PostDetailPage.jsx @@ -1,36 +1,65 @@ +/* eslint-disable */ import { useEffect, useState } from 'react'; import WriterMatch from '../components/templates/WriterMatch'; import WriterNoMatch from '../components/templates/WriterNoMatch'; import PickerMatch from '../components/templates/PickerMatch'; import PickerNoMatch from '../components/templates/PickerNoMatch'; +import { useParams } from 'react-router-dom'; +import { useQuery } from '@tanstack/react-query'; +import { getPostById } from '../apis/post'; const PostDetailPage = () => { - const isWriter = localStorage.getItem('isWriter'); - const [isMatch, setIsMatch] = useState(localStorage.getItem('isMatch')); + // const isWriter = localStorage.getItem('isWriter'); + // const [isMatch, setIsMatch] = useState(localStorage.getItem('isMatch')); + + // 샘플데이터 + const sample = { + boardId: 1, + shopName: '전남대 후문 스타벅스', + destination: '전남대 공대7 217호관', + beverage: [ + { + name: '핫 아메리카노', + }, + { + name: '아이스 아메리카노', + }, + ], + tip: 1000, + request: '빨리 와주세요', + finishedAt: 1696073040, + isMatch: false, + same: true, + }; + + // const { id } = useParams(); + // const { data } = useQuery(`post/${id}`, () => getPostById(id)); + // const post = data?.data.response; + const post = sample; /* eslint no-else-return: "error" */ - const showDetailPage = (isWritered, isMatched) => { + const showDetailPage = (post) => { // 작성자이고 매칭됐을 때 - if (isWritered && isMatched) { - return ; + if (post.same && post.isMatch) { + return ; // 작성자이고 매칭 안됐을 때 - } else if (isWritered && !isMatched) { - return ; + } else if (post.same && !post.isMatch) { + return ; // 피커이고 매칭 됐을 때 - } else if (!isWritered && isMatched) { - return ; + } else if (!post.same && post.isMatch) { + return ; } // 피커이고 매칭 안됐을 때 - return ; + return ; }; - useEffect(() => { - showDetailPage(isWriter, isMatch); - }, [isWriter, isMatch]); + // useEffect(() => { + // showDetailPage(isWriter, isMatch); + // }, [isWriter, isMatch]); return (
-
{showDetailPage(isWriter, isMatch)}
+
{showDetailPage(post)}
); }; From a2f98ba1b8d893f0735505614ad054475d27b069 Mon Sep 17 00:00:00 2001 From: "rlaeksqls@naver.com" Date: Fri, 3 Nov 2023 10:27:17 +0900 Subject: [PATCH 03/51] =?UTF-8?q?[feat]:=20=ED=95=99=EC=83=9D=EC=A6=9D?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C,=20=EA=B3=B5=EA=B3=A0=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CheckStudentCardPage.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/CheckStudentCardPage.jsx b/src/pages/CheckStudentCardPage.jsx index d502d8b3..ee6a5338 100644 --- a/src/pages/CheckStudentCardPage.jsx +++ b/src/pages/CheckStudentCardPage.jsx @@ -8,11 +8,11 @@ import { useMutation } from '@tanstack/react-query'; const CheckStudentCardPage = () => { const [imageSrc, setImageSrc] = useState(null); - const { mutate } = useMutation({ - mutationFn: uploadCard, - onSuccess: () => {}, - onError: () => {}, - }); + // const { mutate } = useMutation({ + // mutationFn: uploadCard, + // onSuccess: () => {}, + // onError: () => {}, + // }); const onUpload = (e) => { const file = e.target.files[0]; From a7c06cd07fb83e480f0310333b39b82088990016 Mon Sep 17 00:00:00 2001 From: "rlaeksqls@naver.com" Date: Fri, 3 Nov 2023 10:29:54 +0900 Subject: [PATCH 04/51] =?UTF-8?q?[feat]:=20=ED=95=99=EC=83=9D=EC=A6=9D?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C,=20=EA=B3=B5=EA=B3=A0=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index 2886b531..60dd6a2e 100644 --- a/src/App.js +++ b/src/App.js @@ -12,6 +12,7 @@ import AdminPage from './pages/AdminPage'; import AdminAuthPage from './pages/AdminAuthPage'; import ErrorPage from './pages/ErrorPage'; import ProtectedRoute from './components/templates/ProtectedRoute'; +import CheckStudentCardPage from './pages/CheckStudentCardPage'; import routes from './constant/routes'; import './global.css'; @@ -34,6 +35,7 @@ function App() { } /> + } /> } /> } /> } /> From bd949c0fe9d768208131da0542ce6709e703a41b Mon Sep 17 00:00:00 2001 From: "rlaeksqls@naver.com" Date: Fri, 3 Nov 2023 10:32:37 +0900 Subject: [PATCH 05/51] =?UTF-8?q?[feat]:=20=ED=95=99=EC=83=9D=EC=A6=9D?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C,=20=EA=B3=B5=EA=B3=A0=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 9d929164..5f768108 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,14 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.46.1", "react-icons": "^4.11.0", + "react-intersection-observer": "^9.5.2", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", "react-toastify": "^9.1.3", "redux": "^4.2.1", + "shortid": "^2.2.16", "sweetalert2": "^11.7.28", + "tailwind-scrollbar-hide": "^1.1.7", "web-vitals": "^2.1.4" }, "scripts": { From 7875fe2fbd9d01485a92fb8110a6279326585b5b Mon Sep 17 00:00:00 2001 From: "rlaeksqls@naver.com" Date: Fri, 3 Nov 2023 23:14:44 +0900 Subject: [PATCH 06/51] =?UTF-8?q?[feat]:=20=ED=95=99=EC=83=9D=EC=A6=9D?= =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/myPage.js | 22 +++- src/apis/pickerTime.js | 11 -- src/apis/postDetail.js | 19 +++- src/components/templates/AdminMyPage.jsx | 4 - src/components/templates/GuestMyPage.jsx | 4 - src/components/templates/MyPageTemplate.jsx | 38 ++++++- src/components/templates/StudentMyPage.jsx | 4 - src/pages/CheckStudentCardPage.jsx | 110 ++++++++++++++------ src/pages/PostDetailPage.jsx | 11 +- 9 files changed, 153 insertions(+), 70 deletions(-) delete mode 100644 src/apis/pickerTime.js diff --git a/src/apis/myPage.js b/src/apis/myPage.js index 5b83585d..e3cdfc79 100644 --- a/src/apis/myPage.js +++ b/src/apis/myPage.js @@ -1,11 +1,29 @@ import { instance } from './index'; +// 마이페이지 조회 (닉네임, 유저등급) // eslint-disable-next-line import/prefer-default-export -export const myPage = () => { +export const getMyPage = () => { return instance.get('/mypage'); }; +// presigned URL 가져오기 // eslint-disable-next-line import/prefer-default-export -export const requestPresignedUrl = () => { +export const getPresignedUrl = () => { return instance.get('/mypage/image/url'); }; + +// 유저등급 조회 +// eslint-disable-next-line import/prefer-default-export +export const getUserAuth = () => { + return instance.get('/mypage/auth'); +}; + +// 회원수정 + +// 공고글 목록(작성자) + +// 공고글 상세확인(작성자) + +// 공고글 목록(피커) + +// 공고글 상세확인(피커) diff --git a/src/apis/pickerTime.js b/src/apis/pickerTime.js deleted file mode 100644 index dba8a3fc..00000000 --- a/src/apis/pickerTime.js +++ /dev/null @@ -1,11 +0,0 @@ -import instance from './index'; - -const pickerTime = (data) => { - const { arriveTime, boardId } = data; - return instance.post('/articles/agree', { - arriveTime, - boardId, - }); -}; - -export default pickerTime; diff --git a/src/apis/postDetail.js b/src/apis/postDetail.js index fcf2bcca..b8f512da 100644 --- a/src/apis/postDetail.js +++ b/src/apis/postDetail.js @@ -1,7 +1,24 @@ import instance from './index'; +// 공고상세페이지 받아오기 (피커, 작성자용) +/* eslint-disable-next-line */ export const postDetail = (boardId) => { return instance.get(`/post/${boardId}`); }; -export default postDetail; +// 매칭후 공고상세페이지 받아오기(피커정보있음) (작성자용) +/* eslint-disable-next-line */ +export const postDetailWriter = (boardId) => { + return instance.get(`/articles/after/${boardId}`); +}; + +// 매칭하기 (피커용) +/* eslint-disable-next-line */ +export const postDetailPicker = (data) => { + const { arrivalTime, boardId } = data; + return instance.post('/articles/agree', { arrivalTime, boardId }); +}; + +// 공고글 삭제 + +// 공고글 수정 diff --git a/src/components/templates/AdminMyPage.jsx b/src/components/templates/AdminMyPage.jsx index 78df64b0..099037cc 100644 --- a/src/components/templates/AdminMyPage.jsx +++ b/src/components/templates/AdminMyPage.jsx @@ -11,10 +11,6 @@ const AdminMyPage = () => { }; return (
-
-
닉네임
-
관리자
-
diff --git a/src/components/templates/GuestMyPage.jsx b/src/components/templates/GuestMyPage.jsx index 1f7ef622..38de2f04 100644 --- a/src/components/templates/GuestMyPage.jsx +++ b/src/components/templates/GuestMyPage.jsx @@ -10,10 +10,6 @@ const GuestMyPage = () => { }; return (
-
-
닉네임
-
학생 미인증
-
diff --git a/src/components/templates/MyPageTemplate.jsx b/src/components/templates/MyPageTemplate.jsx index 3c90a506..ec4ce306 100644 --- a/src/components/templates/MyPageTemplate.jsx +++ b/src/components/templates/MyPageTemplate.jsx @@ -1,18 +1,42 @@ import React from 'react'; +// import { useQuery } from '@tanstack/react-query'; import OtherNav from '../atoms/OtherNav'; import AdminMyPage from './AdminMyPage'; import GuestMyPage from './GuestMyPage'; import StudentMyPage from './StudentMyPage'; import Footer from '../atoms/Footer'; +// import { getMyPage } from '../../apis/myPage'; const MyPageTemplate = () => { - const authority = 3; + // const authority = localStorage.getItem('userAuth'); + const authority = 'guest'; + + // const { data } = useQuery('myPage', getMyPage); + + // 샘플 + const sample = { + success: true, + response: { + role: 'student', + nickname: '닉네임', + }, + }; + + const userLevel = (author) => { + /* eslint no-else-return: "error" */ + if (author === 'admin') { + return
관리자
; + } else if (author === 'user') { + return
전남대학교
; + } + return
학생 미인증
; + }; const certification = (author) => { /* eslint no-else-return: "error" */ - if (author === 1) { + if (author === 'admin') { return ; - } else if (author === 2) { + } else if (author === 'user') { return ; } return ; @@ -21,6 +45,14 @@ const MyPageTemplate = () => { return (
+
+
+ {/* 나중에 지울거 */} + {sample.response.nickname} + {/* {data?data?.response?.nickname} */} +
+ {userLevel(authority)} +
{certification(authority)}
diff --git a/src/components/templates/StudentMyPage.jsx b/src/components/templates/StudentMyPage.jsx index b4a057d3..431945cb 100644 --- a/src/components/templates/StudentMyPage.jsx +++ b/src/components/templates/StudentMyPage.jsx @@ -4,10 +4,6 @@ import { PiCaretRightLight, PiReadCvLogoThin, PiCheckSquareLight } from 'react-i const StudentMyPage = () => { return (
-
-
닉네임
-
전남대학교
-
diff --git a/src/pages/CheckStudentCardPage.jsx b/src/pages/CheckStudentCardPage.jsx index ee6a5338..7e57ee54 100644 --- a/src/pages/CheckStudentCardPage.jsx +++ b/src/pages/CheckStudentCardPage.jsx @@ -1,12 +1,22 @@ /* eslint-disable */ -import { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { BsUpload } from 'react-icons/bs'; +import Swal from 'sweetalert2'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import { getUserAuth } from '../apis/myPage'; import OtherNav from '../components/atoms/OtherNav'; import Button from '../components/atoms/Button'; -import Swal from 'sweetalert2'; -import { useMutation } from '@tanstack/react-query'; +import { useNavigate } from 'react-router-dom'; +import routes from '../constant/routes'; const CheckStudentCardPage = () => { + // const { data } = useQuery('/mypage/auth', getUserAuth); + // const checking = data?.data?.response; + const checking = false; + + const navigate = useNavigate(); + const didMount = useRef(false); + const [show, setShow] = useState(false); const [imageSrc, setImageSrc] = useState(null); // const { mutate } = useMutation({ // mutationFn: uploadCard, @@ -14,11 +24,17 @@ const CheckStudentCardPage = () => { // onError: () => {}, // }); + // 학생증 사진을 업로드하면 취소/입력완료 버튼이 뜬다 + useEffect(() => { + if (didMount.current) setShow(true); + else didMount.current = true; + }, [imageSrc]); + + // 사진 업로드 const onUpload = (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); - return new Promise((resolve) => { reader.onload = () => { setImageSrc(reader.result || null); // 파일의 컨텐츠 @@ -27,6 +43,7 @@ const CheckStudentCardPage = () => { }); }; + // 입력완료 누를 때 나타나는 모달창 const requestCardModal = () => { return Swal.fire({ title: '인증을 요청 하시겠습니까?', @@ -48,37 +65,66 @@ const CheckStudentCardPage = () => { }); }; + // 취소버튼 + const cancel = () => { + return navigate(routes.mypage); + }; + + // 취소, 입력완료 버튼 보일지말지 + const showButton = (pic) => { + if (pic) { + return ( +
+ + +
+ ); + } + }; + + // 학생증 업로드하는 부분 + const uploadForm = () => { + return ( + <> +
+ +
+ onUpload(e)} + style={{ display: 'none' }} + /> + + {showButton(show)} + + ); + }; + + // 학생증인증중인지 아닌지 체크 + const isCheck = (checking) => { + if (!checking) return uploadForm(); + else return
학생증 인증 검토 중입니다.
; + }; + return (
-
-
학생증 인증
- -
- onUpload(e)} - style={{ display: 'none' }} - /> - -
- - -
+
학생증 인증
+ {isCheck(checking)}
); }; diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx index c5d1ddef..8377649c 100644 --- a/src/pages/PostDetailPage.jsx +++ b/src/pages/PostDetailPage.jsx @@ -9,9 +9,6 @@ import { useQuery } from '@tanstack/react-query'; import { getPostById } from '../apis/post'; const PostDetailPage = () => { - // const isWriter = localStorage.getItem('isWriter'); - // const [isMatch, setIsMatch] = useState(localStorage.getItem('isMatch')); - // 샘플데이터 const sample = { boardId: 1, @@ -28,7 +25,7 @@ const PostDetailPage = () => { tip: 1000, request: '빨리 와주세요', finishedAt: 1696073040, - isMatch: false, + isMatch: true, same: true, }; @@ -50,13 +47,9 @@ const PostDetailPage = () => { return ; } // 피커이고 매칭 안됐을 때 - return ; + return ; }; - // useEffect(() => { - // showDetailPage(isWriter, isMatch); - // }, [isWriter, isMatch]); - return (
{showDetailPage(post)}
From ef465af3f6650ee5ffce34530af6a02f56635c89 Mon Sep 17 00:00:00 2001 From: "rlaeksqls@naver.com" Date: Fri, 3 Nov 2023 23:32:13 +0900 Subject: [PATCH 07/51] =?UTF-8?q?[feat]:=20=ED=95=99=EC=83=9D=EC=A6=9D?= =?UTF-8?q?=EC=9D=B8=EC=A6=9D=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CheckStudentCardPage.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/CheckStudentCardPage.jsx b/src/pages/CheckStudentCardPage.jsx index 7e57ee54..d2078322 100644 --- a/src/pages/CheckStudentCardPage.jsx +++ b/src/pages/CheckStudentCardPage.jsx @@ -10,9 +10,16 @@ import { useNavigate } from 'react-router-dom'; import routes from '../constant/routes'; const CheckStudentCardPage = () => { + // 주석 부분은 백엔드랑 연결되면 사용 // const { data } = useQuery('/mypage/auth', getUserAuth); // const checking = data?.data?.response; - const checking = false; + + // 샘플 + const checking = { + success: true, + response: '미인증', + error: null, + }; const navigate = useNavigate(); const didMount = useRef(false); @@ -116,7 +123,7 @@ const CheckStudentCardPage = () => { // 학생증인증중인지 아닌지 체크 const isCheck = (checking) => { - if (!checking) return uploadForm(); + if (checking.response === '미인증') return uploadForm(); else return
학생증 인증 검토 중입니다.
; }; From e50f9cf15477378d022d33a5ef696a9c27fd6c6c Mon Sep 17 00:00:00 2001 From: rktdnjs Date: Sat, 4 Nov 2023 20:37:03 +0900 Subject: [PATCH 08/51] =?UTF-8?q?[style]=20:=20date.js=20=ED=95=9C=20?= =?UTF-8?q?=EC=9E=90=EB=A6=AC=20=EC=88=98=20=EC=8B=9C=EA=B0=84=20&=20?= =?UTF-8?q?=EB=B6=84=EC=97=90=20=EB=8C=80=ED=95=B4=200=EC=9D=84=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=EC=9C=BC=EB=A1=9C=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/date.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/utils/date.js b/src/utils/date.js index ab3e74e2..d3af60c8 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -4,7 +4,14 @@ const getDeadlineDate = (timestamp) => { const time = timestamp; const myDate = new Date(time * 1000); - const deadline = `${myDate.getHours()}:${myDate.getMinutes()}까지`; + let hours = myDate.getHours(); + let minutes = myDate.getMinutes(); + + hours = hours >= 10 ? hours : `0${hours}`; + minutes = minutes >= 10 ? minutes : `0${minutes}`; + + // const deadline = `${myDate.getHours()}:${myDate.getMinutes()}까지`; + const deadline = `${hours}:${minutes} 까지`; return deadline; }; From 62509ddf4407646104fbd4d176fb69f7be8edd8d Mon Sep 17 00:00:00 2001 From: rktdnjs Date: Sat, 4 Nov 2023 20:41:03 +0900 Subject: [PATCH 09/51] =?UTF-8?q?[feat]=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=EA=B3=BC=EC=A0=95=20=EC=A4=91=20=EA=B3=84=EC=A2=8C=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=9B=84=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=99=84=EB=A3=8C=20=EB=A9=94=EC=8B=9C?= =?UTF-8?q?=EC=A7=80=20=EC=B6=9C=EB=A0=A5=20&=20alert.js=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/molecules/BankForm.jsx | 7 ++++--- src/utils/alert.js | 6 ++++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/BankForm.jsx b/src/components/molecules/BankForm.jsx index e3776a87..a5a1aa1a 100644 --- a/src/components/molecules/BankForm.jsx +++ b/src/components/molecules/BankForm.jsx @@ -7,7 +7,7 @@ import banks from '../../constant/bank'; import ErrorMsg from '../atoms/ErrorMsg'; import routes from '../../constant/routes'; import registerBank from '../../apis/register'; -import { bankInvalidMessage, unknownErrorMessage } from '../../utils/alert'; +import { bankInvalidMessage, unknownErrorMessage, registerCompleteMessage } from '../../utils/alert'; const BankForm = () => { const [accountBank, setAccountBank] = useState(''); @@ -19,6 +19,7 @@ const BankForm = () => { const { mutate } = useMutation({ mutationFn: registerBank, onSuccess: () => { + Swal.fire(registerCompleteMessage); navigate(routes.login); // 회원가입 이후 로그인을 할 수 있도록 로그인 페이지로 이동시킴 }, onError: () => { @@ -42,8 +43,8 @@ const BankForm = () => { if (formValid) { // 입력 정보 post 처리 이후 홈 페이지 이동(회원가입 완료) mutate({ - bank: accountBank, - account: accountNumber, + bankName: accountBank, + accountNum: accountNumber, }); } else { Swal.fire(bankInvalidMessage); diff --git a/src/utils/alert.js b/src/utils/alert.js index 4c18a43d..b60a49e1 100644 --- a/src/utils/alert.js +++ b/src/utils/alert.js @@ -42,3 +42,9 @@ export const unknownErrorMessage = { icon: 'error', confirmButtonText: '확인', }; +export const registerCompleteMessage = { + title: '회원가입 완료!', + text: '픽업 셔틀에 오신 것을 환영합니다😊 로그인을 진행해주세요!!', + icon: 'success', + confirmButtonText: '확인', +}; From a6b60b9865c2e90693a017de38df4025d7d0f8b9 Mon Sep 17 00:00:00 2001 From: rktdnjs Date: Sat, 4 Nov 2023 20:45:17 +0900 Subject: [PATCH 10/51] =?UTF-8?q?[feat]=20:=20=EA=B3=84=EC=A2=8C=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?POST=20=EB=AA=A8=ED=82=B9=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /signup URL로 계좌정보를 담은 데이터를 POST 요청 - 모킹 결과, 정상 작동함을 확인 --- src/apis/register.js | 3 ++- src/mocks/data/registerData.js | 7 +++++++ src/mocks/handlers/index.js | 3 ++- src/mocks/handlers/register.js | 13 +++++++++++++ 4 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 src/mocks/data/registerData.js create mode 100644 src/mocks/handlers/register.js diff --git a/src/apis/register.js b/src/apis/register.js index c627227e..b766ada8 100644 --- a/src/apis/register.js +++ b/src/apis/register.js @@ -1,7 +1,8 @@ import { instance } from './index'; const registerBank = (userInfo) => { - return instance.post('/users/register/input', userInfo); + console.log('계좌정보 등록 : ', userInfo); + return instance.post('/signup', userInfo); }; export default registerBank; diff --git a/src/mocks/data/registerData.js b/src/mocks/data/registerData.js new file mode 100644 index 00000000..88e5c9ed --- /dev/null +++ b/src/mocks/data/registerData.js @@ -0,0 +1,7 @@ +const REQUEST_REGISTER = { + success: true, + response: '처리에 성공하였습니다.은행이름: OO은행 계좌번호: OOOO-OOOO-OOOO', + error: null, +}; + +export default REQUEST_REGISTER; diff --git a/src/mocks/handlers/index.js b/src/mocks/handlers/index.js index 2cfd5763..63768df4 100644 --- a/src/mocks/handlers/index.js +++ b/src/mocks/handlers/index.js @@ -1,5 +1,6 @@ import adminHandlers from './admin'; +import registerHandlers from './register'; -const handlers = [...adminHandlers]; +const handlers = [...adminHandlers, ...registerHandlers]; export default handlers; diff --git a/src/mocks/handlers/register.js b/src/mocks/handlers/register.js new file mode 100644 index 00000000..42656f7b --- /dev/null +++ b/src/mocks/handlers/register.js @@ -0,0 +1,13 @@ +import { http, HttpResponse } from 'msw'; +import REQUEST_REGISTER from '../data/registerData'; + +const registerHandlers = [ + // POST 요청에 대한 핸들러 + http.post('/signup', () => { + // 여기서는 단순히 200 상태 코드와 함께 가짜 데이터를 응답 + console.log('Mocking : 계좌정보 전송, 회원가입 완료'); + return HttpResponse.json(REQUEST_REGISTER); + }), +]; + +export default registerHandlers; From ef550b32c06f64200e14b3130e61034b393566f9 Mon Sep 17 00:00:00 2001 From: rktdnjs Date: Sat, 4 Nov 2023 22:27:13 +0900 Subject: [PATCH 11/51] =?UTF-8?q?[feat]=20:=20=EA=B3=B5=EA=B3=A0=EA=B8=80?= =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=A7=A4=EC=B9=AD=EC=99=84?= =?UTF-8?q?=EB=A3=8C=EB=90=9C=20=EA=B8=80=EB=8F=84=20=EC=97=B4=EB=9E=8C?= =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Card.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/atoms/Card.jsx b/src/components/atoms/Card.jsx index 58f73af6..bedc0bbc 100644 --- a/src/components/atoms/Card.jsx +++ b/src/components/atoms/Card.jsx @@ -22,10 +22,7 @@ const Card = ({ className={`w-80 h-20 rounded-xl border-[#8B8B8B] border m-auto my-[15px] ${match ? 'bg-[#000000]/50' : ''}`} > - +
From 5cb6ad68258af3fadb1833fb8b967090bd478efb Mon Sep 17 00:00:00 2001 From: rktdnjs Date: Sat, 4 Nov 2023 22:45:07 +0900 Subject: [PATCH 12/51] =?UTF-8?q?[feat]=20:=20=EA=B3=B5=EA=B3=A0=ED=98=84?= =?UTF-8?q?=ED=99=A9=ED=8E=98=EC=9D=B4=EC=A7=80=20GET=20=EB=AA=A8=ED=82=B9?= =?UTF-8?q?=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/data/postListData.js | 104 +++++++++++++++++++++++++++++++++ src/mocks/handlers/index.js | 3 +- src/mocks/handlers/postList.js | 10 ++++ 3 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 src/mocks/data/postListData.js create mode 100644 src/mocks/handlers/postList.js diff --git a/src/mocks/data/postListData.js b/src/mocks/data/postListData.js new file mode 100644 index 00000000..bd321cc6 --- /dev/null +++ b/src/mocks/data/postListData.js @@ -0,0 +1,104 @@ +// eslint-disable-next-line import/prefer-default-export +export const REQUEST_POSTLIST = { + success: true, + response: { + content: [ + { + boardId: 9, + shopName: '전남대 후문 더벤티', + destination: '공과대학 7호관', + finishedAt: 1696992289, + tip: 1500, + match: true, + }, + { + boardId: 8, + shopName: '전남대 후문 스타벅스', + destination: '공과대학 7호관', + finishedAt: 1696992289, + tip: 1500, + match: true, + }, + { + boardId: 7, + shopName: '전남대 후문 더벤티', + destination: '공과대학 6호관', + finishedAt: 1696040640, + tip: 1000, + match: false, + }, + { + boardId: 6, + shopName: '전남대 후문 이디야', + destination: '공과대학 7호관', + finishedAt: 1696040640, + tip: 1500, + match: true, + }, + { + boardId: 5, + shopName: '전남대 후문 공차', + destination: '공과대학 7호관', + finishedAt: 1696992289, + tip: 1000, + match: false, + }, + { + boardId: 4, + shopName: '전남대 후문 스타벅스', + destination: '공과대학 7호관', + finishedAt: 1696040640, + tip: 1000, + match: false, + }, + { + boardId: 3, + shopName: '전남대 후문 스타벅스', + destination: '공과대학 7호관', + finishedAt: 1696040640, + tip: 1000, + match: false, + }, + { + boardId: 2, + shopName: '전남대 후문 이디야', + destination: '공과대학 7호관', + finishedAt: 1696040640, + tip: 1000, + match: false, + }, + { + boardId: 1, + shopName: '전남대 후문 공차', + destination: '공과대학 7호관', + finishedAt: 1696040640, + tip: 1000, + match: false, + }, + ], + pageable: { + pageNumber: 0, + pageSize: 10, + sort: { + empty: false, + unsorted: false, + sorted: true, + }, + offset: 0, + paged: true, + unpaged: false, + }, + first: true, + last: true, + size: 10, + number: 0, + sort: { + empty: false, + unsorted: false, + sorted: true, + }, + numberOfElements: 9, + empty: false, + }, + error: null, +}; diff --git a/src/mocks/handlers/index.js b/src/mocks/handlers/index.js index 63768df4..fad4107f 100644 --- a/src/mocks/handlers/index.js +++ b/src/mocks/handlers/index.js @@ -1,6 +1,7 @@ import adminHandlers from './admin'; import registerHandlers from './register'; +import postListHandlers from './postList'; -const handlers = [...adminHandlers, ...registerHandlers]; +const handlers = [...adminHandlers, ...registerHandlers, ...postListHandlers]; export default handlers; diff --git a/src/mocks/handlers/postList.js b/src/mocks/handlers/postList.js new file mode 100644 index 00000000..67b5b6c4 --- /dev/null +++ b/src/mocks/handlers/postList.js @@ -0,0 +1,10 @@ +import { http, HttpResponse } from 'msw'; +import { REQUEST_POSTLIST } from '../data/postListData'; + +const postListHandlers = [ + http.get('/articles?offset=&limit=10', () => { + return HttpResponse.json(REQUEST_POSTLIST); + }), +]; + +export default postListHandlers; From 4ea7ade936bfacd2eb44dab8d154d9ed28f171db Mon Sep 17 00:00:00 2001 From: rktdnjs Date: Sat, 4 Nov 2023 22:45:32 +0900 Subject: [PATCH 13/51] =?UTF-8?q?[fix]=20:=20=EA=B3=B5=EA=B3=A0=ED=98=84?= =?UTF-8?q?=ED=99=A9=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=ED=82=B9=20&?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 코드를 복잡하게 보이게 하는 console.log 제거 - 일부 코드에 주석을 추가하여 설명 보충 - 원본 공고글을 따로 저장해놓지 않아 필터적용 이후에 다시 All 클릭시 공고글이 삭제되는 부분 수정 - lastpage : false인 경우에 대해 렌더링 과정에서 버그가 있는데, 이는 API 연동을 통해 잡아야 할 것으로 보임 - 모킹으로 주는 데이터는 세부 로직을 적용하지 않아, 정확한 디버깅을 위해서는 API 연동이 필요함 --- src/pages/PostListPage.jsx | 133 +++++++++---------------------------- 1 file changed, 32 insertions(+), 101 deletions(-) diff --git a/src/pages/PostListPage.jsx b/src/pages/PostListPage.jsx index 50e0ba76..61b4443a 100644 --- a/src/pages/PostListPage.jsx +++ b/src/pages/PostListPage.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useInView } from 'react-intersection-observer'; import { useInfiniteQuery } from '@tanstack/react-query'; -// import { getPosts } from '../apis/post'; +import { getPosts } from '../apis/post'; import routes from '../constant/routes'; import OtherNav from '../components/atoms/OtherNav'; import Cards from '../components/molecules/Cards'; @@ -10,92 +10,10 @@ import FilterForm from '../components/molecules/FilterForm'; import WritePostIcon from '../assets/images/postWrite.png'; const PostListPage = () => { - // 이 코드는 inView에 닿았을 시 무한스크롤에 따라 요청이 이루어지는지 확인하기 위한 코드(정상 작동 o) - // 현재 index.js의 REACT_APP_API_URL이 따로 설정되지 않아 에러가 발생하는듯 하여 이렇게 임시로 작동만되도록 놔둠 - // 추후 백엔드 API 연결이 완료되고 나면 삭제할 코드이므로, 아래 코드는 무시하셔도 됩니다. - const getPosts = (offset = '') => { - console.log(`요청 : /articles?offset=${offset}&limit=10`); - }; - - // 임시 더미 데이터(데이터를 서버로부터 fetch 해왔다고 가정) - const sampleData = [ - { - boardId: 9, - shopName: '전남대 후문 더벤티', - destination: '공과대학 7호관', - finishedAt: 1696992289, - tip: 1500, - match: true, - }, - { - boardId: 8, - shopName: '전남대 후문 스타벅스', - destination: '공과대학 7호관', - finishedAt: 1696992289, - tip: 1500, - match: true, - }, - { - boardId: 7, - shopName: '전남대 후문 더벤티', - destination: '공과대학 6호관', - finishedAt: 1696040640, - tip: 1000, - match: false, - }, - { - boardId: 6, - shopName: '전남대 후문 이디야', - destination: '공과대학 7호관', - finishedAt: 1696040640, - tip: 1500, - match: true, - }, - { - boardId: 5, - shopName: '전남대 후문 공차', - destination: '공과대학 7호관', - finishedAt: 1696992289, - tip: 1000, - match: false, - }, - { - boardId: 4, - shopName: '전남대 후문 스타벅스', - destination: '공과대학 7호관', - finishedAt: 1696040640, - tip: 1000, - match: false, - }, - { - boardId: 3, - shopName: '전남대 후문 스타벅스', - destination: '공과대학 7호관', - finishedAt: 1696040640, - tip: 1000, - match: false, - }, - { - boardId: 2, - shopName: '전남대 후문 이디야', - destination: '공과대학 7호관', - finishedAt: 1696040640, - tip: 1000, - match: false, - }, - { - boardId: 1, - shopName: '전남대 후문 공차', - destination: '공과대학 7호관', - finishedAt: 1696040640, - tip: 1000, - match: false, - }, - ]; - const navigate = useNavigate(); const [posts, setPosts] = useState([]); const [filter, setFilter] = useState(''); + const [filteredPosts, setFilteredPosts] = useState([]); const { ref, inView } = useInView({ threshold: 0.5 }); const { data, fetchNextPage, hasNextPage, isError } = useInfiniteQuery( ['posts'], @@ -104,35 +22,48 @@ const PostListPage = () => { getNextPageParam: (lastPage) => { // 다음 공고글을 호출할 때 사용할 pageParam(pageOffset) // 초회 요청시에는 API문서 내용에 따라 아무것도 넣지 않아야 하므로 ''를 넣고, 이후에는 boardId값 기반으로 요청 - // 마지막 페이지가 아닐경우 추가 렌더링을 위해 offset 계산하여 리턴 or 마지막 페이지일 경우 NULL을 반환하여 페이지를 불러오지 않도록 함 - // 추후 백엔드 API 연결이 완료되고 나면 삭제할 코드이므로, 아래 코드는 무시하셔도 됩니다. - console.log('다음 param 호출'); - console.log('lastPage', lastPage); - return 10; - // 여기 아래의 코드가 API연결 이후에 사용할 진짜 코드! - // return !lastPage.last ? lastPage.content[lastPage.numberOfElements - 1].boardId : null; + // 마지막 페이지가 아닐경우 추가 렌더링을 위해 offset 계산하여 리턴 or 마지막 페이지일 경우 undefined 반환하여 페이지를 불러오지 않도록 함 + // 마지막 페이지 데이터를 의미하는 last = true일 경우 undefined를 반환하여 페이지 요청 x + return !lastPage.data.response.last + ? lastPage.data.response.content[lastPage.data.response.numberOfElements - 1].boardId + : undefined; }, }, ); + if (isError) { + navigate('/errorPage'); + } + // inView가 사용자에게 보임 & hasNextPage가 true일 경우 다음 페이지를 렌더링해오도록 한다. useEffect(() => { if (inView && hasNextPage) { fetchNextPage(); - console.log('inView : ', inView); - console.log('data : ', data); - console.log('hasNextPage', hasNextPage); + console.log('isError : ', isError); } }, [inView]); - if (isError) { - navigate('/errorPage'); - } + // getPosts를 통해 데이터를 불러오면, 받아온 데이터들을 처리하는 코드 + // newPosts = 새로 업데이트된 전체 공고글 + // setPosts : 필터 적용전 원본 공고글들을 저장해놓기 위해 사용 + // setFilteredPosts : 필터가 적용된 공고글들을 저장해놓기 위해 사용 + // 여기에 setFilteredPosts가 있는 이유는, 필터가 적용된 상태에서 추가 공고글을 불러올 경우에도 해당 필터에 대한 공고글을 렌더링 하기 위함 + useEffect(() => { + if (data) { + const newPosts = data.pages.flatMap((page) => page.data.response.content); + setPosts(newPosts); + setFilteredPosts(newPosts.filter((post) => post.shopName.includes(filter))); + } + }, [data]); - // filter가 업데이트 될 경우, 받아왔던 데이터를 filter에 따라 렌더링 + // filter가 업데이트 될 경우, 받아왔던 공고글을 filter에 따라 렌더링 + // filter === ''은 필터가 적용되지 않은 전체 공고글을 의미함 useEffect(() => { - // setPosts(posts.filter((post) => post.shopName.includes(filter))); - setPosts(sampleData.filter((post) => post.shopName.includes(filter))); + if (filter === '') { + setFilteredPosts(posts); + } else { + setFilteredPosts(posts.filter((post) => post.shopName.includes(filter))); + } }, [filter]); const goWritePost = () => { @@ -150,7 +81,7 @@ const PostListPage = () => {
공고 현황
- +
From 93eef928543a2a05a7351fdfb783efd15ded4b09 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 5 Nov 2023 06:43:47 +0900 Subject: [PATCH 14/51] =?UTF-8?q?[fix]:=20register=20prop=20=ED=98=95?= =?UTF-8?q?=ED=83=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Input.jsx | 2 +- src/components/atoms/RangeInput.jsx | 21 +++++++++------------ src/components/atoms/SelectInput.jsx | 2 +- src/components/atoms/TextArea.jsx | 2 +- 4 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/atoms/Input.jsx b/src/components/atoms/Input.jsx index 27baf04d..eb1ca839 100644 --- a/src/components/atoms/Input.jsx +++ b/src/components/atoms/Input.jsx @@ -5,8 +5,8 @@ const Input = ({ register, required, type, value, name, placeholder, width = 'w- name={name} value={value} placeholder={placeholder} - {...register(name, { required })} {...inputProps} + {...register} className={`${width} rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-2`} /> ); diff --git a/src/components/atoms/RangeInput.jsx b/src/components/atoms/RangeInput.jsx index b7cef7d7..f28c753c 100644 --- a/src/components/atoms/RangeInput.jsx +++ b/src/components/atoms/RangeInput.jsx @@ -2,18 +2,15 @@ import '../../styles/thumb.css'; const RangeInput = ({ name, register }) => { return ( - <> - - - + ); }; diff --git a/src/components/atoms/SelectInput.jsx b/src/components/atoms/SelectInput.jsx index dd0110c6..7628f46b 100644 --- a/src/components/atoms/SelectInput.jsx +++ b/src/components/atoms/SelectInput.jsx @@ -15,8 +15,8 @@ const SelectInput = ({ type={type} name={name} placeholder={placeholder} - {...register(name, { required })} {...inputProps} + {...register} className={`${width} rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-2`} > diff --git a/src/components/atoms/TextArea.jsx b/src/components/atoms/TextArea.jsx index d927159d..1462cfa1 100644 --- a/src/components/atoms/TextArea.jsx +++ b/src/components/atoms/TextArea.jsx @@ -4,10 +4,10 @@ const TextArea = ({ register, placeholder, id, name, ...inputProps }) => { id={id} placeholder={placeholder} name={name} - {...register(name)} type="text" rows="3" {...inputProps} + {...register} className="w-[18rem] rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-4" /> ); From 7092976653ba7aea13a817c89408ddae30f58333 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 5 Nov 2023 06:44:04 +0900 Subject: [PATCH 15/51] =?UTF-8?q?[fix]:=20FormProvider=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - FormProvider로 자식 컴포넌트에 methods 뿌림 (props drilling 막음) - 필수 항목에 작성을 마치고 제출하면 post 요청(msw) --- src/pages/PostWritePage.jsx | 95 ++++++++++++++++++++----------------- 1 file changed, 52 insertions(+), 43 deletions(-) diff --git a/src/pages/PostWritePage.jsx b/src/pages/PostWritePage.jsx index ce7b5af7..299ada83 100644 --- a/src/pages/PostWritePage.jsx +++ b/src/pages/PostWritePage.jsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useForm, useWatch } from 'react-hook-form'; +import { useForm, FormProvider } from 'react-hook-form'; import Swal from 'sweetalert2'; import OtherNav from '../components/atoms/OtherNav'; import BtnNavigate from '../components/molecules/BtnNavigate'; @@ -8,32 +8,44 @@ import OrderInfo from '../components/templates/OrderInfo'; import OrderRequest from '../components/templates/OrderRequest'; import OrderDeadLine from '../components/templates/OrderDeadLine'; import CircleNavigate from '../components/organisms/CircleNavigate'; +import { STORE, BEVERAGE } from '../constant/postWrite/orderInfo'; +import { DESTINATION } from '../constant/postWrite/orderRequest'; +import { HOUR, MINUTE } from '../constant/postWrite/orderDeadLine'; import { registerMessage } from '../utils/alert'; +import dateAndTime from '../utils/dateAndTime'; const PostWritePage = () => { const navigate = useNavigate(); const [focus, setFocus] = useState(1); + const methods = useForm(); + const { handleSubmit } = methods; - const { - register, - handleSubmit, - control, - formState: { errors }, - } = useForm({ - defaultValues: { - tip: 1000, - }, + const inputValue = methods.watch({ + control: methods.control, + name: [STORE, `${BEVERAGE}[0].value`, DESTINATION, HOUR, MINUTE], }); - const orderInfoValue = useWatch({ - control, - name: ['store', 'beverage'], - }); + const onSubmit = (data) => { + const request = { ...data }; + request.finishedAt = dateAndTime(data); - const requestValue = useWatch({ - control, - name: ['destination'], - }); + fetch('/articles/write', { + method: 'POST', + body: JSON.stringify(data), + }) + .then((response) => response.json()) + .then((result) => console.log(result)); + }; + + const handleAlert = (data) => { + if (focus === 3 && inputValue.hour && inputValue.minute) { + Swal.fire(registerMessage).then((result) => { + if (result.isConfirmed) { + onSubmit(data); + } + }); + } + }; const handlePrev = () => { if (focus > 1) { @@ -43,49 +55,46 @@ const PostWritePage = () => { } }; - const handleAlert = () => { - Swal.fire(registerMessage); - }; - const handleNext = () => { - if (focus === 1 && orderInfoValue[0] && orderInfoValue[1]) { + if (focus === 1 && inputValue.store && inputValue.beverage[0].value) { setFocus((prev) => prev + 1); } - if (focus === 2 && requestValue[0]) { + if (focus === 2 && inputValue.destination) { setFocus((prev) => prev + 1); } - if (focus === 3) handleAlert(); - }; - - const onSubmit = (data) => { - console.log(data); // api 연결 후 수정 예정 + if (focus === 3 && inputValue.hour && inputValue.minute) { + handleAlert(); + } }; + // eslint-disable-next-line const currentPage = (function (page) { if (page === 1) { - return ; + return ; } if (page === 2) { - return ; + return ; } if (page === 3) { - return ; + return ; } })(focus); return ( -
-
-
- - -
{currentPage}
-
-
- + + +
+
+ + +
{currentPage}
+
+
+ +
-
- + + ); }; From d3e877129ae63ab5ed2f2e6d91ce926a5ea5b3ad Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 5 Nov 2023 06:45:49 +0900 Subject: [PATCH 16/51] =?UTF-8?q?[feat]:=20=EB=A7=88=EA=B0=90=EA=B8=B0?= =?UTF-8?q?=EA=B0=84=EC=9D=98=20=EB=B0=B1=EC=97=94=EB=93=9C=20=ED=98=95?= =?UTF-8?q?=EC=8B=9D=EC=9D=84=20=EB=A7=9E=EC=B6=B0=EC=A3=BC=EB=8A=94=20?= =?UTF-8?q?=ED=95=A8=EC=88=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dateAndTime.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/utils/dateAndTime.js diff --git a/src/utils/dateAndTime.js b/src/utils/dateAndTime.js new file mode 100644 index 00000000..af9f01ae --- /dev/null +++ b/src/utils/dateAndTime.js @@ -0,0 +1,17 @@ +const dateAndTime = (data) => { + const today = new Date(); + const year = today.getFullYear(); + let month = today.getMonth() + 1; + let date = today.getDate(); + + month = month.toString().padStart(2, '0'); + date = date.toString().padStart(2, '0'); + + const hour = data.hour.padStart(2, '0'); + const minute = data.minute.padStart(2, '0'); + + const finishedAt = `${year}-${month}-${date} ${hour}:${minute}`; + return finishedAt; +}; + +export default dateAndTime; From ee4be6dd51cfbf403d622d9630b775860bf2a6d3 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 5 Nov 2023 06:47:23 +0900 Subject: [PATCH 17/51] =?UTF-8?q?[feat]:=20=EA=B3=B5=EA=B3=A0=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20msw=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/handlers/index.js | 3 ++- src/mocks/handlers/postWrite.js | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/mocks/handlers/postWrite.js diff --git a/src/mocks/handlers/index.js b/src/mocks/handlers/index.js index 2cfd5763..d1907c41 100644 --- a/src/mocks/handlers/index.js +++ b/src/mocks/handlers/index.js @@ -1,5 +1,6 @@ import adminHandlers from './admin'; +import postWriteHandlers from './postWrite'; -const handlers = [...adminHandlers]; +const handlers = [...adminHandlers, ...postWriteHandlers]; export default handlers; diff --git a/src/mocks/handlers/postWrite.js b/src/mocks/handlers/postWrite.js new file mode 100644 index 00000000..a4992e1f --- /dev/null +++ b/src/mocks/handlers/postWrite.js @@ -0,0 +1,11 @@ +import { http, HttpResponse } from 'msw'; + +const postWriteHandlers = [ + http.post('/articles/write', async ({ request }) => { + const newPost = await request.json(); + + return HttpResponse.json(newPost, { status: 201 }); + }), +]; + +export default postWriteHandlers; From 097c8101a3e347c94f6189463520c80017b57028 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 5 Nov 2023 06:47:57 +0900 Subject: [PATCH 18/51] =?UTF-8?q?[feat]:=20=EA=B3=B5=EA=B3=A0=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=83=81=EC=88=98=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 주문 정보, 요청 사항, 마감기한 - 입력의 에러 반환에 쓰이는 상수 데이터 --- src/constant/postWrite/orderDeadLine.js | 7 +++++++ src/constant/postWrite/orderInfo.js | 12 ++++++++++++ src/constant/postWrite/orderRequest.js | 8 ++++++++ src/constant/validateInputMsg.js | 9 +++++++++ 4 files changed, 36 insertions(+) create mode 100644 src/constant/postWrite/orderDeadLine.js create mode 100644 src/constant/postWrite/orderInfo.js create mode 100644 src/constant/postWrite/orderRequest.js create mode 100644 src/constant/validateInputMsg.js diff --git a/src/constant/postWrite/orderDeadLine.js b/src/constant/postWrite/orderDeadLine.js new file mode 100644 index 00000000..ac83c8d7 --- /dev/null +++ b/src/constant/postWrite/orderDeadLine.js @@ -0,0 +1,7 @@ +export const ORDER_DEADLINE = { + label: '공고를 언제까지 띄울까요? *', + subLabel: '마감기한을 설정해주세요! 마감기한이 지나면 공고가 사라져요.', +}; + +export const HOUR = 'hour'; +export const MINUTE = 'minute'; diff --git a/src/constant/postWrite/orderInfo.js b/src/constant/postWrite/orderInfo.js new file mode 100644 index 00000000..071cf5f8 --- /dev/null +++ b/src/constant/postWrite/orderInfo.js @@ -0,0 +1,12 @@ +export const ORDER_INFO_STORE = { + label: '주문할 매장은 어디인가요? *', + subLabel: '음료를 주문할 매장을 정확하게 입력해주세요.', +}; + +export const ORDER_INFO_BEVERAGE = { + label: '어떤 음료를 주문하실건가요? *', + subLabel: '주문할 음료를 정확하게 입력해주세요.', +}; + +export const STORE = 'store'; +export const BEVERAGE = 'beverage'; diff --git a/src/constant/postWrite/orderRequest.js b/src/constant/postWrite/orderRequest.js new file mode 100644 index 00000000..51675b22 --- /dev/null +++ b/src/constant/postWrite/orderRequest.js @@ -0,0 +1,8 @@ +export const ORDER_REQUEST = { + label: '주문할 매장은 어디인가요? *', + subLabel: '음료를 주문할 매장을 정확하게 입력해주세요.', +}; + +export const DESTINATION = 'destination'; +export const TIP = 'tip'; +export const REQUEST = 'request'; diff --git a/src/constant/validateInputMsg.js b/src/constant/validateInputMsg.js new file mode 100644 index 00000000..dd91e74f --- /dev/null +++ b/src/constant/validateInputMsg.js @@ -0,0 +1,9 @@ +const validateInputMsg = { + STORE_MSG: '주문 매장은 필수 입력입니다.', + BEVERAGE_MSG: '주문 정보는 필수 입력입니다.', + DESTINATION_MSG: '픽업할 장소는 필수 입력입니다.', + HOUR_MSG: '시는 0부터 24까지 입력 가능합니다', + MINUTE_MSG: '분은 0부터 59까지 입력 가능합니다.', +}; + +export default validateInputMsg; From 7530477ebc58817d931dc98d34647b9de2f242e6 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 5 Nov 2023 06:49:36 +0900 Subject: [PATCH 19/51] =?UTF-8?q?fix:=20useFormContext=EB=A5=BC=20?= =?UTF-8?q?=ED=99=9C=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 상수 데이터 import - 하위까지 register 전달하지 않고, templates 단계에서 register 사용 --- src/components/templates/OrderDeadLine.jsx | 29 ++++++------ src/components/templates/OrderInfo.jsx | 53 ++++++++++++---------- src/components/templates/OrderRequest.jsx | 27 +++++++---- 3 files changed, 63 insertions(+), 46 deletions(-) diff --git a/src/components/templates/OrderDeadLine.jsx b/src/components/templates/OrderDeadLine.jsx index 80d8c95b..e6827c30 100644 --- a/src/components/templates/OrderDeadLine.jsx +++ b/src/components/templates/OrderDeadLine.jsx @@ -1,24 +1,26 @@ +/* eslint-disable */ import Labels from '../molecules/Labels'; import Input from '../atoms/Input'; import ErrorMsg from '../atoms/ErrorMsg'; +import { ORDER_DEADLINE, HOUR, MINUTE } from '../../constant/postWrite/orderDeadLine'; +import validateInputMsg from '../../constant/validateInputMsg'; +import { useFormContext } from 'react-hook-form'; -const OrderDeadLine = ({ register, deadLineError }) => { - const HOUR = 'hour'; - const MINUTE = 'minute'; +const OrderDeadLine = () => { + const { + register, + handleSubmit, + formState: { errors }, + } = useFormContext(); return (
- +
{ 시 분까지
- {deadLineError && } + +
); }; diff --git a/src/components/templates/OrderInfo.jsx b/src/components/templates/OrderInfo.jsx index e84779ad..a85dfacf 100644 --- a/src/components/templates/OrderInfo.jsx +++ b/src/components/templates/OrderInfo.jsx @@ -1,45 +1,48 @@ -import { useForm, useFieldArray } from 'react-hook-form'; +/*eslint-disable*/ +import { useFieldArray, useFormContext } from 'react-hook-form'; import Labels from '../molecules/Labels'; import SelectInput from '../atoms/SelectInput'; import Input from '../atoms/Input'; import ErrorMsg from '../atoms/ErrorMsg'; import PlusBtn from '../atoms/PlusBtn'; import MinusBtn from '../atoms/MinusBtn'; +import { ORDER_INFO_STORE, ORDER_INFO_BEVERAGE, STORE, BEVERAGE } from '../../constant/postWrite/orderInfo'; +import validateInputMsg from '../../constant/validateInputMsg'; -const OrderInfo = ({ register, storeError, beverageError }) => { - const STORE = 'store'; - const BEVERAGE = 'beverage'; - const { control } = useForm(); +const OrderInfo = () => { + const { + register, + formState: { errors }, + control, + } = useFormContext(); const { fields, append, remove } = useFieldArray({ control, name: BEVERAGE }); return ( <>
- + - - {storeError && } +
+
- +
- - append({ BEVERAGE })} /> + /> */} + append({ value: '' })} />
{fields.map((field, index) => { return ( @@ -47,8 +50,10 @@ const OrderInfo = ({ register, storeError, beverageError }) => {
  • @@ -58,8 +63,8 @@ const OrderInfo = ({ register, storeError, beverageError }) => { ); })}
    • +
    - {beverageError && } ); }; diff --git a/src/components/templates/OrderRequest.jsx b/src/components/templates/OrderRequest.jsx index 07f348d6..2c5bf044 100644 --- a/src/components/templates/OrderRequest.jsx +++ b/src/components/templates/OrderRequest.jsx @@ -1,21 +1,32 @@ +/*eslint-disable*/ import Labels from '../molecules/Labels'; import Input from '../atoms/Input'; import TextArea from '../atoms/TextArea'; import RangeInput from '../atoms/RangeInput'; import ErrorMsg from '../atoms/ErrorMsg'; import price from '../../constant/price'; +import { DESTINATION, TIP, REQUEST, ORDER_REQUEST } from '../../constant/postWrite/orderRequest'; +import validateInputMsg from '../../constant/validateInputMsg'; +import { useFormContext } from 'react-hook-form'; -const OrderRequest = ({ destinationError, register }) => { - const DESTINATION = 'destination'; - const TIP = 'tip'; - const REQUEST = 'request'; +const OrderRequest = () => { + const { + register, + formState: { errors }, + control, + } = useFormContext(); return ( <>
    - - {destinationError && } + +
    {
    😍
    - +
    {price.map((x) => { @@ -41,7 +52,7 @@ const OrderRequest = ({ destinationError, register }) => {