Refactoring: appstore 검수를 위한 데모 ID 적용, 로그인, 로그아웃 개선 (#682)

* feat: chat page 기본 폴더 구조 설계

* refactor: appstore 검수를 위한 데모 ID 적용, 로그인, 로그아웃 개선

packages/web/src/apis/auth/mutations.ts

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
 import {
+ LoginResponse,
  SignUpResponse,
  postEmail,
  postEmailVerify,
@@ -14,8 +15,17 @@ import {
 import useLogin from '@/hooks/token/useLogin';
 
 export const useLoginMutation = () => {
+ const { login } = useLogin();
+
  return useMutation({
  mutationFn: postLogin,
+ onSuccess: async (response: LoginResponse) => {
+ await login({
+ accessToken: response.token.accessToken,
+ refreshToken: response.token.refreshToken,
+ userId: response.userId,
+ });
+ },
  });
 };
 

packages/web/src/app/[lng]/(main)/community/detail/[articleId]/page.tsx

@@ -14,7 +14,7 @@ interface CommunityArticlePageProps {
  };
 }
 
-export default function CommunityArticlePage({ params }: CommunityArticlePageProps) {
+export default async function CommunityArticlePage({ params }: CommunityArticlePageProps) {
  const articleId = Number(params.articleId);
 
  return (

packages/web/src/app/[lng]/(main)/grouping/chatList/components/ChatListHeader.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import { IconButton } from '@/components/Button';
+import { Header } from '@/components/Header';
+import { Icon } from '@/components/Icon';
+import useAppRouter from '@/hooks/useAppRouter';
+
+export default function ChatListHeader() {
+ const { back } = useAppRouter();
+ const { t } = useTranslation('grouping');
+
+ return (
+ <Header className="px-4">
+ <Header.Left>
+ <IconButton size="large" onClick={() => back()}>
+ <Icon id="24-arrow_back" />
+ </IconButton>
+ <p>{t('chat.listHeader')}</p>
+ </Header.Left>
+ </Header>
+ );
+}

packages/web/src/app/[lng]/(main)/grouping/chatList/page.tsx

@@ -0,0 +1,10 @@
+import ChatListHeader from './components/ChatListHeader';
+
+export default function ChatListPage() {
+ return (
+ <>
+ <ChatListHeader />
+ <div className={'flex flex-col'}></div>
+ </>
+ );
+}

packages/web/src/app/[lng]/(main)/grouping/components/GroupingCardList.tsx

@@ -9,11 +9,7 @@ import { Empty } from '@/components/Empty';
 import { ItemList } from '@/components/List';
 import { useBlockStore } from '@/store/useBlockStore';
 
-interface GroupingCardList {
- lng: string;
-}
-
-export default function GroupingCardList({ lng }: GroupingCardList) {
+export default function GroupingCardList() {
  const { t } = useTranslation('grouping');
  const { ref, inView } = useInView();
  const { blockGroupIds } = useBlockStore();

packages/web/src/app/[lng]/(main)/grouping/components/GroupingHeader.tsx

@@ -12,7 +12,18 @@ export default function GroupingHeader() {
  return (
  <Header>
  <Header.Left className="pl-20">{t('headerTitle')}</Header.Left>
- <Header.Right className="pr-4">
+ <Header.Right className="text-primary pr-4">
+ {/* <NavLink href="/notification">
+ <IconButton size="large">
+ <Icon id="24-notification" />
+ </IconButton>
+ </NavLink>
+ <NavLink href="/grouping/chatList">
+ <IconButton size="large">
+ <Icon id="24-send" className="-rotate-45" />
+ </IconButton>
+ </NavLink> */}
+
  <IconButton
  size="large"
  onClick={() => window.open('https://forms.gle/YJvNzLniP8he4xv68', '_blank')}

packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/chat/page.tsx

@@ -0,0 +1,3 @@
+export default function ChatPage() {
+ return <div className={'flex flex-col'}></div>;
+}

packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/manage/page.tsx

@@ -13,7 +13,7 @@ interface GroupingManagePageProps {
  };
 }
 
-export default function GroupingManagePage({ params }: GroupingManagePageProps) {
+export default async function GroupingManagePage({ params }: GroupingManagePageProps) {
  const groupId = Number(params.groupId);
 
  return (

packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/members/page.tsx

@@ -13,7 +13,7 @@ interface GroupingMembersPageProps {
  };
 }
 
-export default function GroupingMembersPage({ params }: GroupingMembersPageProps) {
+export default async function GroupingMembersPage({ params }: GroupingMembersPageProps) {
  const groupId = Number(params.groupId);
 
  return (

packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/page.tsx

@@ -13,7 +13,7 @@ interface GroupingDetailPageProps {
  };
 }
 
-export default function GroupingDetailPage({ params }: GroupingDetailPageProps) {
+export default async function GroupingDetailPage({ params }: GroupingDetailPageProps) {
  const groupId = Number(params.groupId);
 
  return (

packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/write/page.tsx

@@ -13,7 +13,7 @@ interface WritePageProps {
  };
 }
 
-export default function WritePage({ params }: WritePageProps) {
+export default async function WritePage({ params }: WritePageProps) {
  const groupId = Number(params.groupId);
 
  return (

packages/web/src/app/[lng]/(main)/grouping/page.tsx

@@ -9,19 +9,13 @@ import { ErrorFallback } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 import { Spacing } from '@/components/Spacing';
 
-interface GroupingPageProps {
- params: {
- lng: string;
- };
-}
-
-export default function GroupingPage({ params: { lng } }: GroupingPageProps) {
+export default async function GroupingPage() {
  return (
  <>
  <GroupingHeader />
  <ErrorBoundary fallbackRender={ErrorFallback}>
  <HydrationProvider queryFn={() => getGroups(0)} queryKey={Keys.getGroups()} isInfiniteQuery>
- <GroupingCardList lng={lng} />
+ <GroupingCardList />
  </HydrationProvider>
  </ErrorBoundary>
  <CreateGroupButton />

packages/web/src/app/[lng]/(main)/meeting/participate/feedback/[groupId]/page.tsx

@@ -11,7 +11,7 @@ interface PageProps {
  };
 }
 
-export default function page({ params }: PageProps) {
+export default async function page({ params }: PageProps) {
  const groupId = Number(params.groupId);
 
  return (

packages/web/src/app/[lng]/(main)/meeting/participate/page.tsx

@@ -20,7 +20,7 @@ interface MeetingPageProps {
  };
 }
 
-export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
+export default async function MeetingPage({ params: { lng } }: MeetingPageProps) {
  return (
  <>
  <MeetingParticipateHeader lng={lng} />

packages/web/src/app/[lng]/(main)/meeting/scrap/page.tsx

@@ -13,7 +13,7 @@ interface MeetingPageProps {
  };
 }
 
-export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
+export default async function MeetingPage({ params: { lng } }: MeetingPageProps) {
  return (
  <>
  <MeetingScrapHeader lng={lng} />

packages/web/src/app/[lng]/(main)/profile/[userId]/page.tsx

@@ -13,7 +13,7 @@ interface PageProps {
  };
 }
 
-export default function page({ params }: PageProps) {
+export default async function page({ params }: PageProps) {
  const userId = Number(params.userId);
 
  return (

packages/web/src/app/[lng]/(main)/profile/mates/page.tsx

@@ -7,7 +7,7 @@ import { Keys, getMates } from '@/apis/profile';
 import { ErrorFallback } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 
-export default function MatesPage() {
+export default async function MatesPage() {
  return (
  <>
  <MatesHeader />

packages/web/src/app/[lng]/(main)/profile/page.tsx

@@ -13,7 +13,7 @@ interface ProfilePageProps {
  };
 }
 
-export default function Profile({ params: { lng } }: ProfilePageProps) {
+export default async function Profile({ params: { lng } }: ProfilePageProps) {
  return (
  <>
  <ProfileHeader />

packages/web/src/app/[lng]/(main)/profile/praise/page.tsx

@@ -7,7 +7,7 @@ import { Keys, getPraises } from '@/apis/profile';
 import { ErrorFallback } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 
-export default function PraisePage() {
+export default async function PraisePage() {
  return (
  <>
  <PraiseHeader />

packages/web/src/app/[lng]/(main)/profile/setting/delete/components/DeleteCompleteModal.tsx

@@ -1,12 +1,15 @@
 import { useTranslation } from '@/app/i18n/client';
 import { Modal } from '@/components/Modal';
 import { Spacing } from '@/components/Spacing';
-import sendMessageToReactNative from '@/utils/sendMessageToReactNative';
+import useLogout from '@/hooks/token/useLogout';
 
 export default function DeleteCompleteModal() {
+ const { logout } = useLogout();
+
  const handleDeleteAccount = () => {
- sendMessageToReactNative({ type: 'SIGN_OUT' });
+ logout();
  };
+
  const { t } = useTranslation('profile');
 
  return (

packages/web/src/app/[lng]/(main)/profile/setting/delete/components/DeleteModal.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from '@/app/i18n/client';
 import { Icon } from '@/components/Icon';
 import { Modal } from '@/components/Modal';
 import { Spacing } from '@/components/Spacing';
-import useLogout from '@/hooks/token/useLogout';
 import useModal from '@/hooks/useModal/useModal';
 
 interface DeleteModalProps {
@@ -16,10 +15,8 @@ export default function DeleteModal({ onCancelClick }: DeleteModalProps) {
  const { open } = useModal();
  const { t } = useTranslation('profile');
  const { mutate } = usePatchSignOut();
- const { logout } = useLogout();
  const handleDeleteClick = () => {
  mutate();
- logout();
  open(() => <DeleteCompleteModal />);
  };
 

packages/web/src/app/[lng]/(main)/profile/setting/edit/page.tsx

@@ -4,7 +4,7 @@ import { Keys, getProfile } from '@/apis/profile';
 import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 
-export default function page() {
+export default async function page() {
  return (
  <LocalSuspenseErrorBoundary>
  <HydrationProvider queryKey={Keys.getProfile()} queryFn={getProfile}>

packages/web/src/app/[lng]/(main)/profile/verify/components/VerifyBottomSheet.tsx

@@ -1,3 +1,8 @@
+import { memo } from 'react';
+
+import type { VerifyType } from '../type';
+import type { UseFormReturn } from 'react-hook-form';
+
 import { useEmailVerifyMutation } from '@/apis/profile';
 import { useTranslation } from '@/app/i18n/client';
 import { Button, ButtonGroup } from '@/components/Button';
@@ -6,10 +11,6 @@ import { TextFieldController } from '@/components/TextField';
 import { regexr } from '@/constants/regexr';
 import useAppRouter from '@/hooks/useAppRouter';
 import { useTimer } from '@/hooks/useTimer';
-import { memo } from 'react';
-
-import type { VerifyType } from '../type';
-import type { UseFormReturn } from 'react-hook-form';
 
 interface VerifyBottomSheetProps extends ModalProps {
  onClose: () => void;

packages/web/src/app/[lng]/(sub)/join/funnels/step1/components/NumberForm.tsx

@@ -13,6 +13,7 @@ import { Button, ButtonGroup } from '@/components/Button';
 import { useTimerContext } from '@/components/Provider';
 import { Spacing } from '@/components/Spacing';
 import { TextFieldController } from '@/components/TextField';
+import { DEMO_ID } from '@/constants';
 import { regexr } from '@/constants/regexr';
 import useToast from '@/hooks/useModal/useToast';
 
@@ -47,8 +48,12 @@ export default function NumberForm({ inputStatus, setInputStatus }: NumberSectio
  if (timerStatus === 'RUNNING') return;
  timerStart();
  const phoneNumberWithoutHyphen = data.phoneNumber.replace(/[-\s]/g, '');
+ if (phoneNumberWithoutHyphen === DEMO_ID) {
+ mutateLogin({ phoneNumber: data.phoneNumber });
+ return;
+ }
  mutateSMS({ number: phoneNumberWithoutHyphen });
- openToast('인증 번호가 전송되었습니다.');
+ openToast(t('verificationCodeSended'));
  setInputStatus('afterSend');
  };
 

packages/web/src/app/[lng]/(sub)/join/funnels/step1/components/NumberVerifyForm.tsx

@@ -63,28 +63,12 @@ export default function NumberVerifyForm({ setInputStatus }: NumberVerifyFormPro
  },
  {
  onSuccess: () => {
- mutateLogin(
- { phoneNumber: data.phoneNumber },
- {
- onSuccess: async (response: LoginResponse) => {
- if (!response.existUser) {
- nextStep();
- return;
- }
-
- await login({
- accessToken: response.token.accessToken,
- refreshToken: response.token.refreshToken,
- userId: response.userId,
- });
- },
- }
- );
+ mutateLogin({ phoneNumber: data.phoneNumber });
  },
  onError: () => {
  setError('verifyNumber', {
  type: 'validate',
- message: '인증번호가 잘못되었습니다.',
+ message: t('인증 번호를 다시 확인해주세요.'),
  });
  },
  }

packages/web/src/app/[lng]/(sub)/join/funnels/step3/components/VerifyBottomSheet.tsx

@@ -1,14 +1,16 @@
+import { memo } from 'react';
+
 import { useJoinContext } from '../../../components/JoinContext';
+
+import type { SignUpState } from '../../../type';
+
 import { useEmailVerifyMutation } from '@/apis/auth';
 import { useTranslation } from '@/app/i18n/client';
 import { Button, ButtonGroup } from '@/components/Button';
 import { BottomSheet, type ModalProps } from '@/components/Modal';
 import { TextFieldController } from '@/components/TextField';
 import { regexr } from '@/constants/regexr';
 import { useTimer } from '@/hooks/useTimer';
-import { memo } from 'react';
-
-import type { SignUpState } from '../../../type';
 
 interface VerifyBottomSheetProps extends ModalProps {
  onClose: () => void;

packages/web/src/app/[lng]/(sub)/notification/page.tsx

@@ -1,5 +1,6 @@
 import NotificationHeader from './components/NotificationHeader';
 import NotificationSection from './components/NotificationSection';
+
 import { Keys, getNotification } from '@/apis/notifications';
 import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';

packages/web/src/app/i18n/locales/en/join.json

@@ -94,5 +94,7 @@
  "건너뛰기": "Skip",
  "인증번호": "Verification Code",
  "인증 번호를 다시 확인해주세요.": "Please check your verification code again.",
- "인증 번호 재전송은 1분에 한 번만 가능합니다.": "Verification code can only be sent once per minute."
+ "인증 번호 재전송은 1분에 한 번만 가능합니다.": "Verification code can only be sent once per minute.",
+
+ "verificationCodeSended": "Verification code sent."
 }