[251102] fix: MainView rendering Panel Update

🕐 커밋 시간: 2025. 11. 02. 06:59:07

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +86줄
  • 삭제: -35줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/actions/mockCartActions.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 핵심 비즈니스 로직 개선
  • 소규모 기능 개선
This commit is contained in:
2025-11-02 06:59:10 +09:00
parent 4fb13fcfaa
commit dda368ab65
4 changed files with 287 additions and 34 deletions

View File

@@ -198,33 +198,42 @@ export default function MainView({ className, initService }) {
if (panels && panels.length > 0) {
let renderingPanels = [];
// 3-layer 구조 체크: PlayerPanel + DetailPanel + MediaPanel(modal)
const hasThreeLayerStructure =
panels.length >= 3 &&
// PlayerPanel이 맨 아래
(panels[panels.length - 3]?.name === Config.panel_names.PLAYER_PANEL ||
panels[panels.length - 3]?.name === Config.panel_names.PLAYER_PANEL_NEW) &&
// DetailPanel이 중간
panels[panels.length - 2]?.name === Config.panel_names.DETAIL_PANEL &&
// MediaPanel modal이 맨 위
panels[panels.length - 1]?.name === Config.panel_names.MEDIA_PANEL &&
panels[panels.length - 1]?.panelInfo?.modal === true;
const topPanel = panels[panels.length - 1];
if (hasThreeLayerStructure) {
console.log(
'[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel'
);
renderingPanels = panels.slice(-3);
} else if (
panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL ||
panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL_NEW ||
panels[panels.length - 1]?.name === Config.panel_names.MEDIA_PANEL ||
panels[panels.length - 2]?.name === Config.panel_names.PLAYER_PANEL ||
panels[panels.length - 2]?.name === Config.panel_names.MEDIA_PANEL
) {
renderingPanels = panels.slice(-2);
} else {
renderingPanels = panels.slice(-1);
// CheckOutPanel은 독립적으로 항상 단독 렌더링
if (topPanel?.name === Config.panel_names.CHECKOUT_PANEL) {
console.log('[MainView] CheckOutPanel detected - rendering independently');
renderingPanels = [topPanel]; // CheckOutPanel만 단독으로 렌더링
}
// 기존 3-layer 구조 체크: PlayerPanel + DetailPanel + MediaPanel(modal)
else {
const hasThreeLayerStructure =
panels.length >= 3 &&
// PlayerPanel이 맨 아래
(panels[panels.length - 3]?.name === Config.panel_names.PLAYER_PANEL ||
panels[panels.length - 3]?.name === Config.panel_names.PLAYER_PANEL_NEW) &&
// DetailPanel이 중간
panels[panels.length - 2]?.name === Config.panel_names.DETAIL_PANEL &&
// MediaPanel modal이 맨 위
panels[panels.length - 1]?.name === Config.panel_names.MEDIA_PANEL &&
panels[panels.length - 1]?.panelInfo?.modal === true;
if (hasThreeLayerStructure) {
console.log(
'[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel'
);
renderingPanels = panels.slice(-3);
} else if (
panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL ||
panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL_NEW ||
panels[panels.length - 1]?.name === Config.panel_names.MEDIA_PANEL ||
panels[panels.length - 2]?.name === Config.panel_names.PLAYER_PANEL ||
panels[panels.length - 2]?.name === Config.panel_names.MEDIA_PANEL
) {
renderingPanels = panels.slice(-2);
} else {
renderingPanels = panels.slice(-1);
}
}
return (
<>
@@ -239,8 +248,13 @@ export default function MainView({ className, initService }) {
const Component = panelMap[panel.name];
let isPanelOnTop = false;
// CheckOutPanel은 항상 onTop
if (panel.name === Config.panel_names.CHECKOUT_PANEL) {
isPanelOnTop = true;
console.log('[MainView] CheckOutPanel is always onTop');
}
// 3-layer 케이스: 중간 패널(DetailPanel)이 onTop
if (renderingPanels.length === 3) {
else if (renderingPanels.length === 3) {
if (index === 1) {
// DetailPanel (중간)
isPanelOnTop = true;