Merge pull request #603 from woowacourse-teams/feature/#568

안내면진다 기능 개발 완료

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';
 
@@ -134,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/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/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/ScissorsIcon.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from '@emotion/react';
+
+interface ScissorsIconProps {
+  isActive: boolean;
+}
+
+export default function ScissorsIcon(props: ScissorsIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="25"
+      height="22"
+      viewBox="0 0 25 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.625 19.625C10.625 18.5895 11.4645 17.75 12.5 17.75V17.375H11C9.96448 17.375 9.125 16.5356 9.125 15.5C9.125 14.4645 9.96448 13.625 11 13.625H12.5V13.25H2.75C1.50734 13.25 0.5 12.2427 0.5 11C0.5 9.75737 1.50734 8.75003 2.75 8.75003H12.5V8.11384L4.1773 4.84478C3.0207 4.39037 2.45145 3.08439 2.90581 1.92784C3.36017 0.771296 4.66616 0.202046 5.82275 0.656405L14.745 4.16101L15.9109 2.70367C16.4877 1.98269 17.5036 1.7889 18.3053 2.24706L23.5553 5.24706C23.8423 5.41107 24.0808 5.64803 24.2467 5.93392C24.4126 6.21982 24.5 6.54449 24.5 6.87503V18.125C24.5 18.9951 23.9014 19.7509 23.0545 19.9502L16.6795 21.4502C16.5387 21.4833 16.3946 21.5 16.25 21.5H12.5C11.4645 21.5 10.625 20.6606 10.625 19.625Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}

frontend/src/components/Icons/StarIcons/StarFourIcon.tsx

@@ -0,0 +1,20 @@
+export default function StarFourIcon() {
+  return (
+    <svg
+      width="29"
+      height="29"
+      viewBox="0 0 29 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.66797 18.5256L11.7263 18.0465C11.8347 18.0418 11.9426 18.0647 12.0398 18.113C12.1371 18.1614 12.2204 18.2335 12.2822 18.3228L17.3696 25.8329C17.4477 25.9464 17.5606 26.0315 17.6913 26.0751C17.822 26.1187 17.9634 26.1186 18.094 26.0747C18.2246 26.0308 18.3374 25.9456 18.4153 25.8319C18.4931 25.7182 18.5318 25.5822 18.5255 25.4445L18.0464 16.3862C18.0418 16.2778 18.0646 16.1699 18.113 16.0727C18.1613 15.9754 18.2335 15.8921 18.3228 15.8303L25.8328 10.7429C25.9464 10.6648 26.0314 10.5519 26.075 10.4212C26.1186 10.2905 26.1185 10.1491 26.0746 10.0185C26.0307 9.88786 25.9455 9.77508 25.8318 9.69723C25.7181 9.61937 25.5821 9.58068 25.4445 9.587L16.3862 10.0661C16.2777 10.0707 16.1698 10.0479 16.0726 9.99953C15.9754 9.95121 15.892 9.87903 15.8302 9.78973L10.7429 2.27968C10.6648 2.16614 10.5518 2.08111 10.4211 2.03748C10.2904 1.99385 10.149 1.99399 10.0184 2.03788C9.88778 2.08176 9.77501 2.16701 9.69715 2.28071C9.6193 2.39441 9.5806 2.53038 9.58692 2.66804L10.066 11.7263C10.0707 11.8348 10.0478 11.9427 9.99946 12.0399C9.95114 12.1371 9.87895 12.2205 9.78966 12.2823L2.27961 17.3697C2.16606 17.4477 2.08104 17.5607 2.03741 17.6914C1.99378 17.8221 1.99392 17.9635 2.03781 18.0941C2.08169 18.2247 2.16694 18.3375 2.28064 18.4154C2.39434 18.4932 2.53031 18.5319 2.66797 18.5256Z"
+        fill="#FDD202"
+        stroke="#FDD202"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

frontend/src/components/Icons/StarIcons/StarOneIcon.tsx

@@ -0,0 +1,16 @@
+export default function StarOneIcon() {
+  return (
+    <svg
+      width="49"
+      height="51"
+      viewBox="0 0 49 51"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M47.7091 16.3161L40.2305 26.9911L46.2679 38.5992C46.5983 39.2287 46.7346 39.9419 46.6598 40.6489C46.585 41.3559 46.3023 42.0248 45.8475 42.5712C45.3927 43.1175 44.7861 43.5169 44.1045 43.7187C43.4228 43.9205 42.6966 43.9158 42.0177 43.7051L29.6103 39.8134L20.5392 49.1382C20.0416 49.6443 19.4054 49.9918 18.7107 50.137C18.016 50.2823 17.2939 50.2187 16.6352 49.9544C15.9765 49.69 15.4108 49.2367 15.0093 48.6515C14.6078 48.0662 14.3884 47.3753 14.3787 46.6656L14.1812 33.5803L2.52631 27.7452C1.89236 27.4271 1.36614 26.9294 1.01338 26.3141C0.660627 25.6988 0.496961 24.9932 0.542826 24.2854C0.588691 23.5777 0.842055 22.8991 1.27128 22.3345C1.70049 21.7698 2.28655 21.3442 2.95625 21.1106L15.2434 16.9258L17.12 3.99217C17.2205 3.28775 17.5282 2.62911 18.0039 2.10001C18.4797 1.5709 19.1021 1.19522 19.7919 1.02072C20.4817 0.846229 21.2079 0.880808 21.878 1.12006C22.5481 1.35931 23.1319 1.79244 23.5553 2.36436L31.3538 12.8507L44.1529 10.6898C44.8539 10.5743 45.5734 10.6681 46.2212 10.9597C46.8691 11.2512 47.4166 11.7275 47.7949 12.3288C48.1733 12.9301 48.3659 13.6297 48.3484 14.3399C48.331 15.0501 48.1043 15.7394 47.6969 16.3214L47.7091 16.3161Z"
+        fill="#FFB87A"
+      />
+    </svg>
+  );
+}

frontend/src/components/Icons/StarIcons/StarThreeIcon.tsx

@@ -0,0 +1,20 @@
+export default function StarThreeIcon() {
+  return (
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.84311 14.2532L11.2454 17.6714C11.3456 17.7132 11.4335 17.7798 11.5009 17.8649C11.5684 17.95 11.6131 18.0508 11.6311 18.1579L13.0422 27.1184C13.0646 27.2543 13.1306 27.3793 13.2304 27.4744C13.3301 27.5695 13.4582 27.6295 13.595 27.6453C13.7319 27.6611 13.8703 27.6319 13.9891 27.5621C14.1079 27.4923 14.2007 27.3857 14.2535 27.2584L17.6717 18.8561C17.7136 18.756 17.7802 18.668 17.8653 18.6006C17.9503 18.5331 18.0511 18.4884 18.1582 18.4704L27.1187 17.0593C27.2547 17.0369 27.3797 16.9709 27.4747 16.8711C27.5698 16.7714 27.6298 16.6434 27.6456 16.5065C27.6615 16.3696 27.6323 16.2312 27.5624 16.1124C27.4926 15.9936 27.386 15.9008 27.2588 15.848L18.8565 12.4298C18.7563 12.3879 18.6684 12.3213 18.6009 12.2363C18.5335 12.1512 18.4887 12.0504 18.4708 11.9433L17.0597 2.98278C17.0373 2.84681 16.9712 2.72183 16.8715 2.62676C16.7717 2.53169 16.6437 2.4717 16.5068 2.45588C16.3699 2.44006 16.2316 2.46926 16.1128 2.53906C15.994 2.60887 15.9011 2.71548 15.8483 2.84276L12.4302 11.245C12.3883 11.3452 12.3217 11.4331 12.2366 11.5006C12.1515 11.568 12.0507 11.6128 11.9437 11.6307L2.98313 13.0418C2.84716 13.0642 2.72218 13.1303 2.62711 13.23C2.53204 13.3298 2.47205 13.4578 2.45623 13.5947C2.44041 13.7316 2.46961 13.8699 2.53941 13.9887C2.60922 14.1075 2.71583 14.2004 2.84311 14.2532Z"
+        fill="#FDD202"
+        stroke="#FDD202"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

frontend/src/components/Icons/StarIcons/StarTwoIcon.tsx

@@ -0,0 +1,16 @@
+export default function StarTwoIcon() {
+  return (
+    <svg
+      width="33"
+      height="33"
+      viewBox="0 0 33 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.5863 20.1994L22.3523 22.5128L20.5945 30.9167C20.5007 31.3737 20.2735 31.7926 19.9417 32.1205C19.6099 32.4484 19.1884 32.6706 18.7304 32.7591C18.2724 32.8476 17.7984 32.7983 17.3684 32.6175C16.9383 32.4368 16.5715 32.1326 16.3142 31.7435L11.6305 24.6111L3.14891 25.577C2.68591 25.6273 2.21841 25.5394 1.80525 25.3245C1.3921 25.1095 1.05178 24.7771 0.827141 24.3692C0.602505 23.9612 0.503598 23.4959 0.542876 23.0319C0.582153 22.5678 0.757857 22.1258 1.04786 21.7614L6.38529 15.034L2.89132 7.22746C2.70153 6.80251 2.64114 6.33107 2.71769 5.872C2.79424 5.41293 3.00434 4.98659 3.32175 4.64622C3.63916 4.30585 4.04981 4.06653 4.50243 3.95816C4.95504 3.84978 5.42955 3.87715 5.8667 4.03685L13.8456 7.01768L20.1733 1.22933C20.5171 0.913347 20.947 0.706727 21.4085 0.635733C21.87 0.564739 22.3421 0.632579 22.765 0.830627C23.1878 1.02867 23.5422 1.34799 23.7831 1.74796C24.024 2.14794 24.1405 2.61051 24.1178 3.07688L23.7205 11.643L31.1183 15.8644C31.5224 16.097 31.8487 16.4436 32.0566 16.8609C32.2645 17.2782 32.3445 17.7476 32.2868 18.2102C32.2291 18.6728 32.0362 19.1081 31.7322 19.4615C31.4282 19.8149 31.0266 20.0708 30.5779 20.197L30.5863 20.1994Z"
+        fill="#FFB87A"
+      />
+    </svg>
+  );
+}

frontend/src/components/NavigationBar/NavigationBar.tsx

@@ -7,16 +7,17 @@ import NavigationBarItem from '@_components/NavigationBar/NavigationBarItem/Navi
 import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 
-export type Tab = '홈' | '채팅' | '해주세요' | '마이페이지';
+export type Tab = '홈' | '채팅' | '안내면진다' | '마이페이지';
 
 export default function NavigationBar() {
   const theme = useTheme();
   const navigate = useNavigate();
   const location = useLocation();
+
   const tabRoutes: Record<Tab, string> = {
     홈: GET_ROUTES.nowDarakbang.main(),
     채팅: GET_ROUTES.nowDarakbang.chat(),
-    해주세요: GET_ROUTES.nowDarakbang.please(),
+    안내면진다: GET_ROUTES.nowDarakbang.bet(),
     마이페이지: GET_ROUTES.nowDarakbang.myPage(),
   };
 

frontend/src/components/NavigationBar/NavigationBarItem/NavigationBarItem.tsx

@@ -3,10 +3,10 @@ import * as S from './NavigationBarItem.style';
 import ChattingIcon from '@_components/Icons/ChattingIcon';
 import HomeIcon from '@_components/Icons/HomeIcon';
 import MyPageIcon from '@_components/Icons/MyPageIcon';
-import PleaseIcon from '@_components/Icons/PleaseIcon';
 import { Tab } from '@_components/NavigationBar/NavigationBar';
 import { common } from '@_common/common.style';
 import { useTheme } from '@emotion/react';
+import ScissorsIcon from '@_components/Icons/ScissorsIcon';
 
 interface NavigationBarItemProps {
   tab: Tab;
@@ -24,8 +24,8 @@ export default function NavigationBarItem(props: NavigationBarItemProps) {
       <HomeIcon isActive={isActive} />
     ) : tab === '채팅' ? (
       <ChattingIcon isActive={isActive} />
-    ) : tab === '해주세요' ? (
-      <PleaseIcon isActive={isActive} />
+    ) : tab === '안내면진다' ? (
+      <ScissorsIcon isActive={isActive} />
     ) : (
       <MyPageIcon isActive={isActive} />
     );