[DEV] 공유모달 UI 제작

Mine/src/api/magazine.ts

@@ -13,14 +13,14 @@ import type { MyMagazinesDto, ResponseMyMagazine } from '../types/magazine'
 import { axiosInstance } from './axios'
 
 export const getMyMagazineList = async ({ page, size, sort }: MyMagazinesDto): Promise<ResponseMyMagazine> => {
-    const res = await axiosInstance.get(`/api/magazines`, {
+    const res = await axiosInstance.get(`api/magazines`, {
         params: { page, size, sort },
     })
     return res.data
 }
 
 export const deleteMagazine = async ({ id }: RequestDeleteMagazine) => {
-    const res = await axiosInstance.delete(`/api/magazines/${id}`)
+    const res = await axiosInstance.delete(`api/magazines/${id}`)
     return res.data
 }
 
@@ -58,7 +58,7 @@ export const getMagazineDetail = async (magazineId: number) => {
 }
 
 export const getLikedMagazineList = async ({ page, size, sort }: MyMagazinesDto): Promise<ResponseMyMagazine> => {
-    const res = await axiosInstance.get(`/api/magazines/liked`, {
+    const res = await axiosInstance.get(`api/magazines/liked`, {
         params: { page, size, sort },
     })
     return res.data
@@ -82,7 +82,7 @@ export const deleteParagraph = async ({ magazineId, sectionId, paragraphId }: De
 }
 
 export const getMagazineFeed = async ({ cursorId, limit = 10 }: FeedDto): Promise<ResponseFeed> => {
-    const res = await axiosInstance.get(`/api/magazines/feed`, {
+    const res = await axiosInstance.get(`api/magazines/feed`, {
         params: { cursorId, limit },
     })
     return res.data

Mine/src/components/hamburgerModal/SectionHamburgerModal.tsx

@@ -3,39 +3,42 @@ import Share from '../../icon/share.svg?react'
 import Delete from '../../icon/delete.svg?react'
 import { HamburgerSection } from './HamburgerSection'
 import useDeleteSection from '../../hooks/useDeleteSection'
+import { useState } from 'react'
+import ShareModal from './ShareModal'
 
 interface SectionHamburgerModalProps {
     top: number
     left: number
     sectionId?: number
     magazineId?: number
-    children?: React.ReactNode
     handleClose: () => void
-    // onEdit: (id?: number) => void
 }
 
-export default function SectionHamburgerModal({
-    sectionId,
-    magazineId,
-    top,
-    left,
-    handleClose,
-}: SectionHamburgerModalProps) {
+export default function SectionHamburgerModal({ sectionId, magazineId, top, left, handleClose }: SectionHamburgerModalProps) {
     const deleteSectionMutation = useDeleteSection()
+    const [showShareModal, setShowShareModal] = useState(false)
+
     const onDeleteClick: React.MouseEventHandler<HTMLDivElement> = () => {
         deleteSectionMutation.mutate({ magazineId: Number(magazineId), sectionId: Number(sectionId) })
         handleClose()
     }
 
     return (
-        <div
-            key={sectionId}
-            className="fixed flex flex-col px-1 py-1 rounded-lg bg-gray-500-op70 shadow-[0 4px 4px 0 rgba(0, 0, 0, 0.25)] z-100"
-            style={{ top: `${top}px`, left: `${left}px` }}
-        >
-            <HamburgerSection title="공유" icon={<Share />} />
-            <HamburgerSection title="이름 변경" icon={<Edit />} />
-            <HamburgerSection title="삭제" icon={<Delete />} onClick={onDeleteClick} />
-        </div>
+        <>
+            {!showShareModal && (
+                <div
+                    className="fixed flex flex-col px-1 py-1 rounded-lg bg-gray-500-op70 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] z-100"
+                    style={{ top: `${top}px`, left: `${left}px` }}
+                >
+                    <HamburgerSection title="공유" icon={<Share />} onClick={() => setShowShareModal(true)} />
+                    <HamburgerSection title="이름 변경" icon={<Edit />} />
+                    <HamburgerSection title="삭제" icon={<Delete />} onClick={onDeleteClick} />
+                </div>
+            )}
+
+            {showShareModal && (
+                <ShareModal onClose={handleClose} />
+            )}
+        </>
     )
-}
+}

Mine/src/components/hamburgerModal/ShareModal.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import X from '../../icon/X.svg?react'
+import Link from '../../icon/link.svg?react'
+import Twit from '../../icon/twitter.svg?react'
+import Kakao from '../../icon/kakao.svg?react'
+import Instagram from '../../icon/instagram.svg?react'
+import Check from '../../icon/check.svg?react'
+
+const MODAL_HEIGHT = 212
+const TOAST_MARGIN = 102
+
+interface ShareModalProps {
+    onClose: () => void
+}
+
+export default function ShareModal({ onClose }: ShareModalProps) {
+    const [showToast, setShowToast] = useState(false)
+
+    const handleCopyLink = async () => {
+        try {
+            await navigator.clipboard.writeText(window.location.href)
+            setShowToast(true)
+            setTimeout(() => setShowToast(false), 2000)
+        } catch (err) {
+            console.error('링크 복사에 실패했습니다:', err)
+        }
+    }
+
+    const buttons = [
+        { icon: <Link className="w-6 h-6 **:stroke-white" />, label: '링크 복사', onClick: handleCopyLink },
+        { icon: <Twit className="w-6 h-6 **:stroke-white" />, label: '트위터', onClick: () => {} },
+        { icon: <Kakao className="w-6 h-6 **:stroke-white" />, label: '카카오톡', onClick: () => {} },
+        { icon: <Instagram className="w-6 h-6 **:stroke-white" />, label: '인스타그램', onClick: () => {} },
+    ]
+
+    return (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-999">
+            <div
+                className="relative flex flex-col justify-center px-8 bg-gray-600-op80 rounded-2xl"
+                style={{ width: '480px', height: `${MODAL_HEIGHT}px`, gap: '25px' }}
+            >
+                <button onClick={onClose} className="absolute top-5 right-5">
+                    <X style={{ width: '16px', height: '16px' }} className="**:stroke-white" />
+                </button>
+
+                <span className="font-semibold24 text-gray-100">공유</span>
+
+                <div className="flex items-center justify-center" style={{ gap: '28px' }}>
+                    {buttons.map(({ icon, label, onClick }) => (
+                        <button
+                            key={label}
+                            onClick={onClick}
+                            className="flex flex-col items-center w-16 gap-2"
+                        >
+                            <div className="w-14 h-14 flex items-center justify-center rounded-full border border-gray-100">
+                                {icon}
+                            </div>
+                            <span className="font-medium12 text-gray-100 text-center">{label}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {showToast && (
+                <div
+                    className="absolute animate-in fade-in slide-in-from-top-2 flex items-center bg-gray-500 rounded-lg px-5 py-3"
+                    style={{
+                        top: `calc(50% + ${MODAL_HEIGHT / 2}px + ${TOAST_MARGIN}px)`,
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        width: '270px',
+                        height: '48px',
+                        gap: '12px',
+                    }}
+                >
+                    <Check className="w-5 h-5 text-gray-100" />
+                    <span className="font-semibold16 text-gray-100">링크가 복사되었습니다.</span>
+                </div>
+            )}
+        </div>
+    )
+}

Mine/src/pages/magazine/components/ExploreItem.tsx

@@ -1,20 +1,11 @@
 import { useNavigate } from 'react-router-dom'
 import type { Magazine } from '../../../types/magazine'
+import { isValidUrl } from '../../../utils/url'
 
 type Props = {
     magazine: Magazine
 }
 
-const isValidUrl = (url?: string) => {
-    if (!url) return false
-    try {
-        const parsed = new URL(url)
-        return parsed.protocol === 'https:'
-    } catch {
-        return false
-    }
-}
-
 export default function ExploreItem({ magazine }: Props) {
     const navigate = useNavigate()
     const safeImageUrl = isValidUrl(magazine.coverImageUrl) ? magazine.coverImageUrl : ''

Mine/src/utils/url.ts

@@ -0,0 +1,9 @@
+export const isValidUrl = (url?: string) => {
+    if (!url) return false
+    try {
+        const parsed = new URL(url)
+        return parsed.protocol === 'https:'
+    } catch {
+        return false
+    }
+}