Merge branch 'sojeong'

Author: sojeongP0415

src/components/ide/AnimationFactory.js

@@ -1075,4 +1075,201 @@ body.dark-mode {
     .main-animation-area {
         padding: 12px;
     }
+}
+/* 스크롤 가능한 시각화 영역 CSS 수정 */
+
+/* 🎬 오른쪽: 메인 애니메이션 영역 (스크롤 개선) */
+.main-animation-area {
+    flex: 1;
+    min-width: 400px;
+    background: var(--card);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+
+    /* 🔥 스크롤 설정 개선 */
+    overflow-y: auto;  /* 세로 스크롤 활성화 */
+    overflow-x: hidden; /* 가로 스크롤 숨김 */
+    max-height: 100vh; /* 최대 높이 설정 */
+}
+
+/* 애니메이션 래퍼 - 콘텐츠가 넘칠 때 스크롤 가능하도록 */
+.animation-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 400px;
+    width: 100%;
+
+    /* 🔥 스크롤 처리 개선 */
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* 플레이스홀더 애니메이션 스크롤 처리 */
+.placeholder-animation {
+    width: 100%;
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+    background: var(--card);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+    /* 🔥 스크롤 설정 */
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: calc(100vh - 200px); /* 헤더와 여백 고려 */
+}
+
+.placeholder-content {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 32px 20px;
+
+    /* 🔥 스크롤 처리 */
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+/* 🎨 커스텀 스크롤바 디자인 */
+.main-animation-area::-webkit-scrollbar,
+.animation-wrapper::-webkit-scrollbar,
+.placeholder-animation::-webkit-scrollbar {
+    width: 8px;
+}
+
+.main-animation-area::-webkit-scrollbar-track,
+.animation-wrapper::-webkit-scrollbar-track,
+.placeholder-animation::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
+}
+
+.main-animation-area::-webkit-scrollbar-thumb,
+.animation-wrapper::-webkit-scrollbar-thumb,
+.placeholder-animation::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+    transition: background 0.2s;
+}
+
+.main-animation-area::-webkit-scrollbar-thumb:hover,
+.animation-wrapper::-webkit-scrollbar-thumb:hover,
+.placeholder-animation::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* Firefox 스크롤바 스타일링 */
+.main-animation-area,
+.animation-wrapper,
+.placeholder-animation {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 #f1f5f9;
+}
+
+/* 로딩/에러 상태 컨테이너도 스크롤 가능하게 */
+.main-animation-area .loading-container,
+.main-animation-area .error-container,
+.main-animation-area .initial-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start; /* center → flex-start */
+    gap: 16px;
+    padding: 40px;
+    text-align: center;
+    min-height: 400px;
+
+    /* 🔥 스크롤 처리 추가 */
+    overflow-y: auto;
+    max-height: calc(100vh - 200px);
+}
+
+/* 📋 2열 레이아웃 높이 제한 */
+.modal-content {
+    flex: 1;
+    background: var(--bg);
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    max-height: calc(100vh - 120px); /* 헤더 높이 고려 */
+}
+
+/* 📋 왼쪽: 정보 패널 스크롤 개선 */
+.info-panel-sidebar {
+    width: 250px;
+    min-width: 200px;
+    max-width: 280px;
+    background: var(--card);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    flex-shrink: 0;
+
+    /* 🔥 스크롤 개선 */
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    max-height: calc(100vh - 120px);
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+}
+
+/* 정보 패널 스크롤바도 커스터마이징 */
+.info-panel-sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.info-panel-sidebar::-webkit-scrollbar-track {
+    background: #f8fafc;
+    border-radius: 3px;
+}
+
+.info-panel-sidebar::-webkit-scrollbar-thumb {
+    background: #e2e8f0;
+    border-radius: 3px;
+}
+
+.info-panel-sidebar::-webkit-scrollbar-thumb:hover {
+    background: #cbd5e1;
+}
+
+/* 반응형 - 모바일에서 스크롤 처리 */
+@media (max-width: 768px) {
+    .modal-content {
+        flex-direction: column;
+        max-height: calc(100vh - 80px);
+    }
+
+    .info-panel-sidebar {
+        width: 100%;
+        max-height: 200px;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+        overflow-y: auto;
+    }
+
+    .main-animation-area {
+        flex: 1;
+        min-height: 250px;
+        padding: 16px;
+        overflow-y: auto;
+        max-height: calc(100vh - 280px);
+    }
+
+    .placeholder-animation {
+        max-height: calc(100vh - 320px);
+    }
 }