diff --git a/com.twin.app.shoptime/assets/images/icons/ic-heart-sel@3x.png b/com.twin.app.shoptime/assets/images/icons/ic-heart-sel@3x.png new file mode 100644 index 00000000..2f8a54c1 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/icons/ic-heart-sel@3x.png differ diff --git a/com.twin.app.shoptime/src/actions/actionTypes.js b/com.twin.app.shoptime/src/actions/actionTypes.js index 3b102a9c..cf59b15b 100644 --- a/com.twin.app.shoptime/src/actions/actionTypes.js +++ b/com.twin.app.shoptime/src/actions/actionTypes.js @@ -67,6 +67,7 @@ export const types = { GET_MY_CUSTOMERS: "GET_MY_CUSTOMERS", GET_MY_FAVORITE: "GET_MY_FAVORITE", DELETE_MY_FAVORITE: "DELETE_MY_FAVORITE", + GET_MY_FAVORITE_FLAG: "GET_MY_FAVORITE_FLAG", // onSale actions GET_ON_SALE_INFO: "GET_ON_SALE_INFO", diff --git a/com.twin.app.shoptime/src/actions/mainActions.js b/com.twin.app.shoptime/src/actions/mainActions.js index cb3f6666..e4f7045a 100644 --- a/com.twin.app.shoptime/src/actions/mainActions.js +++ b/com.twin.app.shoptime/src/actions/mainActions.js @@ -144,10 +144,37 @@ export const getMainYouMayLike = onFail ); }; +// 찜 여부 확인 IF-LGSP-075 +export const getMyFavoriteFlag = (params) => (dispatch, getState) => { + const { patnrId, prdtId } = params; + console.log("#patnrId , prdtId", patnrId, prdtId); + const onSuccess = (response) => { + console.log("getMyFavoriteFlag onSuccess ", response.data); + dispatch({ + type: types.GET_MY_FAVORITE_FLAG, + payload: response.data.data, + }); + }; + const onFail = (error) => { + console.error("getMyFavoriteFlag onFail", error); + }; + + TAxios( + dispatch, + getState, + "get", + URLS.GET_MY_FAVORITE_FLAG, + { patnrId, prdtId }, + {}, + onSuccess, + onFail + ); +}; // 상품 찜하기 IF-LGSP-014 export const setMainLikeCategory = (params) => (dispatch, getState) => { const { patnrId, prdtId } = params; + const onSuccess = (response) => { console.log("setMainLikeCategory onSuccess ", response.data); dispatch({ diff --git a/com.twin.app.shoptime/src/api/apiConfig.js b/com.twin.app.shoptime/src/api/apiConfig.js index 21d1e841..cd8007d4 100644 --- a/com.twin.app.shoptime/src/api/apiConfig.js +++ b/com.twin.app.shoptime/src/api/apiConfig.js @@ -53,6 +53,7 @@ export const URLS = { GET_MY_CUSTOMERS: "/lgsp/v1/mypage/customers.lge", GET_MY_FAVORITE: "/lgsp/v1/mypage/favorite.lge", DELETE_MY_FAVORITE: "/lgsp/v1/mypage/favorite.lge", + GET_MY_FAVORITE_FLAG: "/lgsp/v1/mypage/favorite/flag.lge", //search controller GET_SEARCH: "/lgsp/v1/search/list.lge", diff --git a/com.twin.app.shoptime/src/reducers/myPageReducer.js b/com.twin.app.shoptime/src/reducers/myPageReducer.js index f12ad3bc..81298ab0 100644 --- a/com.twin.app.shoptime/src/reducers/myPageReducer.js +++ b/com.twin.app.shoptime/src/reducers/myPageReducer.js @@ -6,6 +6,7 @@ const initialState = { contactData: {}, noticeData: {}, favoriteData: {}, + favoriteFlagData: {}, }; export const myPageReducer = (state = initialState, action) => { @@ -44,6 +45,11 @@ export const myPageReducer = (state = initialState, action) => { favorites: action.payload, }, }; + case types.GET_MY_FAVORITE_FLAG: + return { + ...state, + favoriteFlagData: action.payload, + }; default: return state; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 8d46870f..6e064221 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx @@ -1,65 +1,72 @@ -import React, { - useEffect, - useState, -} from 'react'; +import React, { useCallback, useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; + +import { getProductCouponSearch } from "../../actions/couponActions"; import { - useDispatch, - useSelector, -} from 'react-redux'; - -import { getProductCouponSearch } from '../../actions/couponActions'; -import { getMainCategoryDetail } from '../../actions/mainActions'; -import { popPanel } from '../../actions/panelActions'; -import { getProductGroup } from '../../actions/productActions'; -import TBody from '../../components/TBody/TBody'; -import THeader from '../../components/THeader/THeader'; -import TPanel from '../../components/TPanel/TPanel'; -import ProductOption from './components/ProductOption'; -import ProductThumbnail from './components/ProductThumbnail'; -import GroupProduct from './container/GroupProduct'; -import SingleProduct from './container/SingleProduct'; -import ThemeProduct from './container/ThemeProduct'; -import UnableProduct from './container/UnableProduct'; -import YouMayLike from './container/YouMayLike'; -import css from './DetailPanel.module.less'; + getMainCategoryDetail, + getMyFavoriteFlag, +} from "../../actions/mainActions"; +import { popPanel } from "../../actions/panelActions"; +import { getProductGroup } from "../../actions/productActions"; +import TBody from "../../components/TBody/TBody"; +import THeader from "../../components/THeader/THeader"; +import TPanel from "../../components/TPanel/TPanel"; +import ProductOption from "./components/ProductOption"; +import ProductThumbnail from "./components/ProductThumbnail"; +import GroupProduct from "./container/GroupProduct"; +import SingleProduct from "./container/SingleProduct"; +import ThemeProduct from "./container/ThemeProduct"; +import UnableProduct from "./container/UnableProduct"; +import YouMayLike from "./container/YouMayLike"; +import css from "./DetailPanel.module.less"; export default function ItemDetail() { - const [panelInfo, setPaneInfo] = useState(); + const [selectedPatnrId, setSelectedPatnrId] = useState(); + const [selectedPrdtId, setSelectedPrtdId] = useState(); const productData = useSelector((state) => state.main.productData); - const isGroupOption = useSelector((state) => state.main.productGroupYn); const panels = useSelector((state) => state.panels.panels); + const groupInfos = useSelector((state) => state.product.groupInfo); const dispatch = useDispatch(); - const getPanelInfo = () => { + const getPanelInfo = useCallback(() => { if (panels) { for (let i = 0; i < panels.length; i++) { if (panels[i].name === "detailpanel") { - setPaneInfo(panels[i].panelInfo); + setSelectedPatnrId(panels[i].panelInfo.patnrId); + setSelectedPrtdId(panels[i].panelInfo.prdtId); } } } - }; + }, [panels]); useEffect(() => { getPanelInfo(); - if (panels && panelInfo) { - dispatch( - getMainCategoryDetail({ - patnrId: panelInfo?.patnrId, - prdtId: panelInfo?.prdtId, - }) - ); + dispatch( + getMainCategoryDetail({ + patnrId: selectedPatnrId, + prdtId: selectedPrdtId, + }) + ); - dispatch( - getProductGroup({ - patnrId: panelInfo?.patnrId, - prdtId: panelInfo?.prdtId, - }) - ); - } - }, [dispatch, panels, panelInfo]); + dispatch( + getProductGroup({ + patnrId: selectedPatnrId, + prdtId: selectedPrdtId, + }) + ); + dispatch( + getProductGroup({ + patnrId: selectedPatnrId, + prdtId: selectedPrdtId, + }) + ); + + dispatch( + getMyFavoriteFlag({ patnrId: selectedPatnrId, prdtId: selectedPrdtId }) + ); + }, [dispatch, panels, selectedPatnrId, selectedPrdtId]); const onClick = () => { dispatch(popPanel()); @@ -75,22 +82,26 @@ export default function ItemDetail() { {/* 단일상품 영역 */} {productData?.pmtSuptYn === "Y" && ( - - )} - {/* 그룹상품 영역 */} - {isGroupOption && isGroupOption === "Y" && ( - )} {/* 구매불가상품 영역 */} {productData?.pmtSuptYn === "N" && ( )} + {/* 그룹상품 영역 */} + {groupInfos && ( + + )} + {/* 테마그룹상품 영역*/} {/* state.main.productData); - const isGroupOption = useSelector((state) => state.main.productGroupYn); const { patncLogoPath, prdtId, prdtNm, revwGrd, pmtSuptYn } = productDataInfos; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx index 4adf8278..cbf811cf 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx @@ -1,5 +1,6 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useState } from "react"; +import classNames from "classnames"; import { useDispatch, useSelector } from "react-redux"; import { setHidePopup, setShowPopup } from "../../../../actions/commonActions"; @@ -16,24 +17,38 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) { const { popupVisible, activePopup } = useSelector( (state) => state.common.popup ); - const { favorYn } = productInfos; const { loginUserData } = useSelector((state) => state.common.appStatus); + const { favorFlag } = useSelector((state) => state.myPage.favoriteFlagData); - const handleFavoriteClick = useCallback(() => { - if (!loginUserData.userInfo) { - dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); - } else { - dispatch( - setMainLikeCategory({ - patnrId: selectedPatnrId, - prdtId: selectedPrdtId, - }) - ); - } + useEffect(() => { + console.log("#favorflag", favorFlag); + console.log("#favorYn", favorYn); + }, [favorFlag]); - // dispatch(setShowPopup(Config.ACTIVE_POPUP.favoritePopup)); - }, [dispatch]); + const handleFavoriteClick = useCallback( + (type) => { + if (!loginUserData.userInfo) { + dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); + return; + } + switch (type) { + case "N": + dispatch( + setMainLikeCategory({ + patnrId: selectedPatnrId, + prdtId: selectedPrdtId, + }) + ); + dispatch(setShowPopup(Config.ACTIVE_POPUP.favoritePopup)); + break; + case "Y": + dispatch(setShowPopup(Config.ACTIVE_POPUP.favoritePopup)); + break; + } + }, + [dispatch, selectedPatnrId, selectedPrdtId] + ); const onClose = useCallback(() => { dispatch(setHidePopup()); @@ -41,7 +56,12 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) { return (
- + handleFavoriteClick(favorFlag)} + /> {activePopup === Config.ACTIVE_POPUP.favoritePopup && ( { if (productInfos) { + console.log("#구매불가 컴포넌트1111"); if (rewd) { + console.log("#구매불가 컴포넌트2222"); return (
@@ -123,8 +124,8 @@ export default function OptionPartnerPrice({ } } } else { - console.log("OptionPartnerPrice productInfos no data"); - return; + console.log("#OptionPartnerPrice productInfos no data"); + return
'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'
; } }, [productInfos]); diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/SingleProductOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/SingleProductOption.jsx index 498f2744..0fbc5624 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/SingleProductOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/SingleProductOption.jsx @@ -63,9 +63,6 @@ export default function SingleProductOption({ [selectedBtnOptIdx] ); - useEffect(() => { - console.log("#loginUserData", loginUserData); - }, [loginUserData]); const [couponTypes, setCouponTypes] = useState(null); const { priceInfo, shippingCharge, patncNm } = productData; @@ -89,13 +86,6 @@ export default function SingleProductOption({ }) ); }, [dispatch]); - - useEffect(() => { - // console.log("#productData", productData); - console.log("#couponInfo", partnerCoupon, shoptiemCoupon); - // console.log("#productOptionInfos", productOptionInfos); - }, [productOptionInfos]); - const handleIncrement = useCallback(() => { setQuantity(quantity + 1); }, [quantity]); @@ -147,7 +137,6 @@ export default function SingleProductOption({ const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0]; const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0]; - //Spotlight.focus("spotlight-coupon-0"); const handleItemClick = () => {}; return ( {/* LOGIN POPUP */} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.jsx b/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.jsx index c1cd49f3..358f61d6 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.jsx @@ -1,11 +1,12 @@ -import React from 'react'; +import React from "react"; -import OptionPartnerPrice from '../components/optionTypes/OptionPartnerPrice'; -import ProductOption from '../components/ProductOption'; -import ProductThumbnail from '../components/ProductThumbnail'; -import css from './UnableProduct.module.less'; +import OptionPartnerPrice from "../components/optionTypes/OptionPartnerPrice"; +import ProductOption from "../components/ProductOption"; +import ProductThumbnail from "../components/ProductThumbnail"; +import css from "./UnableProduct.module.less"; export default function UnableProduct({ selectedPatnrId, selectedPrdtId }) { + console.log("#Unable"); return (