Refactor: (#666)

* refactor: 이름 변경 .client 제거 및 다국어 ssr

* refactor: numberform 핸드폰 번호 제거

* fix: 빌드 오류 해결

packages/app/android/app/build.gradle

@@ -89,8 +89,8 @@ android {
  applicationId "com.goodcode.gloddy"
  minSdkVersion rootProject.ext.minSdkVersion
  targetSdkVersion rootProject.ext.targetSdkVersion
- versionCode 7
- versionName "1.4.0"
+ versionCode 8
+ versionName "1.4.1"
  resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis()) 
  }
  signingConfigs {

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

@@ -1,7 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 
 import {
- LoginResponse,
  SignUpResponse,
  postEmail,
  postEmailVerify,

packages/web/src/app/[lng]/(main)/community/components/AllContent.client.tsx → packages/web/src/app/[lng]/(main)/community/components/AllContent.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 import { useGetCommunityArticles } from '@/apis/community/queries';
-import ArticleItem from '@/app/[lng]/(main)/community/components/ArticleItem.client';
+import ArticleItem from '@/app/[lng]/(main)/community/components/ArticleItem';
 import Empty from '@/app/[lng]/(main)/community/components/Empty';
 import { ItemList } from '@/components/List';
 import { useBlockStore } from '@/store/useBlockStore';

packages/web/src/app/[lng]/(main)/community/components/ArticleItem.client.tsx → packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx

@@ -5,7 +5,7 @@ import { enUS, ko } from 'date-fns/locale';
 import Image from 'next/image';
 
 import { CommunityArticle } from '@/apis/community';
-import ArticleBadge from '@/app/[lng]/(main)/community/components/ArticleBadge.client';
+import ArticleBadge from '@/app/[lng]/(main)/community/components/ArticleBadge';
 import { useTranslation } from '@/app/i18n/client';
 import { Avatar } from '@/components/Avatar';
 import { Divider } from '@/components/Divider';

packages/web/src/app/[lng]/(main)/community/components/CommunityHeader.tsx

@@ -1,8 +1,5 @@
 import { serverTranslation } from '@/app/i18n';
-import { IconButton } from '@/components/Button';
 import { Header } from '@/components/Header';
-import { Icon } from '@/components/Icon';
-import { NavLink } from '@/components/NavLink';
 
 interface CommunityHeaderProps {
  lng: string;

packages/web/src/app/[lng]/(main)/community/components/ContentSection.client.tsx → packages/web/src/app/[lng]/(main)/community/components/ContentSection.tsx

@@ -1,15 +1,15 @@
 'use client';
 import dynamic from 'next/dynamic';
 import { Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { useTranslation } from '@/app/i18n/client';
 import { Loading } from '@/components/Loading';
 import { Tabs } from '@/components/Tabs';
 
-const AllContent = dynamic(() => import('./AllContent.client'));
+const AllContent = dynamic(() => import('./AllContent'));
 const KpopContent = dynamic(() => import('./KpopContent'));
-const LanguageContent = dynamic(() => import('./LanguageContent.client'));
-const QuestionContent = dynamic(() => import('./QuestionContent.client'));
+const LanguageContent = dynamic(() => import('./LanguageContent'));
+const QuestionContent = dynamic(() => import('./QuestionContent'));
 
 export default function ContentSection() {
  const { t } = useTranslation('community');

packages/web/src/app/[lng]/(main)/community/components/KpopContent.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-import ArticleItem from './ArticleItem.client';
+import ArticleItem from './ArticleItem';
 import Empty from './Empty';
 
 import { useGetCommunityArticles } from '@/apis/community/queries';

packages/web/src/app/[lng]/(main)/community/components/LanguageContent.client.tsx → packages/web/src/app/[lng]/(main)/community/components/LanguageContent.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-import ArticleItem from './ArticleItem.client';
+import ArticleItem from './ArticleItem';
 import Empty from './Empty';
 
 import { useGetCommunityArticles } from '@/apis/community/queries';

packages/web/src/app/[lng]/(main)/community/components/QuestionContent.client.tsx → packages/web/src/app/[lng]/(main)/community/components/QuestionContent.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-import ArticleItem from './ArticleItem.client';
+import ArticleItem from './ArticleItem';
 import Empty from './Empty';
 
 import { useGetCommunityArticles } from '@/apis/community/queries';

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

@@ -1,5 +1,5 @@
 import CommunityHeader from './components/CommunityHeader';
-import ContentSection from './components/ContentSection.client';
+import ContentSection from './components/ContentSection';
 import CreateArticleButton from './components/CreateArticleButton';
 
 import { Keys, getCommunityArticles } from '@/apis/community';

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

@@ -2,19 +2,20 @@
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-import NoMeeting from '../../meeting/components/NoMeeting';
-
 import { useGetGroups } from '@/apis/groups';
-import { useTranslation } from '@/app/i18n/client';
 import { GroupingCard } from '@/components/Card';
+import { Empty } from '@/components/Empty';
 import { ItemList } from '@/components/List';
 import { useBlockStore } from '@/store/useBlockStore';
 
-export default function GroupingCardList() {
+interface GroupingCardList {
+ lng: string;
+}
+
+export default function GroupingCardList({ lng }: GroupingCardList) {
  const { ref, inView } = useInView();
  const { blockGroupIds } = useBlockStore();
  const { data: groupList, fetchNextPage, hasNextPage } = useGetGroups();
- const { t } = useTranslation('grouping');
 
  useEffect(() => {
  if (inView && hasNextPage) fetchNextPage();
@@ -27,7 +28,7 @@ export default function GroupingCardList() {
  renderItem={(group) => {
  return !blockGroupIds.includes(group.groupId) && <GroupingCard groupingData={group} />;
  }}
- renderEmpty={() => <NoMeeting message={t('noGroup')} />}
+ renderEmpty={() => <Empty lng={lng} ns={'grouping'} message={'noGroup'} />}
  />
  <div ref={ref} />
  </>

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

@@ -20,7 +20,7 @@ export default function GroupingPage({ params: { lng } }: GroupingPageProps) {
  <GroupingHeader />
  <LocalSuspenseErrorBoundary>
  <HydrationProvider queryFn={() => getGroups(0)} queryKey={Keys.getGroups()} isInfiniteQuery>
- <GroupingCardList />
+ <GroupingCardList lng={lng} />
  </HydrationProvider>
  </LocalSuspenseErrorBoundary>
  <CreateGroupButton />

packages/web/src/app/[lng]/(main)/meeting/participate/components/ContentSection.client.tsx

@@ -1,10 +1,16 @@
 'use client';
-import FeedbackContent from './FeedbackContent.client';
-import ParticipatingContent from './ParticipatingContent.client';
-import WaitingContent from './WaitingContent.client';
+
+import dynamic from 'next/dynamic';
+import { Suspense } from 'react';
+
 import { useTranslation } from '@/app/i18n/client';
+import { Loading } from '@/components/Loading';
 import { Tabs } from '@/components/Tabs';
 
+const ParticipatingContent = dynamic(() => import('./ParticipatingContent.client'));
+const WaitingContent = dynamic(() => import('./WaitingContent.client'));
+const FeedbackContent = dynamic(() => import('./FeedbackContent.client'));
+
 export default function ContentSection() {
  const { t } = useTranslation('meeting');
 
@@ -16,13 +22,19 @@ export default function ContentSection() {
  <Tabs.Tab value="feedback" text={t('home.evaluation')} />
  </Tabs.List>
  <Tabs.Panel value="participating">
- <ParticipatingContent />
+ <Suspense fallback={<Loading />}>
+ <ParticipatingContent />
+ </Suspense>
  </Tabs.Panel>
  <Tabs.Panel value="waiting">
- <WaitingContent />
+ <Suspense fallback={<Loading />}>
+ <WaitingContent />
+ </Suspense>
  </Tabs.Panel>
  <Tabs.Panel value="feedback">
- <FeedbackContent />
+ <Suspense fallback={<Loading />}>
+ <FeedbackContent />
+ </Suspense>
  </Tabs.Panel>
  </Tabs>
  );

packages/web/src/app/[lng]/(main)/meeting/participate/components/FeedbackContent.client.tsx

@@ -1,7 +1,9 @@
 'use client';
+
 import FeedbackModal from './FeedbackModal.client';
 import SubtitleSection from './SubtitleSection';
 import NoMeeting from '../../components/NoMeeting';
+
 import { useGetMeetingNotEstimated } from '@/apis/meeting';
 import { useTranslation } from '@/app/i18n/client';
 import { Button } from '@/components/Button';

packages/web/src/app/[lng]/(main)/meeting/participate/components/FeedbackModal.client.tsx

@@ -1,9 +1,10 @@
 'use client';
+import Image from 'next/image';
+
 import { useTranslation } from '@/app/i18n/client';
 import { Modal } from '@/components/Modal';
 import { Spacing } from '@/components/Spacing';
 import useAppRouter from '@/hooks/useAppRouter';
-import Image from 'next/image';
 
 interface FeedbackModalProps {
  onClose: () => void;

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

@@ -1,10 +1,14 @@
-'use client';
-import { useTranslation } from '@/app/i18n/client';
-import { Header } from '@/components/Header';
 import Link from 'next/link';
 
-export default function MeetingParticipateHeader() {
- const { t } = useTranslation('meeting');
+import { serverTranslation } from '@/app/i18n';
+import { Header } from '@/components/Header';
+
+interface MeetingParticipateHeaderProps {
+ lng: string;
+}
+
+export default async function MeetingParticipateHeader({ lng }: MeetingParticipateHeaderProps) {
+ const { t } = await serverTranslation(lng, 'meeting');
 
  return (
  <Header>

packages/web/src/app/[lng]/(main)/meeting/participate/components/ParticipatingContent.client.tsx

@@ -1,6 +1,8 @@
 'use client';
+
 import SubtitleSection from './SubtitleSection';
 import NoMeeting from '../../components/NoMeeting';
+
 import { useGetMeetingHosting, useGetMeetingParticipating } from '@/apis/meeting';
 import { useTranslation } from '@/app/i18n/client';
 import { GroupingCard } from '@/components/Card';
@@ -24,6 +26,7 @@ export default function ParticipatingContent() {
  {meetingParticipatingData.length === 0 && (
  <NoMeeting message={t('home.noParticipatingGroups')} />
  )}
+
  {meetingParticipatingData.map((groupingData) => (
  <GroupingCard
  groupingData={groupingData.group}

packages/web/src/app/[lng]/(main)/meeting/participate/components/WaitingContent.client.tsx

@@ -2,6 +2,7 @@
 import RejectModal from './RejectModal';
 import SubtitleSection from './SubtitleSection';
 import NoMeeting from '../../components/NoMeeting';
+
 import { useGetMeetingRejected, useGetMeetingWaiting } from '@/apis/meeting';
 import { useTranslation } from '@/app/i18n/client';
 import { GroupingCard } from '@/components/Card';

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

@@ -22,7 +22,7 @@ interface MeetingPageProps {
 export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
  return (
  <>
- <MeetingParticipateHeader />
+ <MeetingParticipateHeader lng={lng} />
  <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryMultipleFn={[

packages/web/src/app/[lng]/(main)/meeting/scrap/components/ContentSection.client.tsx → packages/web/src/app/[lng]/(main)/meeting/scrap/components/ContentSection.tsx

@@ -1,12 +1,15 @@
 'use client';
-import NoMeeting from '../../components/NoMeeting';
+
 import { useGetMeetingScrap } from '@/apis/meeting';
-import { useTranslation } from '@/app/i18n/client';
 import { GroupingCard } from '@/components/Card';
+import { Empty } from '@/components/Empty';
 import { ItemList } from '@/components/List';
 
-export default function ContentSection() {
- const { t } = useTranslation('meeting');
+interface ContentSectionProps {
+ lng: string;
+}
+
+export default function ContentSection({ lng }: ContentSectionProps) {
  const {
  data: { contents },
  } = useGetMeetingScrap();
@@ -15,7 +18,7 @@ export default function ContentSection() {
  <ItemList
  data={contents}
  renderItem={(content) => <GroupingCard groupingData={content} isScrapped />}
- renderEmpty={() => <NoMeeting message={t('home.noFavoritedGroups')} />}
+ renderEmpty={() => <Empty lng={lng} ns={'meeting'} message={'home.noFavoritedGroups'} />}
  />
  );
 }

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

@@ -1,10 +1,14 @@
-'use client';
-import { useTranslation } from '@/app/i18n/client';
-import { Header } from '@/components/Header';
 import Link from 'next/link';
 
-export default function MeetingScrapHeader() {
- const { t } = useTranslation('meeting');
+import { serverTranslation } from '@/app/i18n';
+import { Header } from '@/components/Header';
+
+interface MeetingScrapHeaderProps {
+ lng: string;
+}
+
+export default async function MeetingScrapHeader({ lng }: MeetingScrapHeaderProps) {
+ const { t } = await serverTranslation(lng, 'meeting');
 
  return (
  <Header>

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

@@ -1,4 +1,4 @@
-import ContentSection from './components/ContentSection.client';
+import ContentSection from './components/ContentSection';
 import MeetingScrapHeader from './components/MeetingScrapHeader';
 
 import { Keys, getMeetingScrap } from '@/apis/meeting';
@@ -15,10 +15,10 @@ interface MeetingPageProps {
 export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
  return (
  <>
- <MeetingScrapHeader />
+ <MeetingScrapHeader lng={lng} />
  <LocalSuspenseErrorBoundary>
  <HydrationProvider queryFn={getMeetingScrap} queryKey={Keys.getMeetingScraps()}>
- <ContentSection />
+ <ContentSection lng={lng} />
  </HydrationProvider>
  </LocalSuspenseErrorBoundary>
  <Footer page="meeting" lng={lng} />

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

@@ -1,5 +1,12 @@
+import { ElementType, KeyboardEventHandler } from 'react';
+
 import { useJoinContext } from '../../../components/JoinContext.client';
 import { formatNumber, formatNumberBackSpace } from '../util';
+
+import type { SignUpState } from '../../../type';
+import type { StatusType } from '../type';
+import type { SubmitHandler } from 'react-hook-form';
+
 import { useLoginMutation, useSMSMutation } from '@/apis/auth';
 import { useTranslation } from '@/app/i18n/client';
 import { Button, ButtonGroup } from '@/components/Button';
@@ -8,11 +15,6 @@ import { Spacing } from '@/components/Spacing';
 import { TextFieldController } from '@/components/TextField';
 import { regexr } from '@/constants/regexr';
 import { useToast } from '@/hooks/useModal';
-import { ElementType, KeyboardEventHandler } from 'react';
-
-import type { SignUpState } from '../../../type';
-import type { StatusType } from '../type';
-import type { SubmitHandler } from 'react-hook-form';
 
 interface NumberSectionProps {
  inputStatus: StatusType;
@@ -45,10 +47,6 @@ export default function NumberForm({ inputStatus, setInputStatus }: NumberSectio
  if (timerStatus === 'RUNNING') return;
  timerStart();
  const phoneNumberWithoutHyphen = data.phoneNumber.replace(/[-\s]/g, '');
- if (phoneNumberWithoutHyphen === '01089695610') {
- mutateLogin({ phoneNumber: data.phoneNumber });
- return;
- }
  mutateSMS({ number: phoneNumberWithoutHyphen });
  openToast('인증 번호가 전송되었습니다.');
  setInputStatus('afterSend');

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

@@ -1,6 +1,10 @@
 import { useJoinContext } from '../../../components/JoinContext.client';
 import { useFunnelContext } from '../../JoinFunnel';
 import { formatWithoutHyphen } from '../util';
+
+import type { SignUpState } from '../../../type';
+import type { SubmitHandler } from 'react-hook-form';
+
 import { LoginResponse, useLoginMutation, useSMSMutation, useSMSVerifyMutation } from '@/apis/auth';
 import { useTranslation } from '@/app/i18n/client';
 import { Button, ButtonGroup } from '@/components/Button';
@@ -10,9 +14,6 @@ import { TextFieldController } from '@/components/TextField';
 import { regexr } from '@/constants/regexr';
 import useLogin from '@/hooks/token/useLogin';
 
-import type { SignUpState } from '../../../type';
-import type { SubmitHandler } from 'react-hook-form';
-
 interface NumberVerifyFormProps {
  setInputStatus: React.Dispatch<React.SetStateAction<'beforeSend' | 'afterSend'>>;
 }