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 (
{/* 헤더 */}
-
+
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index a6cf677..7a6a68a 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { Plus, Search } from 'lucide-react';
@@ -28,9 +28,9 @@ import { useAuthStore } from '@/stores/authStore';
import { hasPermission } from '@/utils/hasPermission';
export const Homepage = () => {
- const [isArtworkPreviewOpen, setIsArtworkPreviewOpen] = useState(false);
const navigate = useNavigate();
- const [searchParams] = useSearchParams();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const isArtworkPreviewOpen = searchParams.get('view') === 'artwork-preview';
const accessToken = useAuthStore((state) => state.accessToken);
const setAccessToken = useAuthStore((state) => state.setAccessToken);
const { data: duPicksData } = useDuPicks();
@@ -96,7 +96,21 @@ export const Homepage = () => {
}, [accessToken, setAccessToken]);
if (isArtworkPreviewOpen) {
- return setIsArtworkPreviewOpen(false)} />;
+ return (
+ {
+ if (window.history.length > 1) {
+ navigate(-1);
+ } else {
+ setSearchParams((prev) => {
+ const next = new URLSearchParams(prev);
+ next.delete('view');
+ return next;
+ });
+ }
+ }}
+ />
+ );
}
return (
@@ -146,7 +160,13 @@ export const Homepage = () => {
/>
setIsArtworkPreviewOpen(true)}
+ onMoreClick={() => {
+ setSearchParams((prev) => {
+ const next = new URLSearchParams(prev);
+ next.set('view', 'artwork-preview');
+ return next;
+ });
+ }}
/>