Merge branch 'develop' into refactor/#135/web-app-accessibility

Author: skyblue1232

src/pages/mypage/components/PostcardContainer.tsx

@@ -82,28 +82,28 @@ export default function PostcardContainer({
           postcards.length <= 8 && 'justify-center gap-[1.2rem] ',
         )}
       >
-        {filledSlots.map((card, idx) => (
-          <button
-            key={card?.postcardId ?? idx}
-            onClick={() => card && onClickCard?.(card.postcardId)}
-            disabled={!card}
-            aria-disabled={!card}
-            className={cn(
-              postcardCardStyle({ interactive: !!card }),
-              !card && 'items-center justify-center bg-pink-100',
-            )}
-          >
-            {card && (
+        {filledSlots.map((card, idx) =>
+          card ? (
+            <button
+              key={card.postcardId}
+              onClick={() => onClickCard?.(card.postcardId)}
+              className={postcardCardStyle({ interactive: true })}
+            >
               <Image
-                src={card.imageUrl}
-                alt={card.placeName || `엽서 ${idx + 1}`}
+                src={card.imageUrl.trim()}
+                alt={card.placeName}
                 width={200}
                 height={200}
                 className='w-full h-full object-cover'
               />
-            )}
-          </button>
-        ))}
+            </button>
+          ) : (
+            <div
+              key={idx}
+              className='w-[70px] h-[70px] rounded-[8px] bg-pink-100'
+            />
+          ),
+        )}
       </div>
     </div>
   );

src/pages/mypage/index.tsx

@@ -14,7 +14,7 @@ import { useMyPageQuery } from '@/shared/api/member';
 
 export default function MyPage() {
   const { isLoggedIn } = useUserStatus();
-  const router = useRouter(); 
+  const router = useRouter();
   const {
     showLoginPopup,
     showLogoutPopup,
@@ -126,10 +126,14 @@ export default function MyPage() {
         </section>
 
         {/* 저장한 엽서 */}
-        <section aria-label='저장한 엽서' className='w-full mt-[1.8rem]'>
+        <section
+          aria-label='저장한 엽서'
+          className='w-full mt-[1.8rem] relative z-[100]'
+        >
           <p className='text-label-lg mb-[0.6rem] pl-[1rem]'>저장한 엽서</p>
           <PostcardContainer
             postcards={!isLoggedIn ? [] : hasPostcards ? postcards : []}
+            onClickCard={(id) => router.push(`/mypage/postcard/${id}`)}
           />
         </section>
 

src/pages/mypage/postcard/[id].tsx

@@ -58,7 +58,7 @@ const PostCard = () => {
         )}
       >
         <FlipCard
-          frontSrc={imageUrl}
+          frontSrc={imageUrl.trim()}
           backSrc={imageProps.backSrc}
           width={imageProps.width}
           height={imageProps.height}