Release/v1.4.12

Release/v1.4.12

packages/web/next.config.mjs

@@ -20,6 +20,10 @@ const nextConfig = {
  hostname: 'opendata.mofa.go.kr',
  },
  ],
+ deviceSizes: [450],
+ imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 450],
+ minimumCacheTTL: 31536000,
+ formats: ['image/webp'],
  },
 };
 export default withBundleAnalyzer(withPlaiceholder(nextConfig));

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { format, formatDistanceToNow } from 'date-fns';
-import { enUS, ko } from 'date-fns/locale';
+import { ko } from 'date-fns/locale';
 import Image from 'next/image';
 
 import { CommunityArticle } from '@/apis/community';
@@ -14,27 +13,15 @@ import { Flex } from '@/components/Layout';
 import { Spacing } from '@/components/Spacing';
 import useAppRouter from '@/hooks/useAppRouter';
 import cn from '@/utils/cn';
-
-const formatDate = (date: string, locale: Locale) => {
- const d = new Date(date);
- const now = Date.now();
- const diff = (now - d.getTime()) / 1000;
- if (diff < 60 * 1) {
- return '방금 전';
- }
- if (diff < 60 * 60 * 24 * 3) {
- return formatDistanceToNow(d, { addSuffix: true, locale });
- }
- return format(d, 'MM/dd', { locale });
-};
+import { formatDate } from '@/utils/formatDate';
 
 interface ArticleItemProps {
  articleData: CommunityArticle;
  onClick?: () => void;
 }
 
 export default function ArticleItem({ articleData, onClick }: ArticleItemProps) {
- const { t, i18n } = useTranslation('community');
+ const { t } = useTranslation('community');
  const { push } = useAppRouter();
  const { article, writer } = articleData;
 
@@ -52,16 +39,14 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
 
  const { isCertifiedStudent, reliabilityLevel, nickName, countryImage, profileImage } = writer;
 
- const locale = i18n.language === 'ko' ? ko : enUS;
-
  return (
  <div
  className="p-20"
  onClick={onClick || (() => push(`/community/detail/${articleId}`, false))}
  >
  <Flex justify="between" align="center">
  <ArticleBadge type={category.name}>{t(`category.${category.name}`)}</ArticleBadge>
- <p className="text-caption text-sign-tertiary">{formatDate(createdAt, locale)}</p>
+ <p className="text-caption text-sign-tertiary">{formatDate(createdAt, ko)}</p>
  </Flex>
  <Spacing size={12} />
  <Flex justify="between" className="gap-6">
@@ -72,7 +57,7 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
  </div>
  {!!images?.length && (
  <div className="rounded-8 relative h-80 w-80 shrink-0 overflow-hidden">
- <Image src={images[0]} alt="이미지" sizes="80px" fill className="object-cover" />
+ <Image src={images[0]} alt="이미지" sizes={'90px'} fill className="object-cover" />
  </div>
  )}
  </Flex>

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

@@ -114,7 +114,13 @@ export default function ArticleItem({ article }: ArticleItemProps) {
  open(() => <ImageModal images={images} currentImage={imageUrl} onClose={exit} />)
  }
  >
- <Image src={imageUrl} alt="article_image" className="object-cover" fill />
+ <Image
+ src={imageUrl}
+ alt="article_image"
+ className="object-cover"
+ fill
+ sizes={'128px'}
+ />
  </div>
  ))}
  </Flex>

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

@@ -0,0 +1,23 @@
+'use client';
+
+import ChatCard from './ChatItem';
+import { chatList } from './dummy';
+
+import { useTranslation } from '@/app/i18n/client';
+import { Empty } from '@/components/Empty';
+import { ItemList } from '@/components/List';
+
+export default function ChatCardList() {
+ const { t } = useTranslation('grouping');
+
+ return (
+ <>
+ <ItemList
+ data={chatList}
+ renderItem={(chat) => <ChatCard chatData={chat} />}
+ renderEmpty={() => <Empty message={t('noGroup')} />}
+ />
+ <div />
+ </>
+ );
+}

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

@@ -0,0 +1,64 @@
+import { ko } from 'date-fns/locale';
+import Image from 'next/image';
+
+import { Chat } from './dummy';
+
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+import ImageSample from '@/components/Image/ImageSample';
+import { Flex } from '@/components/Layout';
+import { NavLink } from '@/components/NavLink';
+import { Spacing } from '@/components/Spacing';
+import cn from '@/utils/cn';
+import { formatDate } from '@/utils/formatDate';
+
+interface ChatCardProps extends HTMLAttributes<HTMLDivElement> {
+ chatData: Chat;
+}
+
+export default function ChatCard({ chatData, children }: PropsWithChildren<ChatCardProps>) {
+ const { title, content, imageUrl, newMessag, groupId, latestMessageTiem } = chatData;
+
+ return (
+ <Flex className="bg-white px-20 py-12" direction="column">
+ <NavLink href={`/grouping/detail/${groupId}?tab=detail`} className="flex items-center">
+ <section className="relative h-60 w-60 shrink-0">
+ {imageUrl ? (
+ <Image
+ fill
+ src={imageUrl}
+ alt="group"
+ className="rounded-8 object-cover"
+ loading="lazy"
+ sizes="32px"
+ />
+ ) : (
+ <ImageSample width={96} height={96} />
+ )}
+ </section>
+
+ <Spacing size={12} direction="horizontal" />
+
+ <section className="relative grow overflow-hidden ">
+ <Flex justify="between" direction="row">
+ <Flex align="start" direction="column">
+ <p className="text-subtitle-2 grow truncate">{title}</p>
+ <p className="text-paragraph-2 text-sign-tertiary truncate">{content}</p>
+ </Flex>
+ <Flex align="end" justify="between" direction="column">
+ <p className="text-paragraph-2 text-sign-caption truncate">
+ {formatDate(latestMessageTiem, ko)}
+ </p>
+ {newMessag && (
+ <div className="text-paragraph-2 text-sign-white flex h-20 w-20 items-center justify-center rounded-full bg-red-400">
+ {newMessag}
+ </div>
+ )}
+ </Flex>
+ </Flex>
+ </section>
+ </NavLink>
+ {children}
+ </Flex>
+ );
+}

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

@@ -1,23 +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() {
+interface ChatListHeaderProps {
+ title: string;
+}
+
+export default function ChatListHeader({ title }: ChatListHeaderProps) {
  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>
+ <p>{title}</p>
  </Header.Left>
  </Header>
  );

packages/web/src/app/[lng]/(main)/grouping/chatList/components/dummy.ts

@@ -0,0 +1,44 @@
+export interface Chat {
+ title: string;
+ content: string;
+ imageUrl: string;
+ newMessag?: number;
+ groupId: number;
+ latestMessageTiem: string;
+}
+
+export const chatList: Chat[] = [
+ {
+ title: '응가 뿌직',
+ content: '응가좀 치는사람 모이셈',
+ newMessag: 2,
+ imageUrl: '/images/approve_character.png',
+ groupId: 10,
+ latestMessageTiem: '2024-04-06T20:32',
+ },
+ {
+ title: '응가 뿌직',
+ content: '응가좀 치는사람 모이셈',
+ newMessag: 1,
+ imageUrl: '/images/approve_character.png',
+ groupId: 10,
+ latestMessageTiem: '2024-04-10T18:44',
+ },
+ {
+ title: '응가 뿌직',
+ content: '응가좀 치는사람 모이셈',
+
+ imageUrl: '/images/approve_character.png',
+ groupId: 10,
+ latestMessageTiem: '2024-04-06T20:32',
+ },
+ {
+ title: '응가 뿌직',
+ content: '응가좀 치는사람 모이셈',
+ newMessag: 3,
+
+ imageUrl: '/images/approve_character.png',
+ groupId: 10,
+ latestMessageTiem: '2024-04-06T20:32',
+ },
+];

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

@@ -1,10 +1,21 @@
+import ChatCardList from './components/ChatCardList';
 import ChatListHeader from './components/ChatListHeader';
 
-export default function ChatListPage() {
+import { serverTranslation } from '@/app/i18n';
+
+interface ChatListPageProps {
+ params: {
+ lng: string;
+ };
+}
+
+export default async function ChatListPage({ params: { lng } }: ChatListPageProps) {
+ const { t } = await serverTranslation(lng, 'grouping');
+
  return (
  <>
- <ChatListHeader />
- <div className={'flex flex-col'}></div>
+ <ChatListHeader title={t('chat.listHeader')} />
+ <ChatCardList />
  </>
  );
 }

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

@@ -1,8 +1,10 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
 
+import ArticlesContent from './articles/ArticlesContent';
+import ChatContent from './chat/ChatContent';
+import DetailContent from './detail/DetailContent';
 import TopSection from './TopSection';
 
 import { useGetGroupDetail } from '@/apis/groups';
@@ -12,34 +14,34 @@ import { Spacing } from '@/components/Spacing';
 import { Tabs } from '@/components/Tabs';
 import { useNumberParams } from '@/hooks/useNumberParams';
 
-const DetailContent = dynamic(() => import('./detail/DetailContent'));
-const ArticlesContent = dynamic(() => import('./articles/ArticlesContent'));
-
-export default function GroupDetailPage() {
+export default function GroupDetail() {
  const { t } = useTranslation('groupDetail');
  const { groupId } = useNumberParams<['groupId']>();
+
+ const searchParams = useSearchParams().get('tab');
+
  const { data: groupDetailData } = useGetGroupDetail(groupId);
  const { myGroup } = groupDetailData;
 
  return (
  <>
- <TopSection />
+ {searchParams !== 'chat' && <TopSection />}
  <Divider />
  <Tabs>
  <Tabs.List>
  <Tabs.Tab value="detail" text={t('details.tab')} />
  <Tabs.Tab value="articles" text={t('board.tab')} disabled={!myGroup} />
+ {/* <Tabs.Tab value="chat" text={t('board.chat')} /> */}
  </Tabs.List>
  <Tabs.Panel value="detail">
- <Suspense>
- <DetailContent />
- </Suspense>
+ <DetailContent />
  </Tabs.Panel>
  <Tabs.Panel value="articles">
- <Suspense>
- <ArticlesContent />
- </Suspense>
+ <ArticlesContent />
  </Tabs.Panel>
+ {/* <Tabs.Panel value="chat">
+ <ChatContent />
+ </Tabs.Panel> */}
  </Tabs>
  <Spacing size={60} />
  </>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useSearchParams } from 'next/navigation';
 import { Suspense } from 'react';
 
 import BlockDoneModal from '../../../components/BlockDoneModal';
@@ -20,9 +21,10 @@ import { useBlockStore } from '@/store/useBlockStore';
 export default function GroupDetailHeader() {
  const { back } = useAppRouter();
  const { groupId } = useNumberParams<['groupId']>();
+ const searchParams = useSearchParams().get('tab');
 
  return (
- <Header className="px-4">
+ <Header className="px-4" isSpacing={searchParams !== 'chat'}>
  <Header.Left>
  <IconButton size="large" onClick={() => back()}>
  <Icon id="24-arrow_back" />

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

@@ -0,0 +1,29 @@
+import { usePathname } from 'next/navigation';
+
+import MessageForm from '@/components/Form/MessageForm';
+import { Spacing } from '@/components/Spacing';
+import { useNumberParams } from '@/hooks/useNumberParams';
+
+export default function ChatContent() {
+ const pathname = usePathname();
+ const { groupId } = useNumberParams<['groupId']>();
+
+ return (
+ <section className="bg-brand-color h-full overflow-auto">
+ <Spacing size={48} />
+
+ <div className="flex flex-col gap-10">
+ <div className="h-300 bg-primary"></div>
+ <div className="h-300 bg-primary"></div>
+ <div className="h-300 bg-primary"></div>
+ <div className="h-300 bg-primary"></div>
+ <div className="h-300 bg-primary"></div>
+ <div className="h-300 bg-primary"></div>
+ <div className="h-300 bg-primary"></div>
+ <div className="h-300 bg-primary"></div>
+ </div>
+
+ <MessageForm />
+ </section>
+ );
+}