Merge pull request #524 from gloddy-dev/release/v1.3.0

Release/v1.3.0

next.config.js → next.config.mjs

@@ -1,4 +1,6 @@
-const { withSentryConfig } = require('@sentry/nextjs');
+import withPlaiceholder from '@plaiceholder/next';
+
+import { withSentryConfig } from '@sentry/nextjs';
 
 /**
  * @type {import('next').NextConfig}
@@ -23,4 +25,4 @@ const sentryWebpackPluginOptions = {
  project: 'javascript-nextjs',
 };
 
-module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);
+export default withPlaiceholder(withSentryConfig(nextConfig, sentryWebpackPluginOptions));

package.json

@@ -15,6 +15,8 @@
  "make-sprite": "rm public/sprite/sprite.svg && svgstore -o public/sprite/sprite.svg public/sprite/icons/**/*.svg"
  },
  "dependencies": {
+ "@next/bundle-analyzer": "^14.0.3",
+ "@plaiceholder/next": "^3.0.0",
  "@react-google-maps/api": "^2.19.2",
  "@sentry/cli": "^2.20.4",
  "@sentry/nextjs": "^7.62.0",
@@ -34,6 +36,7 @@
  "i18next-resources-to-backend": "^1.1.4",
  "lodash": "^4.17.21",
  "next": "13.5.6",
+ "plaiceholder": "^3.0.0",
  "react": "18.2.0",
  "react-datepicker": "^4.15.0",
  "react-dom": "18.2.0",

src/apis/notifications/type.ts

@@ -2,13 +2,23 @@ export interface FCMTokenRequest {
  token: string;
 }
 
-type NotificationType = 'APPLY_APPROVE' | 'APPLY_REFUSE' | 'APPLY_CREATE' | 'GROUP_LEAVE';
+type NotificationType =
+ | 'APPLY_CREATE'
+ | 'APPLY_APPROVE'
+ | 'APPLY_REFUSE'
+ | 'GROUP_LEAVE'
+ | 'GROUP_ARTICLE_CREATE'
+ | 'GROUP_APPROACHING_START'
+ | 'GROUP_END';
 
 export type Notification = {
  userId: number;
  redirectId: number;
  content: string;
  type: NotificationType;
+ image: string;
+ createdAt: string;
+ title: string;
 };
 
 export interface NotificationResponse {

src/app/[lng]/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx

@@ -24,6 +24,7 @@ export default function LocationSection({
  language: lng,
  region: 'KR',
  });
+ console.log(place?.url);
 
  if (typeof google === 'undefined') return null;
 
@@ -34,7 +35,7 @@ export default function LocationSection({
  <div className="relative overflow-hidden rounded-8 bg-divider">
  <div
  className="absolute left-0 top-0 z-[2] aspect-video w-full cursor-pointer opacity-0"
- onClick={() => window.open(place?.url, '_blank')}
+ onClick={() => place?.url && window.open(place?.url, '_blank')}
  />
  <div className="aspect-video w-full">
  <GoogleMap
@@ -53,7 +54,6 @@ export default function LocationSection({
  <div className="p-16">
  <p>
  <span className="text-subtitle-2">{place?.name || placeName}</span>
- {/* <span className="pl-4 text-caption text-sign-sub">호프, 요리주점</span> */}
  </p>
  <Spacing size={2} />
  <p className="text-paragraph-2 text-sign-secondary">

src/app/[lng]/(main)/grouping/create/components/CreateGroupContext.tsx

@@ -11,6 +11,7 @@ export default function CreateGroupContextProvider({ children }: StrictPropsWith
  const methods = useForm<CreateGroupContextValue>({
  defaultValues: {
  imageUrl: '',
+ previewImage: '',
  title: '',
  content: '',
  meetDate: new Date(),

src/app/[lng]/(main)/grouping/create/components/CreateHeader.client.tsx

@@ -2,15 +2,15 @@ import { useTranslation } from '@/app/i18n/client';
 import { IconButton } from '@/components/Button';
 import { Header } from '@/components/Header';
 import { Icon } from '@/components/Icon';
-import useAppRouter from '@/hooks/useAppRouter';
+import { useRouter } from 'next/navigation';
 
 interface CreateHeaderProps {
  currentStep: 'main' | 'meetDate';
 }
 
 export default function CreateHeader({ currentStep }: CreateHeaderProps) {
  const { t } = useTranslation('grouping');
- const { back } = useAppRouter();
+ const { back } = useRouter();
 
  return (
  <Header className="px-4">

src/app/[lng]/(main)/grouping/create/funnels/CreateGroupFunnel.client.tsx

@@ -45,17 +45,13 @@ export default function CreateFunnel() {
  <CreateHeader currentStep={currentStep} />
  <Funnel>
  <Funnel.Step name="main">
- <PageAnimation>
- <MainStep
- onCreateSubmit={handleCreateSubmit}
- onSelectMeetDate={() => setStep('meetDate')}
- />
- </PageAnimation>
+ <MainStep
+ onCreateSubmit={handleCreateSubmit}
+ onSelectMeetDate={() => setStep('meetDate')}
+ />
  </Funnel.Step>
  <Funnel.Step name="meetDate">
- <PageAnimation>
- <MeetDateStep onDone={prevStep} />
- </PageAnimation>
+ <MeetDateStep onDone={prevStep} />
  </Funnel.Step>
  </Funnel>
  <LayerLoading isLoading={status === 'loading' || status === 'success'} />

src/app/[lng]/(main)/grouping/create/funnels/main/UploadSection.client.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { Icon } from '@/components/Icon';
 import { Flex } from '@/components/Layout';
-import { Loading } from '@/components/Loading';
 import { useFileUpload } from '@/hooks/useFileUpload';
 import Image from 'next/image';
 import { memo } from 'react';
@@ -18,10 +17,14 @@ export default function UploadSection({ control }: ImageThumbnailProps) {
  name: 'imageUrl',
  control,
  });
+ const { field: previewImageField } = useController({
+ name: 'previewImage',
+ control,
+ });
 
- const { handleFileUploadClick, isLoading } = useFileUpload((files) => {
+ const { handleFileUploadClick } = useFileUpload(async (files) => {
  field.onChange(files[0]);
- });
+ }, previewImageField);
 
  return (
  <Flex
@@ -30,23 +33,18 @@ export default function UploadSection({ control }: ImageThumbnailProps) {
  className="relative mx-20 aspect-[8/5] overflow-hidden rounded-8 bg-sub"
  onClick={handleFileUploadClick}
  >
- <RenderImage isLoading={isLoading} imageUrl={field.value} />
+ <RenderImage previewImage={previewImageField.value} />
  </Flex>
  );
 }
 
 interface RenderImageProps {
- isLoading: boolean;
- imageUrl: string;
+ previewImage: string;
 }
 
-const RenderImage = memo(function ({ isLoading, imageUrl }: RenderImageProps) {
- if (isLoading) {
- return <Loading />;
- }
-
- if (imageUrl) {
- return <Image src={imageUrl} alt="group_image" className="object-cover" fill />;
+const RenderImage = memo(function ({ previewImage }: RenderImageProps) {
+ if (previewImage) {
+ return <Image src={previewImage} alt="group_image" className="object-cover" fill />;
  }
 
  return <Icon id="48-add_photo_white" width={48} height={48} />;

src/app/[lng]/(main)/grouping/create/type.ts

@@ -2,6 +2,7 @@ import type { TimeType } from '@/types';
 
 export interface CreateGroupContextValue {
  imageUrl: string;
+ previewImage: string;
  title: string;
  content: string;
  meetDate: Date;

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

@@ -18,11 +18,7 @@ export default function GroupingPage({ params: { lng } }: GroupingPageProps) {
  return (
  <>
  <GroupingHeader />
-
- <QueryAsyncBoundary
- rejectedFallback={RejectedFallback}
- pendingFallback={<Loading className="h-[calc(100dvh-178px)]" />}
- >
+ <QueryAsyncBoundary rejectedFallback={RejectedFallback}>
  <GroupingCardList />
  </QueryAsyncBoundary>
  <CreateGroupButton />

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

@@ -24,25 +24,23 @@ export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
  return (
  <>
  <MeetingParticipateHeader />
- <QueryAsyncBoundary rejectedFallback={RejectedFallback} pendingFallback={<Loading />}>
- <PageAnimation>
- <HydrationProvider
- queryMultipleFn={[
- getMeetingParticipating,
- getMeetingHosting,
- getMeetingRejected,
- getMeetingNotEstimated,
- ]}
- queryMultipleKey={[
- Keys.getMeetingParticipating(),
- Keys.getMeetingHosting(),
- Keys.getMeetingRejected(),
- Keys.getMeetingNotEstimated(),
- ]}
- >
- <ContentSection />
- </HydrationProvider>
- </PageAnimation>
+ <QueryAsyncBoundary rejectedFallback={RejectedFallback}>
+ <HydrationProvider
+ queryMultipleFn={[
+ getMeetingParticipating,
+ getMeetingHosting,
+ getMeetingRejected,
+ getMeetingNotEstimated,
+ ]}
+ queryMultipleKey={[
+ Keys.getMeetingParticipating(),
+ Keys.getMeetingHosting(),
+ Keys.getMeetingRejected(),
+ Keys.getMeetingNotEstimated(),
+ ]}
+ >
+ <ContentSection />
+ </HydrationProvider>
  </QueryAsyncBoundary>
  <Footer page="meeting" lng={lng} />
  </>

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

@@ -19,16 +19,11 @@ export default function Profile({ params: { lng } }: ProfilePageProps) {
  return (
  <>
  <ProfileHeader />
- <QueryAsyncBoundary
- rejectedFallback={RejectedFallback}
- pendingFallback={<Loading className="h-[calc(100dvh-118px)]" />}
- >
- <PageAnimation className="bg-sub">
- <HydrationProvider queryFn={getProfile} queryKey={Keys.getProfile()}>
- <ProfileDetail />
- <Spacing size={70} />
- </HydrationProvider>
- </PageAnimation>
+ <QueryAsyncBoundary rejectedFallback={RejectedFallback}>
+ <HydrationProvider queryFn={getProfile} queryKey={Keys.getProfile()}>
+ <ProfileDetail />
+ <Spacing size={70} />
+ </HydrationProvider>
  </QueryAsyncBoundary>
  <Footer page="profile" isSpacing={false} lng={lng} />
  </>

src/app/[lng]/(sub)/admin/page.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { postCreateGroup } from '@/apis/groups';
+import { Button } from '@/components/Button';
+
+export default function page() {
+ return (
+ <div>
+ <Button
+ onClick={() =>
+ postCreateGroup({
+ content: 'setsetsetset',
+ imageUrl:
+ 'https://gloddy.s3.ap-northeast-2.amazonaws.com/file/eebb9660-216f-491c-902b-367dd5cc27be.JPG',
+ maxUser: 3,
+ meetDate: '2023-12-10',
+ placeAddress: '서울특별시',
+ placeId: 'ChIJZTibxAqlfDURIeavJisLdqo',
+ placeLatitude: 37.5131008,
+ placeLongitude: 127.1034334,
+ placeName: '송파구 올림픽로 300',
+ startTime: '23:33',
+ title: 'testset',
+ })
+ }
+ >
+ 모임 개설
+ </Button>
+ </div>
+ );
+}

src/app/[lng]/(sub)/notification/components/NotiCard.client.tsx

@@ -5,14 +5,14 @@ import { useTranslation } from '@/app/i18n/client';
 import { Icon } from '@/components/Icon';
 import { Flex } from '@/components/Layout';
 import { Spacing } from '@/components/Spacing';
-import { notifications } from '@/constants/notifications';
 import useAppRouter from '@/hooks/useAppRouter';
 import cn from '@/utils/cn';
+import { getNotificationPath } from '@/utils/getNotificationPath';
 import { format, formatDistanceToNowStrict } from 'date-fns';
 import { enUS, ko } from 'date-fns/esm/locale';
 import Image from 'next/image';
 
-function foramtDate(locale: Locale, date: string) {
+function formatDate(locale: Locale, date: string) {
  const notiDate = new Date(date);
  const now = Date.now();
  const diff = (now - notiDate.getTime()) / 1000;
@@ -30,42 +30,39 @@ interface NotiCardProps {
 }
 
 export default function NotiCard({ notiData }: NotiCardProps) {
- const { userId, redirectId, content, type } = notiData;
+ const { userId, redirectId, content, type, image, createdAt, title } = notiData;
  const { i18n } = useTranslation('common');
  const { push } = useAppRouter();
 
  const locale = i18n.language === 'ko' ? ko : enUS;
-
- const handleNotiCard = () => {
- switch (type) {
- case 'APPLY_CREATE':
- push(`/grouping/${redirectId}/manage`);
- break;
- case 'APPLY_APPROVE':
- push(`/grouping/${redirectId}`);
- break;
- }
- };
+ const path = getNotificationPath(type, redirectId);
 
  return (
- <Flex
- align="center"
- className={cn('px-20 py-16', {
- // 'bg-brand-color': !isRead,
- })}
- onClick={handleNotiCard}
- >
- {/* <div className="relative h-48 w-48 overflow-hidden rounded-8">
- <Image src={imageUrl} alt="thumbnail" className="object-cover" fill />
- </div> */}
- <Spacing direction="horizontal" size={16} />
- <div>
- <p className="text-paragraph-2 text-sign-secondary">{content}</p>
+ <Flex align="center" className={cn('px-20 py-16')} onClick={() => push(path)}>
+ <div className="w-full">
+ <p className="text-paragraph-2 font-bold text-sign-secondary">{title}</p>
+
+ <Spacing size={2} />
+ <p className="text-paragraph-2 text-sign-tertiary">{content}</p>
+ <Spacing size={8} />
  <Flex align="center" gap={4}>
- {/* <Icon id="16-date_range" width={16} height={16} /> */}
- {/* <p className="text-caption text-sign-tertiary">{foramtDate(locale, date)}</p> */}
+ <Icon id="16-date_range" width={16} height={16} />
+ <p className="text-caption text-sign-tertiary">{formatDate(locale, createdAt)}</p>
  </Flex>
  </div>
+
+ <Spacing size={16} direction="horizontal" />
+
+ <div className="relative h-48 w-48 shrink-0 rounded-4">
+ <Image
+ src={image || '/images/approve_character.png'}
+ alt="thumbnail"
+ className="rounded-4 object-cover"
+ priority
+ sizes="16px"
+ fill
+ />
+ </div>
  </Flex>
  );
 }

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

@@ -13,9 +13,9 @@ export default async function NotificationPage() {
  <NotificationHeader />
  <QueryAsyncBoundary rejectedFallback={RejectedFallback} pendingFallback={<Loading />}>
  <PageAnimation>
- {/* <HydrationProvider queryFn={getNotification} queryKey={Keys.getNotifications()}> */}
- <NotificationSection />
- {/* </HydrationProvider> */}
+ <HydrationProvider queryFn={getNotification} queryKey={Keys.getNotifications()}>
+  <NotificationSection />
+ </HydrationProvider>
  </PageAnimation>
  </QueryAsyncBoundary>
  </>