Feat: 이미지 저장 기능 구현 완료

src/app/list/[listId]/_components/ListDetailInner/Footer.tsx

@@ -29,6 +29,7 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { AxiosError } from 'axios';
 import reaction from '@/app/_api/reaction/Reaction';
 import { ReactionType } from '@/lib/types/reactionType';
+import SaveImageModal from './SaveImageModal';
 
 interface BottomSheetOptionsProps {
   key: string;
@@ -45,11 +46,14 @@ interface FooterProps {
   items: ItemType[];
   collaborators: UserProfileType[];
   ownerNickname: string;
+  ownerProfileImageUrl: string;
   isCollected: boolean;
   viewCount: number;
   collectCount: number;
   isPublic: boolean;
   reactions: Reaction[];
+  lastUpdatedDate: Date;
+  backgroundColor: string;
 }
 
 declare global {
@@ -90,6 +94,7 @@ function Footer({ data }: { data: FooterProps }) {
   const path = usePathname();
   const { user: loginUser } = useUser();
   const { isOn, handleSetOff, handleSetOn } = useBooleanOutput();
+  const [isSavedImgModalOn, setIsSavedImgModalOn] = useState(false);
   const [isSheetActive, setSheetActive] = useState<boolean>(false);
   const [sheetOptionList, setSheetOptionList] = useState<BottomSheetOptionsProps[]>([]);
   const listUrl = `https://listywave.com${path}`;
@@ -177,7 +182,15 @@ function Footer({ data }: { data: FooterProps }) {
   };
 
   const handleSheetActive = ({ type }: { type: 'share' | 'etc' }) => {
-    const optionList = getBottomSheetOptionList({ type, data, closeBottomSheet, listUrl, goToCreateList, language });
+    const optionList = getBottomSheetOptionList({
+      type,
+      data,
+      closeBottomSheet,
+      listUrl,
+      goToCreateList,
+      language,
+      openImageModal: () => setIsSavedImgModalOn(true),
+    });
     setSheetOptionList(optionList);
     setSheetActive((prev: boolean) => !prev);
   };
@@ -228,6 +241,7 @@ function Footer({ data }: { data: FooterProps }) {
           <LoginModal id="duplicateListLoginBtn" />
         </Modal>
       )}
+      {isSavedImgModalOn && <SaveImageModal data={data} onClose={() => setIsSavedImgModalOn(false)} />}
       <div className={styles.container}>
         <div className={styles.reactionContainer}>
           {(['COOL', 'AGREE', 'THANKS'] as ReactionType[]).map((type) => {

src/app/list/[listId]/_components/ListDetailInner/SaveImageModal.css.ts

@@ -0,0 +1,139 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/__theme.css';
+
+export const modalOverlay = style({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100vw',
+  height: '100vh',
+  backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: 1000,
+});
+
+export const modalContent = style({
+  backgroundColor: vars.color.white,
+  padding: '2rem',
+  borderRadius: '20px',
+  width: '375px',
+  textAlign: 'center',
+});
+
+export const captureContent = style({
+  backgroundColor: vars.color.white,
+  width: '100%',
+  borderRadius: '0px',
+});
+
+export const profileImageContainer = style({
+  width: '36px',
+  height: '36px',
+  position: 'relative',
+
+  cursor: 'pointer',
+});
+
+export const profileImage = style({
+  width: '40px',
+  height: '40px',
+  borderRadius: '50%',
+  marginRight: '12px',
+});
+
+export const header = style({
+  display: 'flex',
+  alignItems: 'center',
+  marginBottom: '15px',
+});
+
+export const headerContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  marginLeft: '10px',
+});
+
+export const NicknameText = style({
+  color: vars.color.gray9,
+  fontSize: '1.4rem',
+  fontWeight: 'bold',
+});
+
+export const dateText = style({
+  fontSize: '1.4rem',
+  color: vars.color.gray7,
+});
+
+export const divider = style({
+  border: 'none',
+  height: '1px',
+  backgroundColor: vars.color.gray5,
+  marginBottom: '30px',
+});
+
+export const listContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: '30px 20px',
+  borderRadius: '10px',
+});
+
+export const title = style({
+  fontSize: '1.8rem',
+  fontWeight: 'bold',
+});
+
+export const itemContainer = style({
+  width: '100%',
+
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+  padding: '20px',
+});
+
+export const listItem = style({
+  height: '6rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '10px 0',
+});
+
+export const listIndex = style({
+  fontSize: '1.6rem',
+  fontWeight: 'bold',
+  marginRight: '8px',
+});
+
+export const listText = style({
+  fontSize: '1.6rem',
+  flexGrow: 1,
+  textAlign: 'left',
+});
+
+export const simpleImageWrapper = style({
+  width: '5rem',
+  height: '5rem',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  textAlign: 'center',
+});
+
+export const simpleImage = style({
+  width: '5rem',
+  height: '5rem',
+
+  borderRadius: '10px',
+  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.15)',
+
+  objectFit: 'cover',
+});

src/app/list/[listId]/_components/ListDetailInner/SaveImageModal.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { toPng } from 'html-to-image';
+import toasting from '@/lib/utils/toasting';
+import * as styles from './SaveImageModal.css';
+import Image from 'next/image';
+import fallbackProfile from '/public/images/fallback_profileImage.webp';
+import { BACKGROUND_COLOR_READ } from '@/styles/Color';
+import { ItemType } from '@/lib/types/listType';
+
+interface SaveImageModalProps {
+  data: {
+    title: string;
+    ownerNickname: string;
+    ownerProfileImageUrl: string;
+    lastUpdatedDate: Date;
+    items: ItemType[];
+    backgroundColor: string;
+  };
+  onClose: () => void;
+}
+
+const SaveImageModal = ({ data, onClose }: SaveImageModalProps) => {
+  const captureRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (captureRef.current) {
+        const clonedCapture = captureRef.current.cloneNode(true) as HTMLDivElement;
+        clonedCapture.style.width = `${window.innerWidth}px`;
+        clonedCapture.style.height = `${window.innerHeight}px`;
+        clonedCapture.style.padding = '50px 30px';
+
+        document.body.appendChild(clonedCapture);
+
+        toPng(clonedCapture, { backgroundColor: '#fff' })
+          .then((dataUrl) => {
+            const link = document.createElement('a');
+            link.download = `listywave_${data.title}.png`;
+            link.href = dataUrl;
+            link.click();
+            toasting({ type: 'success', txt: '이미지를 저장하였습니다' });
+          })
+          .catch((err) => {
+            console.error('이미지 저장 오류:', err);
+            toasting({ type: 'error', txt: '이미지 저장을 실패했습니다.' });
+          })
+          .finally(() => {
+            document.body.removeChild(clonedCapture);
+            onClose();
+          });
+      }
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [data.title, onClose]);
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modalContent}>
+        <div className={styles.captureContent} ref={captureRef}>
+          <div className={styles.header}>
+            <div className={styles.profileImageContainer}>
+              {data?.ownerProfileImageUrl !== '' ? (
+                <Image
+                  src={data?.ownerProfileImageUrl}
+                  className={styles.profileImage}
+                  width={40}
+                  height={40}
+                  style={{ objectFit: 'cover', borderRadius: '50%' }}
+                  alt="profile"
+                />
+              ) : (
+                <Image
+                  src={fallbackProfile}
+                  alt="profile"
+                  className={styles.profileImage}
+                  width={40}
+                  height={40}
+                  style={{ objectFit: 'cover', borderRadius: '50%' }}
+                />
+              )}
+            </div>
+            <div className={styles.headerContent}>
+              <div className={styles.NicknameText}>{data.ownerNickname}</div>
+              <div className={styles.dateText}>{new Date(data.lastUpdatedDate).toLocaleString()}</div>
+            </div>
+          </div>
+          <hr className={styles.divider} />
+
+          <div
+            className={styles.listContainer}
+            style={{
+              backgroundColor: BACKGROUND_COLOR_READ[data?.backgroundColor as keyof typeof BACKGROUND_COLOR_READ],
+            }}
+          >
+            <div className={styles.title}>{data.title}</div>
+
+            <div className={styles.itemContainer}>
+              {data.items.map((item, idx) => (
+                <div key={idx} className={styles.listItem}>
+                  <span className={styles.listIndex}>{idx + 1}.</span>
+                  <span className={styles.listText}>{item.title}</span>
+                  {item.imageUrl && (
+                    <div className={styles.simpleImageWrapper}>
+                      <Image
+                        className={styles.simpleImage}
+                        src={item.imageUrl}
+                        alt={item.title}
+                        width={70}
+                        height={72}
+                      />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SaveImageModal;