Merge branch 'develop-frontend' into feature/#553

frontend/.storybook/preview.tsx

@@ -1,11 +1,12 @@
+import { Global, ThemeProvider } from '@emotion/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+
+import { BrowserRouter } from 'react-router-dom';
 import type { Preview } from '@storybook/react';
 import React from 'react';
 import reset from '../src/common/reset.style';
-import { Global, ThemeProvider } from '@emotion/react';
 import { theme } from '../src/common/theme/theme.style';
-import { initialize, mswDecorator } from 'msw-storybook-addon';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { BrowserRouter } from 'react-router-dom';
 
 initialize();
 
@@ -15,7 +16,6 @@ const preview: Preview = {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i,
       },
     },
   },

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { Global, ThemeProvider } from '@emotion/react';
 import { useEffect, useMemo } from 'react';
 
+import BackgroundShadow from '@_components/BackgroundShadow/BackgroundShadow';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import createQueryClient from './queryClient';
@@ -21,11 +22,14 @@ export default function App() {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
-      <Global styles={[reset, fonts]} />
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
-    </ThemeProvider>
+    <>
+      <ThemeProvider theme={theme}>
+        <Global styles={[reset, fonts]} />
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </ThemeProvider>
+      <BackgroundShadow />
+    </>
   );
 }

frontend/src/apis/endPoints.ts

@@ -9,6 +9,7 @@ export function addBaseUrl(
     endpoint = '/darakbang/' + (getLastDarakbangId() || 0) + endpoint;
   return API_BASE_URL + endpoint;
 }
+
 const API_URL = {
   darakbang: {
     role: addBaseUrl('/role', true),
@@ -24,6 +25,13 @@ const API_URL = {
   interest: addBaseUrl('/interest', true),
   please: addBaseUrl('/please', true),
   notification: addBaseUrl('/notification', true),
+  bet: {
+    all: addBaseUrl('/bet', true),
+    detail: (betId: number) => addBaseUrl(`/bet/${betId}`, true),
+    create: addBaseUrl('/bet', true),
+    participate: (betId: number) => addBaseUrl(`/bet/${betId}`, true),
+    result: (betId: number) => addBaseUrl(`/bet/${betId}/result`, true),
+  },
   kakaoOAuth: addBaseUrl('/auth/kakao/oauth', false),
 };
 
@@ -37,5 +45,7 @@ const ENDPOINTS = {
   interest: 'interest',
   please: 'please',
   notification: 'notification',
+  bet: 'bet',
 };
+
 export { ENDPOINTS, API_URL };

frontend/src/apis/gets.ts

@@ -6,6 +6,8 @@ import {
   Role,
 } from '@_types/index';
 import {
+  GetBet,
+  GetBets,
   GetChamyoAll,
   GetChamyoMine,
   GetChat,
@@ -187,3 +189,26 @@ export const getDarakbangNameById = async () => {
   const json: GetDarakbangNameByCode = await response.json();
   return json.data.name;
 };
+
+export const getBets = async () => {
+  const response = await ApiClient.getWithLastDarakbangId('/bet');
+
+  const json: GetBets = await response.json();
+  return json.data.bets;
+};
+
+export const getBet = async (betId: number) => {
+  const response = await ApiClient.getWithLastDarakbangId(`/bet/${betId}`);
+
+  const json: GetBet = await response.json();
+  return json.data;
+};
+
+export const getBetResult = async (betId: number) => {
+  const response = await ApiClient.getWithLastDarakbangId(
+    `/bet/${betId}/result`,
+  );
+
+  const json = await response.json();
+  return json.data.nickname;
+};

frontend/src/apis/posts.ts

@@ -1,5 +1,5 @@
-import { MoimInputInfo, PleaseInfoInput } from '@_types/index';
-import { PostMoim, PostMoimBody } from './responseTypes';
+import { BetInputInfo, MoimInputInfo, PleaseInfoInput } from '@_types/index';
+import { PostBet, PostMoim, PostMoimBody } from './responseTypes';
 
 import ApiClient from './apiClient';
 
@@ -78,13 +78,15 @@ export const postConfirmDatetime = async (
     date,
     time,
   });
+  return moimId;
 };
 
 export const postConfirmPlace = async (moimId: number, place: string) => {
   await ApiClient.postWithLastDarakbangId('/chat/place', {
     moimId,
     place,
   });
+  return moimId;
 };
 
 export const postPlease = async (please: PleaseInfoInput) => {
@@ -132,3 +134,18 @@ export const postDarakbangEntrance = async ({
 
   return json.data as number;
 };
+
+export const postBet = async (bet: BetInputInfo) => {
+  const data = await ApiClient.postWithLastDarakbangId('/bet', bet);
+
+  const json: PostBet = await data.json();
+  return json.data.betId;
+};
+
+export const postBetResult = async (betId: number) => {
+  await ApiClient.postWithLastDarakbangId(`/bet/${betId}/result`);
+};
+
+export const postJoinBet = async (betId: number) => {
+  await ApiClient.postWithLastDarakbangId(`/bet/${betId}`);
+};

frontend/src/apis/responseTypes.ts

@@ -1,4 +1,6 @@
 import {
+  BetDetail,
+  BetSummary,
   Chat,
   ChattingPreview,
   Darakbang,
@@ -107,3 +109,17 @@ export interface GetDarakbangNameByCode {
     name: string;
   };
 }
+
+export interface GetBets {
+  data: { bets: BetSummary[] };
+}
+
+export interface GetBet {
+  data: BetDetail;
+}
+
+export interface PostBet {
+  data: {
+    betId: number;
+  };
+}

frontend/src/common/common.style.ts

@@ -12,4 +12,12 @@ export const common = {
       display: none;
     }
   `,
+  iphoneBottom: css`
+    ${navigator.userAgent.toLowerCase().includes('iphone')
+      ? `/* stylelint-disable */
+    padding-bottom: constant(safe-area-inset-bottom);
+    /* stylelint-enable */
+      'padding-bottom: env(safe-area-inset-bottom);`
+      : ''}
+  `,
 };

frontend/src/common/getRoutes.ts

@@ -14,17 +14,28 @@ const GET_ROUTES = {
     moimParticipateComplete: () =>
       getNowDarakbangRoute() + '/moim/participation-complete',
     modify: (moimId: number) => getNowDarakbangRoute() + '/modify/' + moimId,
+
     chat: () => getNowDarakbangRoute() + '/chat',
     chattingRoom: (moimId: number) =>
       getNowDarakbangRoute() + '/chatting-room/' + moimId,
+
     please: () => getNowDarakbangRoute() + '/please',
     addPlease: () => getNowDarakbangRoute() + '/please/creation',
+
     myPage: () => getNowDarakbangRoute() + '/my-page',
+
     notification: () => getNowDarakbangRoute() + '/notification',
+
     darakbangManagement: () => getNowDarakbangRoute() + '/darakbang-management',
     darakbangMembers: () => getNowDarakbangRoute() + '/darakbang-members',
     darakbangInvitation: () => getNowDarakbangRoute() + '/darakbang-invitation',
     darakbangLanding: () => getNowDarakbangRoute() + '/darakbang-landing',
+
+    bet: () => getNowDarakbangRoute() + '/bet',
+    betCreation: () => getNowDarakbangRoute() + '/bet/creation',
+    betDetail: (betId: number) => getNowDarakbangRoute() + '/bet/' + betId,
+    betResult: (betId: number) =>
+      getNowDarakbangRoute() + '/bet/' + betId + '/result',
   },
 };
 export default GET_ROUTES;

frontend/src/components/BackgroundShadow/BackgroundShadow.styles.ts

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+
+export const shadow = css`
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+
+  width: 600px;
+  height: 100vh;
+  margin: 0 auto;
+
+  line-height: 1;
+
+  box-shadow:
+    0 10px 20px rgb(0 0 0 / 19%),
+    0 6px 6px rgb(0 0 0 / 23%);
+`;

frontend/src/components/BackgroundShadow/BackgroundShadow.tsx

@@ -0,0 +1,5 @@
+import * as S from './BackgroundShadow.styles';
+
+export default function BackgroundShadow() {
+  return <div css={S.shadow} />;
+}

frontend/src/components/Funnel/FunnelInput/FunnelInput.style.ts

@@ -1,7 +1,7 @@
 import { Theme, css } from '@emotion/react';
 
 export const input = (props: { theme: Theme }) => css`
-  ${props.theme.typography.b3}
+  ${props.theme.typography.b2}
   box-sizing: border-box;
   width: 100%;
   height: 4.4rem;

frontend/src/components/Funnel/FunnelRadioCardGroup/FunnelRadioCardGroup.style.ts

@@ -1,7 +1,14 @@
 import { css } from '@emotion/react';
 
-export const container = css`
+export const container = ({ columns }: { columns: number }) => css`
+  ${columns === 1
+    ? `
   display: flex;
-  flex-direction: column;
+  flex-direction: column;  
+    `
+    : `
+  display: grid;
+  grid-template-columns: repeat(${columns}, 1fr);
+    `}
   gap: 24px;
 `;

frontend/src/components/Funnel/FunnelRadioCardGroup/FunnelRadioCardGroup.tsx

@@ -2,10 +2,15 @@ import { PropsWithChildren } from 'react';
 import * as S from './FunnelRadioCardGroup.style';
 import FunnelRadioCardGroupOption from './FunnelRadioCardGroupOption/FunnelRadioCardGroupOption';
 
-function FunnelRadioCardGroup(props: PropsWithChildren) {
-  const { children } = props;
+interface FunnelRadioCardGroupProps {
+  columns?: number;
+}
+function FunnelRadioCardGroup(
+  props: PropsWithChildren<FunnelRadioCardGroupProps>,
+) {
+  const { children, columns = 1 } = props;
 
-  return <div css={S.container}>{children}</div>;
+  return <div css={S.container({ columns })}>{children}</div>;
 }
 
 FunnelRadioCardGroup.Option = FunnelRadioCardGroupOption;

frontend/src/components/Funnel/FunnelRadioCardGroup/FunnelRadioCardGroupOption/FunnelRadioCardGroupOption.style.ts

@@ -3,14 +3,16 @@ import { css, Theme } from '@emotion/react';
 export const container = ({
   theme,
   isSelected,
+  description,
 }: {
   theme: Theme;
   isSelected: boolean;
+  description?: string;
 }) => css`
   display: flex;
   justify-content: space-between;
 
-  padding: 30px 20px 22px;
+  padding: ${description ? `30px 20px 22px` : `12px`};
 
   color: ${isSelected
     ? theme.colorPalette.white[100]
@@ -19,7 +21,7 @@ export const container = ({
   background-color: ${isSelected
     ? theme.semantic.primary
     : theme.colorPalette.orange[50]};
-  border-radius: 24px;
+  border-radius: ${description ? `24px` : `8px`};
 `;
 
 export const contentContainer = () => css`

frontend/src/components/Funnel/FunnelRadioCardGroup/FunnelRadioCardGroupOption/FunnelRadioCardGroupOption.tsx

@@ -4,7 +4,7 @@ import SelectionIcon from '@_components/Icons/SelectionIcon';
 
 interface FunnelRadioCardGroupOptionProps {
   title: string;
-  description: string;
+  description?: string;
   isSelected: boolean;
   onSelect: () => void;
 }
@@ -17,10 +17,13 @@ export default function FunnelRadioCardGroupOption(
   const theme = useTheme();
 
   return (
-    <div css={S.container({ theme, isSelected })} onClick={onSelect}>
+    <div
+      css={S.container({ theme, isSelected, description })}
+      onClick={onSelect}
+    >
       <div css={S.contentContainer()}>
         <h2 css={theme.typography.s1}>{title}</h2>
-        <p>{description}</p>
+        {description && <p css={theme.typography.s2}>{description}</p>}
       </div>
       <div css={S.selectionContainer}>
         <SelectionIcon isSelected={isSelected} />

frontend/src/components/Icons/Hamburger.tsx

@@ -0,0 +1,31 @@
+import { SVGAttributes } from 'react';
+
+interface HamburgerProps extends SVGAttributes<HTMLOrSVGElement> {
+  color?: string;
+  strokeWidth?: number;
+  width?: number;
+  height?: number;
+}
+
+export default function Hamburger(props: HamburgerProps) {
+  const { color, strokeWidth, width, height } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width || '25'}
+      height={height || '18'}
+      viewBox="0 0 25 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M1.47559 1H23.4756M1.47559 9H23.4756M1.47559 17H23.4756"
+        stroke={color || 'black'}
+        strokeWidth={strokeWidth || '2'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}