3차 프로젝트 | 25.02.14 (금) 기록

오늘 구현한 기능

가상 전시관 기능 구현

• 공개 갤러리의 이미지들을 전체화면 슬라이드쇼로 표시
• 10초 간격 자동 전환
• 마우스 움직임에 따른 UI 요소 자동 숨김/표시
• 전체화면 모드 지원

---

해결한 문제점

• 프레임 템플릿을 사용하지 않고 독립적인 전체화면 구현
• ESC 키 이벤트 처리 (전체화면 모드와 페이지 나가기 구분)
• 이미지 비율 유지하면서 전체화면 표시

/* 버튼과 캡션의 fade 효과 */
.exit-button, .fullscreen-button, .carousel-caption {
    transition: opacity 0.3s;
}

// UI 요소 자동 숨김/표시 기능
function hideElements() {
    controls.forEach(control => control.style.opacity = '0');
    captions.forEach(caption => caption.style.opacity = '0');
    buttons.forEach(button => button.style.opacity = '0');
}

// 전체화면 전환 기능
function toggleFullScreen() {
    const gallery = document.querySelector('.fullscreen-gallery');
    if (!document.fullscreenElement) {
        gallery.requestFullscreen();
    }
}

---

이후 구현 예정

• 테마별 전시관 기능
• 배경 음악 추가
• 전시관 입장 시 전환 애니메이션
• 이미지 설명 음성 지원

---

도움이 필요한 부분

• 전시관 테마 디자인 아이디어
• 이미지 전환 효과 다양화
• 모바일 대응 UI/UX 개선

---

작업 코드 주소

# views.py
def fullscreen_gallery(request):

---

코드 구조 설명

템플릿 (app/templates/app/fullscreen_gallery.html)

• HTML 구조 및 스타일 정의

<!-- 핵심 스타일 -->
<style>
    .fullscreen-gallery {
        width: 100vw;
        height: 100vh;
        background-color: black;
    }
    .carousel-item img {
        width: 100vw;
        height: 100vh;
        object-fit: contain;
    }
</style>

View 함수 (app/views.py)

• 공개 이미지 필터링 및 정렬

def fullscreen_gallery(request):
    """전체 화면 갤러리 뷰"""
    posts = Post.objects.filter(is_public=True).exclude(
        image__isnull=True
    ).exclude(
        image__exact=''
    ).order_by('-date_posted')

URL 설정 (app/urls.py)

• 라우팅 설정

path("artwork/fullscreen/", views.fullscreen_gallery, name="fullscreen_gallery"),