optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FeaturedBrandsPanel] logic 수정

Browse Source 
1. loading panel 반영, logic 수정
2. brandActions, brandReducer 일부 수정
3. SeriesImageCard, fix warning
4. ShowroomNavItem, label 변수 상단 이동
This commit is contained in:
younghoon100.park
2024-06-02 19:41:41 +09:00
parent 2e14e7c631
commit 6aa6a16ba8
5 changed files with 40 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
com.twin.app.shoptime/src/actions/brandActions.js
View File

@@ -1,17 +1,10 @@
import { URLS } from "../api/apiConfig";
import { TAxios } from "../api/TAxios";
import { types } from "./actionTypes";
import { changeAppStatus } from "./commonActions";
// Featured Brands 정보 조회 IF-LGSP-304
export const getBrandList = () => (dispatch, getState) => {
dispatch({
type: types.GET_BRAND_LIST,
payload: {
...getState().brand.brandInfoData,
status: "pending",
},
});
const onSuccess = (response) => {
// console.log("getBrandList onSuccess ", response.data);
@@ -19,7 +12,6 @@ export const getBrandList = () => (dispatch, getState) => {
type: types.GET_BRAND_LIST,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -44,14 +36,6 @@ export const getBrandList = () => (dispatch, getState) => {
export const getBrandLayoutInfo = (props) => (dispatch, getState) => {
const { patnrId } = props;
dispatch({
type: types.GET_BRAND_LAYOUT_INFO,
payload: {
...getState().brand.brandLayoutInfoData,
status: "pending",
},
});
const onSuccess = (response) => {
// console.log("getBrandLayoutInfo onSuccess ", response.data);
@@ -59,7 +43,6 @@ export const getBrandLayoutInfo = (props) => (dispatch, getState) => {
type: types.GET_BRAND_LAYOUT_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -84,27 +67,25 @@ export const getBrandLayoutInfo = (props) => (dispatch, getState) => {
export const getBrandLiveChannelInfo = (props) => (dispatch, getState) => {
const { patnrId } = props;
dispatch({
type: types.GET_BRAND_LIVE_CHANNEL_INFO,
payload: {
...getState().brand.brandLiveChannelInfoData,
status: "pending",
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
const onSuccess = (response) => {
// console.log("getBrandLiveChannelInfo onSuccess ", response.data);
dispatch({
type: types.GET_BRAND_LIVE_CHANNEL_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getBrandLiveChannelInfo onFail ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
TAxios(
@@ -124,11 +105,11 @@ export const getBrandChanInfo = (props) => (dispatch, getState) => {
const onSuccess = (response) => {
// console.log("getBrandChanInfo onSuccess ", response.data);
dispatch({
type: types.GET_BRAND_CHAN_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -153,14 +134,6 @@ export const getBrandChanInfo = (props) => (dispatch, getState) => {
export const getBrandTSVInfo = (props) => (dispatch, getState) => {
const { patnrId } = props;
dispatch({
type: types.GET_BRAND_TSV_INFO,
payload: {
...getState().brand.brandTsvInfoData,
status: "pending",
},
});
const onSuccess = (response) => {
// console.log("getBrandTSVInfo onSuccess ", response.data);
@@ -168,7 +141,6 @@ export const getBrandTSVInfo = (props) => (dispatch, getState) => {
type: types.GET_BRAND_TSV_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -193,13 +165,7 @@ export const getBrandTSVInfo = (props) => (dispatch, getState) => {
export const getBrandRecommendedShowInfo = (props) => (dispatch, getState) => {
const { catCd, patnrId } = props;
dispatch({
type: types.GET_BRAND_RECOMMENDED_SHOW_INFO,
payload: {
...getState().brand.brandRecommendedShowInfoData,
status: "pending",
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
const onSuccess = (response) => {
// console.log("getBrandRecommendedShowInfo onSuccess", response.data);
@@ -208,13 +174,16 @@ export const getBrandRecommendedShowInfo = (props) => (dispatch, getState) => {
type: types.GET_BRAND_RECOMMENDED_SHOW_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getBrandRecommendedShowInfo onFail", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
TAxios(
@@ -233,13 +202,7 @@ export const getBrandRecommendedShowInfo = (props) => (dispatch, getState) => {
export const getBrandCreatorsInfo = (props) => (dispatch, getState) => {
const { hstNm, patnrId } = props;
dispatch({
type: types.GET_BRAND_CREATORS_INFO,
payload: {
...getState().brand.brandCreatorsInfoData,
status: "pending",
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
const onSuccess = (response) => {
// console.log("getBrandCreatorsInfo onSuccess ", response.data);
@@ -248,13 +211,16 @@ export const getBrandCreatorsInfo = (props) => (dispatch, getState) => {
type: types.GET_BRAND_CREATORS_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getBrandCreatorsInfo onFail ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
TAxios(
@@ -273,14 +239,6 @@ export const getBrandCreatorsInfo = (props) => (dispatch, getState) => {
export const getBrandSeriesInfo = (props) => (dispatch, getState) => {
const { patnrId, seriesId } = props;
dispatch({
type: types.GET_BRAND_SERIES_INFO,
payload: {
...getState().brand.brandSeriesInfoData,
status: "pending",
},
});
const onSuccess = (response) => {
// console.log("getBrandSeriesInfo onSuccess ", response.data);
@@ -288,7 +246,6 @@ export const getBrandSeriesInfo = (props) => (dispatch, getState) => {
type: types.GET_BRAND_SERIES_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -313,22 +270,11 @@ export const getBrandSeriesInfo = (props) => (dispatch, getState) => {
export const getBrandCategoryInfo = (props) => (dispatch, getState) => {
const { catCdLv1, catCdLv2, patnrId } = props;
// dispatch({
// type: types.GET_BRAND_CATEGORY_INFO,
// payload: {
// ...getState().brand.brandCategoryInfoData,
// status: "pending",
// },
// });
const onSuccess = (response) => {
// console.log("getBrandCategoryInfo onSuccess ", response.data);
dispatch({
type: types.GET_BRAND_CATEGORY_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -352,14 +298,6 @@ export const getBrandCategoryInfo = (props) => (dispatch, getState) => {
export const getBrandCategoryProductInfo = (props) => (dispatch, getState) => {
const { catCdLv1, catCdLv2, patnrId } = props;
// dispatch({
// type: "GET_BRAND_CATEGORY_PRODUCT_INFO",
// payload: {
// ...getState().brand.brandCategoryInfoData,
// status: "pending",
// },
// });
const onSuccess = (response) => {
// console.log("getBrandCategoryProductInfo onSuccess ", response.data);
@@ -367,7 +305,6 @@ export const getBrandCategoryProductInfo = (props) => (dispatch, getState) => {
type: types.GET_BRAND_CATEGORY_PRODUCT_INFO,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -392,14 +329,6 @@ export const getBrandCategoryProductInfo = (props) => (dispatch, getState) => {
export const getBrandBestSeller = (props) => (dispatch, getState) => {
const { patnrId } = props;
dispatch({
type: types.GET_BRAND_BEST_SELLER,
payload: {
...getState().brand.brandBestSellerData,
status: "pending",
},
});
const onSuccess = (response) => {
// console.log("getBrandBestSeller onSuccess ", response.data);
@@ -407,7 +336,6 @@ export const getBrandBestSeller = (props) => (dispatch, getState) => {
type: types.GET_BRAND_BEST_SELLER,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};
@@ -432,14 +360,6 @@ export const getBrandBestSeller = (props) => (dispatch, getState) => {
export const getBrandShowroom = (props) => (dispatch, getState) => {
const { patnrId } = props;
dispatch({
type: types.GET_BRAND_SHOWROOM,
payload: {
...getState().brand.brandShowroomData,
status: "pending",
},
});
const onSuccess = (response) => {
// console.log("getBrandShowroom onSuccess ", response.data);
@@ -447,7 +367,6 @@ export const getBrandShowroom = (props) => (dispatch, getState) => {
type: types.GET_BRAND_SHOWROOM,
payload: {
data: response.data.data,
status: "fulfilled",
},
});
};

10
com.twin.app.shoptime/src/reducers/brandReducer.js
View File

@@ -3,52 +3,42 @@ import { types } from "../actions/actionTypes";
const initialState = {
brandInfoData: {
data: {},
status: "idle",
},
brandLayoutInfoData: {
data: {},
status: "idle",
},
brandLiveChannelInfoData: {
data: {},
status: "idle",
},
brandTsvInfoData: {
data: {},
status: "idle",
},
brandRecommendedShowInfoData: {
data: {},
status: "idle",
},
brandCreatorsInfoData: {
data: {},
status: "idle",
},
brandSeriesInfoData: {
data: {},
status: "idle",
},
brandCategoryInfoData: {
data: {},
status: "idle",
},
brandBestSellerData: {
data: {},
status: "idle",
},
brandShowroomData: {
data: {},
status: "idle",
},
};

99
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -24,10 +24,7 @@ import {
getBrandShowroom,
getBrandTSVInfo,
} from "../../actions/brandActions";
import {
// changeAppStatus,
setHidePopup,
} from "../../actions/commonActions";
import { setHidePopup } from "../../actions/commonActions";
import {
deleteMyUpcomingAlertShow,
getMyUpcomingAlertShow,
@@ -56,6 +53,7 @@ import UpComing from "./UpComing/UpComing";
import { setMainLiveUpcomingAlarm } from "../../actions/mainActions";
import useLogService from "../../hooks/useLogService";
import { SpotlightIds } from "../../utils/SpotlightIds";
const TEMPLATE_CODE_CONF = {
LIVE_CHANNELS: "BRD00101",
@@ -134,6 +132,7 @@ const getMessageByPopupType = (type) => {
case ACTIVE_POPUP.noShowPopup:
return STRING_CONF.NO_SHOW_MESSAGE;
default:
return;
}
@@ -155,9 +154,6 @@ export default function FeaturedBrandsPanel() {
const brandInfo = useSelector(
(state) => state.brand.brandInfoData.data.brandInfo
);
const brandInfoDataStatus = useSelector(
(state) => state.brand.brandInfoData.status
);
const brandTopImgInfo = useSelector(
(state) => state.brand.brandLayoutInfoData.data.brandTopImgInfo
@@ -165,9 +161,6 @@ export default function FeaturedBrandsPanel() {
const brandLayoutInfo = useSelector(
(state) => state.brand.brandLayoutInfoData.data.brandLayoutInfo
);
const brandLayoutInfoDataStatus = useSelector(
(state) => state.brand.brandLayoutInfoData.status
);
const brandChanInfo = useSelector(
(state) => state.brand.brandLiveChannelInfoData.data.brandChanInfo
@@ -179,23 +172,14 @@ export default function FeaturedBrandsPanel() {
(state) =>
state.brand.brandLiveChannelInfoData.data.brandLiveChannelUpcoming
);
const brandLiveChannelInfoDataStatus = useSelector(
(state) => state.brand.brandLiveChannelInfoData.status
);
const brandTsvInfo = useSelector(
(state) => state.brand.brandTsvInfoData.data.brandTsvInfo
);
const brandTsvInfoDataStatus = useSelector(
(state) => state.brand.brandTsvInfoData.status
);
const brandBestSellerInfo = useSelector(
(state) => state.brand.brandBestSellerData.data.brandBestSellerInfo
);
const brandBestSellerDataStatus = useSelector(
(state) => state.brand.brandBestSellerData.status
);
const brandRecommendedShowCategoryInfo = useSelector(
(state) =>
@@ -206,9 +190,6 @@ export default function FeaturedBrandsPanel() {
(state) =>
state.brand.brandRecommendedShowInfoData.data.brandRecommendedShowInfo
);
const brandRecommendedShowInfoDataStatus = useSelector(
(state) => state.brand.brandRecommendedShowInfoData.status
);
const brandCreatorsInfo = useSelector(
(state) => state.brand.brandCreatorsInfoData.data.brandCreatorsInfo
@@ -216,9 +197,6 @@ export default function FeaturedBrandsPanel() {
const barndCreatorsShowInfo = useSelector(
(state) => state.brand.brandCreatorsInfoData.data.barndCreatorsShowInfo
);
const brandCreatorsInfoDataStatus = useSelector(
(state) => state.brand.brandCreatorsInfoData.status
);
const brandSeriesGroupInfo = useSelector(
(state) => state.brand.brandSeriesInfoData.data.brandSeriesGroupInfo
@@ -226,9 +204,6 @@ export default function FeaturedBrandsPanel() {
const brandSeriesInfo = useSelector(
(state) => state.brand.brandSeriesInfoData.data.brandSeriesInfo
);
const brandSeriesInfoDataStatus = useSelector(
(state) => state.brand.brandSeriesInfoData.status
);
const brandCategoryInfo = useSelector(
(state) => state.brand.brandCategoryInfoData.data.brandCategoryInfo
@@ -236,16 +211,10 @@ export default function FeaturedBrandsPanel() {
const brandCategoryProductInfo = useSelector(
(state) => state.brand.brandCategoryInfoData.data.brandCategoryProductInfo
);
const brandCategoryInfoDataStatus = useSelector(
(state) => state.brand.brandCategoryInfoData.status
);
const brandShowroomInfo = useSelector(
(state) => state.brand.brandShowroomData.data.brandShowroomInfo
);
const brandShowroomStatus = useSelector(
(state) => state.brand.brandShowroomData.status
);
const [firstFocusableTargetId, setFirstFocusableTargetId] = useState(null);
const [isInitialFocusOccurred, setIsInitialFocusOccurred] = useState(false);
@@ -266,34 +235,6 @@ export default function FeaturedBrandsPanel() {
const alamTimer = useRef(null);
const isLoading = useMemo(
() =>
[
brandInfoDataStatus,
brandLayoutInfoDataStatus,
brandLiveChannelInfoDataStatus,
brandTsvInfoDataStatus,
brandBestSellerDataStatus,
brandRecommendedShowInfoDataStatus,
brandCreatorsInfoDataStatus,
brandSeriesInfoDataStatus,
brandCategoryInfoDataStatus,
brandShowroomStatus,
].some((status) => status !== "fulfilled"),
[
brandInfoDataStatus,
brandLayoutInfoDataStatus,
brandLiveChannelInfoDataStatus,
brandTsvInfoDataStatus,
brandBestSellerDataStatus,
brandRecommendedShowInfoDataStatus,
brandCreatorsInfoDataStatus,
brandSeriesInfoDataStatus,
brandCategoryInfoDataStatus,
brandShowroomStatus,
]
);
const previousPanelIsDetail = useMemo(
() => Object.keys(panelInfo)?.length >= 6,
[panelInfo]
@@ -315,7 +256,7 @@ export default function FeaturedBrandsPanel() {
if (panelInfo) {
// console.log(
// "%c pyh panelInfo",
// "background: coral; color: white ",
// "background: dodgerblue; color: white ",
// panelInfo,
// Object.keys(panelInfo)?.length
// );
@@ -333,14 +274,6 @@ export default function FeaturedBrandsPanel() {
isCameThroughDeepLink,
]);
// useEffect(() => {
// const showLoadingPanel = isLoading
// ? { show: true, type: "wait" }
// : { show: false };
// dispatch(changeAppStatus({ showLoadingPanel }));
// }, [dispatch, isLoading]);
useEffect(() => {
if (!brandInfo) {
// console.log(
@@ -428,7 +361,7 @@ export default function FeaturedBrandsPanel() {
useEffect(() => {
if (firstFocusableTargetId && !isInitialFocusOccurred) {
// console.log("%c pyh focus effect", "background: green; color: white");
// console.log("%c pyh focus effect", "background: dodgerblue; color: white");
let targetId;
@@ -437,7 +370,7 @@ export default function FeaturedBrandsPanel() {
if (previousPanelIsDetail) {
// console.log(
// "%c pyh detail focus effect",
// "background: green; color: white"
// "background: dodgerblue; color: white"
// );
setSelectedPatncNm(
@@ -474,7 +407,7 @@ export default function FeaturedBrandsPanel() {
if (initialFocusTarget) {
// console.log(
// "%c pyh initialFocusTarget",
// "background: crimson; color: white",
// "background: dodgerblue; color: white",
// initialFocusTarget
// );
@@ -573,7 +506,7 @@ export default function FeaturedBrandsPanel() {
if (brandInfo) {
// console.log(
// "%c pyh ----------- unmounted -----------",
// "background: gray; color: white"
// "background: dodgerblue; color: white"
// );
const marker = document.querySelector(`[data-marker="scroll-marker"]`);
@@ -658,7 +591,7 @@ export default function FeaturedBrandsPanel() {
);
return (
<TPanel className={css.tPanel} id="tPanel">
<TPanel className={css.tPanel} id={SpotlightIds.TPANEL}>
<TBody
className={css.tBody}
cbScrollTo={getScrollToBody}
@@ -864,14 +797,12 @@ export default function FeaturedBrandsPanel() {
</div>
)}
{!isLoading && (
<TButton
className={css.tButton}
onClick={handleTopButtonClick}
size={null}
type={TYPES.topButton}
/>
)}
<TButton
className={css.tButton}
onClick={handleTopButtonClick}
size={null}
type={TYPES.topButton}
/>
</TBody>
<TPopUp

1
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Series/SeriesContents/SeriesImageCard/SeriesImageCard.jsx
View File

@@ -13,6 +13,7 @@ export default memo(function SeriesImageCard({
ariaLabel,
...rest
}) {
delete rest.seriesNm;
return (
<SpottableComponent className={css.card} aria-label={ariaLabel} {...rest}>
<CustomImage src={imageSource} alt={imageAlt} />

12
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Showroom/ShowroomNav/ShowroomNavItem/ShowroomNavItem.jsx
View File

@@ -36,6 +36,12 @@ export default function ShowroomNavItem({
const { roomId, roomNm } = brandShowroomInfoItem;
const selectedText =
(selectedRoomId ?? panelInfo?.roomId) === roomId ? "Selected " : "";
const allLabeltext =
selectedText + roomNm + " " + (itemIndex * 1 + 1) + " of " + length;
const handleBlur = useCallback(() => {
if (itemIndex === 0) {
handleStopScrolling();
@@ -98,12 +104,6 @@ export default function ShowroomNavItem({
scrollTopByDistance,
]);
const selectedText =
(selectedRoomId ?? panelInfo?.roomId) === roomId ? "Selected " : "";
const allLabeltext =
selectedText + roomNm + " " + (itemIndex * 1 + 1) + " of " + length;
console.log("###brandShowroomInfoItem", brandShowroomInfoItem);
return (
<li className={css.item}>
<TButton