From 13c0a9e89079bfa0fd8f4d2089db0d9819a299b1 Mon Sep 17 00:00:00 2001 From: hyesung oh Date: Tue, 26 Mar 2024 20:51:22 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=97=86=EC=9D=84=20?= =?UTF-8?q?=EB=95=8C,=20=EA=B3=B5=EC=9C=A0=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20(#496)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 피드백 없을 때 버튼 로직 * style: bottom bar 높이 리메이너 적용 * feat: 결과 페이지 바텀 바 적용 * chore: lint * test: callback url 때문에 테스트 꺠지는 것 수정 (#497) --- src/components/bottomBar/BottomBar.tsx | 21 ++++-- .../PublishMyCard/InducePublishCard.tsx | 9 --- src/features/home/KakaoLogin.test.tsx | 2 +- src/pages/result/SurveyIdLoaded.tsx | 3 +- src/pages/result/WhenEmptyFeedback.tsx | 69 +++++++++++++++++ src/pages/result/base.page.tsx | 74 ------------------- src/pages/result/index.page.tsx | 35 ++++++--- 7 files changed, 107 insertions(+), 106 deletions(-) create mode 100644 src/pages/result/WhenEmptyFeedback.tsx delete mode 100644 src/pages/result/base.page.tsx diff --git a/src/components/bottomBar/BottomBar.tsx b/src/components/bottomBar/BottomBar.tsx index a126cc68..7a60172c 100644 --- a/src/components/bottomBar/BottomBar.tsx +++ b/src/components/bottomBar/BottomBar.tsx @@ -54,14 +54,18 @@ const BottomBar = () => { }; return ( - + <> + + {/* NOTE: height remainer */} +
+ ); }; @@ -69,6 +73,7 @@ export default BottomBar; const BottomBarCss = (theme: Theme) => css` position: fixed; + z-index: ${theme.zIndex.fixed}; bottom: 0; left: 0; diff --git a/src/features/gallery/PublishMyCard/InducePublishCard.tsx b/src/features/gallery/PublishMyCard/InducePublishCard.tsx index 3581b840..fcc33867 100644 --- a/src/features/gallery/PublishMyCard/InducePublishCard.tsx +++ b/src/features/gallery/PublishMyCard/InducePublishCard.tsx @@ -69,12 +69,3 @@ const imageCss = css` top: 49px; right: 24px; `; - -const closeButtonCss = css` - position: absolute; - top: 0; - right: 0; - - width: fit-content; - padding: 10px; -`; diff --git a/src/features/home/KakaoLogin.test.tsx b/src/features/home/KakaoLogin.test.tsx index c6be50f5..d69491e5 100644 --- a/src/features/home/KakaoLogin.test.tsx +++ b/src/features/home/KakaoLogin.test.tsx @@ -31,7 +31,7 @@ describe('components/kakaoLoginButton/KakaoLoginButton', () => { render(); const loginButton = screen.getByRole('button'); fireEvent.click(loginButton); - expect(signIn).toHaveBeenCalledWith('kakao'); + expect(signIn).toBeCalled(); }); // TODO: 추후 로그아웃 기능 구현이 필요하다면 주석 살리기 diff --git a/src/pages/result/SurveyIdLoaded.tsx b/src/pages/result/SurveyIdLoaded.tsx index 705e58ee..7986bb3d 100644 --- a/src/pages/result/SurveyIdLoaded.tsx +++ b/src/pages/result/SurveyIdLoaded.tsx @@ -322,7 +322,6 @@ const pillContainer = css` display: flex; flex-wrap: wrap; gap: 11px 10px; - white-space: pre-wrap; `; @@ -461,7 +460,7 @@ const bubbleVariants: Variants = { const topIconCss = css` position: fixed; right: 13px; - bottom: 60px; + bottom: 68px; `; const getTendencyCount = ( diff --git a/src/pages/result/WhenEmptyFeedback.tsx b/src/pages/result/WhenEmptyFeedback.tsx new file mode 100644 index 00000000..e2f7f04d --- /dev/null +++ b/src/pages/result/WhenEmptyFeedback.tsx @@ -0,0 +1,69 @@ +import { type FC } from 'react'; +import Image from 'next/image'; +import { css, type Theme } from '@emotion/react'; + +import BottomBar from '~/components/bottomBar/BottomBar'; +import Button from '~/components/button/Button'; +import CopyLink from '~/components/copyLink/CopyLink'; +import MobileHeader from '~/components/header/MobileHeader'; +import LinkIcon from '~/components/icons/LinkIcon'; +import Toast from '~/components/toast/Toast'; +import useToast from '~/components/toast/useToast'; +import { HEAD_2_BOLD } from '~/styles/typo'; + +interface Props { + surveyId: string; +} + +const WhenEmptyFeeback: FC = ({ surveyId }) => { + const { fireToast } = useToast(); + + const onCopyLink = () => { + fireToast({ + content: ( + <> + + 나의 질문 폼 링크가 복사되었어요 + + ), + higherThanCTA: true, + }); + }; + + return ( + <> +
+ + 빈 폴더 + 아직 도착한 피드백이 없어요 + + + + +
+ + + ); +}; + +export default WhenEmptyFeeback; + +const mainCss = css` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + height: 100dvh; +`; + +const imageCss = css` + margin-bottom: 30px; +`; + +const spanCss = (theme: Theme) => css` + ${HEAD_2_BOLD}; + margin-bottom: 32px; + color: ${theme.colors.gray_400}; +`; diff --git a/src/pages/result/base.page.tsx b/src/pages/result/base.page.tsx deleted file mode 100644 index 03dd69a2..00000000 --- a/src/pages/result/base.page.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { type FC, useEffect } from 'react'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; -import { css, type Theme } from '@emotion/react'; - -import BottomBar from '~/components/bottomBar/BottomBar'; -import Button from '~/components/button/Button'; -import MobileHeader from '~/components/header/MobileHeader'; -import FixedSpinner from '~/components/loading/FixedSpinner'; -import LoadingHandler from '~/components/loading/LoadingHandler'; -import useGetFeedbackSummaryBySurveyId from '~/hooks/api/feedbacks/useGetFeedbackSummaryBySurveyId'; -import useGetSurveyIdByUserStatus from '~/hooks/api/surveys/useGetSurveyIdByUserStatus'; -import { HEAD_2_BOLD } from '~/styles/typo'; - -const ResultBasePage: FC = () => { - const { data, isLoading } = useGetSurveyIdByUserStatus(); - - return ( - }> - {data && } - - ); -}; - -export default ResultBasePage; - -interface WhenSurveyIdLoadedProps { - surveyId: string; -} - -const WhenSurveyIdLoaded: FC = ({ surveyId }) => { - const router = useRouter(); - const { data } = useGetFeedbackSummaryBySurveyId(surveyId); - - useEffect( - function replaceWhenHasFeedback() { - if (!data) return; - if (data.all_feedback_count > 0) router.replace('/result'); - }, - [data, router], - ); - - return ( - <> -
- - 빈 폴더 - 아직 도착한 피드백이 없어요 - -
- - - ); -}; - -const mainCss = css` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - width: 100%; - height: 100dvh; -`; - -const imageCss = css` - margin-bottom: 30px; -`; - -const spanCss = (theme: Theme) => css` - ${HEAD_2_BOLD}; - margin-bottom: 32px; - color: ${theme.colors.gray_400}; -`; diff --git a/src/pages/result/index.page.tsx b/src/pages/result/index.page.tsx index 7b8e70c0..85ae9e5e 100644 --- a/src/pages/result/index.page.tsx +++ b/src/pages/result/index.page.tsx @@ -1,27 +1,21 @@ -import { type ReactElement } from 'react'; +import { type FC, type ReactElement } from 'react'; import { useSession } from 'next-auth/react'; +import BottomBar from '~/components/bottomBar/BottomBar'; import LayoutPaddingTo23 from '~/components/layout/LayoutPaddingTo23'; import FixedSpinner from '~/components/loading/FixedSpinner'; import LoadingHandler from '~/components/loading/LoadingHandler'; import SEO from '~/components/SEO/SEO'; import useToast from '~/components/toast/useToast'; +import useGetFeedbackSummaryBySurveyId from '~/hooks/api/feedbacks/useGetFeedbackSummaryBySurveyId'; import useGetSurveyIdByUserStatus from '~/hooks/api/surveys/useGetSurveyIdByUserStatus'; import useDidUpdate from '~/hooks/lifeCycle/useDidUpdate'; import useInternalRouter from '~/hooks/router/useInternalRouter'; import SurveyIdLoaded from './SurveyIdLoaded'; +import WhenEmptyFeedback from './WhenEmptyFeedback'; const Result = () => { - // NOTE: 아래 3개의 훅은 필요한 곳 찾아 사용 필요 - // const { data } = useGetFeedbackById(1); - // const { data: ass } = useGetAllFeedbacksBySurveyId('123'); - // const { data } = useGetAllReviewersBySurveyId('123'); - - // NOTE: 현재 쌓인 데이터가 없어서, 개발할 시 mock에 요청 보내면서 해당 데이터 사용 X - // }> - // {data && } - // 위처럼 변경해서 개발 필요 const { isLoading, data } = useCheckSurveyId(); return ( @@ -29,9 +23,10 @@ const Result = () => { }> - {/* TODO: useCheckSurveyId 의 데이터 넣기 필요 */} - {data && } + {data && } + + ); }; @@ -62,3 +57,19 @@ const useCheckSurveyId = () => { return { isLoading, data }; }; + +interface FeedbackCountHandlerProps { + surveyId: string; +} + +const FeedbackCountHandler: FC = ({ surveyId }) => { + const { data, isLoading } = useGetFeedbackSummaryBySurveyId(surveyId); + + const isFeedbackEmpty = data && data.all_feedback_count === 0; + + return ( + }> + {isFeedbackEmpty ? : } + + ); +};