From 63300b6d888a6e2fcb8b6b5eed7bf83c03092933 Mon Sep 17 00:00:00 2001 From: cys4585 Date: Thu, 17 Oct 2024 20:45:28 +0900 Subject: [PATCH 01/46] =?UTF-8?q?feat:=20=EC=95=88=EB=82=B4=EB=A9=B4?= =?UTF-8?q?=EC=A7=84=EB=8B=A4=20->=20=EB=A3=B0=EB=A0=9B=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/NavigationBar/NavigationBar.tsx | 4 ++-- .../NavigationBar/NavigationBarItem/NavigationBarItem.tsx | 2 +- frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx | 4 +--- .../pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx | 2 +- frontend/src/pages/Bet/BetListPage/BetListPage.tsx | 2 +- frontend/src/pages/Chatting/ChatPage/ChatPage.tsx | 2 +- .../src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx | 2 +- 7 files changed, 8 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/NavigationBar/NavigationBar.tsx b/frontend/src/components/NavigationBar/NavigationBar.tsx index da27dec82..4dcb11533 100644 --- a/frontend/src/components/NavigationBar/NavigationBar.tsx +++ b/frontend/src/components/NavigationBar/NavigationBar.tsx @@ -7,7 +7,7 @@ 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(); @@ -17,7 +17,7 @@ export default function NavigationBar() { const tabRoutes: Record = { 홈: GET_ROUTES.nowDarakbang.main(), 채팅: GET_ROUTES.nowDarakbang.chat(), - 안내면진다: GET_ROUTES.nowDarakbang.bet(), + 룰렛: GET_ROUTES.nowDarakbang.bet(), 마이페이지: GET_ROUTES.nowDarakbang.myPage(), }; diff --git a/frontend/src/components/NavigationBar/NavigationBarItem/NavigationBarItem.tsx b/frontend/src/components/NavigationBar/NavigationBarItem/NavigationBarItem.tsx index 35934e75b..4c785c299 100644 --- a/frontend/src/components/NavigationBar/NavigationBarItem/NavigationBarItem.tsx +++ b/frontend/src/components/NavigationBar/NavigationBarItem/NavigationBarItem.tsx @@ -24,7 +24,7 @@ export default function NavigationBarItem(props: NavigationBarItemProps) { ) : tab === '채팅' ? ( - ) : tab === '안내면진다' ? ( + ) : tab === '룰렛' ? ( ) : ( diff --git a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx index 87edefea8..46529caf6 100644 --- a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx @@ -35,9 +35,7 @@ export default function BetCreationPage() { - - 안내면진다 만들기 - + 룰렛 만들기 diff --git a/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx b/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx index 3c79d8846..5bb279643 100644 --- a/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx @@ -27,7 +27,7 @@ export default function TitleStep(props: TitleProps) { <> - 안내면진다의 + 룰렛의 이름 은 무엇인가요? diff --git a/frontend/src/pages/Bet/BetListPage/BetListPage.tsx b/frontend/src/pages/Bet/BetListPage/BetListPage.tsx index 5fdab1bf4..db739901c 100644 --- a/frontend/src/pages/Bet/BetListPage/BetListPage.tsx +++ b/frontend/src/pages/Bet/BetListPage/BetListPage.tsx @@ -23,7 +23,7 @@ export default function BetListPage() {

- 안내면진다 + 룰렛

diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx index 6a3fd3b05..e59c08839 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx @@ -43,7 +43,7 @@ export default function ChatPage() { onClick={() => setNowChatRoomType('MOIM')} /> setNowChatRoomType('BET')} /> diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx index f7bd96027..f9225071d 100644 --- a/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx +++ b/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx @@ -137,7 +137,7 @@ export default function ChattingRoomPage() { if (isBetChatRoomDetail(chatRoomDetail)) { return ( ); From d84f889a71494a991e36fae64fc7e8756621ddd0 Mon Sep 17 00:00:00 2001 From: pricelees Date: Thu, 17 Oct 2024 21:30:36 +0900 Subject: [PATCH 02/46] =?UTF-8?q?refactor:=20FCM=20=ED=91=B8=EC=8B=9C=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=ED=8E=98=EC=9D=B4=EB=A1=9C=EB=93=9C?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=95=8C=EB=A6=BC=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EC=9D=B4=EB=8F=99=ED=95=A0=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=EB=A5=BC=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/firebase-messaging-sw.js | 2 +- frontend/src/service/forgroundMessage.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js index 319e4d049..52cfc43b0 100644 --- a/frontend/public/firebase-messaging-sw.js +++ b/frontend/public/firebase-messaging-sw.js @@ -20,7 +20,7 @@ self.addEventListener('notificationclick', function (event) { // console.log('[firebase-messaging-sw.js] 알림이 클릭되었습니다.'); // 알림 데이터를 가져오기 - const link = event.notification.data.FCM_MSG.notification.click_action; + const link = event.notification.data.FCM_MSG.data.link; event.notification.close(); // 알림 닫기 diff --git a/frontend/src/service/forgroundMessage.ts b/frontend/src/service/forgroundMessage.ts index c09d99d2d..6b0d279c6 100644 --- a/frontend/src/service/forgroundMessage.ts +++ b/frontend/src/service/forgroundMessage.ts @@ -12,7 +12,7 @@ function initializeForegroundMessageHandling() { const notificationOptions = { body: payload.notification?.body || '', icon: payload.notification?.icon, - data: { link: payload.fcmOptions?.link || '/' }, + data: { link: payload.data?.link || '/' }, }; if (Notification.permission === 'granted') { From b4844ed9ec0759112a0fc1a7027ce4f728b68998 Mon Sep 17 00:00:00 2001 From: cys4585 Date: Thu, 17 Oct 2024 22:20:53 +0900 Subject: [PATCH 03/46] =?UTF-8?q?feat:=20=EB=A3=B0=EB=A0=9B=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20UI=20=EB=B3=80=EA=B2=BD,=2030=EC=B4=88=20=EC=A3=BC?= =?UTF-8?q?=EA=B8=B0=20=ED=8F=B4=EB=A7=81=20=EB=B0=8F=20=EB=82=A8=EC=9D=80?= =?UTF-8?q?=20=EB=B6=84=20=EA=B3=84=EC=82=B0=20(=EC=B4=88=20=EA=B3=84?= =?UTF-8?q?=EC=82=B0=20=EC=95=84=EC=A7=81=20=E3=84=B4=E3=84=B4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Icons/PeopleIcon.tsx | 16 ++++++ .../src/components/Icons/RouletteIcon.tsx | 51 +++++++++++++++++ frontend/src/hooks/queries/useBets.ts | 12 +++- .../BetCardList/BetCard/BetCard.style.ts | 56 +++++++++++++++---- .../BetCardList/BetCard/BetCard.tsx | 25 +++++++-- .../components/BetCardList/BetCardList.tsx | 2 +- frontend/src/pages/Bet/components/Tag/Tag.tsx | 2 +- ...s => calculateLeftMinutesUntilDeadline.ts} | 0 8 files changed, 144 insertions(+), 20 deletions(-) create mode 100644 frontend/src/components/Icons/PeopleIcon.tsx create mode 100644 frontend/src/components/Icons/RouletteIcon.tsx rename frontend/src/utils/{calculateMinutesUntilDeadline.ts => calculateLeftMinutesUntilDeadline.ts} (100%) diff --git a/frontend/src/components/Icons/PeopleIcon.tsx b/frontend/src/components/Icons/PeopleIcon.tsx new file mode 100644 index 000000000..a85924485 --- /dev/null +++ b/frontend/src/components/Icons/PeopleIcon.tsx @@ -0,0 +1,16 @@ +export default function PeopleIcon() { + return ( + + + + ); +} diff --git a/frontend/src/components/Icons/RouletteIcon.tsx b/frontend/src/components/Icons/RouletteIcon.tsx new file mode 100644 index 000000000..78fb77851 --- /dev/null +++ b/frontend/src/components/Icons/RouletteIcon.tsx @@ -0,0 +1,51 @@ +export default function RouletteIcon() { + return ( + + + + + + + + + + + + + ); +} diff --git a/frontend/src/hooks/queries/useBets.ts b/frontend/src/hooks/queries/useBets.ts index f147fd156..80e21bc90 100644 --- a/frontend/src/hooks/queries/useBets.ts +++ b/frontend/src/hooks/queries/useBets.ts @@ -1,12 +1,22 @@ import { getBets } from '@_apis/gets'; import { getLastDarakbangId } from '@_common/lastDarakbangManager'; import QUERY_KEYS from '@_constants/queryKeys'; +import calculateLeftMinutesUntilDeadline from '@_utils/calculateLeftMinutesUntilDeadline'; import { useQuery } from '@tanstack/react-query'; export default function useBets() { const { data: bets, isLoading } = useQuery({ queryKey: [QUERY_KEYS.darakbang, getLastDarakbangId(), QUERY_KEYS.bets], - queryFn: getBets, + queryFn: async () => { + const bets = await getBets(); + + return bets.map((bet) => ({ + ...bet, + leftMinute: calculateLeftMinutesUntilDeadline(bet.deadline), + })); + }, + + refetchInterval: 30000, }); return { bets, isLoading }; diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts index 4c604da96..846695dc2 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts +++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts @@ -2,35 +2,67 @@ import { Theme, css } from '@emotion/react'; export const cardBox = css` display: flex; - gap: 1.6rem; justify-content: space-between; - width: 100%; - padding: 2rem 2.4rem; + padding: 1.6rem 2rem 1.6rem 3.2rem; background: white; - border-radius: 24px; - box-shadow: rgb(0 0 0 / 12%) 0 3px 8px; + border-radius: 16px; + box-shadow: 0 7px 29px rgb(100 100 111 / 20%); `; export const leftSection = css` display: flex; flex-direction: column; - gap: 0.8rem; + gap: 0.2rem; `; export const title = ({ theme }: { theme: Theme }) => css` ${theme.typography.Giant} + color: ${theme.colorPalette.grey[400]}; `; -export const count = ({ theme }: { theme: Theme }) => css` +export const deadline = ({ + theme, + isAnnounced, + leftMinute, +}: { + theme: Theme; + isAnnounced: boolean; + leftMinute: number; +}) => css` + font-size: ${theme.typography.b2}; + font-size: 22px; + font-weight: bold; + color: ${isAnnounced || leftMinute < 0 + ? theme.colorPalette.grey[400] + : leftMinute < 5 + ? theme.colorPalette.red[400] + : leftMinute < 10 + ? theme.colorPalette.yellow[700] + : leftMinute < 15 + ? theme.colorPalette.green[300] + : theme.colorPalette.black[100]}; +`; + +export const participantCount = ({ theme }: { theme: Theme }) => css` ${theme.typography.b3} - color: ${theme.colorPalette.black[30]}; + display: flex; + align-items: center; + color: ${theme.colorPalette.grey[400]}; +`; + +export const banner = ({ theme }: { theme: Theme }) => css` + padding: 0.6rem 1rem; + + font-size: ${theme.typography.Medium}; + color: white; + + background-color: ${theme.semantic.primary}; + border-radius: 0.4rem; `; -export const tagBox = css` +export const rightSection = css` display: flex; - align-items: flex-start; - justify-content: flex-end; - min-width: 80px; + align-items: center; `; diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx index 45ab76c48..618041d73 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx +++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx @@ -1,10 +1,11 @@ import { BetSummary } from '@_types/index'; import * as S from './BetCard.style'; import { useTheme } from '@emotion/react'; -import Tag from '@_pages/Bet/components/Tag/Tag'; +import RouletteIcon from '@_components/Icons/RouletteIcon'; +import PeopleIcon from '@_components/Icons/PeopleIcon'; interface BetCardProps { - bet: BetSummary; + bet: BetSummary & { leftMinute: number }; onClick: (betId: number) => void; } @@ -17,10 +18,24 @@ export default function BetCard(props: BetCardProps) {
onClick(bet.id)}>
{bet.title}
-
현재 {bet.currentParticipants}명
+
+ {bet.isAnnounced || bet.leftMinute < 0 + ? '마감됨' + : `마감 ${bet.leftMinute}분 전`} +
+
+ {bet.currentParticipants}명 +
+ 지금 들어오면 25%!
-
- +
+
); diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCardList.tsx b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCardList.tsx index 19f8b84ed..409844d35 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCardList.tsx +++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCardList.tsx @@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom'; import GET_ROUTES from '@_common/getRoutes'; interface BetCardListProps { - bets: BetSummary[]; + bets: Array; } export default function BetCardList(props: BetCardListProps) { diff --git a/frontend/src/pages/Bet/components/Tag/Tag.tsx b/frontend/src/pages/Bet/components/Tag/Tag.tsx index afea633fc..67042461e 100644 --- a/frontend/src/pages/Bet/components/Tag/Tag.tsx +++ b/frontend/src/pages/Bet/components/Tag/Tag.tsx @@ -2,7 +2,7 @@ import * as S from './Tag.style'; import { HTMLProps } from 'react'; import { useTheme } from '@emotion/react'; import { BetDetail } from '@_types/index'; -import calculateMinutesUntilDeadline from '@_utils/calculateMinutesUntilDeadline'; +import calculateMinutesUntilDeadline from '@_utils/calculateLeftMinutesUntilDeadline'; interface TagProps extends HTMLProps { isAnnounced: BetDetail['isAnnounced']; diff --git a/frontend/src/utils/calculateMinutesUntilDeadline.ts b/frontend/src/utils/calculateLeftMinutesUntilDeadline.ts similarity index 100% rename from frontend/src/utils/calculateMinutesUntilDeadline.ts rename to frontend/src/utils/calculateLeftMinutesUntilDeadline.ts From 5964eea48f846ef4a31fb50e0e9d7599510cd4d7 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:51:11 +0900 Subject: [PATCH 04/46] =?UTF-8?q?feat:=20=EC=86=8C=EC=85=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20svg=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/apple_cirecle.svg | 4 ++ .../src/common/assets/kakaoOuathLogin.svg | 4 ++ frontend/src/common/assets/main_logo.svg | 48 +++++++++++++++++++ frontend/src/common/assets/missing_logo.svg | 20 ++++++++ 4 files changed, 76 insertions(+) create mode 100644 frontend/src/common/assets/apple_cirecle.svg create mode 100644 frontend/src/common/assets/kakaoOuathLogin.svg create mode 100644 frontend/src/common/assets/main_logo.svg create mode 100644 frontend/src/common/assets/missing_logo.svg diff --git a/frontend/src/common/assets/apple_cirecle.svg b/frontend/src/common/assets/apple_cirecle.svg new file mode 100644 index 000000000..129960286 --- /dev/null +++ b/frontend/src/common/assets/apple_cirecle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/common/assets/kakaoOuathLogin.svg b/frontend/src/common/assets/kakaoOuathLogin.svg new file mode 100644 index 000000000..55605e310 --- /dev/null +++ b/frontend/src/common/assets/kakaoOuathLogin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/common/assets/main_logo.svg b/frontend/src/common/assets/main_logo.svg new file mode 100644 index 000000000..c28fbe176 --- /dev/null +++ b/frontend/src/common/assets/main_logo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/common/assets/missing_logo.svg b/frontend/src/common/assets/missing_logo.svg new file mode 100644 index 000000000..2823fd65f --- /dev/null +++ b/frontend/src/common/assets/missing_logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + From 231a9b8904e09f346201ae77e74b673d0763a1bb Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:52:09 +0900 Subject: [PATCH 05/46] =?UTF-8?q?feat:=20svg=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MissingFallback/MissingFallback.style.ts | 8 ++++---- .../src/components/MissingFallback/MissingFallback.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/MissingFallback/MissingFallback.style.ts b/frontend/src/components/MissingFallback/MissingFallback.style.ts index 2643ef253..c7ee1ab1f 100644 --- a/frontend/src/components/MissingFallback/MissingFallback.style.ts +++ b/frontend/src/components/MissingFallback/MissingFallback.style.ts @@ -22,8 +22,8 @@ export const container = ({ `; export const image = css` - width: 50%; - max-width: 30rem; - height: 50%; - max-height: 35rem; + width: 100%; + max-width: 40rem; + height: 100%; + max-height: 40rem; `; diff --git a/frontend/src/components/MissingFallback/MissingFallback.tsx b/frontend/src/components/MissingFallback/MissingFallback.tsx index 0112dd089..1d7914a66 100644 --- a/frontend/src/components/MissingFallback/MissingFallback.tsx +++ b/frontend/src/components/MissingFallback/MissingFallback.tsx @@ -2,7 +2,7 @@ import * as S from './MissingFallback.style'; import { SerializedStyles, useTheme } from '@emotion/react'; -import regretCat from '@_common/assets/regret_cat.webp'; +import missingLogo from '@_common/assets/missing_logo.svg?url'; interface MissingFallbackProps { text: string; @@ -15,7 +15,7 @@ export default function MissingFallback(props: MissingFallbackProps) { const theme = useTheme(); return (
- 미안해용 + 미안해용 {text}
); From 2fa60b46157e0b4607f09325306ea4c806917477 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:53:01 +0900 Subject: [PATCH 06/46] =?UTF-8?q?feat:=20=EA=B5=AC=EA=B8=80=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20type=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EB=AA=A8=EC=96=91=20=EB=B3=80=EA=B2=BD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GoogleLoginButton/GoogleLoginButton.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx b/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx index 91bc168be..d9c7b7a65 100644 --- a/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx +++ b/frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx @@ -3,23 +3,35 @@ import { useEffect, useRef } from 'react'; import ROUTES from '@_constants/routes'; import { useNavigate } from 'react-router-dom'; -function GoogleLoginButton() { +interface GoogleLoginButtonProps { + type: 'bar' | 'circle'; +} +function GoogleLoginButton({ type }: GoogleLoginButtonProps) { const navigate = useNavigate(); const g_sso = useRef(null); useEffect(() => { if (g_sso.current) { + const renderOption = + type === 'bar' + ? { + theme: 'outline', + size: 'large', + width: 269, + } + : { + type: 'icon', + shape: 'circle', + theme: 'outline', + size: 'large', + }; window.google.accounts.id.initialize({ client_id: process.env.GOOGLE_O_AUTH_CLIENT_ID, callback: handleGoogleSignIn, ux_mode: 'popup', }); - window.google.accounts.id.renderButton(g_sso.current, { - theme: 'outline', - size: 'large', - width: 269, - }); + window.google.accounts.id.renderButton(g_sso.current, renderOption); } }, [g_sso]); From 0d9fadfe8cdf1afc15ee9452d9b475c7df1a487e Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:54:37 +0900 Subject: [PATCH 07/46] =?UTF-8?q?feat:=20=EC=86=8C=EC=85=9C=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20Icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Icons/AppleOAuthIcon.tsx | 69 +++++++++------- .../src/components/Icons/KakaoOAuthIcon.tsx | 52 +++++++----- .../src/components/Icons/MainLogoIcon.tsx | 82 +------------------ 3 files changed, 73 insertions(+), 130 deletions(-) diff --git a/frontend/src/components/Icons/AppleOAuthIcon.tsx b/frontend/src/components/Icons/AppleOAuthIcon.tsx index 8d203420f..55b391d01 100644 --- a/frontend/src/components/Icons/AppleOAuthIcon.tsx +++ b/frontend/src/components/Icons/AppleOAuthIcon.tsx @@ -1,32 +1,41 @@ -export default function AppleOAuthIcon() { - return ( - - - - - + + + + + + - - - - - ); + + + ); + } + if (type === 'circle') { + return ; + } } diff --git a/frontend/src/components/Icons/KakaoOAuthIcon.tsx b/frontend/src/components/Icons/KakaoOAuthIcon.tsx index 9c85460f7..f6a4eeea6 100644 --- a/frontend/src/components/Icons/KakaoOAuthIcon.tsx +++ b/frontend/src/components/Icons/KakaoOAuthIcon.tsx @@ -1,21 +1,33 @@ -export default function KakaoOAuthLoginIcon() { - return ( - - - - - - ); +import CircleKakaoLogin from '@_common/assets/kakaoOuathLogin.svg'; +interface KakaoOAuthLoginIconProps { + type: 'bar' | 'circle'; +} + +export default function KakaoOAuthLoginIcon({ + type, +}: KakaoOAuthLoginIconProps) { + if (type === 'bar') { + return ( + + + + + + ); + } + if (type === 'circle') { + return ; + } } diff --git a/frontend/src/components/Icons/MainLogoIcon.tsx b/frontend/src/components/Icons/MainLogoIcon.tsx index 5d4c25daa..63c62bc7c 100644 --- a/frontend/src/components/Icons/MainLogoIcon.tsx +++ b/frontend/src/components/Icons/MainLogoIcon.tsx @@ -1,82 +1,4 @@ +import MainLogo from '@_common/assets/main_logo.svg'; export default function MainLogoIcon() { - return ( - - - - - - - - - - - - - - ); + return ; } From a0a2553c4c40251624bf6f91cdde0c66df0fe407 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:55:13 +0900 Subject: [PATCH 08/46] =?UTF-8?q?feat:=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B0=B0=EA=B2=BD=EC=9D=B4=20?= =?UTF-8?q?=ED=88=AC=EB=AA=85=EC=9D=BC=20=EA=B2=BD=EC=9A=B0,=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B0=80=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ProfileFrame/ProfileFrame.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts index df39cfb4e..5b58f2732 100644 --- a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts +++ b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts @@ -54,7 +54,7 @@ export const profileImage = ( height: 100%; object-fit: cover; - background-image: url(${EmptyProfile}); + background-image: url(${props.isLoaded ? '' : EmptyProfile}); background-position: center; background-size: cover; `; From 9dfcf0810e2d5c1659f2312eab110e9badb60843 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 14:57:57 +0900 Subject: [PATCH 09/46] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20css=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts | 2 +- frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts b/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts index 690b765a8..b076996cf 100644 --- a/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts +++ b/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; export const footerStyle = css` - margin: 1rem 0 0 0; + margin: 1rem 0 0; padding: 0 24px 48px; text-align: center; `; diff --git a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts index 2d74d42e3..0a6c6d2c4 100644 --- a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts +++ b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts @@ -3,9 +3,10 @@ import { css } from '@emotion/react'; export const mainStyle = css` display: flex; flex-direction: column; + gap: 3rem; align-items: center; justify-content: center; - height: 100%; + width: 100%; margin: 0 auto; `; From af204d7c49c57e8baeb244afd42bd38a23de62c7 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:00:52 +0900 Subject: [PATCH 10/46] =?UTF-8?q?feat:=20=EA=B8=B0=EC=A1=B4=20=EC=B9=B4?= =?UTF-8?q?=EC=B9=B4=EC=98=A4=ED=86=A1=20=EA=B0=80=EC=9E=85=20=EC=97=AC?= =?UTF-8?q?=EB=B6=80=20=ED=99=95=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataMigrationExplanationPage.style.ts | 6 -- .../DataMigrationExplanationPage.tsx | 76 ------------------- .../Explanation/KakaoSelct.style.ts | 12 +++ .../Explanation/KakaoSelect.tsx | 61 +++++++++++++++ 4 files changed, 73 insertions(+), 82 deletions(-) delete mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts delete mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx create mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts create mode 100644 frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts deleted file mode 100644 index a3f274a0a..000000000 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { css, Theme } from '@emotion/react'; - -export const explanationSection = ({ theme }: { theme: Theme }) => css` - margin: 0rem 5rem; - ${theme.typography.s1} -`; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx deleted file mode 100644 index f6e02ff93..000000000 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; -import { useTheme } from '@emotion/react'; -import { explanationSection } from './DataMigrationExplanationPage.style'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; -import SolidArrow from '@_components/Icons/SolidArrow'; -import { useNavigate } from 'react-router-dom'; -import ROUTES from '@_constants/routes'; - -export default function DataMigrationExplanationPage() { - const theme = useTheme(); - const navigate = useNavigate(); - const kakaoAuthLogin = () => { - if ( - !process.env.KAKAO_O_AUTH_CLIENT_ID || - !process.env.KAKAO_OAUTH_REDIRECT_URI - ) { - throw new Error('Google OAuth 정보가 없습니다.'); - } - const params = { - client_id: process.env.KAKAO_O_AUTH_CLIENT_ID, - redirect_uri: process.env.KAKAO_OAUTH_REDIRECT_URI, - response_type: 'code', - scope: 'openid', - }; - const queryString = new URLSearchParams(params).toString(); - const kakaoOAuthUrl = `${process.env.KAKAO_REQUEST_URL}?${queryString}`; - if (process.env.MSW == 'true') { - window.location.href = 'http://localhost:8081/kakao-o-auth?code=1'; - } else { - window.location.href = kakaoOAuthUrl; - } - }; - - return ( - - - - { - navigate(ROUTES.home); - }} - /> - - - -
- -

- 모우다는 이용자 여러분의 더 좋은 서비스 제공을 위하여 카카오톡 소셜 - 로그인에서 구글과 애플의 소셜 로그인으로 전환을 선택했습니다. -

2024년 10월 5일 이전 카카오톡을 이용하여 로그인 하셨던 - 기존 이용자들 중에서 기존 데이터를 이전을 원하시는 분들에게는 데이터 - 전환 절차를 안내해 드리고 있습니다. 절차는 아래와 같습니다. -
-
1. 카카오톡 로그인을 진행한다.
2. 구글과 애플중 - 데이터이전을 원하시는 소셜 선택하고 로그인을 진행한다. -

-
- - - - - - ); -} diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts new file mode 100644 index 000000000..608119cb4 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelct.style.ts @@ -0,0 +1,12 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + width: 90%; +`; +export const title = ({ theme }: { theme: Theme }) => css` + ${theme.typography.h3} +`; + +export const subtitle = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b1} +`; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx new file mode 100644 index 000000000..15dfa9094 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx @@ -0,0 +1,61 @@ +import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; +import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import * as S from './KakaoSelct.style'; +import { useTheme } from '@emotion/react'; +import Button from '@_components/Button/Button'; +import { useNavigate } from 'react-router-dom'; +import ROUTES from '@_constants/routes'; +import { getInviteCode } from '@_common/inviteCodeManager'; +// import ROUTES from '@_constants/routes'; +// import { getMemberToken } from '@_utils/tokenManager'; +// import { useEffect } from 'react'; +// import { useNavigate } from 'react-router-dom'; + +export default function KakaoSelectPage() { + const theme = useTheme(); + const navigate = useNavigate(); + + return ( + + + +
+ + 기존 카카오톡
+ 이용자인가요? + +
+ + + +
+ + +
+ + + ); +} From 8083b1e8a2c8fb5e86a0b1cd3a7a216f0bb7505f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:21:26 +0900 Subject: [PATCH 11/46] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Login/HomePage/HomePage.style.ts | 19 ++++ .../src/pages/Login/HomePage/HomePage.tsx | 87 +++++++++---------- 2 files changed, 59 insertions(+), 47 deletions(-) create mode 100644 frontend/src/pages/Login/HomePage/HomePage.style.ts diff --git a/frontend/src/pages/Login/HomePage/HomePage.style.ts b/frontend/src/pages/Login/HomePage/HomePage.style.ts new file mode 100644 index 000000000..e352fb3be --- /dev/null +++ b/frontend/src/pages/Login/HomePage/HomePage.style.ts @@ -0,0 +1,19 @@ +import { css, Theme } from '@emotion/react'; + +export const kakaoButton = () => css` + border: none; + background: none; +`; +export const explain = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b3} + padding: 1rem; + + color: ${theme.colorPalette.grey[300]}; + + background-color: ${theme.colorPalette.white[100]}; +`; + +export const boundary = ({ theme }: { theme: Theme }) => css` + height: 4rem; + border-right: 1px solid ${theme.colorPalette.grey[300]}; +`; diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index 9233e7a64..f0c032a19 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -1,5 +1,5 @@ import { css, useTheme } from '@emotion/react'; -import { Navigate, useNavigate } from 'react-router-dom'; +import { Navigate } from 'react-router-dom'; import GET_ROUTES from '@_common/getRoutes'; import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; import MainLogoIcon from '@_components/Icons/MainLogoIcon'; @@ -8,10 +8,11 @@ import ROUTES from '@_constants/routes'; import { getLastDarakbangId } from '@_common/lastDarakbangManager'; import { getAccessToken } from '@_utils/tokenManager'; import GoogleLoginButton from '@_components/GoogleLoginButton/GoogleLoginButton'; +import * as S from './HomePage.style'; +import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; export default function HomePage() { const theme = useTheme(); const nowToken = getAccessToken(); - const navigate = useNavigate(); if (nowToken) { const lastDarakbangId = getLastDarakbangId(); @@ -47,10 +48,6 @@ export default function HomePage() { } }; - const handleDataMigraionLink = () => { - navigate(ROUTES.oAuthMigration); - }; - return ( @@ -59,58 +56,54 @@ export default function HomePage() { css={css` display: flex; flex-direction: column; - gap: 28px; - height: 70vh; - justify-content: center; + gap: 2rem; align-items: center; + justify-content: center; `} > -
-

모여봐요 우리의

-

다락방

-
-
- - - -
- + + +
+ + + + 혹시 카카오톡으로 가입하셨었나요? ☝ + + ); From 7cb4641ae2bca8d5d2b499b4382897d59f7aa826 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:27:57 +0900 Subject: [PATCH 12/46] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Select/OAuthSelectPage.style.ts | 14 ++++ .../Select/OAuthSelectPage.tsx | 78 ++++++++----------- 2 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts new file mode 100644 index 000000000..98af84d9a --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.style.ts @@ -0,0 +1,14 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + width: 90%; +`; +export const title = ({ theme }: { theme: Theme }) => css` + ${theme.typography.h3} +`; + +export const subtitle = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b1} +`; + +export const button = () => css``; diff --git a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx index 13d66bd93..d64bcc551 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/Select/OAuthSelectPage.tsx @@ -1,42 +1,31 @@ -import AppleOAuthIcon from '@_components/Icons/AppleOAuthIcon'; -import GoogleLoginButton from '@_components/GoogleLoginButton/GoogleLoginButton'; import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; import MissingFallback from '@_components/MissingFallback/MissingFallback'; -import ROUTES from '@_constants/routes'; -import { getMemberToken } from '@_utils/tokenManager'; -import { useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; +import * as S from './OAuthSelectPage.style'; +import { useTheme } from '@emotion/react'; +import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; export default function OAuthSelectPage() { - const navigate = useNavigate(); + const theme = useTheme(); - useEffect(() => { - if (!getMemberToken()) { - alert('잘못된 접근입니다.'); - navigate(ROUTES.home); - } - }, [navigate]); - const appleAuthLogin = () => { + const kakaoAuthLogin = () => { if ( - !process.env.APPLE_O_AUTH_CLIENT_ID || - !process.env.APPLE_OAUTH_REDIRECT_URI + !process.env.KAKAO_O_AUTH_CLIENT_ID || + !process.env.KAKAO_OAUTH_REDIRECT_URI ) { - throw new Error('Apple OAuth 정보가 없습니다.'); + throw new Error('kakao OAuth 정보가 없습니다.'); } - const params = { - client_id: process.env.APPLE_O_AUTH_CLIENT_ID, - redirect_uri: process.env.APPLE_OAUTH_REDIRECT_URI, - response_type: 'code id_token', - response_mode: 'form_post', - scope: 'name email', + client_id: process.env.KAKAO_O_AUTH_CLIENT_ID, + redirect_uri: process.env.KAKAO_OAUTH_REDIRECT_URI, + response_type: 'code', + scope: 'openid', }; const queryString = new URLSearchParams(params).toString(); - const appleOAuthUrl = `${process.env.APPLE_REQUEST_URL}?${queryString}`; - if (process.env.MSW === 'true') { + const kakaoOAuthUrl = `${process.env.KAKAO_REQUEST_URL}?${queryString}`; + if (process.env.MSW == 'true') { window.location.href = 'http://localhost:8081/kakao-o-auth?code=1'; } else { - window.location.href = appleOAuthUrl; + window.location.href = kakaoOAuthUrl; } }; @@ -44,31 +33,28 @@ export default function OAuthSelectPage() { -
- -
+
+ + 카카오톡 로그인은
더이상 지원하지 않아요 + +
+ + 카카오톡 로그인하면 데이터를 옮겨 드려요! + +
+ -
- - -
+ + ); From e7f2ade2254fd5bf42281e046e2a8f7afe492803 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:29:21 +0900 Subject: [PATCH 13/46] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Login/OAuthLoginPage/OAuthLoginPage.tsx | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx index 1915812f1..e3dc0eb79 100644 --- a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx +++ b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx @@ -1,12 +1,7 @@ import ROUTES from '@_constants/routes'; import { getInviteCode } from '@_common/inviteCodeManager'; import { kakaoOAuth, googleOAuth } from '@_apis/auth'; -import { - getMemberToken, - removeMemberToken, - setAccessToken, - setMemberToken, -} from '@_utils/tokenManager'; +import { setAccessToken } from '@_utils/tokenManager'; import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -42,17 +37,17 @@ export default function OAuthLoginPage() { const oauthHandlers: Record Promise> = { apple: async () => { setAccessToken(codeOrToken); + navigate(ROUTES.kakaoSelection); + return true; // 조기 반환 }, google: async () => { - const response = await googleOAuth(codeOrToken, getMemberToken()); + const response = await googleOAuth(codeOrToken); setAccessToken(response.data.accessToken); + navigate(ROUTES.kakaoSelection); + return true; // 조기 반환 }, kakao: async () => { - const response = await kakaoOAuth(codeOrToken); - setAccessToken(response.data.accessToken); - setMemberToken(response.data.memberId); - navigate(ROUTES.oAuthSelection); - return true; // 조기 반환 + await kakaoOAuth(codeOrToken); }, }; @@ -61,8 +56,6 @@ export default function OAuthLoginPage() { const shouldReturn = await handler(); if (shouldReturn) return; - removeMemberToken(); - const inviteCode = getInviteCode(); if (inviteCode) { navigate(`${ROUTES.darakbangInvitationRoute}?code=${inviteCode}`); From a81e55d9ae4fbc7a8258daf6865b8e62a7bb836a Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:29:33 +0900 Subject: [PATCH 14/46] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/routes.ts | 2 +- frontend/src/routes/router.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 0b0afde72..9934c8b05 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -43,7 +43,7 @@ const ROUTES = { notFound: '/*', main: '/', home: '/home', - oAuthMigration: '/oauth-migration', + kakaoSelection: '/oauth-migration', oAuthSelection: '/oauth-select', oAuthGoogle: '/oauth', oAuth: '/oauth/:provider', diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx index 730575ff3..49543077d 100644 --- a/frontend/src/routes/router.tsx +++ b/frontend/src/routes/router.tsx @@ -27,13 +27,13 @@ import DarakbangManagementPage from '@_pages/Darakbang/DarakbangManagementPage/D import DarakbangMembersPage from '@_pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage'; import DarakbangInvitationPage from '@_pages/Darakbang/DarakbangInvitationPage/DarakbangInvitationPage'; import DarakbangInvitationRoute from '@_pages/Navigator/DarakbangInvitationRoute'; -import DataMigrationExplanationPage from '@_pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage'; import OAuthSelectPage from '@_pages/Login/DataMigrationPage/Select/OAuthSelectPage'; import BetListPage from '@_pages/Bet/BetListPage/BetListPage'; import BetDetailPage from '@_pages/Bet/BetDetailPage/BetDetailPage'; import BetCreationPage from '@_pages/Bet/BetCreationPage/BetCreationPage'; import BetResultPage from '@_pages/Bet/BetResultPage/BetResultPage'; import SettingPage from '@_pages/Mypage/SettingPage/SettingPage'; +import KakaoSelectPage from '@_pages/Login/DataMigrationPage/Explanation/KakaoSelect'; const routesConfig = [ { @@ -82,14 +82,14 @@ const routesConfig = [ requiresAuth: false, }, { - path: ROUTES.oAuthMigration, - element: , - requiresAuth: false, + path: ROUTES.kakaoSelection, + element: , + requiresAuth: true, }, { path: ROUTES.oAuthSelection, element: , - requiresAuth: false, + requiresAuth: true, }, { path: ROUTES.oAuth, From 25bf370189d23b7089dac53fdd8d6c9386b3b9d3 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:43:00 +0900 Subject: [PATCH 15/46] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx index e3dc0eb79..d918630d9 100644 --- a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx +++ b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx @@ -4,6 +4,7 @@ import { kakaoOAuth, googleOAuth } from '@_apis/auth'; import { setAccessToken } from '@_utils/tokenManager'; import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; +import { ApiError } from '@_utils/customError/ApiError'; type Provider = 'apple' | 'google' | 'kakao'; @@ -63,8 +64,11 @@ export default function OAuthLoginPage() { navigate(ROUTES.darakbangSelectOption); } } catch (error) { - console.error('OAuth 처리 중 오류 발생:', error); - alert('로그인 처리 중 오류가 발생했습니다.'); + if (error instanceof ApiError) { + alert(error.message); + } else { + alert('알 수 없는 오류가 발생했습니다.'); + } navigate(ROUTES.home); } }; From e771717d34dfc969bc282f0fd6c5ebd3ca5b626b Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:48:20 +0900 Subject: [PATCH 16/46] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20svg=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx | 2 +- .../components/ProfileList/ProfileCard/ProfileCard.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx b/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx index 7e92da810..0a568f317 100644 --- a/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx +++ b/frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import ProfileFrame from './ProfileFrame'; -import EmptyProfile from '@_common/assets/empty_profile.svg'; +import EmptyProfile from '@_common/assets/default_profile.svg'; import Plus from '@_common/assets/tabler_plus.svg?url'; const meta = { diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx index a791a782b..56108e73f 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import ProfileCard from './ProfileCard'; -import EmptyProfile from '@_common/assets/empty_profile.svg'; +import EmptyProfile from '@_common/assets/default_profile.svg'; import Plus from '@_common/assets/tabler_plus.svg?url'; const meta = { From e243351ad6e438ddac9cbaf49f46833905416752 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:48:51 +0900 Subject: [PATCH 17/46] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=A1=9C=EA=B7=B8=EC=9D=B8svg=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/kakaoCircleOuathLogin.svg | 5 +++++ frontend/src/common/assets/kakaoOuathLogin.svg | 4 ---- 2 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 frontend/src/common/assets/kakaoCircleOuathLogin.svg delete mode 100644 frontend/src/common/assets/kakaoOuathLogin.svg diff --git a/frontend/src/common/assets/kakaoCircleOuathLogin.svg b/frontend/src/common/assets/kakaoCircleOuathLogin.svg new file mode 100644 index 000000000..253a1318c --- /dev/null +++ b/frontend/src/common/assets/kakaoCircleOuathLogin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/common/assets/kakaoOuathLogin.svg b/frontend/src/common/assets/kakaoOuathLogin.svg deleted file mode 100644 index 55605e310..000000000 --- a/frontend/src/common/assets/kakaoOuathLogin.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - From ed4aef4a11602109f2e1a1048797bc6b19e458ac Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:49:09 +0900 Subject: [PATCH 18/46] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=A1=9C=EA=B7=B8=EC=9D=B8svg=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Icons/KakaoOAuthIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Icons/KakaoOAuthIcon.tsx b/frontend/src/components/Icons/KakaoOAuthIcon.tsx index f6a4eeea6..0d028c09f 100644 --- a/frontend/src/components/Icons/KakaoOAuthIcon.tsx +++ b/frontend/src/components/Icons/KakaoOAuthIcon.tsx @@ -1,4 +1,4 @@ -import CircleKakaoLogin from '@_common/assets/kakaoOuathLogin.svg'; +import CircleKakaoLogin from '@_common/assets/kakaoCircleOuathLogin.svg'; interface KakaoOAuthLoginIconProps { type: 'bar' | 'circle'; } From bbfe23b8b9c1f27508e71050b15566b49e56f90f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:50:03 +0900 Subject: [PATCH 19/46] =?UTF-8?q?feat:=20Home=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Login/HomePage/HomePage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index f0c032a19..08144375d 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -20,7 +20,7 @@ export default function HomePage() { return ; } if (!lastDarakbangId) { - return ; + return ; } } @@ -101,7 +101,9 @@ export default function HomePage() { - 혹시 카카오톡으로 가입하셨었나요? ☝ + 카카오톡 로그인은 더이상 지원하지 않아요! +
+ 다른 로그인을 이용해주세요 From 1156a1d3c40789466cbe80dcbf2da884eeb24ddf Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:53:58 +0900 Subject: [PATCH 20/46] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C,?= =?UTF-8?q?=20alert=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Login/HomePage/HomePage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index 08144375d..f94eea56c 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -96,7 +96,14 @@ export default function HomePage() {
- From ffed09b2d93b04dc27b55e79b2ff61637008cf72 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Fri, 18 Oct 2024 15:54:22 +0900 Subject: [PATCH 21/46] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20API=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/deletes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/apis/deletes.ts b/frontend/src/apis/deletes.ts index 635fe26c3..e3c5405ca 100644 --- a/frontend/src/apis/deletes.ts +++ b/frontend/src/apis/deletes.ts @@ -7,5 +7,5 @@ export const deleteCancelChamyo = async (moimId: number) => { }; export const deleteMyInfo = async () => { - await ApiClient.deleteWithLastDarakbangId(`/auth`); + await ApiClient.deleteWithAuth(`/auth`); }; From 0528cb95925a167027bdac80ab6f933b8e02475d Mon Sep 17 00:00:00 2001 From: cys4585 Date: Fri, 18 Oct 2024 16:04:36 +0900 Subject: [PATCH 22/46] =?UTF-8?q?feat:=200=EB=B6=84=20=EC=9D=B4=ED=95=98?= =?UTF-8?q?=EB=A1=9C=20=EB=82=A8=EC=95=98=EC=9D=84=20=EB=95=8C=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B3=80=EA=B2=BD,=20=EC=83=89=EC=83=81?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD,=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=ED=8E=98=EC=B9=AD=20=EC=9D=B8=ED=84=B0=EB=B2=8C=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{useBets.ts => useBetsInterval.ts} | 4 ++-- .../BetCardList/BetCard/BetCard.style.ts | 24 +++++++++++-------- .../BetCardList/BetCard/BetCard.tsx | 4 +++- .../components/BetList/BetList.tsx | 4 ++-- 4 files changed, 21 insertions(+), 15 deletions(-) rename frontend/src/hooks/queries/{useBets.ts => useBetsInterval.ts} (87%) diff --git a/frontend/src/hooks/queries/useBets.ts b/frontend/src/hooks/queries/useBetsInterval.ts similarity index 87% rename from frontend/src/hooks/queries/useBets.ts rename to frontend/src/hooks/queries/useBetsInterval.ts index 80e21bc90..4ca088112 100644 --- a/frontend/src/hooks/queries/useBets.ts +++ b/frontend/src/hooks/queries/useBetsInterval.ts @@ -4,7 +4,7 @@ import QUERY_KEYS from '@_constants/queryKeys'; import calculateLeftMinutesUntilDeadline from '@_utils/calculateLeftMinutesUntilDeadline'; import { useQuery } from '@tanstack/react-query'; -export default function useBets() { +export default function useBetsInterval(intervalMs: number) { const { data: bets, isLoading } = useQuery({ queryKey: [QUERY_KEYS.darakbang, getLastDarakbangId(), QUERY_KEYS.bets], queryFn: async () => { @@ -16,7 +16,7 @@ export default function useBets() { })); }, - refetchInterval: 30000, + refetchInterval: intervalMs, }); return { bets, isLoading }; diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts index 846695dc2..c682dfbb5 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts +++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts @@ -18,7 +18,8 @@ export const leftSection = css` `; export const title = ({ theme }: { theme: Theme }) => css` - ${theme.typography.Giant} + font-size: 1.4rem; + font-weight: bold; color: ${theme.colorPalette.grey[400]}; `; @@ -32,30 +33,33 @@ export const deadline = ({ leftMinute: number; }) => css` font-size: ${theme.typography.b2}; - font-size: 22px; + font-size: 2.2rem; font-weight: bold; color: ${isAnnounced || leftMinute < 0 ? theme.colorPalette.grey[400] - : leftMinute < 5 + : leftMinute === 0 ? theme.colorPalette.red[400] - : leftMinute < 10 + : leftMinute < 5 ? theme.colorPalette.yellow[700] - : leftMinute < 15 - ? theme.colorPalette.green[300] - : theme.colorPalette.black[100]}; + : leftMinute < 10 + ? theme.colorPalette.yellow[700] + : leftMinute < 15 + ? theme.colorPalette.green[300] + : theme.colorPalette.black[100]}; `; export const participantCount = ({ theme }: { theme: Theme }) => css` - ${theme.typography.b3} display: flex; align-items: center; + font-size: 1.2rem; color: ${theme.colorPalette.grey[400]}; `; export const banner = ({ theme }: { theme: Theme }) => css` - padding: 0.6rem 1rem; + padding: 0.4rem 1rem; - font-size: ${theme.typography.Medium}; + font-size: 0.9rem; + font-weight: bold; color: white; background-color: ${theme.semantic.primary}; diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx index 618041d73..0930ee8af 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx +++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx @@ -27,7 +27,9 @@ export default function BetCard(props: BetCardProps) { > {bet.isAnnounced || bet.leftMinute < 0 ? '마감됨' - : `마감 ${bet.leftMinute}분 전`} + : bet.leftMinute === 0 + ? '마감 임박' + : `마감 ${bet.leftMinute}분 전`}
{bet.currentParticipants}명 diff --git a/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx b/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx index 125e58a15..def46ad72 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx +++ b/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx @@ -1,9 +1,9 @@ import MissingFallback from '@_components/MissingFallback/MissingFallback'; -import useBets from '@_hooks/queries/useBets'; +import useBetsInterval from '@_hooks/queries/useBetsInterval'; import BetCardList from '../BetCardList/BetCardList'; export default function BetList() { - const { bets, isLoading } = useBets(); + const { bets, isLoading } = useBetsInterval(30_000); if (isLoading) { return
Loading
; From ecda7c54b65a7357236d10fc958607bff58d4b42 Mon Sep 17 00:00:00 2001 From: cys4585 Date: Fri, 18 Oct 2024 17:10:50 +0900 Subject: [PATCH 23/46] =?UTF-8?q?feat:=20=EB=A3=B0=EB=A0=9B=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20validation=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FunnelErrorMessage.style.ts | 7 ++ .../FunnelErrorMessage/FunnelErrorMessage.tsx | 18 ++++ frontend/src/constants/poclies.ts | 4 + .../Bet/BetCreationPage/BetCreationPage.tsx | 64 ++++++++------ .../components/Steps/TitleStep.tsx | 11 ++- .../components/Steps/WaitingMinutesStep.tsx | 8 +- .../hooks/useBetCreationForm.ts | 87 +++++++++++++++++++ 7 files changed, 166 insertions(+), 33 deletions(-) create mode 100644 frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.style.ts create mode 100644 frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.tsx create mode 100644 frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts diff --git a/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.style.ts b/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.style.ts new file mode 100644 index 000000000..91314d853 --- /dev/null +++ b/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.style.ts @@ -0,0 +1,7 @@ +import { css, Theme } from '@emotion/react'; + +export const errorMessage = ({ theme }: { theme: Theme }) => css` + font-size: 1.4rem; + color: ${theme.colorPalette.red[500]}; + text-align: center; +`; diff --git a/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.tsx b/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.tsx new file mode 100644 index 000000000..fc3d83598 --- /dev/null +++ b/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.tsx @@ -0,0 +1,18 @@ +import { useTheme } from '@emotion/react'; +import * as S from './FunnelErrorMessage.style'; + +interface FunnelErrorMessageProps { + isError: boolean; + errorMessage: string; +} + +export default function FunnelErrorMessage(props: FunnelErrorMessageProps) { + const { isError, errorMessage } = props; + + const theme = useTheme(); + + if (!isError) { + return null; + } + return
{errorMessage}
; +} diff --git a/frontend/src/constants/poclies.ts b/frontend/src/constants/poclies.ts index 878f9087a..a53b8ebc7 100644 --- a/frontend/src/constants/poclies.ts +++ b/frontend/src/constants/poclies.ts @@ -29,6 +29,10 @@ const POLICES = { maxNicknameLength: 12, entranceCodeLength: 7, + + minBetTitleLength: 1, + maxBetTitleLength: 20, + betWaitingMinutesOptions: [5, 10, 15, 20, 25, 30], }; export default POLICES; diff --git a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx index 46529caf6..630936f6b 100644 --- a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx @@ -3,31 +3,28 @@ import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton import useFunnel from '@_hooks/useFunnel'; import FunnelLayout from '@_layouts/FunnelLayout/FunnelLayout'; import TitleStep from './components/Steps/TitleStep'; -import { useState } from 'react'; -import { BetInputInfo } from '@_types/index'; import WaitingMinutesStep from './components/Steps/WaitingMinutesStep'; -import useAddBet from '@_hooks/mutaions/useAddBet'; -import GET_ROUTES from '@_common/getRoutes'; -import { useNavigate } from 'react-router-dom'; +import useBetCreationForm from './hooks/useBetCreationForm'; type BetCreationStep = '제목' | '추첨시간'; const steps: BetCreationStep[] = ['제목', '추첨시간']; export default function BetCreationPage() { - const navigate = useNavigate(); - const { Funnel, currentStep, goBack, goNextStep } = useFunnel('제목'); - const [state, setState] = useState({ - title: '', - waitingMinutes: 0, - }); - - const { mutate: createBet } = useAddBet((betId) => { - navigate(GET_ROUTES.nowDarakbang.betDetail(betId)); - }); + const { + form, + isValid, + errorMessage, + updateTitle, + updateWaitingMinutes, + validateTitle, + validateWaitingMinutes, + finalValidate, + createBet, + } = useBetCreationForm(); return ( @@ -44,20 +41,37 @@ export default function BetCreationPage() { step={{ 제목: ( setState({ ...state, title })} - onButtonClick={() => goNextStep('추첨시간')} + title={form.title} + isValid={isValid.title} + errorMessage={errorMessage.title} + onTitleChange={(title: string) => { + validateTitle(title); + updateTitle(title); + }} + onButtonClick={() => { + validateTitle(form.title) && goNextStep('추첨시간'); + }} /> ), 추첨시간: ( - setState({ ...state, waitingMinutes }) - } - onButtonClick={() => createBet(state)} + waitingMinutes={form.waitingMinutes} + isValid={isValid.waitingMinutes} + errorMessage={errorMessage.waitingMinutes} + onWaitingMinutesChange={(waitingMinutes: number) => { + validateWaitingMinutes(waitingMinutes); + updateWaitingMinutes(waitingMinutes); + }} + onButtonClick={() => { + const isValid = finalValidate(form); + + if (!isValid) { + alert('모든 항목을 입력해주세요.'); + return; + } + + createBet(form); + }} /> ), }} diff --git a/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx b/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx index 5bb279643..dfdc9c9b2 100644 --- a/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/components/Steps/TitleStep.tsx @@ -1,4 +1,5 @@ import FunnelButton from '@_components/Funnel/FunnelButton/FunnelButton'; +import FunnelErrorMessage from '@_components/Funnel/FunnelErrorMessage/FunnelErrorMessage'; import FunnelInput from '@_components/Funnel/FunnelInput/FunnelInput'; import FunnelQuestion from '@_components/Funnel/FunnelQuestion/FunnelQuestion'; import FunnelLayout from '@_layouts/FunnelLayout/FunnelLayout'; @@ -8,12 +9,13 @@ import { useEffect, useRef } from 'react'; interface TitleProps { title: BetInputInfo['title']; isValid: boolean; + errorMessage: string; onTitleChange: (title: string) => void; onButtonClick: () => void; } export default function TitleStep(props: TitleProps) { - const { title, isValid, onTitleChange, onButtonClick } = props; + const { title, isValid, errorMessage, onTitleChange, onButtonClick } = props; const inputRef = useRef(null); @@ -41,12 +43,9 @@ export default function TitleStep(props: TitleProps) { + - {title === '' - ? '제목을 입력해주세요' - : !isValid - ? '제목을 잘~ 입력해주세요' - : '다음으로'} + {title === '' ? '룰렛 이름을 입력해주세요' : '다음으로'} diff --git a/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx b/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx index 63f0172c2..d3a239fcc 100644 --- a/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx @@ -1,4 +1,5 @@ import FunnelButton from '@_components/Funnel/FunnelButton/FunnelButton'; +import FunnelErrorMessage from '@_components/Funnel/FunnelErrorMessage/FunnelErrorMessage'; import FunnelQuestion from '@_components/Funnel/FunnelQuestion/FunnelQuestion'; import FunnelRadioCardGroup from '@_components/Funnel/FunnelRadioCardGroup/FunnelRadioCardGroup'; import FunnelRadioCardGroupOption from '@_components/Funnel/FunnelRadioCardGroup/FunnelRadioCardGroupOption/FunnelRadioCardGroupOption'; @@ -8,6 +9,7 @@ import { BetInputInfo } from '@_types/index'; interface TimeStepProps { waitingMinutes: BetInputInfo['waitingMinutes']; isValid: boolean; + errorMessage: string; onWaitingMinutesChange: (waitingMinutes: number) => void; onButtonClick: () => void; } @@ -23,8 +25,9 @@ const options = [ export default function WaitingMinutesStep(props: TimeStepProps) { const { - waitingMinutes: waitingMinutes, + waitingMinutes, isValid, + errorMessage, onWaitingMinutesChange, onButtonClick, } = props; @@ -50,8 +53,9 @@ export default function WaitingMinutesStep(props: TimeStepProps) { + - {!isValid ? '시간을 잘~ 입력해주세요' : '완료'} + 완료 diff --git a/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts b/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts new file mode 100644 index 000000000..5a170d04b --- /dev/null +++ b/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts @@ -0,0 +1,87 @@ +import GET_ROUTES from '@_common/getRoutes'; +import POLICES from '@_constants/poclies'; +import useAddBet from '@_hooks/mutaions/useAddBet'; +import { BetInputInfo } from '@_types/index'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +export default function useBetCreationForm() { + const navigate = useNavigate(); + + const [form, setState] = useState({ + title: '', + waitingMinutes: 0, + }); + const [isValid, setIsValid] = useState({ + title: false, + waitingMinutes: false, + }); + const [errorMessage, setErrorMessage] = useState({ + title: '', + waitingMinutes: '', + }); + + const updateTitle = (title: string) => { + setState({ ...form, title }); + }; + + const updateWaitingMinutes = (waitingMinutes: number) => { + setState({ ...form, waitingMinutes }); + }; + + const validateTitle = (title: string) => { + if ( + title.length < POLICES.minBetTitleLength || + title.length > POLICES.maxBetTitleLength + ) { + setIsValid((prev) => ({ ...prev, title: false })); + setErrorMessage((prev) => ({ + ...prev, + title: '제목은 1자 이상 20자 이하로 입력해주세요.', + })); + return false; + } + + setIsValid((prev) => ({ ...prev, title: true })); + setErrorMessage((prev) => ({ ...prev, title: '' })); + return true; + }; + + const validateWaitingMinutes = (waitingMinutes: number) => { + if (!POLICES.betWaitingMinutesOptions.includes(waitingMinutes)) { + setIsValid((prev) => ({ ...prev, waitingMinutes: false })); + setErrorMessage((prev) => ({ + ...prev, + waitingMinutes: '추첨 시간을 선택해주세요.', + })); + return false; + } + + setIsValid((prev) => ({ ...prev, waitingMinutes: true })); + setErrorMessage((prev) => ({ ...prev, waitingMinutes: '' })); + return true; + }; + + const finalValidate = (form: BetInputInfo) => { + const isTitleValid = validateTitle(form.title); + const isWaitingMinutesValid = validateWaitingMinutes(form.waitingMinutes); + + return isTitleValid && isWaitingMinutesValid; + }; + + const { mutate: createBet } = useAddBet((betId) => { + navigate(GET_ROUTES.nowDarakbang.betDetail(betId)); + }); + + return { + form, + isValid, + errorMessage, + updateTitle, + updateWaitingMinutes, + validateTitle, + validateWaitingMinutes, + finalValidate, + createBet, + }; +} From fa8f0a9f0e55fa4851871f4009c795fce14a9b32 Mon Sep 17 00:00:00 2001 From: cys4585 Date: Fri, 18 Oct 2024 17:17:02 +0900 Subject: [PATCH 24/46] =?UTF-8?q?fix:=20=EB=A3=B0=EB=A0=9B=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=94=B0=EB=8B=A5=20=EB=AC=B8=EC=A0=9C(=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=20=EC=83=9D=EC=84=B1)=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Bet/BetCreationPage/BetCreationPage.tsx | 4 ++-- .../components/Steps/WaitingMinutesStep.tsx | 16 ++++++++++++++-- .../BetCreationPage/hooks/useBetCreationForm.ts | 2 +- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx index 630936f6b..868984656 100644 --- a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx @@ -62,7 +62,7 @@ export default function BetCreationPage() { validateWaitingMinutes(waitingMinutes); updateWaitingMinutes(waitingMinutes); }} - onButtonClick={() => { + onButtonClick={async () => { const isValid = finalValidate(form); if (!isValid) { @@ -70,7 +70,7 @@ export default function BetCreationPage() { return; } - createBet(form); + await createBet(form); }} /> ), diff --git a/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx b/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx index d3a239fcc..e1c8c156c 100644 --- a/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/components/Steps/WaitingMinutesStep.tsx @@ -5,13 +5,14 @@ import FunnelRadioCardGroup from '@_components/Funnel/FunnelRadioCardGroup/Funne import FunnelRadioCardGroupOption from '@_components/Funnel/FunnelRadioCardGroup/FunnelRadioCardGroupOption/FunnelRadioCardGroupOption'; import FunnelLayout from '@_layouts/FunnelLayout/FunnelLayout'; import { BetInputInfo } from '@_types/index'; +import { useRef } from 'react'; interface TimeStepProps { waitingMinutes: BetInputInfo['waitingMinutes']; isValid: boolean; errorMessage: string; onWaitingMinutesChange: (waitingMinutes: number) => void; - onButtonClick: () => void; + onButtonClick: () => Promise; } const options = [ @@ -32,6 +33,14 @@ export default function WaitingMinutesStep(props: TimeStepProps) { onButtonClick, } = props; + const loadingRef = useRef(false); + + const handleButtonClick = async () => { + loadingRef.current = true; + await onButtonClick(); + loadingRef.current = false; + }; + return ( <> @@ -54,7 +63,10 @@ export default function WaitingMinutesStep(props: TimeStepProps) { - + 완료 diff --git a/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts b/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts index 5a170d04b..2973e1b9f 100644 --- a/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts +++ b/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts @@ -69,7 +69,7 @@ export default function useBetCreationForm() { return isTitleValid && isWaitingMinutesValid; }; - const { mutate: createBet } = useAddBet((betId) => { + const { mutateAsync: createBet } = useAddBet((betId) => { navigate(GET_ROUTES.nowDarakbang.betDetail(betId)); }); From c10ddc82929051eb8c5c1c94d6fdcf9011c8caac Mon Sep 17 00:00:00 2001 From: cys4585 Date: Fri, 18 Oct 2024 19:51:35 +0900 Subject: [PATCH 25/46] =?UTF-8?q?feat:=20=EC=83=88=EB=A1=9C=EA=B3=A0?= =?UTF-8?q?=EC=B9=A8=20=EB=8C=80=EC=9D=91,=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EC=9D=B4=ED=83=88=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC=20?= =?UTF-8?q?=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EB=8C=80=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Bet/BetCreationPage/BetCreationPage.tsx | 4 +- .../hooks/useBetCreationForm.ts | 54 ++++++++++++++----- .../MoimCreationPage.hook.test.tsx | 4 +- .../MoimCreationPage/MoimCreationPage.hook.ts | 4 +- .../MoimCreationPage/MoimCreationPage.util.ts | 23 -------- frontend/src/utils/isApproachedByUrl.ts | 22 ++++++++ 6 files changed, 70 insertions(+), 41 deletions(-) create mode 100644 frontend/src/utils/isApproachedByUrl.ts diff --git a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx index 868984656..fb16bf80e 100644 --- a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx +++ b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx @@ -6,7 +6,7 @@ import TitleStep from './components/Steps/TitleStep'; import WaitingMinutesStep from './components/Steps/WaitingMinutesStep'; import useBetCreationForm from './hooks/useBetCreationForm'; -type BetCreationStep = '제목' | '추첨시간'; +export type BetCreationStep = '제목' | '추첨시간'; const steps: BetCreationStep[] = ['제목', '추첨시간']; @@ -24,7 +24,7 @@ export default function BetCreationPage() { validateWaitingMinutes, finalValidate, createBet, - } = useBetCreationForm(); + } = useBetCreationForm(currentStep); return ( diff --git a/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts b/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts index 2973e1b9f..5c7aa3365 100644 --- a/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts +++ b/frontend/src/pages/Bet/BetCreationPage/hooks/useBetCreationForm.ts @@ -1,24 +1,54 @@ import GET_ROUTES from '@_common/getRoutes'; import POLICES from '@_constants/poclies'; import useAddBet from '@_hooks/mutaions/useAddBet'; +import useStatePersist from '@_hooks/useStatePersist'; import { BetInputInfo } from '@_types/index'; -import { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { isApproachedByUrl } from '@_utils/isApproachedByUrl'; +import { useNavigate, useNavigationType } from 'react-router-dom'; +import { BetCreationStep } from '../BetCreationPage'; +import { useEffect } from 'react'; -export default function useBetCreationForm() { +export default function useBetCreationForm(currentStep: BetCreationStep) { const navigate = useNavigate(); + const navigationType = useNavigationType(); - const [form, setState] = useState({ - title: '', - waitingMinutes: 0, + const isNewBetCreation = + currentStep === '제목' && + (navigationType === 'PUSH' || isApproachedByUrl()); + + if (isNewBetCreation) { + sessionStorage.removeItem('betCreationInfo'); + sessionStorage.removeItem('betCreationIsValid'); + sessionStorage.removeItem('betCreationErrorMessage'); + } + + useEffect(() => { + // 뒤로가기를 통해 만들기 페이지에 오는 경우 메인 페이지로 이동 + if (currentStep === '추첨시간' && navigationType === 'POP') { + navigate(GET_ROUTES.nowDarakbang.bet()); + } + }, [currentStep, navigationType, navigate]); + + const [form, setState] = useStatePersist({ + key: 'betCreationInfo', + initialState: { + title: '', + waitingMinutes: 0, + }, }); - const [isValid, setIsValid] = useState({ - title: false, - waitingMinutes: false, + const [isValid, setIsValid] = useStatePersist({ + key: 'betCreationIsValid', + initialState: { + title: false, + waitingMinutes: false, + }, }); - const [errorMessage, setErrorMessage] = useState({ - title: '', - waitingMinutes: '', + const [errorMessage, setErrorMessage] = useStatePersist({ + key: 'betCreationErrorMessage', + initialState: { + title: '', + waitingMinutes: '', + }, }); const updateTitle = (title: string) => { diff --git a/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.test.tsx b/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.test.tsx index 251a00d8e..b1683147d 100644 --- a/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.test.tsx +++ b/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.test.tsx @@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react'; import { BrowserRouter } from 'react-router-dom'; import useMoimCreationForm from './MoimCreationPage.hook'; import { ReactNode } from 'react'; -import * as utils from './MoimCreationPage.util'; +import * as utils from '@_utils/isApproachedByUrl'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; // 세션 스토리지 모킹 @@ -39,7 +39,7 @@ describe('useMoimCreationForm', () => { }); it('URL로 페이지 접근 시, 새로운 모임 생성으로 판단해 초기 상태로 시작한다', () => { - jest.spyOn(utils, 'isApprochedByUrl').mockReturnValue(true); + jest.spyOn(utils, 'isApproachedByUrl').mockReturnValue(true); const { result } = renderHook(() => useMoimCreationForm('이름입력'), { wrapper, diff --git a/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.ts b/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.ts index c3e7bdfd9..a0c328c38 100644 --- a/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.ts +++ b/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.hook.ts @@ -1,7 +1,6 @@ import useStatePersist from '@_hooks/useStatePersist'; import { MoimInputInfo } from '@_types/index'; import { - isApprochedByUrl, validateDate, validateMaxPeople, validatePlace, @@ -13,6 +12,7 @@ import useAddMoim from '@_hooks/mutaions/useAddMoim'; import { useNavigate, useNavigationType } from 'react-router-dom'; import { MoimCreationStep } from './MoimCreationPage'; import GET_ROUTES from '@_common/getRoutes'; +import { isApproachedByUrl } from '@_utils/isApproachedByUrl'; const inputKeyMapper = { title: '이름입력', @@ -35,7 +35,7 @@ const useMoimCreationForm = (currentStep: MoimCreationStep) => { const isNewMoimCreation = currentStep === '이름입력' && - (navigationType === 'PUSH' || isApprochedByUrl()); + (navigationType === 'PUSH' || isApproachedByUrl()); if (isNewMoimCreation) { sessionStorage.removeItem('moimCreationInfo'); diff --git a/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.util.ts b/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.util.ts index c6335041d..555c4f0a4 100644 --- a/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.util.ts +++ b/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.util.ts @@ -55,26 +55,3 @@ export const validateMaxPeople = (maxPeople: number) => export const validateAuthorNickname = (authorNickname: string) => POLICIES.minimumAuthorNicknameLength <= authorNickname.length && authorNickname.length <= POLICIES.maximumAuthorNicknameLength; - -/** - * @description 브라우저의 네비게이션 타입을 구분하는 함수. - * 링크 클릭, URL 직접 입력으로 페이지에 들어온 경우를 구분하기 위해 사용. - * react router로는 감지할 수 없어서 사용. - * ref: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type - */ -const getBrowserNavigationType = (): - | 'navigate' - | 'reload' - | 'back_forward' - | 'prerender' - | undefined => { - const navEntries = performance.getEntriesByType('navigation'); - if (navEntries.length > 0) { - const navEntry = navEntries[0] as PerformanceNavigationTiming; - return navEntry.type; - } -}; - -export const isApprochedByUrl = () => { - return getBrowserNavigationType() === 'navigate'; -}; diff --git a/frontend/src/utils/isApproachedByUrl.ts b/frontend/src/utils/isApproachedByUrl.ts new file mode 100644 index 000000000..ad741306a --- /dev/null +++ b/frontend/src/utils/isApproachedByUrl.ts @@ -0,0 +1,22 @@ +/** + * @description 브라우저의 네비게이션 타입을 구분하는 함수. + * 링크 클릭, URL 직접 입력으로 페이지에 들어온 경우를 구분하기 위해 사용. + * react router로는 감지할 수 없어서 사용. + * ref: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type + */ +const getBrowserNavigationType = (): + | 'navigate' + | 'reload' + | 'back_forward' + | 'prerender' + | undefined => { + const navEntries = performance.getEntriesByType('navigation'); + if (navEntries.length > 0) { + const navEntry = navEntries[0] as PerformanceNavigationTiming; + return navEntry.type; + } +}; + +export const isApproachedByUrl = () => { + return getBrowserNavigationType() === 'navigate'; +}; From 8635e55e741c0be99bbaff352f39593b9d9ca49d Mon Sep 17 00:00:00 2001 From: cys4585 Date: Fri, 18 Oct 2024 20:24:08 +0900 Subject: [PATCH 26/46] =?UTF-8?q?feat:=20=EB=8B=B9=EC=B2=A8=20=ED=99=95?= =?UTF-8?q?=EB=A5=A0=20=EA=B3=84=EC=82=B0=20=EB=B0=8F=20Text=20=EB=AC=B8?= =?UTF-8?q?=EA=B5=AC=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/BetCardList/BetCard/BetCard.style.ts | 5 +++-- .../components/BetCardList/BetCard/BetCard.tsx | 10 +++++++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts index c682dfbb5..08ff65319 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts +++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts @@ -15,6 +15,7 @@ export const leftSection = css` display: flex; flex-direction: column; gap: 0.2rem; + align-items: flex-start; `; export const title = ({ theme }: { theme: Theme }) => css` @@ -56,9 +57,9 @@ export const participantCount = ({ theme }: { theme: Theme }) => css` `; export const banner = ({ theme }: { theme: Theme }) => css` - padding: 0.4rem 1rem; + padding: 0.5rem 0.9rem; - font-size: 0.9rem; + font-size: 1rem; font-weight: bold; color: white; diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx index 0930ee8af..6e260542b 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx +++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx @@ -3,6 +3,7 @@ import * as S from './BetCard.style'; import { useTheme } from '@emotion/react'; import RouletteIcon from '@_components/Icons/RouletteIcon'; import PeopleIcon from '@_components/Icons/PeopleIcon'; +import { useMemo } from 'react'; interface BetCardProps { bet: BetSummary & { leftMinute: number }; @@ -14,6 +15,11 @@ export default function BetCard(props: BetCardProps) { const theme = useTheme(); + const probabilityPercentage = useMemo(() => { + const percentage = (1 / (bet.currentParticipants + 1)) * 100; + return percentage % 1 === 0 ? percentage : percentage.toFixed(1); + }, [bet.currentParticipants]); + return (
onClick(bet.id)}>
@@ -34,7 +40,9 @@ export default function BetCard(props: BetCardProps) {
{bet.currentParticipants}명
- 지금 들어오면 25%! +
+ 지금 당첨 확률 {probabilityPercentage}% +
From 1ff79f67babe1ae5b528a2e2cd2ab0dc8c84bf2e Mon Sep 17 00:00:00 2001 From: cys4585 Date: Sun, 20 Oct 2024 12:29:50 +0900 Subject: [PATCH 27/46] =?UTF-8?q?feat:=20=EB=AC=B8=EC=84=9C=20=ED=95=9C?= =?UTF-8?q?=EA=B5=AD=EC=96=B4=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20?= =?UTF-8?q?og=20description=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/index.html b/frontend/src/index.html index 549fa1389..25f155d64 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -1,5 +1,5 @@ - + @@ -12,7 +12,7 @@ - + @@ -25,7 +25,5 @@
- - From 1b28aaba5def211c353608b7213fae0c9f10ac5e Mon Sep 17 00:00:00 2001 From: cys4585 Date: Sun, 20 Oct 2024 13:00:33 +0900 Subject: [PATCH 28/46] =?UTF-8?q?feat:=20=EB=8B=A4=EB=9D=BD=EB=B0=A9=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EC=B0=B8=EC=97=AC=20=ED=94=8C?= =?UTF-8?q?=EB=A1=9C=EC=9A=B0=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Button/BackArrowButton/BackArrowButton.tsx | 2 +- .../src/components/HighlightSpan/HighlightSpan.tsx | 7 ++++++- .../DarakbangCreationModalContent.tsx | 7 +++++-- .../DarakbangCreationPage.tsx | 14 ++++++-------- .../DarakbangEntrancePage.tsx | 5 ++--- .../DarakbangLandingPage/DarakbangLandingPage.tsx | 7 +++++-- .../DarakbangSelectOptionPage.tsx | 2 +- .../DarakbangSelectPage/DarakbangSelectPage.tsx | 10 ++++------ 8 files changed, 30 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/Button/BackArrowButton/BackArrowButton.tsx b/frontend/src/components/Button/BackArrowButton/BackArrowButton.tsx index 20dc47f98..01eae5844 100644 --- a/frontend/src/components/Button/BackArrowButton/BackArrowButton.tsx +++ b/frontend/src/components/Button/BackArrowButton/BackArrowButton.tsx @@ -9,7 +9,7 @@ export default function BackArrowButton(props: BackArrowButtonProps) { const { ...rest } = props; return ( - ); diff --git a/frontend/src/components/HighlightSpan/HighlightSpan.tsx b/frontend/src/components/HighlightSpan/HighlightSpan.tsx index 25aae6d3e..48b7f5a16 100644 --- a/frontend/src/components/HighlightSpan/HighlightSpan.tsx +++ b/frontend/src/components/HighlightSpan/HighlightSpan.tsx @@ -8,6 +8,7 @@ interface HighlightSpanProps extends PropsWithChildren { normalColor?: SerializedStyles | string; font?: SerializedStyles | string; isCenterAlign?: boolean; + ariaLabel?: string; } interface HighlightSpanContext { @@ -24,6 +25,7 @@ function HighlightSpan(props: HighlightSpanProps) { normalColor = theme.colorPalette.black[100], font = theme.typography.h5, isCenterAlign = false, + ariaLabel, children, } = props; @@ -31,7 +33,10 @@ function HighlightSpan(props: HighlightSpanProps) { - + {children} diff --git a/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationModalContent/DarakbangCreationModalContent.tsx b/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationModalContent/DarakbangCreationModalContent.tsx index 7d3868505..aae5367f0 100644 --- a/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationModalContent/DarakbangCreationModalContent.tsx +++ b/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationModalContent/DarakbangCreationModalContent.tsx @@ -19,13 +19,16 @@ export default function DarakbangCreationModalContent( const theme = useTheme(); return (
- + {'다락방 이름으로 '} {darakbangName} {',\n닉네임으로 '} {nickname} { - '을(를) 선택하셨습니다.\n\n한 번 선택한 다락방 이름과 닉네임은 바꿀 수 없습니다.\n진행하시겠습니까?' + '을(를) 선택하셨습니다.\n\n한 번 선택한 다락방 이름은 바꿀 수 없습니다. 진행하시겠습니까?' }
diff --git a/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationPage.tsx b/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationPage.tsx index 71d87d66f..ab358a873 100644 --- a/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationPage.tsx +++ b/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationPage.tsx @@ -10,11 +10,11 @@ import HighlightSpan from '@_components/HighlightSpan/HighlightSpan'; import Modal from '@_components/Modal/Modal'; import POLICES from '@_constants/poclies'; import SelectLayout from '@_layouts/SelectLayout/SelectLayout'; -import SolidArrow from '@_components/Icons/SolidArrow'; import { setLastDarakbangId } from '@_common/lastDarakbangManager'; import useCreateDarakbang from '@_hooks/mutaions/useCreateDarakbang'; import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; +import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton'; export default function DarakbangCreationPage() { const theme = useTheme(); @@ -34,8 +34,7 @@ export default function DarakbangCreationPage() { - { navigate(-1); }} @@ -47,15 +46,14 @@ export default function DarakbangCreationPage() {
- - {'다락방의 '} - 이름은 + + 다락방의 이름은 무엇인가요? ) => { setDarakbangName(e.target.value); }} @@ -63,7 +61,7 @@ export default function DarakbangCreationPage() { />
- + 닉네임을 입력해주세요{'\n최대 '} {`${POLICES.maxNicknameLength}글자`} diff --git a/frontend/src/pages/Darakbang/DarakbangEntrancePage/DarakbangEntrancePage.tsx b/frontend/src/pages/Darakbang/DarakbangEntrancePage/DarakbangEntrancePage.tsx index 7da481172..5a1748965 100644 --- a/frontend/src/pages/Darakbang/DarakbangEntrancePage/DarakbangEntrancePage.tsx +++ b/frontend/src/pages/Darakbang/DarakbangEntrancePage/DarakbangEntrancePage.tsx @@ -5,9 +5,9 @@ import ErrorControlledInput from '@_components/ErrorControlledInput/ErrorControl import POLICES from '@_constants/poclies'; import ROUTES from '@_constants/routes'; import SelectLayout from '@_layouts/SelectLayout/SelectLayout'; -import SolidArrow from '@_components/Icons/SolidArrow'; import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; +import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton'; export default function DarakbangEntrancePage() { const theme = useTheme(); @@ -17,8 +17,7 @@ export default function DarakbangEntrancePage() { - { navigate(-1); }} diff --git a/frontend/src/pages/Darakbang/DarakbangLandingPage/DarakbangLandingPage.tsx b/frontend/src/pages/Darakbang/DarakbangLandingPage/DarakbangLandingPage.tsx index d46f0b297..8aaa33416 100644 --- a/frontend/src/pages/Darakbang/DarakbangLandingPage/DarakbangLandingPage.tsx +++ b/frontend/src/pages/Darakbang/DarakbangLandingPage/DarakbangLandingPage.tsx @@ -24,12 +24,15 @@ export default function DarakbangLandingPage() { - + {myInfo?.nickname} {`님 반가워요~!\n이제 `} 모임을 확인해볼까요? - {' '} + + + navigate(`${GET_ROUTES.default.oAuthSelection}/unknown`) + } + > + 잘 기억나지 않아요 +
From 566cc16581316bc40de7efc23a09579cc19c9c5a Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:04:14 +0900 Subject: [PATCH 37/46] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OAuthMigrationResultPage.style.ts | 13 +++ .../OAuthMigrationResultPage.tsx | 85 +++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts create mode 100644 frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx diff --git a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts new file mode 100644 index 000000000..fdf690384 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.style.ts @@ -0,0 +1,13 @@ +import { css, Theme } from '@emotion/react'; + +export const titleWrapper = () => css` + margin-top: 20%; + width: 90%; +`; +export const title = ({ theme }: { theme: Theme }) => css` + ${theme.typography.h3} +`; + +export const subtitle = ({ theme }: { theme: Theme }) => css` + ${theme.typography.b1} +`; diff --git a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx new file mode 100644 index 000000000..8caa73574 --- /dev/null +++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx @@ -0,0 +1,85 @@ +import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; +import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import * as S from './OAuthMigrationResultPage.style'; +import { useTheme } from '@emotion/react'; + +import { useNavigate, useParams } from 'react-router-dom'; +import Button from '@_components/Button/Button'; +import ROUTES from '@_constants/routes'; +import { getInviteCode } from '@_common/inviteCodeManager'; +import { useEffect } from 'react'; +import GET_ROUTES from '@_common/getRoutes'; + +export default function OAuthMigrationResultPage() { + const theme = useTheme(); + const { result } = useParams(); + const navigate = useNavigate(); + + useEffect(() => { + if (!result || (result !== 'success' && result !== 'fail')) { + navigate(GET_ROUTES.default.notFound); + } + }, [result, navigate]); + + if (result === 'sucess') { + return ( + + + +
+ + 모우다를 사용할 준비가 되었어요 + +
+ + 이전 기록을 새로운 계정으로 옮겨 었어요! + +
+ + + + + + + ); + } + if (result === 'fail') { + return ( + + + +
+ 기록을 이전하는데 실패했어요! +
+ + 혹시 이전 카카오 계정 가입자가 아닌가요? + +
+ + + + + + + ); + } +} From 1e6b53f3b51d6e2225a45d1b6f1622aecd933265 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:04:43 +0900 Subject: [PATCH 38/46] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=EA=B2=B0=EA=B3=BC=20=ED=9B=85=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/mutaions/useMigrationOAuth.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 frontend/src/hooks/mutaions/useMigrationOAuth.ts diff --git a/frontend/src/hooks/mutaions/useMigrationOAuth.ts b/frontend/src/hooks/mutaions/useMigrationOAuth.ts new file mode 100644 index 000000000..8aad8495f --- /dev/null +++ b/frontend/src/hooks/mutaions/useMigrationOAuth.ts @@ -0,0 +1,13 @@ +import { kakaoOAuth } from '@_apis/auth'; +import { useMutation } from '@tanstack/react-query'; + +export default function useMigrationOAuth( + onSuccess: () => void, + onError: () => void, +) { + return useMutation({ + mutationFn: kakaoOAuth, + onSuccess: onSuccess, + onError: onError, + }); +} From 1c80a5d5482a24d57f3cde2303dea7bf29de76fa Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:07:49 +0900 Subject: [PATCH 39/46] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/routes.ts | 3 ++- frontend/src/routes/router.tsx | 10 ++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 9934c8b05..b6a18a0e7 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -44,7 +44,8 @@ const ROUTES = { main: '/', home: '/home', kakaoSelection: '/oauth-migration', - oAuthSelection: '/oauth-select', + oAuthSelection: '/oauth-select/:type', + resultMigration: '/oauth-migration/:result', oAuthGoogle: '/oauth', oAuth: '/oauth/:provider', darakbangInvitationRoute: '/darakbang-invitation-route', diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx index 49543077d..016321d22 100644 --- a/frontend/src/routes/router.tsx +++ b/frontend/src/routes/router.tsx @@ -27,13 +27,14 @@ import DarakbangManagementPage from '@_pages/Darakbang/DarakbangManagementPage/D import DarakbangMembersPage from '@_pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage'; import DarakbangInvitationPage from '@_pages/Darakbang/DarakbangInvitationPage/DarakbangInvitationPage'; import DarakbangInvitationRoute from '@_pages/Navigator/DarakbangInvitationRoute'; -import OAuthSelectPage from '@_pages/Login/DataMigrationPage/Select/OAuthSelectPage'; import BetListPage from '@_pages/Bet/BetListPage/BetListPage'; import BetDetailPage from '@_pages/Bet/BetDetailPage/BetDetailPage'; import BetCreationPage from '@_pages/Bet/BetCreationPage/BetCreationPage'; import BetResultPage from '@_pages/Bet/BetResultPage/BetResultPage'; import SettingPage from '@_pages/Mypage/SettingPage/SettingPage'; import KakaoSelectPage from '@_pages/Login/DataMigrationPage/Explanation/KakaoSelect'; +import KakaoLoginPage from '@_pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage'; +import OAuthMigrationResultPage from '@_pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage'; const routesConfig = [ { @@ -86,9 +87,14 @@ const routesConfig = [ element: , requiresAuth: true, }, + { + path: ROUTES.resultMigration, + element: , + requiresAuth: true, + }, { path: ROUTES.oAuthSelection, - element: , + element: , requiresAuth: true, }, { From 5cfecc4703f97d7b8ce2db063039e8bf7e13699c Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:08:18 +0900 Subject: [PATCH 40/46] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=9D=84=20=EC=A7=80=EC=9B=90?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=EB=8B=A4=EB=8A=94=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Login/HomePage/HomePage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Login/HomePage/HomePage.tsx b/frontend/src/pages/Login/HomePage/HomePage.tsx index f94eea56c..a907615a6 100644 --- a/frontend/src/pages/Login/HomePage/HomePage.tsx +++ b/frontend/src/pages/Login/HomePage/HomePage.tsx @@ -4,7 +4,6 @@ import GET_ROUTES from '@_common/getRoutes'; import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; import MainLogoIcon from '@_components/Icons/MainLogoIcon'; import AppleOAuthIcon from '@_components/Icons/AppleOAuthIcon'; -import ROUTES from '@_constants/routes'; import { getLastDarakbangId } from '@_common/lastDarakbangManager'; import { getAccessToken } from '@_utils/tokenManager'; import GoogleLoginButton from '@_components/GoogleLoginButton/GoogleLoginButton'; @@ -20,7 +19,7 @@ export default function HomePage() { return ; } if (!lastDarakbangId) { - return ; + return ; } } @@ -56,6 +55,7 @@ export default function HomePage() { css={css` display: flex; flex-direction: column; + margin-top: 30%; gap: 2rem; align-items: center; justify-content: center; @@ -100,7 +100,7 @@ export default function HomePage() { css={S.kakaoButton} onClick={() => { alert( - '카카오톡 로그인은 더이상 지원하지 않아요! 다른 로그인을 이용하여 계정을 옮겨 보세요!', + '카카오톡 로그인은 더 이상 지원하지 않아요! 다른 로그인을 이용하여 계정을 옮겨 보세요!', ); }} > @@ -108,7 +108,7 @@ export default function HomePage() {
- 카카오톡 로그인은 더이상 지원하지 않아요! + 카카오톡 로그인은 더 이상 지원하지 않아요!
다른 로그인을 이용해주세요 From 9f4d72ab1f330d73c3fd85276138f8edc51fe61f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 11:08:34 +0900 Subject: [PATCH 41/46] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Login/OAuthLoginPage/OAuthLoginPage.tsx | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx index d918630d9..20e75a2c6 100644 --- a/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx +++ b/frontend/src/pages/Login/OAuthLoginPage/OAuthLoginPage.tsx @@ -1,10 +1,11 @@ import ROUTES from '@_constants/routes'; -import { getInviteCode } from '@_common/inviteCodeManager'; -import { kakaoOAuth, googleOAuth } from '@_apis/auth'; +import { googleOAuth } from '@_apis/auth'; import { setAccessToken } from '@_utils/tokenManager'; import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { ApiError } from '@_utils/customError/ApiError'; +import useMigrationOAuth from '@_hooks/mutaions/useMigrationOAuth'; +import GET_ROUTES from '@_common/getRoutes'; type Provider = 'apple' | 'google' | 'kakao'; @@ -12,6 +13,10 @@ export default function OAuthLoginPage() { const navigate = useNavigate(); const params = useParams<'provider'>(); const provider = params.provider as Provider | undefined; + const { mutate: kakaoMigration } = useMigrationOAuth( + () => navigate(`${GET_ROUTES.default.resultMigration}/sucess`), + () => navigate(`${GET_ROUTES.default.resultMigration}/fail`), + ); useEffect(() => { const loginOAuth = async () => { @@ -39,30 +44,20 @@ export default function OAuthLoginPage() { apple: async () => { setAccessToken(codeOrToken); navigate(ROUTES.kakaoSelection); - return true; // 조기 반환 }, google: async () => { const response = await googleOAuth(codeOrToken); setAccessToken(response.data.accessToken); navigate(ROUTES.kakaoSelection); - return true; // 조기 반환 }, kakao: async () => { - await kakaoOAuth(codeOrToken); + kakaoMigration(codeOrToken); }, }; const handler = oauthHandlers[provider]; - const shouldReturn = await handler(); - if (shouldReturn) return; - - const inviteCode = getInviteCode(); - if (inviteCode) { - navigate(`${ROUTES.darakbangInvitationRoute}?code=${inviteCode}`); - } else { - navigate(ROUTES.darakbangSelectOption); - } + await handler(); } catch (error) { if (error instanceof ApiError) { alert(error.message); From e1f5657d1deef4c1ab91ef69392d85e84f576a8d Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 22 Oct 2024 14:02:02 +0900 Subject: [PATCH 42/46] =?UTF-8?q?feat:=20happyFallback=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20missingFallback=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/happy_logo.svg | 9 ++++++ .../HappyFallback/HappyFallback.stories.tsx | 29 +++++++++++++++++++ .../HappyFallback/HappyFallback.style.ts} | 0 .../Fallback/HappyFallback/HappyFallback.tsx | 22 ++++++++++++++ .../MissingFallback.stories.tsx | 0 .../MissingFallback/MissingFallback.style.ts | 29 +++++++++++++++++++ .../MissingFallback/MissingFallback.tsx | 0 .../components/BetList/BetList.tsx | 2 +- .../src/pages/Chatting/ChatPage/ChatPage.tsx | 2 +- .../ChattingRoomPage/ChattingRoomPage.tsx | 2 +- .../DarakbangSelectPage.tsx | 2 +- .../Fallback/NotFoundPage/NotFoundPage.tsx | 2 +- .../Explanation/KakaoSelect.tsx | 2 +- .../KakaoLogin/KakaoLoginPage.tsx | 2 +- .../OAuthMigrationResultPage.tsx | 7 +++-- .../HomeMainContent/MoimList/MoimList.tsx | 2 +- .../HomeMainContent/MyMoim/MyMoim.tsx | 2 +- .../MyZzimMoimList/MyZzimMoimList.tsx | 2 +- .../Navigator/DarakbangInvitationRoute.tsx | 2 +- .../NotificationList/NotificationList.tsx | 2 +- .../components/PleaseList/PleaseList.tsx | 2 +- frontend/src/routes/router.tsx | 6 ++-- 22 files changed, 109 insertions(+), 19 deletions(-) create mode 100644 frontend/src/common/assets/happy_logo.svg create mode 100644 frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx rename frontend/src/components/{MissingFallback/MissingFallback.style.ts => Fallback/HappyFallback/HappyFallback.style.ts} (100%) create mode 100644 frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx rename frontend/src/components/{ => Fallback}/MissingFallback/MissingFallback.stories.tsx (100%) create mode 100644 frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts rename frontend/src/components/{ => Fallback}/MissingFallback/MissingFallback.tsx (100%) diff --git a/frontend/src/common/assets/happy_logo.svg b/frontend/src/common/assets/happy_logo.svg new file mode 100644 index 000000000..42d9ad155 --- /dev/null +++ b/frontend/src/common/assets/happy_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx b/frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx new file mode 100644 index 000000000..39c831e08 --- /dev/null +++ b/frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import HappyFallback from './HappyFallback'; +import { css } from '@emotion/react'; + +const meta: Meta = { + component: HappyFallback, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { text: '없어요' }, + + decorators: (Story) => { + return ( +
+ +
+ ); + }, +}; diff --git a/frontend/src/components/MissingFallback/MissingFallback.style.ts b/frontend/src/components/Fallback/HappyFallback/HappyFallback.style.ts similarity index 100% rename from frontend/src/components/MissingFallback/MissingFallback.style.ts rename to frontend/src/components/Fallback/HappyFallback/HappyFallback.style.ts diff --git a/frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx b/frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx new file mode 100644 index 000000000..c455398ca --- /dev/null +++ b/frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx @@ -0,0 +1,22 @@ +import * as S from './HappyFallback.style'; + +import { SerializedStyles, useTheme } from '@emotion/react'; + +import happyLogo from '@_common/assets/happy_logo.svg?url'; + +interface HappyFallbackProps { + text: string; + font?: SerializedStyles; + backgroundColor?: string | SerializedStyles; +} + +export default function HappyFallback(props: HappyFallbackProps) { + const { text, font, backgroundColor } = props; + const theme = useTheme(); + return ( +
+ 좋아용 + {text} +
+ ); +} diff --git a/frontend/src/components/MissingFallback/MissingFallback.stories.tsx b/frontend/src/components/Fallback/MissingFallback/MissingFallback.stories.tsx similarity index 100% rename from frontend/src/components/MissingFallback/MissingFallback.stories.tsx rename to frontend/src/components/Fallback/MissingFallback/MissingFallback.stories.tsx diff --git a/frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts b/frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts new file mode 100644 index 000000000..c7ee1ab1f --- /dev/null +++ b/frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts @@ -0,0 +1,29 @@ +import { SerializedStyles, css } from '@emotion/react'; + +export const container = ({ + backgroundColor, +}: { + backgroundColor?: string | SerializedStyles; +}) => css` + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + ${backgroundColor ? `background-color: ${backgroundColor};` : ''} + + min-width: 30rem; + min-height: 30rem; + + & > * { + text-align: center; + white-space: pre-line; + } +`; + +export const image = css` + width: 100%; + max-width: 40rem; + height: 100%; + max-height: 40rem; +`; diff --git a/frontend/src/components/MissingFallback/MissingFallback.tsx b/frontend/src/components/Fallback/MissingFallback/MissingFallback.tsx similarity index 100% rename from frontend/src/components/MissingFallback/MissingFallback.tsx rename to frontend/src/components/Fallback/MissingFallback/MissingFallback.tsx diff --git a/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx b/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx index 125e58a15..ecb172f0b 100644 --- a/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx +++ b/frontend/src/pages/Bet/BetListPage/components/BetList/BetList.tsx @@ -1,4 +1,4 @@ -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import useBets from '@_hooks/queries/useBets'; import BetCardList from '../BetCardList/BetCardList'; diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx index 6a3fd3b05..5b6761d5b 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx @@ -9,7 +9,7 @@ import ChattingPreview from './components/ChattingPreview/ChattingPreview'; import ChattingPreviewLayout from '@_layouts/ChattingPreviewLayout/ChattingPreviewLayout'; import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper'; import GET_ROUTES from '@_common/getRoutes'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import NavigationBar from '@_components/NavigationBar/NavigationBar'; import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper'; import { common } from '@_common/common.style'; diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx index f7bd96027..865987a40 100644 --- a/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx +++ b/frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx @@ -15,7 +15,7 @@ import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNam import DateTimeModalContent from './components/DateTimeModalContent/DateTimeModalContent'; import GET_ROUTES from '@_common/getRoutes'; import Hamburger from '@_components/Icons/Hamburger'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import Modal from '@_components/Modal/Modal'; import Picker from '@_components/Icons/Picker'; import PlaceModalContent from './components/PlaceModalContent/PlaceModalContent'; diff --git a/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx b/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx index 3d1cfb5a2..398278dfd 100644 --- a/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx +++ b/frontend/src/pages/Darakbang/DarakbangSelectPage/DarakbangSelectPage.tsx @@ -2,7 +2,7 @@ import * as S from './DarakbangSelectPage.style'; import GET_ROUTES from '@_common/getRoutes'; import HighlightSpan from '@_components/HighlightSpan/HighlightSpan'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import ROUTES from '@_constants/routes'; import SelectLayout from '@_layouts/SelectLayout/SelectLayout'; import SolidArrow from '@_components/Icons/SolidArrow'; diff --git a/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx index ee2f0f43f..e763eaead 100644 --- a/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx +++ b/frontend/src/pages/Fallback/NotFoundPage/NotFoundPage.tsx @@ -2,7 +2,7 @@ import CompleteLayout from '@_layouts/CompleteLayout/CompleteLayout'; import { useNavigate } from 'react-router-dom'; import BackLogo from '@_common/assets/back.svg'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import Button from '@_components/Button/Button'; import ROUTES from '@_constants/routes'; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx index 42e3d7dac..fc38b1af1 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/KakaoSelect.tsx @@ -1,5 +1,5 @@ import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import * as S from './KakaoSelct.style'; import { useTheme } from '@emotion/react'; import Button from '@_components/Button/Button'; diff --git a/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx index 351f13487..e445c937f 100644 --- a/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/KakaoLogin/KakaoLoginPage.tsx @@ -1,5 +1,5 @@ import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import * as S from './KakaoLoginPage.style'; import { useTheme } from '@emotion/react'; import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon'; diff --git a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx index 8caa73574..870f64c47 100644 --- a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx +++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx @@ -1,5 +1,5 @@ import LoginLayout from '@_layouts/LoginLayout/LoginLayout'; -import MissingFallback from '@_components/MissingFallback/MissingFallback'; +import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback'; import * as S from './OAuthMigrationResultPage.style'; import { useTheme } from '@emotion/react'; @@ -9,6 +9,7 @@ import ROUTES from '@_constants/routes'; import { getInviteCode } from '@_common/inviteCodeManager'; import { useEffect } from 'react'; import GET_ROUTES from '@_common/getRoutes'; +import HappyFallback from '@_components/Fallback/HappyFallback/HappyFallback'; export default function OAuthMigrationResultPage() { const theme = useTheme(); @@ -32,10 +33,10 @@ export default function OAuthMigrationResultPage() {
- 이전 기록을 새로운 계정으로 옮겨 었어요! + 이전 기록을 새로운 계정으로 옮겼어요!
- +