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_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",

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

@@ -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({

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_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",

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

@@ -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;

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

@@ -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() {
<TBody className={css.container} scrollable={false}>
{/* 단일상품 영역 */}
{productData?.pmtSuptYn === "Y" && (
<SingleProduct selectedPatnrId={"11"} selectedPrdtId={"7280567"} />
)}
{/* 그룹상품 영역 */}
{isGroupOption && isGroupOption === "Y" && (
<GroupProduct
selectedPatnrId={panelInfo?.patnrId}
selectedPrdtId={panelInfo?.prdtId}
<SingleProduct
selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId}
/>
)}
{/* 구매불가상품 영역 */}
{productData?.pmtSuptYn === "N" && (
<UnableProduct
selectedPatnrId={panelInfo?.patnrId}
selectedPrdtId={panelInfo?.prdtId}
selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId}
/>
)}
{/* 그룹상품 영역 */}
{groupInfos && (
<GroupProduct
selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId}
/>
)}
{/* 테마그룹상품 영역*/}
{/* <ThemeProduct
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 ProductTag from "../components/common/ProductTag";
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";
export default function ProductOption({ children }) {
const productDataInfos = useSelector((state) => state.main.productData);
const isGroupOption = useSelector((state) => state.main.productGroupYn);
const { patncLogoPath, prdtId, prdtNm, revwGrd, pmtSuptYn } =
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 { 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 (
<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 && (
<TPopUp
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);
.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 {
useDispatch,
useSelector,
} from 'react-redux';
import { useDispatch, useSelector } from "react-redux";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import noGroupImg
from '../../../../../assets/images/img-my-info-billing@3x.png';
import { getMainCategoryDetail } from '../../../../actions/mainActions';
import { getProductGroup } from '../../../../actions/productActions';
import TScroller from '../../../../components/TScroller/TScroller';
import { $L } from '../../../../utils/helperMethods';
import css from './OptionGroup.module.less';
import noGroupImg from "../../../../../assets/images/img-my-info-billing@3x.png";
import { getMainCategoryDetail } from "../../../../actions/mainActions";
import { getProductGroup } from "../../../../actions/productActions";
import TScroller from "../../../../components/TScroller/TScroller";
import { $L } from "../../../../utils/helperMethods";
import css from "./OptionGroup.module.less";
const Container = SpotlightContainerDecorator(
{ 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 { useSelector } from 'react-redux';
import classNames from "classnames";
import { useSelector } from "react-redux";
import TButton from '../../../../components/TButton/TButton';
import TQRCode from '../../../../components/TQRCode/TQRCode';
import usePriceInfo from '../../../../hooks/usePriceInfo';
import { $L } from '../../../../utils/helperMethods';
import FavoriteBtn from '../common/FavoriteBtn';
import css from './OptionPartnerPrice.module.less';
import TButton from "../../../../components/TButton/TButton";
import TQRCode from "../../../../components/TQRCode/TQRCode";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import { $L } from "../../../../utils/helperMethods";
import FavoriteBtn from "../common/FavoriteBtn";
import css from "./OptionPartnerPrice.module.less";
export default function OptionPartnerPrice({
selectedPatnrId,
@@ -31,7 +31,6 @@ export default function OptionPartnerPrice({
} = productInfos;
const { discountRate } = usePriceInfo(priceInfo) || {};
const TYPE_CASE = {
case1: price2 && !price3 && !price5,
case2: price2 && price3 && !price5,
@@ -46,7 +45,9 @@ export default function OptionPartnerPrice({
const renderPriceItem = useCallback(() => {
if (productInfos) {
console.log("#구매불가 컴포넌트1111");
if (rewd) {
console.log("#구매불가 컴포넌트2222");
return (
<div className={css.wrapper}>
<div className={css.rewdTopLayer}>
@@ -123,8 +124,8 @@ export default function OptionPartnerPrice({
}
}
} else {
console.log("OptionPartnerPrice productInfos no data");
return;
console.log("#OptionPartnerPrice productInfos no data");
return <div>'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'</div>;
}
}, [productInfos]);

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

@@ -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 (
<SpottableComponent
@@ -286,7 +275,7 @@ export default function SingleProductOption({
</TButton>
<FavoriteBtn
selectedPatnrId={selectedPatnrId}
selectedPardtId={selectedPrdtId}
selectedPrdtId={selectedPrdtId}
/>
</Container>
{/* 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 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 (
<div className={css.container}>
<ProductThumbnail />