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

찜 등록 및 조회

Browse Source
This commit is contained in:
고동영
2024-03-12 18:30:21 +09:00
parent bea05e544b
commit 3bf4920cb6
13 changed files with 170 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
com.twin.app.shoptime/assets/images/icons/ic-heart-sel@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
com.twin.app.shoptime/src/actions/actionTypes.js
View File

@@ -67,6 +67,7 @@ export const types = {
GET_MY_CUSTOMERS: "GET_MY_CUSTOMERS", GET_MY_CUSTOMERS: "GET_MY_CUSTOMERS",
GET_MY_FAVORITE: "GET_MY_FAVORITE", GET_MY_FAVORITE: "GET_MY_FAVORITE",
DELETE_MY_FAVORITE: "DELETE_MY_FAVORITE", DELETE_MY_FAVORITE: "DELETE_MY_FAVORITE",
GET_MY_FAVORITE_FLAG: "GET_MY_FAVORITE_FLAG",
// onSale actions // onSale actions
GET_ON_SALE_INFO: "GET_ON_SALE_INFO", GET_ON_SALE_INFO: "GET_ON_SALE_INFO",

27
com.twin.app.shoptime/src/actions/mainActions.js
View File

@@ -144,10 +144,37 @@ export const getMainYouMayLike =
onFail 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 // 상품 찜하기 IF-LGSP-014
export const setMainLikeCategory = (params) => (dispatch, getState) => { export const setMainLikeCategory = (params) => (dispatch, getState) => {
const { patnrId, prdtId } = params; const { patnrId, prdtId } = params;
const onSuccess = (response) => { const onSuccess = (response) => {
console.log("setMainLikeCategory onSuccess ", response.data); console.log("setMainLikeCategory onSuccess ", response.data);
dispatch({ dispatch({

1
com.twin.app.shoptime/src/api/apiConfig.js
View File

@@ -53,6 +53,7 @@ export const URLS = {
GET_MY_CUSTOMERS: "/lgsp/v1/mypage/customers.lge", GET_MY_CUSTOMERS: "/lgsp/v1/mypage/customers.lge",
GET_MY_FAVORITE: "/lgsp/v1/mypage/favorite.lge", GET_MY_FAVORITE: "/lgsp/v1/mypage/favorite.lge",
DELETE_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 //search controller
GET_SEARCH: "/lgsp/v1/search/list.lge", GET_SEARCH: "/lgsp/v1/search/list.lge",

6
com.twin.app.shoptime/src/reducers/myPageReducer.js
View File

@@ -6,6 +6,7 @@ const initialState = {
contactData: {}, contactData: {},
noticeData: {}, noticeData: {},
favoriteData: {}, favoriteData: {},
favoriteFlagData: {},
}; };
export const myPageReducer = (state = initialState, action) => { export const myPageReducer = (state = initialState, action) => {
@@ -44,6 +45,11 @@ export const myPageReducer = (state = initialState, action) => {
favorites: action.payload, favorites: action.payload,
}, },
}; };
case types.GET_MY_FAVORITE_FLAG:
return {
...state,
favoriteFlagData: action.payload,
};
default: default:
return state; return state;

115
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -1,65 +1,72 @@
import React, { import React, { useCallback, useEffect, useState } from "react";
useEffect,
useState,
} from 'react';
import { useDispatch, useSelector } from "react-redux";
import { getProductCouponSearch } from "../../actions/couponActions";
import { import {
useDispatch, getMainCategoryDetail,
useSelector, getMyFavoriteFlag,
} from 'react-redux'; } from "../../actions/mainActions";
import { popPanel } from "../../actions/panelActions";
import { getProductCouponSearch } from '../../actions/couponActions'; import { getProductGroup } from "../../actions/productActions";
import { getMainCategoryDetail } from '../../actions/mainActions'; import TBody from "../../components/TBody/TBody";
import { popPanel } from '../../actions/panelActions'; import THeader from "../../components/THeader/THeader";
import { getProductGroup } from '../../actions/productActions'; import TPanel from "../../components/TPanel/TPanel";
import TBody from '../../components/TBody/TBody'; import ProductOption from "./components/ProductOption";
import THeader from '../../components/THeader/THeader'; import ProductThumbnail from "./components/ProductThumbnail";
import TPanel from '../../components/TPanel/TPanel'; import GroupProduct from "./container/GroupProduct";
import ProductOption from './components/ProductOption'; import SingleProduct from "./container/SingleProduct";
import ProductThumbnail from './components/ProductThumbnail'; import ThemeProduct from "./container/ThemeProduct";
import GroupProduct from './container/GroupProduct'; import UnableProduct from "./container/UnableProduct";
import SingleProduct from './container/SingleProduct'; import YouMayLike from "./container/YouMayLike";
import ThemeProduct from './container/ThemeProduct'; import css from "./DetailPanel.module.less";
import UnableProduct from './container/UnableProduct';
import YouMayLike from './container/YouMayLike';
import css from './DetailPanel.module.less';
export default function ItemDetail() { export default function ItemDetail() {
const [panelInfo, setPaneInfo] = useState(); const [selectedPatnrId, setSelectedPatnrId] = useState();
const [selectedPrdtId, setSelectedPrtdId] = useState();
const productData = useSelector((state) => state.main.productData); const productData = useSelector((state) => state.main.productData);
const isGroupOption = useSelector((state) => state.main.productGroupYn);
const panels = useSelector((state) => state.panels.panels); const panels = useSelector((state) => state.panels.panels);
const groupInfos = useSelector((state) => state.product.groupInfo);
const dispatch = useDispatch(); const dispatch = useDispatch();
const getPanelInfo = () => { const getPanelInfo = useCallback(() => {
if (panels) { if (panels) {
for (let i = 0; i < panels.length; i++) { for (let i = 0; i < panels.length; i++) {
if (panels[i].name === "detailpanel") { if (panels[i].name === "detailpanel") {
setPaneInfo(panels[i].panelInfo); setSelectedPatnrId(panels[i].panelInfo.patnrId);
setSelectedPrtdId(panels[i].panelInfo.prdtId);
} }
} }
} }
}; }, [panels]);
useEffect(() => { useEffect(() => {
getPanelInfo(); getPanelInfo();
if (panels && panelInfo) { dispatch(
dispatch( getMainCategoryDetail({
getMainCategoryDetail({ patnrId: selectedPatnrId,
patnrId: panelInfo?.patnrId, prdtId: selectedPrdtId,
prdtId: panelInfo?.prdtId, })
}) );
);
dispatch( dispatch(
getProductGroup({ getProductGroup({
patnrId: panelInfo?.patnrId, patnrId: selectedPatnrId,
prdtId: panelInfo?.prdtId, prdtId: selectedPrdtId,
}) })
); );
} dispatch(
}, [dispatch, panels, panelInfo]); getProductGroup({
patnrId: selectedPatnrId,
prdtId: selectedPrdtId,
})
);
dispatch(
getMyFavoriteFlag({ patnrId: selectedPatnrId, prdtId: selectedPrdtId })
);
}, [dispatch, panels, selectedPatnrId, selectedPrdtId]);
const onClick = () => { const onClick = () => {
dispatch(popPanel()); dispatch(popPanel());
@@ -75,22 +82,26 @@ export default function ItemDetail() {
<TBody className={css.container} scrollable={false}> <TBody className={css.container} scrollable={false}>
{/* 단일상품 영역 */} {/* 단일상품 영역 */}
{productData?.pmtSuptYn === "Y" && ( {productData?.pmtSuptYn === "Y" && (
<SingleProduct selectedPatnrId={"11"} selectedPrdtId={"7280567"} /> <SingleProduct
)} selectedPatnrId={selectedPatnrId}
{/* 그룹상품 영역 */} selectedPrdtId={selectedPrdtId}
{isGroupOption && isGroupOption === "Y" && (
<GroupProduct
selectedPatnrId={panelInfo?.patnrId}
selectedPrdtId={panelInfo?.prdtId}
/> />
)} )}
{/* 구매불가상품 영역 */} {/* 구매불가상품 영역 */}
{productData?.pmtSuptYn === "N" && ( {productData?.pmtSuptYn === "N" && (
<UnableProduct <UnableProduct
selectedPatnrId={panelInfo?.patnrId} selectedPatnrId={selectedPatnrId}
selectedPrdtId={panelInfo?.prdtId} selectedPrdtId={selectedPrdtId}
/> />
)} )}
{/* 그룹상품 영역 */}
{groupInfos && (
<GroupProduct
selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId}
/>
)}
{/* 테마그룹상품 영역*/} {/* 테마그룹상품 영역*/}
{/* <ThemeProduct {/* <ThemeProduct
selectedPatnrId={panelInfo?.patnrId} selectedPatnrId={panelInfo?.patnrId}

4
com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.jsx
View File

@@ -5,14 +5,10 @@ import { useSelector } from "react-redux";
import { $L } from "../../../utils/helperMethods"; import { $L } from "../../../utils/helperMethods";
import ProductTag from "../components/common/ProductTag"; import ProductTag from "../components/common/ProductTag";
import StarRating from "../components/common/StarRating"; import StarRating from "../components/common/StarRating";
import OptionGroup from "./optionTypes/OptionGroup";
import OptionPartnerPrice from "./optionTypes/OptionPartnerPrice";
import OptionCommon from "./optionTypes/SingleProductOption";
import css from "./ProductOption.module.less"; import css from "./ProductOption.module.less";
export default function ProductOption({ children }) { export default function ProductOption({ children }) {
const productDataInfos = useSelector((state) => state.main.productData); const productDataInfos = useSelector((state) => state.main.productData);
const isGroupOption = useSelector((state) => state.main.productGroupYn);
const { patncLogoPath, prdtId, prdtNm, revwGrd, pmtSuptYn } = const { patncLogoPath, prdtId, prdtNm, revwGrd, pmtSuptYn } =
productDataInfos; productDataInfos;

52
com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx
View File

@@ -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 { useDispatch, useSelector } from "react-redux";
import { setHidePopup, setShowPopup } from "../../../../actions/commonActions"; import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
@@ -16,24 +17,38 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
const { popupVisible, activePopup } = useSelector( const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup (state) => state.common.popup
); );
const { favorYn } = productInfos; const { favorYn } = productInfos;
const { loginUserData } = useSelector((state) => state.common.appStatus); const { loginUserData } = useSelector((state) => state.common.appStatus);
const { favorFlag } = useSelector((state) => state.myPage.favoriteFlagData);
const handleFavoriteClick = useCallback(() => { useEffect(() => {
if (!loginUserData.userInfo) { console.log("#favorflag", favorFlag);
dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); console.log("#favorYn", favorYn);
} else { }, [favorFlag]);
dispatch(
setMainLikeCategory({
patnrId: selectedPatnrId,
prdtId: selectedPrdtId,
})
);
}
// dispatch(setShowPopup(Config.ACTIVE_POPUP.favoritePopup)); const handleFavoriteClick = useCallback(
}, [dispatch]); (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(() => { const onClose = useCallback(() => {
dispatch(setHidePopup()); dispatch(setHidePopup());
@@ -41,7 +56,12 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
return ( return (
<div className={css.favorBtnContainer}> <div className={css.favorBtnContainer}>
<TButton className={css.favorBtn} onClick={handleFavoriteClick} /> <TButton
className={classNames(
favorFlag === "N" ? css.favorBtn : css.favorUnableBtn
)}
onClick={() => handleFavoriteClick(favorFlag)}
/>
{activePopup === Config.ACTIVE_POPUP.favoritePopup && ( {activePopup === Config.ACTIVE_POPUP.favoritePopup && (
<TPopUp <TPopUp
kind="textPopup" kind="textPopup"

6
com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.module.less
View File

@@ -10,4 +10,10 @@
background-image: url(../../../../../assets/images/icons/ic-heart-nor@3x.png); background-image: url(../../../../../assets/images/icons/ic-heart-nor@3x.png);
.imgElement(54px, 54px, center, center); .imgElement(54px, 54px, center, center);
} }
.favorUnableBtn {
min-width: 78px;
height: 78px;
background-image: url(../../../../../assets/images/icons/ic-heart-sel@3x.png);
.imgElement(54px, 54px, center, center);
}
} }

25
com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
View File

@@ -1,21 +1,16 @@
import React, { useEffect } from 'react'; import React, { useEffect } from "react";
import { import { useDispatch, useSelector } from "react-redux";
useDispatch,
useSelector,
} from 'react-redux';
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from "@enact/spotlight/Spottable";
import Spottable from '@enact/spotlight/Spottable';
import noGroupImg import noGroupImg from "../../../../../assets/images/img-my-info-billing@3x.png";
from '../../../../../assets/images/img-my-info-billing@3x.png'; import { getMainCategoryDetail } from "../../../../actions/mainActions";
import { getMainCategoryDetail } from '../../../../actions/mainActions'; import { getProductGroup } from "../../../../actions/productActions";
import { getProductGroup } from '../../../../actions/productActions'; import TScroller from "../../../../components/TScroller/TScroller";
import TScroller from '../../../../components/TScroller/TScroller'; import { $L } from "../../../../utils/helperMethods";
import { $L } from '../../../../utils/helperMethods'; import css from "./OptionGroup.module.less";
import css from './OptionGroup.module.less';
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", continue5WayHold: true }, { enterTo: "last-focused", continue5WayHold: true },

25
com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionPartnerPrice.jsx
View File

@@ -1,14 +1,14 @@
import React, { useCallback } from 'react'; import React, { useCallback } from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { useSelector } from 'react-redux'; import { useSelector } from "react-redux";
import TButton from '../../../../components/TButton/TButton'; import TButton from "../../../../components/TButton/TButton";
import TQRCode from '../../../../components/TQRCode/TQRCode'; import TQRCode from "../../../../components/TQRCode/TQRCode";
import usePriceInfo from '../../../../hooks/usePriceInfo'; import usePriceInfo from "../../../../hooks/usePriceInfo";
import { $L } from '../../../../utils/helperMethods'; import { $L } from "../../../../utils/helperMethods";
import FavoriteBtn from '../common/FavoriteBtn'; import FavoriteBtn from "../common/FavoriteBtn";
import css from './OptionPartnerPrice.module.less'; import css from "./OptionPartnerPrice.module.less";
export default function OptionPartnerPrice({ export default function OptionPartnerPrice({
selectedPatnrId, selectedPatnrId,
@@ -31,7 +31,6 @@ export default function OptionPartnerPrice({
} = productInfos; } = productInfos;
const { discountRate } = usePriceInfo(priceInfo) || {}; const { discountRate } = usePriceInfo(priceInfo) || {};
const TYPE_CASE = { const TYPE_CASE = {
case1: price2 && !price3 && !price5, case1: price2 && !price3 && !price5,
case2: price2 && price3 && !price5, case2: price2 && price3 && !price5,
@@ -46,7 +45,9 @@ export default function OptionPartnerPrice({
const renderPriceItem = useCallback(() => { const renderPriceItem = useCallback(() => {
if (productInfos) { if (productInfos) {
console.log("#구매불가 컴포넌트1111");
if (rewd) { if (rewd) {
console.log("#구매불가 컴포넌트2222");
return ( return (
<div className={css.wrapper}> <div className={css.wrapper}>
<div className={css.rewdTopLayer}> <div className={css.rewdTopLayer}>
@@ -123,8 +124,8 @@ export default function OptionPartnerPrice({
} }
} }
} else { } else {
console.log("OptionPartnerPrice productInfos no data"); console.log("#OptionPartnerPrice productInfos no data");
return; return <div>'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'</div>;
} }
}, [productInfos]); }, [productInfos]);

13
com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/SingleProductOption.jsx
View File

@@ -63,9 +63,6 @@ export default function SingleProductOption({
[selectedBtnOptIdx] [selectedBtnOptIdx]
); );
useEffect(() => {
console.log("#loginUserData", loginUserData);
}, [loginUserData]);
const [couponTypes, setCouponTypes] = useState(null); const [couponTypes, setCouponTypes] = useState(null);
const { priceInfo, shippingCharge, patncNm } = productData; const { priceInfo, shippingCharge, patncNm } = productData;
@@ -89,13 +86,6 @@ export default function SingleProductOption({
}) })
); );
}, [dispatch]); }, [dispatch]);
useEffect(() => {
// console.log("#productData", productData);
console.log("#couponInfo", partnerCoupon, shoptiemCoupon);
// console.log("#productOptionInfos", productOptionInfos);
}, [productOptionInfos]);
const handleIncrement = useCallback(() => { const handleIncrement = useCallback(() => {
setQuantity(quantity + 1); setQuantity(quantity + 1);
}, [quantity]); }, [quantity]);
@@ -147,7 +137,6 @@ export default function SingleProductOption({
const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0]; const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0];
const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0]; const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0];
//Spotlight.focus("spotlight-coupon-0");
const handleItemClick = () => {}; const handleItemClick = () => {};
return ( return (
<SpottableComponent <SpottableComponent
@@ -286,7 +275,7 @@ export default function SingleProductOption({
</TButton> </TButton>
<FavoriteBtn <FavoriteBtn
selectedPatnrId={selectedPatnrId} selectedPatnrId={selectedPatnrId}
selectedPardtId={selectedPrdtId} selectedPrdtId={selectedPrdtId}
/> />
</Container> </Container>
{/* LOGIN POPUP */} {/* LOGIN POPUP */}

11
com.twin.app.shoptime/src/views/DetailPanel/container/UnableProduct.jsx
View File

@@ -1,11 +1,12 @@
import React from 'react'; import React from "react";
import OptionPartnerPrice from '../components/optionTypes/OptionPartnerPrice'; import OptionPartnerPrice from "../components/optionTypes/OptionPartnerPrice";
import ProductOption from '../components/ProductOption'; import ProductOption from "../components/ProductOption";
import ProductThumbnail from '../components/ProductThumbnail'; import ProductThumbnail from "../components/ProductThumbnail";
import css from './UnableProduct.module.less'; import css from "./UnableProduct.module.less";
export default function UnableProduct({ selectedPatnrId, selectedPrdtId }) { export default function UnableProduct({ selectedPatnrId, selectedPrdtId }) {
console.log("#Unable");
return ( return (
<div className={css.container}> <div className={css.container}>
<ProductThumbnail /> <ProductThumbnail />