diff --git a/src/components/artworkdetailpage/ArtworkIntroTab.tsx b/src/components/artworkdetailpage/ArtworkIntroTab.tsx index cd32f3a..ffb3e2b 100644 --- a/src/components/artworkdetailpage/ArtworkIntroTab.tsx +++ b/src/components/artworkdetailpage/ArtworkIntroTab.tsx @@ -4,6 +4,7 @@ import { Bookmark, ChevronRight, ChevronUp } from 'lucide-react'; import { useNavigate } from 'react-router-dom'; import type { ArtworkCoAuthorDto } from '@/api/dto'; +import { ImageModal } from '@/components/common/ImageModal'; import { LoginConfirmModal } from '@/components/common/LoginConfirmModal'; import { OptimizedImage } from '@/components/common/OptimizedImage'; import { FALLBACK_PROFILE_IMAGE } from '@/constants'; @@ -121,6 +122,7 @@ export function ArtworkArtistRow({ userId, displayName }: ArtworkArtistRowProps) } export function ArtworkIntroTab({ artwork, artistUserId, coAuthors = [] }: Props) { + const [selectedImage, setSelectedImage] = useState(null); const [isExpanded, setIsExpanded] = useState(false); const [isContentClamped, setIsContentClamped] = useState(false); const contentRef = useRef(null); @@ -214,13 +216,20 @@ export function ArtworkIntroTab({ artwork, artistUserId, coAuthors = [] }: Props style={{ scrollbarWidth: 'none' }} > {processImages.map((img, idx) => ( - + type="button" + onClick={() => setSelectedImage(img.imageUrl)} + aria-label={`작업과정 ${idx + 1} 크게 보기`} + className="cursor-pointer focus:outline-none shrink-0" + > + + ))} @@ -247,6 +256,12 @@ export function ArtworkIntroTab({ artwork, artistUserId, coAuthors = [] }: Props /> ))} + + setSelectedImage(null)} + /> ); } diff --git a/src/components/artworkdetailpage/PersonalArtworkIntroTab.tsx b/src/components/artworkdetailpage/PersonalArtworkIntroTab.tsx index 912372d..2086472 100644 --- a/src/components/artworkdetailpage/PersonalArtworkIntroTab.tsx +++ b/src/components/artworkdetailpage/PersonalArtworkIntroTab.tsx @@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { ChevronRight, ChevronUp } from 'lucide-react'; import type { PersonalArtworkResponseDataDto } from '@/api/dto'; +import { ImageModal } from '@/components/common/ImageModal'; import { cn } from '@/utils/cn'; type Props = { @@ -10,6 +11,7 @@ type Props = { }; export function PersonalArtworkIntroTab({ artwork }: Props) { + const [selectedImage, setSelectedImage] = useState(null); const [isExpanded, setIsExpanded] = useState(false); const [isContentClamped, setIsContentClamped] = useState(false); const contentRef = useRef(null); @@ -95,12 +97,19 @@ export function PersonalArtworkIntroTab({ artwork }: Props) { style={{ scrollbarWidth: 'none' }} > {processImages.map((img, idx) => ( - {`작업과정 + type="button" + onClick={() => setSelectedImage(img.imageUrl)} + aria-label={`작업과정 ${idx + 1} 크게 보기`} + className="cursor-pointer focus:outline-none shrink-0" + > + {`작업과정 + ))} @@ -116,6 +125,12 @@ export function PersonalArtworkIntroTab({ artwork }: Props) {

)} + + setSelectedImage(null)} + /> ); } diff --git a/src/constants/exhibition.ts b/src/constants/exhibition.ts index 8e0e650..b80b1bd 100644 --- a/src/constants/exhibition.ts +++ b/src/constants/exhibition.ts @@ -19,7 +19,6 @@ export const EXHIBITION_FIELDS = [ 'FASHION', 'ILLUSTRATION', 'CRAFT', - 'COMPLEX', 'ETC', ] as const; @@ -61,7 +60,7 @@ export const DISPLAY_TYPE_REVERSE_MAP: Record = { /* * 전시 등록은 작가 활동분야와 다른 enum을 씁니다. * 영상은 MEDIA로 보내야 하고 ILLUSTRATION은 서버에 없어 DESIGN으로 대체합니다. - * (서버 enum: PAINTING·DESIGN·PHOTOGRAPHY·ARCHITECTURE·MEDIA·CRAFT·SCULPTURE·FASHION·COMPLEX·ETC) + * (서버 enum: PAINTING·DESIGN·PHOTOGRAPHY·ARCHITECTURE·MEDIA·CRAFT·SCULPTURE·FASHION·ETC) */ export const DISPLAY_FIELD_MAP: Record = { PAINTING: 'PAINTING', @@ -73,7 +72,6 @@ export const DISPLAY_FIELD_MAP: Record = { FASHION: 'FASHION', ILLUSTRATION: 'DESIGN', CRAFT: 'CRAFT', - COMPLEX: 'COMPLEX', ETC: 'ETC', } satisfies Record; @@ -90,7 +88,6 @@ export const DISPLAY_FIELD_REVERSE_MAP: Record = { ILLUSTRATION: 'ILLUSTRATION', CRAFT: 'CRAFT', CRAFTS: 'CRAFT', - COMPLEX: 'COMPLEX', ETC: 'ETC', OTHERS: 'ETC', }; @@ -105,7 +102,6 @@ export type ArtistFieldCode = | 'SCULPTURE' | 'FASHION' | 'ILLUSTRATION' - | 'COMPLEX' | 'ETC'; export const ARTIST_FIELD_MAP: Record = { @@ -118,7 +114,6 @@ export const ARTIST_FIELD_MAP: Record = { FASHION: 'FASHION', ILLUSTRATION: 'ILLUSTRATION', CRAFT: 'CRAFT', - COMPLEX: 'COMPLEX', ETC: 'ETC', }; @@ -132,7 +127,6 @@ export const EXHIBITION_FIELD_LABELS: Record = { SCULPTURE: '조소', FASHION: '패션', ILLUSTRATION: '일러스트', - COMPLEX: '복합', ETC: '기타', }; @@ -146,7 +140,6 @@ export const ARTIST_FIELD_REVERSE_MAP: Record SCULPTURE: 'SCULPTURE', FASHION: 'FASHION', ILLUSTRATION: 'ILLUSTRATION', - COMPLEX: 'COMPLEX', ETC: 'ETC', }; diff --git a/src/pages/DisplayContentsPage.tsx b/src/pages/DisplayContentsPage.tsx index a23dd26..c81315a 100644 --- a/src/pages/DisplayContentsPage.tsx +++ b/src/pages/DisplayContentsPage.tsx @@ -58,7 +58,7 @@ export function DisplayContentsPage() { return (
{/* 헤더 */} -
+