Skip to content

✨Feat : 행사 & 엽서 저장 페이지 #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KongMezu merged 5 commits into from
Nov 4, 2025
Merged

✨Feat : 행사 & 엽서 저장 페이지 #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
660b295
Merge branch 'develop' of https://github.com/cukCS/FE into feat/#86/s…
KongMezu Nov 1, 2025
05099db
Merge branch 'develop' of https://github.com/cukCS/FE into feat/#86/s…
KongMezu Nov 2, 2025
afaf7d1
feat : 저자한 행사 페이지
KongMezu Nov 2, 2025
b458ed1
feat : 저장한 엽서 페이지
KongMezu Nov 2, 2025
d1527a9
Merge branch 'develop' into feat/#86/savepage
KongMezu Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions src/pages/mypage/events/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { Header, EventCard, AddressCopy } from '@/shared/components';
import DateTag from '@/pages/events/components/DateTag';
import { cn } from '@/shared/lib';
import { eventData } from '@/shared/constants/events/eventsData';
import Image from 'next/image';
import { useRouter } from 'next/router';

const EventSavePage = () => {
const router = useRouter();
const { id } = router.query;

const event = eventData.find((e) => e.id === Number(id));
if (!event) return null;
Comment on lines +8 to +13
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Nov 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

router.isReady 확인 필요

PostCardSavePage와 동일한 이슈입니다. Next.js Pages Router에서 router.query는 초기 렌더링 시 빈 객체이므로 router.isReady를 확인해야 합니다.

다음과 같이 수정하세요:

 const EventSavePage = () => {
   const router = useRouter();
   const { id } = router.query;
 
+  if (!router.isReady) {
+    return null; // 또는 로딩 스피너
+  }
+
   const event = eventData.find((e) => e.id === Number(id));
   if (!event) return null;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const EventSavePage = () => {
const router = useRouter();
const { id } = router.query;
const event = eventData.find((e) => e.id === Number(id));
if (!event) return null;
const EventSavePage = () => {
const router = useRouter();
const { id } = router.query;
if (!router.isReady) {
return null; // 또는 로딩 스피너
}
const event = eventData.find((e) => e.id === Number(id));
if (!event) return null;
🤖 Prompt for AI Agents 
In src/pages/mypage/events/[id].tsx around lines 8 to 13, the code reads
router.query and uses id before Next.js router is ready; guard against this by
checking router.isReady before accessing router.query and before converting id
to Number — return null or a loading state when !router.isReady, then once ready
pull id from router.query, validate it, and only then find the event in
eventData.


const { name, address, description, startDate, endDate, imageSrc } = event;

return (
<div className={cn('relative w-full min-h-[100vh] overflow-auto')}>
<Header
title='저장한 행사'
onClick={() => router.back()}
className={cn('fixed top-0 left-0 right-0 z-50')}
/>

<main
className={cn(
'flex flex-col items-center justify-start',
'px-[2.4rem] pt-[calc(10rem+1.4rem)]',
)}
>
{/* 행사 기간 */}
<div className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
<DateTag startDate={startDate} endDate={endDate} />
</div>

{/* 대표 이미지 */}
<section
className={cn(
'relative w-full flex justify-center max-w-[35.4rem]',
'mt-[1rem]',
)}
>
{imageSrc ? (
<Image
src={imageSrc}
alt={`${name} 이미지`}
width={354}
height={430}
className={cn('w-full h-auto object-cover rounded-[2rem]')}
/>
) : (
<div
className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
/>
)}
Comment on lines +43 to +55
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Nov 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

이미지와 placeholder 높이 불일치

Image 컴포넌트의 height={430} (43rem)과 placeholder의 h-[43.6rem] (43.6rem)이 일치하지 않습니다. 이는 이미지 로딩 시 레이아웃 시프트를 유발할 수 있습니다.

다음 중 하나로 수정하세요:

옵션 1: placeholder 높이를 image에 맞추기

           ) : (
             <div
-              className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
+              className={cn('w-full h-[43rem] bg-gray-200 rounded-[2rem]')}
             />

옵션 2: image 높이를 placeholder에 맞추기

             <Image
               src={imageSrc}
               alt={`${name} 이미지`}
               width={354}
-              height={430}
+              height={436}
               className={cn('w-full h-auto object-cover rounded-[2rem]')}
             />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{imageSrc ? (
<Image
src={imageSrc}
alt={`${name} 이미지`}
width={354}
height={430}
className={cn('w-full h-auto object-cover rounded-[2rem]')}
/>
) : (
<div
className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
/>
)}
{imageSrc ? (
<Image
src={imageSrc}
alt={`${name} 이미지`}
width={354}
height={430}
className={cn('w-full h-auto object-cover rounded-[2rem]')}
/>
) : (
<div
className={cn('w-full h-[43rem] bg-gray-200 rounded-[2rem]')}
/>
)}
Suggested change
{imageSrc ? (
<Image
src={imageSrc}
alt={`${name} 이미지`}
width={354}
height={430}
className={cn('w-full h-auto object-cover rounded-[2rem]')}
/>
) : (
<div
className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
/>
)}
{imageSrc ? (
<Image
src={imageSrc}
alt={`${name} 이미지`}
width={354}
height={436}
className={cn('w-full h-auto object-cover rounded-[2rem]')}
/>
) : (
<div
className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
/>
)}
🤖 Prompt for AI Agents 
In src/pages/mypage/events/[id].tsx around lines 43 to 55, the Image component
uses height={430} (43rem) while the placeholder div uses class h-[43.6rem],
causing a mismatch and potential layout shift; fix by making the two heights
identical — either set the placeholder class to h-[430px] (or
h-[43rem]/equivalent) to match height={430}, or change the Image height prop to
441 (or the exact pixel value equivalent of 43.6rem) to match h-[43.6rem];
update the value in the component so both use the same height unit and numeric
value.

</section>

{/* 행사 카드 */}
<div
className={cn(
'flex flex-col items-center w-full gap-[0.8rem]',
'mt-[0.8rem]',
)}
>
<EventCard
name={name}
address={address}
description={description}
variant='gray'
size='large'
/>

{/* 주소복사 */}
<AddressCopy variant='gray' value={address} />
</div>
</main>
</div>
);
};

export default EventSavePage;
70 changes: 70 additions & 0 deletions src/pages/mypage/postcard/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Header, EventCard } from '@/shared/components';
import { cn } from '@/shared/lib';
import { eventData } from '@/shared/constants/events/eventsData';
import Image from 'next/image';
import { useRouter } from 'next/router';

const PostCardSavePage = () => {
const router = useRouter();
const { id } = router.query;

const event = eventData.find((e) => e.id === Number(id));
if (!event) return null;
Comment on lines +8 to +12
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Nov 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

router.isReady 확인 필요

Next.js Pages Router에서 router.query는 초기 렌더링 시 빈 객체이므로, id가 undefined가 될 수 있습니다. 이로 인해 eventData.find()가 올바르게 작동하지 않거나 예상치 못한 동작이 발생할 수 있습니다.

다음과 같이 수정하여 라우터가 준비될 때까지 로딩 상태를 표시하세요:

 const PostCardSavePage = () => {
   const router = useRouter();
   const { id } = router.query;
 
+  if (!router.isReady) {
+    return null; // 또는 로딩 스피너
+  }
+
   const event = eventData.find((e) => e.id === Number(id));
   if (!event) return null;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const router = useRouter();
const { id } = router.query;
const event = eventData.find((e) => e.id === Number(id));
if (!event) return null;
const router = useRouter();
const { id } = router.query;
if (!router.isReady) {
return null; // 또는 로딩 스피너
}
const event = eventData.find((e) => e.id === Number(id));
if (!event) return null;
🤖 Prompt for AI Agents 
In src/pages/mypage/postcard/[id].tsx around lines 8 to 12, router.query can be
empty on initial render so using id immediately causes incorrect lookup; guard
on router.isReady before accessing router.query (or return a loading state) and
only call eventData.find once router.isReady is true, rendering a loading
indicator while waiting and then handling the not-found case after id is
available.


const { name, address, description, imageSrc } = event;

return (
<div className={cn('relative w-full min-h-[100vh] overflow-auto')}>
<Header
title='저장한 엽서'
onClick={() => router.back()}
className={cn('fixed top-0 left-0 right-0 z-50')}
/>

<main
className={cn(
'flex flex-col items-center justify-start',
'px-[2.4rem] pt-[25.8rem]',
)}
>
{/* 카드 플립 자리 */}
<section
className={cn(
'relative w-full flex justify-center max-w-[35.4rem]',
'overflow-hidden rounded-[2rem]',
)}
>
{imageSrc ? (
<Image
src={imageSrc}
alt={`${name} 이미지`}
width={354}
height={220}
className='object-cover w-full h-auto rounded-[2rem]'
/>
) : (
<div className='w-full h-[22rem] bg-gray-200 rounded-[2rem]' />
)}
</section>

{/* 행사 카드 */}
<div
className={cn(
'flex flex-col items-center w-full gap-[0.8rem]',
'mt-[8.7rem]',
)}
>
<EventCard
name={name}
address={address}
description={description}
variant='gray'
size='large'
/>
</div>
</main>
</div>
);
};

export default PostCardSavePage;
Loading