feat: 하단 바 추가 (#484)

* feat: 하단 바 추가

* feat: 리뷰 적용

* 질문 폼 생성 베이스 페이지 개설 + BottomBar 로직 고도화 (#485)

* feat: �질문 폼 베이스

* refactor: bottom bar

---------

Co-authored-by: hyesungoh <haesungoh414@gmail.com>

src/components/bottomBar/BottomBar.stories.tsx

@@ -0,0 +1,18 @@
+import { type Meta } from '@storybook/react';
+
+import BottomBar from './BottomBar';
+
+const meta: Meta<typeof BottomBar> = {
+  title: 'BottomBar',
+  component: BottomBar,
+};
+
+export default meta;
+
+export function Default() {
+  return (
+    <div>
+      <BottomBar />
+    </div>
+  );
+}

src/components/bottomBar/BottomBar.tsx

@@ -0,0 +1,118 @@
+import { type ComponentType } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
+import { css, type Theme, useTheme } from '@emotion/react';
+
+import HomeIcon from '~/components/bottomBar/HomeIcon';
+import MypageIcon from '~/components/bottomBar/MypageIcon';
+import QuestionIcon from '~/components/bottomBar/QuestionIcon';
+import useGetSurveyIdByUserStatus from '~/hooks/api/surveys/useGetSurveyIdByUserStatus';
+
+interface TabItem {
+  text: string;
+  path: string;
+  icon: ComponentType<{ color?: string }>;
+}
+
+const BottomBar = () => {
+  const theme = useTheme();
+  const router = useRouter();
+
+  const currentPath = router.pathname;
+  const { data, 생성한_질문폼이_있는가 } = useCheckSurveyId();
+
+  const TAB_ITEMS: TabItem[] = [
+    {
+      text: '홈',
+      path: '/gallery',
+      icon: HomeIcon,
+    },
+    {
+      text: '질문폼',
+      path: 생성한_질문폼이_있는가 ? '/result' : '/survey/base',
+      icon: QuestionIcon,
+    },
+    {
+      text: '내 명함',
+      path: `/dna/${data?.survey_id}`,
+      icon: MypageIcon,
+    },
+  ];
+
+  const getIsSelected = (path: string | string[]) => {
+    if (Array.isArray(path)) return path.includes(currentPath);
+
+    return path === currentPath;
+  };
+
+  const getIconColor = (path: string | string[]) => {
+    const isSelected = getIsSelected(path);
+    if (isSelected) return theme.colors.primary_300;
+
+    return theme.colors.gray_300;
+  };
+
+  return (
+    <footer css={BottomBarCss(theme)}>
+      {TAB_ITEMS.map((item) => (
+        <Link key={item.path} href={item.path} css={[IconBoxCss(theme), getIsSelected(item.path) && selectedCss]}>
+          <item.icon color={getIconColor(item.path)} />
+          <span>{item.text}</span>
+        </Link>
+      ))}
+    </footer>
+  );
+};
+
+export default BottomBar;
+
+const BottomBarCss = (theme: Theme) => css`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  gap: 86px;
+  align-items: center;
+  justify-content: center;
+
+  width: 100vw;
+  height: 73px;
+  padding-top: 10px;
+
+  background-color: ${theme.colors.white};
+`;
+
+const IconBoxCss = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+
+  text-decoration: none;
+
+  span {
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    color: ${theme.colors.gray_300};
+    text-align: center;
+  }
+`;
+
+const selectedCss = (theme: Theme) => css`
+  span {
+    color: ${theme.colors.primary_300};
+  }
+`;
+
+const useCheckSurveyId = () => {
+  const { status } = useSession();
+
+  const { isLoading, data } = useGetSurveyIdByUserStatus({ enabled: status === 'authenticated' });
+  const 생성한_질문폼이_있는가 = Boolean(data?.survey_id);
+
+  return { isLoading, data, 생성한_질문폼이_있는가 };
+};

src/components/bottomBar/HomeIcon.tsx

@@ -0,0 +1,21 @@
+import Svg from '~/components/svg/Svg';
+
+interface Props {
+  color?: string;
+}
+
+const HomeIcon = ({ color }: Props) => {
+  return (
+    <Svg width={22} height={22} viewBox="0 0 22 22">
+      <rect width="22" height="22" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.8906 2.73959C10.5624 2.29172 11.4376 2.29172 12.1094 2.73959L19.1094 7.40625C19.6658 7.77718 20 8.40165 20 9.07035V18C20 19.1046 19.1046 20 18 20H4C2.89543 20 2 19.1046 2 18V9.07035C2 8.40165 2.3342 7.77718 2.8906 7.40625L9.8906 2.73959Z"
+        fill={color ? color : '#C9CFDF'}
+      />
+    </Svg>
+  );
+};
+
+export default HomeIcon;

src/components/bottomBar/MypageIcon.tsx

@@ -0,0 +1,20 @@
+import Svg from '~/components/svg/Svg';
+
+interface Props {
+  color?: string;
+}
+
+const MypageIcon = ({ color }: Props) => {
+  return (
+    <Svg width={22} height={22} viewBox="0 0 22 22">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 11C13.7614 11 16 8.76142 16 6C16 3.23858 13.7614 1 11 1C8.23858 1 6 3.23858 6 6C6 8.76142 8.23858 11 11 11ZM20 18.0167C20 15.17 15.8254 13 11 13L10.7113 13.0026C6.00926 13.0871 2 15.227 2 18.0167C2 19.1141 3.48465 19.9485 5.65309 20.4521L6.12793 20.5549L6.70867 20.6623L7.31292 20.7553L7.56058 20.7885L8.06512 20.8477L8.58074 20.8974L8.84226 20.9187L9.3718 20.9539L10.0441 20.984L10.7252 20.9986L10.9995 21L11.6845 20.9924L12.3616 20.969L12.8956 20.9392L13.1596 20.9205L13.8093 20.8634L14.4421 20.7912L14.9343 20.7228L15.4124 20.6452L15.6681 20.5986C18.2011 20.1198 20 19.229 20 18.0167Z"
+        fill={color ? color : '#C9CFDF'}
+      />
+    </Svg>
+  );
+};
+
+export default MypageIcon;

src/components/bottomBar/QuestionIcon.tsx

@@ -0,0 +1,22 @@
+import Svg from '~/components/svg/Svg';
+
+interface Props {
+  color?: string;
+}
+
+const QuestionIcon = ({ color }: Props) => {
+  return (
+    <Svg width={19} height={18} viewBox="0 0 19 18">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.1 0C18.1493 0 19 0.850659 19 1.9V12.1C19 13.1493 18.1493 14 17.1 14H13.1764L10.1994 17.239C9.82306 17.6485 9.17694 17.6485 8.80055 17.239L5.82357 14H1.9C0.850658 14 0 13.1493 0 12.1V1.9C0 0.850658 0.850659 0 1.9 0H17.1Z"
+        fill={color ? color : '#C9CFDF'}
+      />
+      <rect x="4" y="8" width="11" height="2" rx="1" fill="white" />
+      <rect x="4" y="4" width="11" height="2" rx="1" fill="white" />
+    </Svg>
+  );
+};
+
+export default QuestionIcon;

src/pages/gallery/index.page.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { css } from '@emotion/react';
 
+import BottomBar from '~/components/bottomBar/BottomBar';
 import Header from '~/components/header/MobileHeader';
 import StaggerWrapper from '~/components/stagger/StaggerWrapper';
 import Card from '~/features/gallery/Card';
@@ -52,6 +53,7 @@ function Gallery() {
           />
         )}
       </div>
+      <BottomBar />
     </div>
   );
 }

src/pages/index.page.tsx

@@ -55,7 +55,6 @@ const headingWrapperCss = css`
 
 const titleCss = css`
   ${HEAD_2_BOLD}
-
   margin-top: 80px;
   color: #fff;
 `;

src/pages/survey/base.page.tsx

@@ -0,0 +1,51 @@
+import { type NextPage } from 'next';
+import Link from 'next/link';
+import { css, type Theme } from '@emotion/react';
+
+import BottomBar from '~/components/bottomBar/BottomBar';
+import Button from '~/components/button/Button';
+import { HEAD_1 } from '~/styles/typo';
+
+const SurveyBasePage: NextPage = () => {
+  return (
+    <>
+      <main css={mainCss}>
+        <h1 css={h1Css}>
+          질문 폼을 생성하고
+          <br />
+          동료에게 피드백을 요청해보세요
+        </h1>
+
+        <Link href="/survey/create" css={linkCss}>
+          <Button color="blue">폼 생성하기</Button>
+        </Link>
+      </main>
+
+      <BottomBar />
+    </>
+  );
+};
+
+export default SurveyBasePage;
+
+const mainCss = css`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 100dvh;
+  padding: 120px 0 130px;
+`;
+
+const h1Css = (theme: Theme) => css`
+  ${HEAD_1};
+  color: ${theme.colors.black};
+  text-align: center;
+`;
+
+const linkCss = css`
+  text-decoration: none;
+`;

src/pages/survey/create.page.tsx

@@ -2,6 +2,7 @@ import { useSession } from 'next-auth/react';
 import { css, type Theme } from '@emotion/react';
 import { useAtom, useAtomValue } from 'jotai';
 
+import BottomBar from '~/components/bottomBar/BottomBar';
 import CTAButton from '~/components/button/CTAButton';
 import Header from '~/components/header/Header';
 import SEO from '~/components/SEO/SEO';
@@ -82,6 +83,7 @@ const CreateSurveyPage = () => {
 
         <CreateDialog isShowing={isDialogShowing} onClose={toggleDialogShowing} onAction={onSubmit} />
         <CreateStopDialog isShowing={isDialogOpen} onClose={onDialogClose} onAction={onStop} />
+        <BottomBar />
       </main>
     </>
   );
@@ -102,10 +104,8 @@ const containerCss = css`
 
 const deleteButtonCss = (isDeleteMode: boolean, theme: Theme) => css`
   ${BODY_1}
-
   color: ${isDeleteMode ? theme.colors.primary_200 : theme.colors.red};
   ${isDeleteMode && 'text-decoration: underline;'}
-
   transition: color 0.2s ease-in-out;
 
   &:disabled {