feat: 질문 폼 생성하기 베이스 배경 이미지 적용 (#490)

* chore: deps

* feat: 설문 없을 때 배경 이미지 적용

* feat: 설문이 있을 때 핸들링 (#491)

* feat: 설문이 있을 때 핸들링

* feat: 연구 결과 피드백 없을 때 마크업 (#492)

* chore: 결과 베이스 이미지

* feat: mobile header props 뚫기

* feat: 결과 베이스

src/components/header/MobileHeader.tsx

@@ -8,18 +8,22 @@ import { HEAD_1_BOLD } from '~/styles/typo';
 // NOTE: MobileHeader 임시 네이밍, 추후 수정 필요
 interface Props {
   title: string;
+  hasMenu?: boolean;
 }
 
-function MobileHeader(props: Props) {
+function MobileHeader({ title, hasMenu = true }: Props) {
   const [isSideMenuOpen, toggleSideMenu] = useBoolean(false);
 
   return (
     <>
       <header css={headerCss}>
-        <h1>{props.title}</h1>
-        <button type="button" css={menuButtonCss} onClick={toggleSideMenu}>
-          <MenuBarIcon color="#394258" />
-        </button>
+        <h1>{title}</h1>
+
+        {hasMenu && (
+          <button type="button" css={menuButtonCss} onClick={toggleSideMenu}>
+            <MenuBarIcon color="#394258" />
+          </button>
+        )}
       </header>
       <div css={blankCss} />
       <SideMenu isOpen={isSideMenuOpen} onClose={toggleSideMenu} />

src/pages/result/base.page.tsx

@@ -0,0 +1,74 @@
+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 (
+    <LoadingHandler isLoading={isLoading} fallback={<FixedSpinner />}>
+      {data && <WhenSurveyIdLoaded surveyId={data.survey_id} />}
+    </LoadingHandler>
+  );
+};
+
+export default ResultBasePage;
+
+interface WhenSurveyIdLoadedProps {
+  surveyId: string;
+}
+
+const WhenSurveyIdLoaded: FC<WhenSurveyIdLoadedProps> = ({ 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 (
+    <>
+      <main css={mainCss}>
+        <MobileHeader title="연구 결과" hasMenu={false} />
+        <Image css={imageCss} alt="빈 폴더" src="/images/result/empty.webp" width={212} height={162} />
+        <span css={spanCss}>아직 도착한 피드백이 없어요</span>
+        <Button color="blue">질문 폼 공유하기</Button>
+      </main>
+      <BottomBar />
+    </>
+  );
+};
+
+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};
+`;

src/pages/survey/base.page.tsx

@@ -1,14 +1,32 @@
+import { useEffect } from 'react';
 import { type NextPage } from 'next';
+import Image from 'next/image';
 import Link from 'next/link';
+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 FixedSpinner from '~/components/loading/FixedSpinner';
+import LoadingHandler from '~/components/loading/LoadingHandler';
+import useGetSurveyIdByUserStatus from '~/hooks/api/surveys/useGetSurveyIdByUserStatus';
 import { HEAD_1 } from '~/styles/typo';
 
 const SurveyBasePage: NextPage = () => {
+  const router = useRouter();
+  const { data, isLoading } = useGetSurveyIdByUserStatus();
+  const hasSurvey = Boolean(data?.survey_id);
+
+  useEffect(
+    function replaceWhenHasSurvey() {
+      if (isLoading) return;
+      if (hasSurvey) router.replace('/result');
+    },
+    [hasSurvey, isLoading, router],
+  );
+
   return (
-    <>
+    <LoadingHandler isLoading={isLoading} fallback={<FixedSpinner />}>
       <main css={mainCss}>
         <h1 css={h1Css}>
           질문 폼을 생성하고
@@ -19,10 +37,14 @@ const SurveyBasePage: NextPage = () => {
         <Link href="/survey/create" css={linkCss}>
           <Button color="blue">폼 생성하기</Button>
         </Link>
+
+        <div css={backgroundImageWrapperCss}>
+          <Image quality={100} src="/images/survey/base.webp" alt="배경" fill objectFit="cover" />
+        </div>
       </main>
 
       <BottomBar />
-    </>
+    </LoadingHandler>
   );
 };
 
@@ -49,3 +71,13 @@ const h1Css = (theme: Theme) => css`
 const linkCss = css`
   text-decoration: none;
 `;
+
+const backgroundImageWrapperCss = (theme: Theme) => css`
+  position: absolute;
+  z-index: ${theme.zIndex.belowDefault};
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+`;