refactor: 이미지 관련 ui/ux 수정

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<string | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   const [isContentClamped, setIsContentClamped] = useState(false);
   const contentRef = useRef<HTMLParagraphElement>(null);
@@ -214,13 +216,20 @@ export function ArtworkIntroTab({ artwork, artistUserId, coAuthors = [] }: Props
               style={{ scrollbarWidth: 'none' }}
             >
               {processImages.map((img, idx) => (
-                <OptimizedImage
+                <button
                   key={idx}
-                  src={img.imageUrl}
-                  displayWidth={119}
-                  alt={`작업과정 ${idx + 1}`}
-                  className="h-[152px] w-[119px] shrink-0 rounded-[13px] bg-[rgba(161,156,156,0.5)] object-cover shadow-[8px_8px_18px_0px_rgba(67,0,209,0.04)]"
-                />
+                  type="button"
+                  onClick={() => setSelectedImage(img.imageUrl)}
+                  aria-label={`작업과정 ${idx + 1} 크게 보기`}
+                  className="cursor-pointer focus:outline-none shrink-0"
+                >
+                  <OptimizedImage
+                    src={img.imageUrl}
+                    displayWidth={119}
+                    alt={`작업과정 ${idx + 1}`}
+                    className="h-[152px] w-[119px] shrink-0 rounded-[13px] bg-[rgba(161,156,156,0.5)] object-cover shadow-[8px_8px_18px_0px_rgba(67,0,209,0.04)]"
+                  />
+                </button>
               ))}
             </div>
           </div>
@@ -247,6 +256,12 @@ export function ArtworkIntroTab({ artwork, artistUserId, coAuthors = [] }: Props
           />
         ))}
       </section>
+
+      <ImageModal
+        imageUrl={selectedImage}
+        isOpen={selectedImage !== null}
+        onClose={() => setSelectedImage(null)}
+      />
     </div>
   );
 }

src/components/artworkdetailpage/PersonalArtworkIntroTab.tsx

@@ -3,13 +3,15 @@ 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 = {
   artwork: PersonalArtworkResponseDataDto;
 };
 
 export function PersonalArtworkIntroTab({ artwork }: Props) {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   const [isContentClamped, setIsContentClamped] = useState(false);
   const contentRef = useRef<HTMLParagraphElement>(null);
@@ -95,12 +97,19 @@ export function PersonalArtworkIntroTab({ artwork }: Props) {
               style={{ scrollbarWidth: 'none' }}
             >
               {processImages.map((img, idx) => (
-                <img
+                <button
                   key={idx}
-                  src={img.imageUrl}
-                  alt={`작업과정 ${idx + 1}`}
-                  className="h-[152px] w-[119px] shrink-0 rounded-[13px] bg-[rgba(161,156,156,0.5)] object-cover shadow-[8px_8px_18px_0px_rgba(67,0,209,0.04)]"
-                />
+                  type="button"
+                  onClick={() => setSelectedImage(img.imageUrl)}
+                  aria-label={`작업과정 ${idx + 1} 크게 보기`}
+                  className="cursor-pointer focus:outline-none shrink-0"
+                >
+                  <img
+                    src={img.imageUrl}
+                    alt={`작업과정 ${idx + 1}`}
+                    className="h-[152px] w-[119px] shrink-0 rounded-[13px] bg-[rgba(161,156,156,0.5)] object-cover shadow-[8px_8px_18px_0px_rgba(67,0,209,0.04)]"
+                  />
+                </button>
               ))}
             </div>
           </div>
@@ -116,6 +125,12 @@ export function PersonalArtworkIntroTab({ artwork }: Props) {
           </p>
         </section>
       )}
+
+      <ImageModal
+        imageUrl={selectedImage}
+        isOpen={selectedImage !== null}
+        onClose={() => setSelectedImage(null)}
+      />
     </div>
   );
 }

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<string, string> = {
 /*
  * 전시 등록은 작가 활동분야와 다른 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<string, string> = {
   PAINTING: 'PAINTING',
@@ -73,7 +72,6 @@ export const DISPLAY_FIELD_MAP: Record<string, string> = {
   FASHION: 'FASHION',
   ILLUSTRATION: 'DESIGN',
   CRAFT: 'CRAFT',
-  COMPLEX: 'COMPLEX',
   ETC: 'ETC',
 } satisfies Record<ExhibitionField, string>;
 
@@ -90,7 +88,6 @@ export const DISPLAY_FIELD_REVERSE_MAP: Record<string, ExhibitionField> = {
   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<ExhibitionField, ArtistFieldCode> = {
@@ -118,7 +114,6 @@ export const ARTIST_FIELD_MAP: Record<ExhibitionField, ArtistFieldCode> = {
   FASHION: 'FASHION',
   ILLUSTRATION: 'ILLUSTRATION',
   CRAFT: 'CRAFT',
-  COMPLEX: 'COMPLEX',
   ETC: 'ETC',
 };
 
@@ -132,7 +127,6 @@ export const EXHIBITION_FIELD_LABELS: Record<ExhibitionField, string> = {
   SCULPTURE: '조소',
   FASHION: '패션',
   ILLUSTRATION: '일러스트',
-  COMPLEX: '복합',
   ETC: '기타',
 };
 
@@ -146,7 +140,6 @@ export const ARTIST_FIELD_REVERSE_MAP: Record<ArtistFieldCode, ExhibitionField>
   SCULPTURE: 'SCULPTURE',
   FASHION: 'FASHION',
   ILLUSTRATION: 'ILLUSTRATION',
-  COMPLEX: 'COMPLEX',
   ETC: 'ETC',
 };
 

src/pages/DisplayContentsPage.tsx

@@ -58,7 +58,7 @@ export function DisplayContentsPage() {
     return (
       <div className="mx-auto flex min-h-dvh w-full max-w-md flex-col bg-page">
         {/* 헤더 */}
-        <header className="sticky top-0 z-20 bg-page relative flex items-center justify-center px-5 pt-3 pb-2">
+        <header className="top-0 z-20 bg-page relative flex items-center justify-center px-5 pt-3 pb-2">
           <button
             type="button"
             onClick={handleBack}
@@ -85,6 +85,7 @@ export function DisplayContentsPage() {
                 <OptimizedImage
                   src={item.imageUrl}
                   displayWidth={448}
+                  format="original"
                   alt={selectedCategory.name}
                   className="w-full h-auto object-cover block"
                 />

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 <ArtworkPreviewMoreView onClose={() => setIsArtworkPreviewOpen(false)} />;
+    return (
+      <ArtworkPreviewMoreView
+        onClose={() => {
+          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 = () => {
       />
       <ArtworkPreviewSection
         items={artworkPreviewItems}
-        onMoreClick={() => setIsArtworkPreviewOpen(true)}
+        onMoreClick={() => {
+          setSearchParams((prev) => {
+            const next = new URLSearchParams(prev);
+            next.set('view', 'artwork-preview');
+            return next;
+          });
+        }}
       />
       <LoungeSection posts={loungePostsData?.posts ?? []} />
     </div>