Merge branch 'main' into refactor/yarn-version-up

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/components/header/MobileHeader.tsx

@@ -0,0 +1,63 @@
+import { css, type Theme } from '@emotion/react';
+
+import { MenuBarIcon } from '~/components/icons/MenuIcon';
+import SideMenu from '~/components/sideMenu/SideMenu';
+import useBoolean from '~/hooks/common/useBoolean';
+import { HEAD_1_BOLD } from '~/styles/typo';
+
+// NOTE: MobileHeader 임시 네이밍, 추후 수정 필요
+interface Props {
+  title: string;
+}
+
+function MobileHeader(props: 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>
+      </header>
+      <div css={blankCss} />
+      <SideMenu isOpen={isSideMenuOpen} onClose={toggleSideMenu} />
+    </>
+  );
+}
+
+export default MobileHeader;
+
+const menuButtonCss = css`
+  height: 48px;
+`;
+
+const headerCss = (theme: Theme) => css`
+  position: fixed;
+  z-index: ${theme.zIndex.aboveDefault};
+  top: 0;
+  right: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100vw;
+  max-width: ${theme.size.maxWidth};
+  height: 60px;
+  margin-inline: auto;
+  padding: 0 20px;
+
+  background-color: ${theme.colors.white};
+
+  h1 {
+    ${HEAD_1_BOLD};
+  }
+`;
+
+const blankCss = css`
+  width: 100%;
+  height: 60px;
+`;

src/components/icons/AlignUpdatedIcon.tsx

@@ -0,0 +1,25 @@
+import { type ComponentProps } from 'react';
+
+import type Svg from '../svg/Svg';
+
+function AlignUpdatedIcon({ width = 21, height = 20, color = '#1D2942', ...rest }: ComponentProps<typeof Svg>) {
+  return (
+    <svg
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      color={color}
+      {...rest}
+    >
+      <path
+        d="M10.7 3.28003C14.23 3.28003 17.13 5.89003 17.62 9.28003H19.7L16.2 13.28L12.7 9.28003H15.02C14.7963 8.30114 14.2473 7.42701 13.4626 6.8004C12.678 6.17379 11.7041 5.83171 10.7 5.83003C9.24999 5.83003 7.96999 6.54003 7.15999 7.61003L5.44999 5.66003C6.1045 4.91159 6.91167 4.31195 7.81722 3.90143C8.72278 3.49092 9.70573 3.27903 10.7 3.28003ZM10.3 16.72C6.77999 16.72 3.86999 14.11 3.37999 10.72H1.29999L4.79999 6.72003C5.96999 8.05003 7.12999 9.39003 8.29999 10.72H5.97999C6.2037 11.6989 6.7527 12.5731 7.53733 13.1997C8.32196 13.8263 9.29586 14.1684 10.3 14.17C11.75 14.17 13.03 13.46 13.84 12.39L15.55 14.34C14.8961 15.0892 14.0891 15.6894 13.1834 16.1C12.2777 16.5106 11.2944 16.722 10.3 16.72Z"
+        // fill="#1D2942"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default AlignUpdatedIcon;

src/components/icons/BookmarkIcon.tsx

@@ -8,14 +8,21 @@ interface Props extends ComponentProps<typeof Svg> {
   isBookmarked: boolean;
 }
 
-const BookmarkIcon = ({ size = 32, isBookmarked = false, ...rest }: Props) => {
+const BookmarkIcon = ({ size = 32, isBookmarked = false, color, ...rest }: Props) => {
+  const fillColor = (() => {
+    if (color) return color;
+    if (isBookmarked) return colors.primary_200;
+
+    return colors.gray_300;
+  })();
+
   return (
-    <Svg size={size} {...rest}>
+    <Svg size={size} viewBox="0 0 32 32" {...rest}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.90039 5.81349C6.90039 4.91057 7.43372 4.26562 8.18039 4.26562H23.7537C24.5004 4.26562 25.0337 4.91057 25.0337 5.81349V27.9996C25.0337 28.6446 24.5004 29.0315 24.0737 28.6446L16.6071 23.485C16.1804 23.227 15.7537 23.227 15.3271 23.485L7.86039 28.6446C7.43372 28.9025 6.90039 28.5156 6.90039 27.9996V5.81349Z"
-        fill={isBookmarked ? colors.primary_200 : colors.gray_300}
+        fill={fillColor}
       />
     </Svg>
   );

src/components/icons/CheckCircleIcon.tsx

@@ -0,0 +1,18 @@
+import { type ComponentProps } from 'react';
+
+import Svg from '~/components/svg/Svg';
+
+function CheckCircleIcon({ width = 24, height = 24, color = '#CDE7AC', ...rest }: ComponentProps<typeof Svg>) {
+  return (
+    <Svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.207 10.215L11.624 15.799C11.4359 15.9858 11.1816 16.0906 10.9165 16.0906C10.6514 16.0906 10.3971 15.9858 10.209 15.799L6.793 12.383C6.70016 12.2902 6.62651 12.1799 6.57626 12.0586C6.52601 11.9373 6.50015 11.8073 6.50015 11.676C6.50015 11.4108 6.60549 11.1565 6.793 10.969C6.98051 10.7815 7.23482 10.6762 7.5 10.6762C7.76518 10.6762 8.01949 10.7815 8.207 10.969L10.916 13.678L15.793 8.801C15.8858 8.70816 15.9961 8.63451 16.1174 8.58426C16.2387 8.53401 16.3687 8.50815 16.5 8.50815C16.6313 8.50815 16.7613 8.53401 16.8826 8.58426C17.0039 8.63451 17.1142 8.70816 17.207 8.801C17.2998 8.89384 17.3735 9.00407 17.4237 9.12537C17.474 9.24668 17.4998 9.3767 17.4998 9.508C17.4998 9.6393 17.474 9.76932 17.4237 9.89063C17.3735 10.0119 17.2998 10.1222 17.207 10.215ZM12 1C5.925 1 1 5.925 1 12C1 18.075 5.925 23 12 23C18.075 23 23 18.075 23 12C23 5.925 18.075 1 12 1Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
+
+export default CheckCircleIcon;

src/components/icons/MenuIcon.tsx

@@ -16,3 +16,17 @@ const MenuIcon = ({ size = 24, color = '#B0B0B0', ...rest }: ComponentProps<type
 };
 
 export default MenuIcon;
+
+// TODO: MenuIcon 이랑 다른지 체크 후 삭제
+export const MenuBarIcon = ({ size = 24, color = '#B0B0B0', ...rest }: ComponentProps<typeof Svg>) => {
+  return (
+    <Svg viewBox="0 0 24 24" fill="none" size={size} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM21 18C21 17.4477 20.5523 17 20 17H4C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

src/components/icons/MinusCircleIcon.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentProps } from 'react';
+
+import Svg from '~/components/svg/Svg';
+
+function MinusCircleIcon({ width = 24, height = 24, color = '#F85B81', ...rest }: ComponentProps<typeof Svg>) {
+  return (
+    <Svg viewBox="0 0 24 24" fill="none" width={width} height={height} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.492 13.061H7.492C7.34999 13.0654 7.20856 13.0412 7.07608 12.9898C6.9436 12.9385 6.82279 12.8611 6.7208 12.7622C6.6188 12.6633 6.53771 12.5449 6.48234 12.414C6.42696 12.2832 6.39843 12.1426 6.39843 12.0005C6.39843 11.8584 6.42696 11.7178 6.48234 11.587C6.53771 11.4561 6.6188 11.3377 6.7208 11.2388C6.82279 11.1399 6.9436 11.0625 7.07608 11.0112C7.20856 10.9598 7.34999 10.9356 7.492 10.94H16.492C16.7676 10.9485 17.0291 11.0639 17.2211 11.2619C17.4131 11.4598 17.5204 11.7247 17.5204 12.0005C17.5204 12.2763 17.4131 12.5412 17.2211 12.7391C17.0291 12.9371 16.7676 13.0525 16.492 13.061ZM12 1C5.925 1 1 5.925 1 12C1 18.076 5.925 23 12 23C18.075 23 23 18.076 23 12C23 5.925 18.075 1 12 1Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
+
+export default MinusCircleIcon;