Merge pull request #166 from softeerbootcamp4th/feat/#165/Funnel

Feat/#165/funnel
softeerbootcamp4th · Aug 23, 2024 · c8d36c2 · c8d36c2
2 parents 0af54a5 + fab914a
commit c8d36c2
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 66 deletions.
diff --git a/service/src/components/header/Header.jsx b/service/src/components/header/Header.jsx
@@ -33,11 +33,12 @@ function Header() {
 
   return (
     <header className="absolute flex justify-between w-full bg-transparent px-3000 py-500">
-      <span
+      <NavLink
+        to="/"
         className={`flex items-center justify-center text-detail-1-bold text-neutral-black text-nowrap ${textColor}`}
       >
         CASPER ELECTRONIC
-      </span>
+      </NavLink>
       <div className="flex items-center justify-between">
         <NavLink
           to="/"

diff --git 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/hooks/useFunnel.js 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;
diff --git 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() {
         </button>
       </div>
       {showToast && <ToastMessage messageType={messageType} />}
-      {resultModalOpen === 'comment' && (
-        <CommentInputModal
-          closeCommentModal={closeModal}
-          AlreadyPostComment={AlreadyPostComment}
-          setResultModalOpen={setResultModalOpen}
-        />
-      )}
-      {resultModalOpen === 'toolBox' && (
-        <GetItemModal close={closeModal} item="툴 박스 1개" />
-      )}
-      {openPhoneInputModal && (
-        <PhoneInputModal
-          closePhoneModal={closePhoneModal}
-          option="기대평 댓글 작성"
-          setResultModalOpen={setResultModalOpen}
-        />
-      )}
+      <Funnel>
+        <Funnel.Step name="login">
+          <PhoneInputModal
+            closePhoneModal={() => setStep('none')}
+            option="기대평 댓글 작성"
+            setResultModalOpen={setStep}
+          />
+        </Funnel.Step>
+        <Funnel.Step name="comment">
+          <CommentInputModal
+            closeCommentModal={() => setStep('none')}
+            AlreadyPostComment={AlreadyPostComment}
+            setResultModalOpen={setStep}
+          />
+        </Funnel.Step>
+        <Funnel.Step name="toolBox">
+          <GetItemModal close={() => setStep('none')} item="툴 박스 1개" />
+        </Funnel.Step>
+      </Funnel>
     </div>
   );
 }

diff --git a/service/src/pages/joinEvent/commentList/CommentIndex.jsx b/service/src/pages/joinEvent/commentList/CommentIndex.jsx
@@ -79,11 +79,13 @@ function CommentIndex() {
         )}
       </div>
       <div className="mb-2000">
-        <PagingComment
-          page={currentPage}
-          onChangePage={onChangePage}
-          count={totalCommentCount}
-        />
+        {commentList.length > 0 && (
+          <PagingComment
+            page={currentPage}
+            onChangePage={onChangePage}
+            count={totalCommentCount}
+          />
+        )}
       </div>
     </div>
   );

diff --git 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/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 (
     <div className="relative flex flex-col items-center pt-2000">
       <img
@@ -94,19 +96,21 @@ function WorldCupResultTop({ data }) {
         </div>
       </SlideUpMotion>
       {showToast && <ToastMessage messageType={messageType} />}
-      {resultModalOpen === 'alreadyGetCar' && (
-        <AlreadyGetCarModal close={closeModal} />
-      )}
-      {resultModalOpen === 'getCar' && (
-        <GetItemModal close={closeModal} item="자동차 아이템" />
-      )}
-      {openPhoneInputModal ? (
-        <PhoneInputModal
-          closePhoneModal={closePhoneModal}
-          option="자동차 아이템"
-          setResultModalOpen={setResultModalOpen}
-        />
-      ) : null}
+      <Funnel>
+        <Funnel.Step name="phoneInput">
+          <PhoneInputModal
+            closePhoneModal={closePhoneModal}
+            option="자동차 아이템"
+            setResultModalOpen={setStep}
+          />
+        </Funnel.Step>
+        <Funnel.Step name="alreadyGetCar">
+          <AlreadyGetCarModal close={closeModal} />
+        </Funnel.Step>
+        <Funnel.Step name="getCar">
+          <GetItemModal close={closeModal} item="자동차 아이템" />
+        </Funnel.Step>
+      </Funnel>
     </div>
   );
 }

diff --git 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;