From 8514e28866e05a66c852522c7e9ada61ec14d1a0 Mon Sep 17 00:00:00 2001 From: optrader Date: Mon, 24 Nov 2025 12:03:52 +0900 Subject: [PATCH] =?UTF-8?q?[251124]=20fix:=20Log=EC=A0=95=EB=A6=AC-2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 11. 24. 12:03:52 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 5๊ฐœ โ€ข ์ถ”๊ฐ€: +306์ค„ โ€ข ์‚ญ์ œ: -256์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/actions/productActions.js ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js ~ com.twin.app.shoptime/src/reducers/panelReducer.js ~ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx ๐Ÿ”ง ํ•จ์ˆ˜ ๋ณ€๊ฒฝ ๋‚ด์šฉ: ๐Ÿ“„ com.twin.app.shoptime/src/actions/productActions.js (javascript): โœ… Added: dwarn(), derror(), onSuccess() ๐Ÿ”„ Modified: pickParams(), createGetThunk(), async() โŒ Deleted: onSuccess() ๐Ÿ“„ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js (javascript): โœ… Added: dwarn(), derror() ๐Ÿ“„ com.twin.app.shoptime/src/reducers/panelReducer.js (javascript): โœ… Added: dwarn(), derror() ๐Ÿ“„ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx (javascript): โœ… Added: dwarn(), derror(), onSuccess(), onTestSuccess() โŒ Deleted: onSuccess(), onTestSuccess() ๐Ÿ“„ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx (javascript): โœ… Added: dwarn(), derror() ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข ํ•ต์‹ฌ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ๊ฐœ์„  โ€ข UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ๊ฐœ์„  โ€ข API ์„œ๋น„์Šค ๋ ˆ์ด์–ด ๊ฐœ์„  --- .../src/actions/productActions.js | 126 +- .../src/components/VideoPlayer/VideoPlayer.js | 51 +- .../src/reducers/panelReducer.js | 51 +- .../TermsOfService/TermsOfOptional.jsx | 1195 +++++++++-------- .../src/views/PlayerPanel/PlayerPanel.jsx | 139 +- 5 files changed, 847 insertions(+), 715 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/productActions.js b/com.twin.app.shoptime/src/actions/productActions.js index 381656f4..fe0b7797 100644 --- a/com.twin.app.shoptime/src/actions/productActions.js +++ b/com.twin.app.shoptime/src/actions/productActions.js @@ -10,6 +10,17 @@ import reviewSampleImage from '../../assets/images/image-review-sample-1.png'; // DEBUG_MODE - true์ธ ๊ฒฝ์šฐ์—๋งŒ ๋กœ๊ทธ ์ถœ๋ ฅ const DEBUG_MODE = false; +// Local debug helpers (matches src/lunaSend/common.js pattern) +const dlog = (...args) => { + if (DEBUG_MODE) console.log(...args); +}; +const dwarn = (...args) => { + if (DEBUG_MODE) console.warn(...args); +}; +const derror = (...args) => { + if (DEBUG_MODE) console.error(...args); +}; + // Best Seller ์ƒํ’ˆ ๋ชฉ๋ก ์กฐํšŒ IF-LGSP-303 // FP helpers const pickParams = (keys) => (src) => @@ -39,36 +50,34 @@ const createRequestThunk = const body = data(props); // ๐Ÿ“ก REQUEST ๋กœ๊ทธ: API ํ˜ธ์ถœ ์ „ (tag๋ณ„๋กœ ๋‹ค๋ฅด๊ฒŒ ํ‘œ์‹œ) - if (DEBUG_MODE) - console.log( - `%c[${tag}] ๐Ÿ“ค REQUEST - ${method.toUpperCase()} ${url}`, - 'background: #4CAF50; color: white; font-weight: bold; padding: 3px;', - { - method: method.toUpperCase(), - url: url, - params: query, - body: body, - timestamp: new Date().toISOString(), - } - ); + dlog( + `%c[${tag}] ๐Ÿ“ค REQUEST - ${method.toUpperCase()} ${url}`, + 'background: #4CAF50; color: white; font-weight: bold; padding: 3px;', + { + method: method.toUpperCase(), + url: url, + params: query, + body: body, + timestamp: new Date().toISOString(), + } + ); const onSuccess = (response) => { // โœ… RESPONSE ๋กœ๊ทธ: API ํ˜ธ์ถœ ์„ฑ๊ณต (tag๋ณ„๋กœ ๋‹ค๋ฅด๊ฒŒ ํ‘œ์‹œ) - if (DEBUG_MODE) - console.log( - `%c[${tag}] โœ… RESPONSE SUCCESS - ${method.toUpperCase()} ${url}`, - 'background: #2196F3; color: white; font-weight: bold; padding: 3px;', - { - method: method.toUpperCase(), - url: url, - httpStatus: response?.status, - httpStatusText: response?.statusText, - retCode: response?.data?.retCode, - retMsg: response?.data?.retMsg, - responseData: response?.data, - timestamp: new Date().toISOString(), - } - ); + dlog( + `%c[${tag}] โœ… RESPONSE SUCCESS - ${method.toUpperCase()} ${url}`, + 'background: #2196F3; color: white; font-weight: bold; padding: 3px;', + { + method: method.toUpperCase(), + url: url, + httpStatus: response?.status, + httpStatusText: response?.statusText, + retCode: response?.data?.retCode, + retMsg: response?.data?.retMsg, + responseData: response?.data, + timestamp: new Date().toISOString(), + } + ); dispatch({ type, payload: selectPayload(response) }); onSuccessExtra(props, dispatch, getState, response); @@ -76,23 +85,22 @@ const createRequestThunk = const onFail = (error) => { // โŒ ERROR ๋กœ๊ทธ: API ํ˜ธ์ถœ ์‹คํŒจ (tag๋ณ„๋กœ ๋‹ค๋ฅด๊ฒŒ ํ‘œ์‹œ) - if (DEBUG_MODE) - console.error( - `%c[${tag}] โŒ RESPONSE ERROR - ${method.toUpperCase()} ${url}`, - 'background: #F44336; color: white; font-weight: bold; padding: 3px;', - { - method: method.toUpperCase(), - url: url, - errorMessage: error?.message, - errorType: error?.type, - httpStatus: error?.response?.status, - httpStatusText: error?.response?.statusText, - responseRetCode: error?.response?.data?.retCode, - responseRetMsg: error?.response?.data?.retMsg, - responseData: error?.response?.data, - timestamp: new Date().toISOString(), - } - ); + derror( + `%c[${tag}] โŒ RESPONSE ERROR - ${method.toUpperCase()} ${url}`, + 'background: #F44336; color: white; font-weight: bold; padding: 3px;', + { + method: method.toUpperCase(), + url: url, + errorMessage: error?.message, + errorType: error?.type, + httpStatus: error?.response?.status, + httpStatusText: error?.response?.statusText, + responseRetCode: error?.response?.data?.retCode, + responseRetMsg: error?.response?.data?.retMsg, + responseData: error?.response?.data, + timestamp: new Date().toISOString(), + } + ); onFailExtra(props, dispatch, getState, error); }; @@ -106,14 +114,14 @@ const createGetThunk = ({ url, type, params = () => ({}), tag }) => export const getBestSeller = (callback) => (dispatch, getState) => { const onSuccess = (response) => { - if (DEBUG_MODE) console.log('getBestSeller onSuccess', response.data); + dlog('getBestSeller onSuccess', response.data); dispatch({ type: types.GET_BEST_SELLER, payload: get('data.data', response) }); dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); callback && callback(); }; const onFail = (error) => { - if (DEBUG_MODE) console.error('getBestSeller onFail', error); + derror('getBestSeller onFail', error); dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); callback && callback(); }; @@ -718,20 +726,20 @@ export const getUserReviewList = (requestParams) => async (dispatch, getState) = // Review Filters ์ถ”์ถœ ํ•จ์ˆ˜ (IF-LGSP-100) const extractReviewFiltersApiData = (apiResponse) => { try { - console.log('[ReviewFilters] ๐Ÿ“ฅ extractReviewFiltersApiData ํ˜ธ์ถœ - ์›๋ณธ ์‘๋‹ต:', apiResponse); + dlog('[ReviewFilters] ๐Ÿ“ฅ extractReviewFiltersApiData ํ˜ธ์ถœ - ์›๋ณธ ์‘๋‹ต:', apiResponse); let data = null; // โญ ํ•ต์‹ฌ: retCode๊ฐ€ 0์ธ์ง€ ๋จผ์ € ํ™•์ธ (HTTP 200์ด์–ด๋„ API ์—๋Ÿฌ์ผ ์ˆ˜ ์žˆ์Œ) // ์‘๋‹ต ๊ตฌ์กฐ: { retCode: 0, retMsg: "Success", data: { reviewFilterInfos: {...} } } if (!apiResponse) { - console.warn('[ReviewFilters] โš ๏ธ apiResponse๊ฐ€ null/undefined'); + dwarn('[ReviewFilters] โš ๏ธ apiResponse๊ฐ€ null/undefined'); return null; } const retCode = apiResponse.retCode; if (retCode !== 0) { - console.error('[ReviewFilters] โŒ API ์—๋Ÿฌ - retCode !== 0:', { + derror('[ReviewFilters] โŒ API ์—๋Ÿฌ - retCode !== 0:', { retCode: retCode, retMsg: apiResponse?.retMsg, fullResponse: apiResponse, @@ -742,7 +750,7 @@ const extractReviewFiltersApiData = (apiResponse) => { // reviewFilterInfos ์ถ”์ถœ: data.reviewFilterInfos const reviewFilterInfos = apiResponse.data?.reviewFilterInfos || {}; - console.log('[ReviewFilters] ๐Ÿ” reviewFilterInfos ๋ถ„์„:', { + dlog('[ReviewFilters] ๐Ÿ” reviewFilterInfos ๋ถ„์„:', { patnrId: reviewFilterInfos.patnrId, prdtId: reviewFilterInfos.prdtId, hasFilters: !!reviewFilterInfos.filters, @@ -753,11 +761,11 @@ const extractReviewFiltersApiData = (apiResponse) => { data = reviewFilterInfos; if (!data || !data.filters) { - console.warn('[ReviewFilters] โš ๏ธ filters๊ฐ€ ์—†์Œ:', apiResponse); + dwarn('[ReviewFilters] โš ๏ธ filters๊ฐ€ ์—†์Œ:', apiResponse); return null; } - console.log('[ReviewFilters] โœ… ์ถ”์ถœ ์™„๋ฃŒ:', { + dlog('[ReviewFilters] โœ… ์ถ”์ถœ ์™„๋ฃŒ:', { patnrId: data.patnrId, prdtId: data.prdtId, filtersLength: data.filters.length, @@ -765,7 +773,7 @@ const extractReviewFiltersApiData = (apiResponse) => { return data; } catch (error) { - console.error('[ReviewFilters] โŒ extractReviewFiltersApiData ์—๋Ÿฌ:', error); + derror('[ReviewFilters] โŒ extractReviewFiltersApiData ์—๋Ÿฌ:', error); return null; } }; @@ -783,7 +791,7 @@ export const getReviewFilters = (requestParams) => (dispatch, getState) => { const body = {}; - console.log('[ReviewFilters] ๐Ÿš€ API ์š”์ฒญ ์‹œ์ž‘:', { + dlog('[ReviewFilters] ๐Ÿš€ API ์š”์ฒญ ์‹œ์ž‘:', { requestParams, params, body, @@ -796,7 +804,7 @@ export const getReviewFilters = (requestParams) => (dispatch, getState) => { const retCode = response?.data?.retCode; const retMsg = response?.data?.retMsg; - console.log('[ReviewFilters] โœ… API ์‘๋‹ต ์ˆ˜์‹  (retCode ํ™•์ธ):', { + dlog('[ReviewFilters] โœ… API ์‘๋‹ต ์ˆ˜์‹  (retCode ํ™•์ธ):', { httpStatus: response?.status, retCode: retCode, retMsg: retMsg, @@ -808,7 +816,7 @@ export const getReviewFilters = (requestParams) => (dispatch, getState) => { const filtersData = extractReviewFiltersApiData(response.data); if (!filtersData) { - console.warn('[ReviewFilters] โš ๏ธ ํ•„ํ„ฐ ๋ฐ์ดํ„ฐ ์ถ”์ถœ ์‹คํŒจ:', { + dwarn('[ReviewFilters] โš ๏ธ ํ•„ํ„ฐ ๋ฐ์ดํ„ฐ ์ถ”์ถœ ์‹คํŒจ:', { retCode: retCode, retMsg: retMsg, reason: retCode !== 0 ? 'retCode !== 0' : 'filters ๋ฐ์ดํ„ฐ ์—†์Œ', @@ -816,7 +824,7 @@ export const getReviewFilters = (requestParams) => (dispatch, getState) => { return; // ์‹คํŒจ ์‹œ dispatchํ•˜์ง€ ์•Š์Œ } - console.log('[ReviewFilters] ๐Ÿ“Š ํ•„ํ„ฐ ๋ฐ์ดํ„ฐ ์ถ”์ถœ ์„ฑ๊ณต:', { + dlog('[ReviewFilters] ๐Ÿ“Š ํ•„ํ„ฐ ๋ฐ์ดํ„ฐ ์ถ”์ถœ ์„ฑ๊ณต:', { patnrId: filtersData.patnrId, prdtId: filtersData.prdtId, filtersLength: filtersData.filters ? filtersData.filters.length : 0, @@ -831,7 +839,7 @@ export const getReviewFilters = (requestParams) => (dispatch, getState) => { }, }; - console.log('[ReviewFilters] ๐Ÿ“ฆ Redux dispatch:', { + dlog('[ReviewFilters] ๐Ÿ“ฆ Redux dispatch:', { actionType: types.GET_REVIEW_FILTERS, patnrId: patnrId, prdtId: prdtId, @@ -842,7 +850,7 @@ export const getReviewFilters = (requestParams) => (dispatch, getState) => { }; const onFail = (error) => { - console.error('[ReviewFilters] โŒ API ์‹คํŒจ:', { + derror('[ReviewFilters] โŒ API ์‹คํŒจ:', { errorMessage: error?.message || '์•Œ ์ˆ˜ ์—†๋Š” ์—๋Ÿฌ', errorType: typeof error, httpStatus: error?.response?.status, diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js index ef01c6c9..bb589a8d 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js +++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js @@ -66,6 +66,21 @@ import Video from './Video'; import css from './VideoPlayer.module.less'; import { updateVideoPlayState } from '../../actions/playActions'; +// Toggle debug logging for this module +const DEBUG_MODE = false; + +const dlog = (...args) => { + if (DEBUG_MODE) console.log(...args); +}; + +const dwarn = (...args) => { + if (DEBUG_MODE) console.warn(...args); +}; + +const derror = (...args) => { + console.error(...args); +}; + const isEnter = is('enter'); const isLeft = is('left'); const isRight = is('right'); @@ -1488,7 +1503,7 @@ const VideoPlayerBase = class extends React.Component { sourceUnavailable: false, }; if (!el) { - console.log('yhcho VideoPlayer no el '); + dlog('yhcho VideoPlayer no el '); updatedState.error = true; this.setState(updatedState); return; @@ -1564,7 +1579,7 @@ const VideoPlayerBase = class extends React.Component { // ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์ด๋ฒคํŠธ๋งŒ ๋กœ๊ทธ const shouldLogEvent = ['play', 'pause', 'ended'].includes(ev.type); if (shouldLogEvent) { - console.log('๐Ÿ”„ [PlayerPanel][VideoPlayer] Event-driven Redux update', { + dlog('๐Ÿ”„ [PlayerPanel][VideoPlayer] Event-driven Redux update', { eventType: ev.type, videoState: updatedState, updateState, @@ -1573,7 +1588,7 @@ const VideoPlayerBase = class extends React.Component { } // ๐Ÿ” Redux dispatch ํ™•์ธ - console.log('๐Ÿ“ค [PlayerPanel][VideoPlayer] Dispatching Redux update', { + dlog('๐Ÿ“ค [PlayerPanel][VideoPlayer] Dispatching Redux update', { eventType: ev.type, updateState, hasDispatch: !!this.props.dispatch, @@ -1583,7 +1598,7 @@ const VideoPlayerBase = class extends React.Component { this.props.dispatch(updateVideoPlayState(updateState)); } } else { - console.log('โŒ [PlayerPanel][VideoPlayer] No dispatch prop available', { + derror('โŒ [PlayerPanel][VideoPlayer] No dispatch prop available', { props: Object.keys(this.props), hasDispatch: !!this.props.dispatch, hasVideoPlayState: !!this.props.videoPlayState, @@ -1595,7 +1610,7 @@ const VideoPlayerBase = class extends React.Component { if (this.props.videoPlayState && typeof this.props.videoPlayState === 'object') { // Redux ์ƒํƒœ ๋””๋ฒ„๊น… (์ตœ์†Œํ•œ์˜ ์ค‘์š” ์ด๋ฒคํŠธ๋งŒ) if (ev.type === 'play' || ev.type === 'pause') { - console.log('๐Ÿ” [PlayerPanel][VideoPlayer] Redux state debug', { + dlog('๐Ÿ” [PlayerPanel][VideoPlayer] Redux state debug', { videoPlayState: this.props.videoPlayState, isPaused: this.props.videoPlayState?.isPaused, isPlaying: this.props.videoPlayState?.isPlaying, @@ -1624,7 +1639,7 @@ const VideoPlayerBase = class extends React.Component { // ์ค‘์š”ํ•œ ์ƒํƒœ ๋ณ€ํ™”๊ฐ€ ์žˆ๊ณ  ๋นˆ๋ฒˆํ•œ ์ด๋ฒคํŠธ๊ฐ€ ์•„๋‹ ๋•Œ๋งŒ ๋กœ๊ทธ if (hasSignificantChange && !isFrequentEvent) { - console.log('๐Ÿ”„ [PlayerPanel][VideoPlayer] Syncing internal state with Redux', { + dlog('๐Ÿ”„ [PlayerPanel][VideoPlayer] Syncing internal state with Redux', { timeDiff, shouldUpdateTime, pausedDiff: paused !== this.state.paused, @@ -1703,7 +1718,7 @@ const VideoPlayerBase = class extends React.Component { * @public */ play = () => { - console.log('๐ŸŸข [PlayerPanel][VideoPlayer] play() called', { + dlog('๐ŸŸข [PlayerPanel][VideoPlayer] play() called', { currentTime: this.state.currentTime, duration: this.state.duration, paused: this.state.paused, @@ -1712,7 +1727,7 @@ const VideoPlayerBase = class extends React.Component { }); if (this.state.sourceUnavailable) { - console.log('โš ๏ธ [PlayerPanel][VideoPlayer] play() aborted - source unavailable'); + dwarn('โš ๏ธ [PlayerPanel][VideoPlayer] play() aborted - source unavailable'); return; } @@ -1747,7 +1762,7 @@ const VideoPlayerBase = class extends React.Component { * @public */ pause = () => { - console.log('๐Ÿ”ด [VideoPlayer] pause() called', { + dlog('๐Ÿ”ด [VideoPlayer] pause() called', { currentTime: this.state.currentTime, duration: this.state.duration, paused: this.state.paused, @@ -1756,7 +1771,7 @@ const VideoPlayerBase = class extends React.Component { }); if (this.state.sourceUnavailable) { - console.log('โš ๏ธ [VideoPlayer] pause() aborted - source unavailable'); + dwarn('โš ๏ธ [VideoPlayer] pause() aborted - source unavailable'); return; } @@ -1779,10 +1794,10 @@ const VideoPlayerBase = class extends React.Component { playbackRate: 1, }; - console.log('๐Ÿ“ค [VideoPlayer] Dispatching pause state', pauseState); + dlog('๐Ÿ“ค [VideoPlayer] Dispatching pause state', pauseState); this.props.dispatch(updateVideoPlayState(pauseState)); } else { - console.log('โš ๏ธ [VideoPlayer] No dispatch prop available - Redux state not updated'); + dwarn('โš ๏ธ [VideoPlayer] No dispatch prop available - Redux state not updated'); } }; @@ -1795,7 +1810,7 @@ const VideoPlayerBase = class extends React.Component { * @public */ seek = (timeIndex) => { - console.log('โฉ [VideoPlayer] seek() called', { + dlog('โฉ [VideoPlayer] seek() called', { timeIndex, currentTime: this.state.currentTime, duration: this.state.duration, @@ -1815,7 +1830,7 @@ const VideoPlayerBase = class extends React.Component { timeIndex >= this.video.duration ? this.video.duration - 1 : timeIndex; this.video.currentTime = actualSeekTime; - console.log('โฉ [VideoPlayer] Video seek completed', { + dlog('โฉ [VideoPlayer] Video seek completed', { requestedTime: timeIndex, actualTime: actualSeekTime, videoDuration: this.video.duration, @@ -1831,17 +1846,17 @@ const VideoPlayerBase = class extends React.Component { playbackRate: this.state.playbackRate, }; - console.log('๐Ÿ“ค [VideoPlayer] Dispatching seek state', seekState); + dlog('๐Ÿ“ค [VideoPlayer] Dispatching seek state', seekState); this.props.dispatch(updateVideoPlayState(seekState)); } else { - console.log('โš ๏ธ [VideoPlayer] No dispatch prop available - Redux state not updated'); + dwarn('โš ๏ธ [VideoPlayer] No dispatch prop available - Redux state not updated'); } } else { - console.log('โŒ [VideoPlayer] seek failed - disabled or source unavailable'); + derror('โŒ [VideoPlayer] seek failed - disabled or source unavailable'); forward('onSeekFailed', {}, this.props); } } else { - console.log('โŒ [VideoPlayer] seek failed - no video element'); + derror('โŒ [VideoPlayer] seek failed - no video element'); } }; diff --git a/com.twin.app.shoptime/src/reducers/panelReducer.js b/com.twin.app.shoptime/src/reducers/panelReducer.js index fd16d391..dabb2c3f 100644 --- a/com.twin.app.shoptime/src/reducers/panelReducer.js +++ b/com.twin.app.shoptime/src/reducers/panelReducer.js @@ -1,6 +1,21 @@ import { types } from '../actions/actionTypes'; import { panel_names } from '../utils/Config'; +// Toggle debug logging for this reducer +const DEBUG_MODE = false; + +const dlog = (...args) => { + if (DEBUG_MODE) console.log(...args); +}; + +const dwarn = (...args) => { + if (DEBUG_MODE) console.warn(...args); +}; + +const derror = (...args) => { + console.error(...args); +}; + const initialState = { // ๊ธฐ์กด ์ƒํƒœ - ์™„์ „ํžˆ ํ˜ธํ™˜๋จ panels: [], @@ -29,7 +44,7 @@ const forceTopPanels = [panel_names.ERROR_PANEL, panel_names.INTRO_PANEL, panel_ export const panelsReducer = (state = initialState, action) => { switch (action.type) { case types.PUSH_PANEL: { - console.log('[panelReducer] ๐Ÿ”ต PUSH_PANEL START', { + dlog('[panelReducer] ๐Ÿ”ต PUSH_PANEL START', { newPanelName: action.payload.name, currentPanels: state.panels.map((p) => p.name), duplicatable: action.duplicatable, @@ -76,7 +91,7 @@ export const panelsReducer = (state = initialState, action) => { } } - console.log('[panelReducer] ๐Ÿ”ต PUSH_PANEL END', { + dlog('[panelReducer] ๐Ÿ”ต PUSH_PANEL END', { resultPanels: newState.map((p) => p.name), lastAction, }); @@ -89,7 +104,7 @@ export const panelsReducer = (state = initialState, action) => { } case types.POP_PANEL: { - console.log('[panelReducer] ๐Ÿ”ด POP_PANEL START', { + dlog('[panelReducer] ๐Ÿ”ด POP_PANEL START', { targetPanel: action.payload || 'last_panel', currentPanels: state.panels.map((p) => p.name), }); @@ -113,7 +128,7 @@ export const panelsReducer = (state = initialState, action) => { resultPanels = state.panels.slice(0, state.panels.length - 1); } - console.log('[panelReducer] ๐Ÿ”ด POP_PANEL END', { + dlog('[panelReducer] ๐Ÿ”ด POP_PANEL END', { resultPanels: resultPanels.map((p) => p.name), lastAction, }); @@ -159,7 +174,7 @@ export const panelsReducer = (state = initialState, action) => { }; } case types.RESET_PANELS: { - console.log('[panelReducer] ๐ŸŸข RESET_PANELS START', { + dlog('[panelReducer] ๐ŸŸข RESET_PANELS START', { currentPanels: state.panels.map((p) => p.name), payloadProvided: !!action.payload, }); @@ -171,7 +186,7 @@ export const panelsReducer = (state = initialState, action) => { })) : []; - console.log('[panelReducer] ๐ŸŸข RESET_PANELS END', { + dlog('[panelReducer] ๐ŸŸข RESET_PANELS END', { resultPanels: updatedPanels.map((p) => p.name), }); @@ -184,7 +199,7 @@ export const panelsReducer = (state = initialState, action) => { // [251106] ํŒจ๋„ ์•ก์…˜ ํ ๊ด€๋ จ reducer ์ผ€์ด์Šค๋“ค case types.ENQUEUE_PANEL_ACTION: { - console.log('[panelReducer] ๐ŸŸ  ENQUEUE_PANEL_ACTION', { + dlog('[panelReducer] ๐ŸŸ  ENQUEUE_PANEL_ACTION', { action: action.payload.action, queueId: action.payload.id, currentQueueLength: state.panelActionQueue.length, @@ -201,7 +216,7 @@ export const panelsReducer = (state = initialState, action) => { } case types.PROCESS_PANEL_QUEUE: { - console.log('[panelReducer] ๐ŸŸก PROCESS_PANEL_QUEUE', { + dlog('[panelReducer] ๐ŸŸก PROCESS_PANEL_QUEUE', { isProcessing: state.isProcessingQueue, queueLength: state.panelActionQueue.length, }); @@ -215,7 +230,7 @@ export const panelsReducer = (state = initialState, action) => { const firstQueueItem = state.panelActionQueue[0]; const remainingQueue = state.panelActionQueue.slice(1); - console.log('[panelReducer] ๐ŸŸก PROCESSING_QUEUE_ITEM', { + dlog('[panelReducer] ๐ŸŸก PROCESSING_QUEUE_ITEM', { action: firstQueueItem.action, queueId: firstQueueItem.id, remainingQueueLength: remainingQueue.length, @@ -261,7 +276,7 @@ export const panelsReducer = (state = initialState, action) => { break; } default: - console.warn('[panelReducer] โš ๏ธ UNKNOWN_QUEUE_ACTION', firstQueueItem.action); + dwarn('[panelReducer] โš ๏ธ UNKNOWN_QUEUE_ACTION', firstQueueItem.action); newState = state; } @@ -272,7 +287,7 @@ export const panelsReducer = (state = initialState, action) => { processingTime) / newTotalProcessed; - console.log('[panelReducer] โœ… QUEUE_ITEM_PROCESSED', { + dlog('[panelReducer] โœ… QUEUE_ITEM_PROCESSED', { action: firstQueueItem.action, queueId: firstQueueItem.id, processingTime, @@ -290,7 +305,7 @@ export const panelsReducer = (state = initialState, action) => { }, }; } catch (error) { - console.error('[panelReducer] โŒ QUEUE_PROCESSING_ERROR', { + derror('[panelReducer] โŒ QUEUE_PROCESSING_ERROR', { action: firstQueueItem.action, queueId: firstQueueItem.id, error: error.message, @@ -315,7 +330,7 @@ export const panelsReducer = (state = initialState, action) => { } case types.CLEAR_PANEL_QUEUE: { - console.log('[panelReducer] ๐Ÿ”ต CLEAR_PANEL_QUEUE', { + dlog('[panelReducer] ๐Ÿ”ต CLEAR_PANEL_QUEUE', { currentQueueLength: state.panelActionQueue.length, }); @@ -328,7 +343,7 @@ export const panelsReducer = (state = initialState, action) => { } case types.SET_QUEUE_PROCESSING: { - console.log('[panelReducer] ๐ŸŸฃ SET_QUEUE_PROCESSING', { + dlog('[panelReducer] ๐ŸŸฃ SET_QUEUE_PROCESSING', { isProcessing: action.payload.isProcessing, queueLength: state.panelActionQueue.length, }); @@ -341,7 +356,7 @@ export const panelsReducer = (state = initialState, action) => { // [251106] ๋น„๋™๊ธฐ ํŒจ๋„ ์•ก์…˜ ๊ด€๋ จ reducer ์ผ€์ด์Šค๋“ค case types.ENQUEUE_ASYNC_PANEL_ACTION: { - console.log('[panelReducer] ๐ŸŸ  ENQUEUE_ASYNC_PANEL_ACTION', { + dlog('[panelReducer] ๐ŸŸ  ENQUEUE_ASYNC_PANEL_ACTION', { actionId: action.payload.id, timestamp: action.payload.timestamp, }); @@ -361,7 +376,7 @@ export const panelsReducer = (state = initialState, action) => { } case types.COMPLETE_ASYNC_PANEL_ACTION: { - console.log('[panelReducer] โœ… COMPLETE_ASYNC_PANEL_ACTION', { + dlog('[panelReducer] โœ… COMPLETE_ASYNC_PANEL_ACTION', { actionId: action.payload.actionId, timestamp: action.payload.timestamp, }); @@ -401,7 +416,7 @@ export const panelsReducer = (state = initialState, action) => { } case types.FAIL_ASYNC_PANEL_ACTION: { - console.log('[panelReducer] โŒ FAIL_ASYNC_PANEL_ACTION', { + derror('[panelReducer] โŒ FAIL_ASYNC_PANEL_ACTION', { actionId: action.payload.actionId, error: action.payload.error?.message || 'Unknown error', timestamp: action.payload.timestamp, @@ -440,7 +455,7 @@ export const panelsReducer = (state = initialState, action) => { // [251114] ๋ช…์‹œ์  ํฌ์ปค์Šค ์ด๋™ case types.FOCUS_PANEL: { - console.log('[panelReducer] ๐ŸŽฏ FOCUS_PANEL', { + dlog('[panelReducer] ๐ŸŽฏ FOCUS_PANEL', { panelName: action.payload.panelName, focusTarget: action.payload.focusTarget, timestamp: action.payload.timestamp, diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx index 540f9101..5225cdbb 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx @@ -2,69 +2,91 @@ /** * ShopTime ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ ํƒ์  ์•ฝ๊ด€ ๋™์˜ ์ปดํฌ๋„ŒํŠธ - * + * * @component TermsOfOptional - * @description + * @description * webOS TV ํ™˜๊ฒฝ์—์„œ ์„ ํƒ์  ์•ฝ๊ด€ ์ •๋ณด๋ฅผ ํ‘œ์‹œํ•˜๊ณ  ์‚ฌ์šฉ์ž์˜ ๋™์˜ ์—ฌ๋ถ€๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค. * WebOS ๋ฒ„์ „์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋ทฐ๋ฅผ ์ž๋™์œผ๋กœ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. */ /* eslint-disable no-console */ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useCallback, useEffect, useState, useMemo } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import Spotlight from "@enact/spotlight"; +import React, { useCallback, useEffect, useState, useMemo } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import Spotlight from '@enact/spotlight'; import { setHidePopup, setShowPopup, changeLocalSettings, setExitApp, - setHttpHeaderForServiceRequest -} from "../../../../actions/commonActions"; + setHttpHeaderForServiceRequest, +} from '../../../../actions/commonActions'; -import {registerDevice} from "../../../../actions/deviceActions"; -import TBody from "../../../../components/TBody/TBody"; +import { registerDevice } from '../../../../actions/deviceActions'; +import TBody from '../../../../components/TBody/TBody'; import { setMyTermsWithdraw, getMyPageTerms, getMyPageOptionalTerms, setMyPageTermsAgree, // ์•ฝ๊ด€ ๋™์˜ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ์•ก์…˜ -} from "../../../../actions/myPageActions"; -import { sendLogTerms } from "../../../../actions/logActions"; -import TButton, { TYPES } from "../../../../components/TButton/TButton"; -import TCheckBoxSquare from "../../../../components/TCheckBox/TCheckBoxSquare"; -import TPopUp from "../../../../components/TPopUp/TPopUp"; -import CustomTermButton from "./CustomTermButton"; -import * as Config from "../../../../utils/Config"; -import { $L } from "../../../../utils/helperMethods"; -import css from "./TermsOfOptional.module.less"; +} from '../../../../actions/myPageActions'; +import { sendLogTerms } from '../../../../actions/logActions'; +import TButton, { TYPES } from '../../../../components/TButton/TButton'; +import TCheckBoxSquare from '../../../../components/TCheckBox/TCheckBoxSquare'; +import TPopUp from '../../../../components/TPopUp/TPopUp'; +import CustomTermButton from './CustomTermButton'; +import * as Config from '../../../../utils/Config'; +import { $L } from '../../../../utils/helperMethods'; +import css from './TermsOfOptional.module.less'; import { TERMS_TYPE, TERMS_ID_MAP, TERMS_TPCD_MAP, TERMS_DISPLAY_NAMES, getInitialCheckboxStates, - isMandatoryTerms -} from "./termsShared"; -import { popPanel } from "../../../../actions/panelActions"; -import TPanel from "../../../../components/TPanel/TPanel"; -import TermsPopup from "./TermsPopup"; -import OptionalTermsInfo from "./OptionalTermsInfo"; - - + isMandatoryTerms, +} from './termsShared'; +import { popPanel } from '../../../../actions/panelActions'; +import TPanel from '../../../../components/TPanel/TPanel'; +import TermsPopup from './TermsPopup'; +import OptionalTermsInfo from './OptionalTermsInfo'; // SVG ์•„์ด์ฝ˜ ์ปดํฌ๋„ŒํŠธ const ExpandIcon = ({ className }) => ( - - - + + + ); +// Local debug helpers (matches src/lunaSend/common.js pattern) +const DEBUG_MODE = false; +const dlog = (...args) => { + if (DEBUG_MODE) console.log(...args); +}; +const dwarn = (...args) => { + if (DEBUG_MODE) console.warn(...args); +}; +const derror = (...args) => { + if (DEBUG_MODE) console.error(...args); +}; + // ํ˜œํƒ ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ const BenefitImage = ({ className, onClick }) => { return ( -
{ e.stopPropagation(); @@ -79,66 +101,66 @@ const BenefitImage = ({ className, onClick }) => { // Home ๋ฐ์ดํ„ฐ์—์„œ ์•ฝ๊ด€ ๊ฒ€์ƒ‰ (์•ฝ๊ด€ ๋‚ด์šฉ ํฌํ•จ) const findTermsInHomeData = (termsData, termsId, type) => { if (!termsData) return null; - - console.log('๐Ÿ” Home ๋ฐ์ดํ„ฐ์—์„œ ๊ฒ€์ƒ‰ ์‹œ์ž‘'); - + + dlog('๐Ÿ” Home ๋ฐ์ดํ„ฐ์—์„œ ๊ฒ€์ƒ‰ ์‹œ์ž‘'); + // 1. ๋ฐฐ์—ด ํ˜•ํƒœ ๊ฒ€์ƒ‰ if (Array.isArray(termsData)) { - const found = termsData.find(term => term.trmsTpCd === termsId); + const found = termsData.find((term) => term.trmsTpCd === termsId); if (found) { - console.log('โœ… Home ๋ฐฐ์—ด์—์„œ ๋ฐœ๊ฒฌ:', found); + dlog('โœ… Home ๋ฐฐ์—ด์—์„œ ๋ฐœ๊ฒฌ:', found); return found; } } - + // 2. ๊ฐ์ฒด ํ˜•ํƒœ ๊ฒ€์ƒ‰ if (termsData?.data) { const searchArrays = [ termsData.data.terms, termsData.data.optionalTerms, termsData.data.additionalTerms, - termsData.data.marketingTerms + termsData.data.marketingTerms, ]; - + for (const array of searchArrays) { if (Array.isArray(array)) { - const found = array.find(term => term.trmsTpCd === termsId); + const found = array.find((term) => term.trmsTpCd === termsId); if (found) { - console.log('โœ… Home ๊ฐ์ฒด์—์„œ ๋ฐœ๊ฒฌ:', found); + dlog('โœ… Home ๊ฐ์ฒด์—์„œ ๋ฐœ๊ฒฌ:', found); return found; } } } } - - console.log('โŒ Home ๋ฐ์ดํ„ฐ์—์„œ ์ฐพ์ง€ ๋ชปํ•จ'); + + derror('โŒ Home ๋ฐ์ดํ„ฐ์—์„œ ์ฐพ์ง€ ๋ชปํ•จ'); return null; }; // MyPage ๋ฐ์ดํ„ฐ์—์„œ ์•ฝ๊ด€ ๊ฒ€์ƒ‰ (fallback) const findTermsInMyPageData = (myPageTermsData, myPageOptionalTermsData, termsId, type) => { - console.log('๐Ÿ” MyPage ๋ฐ์ดํ„ฐ์—์„œ ๊ฒ€์ƒ‰ ์‹œ์ž‘'); - + dlog('๐Ÿ” MyPage ๋ฐ์ดํ„ฐ์—์„œ ๊ฒ€์ƒ‰ ์‹œ์ž‘'); + const searchInData = (data, source) => { if (data?.data?.terms && Array.isArray(data.data.terms)) { - const found = data.data.terms.find(term => term.trmsTpCd === termsId); + const found = data.data.terms.find((term) => term.trmsTpCd === termsId); if (found) { - console.log(`โœ… ${source}์—์„œ ๋ฐœ๊ฒฌ:`, found); + dlog(`โœ… ${source}์—์„œ ๋ฐœ๊ฒฌ:`, found); return found; } } return null; }; - + // ํ•„์ˆ˜ ์•ฝ๊ด€์—์„œ ๊ฒ€์ƒ‰ let found = searchInData(myPageTermsData, 'myPageTermsData'); if (found) return found; - + // ์„ ํƒ ์•ฝ๊ด€์—์„œ ๊ฒ€์ƒ‰ found = searchInData(myPageOptionalTermsData, 'myPageOptionalTermsData'); if (found) return found; - - console.log('โŒ MyPage ๋ฐ์ดํ„ฐ์—์„œ๋„ ์ฐพ์ง€ ๋ชปํ•จ'); + + derror('โŒ MyPage ๋ฐ์ดํ„ฐ์—์„œ๋„ ์ฐพ์ง€ ๋ชปํ•จ'); return null; }; @@ -147,7 +169,7 @@ export default function TermsOfOptional({ isModalMode, closeModalCallback, panelInfo, - spotlightId = "termsOfOptionalPanel", + spotlightId = 'termsOfOptionalPanel', initialAgreeState, }) { const [hoveredTerm, setHoveredTerm] = useState(null); @@ -156,59 +178,55 @@ export default function TermsOfOptional({ const handleMouseEnter = useCallback((type) => { setHoveredTerm(type); }, []); - + const handleMouseLeave = useCallback(() => { setHoveredTerm(null); }, []); const dispatch = useDispatch(); - const termsData = useSelector((state) => state.home.termsData); + const termsData = useSelector((state) => state.home.termsData); const commonPopupState = useSelector((state) => state.common?.popup || {}); const { popupVisible = false, activePopup = null } = commonPopupState; - - // ์•ฝ๊ด€ ์ฒ ํšŒ ๊ฒฐ๊ณผ๋„ ๊ฐ€์ ธ์˜ค๊ธฐ const { setMyTermsWithdrawResult } = useSelector((state) => state.myPage); // ์•ฝ๊ด€๋™์˜์—ฌ๋ถ€ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ const { myPageTermsData, myPageOptionalTermsData } = useSelector((state) => state.myPage); - + // 1. Redux์—์„œ registerDevice ๊ฒฐ๊ณผ ์ƒํƒœ ๊ฐ€์ ธ์˜ค๊ธฐ const deviceState = useSelector((state) => state.device); - + useEffect(() => { if (termsData) { - console.log('๐Ÿ”๐Ÿ”๐Ÿ” TermsOfOptional - termsData ๊ตฌ์กฐ:', termsData); + dlog('๐Ÿ”๐Ÿ”๐Ÿ” TermsOfOptional - termsData ๊ตฌ์กฐ:', termsData); if (termsData.data) { - console.log('๐Ÿ”๐Ÿ”๐Ÿ” TermsOfOptional - termsData.data ํ‚ค:', Object.keys(termsData.data)); - + dlog('๐Ÿ”๐Ÿ”๐Ÿ” TermsOfOptional - termsData.data ํ‚ค:', Object.keys(termsData.data)); + if (termsData.data.optionalTerms) { - console.log('๐Ÿ”๐Ÿ”๐Ÿ” TermsOfOptional - optionalTerms ๋ฐ์ดํ„ฐ:', termsData.data.optionalTerms); + dlog('๐Ÿ”๐Ÿ”๐Ÿ” TermsOfOptional - optionalTerms ๋ฐ์ดํ„ฐ:', termsData.data.optionalTerms); } } } }, [termsData]); const introTermsData = termsData?.data?.terms.filter( - (item) => item.trmsTpCd === "MST00401" || item.trmsTpCd === "MST00402" - ); - - const webOSVersion = useSelector( - (state) => state.common.appStatus.webOSVersion + (item) => item.trmsTpCd === 'MST00401' || item.trmsTpCd === 'MST00402' ); - + + const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion); + const getDisplayMode = () => { - //temp + //temp const webOSVersion = 7; // ์ž„์‹œ๋กœ 5๋กœ ์„ค์ • (ํ…Œ์ŠคํŠธ์šฉ) return webOSVersion < 6 ? 'image' : 'text'; }; - + // ์ƒํƒœ ๊ด€๋ฆฌ const [checkboxStates, setCheckboxStates] = useState(() => getInitialCheckboxStates()); const [isAllChecked, setIsAllChecked] = useState(false); const [spotlightDisabled, setSpotlightDisabled] = useState(false); - + // ํŒ์—… ๊ด€๋ จ state const [showTermsPopup, setShowTermsPopup] = useState(false); const [currentTermsData, setCurrentTermsData] = useState(null); @@ -221,233 +239,259 @@ export default function TermsOfOptional({ // ํ˜„์žฌ ์•ฝ๊ด€ ๋™์˜ ์ƒํƒœ๋ฅผ ํŒŒ์‹ฑํ•˜๋Š” ํ•จ์ˆ˜ const parseCurrentTermsStatus = useCallback(() => { - console.log('[DEBUG] ์•ฝ๊ด€ ์ƒํƒœ ํŒŒ์‹ฑ ์‹œ์ž‘'); - console.log('[DEBUG] myPageTermsData:', myPageTermsData); - console.log('[DEBUG] myPageOptionalTermsData:', myPageOptionalTermsData); - + dlog('[DEBUG] ์•ฝ๊ด€ ์ƒํƒœ ํŒŒ์‹ฑ ์‹œ์ž‘'); + dlog('[DEBUG] myPageTermsData:', myPageTermsData); + dlog('[DEBUG] myPageOptionalTermsData:', myPageOptionalTermsData); + const currentStatus = {}; - + // ํ•„์ˆ˜ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ์—์„œ ๋™์˜ ์ƒํƒœ ํ™•์ธ if (myPageTermsData?.data?.terms) { - console.log('[DEBUG] ํ•„์ˆ˜ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์‹œ์ž‘:', myPageTermsData.data.terms); - myPageTermsData.data.terms.forEach(term => { - console.log(`[DEBUG] ํ•„์ˆ˜ ์•ฝ๊ด€ ์ฒ˜๋ฆฌ ์ค‘ - trmsTpCd: ${term.trmsTpCd}, trmsAgrFlag: ${term.trmsAgrFlag}`); - + dlog('[DEBUG] ํ•„์ˆ˜ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์‹œ์ž‘:', myPageTermsData.data.terms); + myPageTermsData.data.terms.forEach((term) => { + dlog( + `[DEBUG] ํ•„์ˆ˜ ์•ฝ๊ด€ ์ฒ˜๋ฆฌ ์ค‘ - trmsTpCd: ${term.trmsTpCd}, trmsAgrFlag: ${term.trmsAgrFlag}` + ); + // TERMS_ID_MAP์—์„œ ์—ญ์œผ๋กœ ์ฐพ๊ธฐ const termType = Object.keys(TERMS_TPCD_MAP).find( - key => TERMS_TPCD_MAP[key] === term.trmsTpCd + (key) => TERMS_TPCD_MAP[key] === term.trmsTpCd ); if (termType) { const isAgreed = term.trmsAgrFlag === 'Y'; currentStatus[termType] = isAgreed; - console.log(`[DEBUG] ${termType}: ${term.trmsAgrFlag} -> ${isAgreed}`); + dlog(`[DEBUG] ${termType}: ${term.trmsAgrFlag} -> ${isAgreed}`); } else { - console.log(`[DEBUG] ๋งคํ•‘๋˜์ง€ ์•Š์€ ์•ฝ๊ด€ ํƒ€์ž…: ${term.trmsTpCd}`); + dlog(`[DEBUG] ๋งคํ•‘๋˜์ง€ ์•Š์€ ์•ฝ๊ด€ ํƒ€์ž…: ${term.trmsTpCd}`); } }); } else { - console.log('[DEBUG] ํ•„์ˆ˜ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์—†์Œ'); + dlog('[DEBUG] ํ•„์ˆ˜ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์—†์Œ'); } - + // ์„ ํƒ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ์—์„œ ๋™์˜ ์ƒํƒœ ํ™•์ธ if (myPageOptionalTermsData?.data?.terms) { - console.log('[DEBUG] ์„ ํƒ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์‹œ์ž‘:', myPageOptionalTermsData.data.terms); - myPageOptionalTermsData.data.terms.forEach(term => { - console.log(`[DEBUG] ์„ ํƒ ์•ฝ๊ด€ ์ฒ˜๋ฆฌ ์ค‘ - trmsTpCd: ${term.trmsTpCd}, trmsAgrFlag: ${term.trmsAgrFlag}`); - + dlog('[DEBUG] ์„ ํƒ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์‹œ์ž‘:', myPageOptionalTermsData.data.terms); + myPageOptionalTermsData.data.terms.forEach((term) => { + dlog( + `[DEBUG] ์„ ํƒ ์•ฝ๊ด€ ์ฒ˜๋ฆฌ ์ค‘ - trmsTpCd: ${term.trmsTpCd}, trmsAgrFlag: ${term.trmsAgrFlag}` + ); + const termType = Object.keys(TERMS_TPCD_MAP).find( - key => TERMS_TPCD_MAP[key] === term.trmsTpCd + (key) => TERMS_TPCD_MAP[key] === term.trmsTpCd ); if (termType) { const isAgreed = term.trmsAgrFlag === 'Y'; currentStatus[termType] = isAgreed; - console.log(`[DEBUG] ${termType}: ${term.trmsAgrFlag} -> ${isAgreed}`); + dlog(`[DEBUG] ${termType}: ${term.trmsAgrFlag} -> ${isAgreed}`); } else { - console.log(`[DEBUG] ๋งคํ•‘๋˜์ง€ ์•Š์€ ์•ฝ๊ด€ ํƒ€์ž…: ${term.trmsTpCd}`); + dlog(`[DEBUG] ๋งคํ•‘๋˜์ง€ ์•Š์€ ์•ฝ๊ด€ ํƒ€์ž…: ${term.trmsTpCd}`); } }); } else { - console.log('[DEBUG] ์„ ํƒ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์—†์Œ'); + dlog('[DEBUG] ์„ ํƒ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ์—†์Œ'); } - - console.log('[DEBUG] ์ตœ์ข… ํŒŒ์‹ฑ ๊ฒฐ๊ณผ:', currentStatus); - console.log('[DEBUG] ํŒŒ์‹ฑ๋œ ์•ฝ๊ด€ ๊ฐœ์ˆ˜:', Object.keys(currentStatus).length); - + + dlog('[DEBUG] ์ตœ์ข… ํŒŒ์‹ฑ ๊ฒฐ๊ณผ:', currentStatus); + dlog('[DEBUG] ํŒŒ์‹ฑ๋œ ์•ฝ๊ด€ ๊ฐœ์ˆ˜:', Object.keys(currentStatus).length); + return currentStatus; }, [myPageTermsData, myPageOptionalTermsData]); // ์ปดํฌ๋„ŒํŠธ ๋งˆ์šดํŠธ ์‹œ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์œผ๋ฉด ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ์ดˆ๊ธฐํ™” (์ผ๋ฐ˜ ํŒจ๋„ ๋ชจ๋“œ์—์„œ๋งŒ) useEffect(() => { - console.log('[DEBUG] useEffect ํŠธ๋ฆฌ๊ฑฐ๋จ - ์˜์กด์„ฑ ๋ณ€๊ฒฝ'); - console.log('[DEBUG] isModalMode:', isModalMode); - console.log('[DEBUG] myPageTermsData ์กด์žฌ:', !!myPageTermsData); - console.log('[DEBUG] myPageOptionalTermsData ์กด์žฌ:', !!myPageOptionalTermsData); - + dlog('[DEBUG] useEffect ํŠธ๋ฆฌ๊ฑฐ๋จ - ์˜์กด์„ฑ ๋ณ€๊ฒฝ'); + dlog('[DEBUG] isModalMode:', isModalMode); + dlog('[DEBUG] myPageTermsData ์กด์žฌ:', !!myPageTermsData); + dlog('[DEBUG] myPageOptionalTermsData ์กด์žฌ:', !!myPageOptionalTermsData); + if (!isModalMode && (myPageTermsData || myPageOptionalTermsData)) { - console.log('[DEBUG] ์กฐ๊ฑด ๋งŒ์กฑ - ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ํŒŒ์‹ฑ ์‹œ์ž‘'); + dlog('[DEBUG] ์กฐ๊ฑด ๋งŒ์กฑ - ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ํŒŒ์‹ฑ ์‹œ์ž‘'); const currentStatus = parseCurrentTermsStatus(); - + if (Object.keys(currentStatus).length > 0) { - console.log('[DEBUG] ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ์—…๋ฐ์ดํŠธ ์‹คํ–‰'); - console.log('[DEBUG] ์„œ๋ฒ„ ์ƒํƒœ๋กœ ์—…๋ฐ์ดํŠธ:', currentStatus); - + dlog('[DEBUG] ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ์—…๋ฐ์ดํŠธ ์‹คํ–‰'); + dlog('[DEBUG] ์„œ๋ฒ„ ์ƒํƒœ๋กœ ์—…๋ฐ์ดํŠธ:', currentStatus); + setCheckboxStates(currentStatus); - + // ์ „์ฒด ์„ ํƒ ์ƒํƒœ๋„ ์—…๋ฐ์ดํŠธ - const allChecked = Object.values(currentStatus).every(state => state); - console.log('[DEBUG] ์ „์ฒด ์„ ํƒ ์ƒํƒœ:', allChecked); + const allChecked = Object.values(currentStatus).every((state) => state); + dlog('[DEBUG] ์ „์ฒด ์„ ํƒ ์ƒํƒœ:', allChecked); setIsAllChecked(allChecked); } else { - console.log('[DEBUG] ํŒŒ์‹ฑ๋œ ์ƒํƒœ๊ฐ€ ๋น„์–ด์žˆ์Œ - ์—…๋ฐ์ดํŠธ ๊ฑด๋„ˆ๋›ฐ๊ธฐ'); + dlog('[DEBUG] ํŒŒ์‹ฑ๋œ ์ƒํƒœ๊ฐ€ ๋น„์–ด์žˆ์Œ - ์—…๋ฐ์ดํŠธ ๊ฑด๋„ˆ๋›ฐ๊ธฐ'); } } else { - console.log('[DEBUG] ์กฐ๊ฑด ๋ถˆ๋งŒ์กฑ - ์—…๋ฐ์ดํŠธ ๊ฑด๋„ˆ๋›ฐ๊ธฐ'); + dlog('[DEBUG] ์กฐ๊ฑด ๋ถˆ๋งŒ์กฑ - ์—…๋ฐ์ดํŠธ ๊ฑด๋„ˆ๋›ฐ๊ธฐ'); } }, [myPageTermsData, myPageOptionalTermsData, isModalMode, parseCurrentTermsStatus]); // ๋ฉ”๋ชจ์ด์ œ์ด์…˜๋œ ํ•ธ๋“ค๋Ÿฌ๋“ค - const handleCheckboxToggle = useCallback((type) => ({ selected }) => { - console.log(`[CHECKBOX-CLICK] ${type} ์ฒดํฌ๋ฐ•์Šค ํด๋ฆญ๋จ:`, selected); - console.log(`[CHECKBOX-CLICK] ์ด์ „ ์ƒํƒœ:`, checkboxStates[type]); - - setCheckboxStates(prev => { - const newStates = { - ...prev, - [type]: selected - }; - console.log(`[CHECKBOX-CLICK] ์ƒˆ๋กœ์šด ์ „์ฒด ์ƒํƒœ:`, newStates); - - const allChecked = Object.values(newStates).every(state => state); - console.log(`[CHECKBOX-CLICK] ์ „์ฒด ์„ ํƒ ์—ฌ๋ถ€:`, allChecked); - setIsAllChecked(allChecked); - return newStates; - }); - }, []); + const handleCheckboxToggle = useCallback( + (type) => + ({ selected }) => { + dlog(`[CHECKBOX-CLICK] ${type} ์ฒดํฌ๋ฐ•์Šค ํด๋ฆญ๋จ:`, selected); + dlog(`[CHECKBOX-CLICK] ์ด์ „ ์ƒํƒœ:`, checkboxStates[type]); + + setCheckboxStates((prev) => { + const newStates = { + ...prev, + [type]: selected, + }; + dlog(`[CHECKBOX-CLICK] ์ƒˆ๋กœ์šด ์ „์ฒด ์ƒํƒœ:`, newStates); + + const allChecked = Object.values(newStates).every((state) => state); + dlog(`[CHECKBOX-CLICK] ์ „์ฒด ์„ ํƒ ์—ฌ๋ถ€:`, allChecked); + setIsAllChecked(allChecked); + return newStates; + }); + }, + [] + ); // ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ๋ฅผ ์ง์ ‘ ํ† ๊ธ€ํ•˜๋Š” ํ•จ์ˆ˜ ์ถ”๊ฐ€ const toggleCheckboxDirectly = useCallback((type) => { - setCheckboxStates(prev => { + setCheckboxStates((prev) => { const newStates = { ...prev, - [type]: !prev[type] // ํ˜„์žฌ ์ƒํƒœ ๋ฐ˜์ „ + [type]: !prev[type], // ํ˜„์žฌ ์ƒํƒœ ๋ฐ˜์ „ }; - const allChecked = Object.values(newStates).every(state => state); + const allChecked = Object.values(newStates).every((state) => state); setIsAllChecked(allChecked); return newStates; }); }, []); - const handleSelectAllToggle = useCallback(({ selected }) => { - console.log(`[SELECT-ALL-CLICK] ์ „์ฒด ์„ ํƒ ํด๋ฆญ๋จ:`, selected); - console.log(`[SELECT-ALL-CLICK] ์ด์ „ isAllChecked:`, isAllChecked); - - setIsAllChecked(selected); - setCheckboxStates(prev => { - const newStates = Object.keys(prev).reduce((acc, key) => ({ - ...acc, - [key]: selected - }), {}); - console.log(`[SELECT-ALL-CLICK] ์ƒˆ๋กœ์šด ์ „์ฒด ์ƒํƒœ:`, newStates); - return newStates; - }); - }, [isAllChecked]); + const handleSelectAllToggle = useCallback( + ({ selected }) => { + dlog(`[SELECT-ALL-CLICK] ์ „์ฒด ์„ ํƒ ํด๋ฆญ๋จ:`, selected); + dlog(`[SELECT-ALL-CLICK] ์ด์ „ isAllChecked:`, isAllChecked); + + setIsAllChecked(selected); + setCheckboxStates((prev) => { + const newStates = Object.keys(prev).reduce( + (acc, key) => ({ + ...acc, + [key]: selected, + }), + {} + ); + dlog(`[SELECT-ALL-CLICK] ์ƒˆ๋กœ์šด ์ „์ฒด ์ƒํƒœ:`, newStates); + return newStates; + }); + }, + [isAllChecked] + ); // ์•ฝ๊ด€ ๋‚ด์šฉ ๋ณด๊ธฐ ํ•ธ๋“ค๋Ÿฌ - const handleTermsView = useCallback((type) => (event) => { - try { - console.log('๐Ÿ” handleTermsView ๋””๋ฒ„๊น…:'); - console.log(' - type:', type); - console.log(' - termsData (์•ฝ๊ด€๋‚ด์šฉ):', termsData); - console.log(' - myPageTermsData (๋™์˜์ƒํƒœ):', myPageTermsData); - console.log(' - myPageOptionalTermsData (์„ ํƒ์•ฝ๊ด€ ๋™์˜์ƒํƒœ):', myPageOptionalTermsData); - - // ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ - if (event) { - event.preventDefault(); - event.stopPropagation(); - } - - const termsId = TERMS_TPCD_MAP[type]; - console.log(' - ์ฐพ๋Š” termsId:', termsId); - - // โœ… 1๋‹จ๊ณ„: termsData(home)์—์„œ ์•ฝ๊ด€ ๋‚ด์šฉ ์šฐ์„  ๊ฒ€์ƒ‰ - let foundTerms = findTermsInHomeData(termsData, termsId, type); - - // โœ… 2๋‹จ๊ณ„: ์—†์œผ๋ฉด myPage ๋ฐ์ดํ„ฐ์—์„œ ๊ฒ€์ƒ‰ (fallback) - if (!foundTerms) { - foundTerms = findTermsInMyPageData(myPageTermsData, myPageOptionalTermsData, termsId, type); - } - - if (foundTerms) { - console.log('โœ… ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ๋ฐœ๊ฒฌ:', foundTerms); - - // โœ… ๋‹ค์–‘ํ•œ ํ•„๋“œ๋ช…์œผ๋กœ ์•ฝ๊ด€ ๋‚ด์šฉ ์ถ”์ถœ ์‹œ๋„ - const termsContent = foundTerms.trmsCntt || - foundTerms.content || - foundTerms.trmsContent || - foundTerms.text || - foundTerms.cntt || - ''; - - const termsTitle = foundTerms.trmsNm || - foundTerms.title || - foundTerms.name || - TERMS_DISPLAY_NAMES[type] || - ''; - - console.log('๐Ÿ“ ์ถ”์ถœ๋œ ์•ฝ๊ด€ ๋‚ด์šฉ ๊ธธ์ด:', termsContent.length); - console.log('๐Ÿ“ ์ถ”์ถœ๋œ ์•ฝ๊ด€ ์ œ๋ชฉ:', termsTitle); - - if (!termsContent) { - console.warn('โš ๏ธ ์•ฝ๊ด€ ๋‚ด์šฉ์ด ๋น„์–ด์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํ•„๋“œ๋“ค:'); - console.warn(' - foundTerms ๊ฐ์ฒด์˜ ๋ชจ๋“  ํ‚ค:', Object.keys(foundTerms)); - - // ๋””๋ฒ„๊น…์„ ์œ„ํ•ด ๋ชจ๋“  ํ•„๋“œ ์ถœ๋ ฅ - Object.entries(foundTerms).forEach(([key, value]) => { - if (typeof value === 'string' && value.length > 50) { - console.warn(` - ${key}: ${value.substring(0, 100)}...`); - } - }); + const handleTermsView = useCallback( + (type) => (event) => { + try { + dlog('๐Ÿ” handleTermsView ๋””๋ฒ„๊น…:'); + dlog(' - type:', type); + dlog(' - termsData (์•ฝ๊ด€๋‚ด์šฉ):', termsData); + dlog(' - myPageTermsData (๋™์˜์ƒํƒœ):', myPageTermsData); + dlog(' - myPageOptionalTermsData (์„ ํƒ์•ฝ๊ด€ ๋™์˜์ƒํƒœ):', myPageOptionalTermsData); + + // ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ + if (event) { + event.preventDefault(); + event.stopPropagation(); } - - // โœ… TermsPopup์— ์ „๋‹ฌํ•  ๋ฐ์ดํ„ฐ ๊ฐ์ฒด ์ƒ์„ฑ - setCurrentTermsData({ - title: termsTitle, - content: termsContent - }); - setCurrentTermsType(type); // ํ˜„์žฌ ์•ฝ๊ด€ ํƒ€์ž… ์ €์žฅ - setShowTermsPopup(true); - - console.log('โœ… ํŒ์—… ํ‘œ์‹œ ์š”์ฒญ ์™„๋ฃŒ'); - console.log(' - ์ „๋‹ฌ๋œ text ๊ธธ์ด:', termsContent.length); - console.log(' - ์ „๋‹ฌ๋œ title:', termsTitle); - } else { - // ๋ชจ๋“  ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ๋กœ๊น… - console.error('โŒ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Œ'); - console.error('๐Ÿ“Š ์ „์ฒด ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ๋ถ„์„:'); - console.error(' - termsData:', JSON.stringify(termsData, null, 2)); - console.error(' - myPageTermsData:', JSON.stringify(myPageTermsData, null, 2)); - console.error(' - myPageOptionalTermsData:', JSON.stringify(myPageOptionalTermsData, null, 2)); - console.error(' - TERMS_TPCD_MAP:', TERMS_TPCD_MAP); - console.error(' - ์ฐพ๋Š” type:', type, '-> termsId:', TERMS_TPCD_MAP[type]); + + const termsId = TERMS_TPCD_MAP[type]; + dlog(' - ์ฐพ๋Š” termsId:', termsId); + + // โœ… 1๋‹จ๊ณ„: termsData(home)์—์„œ ์•ฝ๊ด€ ๋‚ด์šฉ ์šฐ์„  ๊ฒ€์ƒ‰ + let foundTerms = findTermsInHomeData(termsData, termsId, type); + + // โœ… 2๋‹จ๊ณ„: ์—†์œผ๋ฉด myPage ๋ฐ์ดํ„ฐ์—์„œ ๊ฒ€์ƒ‰ (fallback) + if (!foundTerms) { + foundTerms = findTermsInMyPageData( + myPageTermsData, + myPageOptionalTermsData, + termsId, + type + ); + } + + if (foundTerms) { + dlog('โœ… ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ๋ฐœ๊ฒฌ:', foundTerms); + + // โœ… ๋‹ค์–‘ํ•œ ํ•„๋“œ๋ช…์œผ๋กœ ์•ฝ๊ด€ ๋‚ด์šฉ ์ถ”์ถœ ์‹œ๋„ + const termsContent = + foundTerms.trmsCntt || + foundTerms.content || + foundTerms.trmsContent || + foundTerms.text || + foundTerms.cntt || + ''; + + const termsTitle = + foundTerms.trmsNm || + foundTerms.title || + foundTerms.name || + TERMS_DISPLAY_NAMES[type] || + ''; + + dlog('๐Ÿ“ ์ถ”์ถœ๋œ ์•ฝ๊ด€ ๋‚ด์šฉ ๊ธธ์ด:', termsContent.length); + dlog('๐Ÿ“ ์ถ”์ถœ๋œ ์•ฝ๊ด€ ์ œ๋ชฉ:', termsTitle); + + if (!termsContent) { + dwarn('โš ๏ธ ์•ฝ๊ด€ ๋‚ด์šฉ์ด ๋น„์–ด์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํ•„๋“œ๋“ค:'); + dwarn(' - foundTerms ๊ฐ์ฒด์˜ ๋ชจ๋“  ํ‚ค:', Object.keys(foundTerms)); + + // ๋””๋ฒ„๊น…์„ ์œ„ํ•ด ๋ชจ๋“  ํ•„๋“œ ์ถœ๋ ฅ + Object.entries(foundTerms).forEach(([key, value]) => { + if (typeof value === 'string' && value.length > 50) { + dwarn(` - ${key}: ${value.substring(0, 100)}...`); + } + }); + } + + // โœ… TermsPopup์— ์ „๋‹ฌํ•  ๋ฐ์ดํ„ฐ ๊ฐ์ฒด ์ƒ์„ฑ + setCurrentTermsData({ + title: termsTitle, + content: termsContent, + }); + setCurrentTermsType(type); // ํ˜„์žฌ ์•ฝ๊ด€ ํƒ€์ž… ์ €์žฅ + setShowTermsPopup(true); + + dlog('โœ… ํŒ์—… ํ‘œ์‹œ ์š”์ฒญ ์™„๋ฃŒ'); + dlog(' - ์ „๋‹ฌ๋œ text ๊ธธ์ด:', termsContent.length); + dlog(' - ์ „๋‹ฌ๋œ title:', termsTitle); + } else { + // ๋ชจ๋“  ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ๋กœ๊น… + derror('โŒ ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Œ'); + derror('๐Ÿ“Š ์ „์ฒด ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ๋ถ„์„:'); + derror(' - termsData:', JSON.stringify(termsData, null, 2)); + derror(' - myPageTermsData:', JSON.stringify(myPageTermsData, null, 2)); + derror(' - myPageOptionalTermsData:', JSON.stringify(myPageOptionalTermsData, null, 2)); + derror(' - TERMS_TPCD_MAP:', TERMS_TPCD_MAP); + derror(' - ์ฐพ๋Š” type:', type, '-> termsId:', TERMS_TPCD_MAP[type]); + } + } catch (error) { + derror('โŒ handleTermsView ์˜ค๋ฅ˜:', error); } - - } catch (error) { - console.error('โŒ handleTermsView ์˜ค๋ฅ˜:', error); - } - }, [termsData, myPageTermsData, myPageOptionalTermsData]); + }, + [termsData, myPageTermsData, myPageOptionalTermsData] + ); // ์•ฝ๊ด€ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์•ฝ๊ด€ ๋‚ด์šฉ๋งŒ ๋ณด์—ฌ์ฃผ๋Š” ํ•ธ๋“ค๋Ÿฌ (์ฒดํฌ๋ฐ•์Šค ํ† ๊ธ€ ์ œ๊ฑฐ) - const handleTermButtonClick = useCallback((type) => (event) => { - // ์•ฝ๊ด€ ๋‚ด์šฉ ๋ณด๊ธฐ๋งŒ ์ˆ˜ํ–‰ (์ฒดํฌ๋ฐ•์Šค ํ† ๊ธ€์€ ํŒ์—…์—์„œ Agree ํด๋ฆญ ์‹œ์—๋งŒ) - handleTermsView(type)(event); - }, [handleTermsView]); + const handleTermButtonClick = useCallback( + (type) => (event) => { + // ์•ฝ๊ด€ ๋‚ด์šฉ ๋ณด๊ธฐ๋งŒ ์ˆ˜ํ–‰ (์ฒดํฌ๋ฐ•์Šค ํ† ๊ธ€์€ ํŒ์—…์—์„œ Agree ํด๋ฆญ ์‹œ์—๋งŒ) + handleTermsView(type)(event); + }, + [handleTermsView] + ); /** * ํŒ์—… ๋‹ซ๊ธฐ ํ•ธ๋“ค๋Ÿฌ */ const handleClosePopup = useCallback(() => { - console.log('[TermsOfOptional] handleClosePopup triggered (e.g., OK on Terms Detail or Alert)'); + dlog('[TermsOfOptional] handleClosePopup triggered (e.g., OK on Terms Detail or Alert)'); dispatch(setHidePopup()); }, [dispatch]); @@ -455,152 +499,158 @@ export default function TermsOfOptional({ * ์•ฑ ์ข…๋ฃŒ ํ•ธ๋“ค๋Ÿฌ (IntroPanel๊ณผ ๋™์ผ) */ const onExit = useCallback(() => { - console.log('[TermsOfOptional] onExit (Yes button on Exit Popup) triggered - ์•ฝ๊ด€ ์ฒ ํšŒ ์ฒ˜๋ฆฌ ์‹œ์ž‘'); + dlog('[TermsOfOptional] onExit (Yes button on Exit Popup) triggered - ์•ฝ๊ด€ ์ฒ ํšŒ ์ฒ˜๋ฆฌ ์‹œ์ž‘'); dispatch(setHidePopup()); - - console.log('[TermsOfOptional] ํ˜„์žฌ ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ:', checkboxStates); - console.log('[TermsOfOptional] 3๊ฐœ ์•ฝ๊ด€ ID ๋งคํ•‘:', TERMS_TPCD_MAP); - + + dlog('[TermsOfOptional] ํ˜„์žฌ ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ:', checkboxStates); + dlog('[TermsOfOptional] 3๊ฐœ ์•ฝ๊ด€ ID ๋งคํ•‘:', TERMS_TPCD_MAP); + // ํ˜„์žฌ ๋™์˜๋œ ์•ฝ๊ด€๋“ค์„ ํ™•์ธ (3๊ฐœ ์•ฝ๊ด€ ๋ชจ๋‘ ๊ณ ๋ ค) const agreedTerms = Object.entries(checkboxStates) .filter(([type, checked]) => { - console.log(`[TermsOfOptional] ์•ฝ๊ด€ ${type}: ${checked ? '๋™์˜๋จ' : '๋™์˜์•ˆ๋จ'}`); + dlog(`[TermsOfOptional] ์•ฝ๊ด€ ${type}: ${checked ? '๋™์˜๋จ' : '๋™์˜์•ˆ๋จ'}`); return checked; }) .map(([type]) => { const termId = TERMS_ID_MAP[type]; - console.log(`[TermsOfOptional] ${type} -> ${termId}`); + dlog(`[TermsOfOptional] ${type} -> ${termId}`); return termId; }) .filter(Boolean); // undefined ๊ฐ’ ์ œ๊ฑฐ - - console.log('๐Ÿšซ ์ฒ ํšŒํ•  ์•ฝ๊ด€๋“ค (3๊ฐœ ์•ฝ๊ด€ ์ฒ˜๋ฆฌ):', agreedTerms); - console.log('๐Ÿšซ ์ฒ ํšŒํ•  ์•ฝ๊ด€ ๊ฐœ์ˆ˜:', agreedTerms.length); + + dlog('๐Ÿšซ ์ฒ ํšŒํ•  ์•ฝ๊ด€๋“ค (3๊ฐœ ์•ฝ๊ด€ ์ฒ˜๋ฆฌ):', agreedTerms); + dlog('๐Ÿšซ ์ฒ ํšŒํ•  ์•ฝ๊ด€ ๊ฐœ์ˆ˜:', agreedTerms.length); if (agreedTerms.length > 0) { // ๋™์˜๋œ ์•ฝ๊ด€์ด ์žˆ์œผ๋ฉด ์ฒ ํšŒ API ํ˜ธ์ถœ const withdrawParams = { - trmsTpCdList: agreedTerms + trmsTpCdList: agreedTerms, }; - - console.log('๐Ÿšซ ์•ฝ๊ด€ ์ฒ ํšŒ API ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ:', withdrawParams); - dispatch(setMyTermsWithdraw(withdrawParams, (result) => { - console.log('๐Ÿšซ ์•ฝ๊ด€ ์ฒ ํšŒ ์™„๋ฃŒ:', result); - - if (result && result.retCode === "000") { - console.log('โœ… ์•ฝ๊ด€ ์ฒ ํšŒ ์„ฑ๊ณต'); - // ์ฒ ํšŒ ์„ฑ๊ณต ํ›„ ์•ฑ ์ข…๋ฃŒ - dispatch(setExitApp()); - } else { - console.error('โŒ ์•ฝ๊ด€ ์ฒ ํšŒ ์‹คํŒจ:', result); - // ์‹คํŒจ ์‹œ ์—๋Ÿฌ ํŒ์—… ํ‘œ์‹œ - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: $L("Error"), - text: $L("์•ฝ๊ด€ ์ฒ ํšŒ ์ค‘ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ์‹œ๋„ํ•ด์ฃผ์„ธ์š”."), - button1Text: $L("ํ™•์ธ") - })); - } - })); + + dlog('๐Ÿšซ ์•ฝ๊ด€ ์ฒ ํšŒ API ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ:', withdrawParams); + dispatch( + setMyTermsWithdraw(withdrawParams, (result) => { + dlog('๐Ÿšซ ์•ฝ๊ด€ ์ฒ ํšŒ ์™„๋ฃŒ:', result); + + if (result && result.retCode === '000') { + dlog('โœ… ์•ฝ๊ด€ ์ฒ ํšŒ ์„ฑ๊ณต'); + // ์ฒ ํšŒ ์„ฑ๊ณต ํ›„ ์•ฑ ์ข…๋ฃŒ + dispatch(setExitApp()); + } else { + derror('โŒ ์•ฝ๊ด€ ์ฒ ํšŒ ์‹คํŒจ:', result); + // ์‹คํŒจ ์‹œ ์—๋Ÿฌ ํŒ์—… ํ‘œ์‹œ + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: $L('Error'), + text: $L('์•ฝ๊ด€ ์ฒ ํšŒ ์ค‘ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ์‹œ๋„ํ•ด์ฃผ์„ธ์š”.'), + button1Text: $L('ํ™•์ธ'), + }) + ); + } + }) + ); } else { // ๋™์˜๋œ ์•ฝ๊ด€์ด ์—†์œผ๋ฉด ๋ฐ”๋กœ ์•ฑ ์ข…๋ฃŒ - console.log('๐Ÿšซ ๋™์˜๋œ ์•ฝ๊ด€์ด ์—†์–ด ๋ฐ”๋กœ ์•ฑ ์ข…๋ฃŒ'); + dlog('๐Ÿšซ ๋™์˜๋œ ์•ฝ๊ด€์ด ์—†์–ด ๋ฐ”๋กœ ์•ฑ ์ข…๋ฃŒ'); dispatch(setExitApp()); } }, [dispatch, checkboxStates]); // TermsOfService์™€ ๋™์ผํ•œ onClose ํ•ธ๋“ค๋Ÿฌ (ํŒ์—… ์ทจ์†Œ) const onClose = useCallback(() => { - console.log('[TermsOfOptional] onClose (No button on Exit Popup) triggered'); + dlog('[TermsOfOptional] onClose (No button on Exit Popup) triggered'); dispatch(setHidePopup()); }, [dispatch]); const handleBack = useCallback(() => { if (isModalMode && closeModalCallback) { - console.log('[TermsOfOptional] Modal mode back pressed, calling closeModalCallback.'); + dlog('[TermsOfOptional] Modal mode back pressed, calling closeModalCallback.'); closeModalCallback(); // App.js์— ์ •์˜๋œ ์ฝœ๋ฐฑ ํ˜ธ์ถœ (์˜ˆ: ์•ฑ ์ข…๋ฃŒ ํŒ์—…) } else if (!isModalMode && panelInfo && panelInfo.name) { - console.log('[TermsOfOptional] Panel mode back pressed, popping panel:', panelInfo.name); + dlog('[TermsOfOptional] Panel mode back pressed, popping panel:', panelInfo.name); dispatch(popPanel(panelInfo.name)); } else { // ๊ธฐ๋ณธ ๋™์ž‘ ๋˜๋Š” ์ •์˜๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ (์˜ˆ: ์•ฑ ์ข…๋ฃŒ ํŒ์—…) - console.log('[TermsOfOptional] Back pressed with no specific mode, showing exit popup.'); + dlog('[TermsOfOptional] Back pressed with no specific mode, showing exit popup.'); dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup)); } }, [isModalMode, closeModalCallback, dispatch, panelInfo]); const handleTest = () => { // ์•ฝ๊ด€ ๋™์˜ํ•  ํ•ญ๋ชฉ๋“ค (string array) - const termsList = ["TID0000222", "TID0000223", "TID0000232"]; - + const termsList = ['TID0000222', 'TID0000223', 'TID0000232']; + // ๋™์˜ํ•˜์ง€ ์•Š์„ ํ•ญ๋ชฉ๋“ค (๋นˆ ๋ฐฐ์—ด) const notTermsList = []; - + // ์ฝœ๋ฐฑ ํ•จ์ˆ˜ - ์„ฑ๊ณต ์‹œ ์‹คํ–‰๋  ๋กœ์ง const callback = (responseData) => { - console.log("์•ฝ๊ด€ ๋™์˜ ์ฒ˜๋ฆฌ ์™„๋ฃŒ:", responseData); + dlog('์•ฝ๊ด€ ๋™์˜ ์ฒ˜๋ฆฌ ์™„๋ฃŒ:', responseData); // ์—ฌ๊ธฐ์— ์„ฑ๊ณต ํ›„ ์ถ”๊ฐ€ ๋กœ์ง ์ž‘์„ฑ }; - - // Redux ์•ก์…˜ ๋””์ŠคํŒจ์น˜ - dispatch(setMyPageTermsAgree( - { termsList, notTermsList }, - callback - )); - }; + // Redux ์•ก์…˜ ๋””์ŠคํŒจ์น˜ + dispatch(setMyPageTermsAgree({ termsList, notTermsList }, callback)); + }; const handleAgree = useCallback(() => { // ํ•„์ˆ˜ ์•ฝ๊ด€ ๊ฒ€์ฆ - const hasRequiredTerms = checkboxStates[TERMS_TYPE.TERMS_CONDITIONS] && - checkboxStates[TERMS_TYPE.PRIVACY_POLICY]; - - if (!hasRequiredTerms) { - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: $L("Notice"), - text: $L("Please agree to all required terms."), - button1Text: $L("OK") - })); + const hasRequiredTerms = + checkboxStates[TERMS_TYPE.TERMS_CONDITIONS] && checkboxStates[TERMS_TYPE.PRIVACY_POLICY]; + + if (!hasRequiredTerms) { + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: $L('Notice'), + text: $L('Please agree to all required terms.'), + button1Text: $L('OK'), + }) + ); return; } - + // agreeTerms ๋ฐฐ์—ด ๊ตฌ์„ฑ const agreeTerms = []; if (checkboxStates[TERMS_TYPE.TERMS_CONDITIONS]) { - agreeTerms.push("TID0000222"); + agreeTerms.push('TID0000222'); } if (checkboxStates[TERMS_TYPE.PRIVACY_POLICY]) { - agreeTerms.push("TID0000223"); + agreeTerms.push('TID0000223'); } if (checkboxStates[TERMS_TYPE.OPTIONAL_TERMS]) { - agreeTerms.push("TID0000232"); + agreeTerms.push('TID0000232'); } - - console.log('์ตœ์ข… ์ „์†ก๋  agreeTerms:', agreeTerms); - + + dlog('์ตœ์ข… ์ „์†ก๋  agreeTerms:', agreeTerms); + // โœ… ์ฝœ๋ฐฑ ์—†์ด registerDevice ํ˜ธ์ถœ - dispatch(registerDevice({ - agreeTerms: agreeTerms - })); - + dispatch( + registerDevice({ + agreeTerms: agreeTerms, + }) + ); }, [checkboxStates, dispatch]); - + // โœ… ๋ณ„๋„ useEffect๋กœ deviceState ๋ณ€ํ™” ๊ฐ์ง€ useEffect(() => { - console.log('๐Ÿ“Š deviceState ๋ณ€ํ™” ๊ฐ์ง€:', deviceState); - + dlog('๐Ÿ“Š deviceState ๋ณ€ํ™” ๊ฐ์ง€:', deviceState); + // registerDevice ์„ฑ๊ณต ์‹œ (retCode๊ฐ€ 0 ๋˜๋Š” "000"์ธ ๊ฒฝ์šฐ) - if (deviceState?.regDeviceData && (deviceState.regDeviceData.retCode === 0 || deviceState.regDeviceData.retCode === "000")) { - console.log('โœ… registerDevice ์„ฑ๊ณต ๊ฐ์ง€ - ํŒจ๋„ ๋‹ซ๊ธฐ ์‹œ์ž‘'); - + if ( + deviceState?.regDeviceData && + (deviceState.regDeviceData.retCode === 0 || deviceState.regDeviceData.retCode === '000') + ) { + dlog('โœ… registerDevice ์„ฑ๊ณต ๊ฐ์ง€ - ํŒจ๋„ ๋‹ซ๊ธฐ ์‹œ์ž‘'); + // getAuthenticationCode ์™„๋ฃŒ๊นŒ์ง€ ์ž ์‹œ ๋Œ€๊ธฐ ํ›„ ํŒจ๋„ ๋‹ซ๊ธฐ setTimeout(() => { - console.log('๐Ÿš€ ํŒจ๋„ ๋‹ซ๊ธฐ ์‹คํ–‰'); - + dlog('๐Ÿš€ ํŒจ๋„ ๋‹ซ๊ธฐ ์‹คํ–‰'); + if (isModalMode && closeModalCallback) { - console.log('๐Ÿ“ฑ Modal mode - closeModalCallback ํ˜ธ์ถœ'); + dlog('๐Ÿ“ฑ Modal mode - closeModalCallback ํ˜ธ์ถœ'); closeModalCallback(true); } else { - console.log('๐Ÿ“‹ Panel mode - popPanel ํ˜ธ์ถœ'); + dlog('๐Ÿ“‹ Panel mode - popPanel ํ˜ธ์ถœ'); dispatch(popPanel()); } }, 2000); // 2์ดˆ ๋Œ€๊ธฐ (getAuthenticationCode ์™„๋ฃŒ ๋Œ€๊ธฐ) @@ -608,42 +658,47 @@ export default function TermsOfOptional({ }, [deviceState, isModalMode, closeModalCallback, dispatch]); const handleDoNotAgree = useCallback(() => { - console.log('[TermsOfOptional] Do Not Agree pressed.'); - + dlog('[TermsOfOptional] Do Not Agree pressed.'); + // ๋กœ๊ทธ ์ „์†ก (IntroPanel๊ณผ ๋™์ผ) dispatch(sendLogTerms({ logTpNo: Config.LOG_TP_NO.TERMS.DO_NOT_AGREE })); - + // โœ… TermsOfService์™€ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ์˜ต์…˜ ๊ฐ์ฒด ํฌํ•จ - dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup, { - title: $L(""), - text: ( -
- {$L("Are you sure you want to opt out?")} -
-

- {$L("The service will not be available anymore after opting out.")} -

-
- ), - button1Text: $L("Yes"), - button2Text: $L("No"), - onButton1Press: onExit, - onButton2Press: onClose - })); + dispatch( + setShowPopup(Config.ACTIVE_POPUP.exitPopup, { + title: $L(''), + text: ( +
+ {$L('Are you sure you want to opt out?')} +
+

+ {$L('The service will not be available anymore after opting out.')} +

+
+ ), + button1Text: $L('Yes'), + button2Text: $L('No'), + onButton1Press: onExit, + onButton2Press: onClose, + }) + ); }, [dispatch, onExit, onClose]); useEffect(() => { - console.log('๐Ÿ”„ Redux popup ์ƒํƒœ ๋ณ€ํ™” (commonPopupState):'); - console.log(' - commonPopupState.popupVisible:', commonPopupState.popupVisible); - console.log(' - commonPopupState.activePopup:', commonPopupState.activePopup); - console.log(' - commonPopupState ๊ฐ์ฒด:', commonPopupState); - + dlog('๐Ÿ”„ Redux popup ์ƒํƒœ ๋ณ€ํ™” (commonPopupState):'); + dlog(' - commonPopupState.popupVisible:', commonPopupState.popupVisible); + dlog(' - commonPopupState.activePopup:', commonPopupState.activePopup); + dlog(' - commonPopupState ๊ฐ์ฒด:', commonPopupState); + if (commonPopupState.activePopup === Config.ACTIVE_POPUP.termsPopup) { - console.log('๐Ÿ“‹ ์•ฝ๊ด€ ํŒ์—… ์ƒํƒœ ์ƒ์„ธ (commonPopupState):'); + dlog('๐Ÿ“‹ ์•ฝ๊ด€ ํŒ์—… ์ƒํƒœ ์ƒ์„ธ (commonPopupState):'); if (commonPopupState.text) { - console.log(' - commonPopupState.text ๋ฏธ๋ฆฌ๋ณด๊ธฐ:', commonPopupState.text.substring(0, 200) + '...'); + dlog( + ' - commonPopupState.text ๋ฏธ๋ฆฌ๋ณด๊ธฐ:', + commonPopupState.text.substring(0, 200) + '...' + ); } else { - console.warn('โš ๏ธ commonPopupState.text๊ฐ€ ๋น„์–ด์žˆ์Šต๋‹ˆ๋‹ค!'); + dwarn('โš ๏ธ commonPopupState.text๊ฐ€ ๋น„์–ด์žˆ์Šต๋‹ˆ๋‹ค!'); } } }, [commonPopupState]); @@ -651,13 +706,13 @@ export default function TermsOfOptional({ // ์•ฝ๊ด€ ๋ฐ์ดํ„ฐ ๋กœ๋“œ ์‹œ Spotlight ํ™œ์„ฑํ™” useEffect(() => { if (termsData) { - console.log('termsData loaded:', termsData); - console.log('[SPOTLIGHT] spotlightDisabled๋ฅผ false๋กœ ์„ค์ •'); + dlog('termsData loaded:', termsData); + dlog('[SPOTLIGHT] spotlightDisabled๋ฅผ false๋กœ ์„ค์ •'); setSpotlightDisabled(false); - + // Select All ์ฒดํฌ๋ฐ•์Šค์— ์ดˆ๊ธฐ ํฌ์ปค์Šค ์„ค์ • setTimeout(() => { - console.log('[SPOTLIGHT] checkbox-all์— ํฌ์ปค์Šค ์„ค์ • ์‹œ๋„'); + dlog('[SPOTLIGHT] checkbox-all์— ํฌ์ปค์Šค ์„ค์ • ์‹œ๋„'); Spotlight.set('checkbox-all'); }, 100); } @@ -670,36 +725,40 @@ export default function TermsOfOptional({ Spotlight.set('checkbox-all'); } }, 200); - + return () => clearTimeout(timer); }, [spotlightDisabled]); // ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ๋ณ€๊ฒฝ ์‹œ ๋กœ๊น… ์ถ”๊ฐ€ useEffect(() => { - console.log('[TermsOfOptional] ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ๋ณ€๊ฒฝ๋จ:'); + dlog('[TermsOfOptional] ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ๋ณ€๊ฒฝ๋จ:'); Object.entries(checkboxStates).forEach(([termType, checked]) => { const termId = TERMS_TPCD_MAP[termType]; const isMandatory = isMandatoryTerms(termType); - console.log(` - ${termType} (${termId}) [${isMandatory ? 'ํ•„์ˆ˜' : '์„ ํƒ'}]: ${checked ? 'โœ… ๋™์˜' : 'โŒ ๋น„๋™์˜'}`); + dlog( + ` - ${termType} (${termId}) [${isMandatory ? 'ํ•„์ˆ˜' : '์„ ํƒ'}]: ${checked ? 'โœ… ๋™์˜' : 'โŒ ๋น„๋™์˜'}` + ); }); - - const allChecked = Object.values(checkboxStates).every(state => state); - console.log(` - ์ „์ฒด ์„ ํƒ ์ƒํƒœ: ${allChecked ? 'โœ… ๋ชจ๋‘ ์„ ํƒ๋จ' : 'โŒ ์ผ๋ถ€ ๋˜๋Š” ๋ฏธ์„ ํƒ'}`); + + const allChecked = Object.values(checkboxStates).every((state) => state); + dlog(` - ์ „์ฒด ์„ ํƒ ์ƒํƒœ: ${allChecked ? 'โœ… ๋ชจ๋‘ ์„ ํƒ๋จ' : 'โŒ ์ผ๋ถ€ ๋˜๋Š” ๋ฏธ์„ ํƒ'}`); }, [checkboxStates]); // API ์‘๋‹ต ์ฒ˜๋ฆฌ - ์•ฝ๊ด€ ์ฒ ํšŒ ๊ฒฐ๊ณผ useEffect(() => { - if (setMyTermsWithdrawResult?.data && setMyTermsWithdrawResult?.retCode === "000") { - console.log('โœ… ์•ฝ๊ด€ ์ฒ ํšŒ API ์‘๋‹ต ์„ฑ๊ณต:', setMyTermsWithdrawResult); + if (setMyTermsWithdrawResult?.data && setMyTermsWithdrawResult?.retCode === '000') { + dlog('โœ… ์•ฝ๊ด€ ์ฒ ํšŒ API ์‘๋‹ต ์„ฑ๊ณต:', setMyTermsWithdrawResult); // ์ฒ ํšŒ ์„ฑ๊ณต ํ›„ ์ถ”๊ฐ€ ์ฒ˜๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด ์—ฌ๊ธฐ์„œ ๊ตฌํ˜„ } else if (setMyTermsWithdrawResult?.error) { - console.log('โŒ ์•ฝ๊ด€ ์ฒ ํšŒ API ์‘๋‹ต ์‹คํŒจ:', setMyTermsWithdrawResult.error); + derror('โŒ ์•ฝ๊ด€ ์ฒ ํšŒ API ์‘๋‹ต ์‹คํŒจ:', setMyTermsWithdrawResult.error); // ์‹คํŒจ ์‹œ ์—๋Ÿฌ ์ฒ˜๋ฆฌ - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: $L("Error"), - text: $L("์•ฝ๊ด€ ์ฒ ํšŒ ์ฒ˜๋ฆฌ ์ค‘ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค."), - button1Text: $L("ํ™•์ธ") - })); + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: $L('Error'), + text: $L('์•ฝ๊ด€ ์ฒ ํšŒ ์ฒ˜๋ฆฌ ์ค‘ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.'), + button1Text: $L('ํ™•์ธ'), + }) + ); } }, [setMyTermsWithdrawResult, dispatch]); @@ -718,12 +777,12 @@ export default function TermsOfOptional({ return true; } return false; - } + }, ]; - + for (const attempt of focusAttempts) { if (attempt()) { - console.log('ํฌ์ปค์Šค ์„ค์ • ์„ฑ๊ณต'); + dlog('ํฌ์ปค์Šค ์„ค์ • ์„ฑ๊ณต'); break; } } @@ -733,188 +792,207 @@ export default function TermsOfOptional({ } }, [activePopup, popupVisible]); -// API ํ…Œ์ŠคํŠธ์šฉ ํ•จ์ˆ˜ - ๋‹จ์ˆœํ™” ๋ฒ„์ „ -const handleAllAgreeTestSimple = useCallback(() => { - console.log('๐Ÿงช API ํ…Œ์ŠคํŠธ: ๋ชจ๋“  ์•ฝ๊ด€ ๋™์˜ ์ฒ˜๋ฆฌ ์‹œ์ž‘'); - - // 1. ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ์—…๋ฐ์ดํŠธ - const allAgreedStates = { - [TERMS_TYPE.TERMS_CONDITIONS]: true, - [TERMS_TYPE.PRIVACY_POLICY]: true, - [TERMS_TYPE.OPTIONAL_TERMS]: true - }; - - setCheckboxStates(allAgreedStates); - setIsAllChecked(true); - - // 2. API ํŒŒ๋ผ๋ฏธํ„ฐ ์„ค์ • - const termsList = [ - "TID0000222", // ์ด์šฉ์•ฝ๊ด€ (ํ•„์ˆ˜) - ]; - - const notTermsList = [ - "TID0000223", // ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ (ํ•„์ˆ˜) - "TID0000232" // ์„ ํƒ์•ฝ๊ด€ - ]; // ๋น„๋™์˜ ์•ฝ๊ด€ ์—†์Œ - - console.log('๐Ÿ“ค API ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ:', { termsList, notTermsList }); - - // 3. ์„ฑ๊ณต ์ฝœ๋ฐฑ - const onSuccess = (response) => { - console.log('โœ… API ์„ฑ๊ณต:', response); - - if (response?.retCode === 0) { - // MyPage ๋ฐ์ดํ„ฐ ์ƒˆ๋กœ๊ณ ์นจ - dispatch(getMyPageTerms()); - dispatch(getMyPageOptionalTerms()); - - // ์„ฑ๊ณต ์•Œ๋ฆผ - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: "ํ…Œ์ŠคํŠธ ์„ฑ๊ณต", - text: "์•ฝ๊ด€ ๋™์˜๊ฐ€ ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.", - button1Text: "ํ™•์ธ" - })); - } else { - console.error('โŒ ์„œ๋ฒ„ ์˜ค๋ฅ˜:', response); - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: "์„œ๋ฒ„ ์˜ค๋ฅ˜", - text: `์˜ค๋ฅ˜: ${response?.retMsg || '์•Œ ์ˆ˜ ์—†๋Š” ์˜ค๋ฅ˜'}`, - button1Text: "ํ™•์ธ" - })); - } - }; - - // 4. API ํ˜ธ์ถœ - dispatch(setMyPageTermsAgree({ termsList, notTermsList }, onSuccess)); - -}, [dispatch, setCheckboxStates, setIsAllChecked]); - + // API ํ…Œ์ŠคํŠธ์šฉ ํ•จ์ˆ˜ - ๋‹จ์ˆœํ™” ๋ฒ„์ „ + const handleAllAgreeTestSimple = useCallback(() => { + dlog('๐Ÿงช API ํ…Œ์ŠคํŠธ: ๋ชจ๋“  ์•ฝ๊ด€ ๋™์˜ ์ฒ˜๋ฆฌ ์‹œ์ž‘'); + + // 1. ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ์—…๋ฐ์ดํŠธ + const allAgreedStates = { + [TERMS_TYPE.TERMS_CONDITIONS]: true, + [TERMS_TYPE.PRIVACY_POLICY]: true, + [TERMS_TYPE.OPTIONAL_TERMS]: true, + }; + + setCheckboxStates(allAgreedStates); + setIsAllChecked(true); + + // 2. API ํŒŒ๋ผ๋ฏธํ„ฐ ์„ค์ • + const termsList = [ + 'TID0000222', // ์ด์šฉ์•ฝ๊ด€ (ํ•„์ˆ˜) + ]; + + const notTermsList = [ + 'TID0000223', // ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ (ํ•„์ˆ˜) + 'TID0000232', // ์„ ํƒ์•ฝ๊ด€ + ]; // ๋น„๋™์˜ ์•ฝ๊ด€ ์—†์Œ + + dlog('๐Ÿ“ค API ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ:', { termsList, notTermsList }); + + // 3. ์„ฑ๊ณต ์ฝœ๋ฐฑ + const onSuccess = (response) => { + dlog('โœ… API ์„ฑ๊ณต:', response); + + if (response?.retCode === 0) { + // MyPage ๋ฐ์ดํ„ฐ ์ƒˆ๋กœ๊ณ ์นจ + dispatch(getMyPageTerms()); + dispatch(getMyPageOptionalTerms()); + + // ์„ฑ๊ณต ์•Œ๋ฆผ + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: 'ํ…Œ์ŠคํŠธ ์„ฑ๊ณต', + text: '์•ฝ๊ด€ ๋™์˜๊ฐ€ ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.', + button1Text: 'ํ™•์ธ', + }) + ); + } else { + derror('โŒ ์„œ๋ฒ„ ์˜ค๋ฅ˜:', response); + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: '์„œ๋ฒ„ ์˜ค๋ฅ˜', + text: `์˜ค๋ฅ˜: ${response?.retMsg || '์•Œ ์ˆ˜ ์—†๋Š” ์˜ค๋ฅ˜'}`, + button1Text: 'ํ™•์ธ', + }) + ); + } + }; + + // 4. API ํ˜ธ์ถœ + dispatch(setMyPageTermsAgree({ termsList, notTermsList }, onSuccess)); + }, [dispatch, setCheckboxStates, setIsAllChecked]); + // API ํ…Œ์ŠคํŠธ์šฉ ํ•จ์ˆ˜ - setMyPageTermsAgree ์‚ฌ์šฉํ•˜๋„๋ก ์ˆ˜์ • -const handleAllAgreeTest = useCallback(() => { - console.log('๐Ÿงช [API-TEST] registerDevice ํ…Œ์ŠคํŠธ ์‹œ์ž‘'); - - // 1. ๋ชจ๋“  ์ฒดํฌ๋ฐ•์Šค๋ฅผ true๋กœ ๊ฐ•์ œ ์„ค์ • (๊ธฐ์กด ๋กœ์ง ์œ ์ง€) - const allAgreedStates = { - [TERMS_TYPE.TERMS_CONDITIONS]: true, - [TERMS_TYPE.PRIVACY_POLICY]: true, - [TERMS_TYPE.OPTIONAL_TERMS]: true - }; - - setCheckboxStates(allAgreedStates); - setIsAllChecked(true); - - // 2. ๋™์˜ํ•œ ์•ฝ๊ด€ ID ๋ฐฐ์—ด ์ƒ์„ฑ (๊ธฐ์กด ๋กœ์ง ์œ ์ง€) - const agreedTerms = [ - "TID0000222", // TERMS_CONDITIONS (ํ•„์ˆ˜) - "TID0000223", // PRIVACY_POLICY (ํ•„์ˆ˜) - "TID0000232" // OPTIONAL_TERMS (์„ ํƒ) - ]; + const handleAllAgreeTest = useCallback(() => { + dlog('๐Ÿงช [API-TEST] registerDevice ํ…Œ์ŠคํŠธ ์‹œ์ž‘'); - console.log('๐Ÿ”ฅ [API-TEST] registerDevice ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ:', agreedTerms); - - // 3. โœ… registerDevice๋กœ ๊ต์ฒด - const onTestSuccess = (response) => { - console.log('๐Ÿงช [API-TEST] โœ… registerDevice ์„ฑ๊ณต ์‘๋‹ต:', response); - - if (response && (response.retCode === "000" || response.retCode === 0)) { - console.log('๐Ÿงช [API-TEST] โœ… ๋””๋ฐ”์ด์Šค ๋“ฑ๋ก ์„ฑ๊ณต!'); - - // MyPage ๋ฐ์ดํ„ฐ ์ƒˆ๋กœ๊ณ ์นจ (ํ•„์š”์‹œ) - dispatch(getMyPageTerms()); - dispatch(getMyPageOptionalTerms()); - - // ์„ฑ๊ณต ์•Œ๋ฆผ ํŒ์—… - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: "๐Ÿงช registerDevice ํ…Œ์ŠคํŠธ ์„ฑ๊ณต", - text: `๋””๋ฐ”์ด์Šค ๋“ฑ๋ก ์„ฑ๊ณต!\n์‘๋‹ต: ${response.retMsg || 'OK'}\n๋™์˜ํ•œ ์•ฝ๊ด€: ${agreedTerms.length}๊ฐœ`, - button1Text: "ํ™•์ธ" - })); - - } else { - console.error('๐Ÿงช [API-TEST] โŒ registerDevice ์˜ค๋ฅ˜:', response); - - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: "๐Ÿงช registerDevice ํ…Œ์ŠคํŠธ ์‹คํŒจ", - text: `retCode: ${response?.retCode}\nretMsg: ${response?.retMsg}`, - button1Text: "ํ™•์ธ" - })); - } - }; + // 1. ๋ชจ๋“  ์ฒดํฌ๋ฐ•์Šค๋ฅผ true๋กœ ๊ฐ•์ œ ์„ค์ • (๊ธฐ์กด ๋กœ์ง ์œ ์ง€) + const allAgreedStates = { + [TERMS_TYPE.TERMS_CONDITIONS]: true, + [TERMS_TYPE.PRIVACY_POLICY]: true, + [TERMS_TYPE.OPTIONAL_TERMS]: true, + }; - // 4. โœ… registerDevice API ํ˜ธ์ถœ - dispatch(registerDevice({ - // registerDevice์— ๋งž๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ ๊ตฌ์„ฑ - agreedTermsList: agreedTerms, - // ๊ธฐํƒ€ ํ•„์š”ํ•œ ๋””๋ฐ”์ด์Šค ์ •๋ณด๋“ค... - }, onTestSuccess)); - -}, [dispatch, setCheckboxStates, setIsAllChecked]); + setCheckboxStates(allAgreedStates); + setIsAllChecked(true); + + // 2. ๋™์˜ํ•œ ์•ฝ๊ด€ ID ๋ฐฐ์—ด ์ƒ์„ฑ (๊ธฐ์กด ๋กœ์ง ์œ ์ง€) + const agreedTerms = [ + 'TID0000222', // TERMS_CONDITIONS (ํ•„์ˆ˜) + 'TID0000223', // PRIVACY_POLICY (ํ•„์ˆ˜) + 'TID0000232', // OPTIONAL_TERMS (์„ ํƒ) + ]; + + dlog('๐Ÿ”ฅ [API-TEST] registerDevice ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ:', agreedTerms); + + // 3. โœ… registerDevice๋กœ ๊ต์ฒด + const onTestSuccess = (response) => { + dlog('๐Ÿงช [API-TEST] โœ… registerDevice ์„ฑ๊ณต ์‘๋‹ต:', response); + + if (response && (response.retCode === '000' || response.retCode === 0)) { + dlog('๐Ÿงช [API-TEST] โœ… ๋””๋ฐ”์ด์Šค ๋“ฑ๋ก ์„ฑ๊ณต!'); + + // MyPage ๋ฐ์ดํ„ฐ ์ƒˆ๋กœ๊ณ ์นจ (ํ•„์š”์‹œ) + dispatch(getMyPageTerms()); + dispatch(getMyPageOptionalTerms()); + + // ์„ฑ๊ณต ์•Œ๋ฆผ ํŒ์—… + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: '๐Ÿงช registerDevice ํ…Œ์ŠคํŠธ ์„ฑ๊ณต', + text: `๋””๋ฐ”์ด์Šค ๋“ฑ๋ก ์„ฑ๊ณต!\n์‘๋‹ต: ${response.retMsg || 'OK'}\n๋™์˜ํ•œ ์•ฝ๊ด€: ${agreedTerms.length}๊ฐœ`, + button1Text: 'ํ™•์ธ', + }) + ); + } else { + derror('๐Ÿงช [API-TEST] โŒ registerDevice ์˜ค๋ฅ˜:', response); + + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: '๐Ÿงช registerDevice ํ…Œ์ŠคํŠธ ์‹คํŒจ', + text: `retCode: ${response?.retCode}\nretMsg: ${response?.retMsg}`, + button1Text: 'ํ™•์ธ', + }) + ); + } + }; + + // 4. โœ… registerDevice API ํ˜ธ์ถœ + dispatch( + registerDevice( + { + // registerDevice์— ๋งž๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ ๊ตฌ์„ฑ + agreedTermsList: agreedTerms, + // ๊ธฐํƒ€ ํ•„์š”ํ•œ ๋””๋ฐ”์ด์Šค ์ •๋ณด๋“ค... + }, + onTestSuccess + ) + ); + }, [dispatch, setCheckboxStates, setIsAllChecked]); // TERMS_TPCD_MAP ๊ฒ€์ฆ ํ•จ์ˆ˜ const validateTermsIdMap = useCallback(() => { - console.log('๐Ÿ” [VALIDATION] TERMS_TPCD_MAP ๊ฒ€์ฆ ์‹œ์ž‘'); - console.log('๐Ÿ” [VALIDATION] ์ „์ฒด TERMS_TPCD_MAP:', TERMS_TPCD_MAP); - console.log('๐Ÿ” [VALIDATION] ์ „์ฒด TERMS_TYPE:', TERMS_TYPE); - + dlog('๐Ÿ” [VALIDATION] TERMS_TPCD_MAP ๊ฒ€์ฆ ์‹œ์ž‘'); + dlog('๐Ÿ” [VALIDATION] ์ „์ฒด TERMS_TPCD_MAP:', TERMS_TPCD_MAP); + dlog('๐Ÿ” [VALIDATION] ์ „์ฒด TERMS_TYPE:', TERMS_TYPE); + Object.entries(TERMS_TYPE).forEach(([key, type]) => { const id = TERMS_TPCD_MAP[type]; - console.log(`๐Ÿ” [VALIDATION] ${key} (${type}) -> ${id} (${typeof id})`); - + dlog(`๐Ÿ” [VALIDATION] ${key} (${type}) -> ${id} (${typeof id})`); + if (!id) { - console.error(`โŒ [VALIDATION] ${type}์— ๋Œ€ํ•œ ID๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค!`); + derror(`โŒ [VALIDATION] ${type}์— ๋Œ€ํ•œ ID๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค!`); } else { - console.log(`โœ… [VALIDATION] ${type}: ์œ ํšจํ•œ ID`); + dlog(`โœ… [VALIDATION] ${type}: ์œ ํšจํ•œ ID`); } }); - + // ํŒ์—…์œผ๋กœ ๊ฒฐ๊ณผ ํ‘œ์‹œ - const validIds = Object.values(TERMS_TYPE).map(type => TERMS_TPCD_MAP[type]).filter(Boolean); + const validIds = Object.values(TERMS_TYPE) + .map((type) => TERMS_TPCD_MAP[type]) + .filter(Boolean); const totalTypes = Object.keys(TERMS_TYPE).length; - - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: "๐Ÿ” TERMS_TPCD_MAP ๊ฒ€์ฆ ๊ฒฐ๊ณผ", - text: `์ „์ฒด ์•ฝ๊ด€ ํƒ€์ž…: ${totalTypes}๊ฐœ\n์œ ํšจํ•œ ID: ${validIds.length}๊ฐœ\n\n${validIds.join('\n')}`, - button1Text: "ํ™•์ธ" - })); + + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: '๐Ÿ” TERMS_TPCD_MAP ๊ฒ€์ฆ ๊ฒฐ๊ณผ', + text: `์ „์ฒด ์•ฝ๊ด€ ํƒ€์ž…: ${totalTypes}๊ฐœ\n์œ ํšจํ•œ ID: ${validIds.length}๊ฐœ\n\n${validIds.join('\n')}`, + button1Text: 'ํ™•์ธ', + }) + ); }, [dispatch]); // ๊ฐ„๋‹จํ•œ API ํ…Œ์ŠคํŠธ ํ•จ์ˆ˜ const simpleApiTest = useCallback(() => { - console.log('๐Ÿงช [SIMPLE-TEST] ๊ฐ„๋‹จ API ํ…Œ์ŠคํŠธ ์‹œ์ž‘'); - - const testIds = ["MST00402", "MST00401", "MST00405"]; - - console.log('๐Ÿงช [SIMPLE-TEST] ํ•˜๋“œ์ฝ”๋”ฉ๋œ ํ…Œ์ŠคํŠธ ID:', testIds); + dlog('๐Ÿงช [SIMPLE-TEST] ๊ฐ„๋‹จ API ํ…Œ์ŠคํŠธ ์‹œ์ž‘'); - dispatch(setMyPageTermsAgree({ - termsList: testIds, - notTermsList: [], - onComplete: (res) => { - console.log('๐Ÿงช [SIMPLE-TEST] โœ… ์„ฑ๊ณต:', res); - const retCode = res?.data?.retCode; - const retMsg = res?.data?.retMsg; - - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: "๐Ÿงช ๊ฐ„๋‹จ API ํ…Œ์ŠคํŠธ ์„ฑ๊ณต", - text: `retCode: ${retCode}\nretMsg: ${retMsg}\n์ „์†ก ID: ${testIds.join(', ')}`, - button1Text: "ํ™•์ธ" - })); - }, - onError: (err) => { - console.error('๐Ÿงช [SIMPLE-TEST] โŒ ์‹คํŒจ:', err); - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: "๐Ÿงช ๊ฐ„๋‹จ API ํ…Œ์ŠคํŠธ ์‹คํŒจ", - text: `์˜ค๋ฅ˜: ${err?.message || '์•Œ ์ˆ˜ ์—†์Œ'}\n์ „์†ก ID: ${testIds.join(', ')}`, - button1Text: "ํ™•์ธ" - })); - } - })); + const testIds = ['MST00402', 'MST00401', 'MST00405']; + + dlog('๐Ÿงช [SIMPLE-TEST] ํ•˜๋“œ์ฝ”๋”ฉ๋œ ํ…Œ์ŠคํŠธ ID:', testIds); + + dispatch( + setMyPageTermsAgree({ + termsList: testIds, + notTermsList: [], + onComplete: (res) => { + dlog('๐Ÿงช [SIMPLE-TEST] โœ… ์„ฑ๊ณต:', res); + const retCode = res?.data?.retCode; + const retMsg = res?.data?.retMsg; + + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: '๐Ÿงช ๊ฐ„๋‹จ API ํ…Œ์ŠคํŠธ ์„ฑ๊ณต', + text: `retCode: ${retCode}\nretMsg: ${retMsg}\n์ „์†ก ID: ${testIds.join(', ')}`, + button1Text: 'ํ™•์ธ', + }) + ); + }, + onError: (err) => { + derror('๐Ÿงช [SIMPLE-TEST] โŒ ์‹คํŒจ:', err); + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: '๐Ÿงช ๊ฐ„๋‹จ API ํ…Œ์ŠคํŠธ ์‹คํŒจ', + text: `์˜ค๋ฅ˜: ${err?.message || '์•Œ ์ˆ˜ ์—†์Œ'}\n์ „์†ก ID: ${testIds.join(', ')}`, + button1Text: 'ํ™•์ธ', + }) + ); + }, + }) + ); }, [dispatch]); - return ( { > {/* */} -
{/* Welcome Section - ํ•ญ์ƒ ํ‘œ์‹œ */}
- {$L("Welcome to")} + {$L('Welcome to')}

Sh o @@ -936,7 +1013,9 @@ const handleAllAgreeTest = useCallback(() => {

- {$L("Check out more LIVE SHOWS now and enjoy shopping at Shop Time's special price on your TV by agreeing to the LG TV Shopping Terms and Conditions.")} + {$L( + "Check out more LIVE SHOWS now and enjoy shopping at Shop Time's special price on your TV by agreeing to the LG TV Shopping Terms and Conditions." + )}

@@ -944,23 +1023,23 @@ const handleAllAgreeTest = useCallback(() => {
{Object.entries(TERMS_TYPE).map(([key, type], index) => { - console.log(`[RENDER] ${type} ์ฒดํฌ๋ฐ•์Šค ๋ Œ๋”๋ง:`, { + dlog(`[RENDER] ${type} ์ฒดํฌ๋ฐ•์Šค ๋ Œ๋”๋ง:`, { selected: checkboxStates[type], disabled: spotlightDisabled, - id: `checkbox-${type.toLowerCase()}` + id: `checkbox-${type.toLowerCase()}`, }); - + return (
- { - console.log(`[CHECKBOX-ONCLICK] ${type} ์ฒดํฌ๋ฐ•์Šค ์ง์ ‘ ํด๋ฆญ๋จ`, e); - console.log(`[CHECKBOX-ONCLICK] ํ˜„์žฌ disabled ์ƒํƒœ:`, spotlightDisabled); - console.log(`[CHECKBOX-ONCLICK] ํ˜„์žฌ selected ์ƒํƒœ:`, checkboxStates[type]); + dlog(`[CHECKBOX-ONCLICK] ${type} ์ฒดํฌ๋ฐ•์Šค ์ง์ ‘ ํด๋ฆญ๋จ`, e); + dlog(`[CHECKBOX-ONCLICK] ํ˜„์žฌ disabled ์ƒํƒœ:`, spotlightDisabled); + dlog(`[CHECKBOX-ONCLICK] ํ˜„์žฌ selected ์ƒํƒœ:`, checkboxStates[type]); }} className={css.termCheckbox} disabled={spotlightDisabled} @@ -990,7 +1069,9 @@ const handleAllAgreeTest = useCallback(() => { ) } > - + {TERMS_DISPLAY_NAMES[type]} @@ -999,36 +1080,35 @@ const handleAllAgreeTest = useCallback(() => { })}
-
+
{/*
*/} - + {/*
*/} -
- { - console.log(`[SELECT-ALL-ONCLICK] ์ „์ฒด ์„ ํƒ ์ฒดํฌ๋ฐ•์Šค ์ง์ ‘ ํด๋ฆญ๋จ`, e); - console.log(`[SELECT-ALL-ONCLICK] ํ˜„์žฌ disabled ์ƒํƒœ:`, spotlightDisabled); - console.log(`[SELECT-ALL-ONCLICK] ํ˜„์žฌ isAllChecked ์ƒํƒœ:`, isAllChecked); + dlog(`[SELECT-ALL-ONCLICK] ์ „์ฒด ์„ ํƒ ์ฒดํฌ๋ฐ•์Šค ์ง์ ‘ ํด๋ฆญ๋จ`, e); + dlog(`[SELECT-ALL-ONCLICK] ํ˜„์žฌ disabled ์ƒํƒœ:`, spotlightDisabled); + dlog(`[SELECT-ALL-ONCLICK] ํ˜„์žฌ isAllChecked ์ƒํƒœ:`, isAllChecked); }} className={css.selectAllCheckbox} disabled={spotlightDisabled} spotlightDisabled={spotlightDisabled} tabIndex={1} /> - {$L("Select All")} + {$L('Select All')}
{/* ํ•˜๋‹จ ๋ฒ„ํŠผ ๋ ˆ์ด์–ด - ์ „์ฒดํ™”๋ฉด ๋ชจ๋“œ์—์„œ๋Š” ํ•ญ์ƒ ๋‘ ๋ฒ„ํŠผ ๋ชจ๋‘ ํ‘œ์‹œ */} @@ -1036,19 +1116,18 @@ const handleAllAgreeTest = useCallback(() => { - {$L("Agree")} - - - + {$L('Agree')} + + {/* ์ „์ฒดํ™”๋ฉด ๋ชจ๋“œ์—์„œ๋Š” ํ•ญ์ƒ "Do Not Agree" ๋ฒ„ํŠผ ํ‘œ์‹œ */} - - {$L("Do Not Agree")} + {$L('Do Not Agree')}
@@ -1057,7 +1136,7 @@ const handleAllAgreeTest = useCallback(() => { { - console.log('TermsPopup - Agree clicked for type:', currentTermsType); + dlog('TermsPopup - Agree clicked for type:', currentTermsType); // Agree ํด๋ฆญ ์‹œ ํ•ด๋‹น ์•ฝ๊ด€์˜ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ํ† ๊ธ€ (๋™์˜) if (currentTermsType) { toggleCheckboxDirectly(currentTermsType); @@ -1068,7 +1147,7 @@ const handleAllAgreeTest = useCallback(() => { setCurrentTermsType(null); }} onClose={() => { - console.log('TermsPopup - Close clicked (no agreement change)'); + dlog('TermsPopup - Close clicked (no agreement change)'); // Close ํด๋ฆญ ์‹œ ์ฒดํฌ๋ฐ•์Šค ์ƒํƒœ ๋ณ€๊ฒฝ ์—†์ด ํŒ์—…๋งŒ ๋‹ซ๊ธฐ setShowTermsPopup(false); setCurrentTermsData(null); @@ -1077,7 +1156,7 @@ const handleAllAgreeTest = useCallback(() => { termsData={currentTermsData} isAlreadyAgreed={currentTermsType ? checkboxStates[currentTermsType] || false : false} /> - + {/* ์•Œ๋ฆผ ํŒ์—… */} {activePopup === Config.ACTIVE_POPUP.alertPopup && popupVisible && ( { onClose={handleClosePopup} onButton1Press={handleClosePopup} hasButton - button1Text={commonPopupState.button1Text || $L("OK")} + button1Text={commonPopupState.button1Text || $L('OK')} hasText title={commonPopupState.title} text={commonPopupState.text} @@ -1103,16 +1182,16 @@ const handleAllAgreeTest = useCallback(() => { onExit={onExit} onClose={onClose} hasButton - button1Text={$L("Yes")} - button2Text={$L("No")} + button1Text={$L('Yes')} + button2Text={$L('No')} hasText - title={$L("")} + title={$L('')} text={
- {$L("Are you sure you want to opt out?")} + {$L('Are you sure you want to opt out?')}
-

- {$L("The service will not be available anymore after opting out.")} +

+ {$L('The service will not be available anymore after opting out.')}

} @@ -1121,4 +1200,4 @@ const handleAllAgreeTest = useCallback(() => { ); -} \ No newline at end of file +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 2818d20f..86a264e9 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -66,6 +66,21 @@ import TabContainerV2 from './PlayerTabContents/v2/TabContainer.v2'; const Container = SpotlightContainerDecorator({ enterTo: 'last-focused', preserveId: true }, 'div'); +// Toggle debug logging for this view +const DEBUG_MODE = false; + +const dlog = (...args) => { + if (DEBUG_MODE) console.log(...args); +}; + +const dwarn = (...args) => { + if (DEBUG_MODE) console.warn(...args); +}; + +const derror = (...args) => { + console.error(...args); +}; + const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => { try { if (currentAttempts >= maxAttempts) { @@ -363,7 +378,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // PlayerPanel.jsx์˜ ๋ผ์ธ 313-327 useEffect ์ˆ˜์ • - detailPanelClosed flag ๊ฐ์ง€ ์ถ”๊ฐ€ useEffect(() => { - console.log('[PlayerPanel] ๐Ÿ” isOnTop useEffect ํ˜ธ์ถœ:', { + dlog('[PlayerPanel] ๐Ÿ” isOnTop useEffect ํ˜ธ์ถœ:', { isOnTop, modal: panelInfo?.modal, isPaused: panelInfo?.isPaused, @@ -374,18 +389,18 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // 1. Resume Video if needed (isPaused or detailPanelClosed) if (panelInfo.isPaused || panelInfo.detailPanelClosed) { if (panelInfo.modal) { - console.log('[PlayerPanel] โ–ถ๏ธ Back on top (Modal) - resuming video'); + dlog('[PlayerPanel] โ–ถ๏ธ Back on top (Modal) - resuming video'); dispatch(resumeModalVideo()); } else { - console.log('[PlayerPanel] โ–ถ๏ธ Back on top (Fullscreen) - resuming video'); + dlog('[PlayerPanel] โ–ถ๏ธ Back on top (Fullscreen) - resuming video'); dispatch(resumeFullscreenVideo()); } } // 2. Reset detailPanelClosed flag if (panelInfo.detailPanelClosed) { - console.log('[PlayerPanel] ๐Ÿ”„ detailPanelClosed flag ์ดˆ๊ธฐํ™” ์‹œ์ž‘'); - console.log('[PlayerPanel] ๐Ÿ”™ DetailPanel์—์„œ ๋ณต๊ท€ ์ •๋ณด:', { + dlog('[PlayerPanel] ๐Ÿ”„ detailPanelClosed flag ์ดˆ๊ธฐํ™” ์‹œ์ž‘'); + dlog('[PlayerPanel] ๐Ÿ”™ DetailPanel์—์„œ ๋ณต๊ท€ ์ •๋ณด:', { detailPanelClosedAt: panelInfo.detailPanelClosedAt, detailPanelClosedFromSource: panelInfo.detailPanelClosedFromSource, lastFocusedTargetId: panelInfo.lastFocusedTargetId, @@ -393,13 +408,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // ํฌ์ปค์Šค ๋ณต์› ๋กœ์ง ์ถ”๊ฐ€ (1000ms ์ง€์—ฐ) if (panelInfo.lastFocusedTargetId) { - console.log( + dlog( '[PlayerPanel] ๐ŸŽฏ DetailPanel ๋ณต๊ท€ ํ›„ 1000ms ์ง€์—ฐ ํฌ์ปค์Šค ๋ณต์› ์˜ˆ์•ฝ:', panelInfo.lastFocusedTargetId ); const focusTimeoutId = setTimeout(() => { - console.log( + dlog( '[PlayerPanel] ๐Ÿ” DetailPanel ๋ณต๊ท€ ํ›„ ํฌ์ปค์Šค ๋ณต์› ์‹คํ–‰:', panelInfo.lastFocusedTargetId ); @@ -410,7 +425,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props return () => { if (focusTimeoutId) { clearTimeout(focusTimeoutId); - console.log('[PlayerPanel] ๐Ÿงน ํฌ์ปค์Šค ๋ณต์› ํƒ€์ด๋จธ ์ •๋ฆฌ๋จ'); + dlog('[PlayerPanel] ๐Ÿงน ํฌ์ปค์Šค ๋ณต์› ํƒ€์ด๋จธ ์ •๋ฆฌ๋จ'); } }; } @@ -426,12 +441,12 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }, }) ); - console.log('[PlayerPanel] ๐Ÿ detailPanelClosed flag ์ดˆ๊ธฐํ™” ์™„๋ฃŒ'); + dlog('[PlayerPanel] ๐Ÿ detailPanelClosed flag ์ดˆ๊ธฐํ™” ์™„๋ฃŒ'); } } else { // Not on top if (panelInfo && panelInfo.modal) { - console.log('[PlayerPanel] โธ๏ธ Not on top (Modal) - pausing video logic commented out'); + dlog('[PlayerPanel] โธ๏ธ Not on top (Modal) - pausing video logic commented out'); // dispatch(pauseModalVideo()); } } @@ -464,7 +479,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props (isOnTop && videoPlayState && hasSignificantChange) || (isDetailPanelOnTop && (isPlayingChanged || isPausedChanged)) ) { - console.log('๐Ÿ“Š [PlayerPanel] Significant videoPlayState change', { + dlog('๐Ÿ“Š [PlayerPanel] Significant videoPlayState change', { previousState: previousVideoPlayState.current, currentState: videoPlayState, topPanelName: topPanel?.name, @@ -492,7 +507,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (isOnTop && panelInfo?.isPaused !== undefined && isPausedChanged) { // ์ƒํƒœ ๋ณ€๊ฒฝ ์‹œ์—๋งŒ ๋””๋ฒ„๊น… ๋กœ๊ทธ ์ถœ๋ ฅ - console.log('๐Ÿ” [PlayerPanel] PanelInfo isPaused changed', { + dlog('๐Ÿ” [PlayerPanel] PanelInfo isPaused changed', { previousIsPaused: previousPanelInfo.current?.isPaused, currentIsPaused: panelInfo.isPaused, isOnTop, @@ -500,7 +515,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props currentPlayingUrl, timestamp: new Date().toISOString(), }); - console.log('๐ŸŽฎ [PlayerPanel] PanelInfo isPaused changed', { + dlog('๐ŸŽฎ [PlayerPanel] PanelInfo isPaused changed', { previousIsPaused: previousPanelInfo.current?.isPaused, currentIsPaused: panelInfo.isPaused, videoPlayerExists: !!videoPlayer.current, @@ -513,10 +528,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (videoPlayer.current) { if (panelInfo.isPaused === true) { - console.log('๐Ÿ”ด [PlayerPanel] Calling VideoPlayer.pause() due to PanelInfo change'); + dlog('๐Ÿ”ด [PlayerPanel] Calling VideoPlayer.pause() due to PanelInfo change'); videoPlayer.current.pause(); } else if (panelInfo.isPaused === false) { - console.log('๐ŸŸข [PlayerPanel] Calling VideoPlayer.play() due to PanelInfo change'); + dlog('๐ŸŸข [PlayerPanel] Calling VideoPlayer.play() due to PanelInfo change'); videoPlayer.current.play(); } } @@ -550,7 +565,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props ? 'Top panel changed' : 'VideoPlayer created'; - console.log('๐ŸŽฌ [PlayerPanel] VideoPlayer state change', { + dlog('๐ŸŽฌ [PlayerPanel] VideoPlayer state change', { hasVideoPlayer: !!videoPlayer.current, currentPlayingUrl, previousVideoSource: previousVideoSource.current, @@ -570,7 +585,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (isVideoSourceChanged || videoPlayerJustCreated || isDetailPanelOnTopChanged) { const mediaState = videoPlayer.current.getMediaState?.(); if (mediaState) { - console.log('๐Ÿ“Š [PlayerPanel] VideoPlayer current state', { + dlog('๐Ÿ“Š [PlayerPanel] VideoPlayer current state', { mediaState, videoPlayState, changeReason, @@ -590,7 +605,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const currentModalState = panelInfo?.modal; const prevModalState = modalPrevRef.current; - console.log('[PlayerPanel] ๐Ÿ” Modal ์ƒํƒœ ์ฒดํฌ:', { + dlog('[PlayerPanel] ๐Ÿ” Modal ์ƒํƒœ ์ฒดํฌ:', { prevModalState, currentModalState, shouldExecuteTrueToFalse: prevModalState === true && currentModalState === false, @@ -599,8 +614,8 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // true โ†’ false ๋ณ€ํ™” ๊ฐ์ง€ if (prevModalState === true && currentModalState === false) { - console.log('[PlayerPanel] โ–ถ๏ธ Modal ์ƒํƒœ ๋ณ€ํ™”: true โ†’ false (์ „์ฒดํ™”๋ฉด ๋ชจ๋“œ๋กœ ๋ณต๊ท€)'); - console.log( + dlog('[PlayerPanel] โ–ถ๏ธ Modal ์ƒํƒœ ๋ณ€ํ™”: true โ†’ false (์ „์ฒดํ™”๋ฉด ๋ชจ๋“œ๋กœ ๋ณต๊ท€)'); + dlog( '[PlayerPanel] ๐ŸŽฏ ํฌ์ปค์Šค ๋ณต์› ์ค€๋น„ - lastFocusedTargetId:', panelInfo?.lastFocusedTargetId ); @@ -612,7 +627,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (lastFocusedTargetId) { // ShopNowContents๊ฐ€ ๋ Œ๋”๋ง๋  ๋•Œ๊นŒ์ง€ ๋Œ€๊ธฐ ํ›„ ํฌ์ปค์Šค ๋ณต์› setTimeout(() => { - console.log('[PlayerPanel] ๐Ÿ” 800ms ํ›„ ํฌ์ปค์Šค ๋ณต์› ์‹œ๋„:', lastFocusedTargetId); + dlog('[PlayerPanel] ๐Ÿ” 800ms ํ›„ ํฌ์ปค์Šค ๋ณต์› ์‹œ๋„:', lastFocusedTargetId); Spotlight.focus(lastFocusedTargetId); }, 800); } @@ -620,7 +635,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // false โ†’ true ๋ณ€ํ™” ๊ฐ์ง€ (๋ชจ๋‹ฌ์ด ์—ด๋ฆผ) if (prevModalState === false && currentModalState === true) { - console.log('[PlayerPanel] ๐Ÿ“ฑ Modal ์ƒํƒœ ๋ณ€ํ™”: false โ†’ true (๋ชจ๋‹ฌ ์—ด๋ฆผ)'); + dlog('[PlayerPanel] ๐Ÿ“ฑ Modal ์ƒํƒœ ๋ณ€ํ™”: false โ†’ true (๋ชจ๋‹ฌ ์—ด๋ฆผ)'); setIsModalClosed(false); // ๋ชจ๋‹ฌ์ด ์—ด๋ ธ์Œ์„ ํ‘œ์‹œ } @@ -1273,7 +1288,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // ๐Ÿ” DetailPanel ์ƒํƒœ ๋ณ€ํ™” ๋กœ๊น… if (result) { - console.log('๐ŸŽฌ [PlayerPanel] DetailPanel is now on top (from Player)', { + dlog('๐ŸŽฌ [PlayerPanel] DetailPanel is now on top (from Player)', { topPanelName: topPanel?.name, launchedFromPlayer: topPanel?.panelInfo?.launchedFromPlayer, modalPlayerPanelExists: panels.some( @@ -1299,7 +1314,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // PlayerPanel์ด modal์ด๊ณ  ๋ฐ‘์— ๊น”๋ ธ์„ ๋•Œ if (isModalPlayerPanel && !isCurrentPanelOnTop && isDetailPanelOnTop) { - console.log('๐Ÿ”ด [PlayerPanel] Self-pausing due to DetailPanel on top', { + dlog('๐Ÿ”ด [PlayerPanel] Self-pausing due to DetailPanel on top', { isDetailPanelOnTop, isModalPlayerPanel, isCurrentPanelOnTop, @@ -1310,7 +1325,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // PlayerPanel ์ž์‹ ์˜ ์ƒํƒœ๋ฅผ ์ผ์‹œ์ •์ง€๋กœ ์—…๋ฐ์ดํŠธ if (videoPlayState?.isPlaying === true || videoPlayState?.isPaused === false) { - console.log('๐Ÿ”„ [PlayerPanel] Dispatching self-pause to Redux'); + dlog('๐Ÿ”„ [PlayerPanel] Dispatching self-pause to Redux'); dispatch( updateVideoPlayState({ isPlaying: false, @@ -1404,7 +1419,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props } } else { // showId๊ฐ€ ์ผ์น˜ํ•˜์ง€ ์•Š์œผ๋ฉด ์ด์ „ ์ƒํƒœ๋ฅผ ์žฌํ™œ์šฉํ•˜์ง€ ์•Š๊ณ  ์ดˆ๊ธฐํ™” - console.log('[PlayerPanel] VOD showDetailInfo mismatch. Clearing playListInfo.', { + dlog('[PlayerPanel] VOD showDetailInfo mismatch. Clearing playListInfo.', { panelInfoShowId: panelInfo.showId, showDetailInfoId: showDetailInfo[0]?.showId, }); @@ -1686,7 +1701,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props (ev) => { const type = ev.type; if (type !== 'timeupdate' && type !== 'durationchange') { - console.log('mediainfoHandler....', type, ev, videoPlayer.current?.getMediaState()); + dlog('mediainfoHandler....', type, ev, videoPlayer.current?.getMediaState()); } if (ev === 'hlsError' && isNaN(Number(videoPlayer.current?.getMediaState().playbackRate))) { dispatch( @@ -1717,7 +1732,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const mediaId = videoPlayer.current?.video?.media?.mediaId; setMediaId(mediaId); setVideoLoaded(true); - console.log( + dlog( '[PlayerPanel] ๐ŸŽฌ Video Loaded - shptmBanrTpNm:', panelInfoRef.current?.shptmBanrTpNm ); @@ -1751,7 +1766,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props useEffect(() => { // ๋ณต๊ตฌ ์งํ›„: skipModalStyleRecalculation์ด true๋ฉด ์ €์žฅ๋œ modalStyle ์ ์šฉ if (panelInfo.skipModalStyleRecalculation && !panelInfo.shouldShrinkTo1px) { - console.log('[PlayerPanel] Condition 2.5: Using saved modalStyle from expand'); + dlog('[PlayerPanel] Condition 2.5: Using saved modalStyle from expand'); const shrinkInfo = panelInfo.playerState?.shrinkInfo; // ์ €์žฅ๋œ modalStyle ์‚ฌ์šฉ (top, left ํฌํ•จ) @@ -1767,7 +1782,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (typeof window !== 'undefined') { window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { - console.log('[PlayerPanel] Condition 2.5: Removing skipFlag after DOM render'); + dlog('[PlayerPanel] Condition 2.5: Removing skipFlag after DOM render'); dispatch( updatePanel({ name: panel_names.PLAYER_PANEL, @@ -1788,7 +1803,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props panelInfo.modalContainerId && (lastPanelAction === 'previewPush' || lastPanelAction === 'previewUpdate') ) { - console.log('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', { + dlog('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', { lastPanelAction, }); const node = document.querySelector(`[data-spotlight-id="${panelInfo.modalContainerId}"]`); @@ -1815,17 +1830,17 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }) ); } else { - console.log('[PlayerPanel] Condition 1: Node not found, using saved modalStyle'); + dlog('[PlayerPanel] Condition 1: Node not found, using saved modalStyle'); setModalStyle(panelInfo.modalStyle); setModalScale(panelInfo.modalScale); } } else if (panelInfo.shouldShrinkTo1px) { - console.log('[PlayerPanel] Condition 2: Shrinking - clearing modalStyle'); + dlog('[PlayerPanel] Condition 2: Shrinking - clearing modalStyle'); // ์ถ•์†Œ ์ƒํƒœ: ์ธ๋ผ์ธ ์Šคํƒ€์ผ ์ œ๊ฑฐ (CSS๋งŒ ์ ์šฉ) setModalStyle({}); setModalScale(1); } else if (isOnTop && !panelInfo.modal && videoPlayer.current) { - console.log('[PlayerPanel] Condition 3: Playing fullscreen video'); + dlog('[PlayerPanel] Condition 3: Playing fullscreen video'); if (videoPlayer.current?.getMediaState()?.paused) { videoPlayer.current.play(); } @@ -1923,7 +1938,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // ๋น„๋””์˜ค๊ฐ€ ์ƒˆ๋กœ ์„ ํƒ๋  ๋•Œ ํƒ€์ด๋จธ ์ดˆ๊ธฐํ™” useEffect(() => { if (currentPlayingUrl) { - console.log('[PlayerPanel] ๐ŸŽฌ ๋น„๋””์˜ค ์„ ํƒ๋จ - tabIndexV2 ํƒ€์ด๋จธ ์ดˆ๊ธฐํ™”'); + dlog('[PlayerPanel] ๐ŸŽฌ ๋น„๋””์˜ค ์„ ํƒ๋จ - tabIndexV2 ํƒ€์ด๋จธ ์ดˆ๊ธฐํ™”'); resetTimerTabAutoAdvance(10000); } }, [selectedIndex, resetTimerTabAutoAdvance]); @@ -2322,10 +2337,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const clearTimerV2 = useCallback(() => { if (timerIdV2.current) { - console.log('[clearTimerV2] ํƒ€์ด๋จธ ํด๋ฆฌ์–ด๋จ'); + dlog('[clearTimerV2] ํƒ€์ด๋จธ ํด๋ฆฌ์–ด๋จ'); const stack = new Error().stack; const lines = stack.split('\n').slice(1, 4).join(' โ†’ '); - console.log('[clearTimerV2] ํ˜ธ์ถœ ์Šคํƒ:', lines); + dlog('[clearTimerV2] ํ˜ธ์ถœ ์Šคํƒ:', lines); } clearTimeout(timerIdV2.current); timerIdV2.current = null; @@ -2333,19 +2348,19 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const resetTimerV2 = useCallback( (timeout) => { - console.log('[TabContainerV2] resetTimerV2 ํ˜ธ์ถœ', timeout); + dlog('[TabContainerV2] resetTimerV2 ํ˜ธ์ถœ', timeout); if (timerIdV2.current) { - console.log('[TabContainerV2] ๊ธฐ์กด ํƒ€์ด๋จธ ํด๋ฆฌ์–ด'); + dlog('[TabContainerV2] ๊ธฐ์กด ํƒ€์ด๋จธ ํด๋ฆฌ์–ด'); clearTimerV2(); } if (initialEnterV2) { - console.log('[TabContainerV2] initialEnterV2 false๋กœ ๋ณ€๊ฒฝ'); + dlog('[TabContainerV2] initialEnterV2 false๋กœ ๋ณ€๊ฒฝ'); setInitialEnterV2(false); } timerIdV2.current = setTimeout(() => { - console.log('[TabContainerV2] ํƒ€์ด๋จธ ์‹คํ–‰ - belowContentsVisible false๋กœ ๋ณ€๊ฒฝ (30์ดˆ ๊ฒฝ๊ณผ)'); + dlog('[TabContainerV2] ํƒ€์ด๋จธ ์‹คํ–‰ - belowContentsVisible false๋กœ ๋ณ€๊ฒฝ (30์ดˆ ๊ฒฝ๊ณผ)'); setBelowContentsVisible(false); }, timeout); }, @@ -2373,9 +2388,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // Redux๋กœ ์˜ค๋ฒ„๋ ˆ์ด ์ˆจ๊น€ useEffect(() => { if (shouldHideOverlays) { - console.log('[PlayerPanel] shouldHideOverlays true - ์˜ค๋ฒ„๋ ˆ์ด ์ˆจ๊น€'); + dlog('[PlayerPanel] shouldHideOverlays true - ์˜ค๋ฒ„๋ ˆ์ด ์ˆจ๊น€'); setSideContentsVisible(false); - console.log('[setBelowContentsVisible] Redux๋กœ ์˜ค๋ฒ„๋ ˆ์ด ์ˆจ๊น€ - false๋กœ ๋ณ€๊ฒฝ'); + dlog('[setBelowContentsVisible] Redux๋กœ ์˜ค๋ฒ„๋ ˆ์ด ์ˆจ๊น€ - false๋กœ ๋ณ€๊ฒฝ'); setBelowContentsVisible(false); if (videoPlayer.current?.hideControls) { @@ -2400,9 +2415,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // Redux๋กœ ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ useEffect(() => { if (shouldShowOverlays) { - console.log('[PlayerPanel] shouldShowOverlays true - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); + dlog('[PlayerPanel] shouldShowOverlays true - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); setSideContentsVisible(true); - console.log('[setBelowContentsVisible] Redux๋กœ ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ - true๋กœ ๋ณ€๊ฒฝ'); + dlog('[setBelowContentsVisible] Redux๋กœ ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ - true๋กœ ๋ณ€๊ฒฝ'); setBelowContentsVisible(true); if (videoPlayer.current?.showControls) { @@ -2424,33 +2439,33 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const isDetailPanelReturn = prevIsTopPanelDetailFromPlayerRef.current === true; if (isDetailPanelReturn) { - console.log('[PlayerPanel] โœ… PlayerPanel ๋‚ด๋ถ€ DetailPanel์—์„œ ๋ณต๊ท€ํ•จ! - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); + dlog('[PlayerPanel] โœ… PlayerPanel ๋‚ด๋ถ€ DetailPanel์—์„œ ๋ณต๊ท€ํ•จ! - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); } else if (isHomePanelReturn) { - console.log('[PlayerPanel] ๐Ÿ“บ HomePanel์—์„œ ๋ณต๊ท€ํ•จ - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); + dlog('[PlayerPanel] ๐Ÿ“บ HomePanel์—์„œ ๋ณต๊ท€ํ•จ - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); // HomePanel์—์„œ ๋ณต๊ท€ ์‹œ ์ฝ˜ํ…์ธ  ํƒ€์ž…์— ๋”ฐ๋ผ tabIndex ์„ค์ • - console.log('[PlayerPanel] ๐Ÿ”„ HomePanel ๋ณต๊ท€ - tabIndex๋ฅผ ์ฝ˜ํ…์ธ  ํƒ€์ž…์— ๋”ฐ๋ผ ์„ค์ •'); + dlog('[PlayerPanel] ๐Ÿ”„ HomePanel ๋ณต๊ท€ - tabIndex๋ฅผ ์ฝ˜ํ…์ธ  ํƒ€์ž…์— ๋”ฐ๋ผ ์„ค์ •'); if (tabContainerVersion === 2) { if (panelInfoRef.current.shptmBanrTpNm === 'VOD') { setTabIndexV2(2); - console.log('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 2๋กœ ์„ค์ •๋จ'); + dlog('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 2๋กœ ์„ค์ •๋จ'); } else { setTabIndexV2(1); - console.log('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ'); + dlog('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ'); } } } else { - console.log('[PlayerPanel] ๐Ÿ”„ ๊ทธ ์™ธ ๋ณต๊ท€ - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); + dlog('[PlayerPanel] ๐Ÿ”„ ๊ทธ ์™ธ ๋ณต๊ท€ - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); } setSideContentsVisible(true); - console.log('[setBelowContentsVisible] ๋ณต๊ท€ - true๋กœ ๋ณ€๊ฒฝ'); + dlog('[setBelowContentsVisible] ๋ณต๊ท€ - true๋กœ ๋ณ€๊ฒฝ'); setBelowContentsVisible(true); // VideoPlayer๊ฐ€ belowContentsVisible prop์„ ๊ฐ์ง€ํ•ด์„œ ์ž๋™์œผ๋กœ controls ํ‘œ์‹œํ•จ // PlayerPanel ๋‚ด๋ถ€ DetailPanel์—์„œ ๋ณต๊ท€ ์‹œ์—๋งŒ ํฌ์ปค์Šค ๋ณต์› ์‹œ๋„ if (isDetailPanelReturn) { const lastFocusedTargetId = panelInfo?.lastFocusedTargetId; - console.log( + dlog( '[PlayerPanel] ๐ŸŽฏ PlayerPanel DetailPanel ๋ณต๊ท€ - lastFocusedTargetId:', lastFocusedTargetId ); @@ -2458,7 +2473,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (lastFocusedTargetId) { // ShopNowContents๊ฐ€ ๋ Œ๋”๋ง๋  ๋•Œ๊นŒ์ง€ ์ž ์‹œ ๋Œ€๊ธฐ ํ›„ ํฌ์ปค์Šค ๋ณต์› setTimeout(() => { - console.log('[PlayerPanel] ๐Ÿ” 500ms ํ›„ ํฌ์ปค์Šค ๋ณต์› ์‹œ๋„:', lastFocusedTargetId); + dlog('[PlayerPanel] ๐Ÿ” 500ms ํ›„ ํฌ์ปค์Šค ๋ณต์› ์‹œ๋„:', lastFocusedTargetId); Spotlight.focus(lastFocusedTargetId); }, 500); } @@ -2484,17 +2499,17 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props return; } - console.log( + dlog( '[PlayerPanel] ๐Ÿ“บ Modal false ์ƒํƒœ - shptmBanrTpNm:', panelInfoRef.current?.shptmBanrTpNm ); if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') { setTabIndexV2(2); - console.log('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 2๋กœ ์„ค์ •๋จ'); + dlog('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 2๋กœ ์„ค์ •๋จ'); } else { setTabIndexV2(1); - console.log('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ'); + dlog('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ'); } } }, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]); @@ -2566,30 +2581,30 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (!isTransitionedTo2) { if (timerIdV2.current) { - console.log('[TabContainerV2] ํƒ€์ด๋จธ ํด๋ฆฌ์–ด - tabIndex๊ฐ€ 2๊ฐ€ ์•„๋‹˜', tabIndexV2); + dlog('[TabContainerV2] ํƒ€์ด๋จธ ํด๋ฆฌ์–ด - tabIndex๊ฐ€ 2๊ฐ€ ์•„๋‹˜', tabIndexV2); clearTimerV2(); } return; } - console.log('[TabContainerV2] tabIndex 1 โ†’ 2 ๊ฐ์ง€, ํƒ€์ด๋จธ ์‹œ์ž‘'); + dlog('[TabContainerV2] tabIndex 1 โ†’ 2 ๊ฐ์ง€, ํƒ€์ด๋จธ ์‹œ์ž‘'); if (!belowContentsVisible || videoVerticalVisible) { - console.log( + dlog( '[TabContainerV2] early return - belowContentsVisible ๋˜๋Š” videoVerticalVisible ์กฐ๊ฑด ๋ถˆ๋งŒ์กฑ' ); return; } // tabIndex 1 โ†’ 2๋กœ ๋ณ€๊ฒฝ๋œ ์ •ํ™•ํ•œ ์‹œ์ ์— 30์ดˆ ํƒ€์ด๋จธ ์‹œ์ž‘ - console.log('[TabContainerV2] 30์ดˆ ํƒ€์ด๋จธ ์‹œ์ž‘'); + dlog('[TabContainerV2] 30์ดˆ ํƒ€์ด๋จธ ์‹œ์ž‘'); resetTimerV2(REGULAR_TIMEOUT); return () => { // cleanup: tabIndex๊ฐ€ 2๊ฐ€ ์•„๋‹ˆ๊ฑฐ๋‚˜ ์˜ค๋ฒ„๋ ˆ์ด๊ฐ€ ์‚ฌ๋ผ์งˆ ๋•Œ๋งŒ ํƒ€์ด๋จธ ํด๋ฆฌ์–ด if (!belowContentsVisible || videoVerticalVisible || tabIndexV2 !== 2) { if (timerIdV2.current) { - console.log('[TabContainerV2] cleanup - ํƒ€์ด๋จธ ํด๋ฆฌ์–ด'); + dlog('[TabContainerV2] cleanup - ํƒ€์ด๋จธ ํด๋ฆฌ์–ด'); clearTimerV2(); } }