From a618bc3c295af0acfd7347fd1cbdbcc212c54ccb Mon Sep 17 00:00:00 2001 From: subsub-e Date: Fri, 23 Aug 2024 00:24:08 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[add]=20Header=EC=97=90=EC=84=9C=20logo=20c?= =?UTF-8?q?lick=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/components/header/Header.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/service/src/components/header/Header.jsx b/service/src/components/header/Header.jsx index 013b0bc..770813b 100644 --- a/service/src/components/header/Header.jsx +++ b/service/src/components/header/Header.jsx @@ -33,11 +33,12 @@ function Header() { return (
- CASPER ELECTRONIC - +
Date: Fri, 23 Aug 2024 00:24:50 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[fix]=20detail=20logic=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/components/modal/PhoneAuthModal.jsx | 3 +++ .../src/pages/joinEvent/commentList/CommentIndex.jsx | 12 +++++++----- .../pages/joinEvent/commentList/PagingComment.jsx | 3 ++- service/src/styles/pagingComment.css | 3 ++- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/service/src/components/modal/PhoneAuthModal.jsx b/service/src/components/modal/PhoneAuthModal.jsx index 3bf4cee..83c4897 100644 --- a/service/src/components/modal/PhoneAuthModal.jsx +++ b/service/src/components/modal/PhoneAuthModal.jsx @@ -37,11 +37,14 @@ function PhoneAuthModal({ if (option === '자동차 아이템') { if (response.car) { setResultModalOpen('alreadyGetCar'); + return; } else { setResultModalOpen('getCar'); + return; } } else if (option === '기대평 댓글 작성') { setResultModalOpen('comment'); + return; } closeAuthModal(); } diff --git a/service/src/pages/joinEvent/commentList/CommentIndex.jsx b/service/src/pages/joinEvent/commentList/CommentIndex.jsx index 62d632a..ccfca92 100644 --- a/service/src/pages/joinEvent/commentList/CommentIndex.jsx +++ b/service/src/pages/joinEvent/commentList/CommentIndex.jsx @@ -79,11 +79,13 @@ function CommentIndex() { )}
- + {commentList.length > 0 && ( + + )}
); diff --git a/service/src/pages/joinEvent/commentList/PagingComment.jsx b/service/src/pages/joinEvent/commentList/PagingComment.jsx index 34ca89f..6a5f99b 100644 --- a/service/src/pages/joinEvent/commentList/PagingComment.jsx +++ b/service/src/pages/joinEvent/commentList/PagingComment.jsx @@ -1,4 +1,5 @@ import React from 'react'; +// @ts-ignore import Pagination from 'react-js-pagination'; import '@/styles/pagingComment.css'; import PropTypes from 'prop-types'; @@ -10,7 +11,7 @@ function PagingComment({ page, count, onChangePage }) { activePage={page} itemsCountPerPage={10} totalItemsCount={count * 10} - pageRangeDisplayed={Math.floor(count / 10)} + pageRangeDisplayed={10} prevPageText={'<'} nextPageText={'>'} onChange={onChangePage} diff --git a/service/src/styles/pagingComment.css b/service/src/styles/pagingComment.css index 5079304..08c0d7c 100644 --- a/service/src/styles/pagingComment.css +++ b/service/src/styles/pagingComment.css @@ -9,7 +9,8 @@ ul { } ul.pagination li { - width: 40px; + padding-left: 10px; + padding-right: 10px; height: 40px; display: flex; justify-content: center; From 644617093f7edbf12b1a7831c71692906e9c3190 Mon Sep 17 00:00:00 2001 From: subsub-e Date: Fri, 23 Aug 2024 00:25:05 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[fix]=20useFunner=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=20=ED=9B=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/hooks/useFunnel.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 service/src/hooks/useFunnel.js diff --git a/service/src/hooks/useFunnel.js b/service/src/hooks/useFunnel.js new file mode 100644 index 0000000..6960b08 --- /dev/null +++ b/service/src/hooks/useFunnel.js @@ -0,0 +1,23 @@ +import React, { Children, isValidElement, useState } from 'react'; + +function useFunnel(steps, { initialStep } = {}) { + const [step, setStep] = useState(initialStep ?? steps[0]); + + const Step = ({ children }) => children; + + const Funnel = ({ children }) => { + const validChildren = Children.toArray(children) + .filter(isValidElement) + .filter(child => steps.includes(child.props.name)); + + const targetStep = validChildren.find(child => child.props.name === step); + + return targetStep; + }; + + Funnel.Step = Step; + + return [Funnel, setStep]; +} + +export default useFunnel; From fab914a02d79862de4c9e40dc2e978017662f235 Mon Sep 17 00:00:00 2001 From: subsub-e Date: Fri, 23 Aug 2024 00:25:26 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[fix]=20Funner=20=ED=8C=A8=ED=84=B4?= =?UTF-8?q?=EC=9D=84=20=EC=9D=B4=EC=9A=A9=ED=95=B4=20=EC=B5=9C=EC=A0=81?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/pages/joinEvent/DailyComment.jsx | 57 +++++++++---------- .../src/pages/worldCup/WorldCupResultTop.jsx | 56 +++++++++--------- 2 files changed, 56 insertions(+), 57 deletions(-) diff --git a/service/src/pages/joinEvent/DailyComment.jsx b/service/src/pages/joinEvent/DailyComment.jsx index 70ed216..d6142be 100644 --- a/service/src/pages/joinEvent/DailyComment.jsx +++ b/service/src/pages/joinEvent/DailyComment.jsx @@ -1,4 +1,4 @@ -import React, { useState, useContext } from 'react'; +import React, { useContext } from 'react'; import Edit from '@/assets/icons/edit.svg'; import Link from '@/assets/icons/link.svg'; import ToastMessage from '@/components/toastMessage/ToastMessage'; @@ -7,27 +7,20 @@ import useToast from '@/hooks/useToast'; import PhoneInputModal from '@/components/modal/PhoneInputModal'; import GetItemModal from '@/components/modal/GetItemModal'; import { AuthContext } from '@/context/authContext'; +import useFunnel from '@/hooks/useFunnel'; function DailyComment() { - const { userInfo, setUserInfo } = useContext(AuthContext); - const [openPhoneInputModal, setOpenPhoneInputModal] = useState(false); + const { userInfo } = useContext(AuthContext); const { showToast, messageType, handleShareClick, AlreadyPostComment } = useToast(); - const [resultModalOpen, setResultModalOpen] = useState(''); - - const closeModal = () => { - setResultModalOpen(''); - }; - - const closePhoneModal = () => { - setOpenPhoneInputModal(false); - }; + const steps = ['none', 'login', 'comment', 'toolBox']; + const [Funnel, setStep] = useFunnel(steps); const handleOpenModal = () => { if (userInfo.phoneNumber === undefined) { - setOpenPhoneInputModal(true); + setStep('login'); } else { - setResultModalOpen('comment'); + setStep('comment'); } }; @@ -61,23 +54,25 @@ function DailyComment() { {showToast && } - {resultModalOpen === 'comment' && ( - - )} - {resultModalOpen === 'toolBox' && ( - - )} - {openPhoneInputModal && ( - - )} + + + setStep('none')} + option="기대평 댓글 작성" + setResultModalOpen={setStep} + /> + + + setStep('none')} + AlreadyPostComment={AlreadyPostComment} + setResultModalOpen={setStep} + /> + + + setStep('none')} item="툴 박스 1개" /> + + ); } diff --git a/service/src/pages/worldCup/WorldCupResultTop.jsx b/service/src/pages/worldCup/WorldCupResultTop.jsx index 66191d1..39971e5 100644 --- a/service/src/pages/worldCup/WorldCupResultTop.jsx +++ b/service/src/pages/worldCup/WorldCupResultTop.jsx @@ -7,14 +7,16 @@ import { AuthContext } from '@/context/authContext'; import AlreadyGetCarModal from '@/components/modal/AlreadyGetCarModal'; import GetItemModal from '@/components/modal/GetItemModal'; import PhoneInputModal from '@/components/modal/PhoneInputModal'; +import useFunnel from '@/hooks/useFunnel'; import '@/styles/worldCupArrowAnimation.css'; import SlideUpMotion from '@/components/SlideUpMotion/SlideUpMotion'; function WorldCupResultTop({ data }) { const { showToast, messageType, handleShareClick } = useToast(); const { userInfo } = useContext(AuthContext); - const [resultModalOpen, setResultModalOpen] = useState(''); - const [openPhoneInputModal, setOpenPhoneInputModal] = useState(false); + const MODAL_STEPS = ['none', 'phoneInput', 'alreadyGetCar', 'getCar']; + const [Funnel, setStep] = useFunnel(MODAL_STEPS); + const [animate, setAnimate] = useState(false); useEffect(() => { @@ -24,26 +26,26 @@ function WorldCupResultTop({ data }) { return () => clearTimeout(timer); }, []); - const closeModal = () => { - setResultModalOpen(''); - }; - - const closePhoneModal = () => { - setOpenPhoneInputModal(false); - }; - const handleOpenModal = () => { if (userInfo.phoneNumber === undefined) { - setOpenPhoneInputModal(true); + setStep('phoneInput'); } else { if (userInfo.car) { - setResultModalOpen('alreadyGetCar'); + setStep('alreadyGetCar'); } else { - setResultModalOpen('getCar'); + setStep('getCar'); } } }; + const closeModal = () => { + setStep('none'); + }; + + const closePhoneModal = () => { + setStep('none'); + }; + return (
{showToast && } - {resultModalOpen === 'alreadyGetCar' && ( - - )} - {resultModalOpen === 'getCar' && ( - - )} - {openPhoneInputModal ? ( - - ) : null} + + + + + + + + + + +
); }