[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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user