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

유메이라이크 작업중 api추가

Browse Source
This commit is contained in:
고동영
2024-02-28 18:25:27 +09:00
parent 4bc0deded0
commit d6ec9e12c0
13 changed files with 254 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,6 +48,7 @@ export const types = {
APPEND_SUB_CATEGORY: "APPEND_SUB_CATEGORY",
GET_TOP_20_SHOW: "GET_TOP_20_SHOW",
GET_PRODUCT_DETAIL: "GET_PRODUCT_DETAIL",
GET_YOUMAYLIKE: "GET_YOUMAYLIKE",
// myPage actions
GET_MY_RECOMMANDED_KEYWORD: "GET_MY_RECOMMANDED_KEYWORD",

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

@@ -4,6 +4,7 @@ import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from "../utils/Config";
import * as HelperMethods from "../utils/helperMethods";
import { types } from "./actionTypes";
// 디테일상품 조회 LF-LGSP-015
export const getMainCategoryDetail = (props) => (dispatch, getState) => {
const { patnrId, prdtId } = props;
const onSuccess = (response) => {
@@ -115,3 +116,31 @@ export const getTop20Show = () => (dispatch, getState) => {
onFail
);
};
export const getMainYouMayLike =
({ lgCatCd }) =>
(dispatch, getState) => {
const onSuccess = (response) => {
console.log("getMainYouMayLike onSuccess ", response.data);
dispatch({
type: types.GET_YOUMAYLIKE,
payload: response.data.data,
});
};
const onFail = (error) => {
console.error("getMainYouMayLike onFail", error);
};
TAxios(
dispatch,
getState,
"get",
URLS.GET_YOUMAYLIKE,
{ lgCatCd },
{},
onSuccess,
onFail
);
};

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

@@ -54,6 +54,7 @@ export const URLS = {
GET_SUB_CATEGORY: "/lgsp/v1/main/subcategory.lge",
GET_TOP20_SHOW: "/lgsp/v1/main/top/show.lge",
GET_PRODUCT_DETAIL: "/lgsp/v1/main/category/product/detail.lge",
GET_YOUMAYLIKE: "/lgsp/v1/main/youmaylike.lge",
//event controller
GET_WELCOME_EVENT_INFO: "/lgsp/v1/event/event.lge",

5
com.twin.app.shoptime/src/components/THeader/THeader.module.less
View File

@@ -19,7 +19,6 @@
.button {
.size(@w: 60px, @h: 60px);
background-size: cover;
background-position: center;
background-image: url("../../../assets/images/btn/btn-60-bk-back-nor@3x.png");
@@ -28,8 +27,6 @@
position: relative;
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius:0px);
}
background-image: url("../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
}
}

1
com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
View File

@@ -15,7 +15,6 @@ import { Job } from "@enact/core/util";
import Skinnable from "@enact/sandstone/Skinnable";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
import { Cancelable } from "@enact/ui/Cancelable";
//이미지

7
com.twin.app.shoptime/src/reducers/mainReducer.js
View File

@@ -49,6 +49,13 @@ export const mainReducer = (state = initialState, action) => {
productImages: { images, media },
};
}
case types.GET_YOUMAYLIKE: {
const data = action.payload;
return {
...state,
youmaylikeData: data.youmaylike,
};
}
default:
return state;

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

@@ -2,13 +2,17 @@ import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getMainCategoryDetail } from "../../actions/mainActions";
import {
getMainCategoryDetail,
getMainYouMayLike,
} from "../../actions/mainActions";
import { popPanel } from "../../actions/panelActions";
import TBody from "../../components/TBody/TBody";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import ProductOption from "./container/ProductOption";
import ProductThumbnail from "./container/ProductThumbnail";
import YouMayLike from "./container/YouMayLike";
import css from "./DetailPanel.module.less";
export default function ItemDetail() {
@@ -37,12 +41,24 @@ export default function ItemDetail() {
prdtId: panelInfo?.prdtId,
})
);
// dispatch(
// getMainCategoryDetail({
// patnrId: 1,
// prdtId: "A523924",
// })
// );
}
}, [dispatch, panelInfo]);
useEffect(() => {
setProductData(data);
}, [data, productData]);
// dispatch(
// getMainYouMayLike({
// lgCatCd: productData?.catCd,
// })
// );
//console.log("#productdata", productData);
}, [productData, dispatch]);
const onClick = () => {
dispatch(popPanel());
@@ -56,12 +72,15 @@ export default function ItemDetail() {
onClick={onClick}
/>
<TBody className={css.container} scrollable={false}>
<ProductThumbnail productData={productData} />
<ProductThumbnail />
<ProductOption
selectedPatnrId={panelInfo?.patnrId}
selectedPardtId={panelInfo?.prdtId}
// selectedPatnrId={1}
// selectedPardtId={"A523924"}
/>
</TBody>
<YouMayLike productData={data} />
</TPanel>
);
}

1
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less
View File

@@ -25,6 +25,7 @@
}
.container {
position: relative;
display: flex;
justify-content: space-between;
}

2
com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less
View File

@@ -9,7 +9,7 @@
.size(@w: 560px, @h: 560px);
border: solid 1px #dadada;
background-color: #fff;
margin: 0 0 10px 0;
margin: 0 10px 10px 0;
position: relative;
&:focus {

10
com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx
View File

@@ -29,14 +29,14 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
</div>
)}
<div>
{/* <OptionGroup
selectedPatnrId={selectedPatnrId}
selectedPardtId={selectedPardtId}
/> */}
<OptionCommon
<OptionGroup
selectedPatnrId={selectedPatnrId}
selectedPardtId={selectedPardtId}
/>
{/* <OptionCommon
selectedPatnrId={selectedPatnrId}
selectedPardtId={selectedPardtId}
/> */}
</div>
</div>
);

28
com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx
View File

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import TButtonTab from "../../../components/TButtonTab/TButtonTab";
import TPopUp from "../../../components/TPopUp/TPopUp";
import TScroller from "../../../components/TScroller/TScroller";
import useScrollTo from "../../../hooks/useScrollTo";
import { $L } from "../../../utils/helperMethods";
import Indicator from "../components/Indicator";
import ProductTag from "../components/ProductTag";
@@ -26,7 +26,9 @@ export default function ProductThumbnail() {
const productData = useSelector((state) => state.main.productData);
const [opened, setOpened] = useState(false);
const [tabLabel, setTabLabel] = useState("");
const tScrollerRef = useRef(null);
const { getScrollTo, scrollTop } = useScrollTo();
const scrollTo = useRef(null);
const buttonLabel = [
{ label: $L("DESCRIPTION") },
{ label: $L("RETURN & EXCHANGES") },
@@ -37,15 +39,18 @@ export default function ProductThumbnail() {
setTabLabel([label]);
};
const scrollToTop = () => {
if (tScrollerRef.current) {
tScrollerRef.current.scrollToTop();
}
};
const onClickUpButton = useCallback(() => {
scrollTop();
console.log("chw");
}, []);
const scrollToBottom = () => {
if (tScrollerRef.current) {
tScrollerRef.current.scrollToBottom();
if (scrollTo.current) {
// console.log("#scrollTo.current", scrollTo.current);
// scrollTo.current.scrollTo({
// x: 0,
// y: scrollTo.current.scrollHeight,
// });
}
};
const renderPopUp = () => {
@@ -80,14 +85,15 @@ export default function ProductThumbnail() {
selectedIndex={0}
contents={tabLabel}
className={css.tab}
spotlightDisabled={true}
/>
<div className={css.content}>
<button className={css.upButton} onClick={scrollToTop} />
<button className={css.upButton} onClick={onClickUpButton} />
<TScroller
className={css.scrollContainer}
verticalScrollbar="auto"
ref={tScrollerRef}
cbScrollTo={getScrollTo}
>
<div>{DESCRIPTION}</div>
</TScroller>

117
com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.jsx Normal file
View File

@@ -0,0 +1,117 @@
import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { getMainYouMayLike } from "../../../actions/mainActions";
import { pushPanel } from "../../../actions/panelActions";
import TItemCard from "../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import { SpotlightIds } from "../../../utils/SpotlightIds";
import css from "./YouMayLike.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const MainContainer = SpotlightContainerDecorator(
{ enterTo: "default-element" },
"div"
);
const SpottableComponent = Spottable("div");
export default function YouMayLike(productData) {
const [focused, setFocused] = useState(false);
const [expanded, setExpanded] = useState(false);
const dispatch = useDispatch();
const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
const data = useSelector((state) => state.main.productData);
useEffect(() => {
dispatch(
getMainYouMayLike({
lgCatCd: data?.catCd,
})
);
}, [dispatch, data]);
const onFocus = () => {
setFocused(true);
setExpanded(true);
};
const onBlur = () => {
setFocused(false);
};
const handleItemClick = () => {
// dispatch(
// pushPanel({
// name: panel_names.DETAIL_PANEL,
// panelInfo: {
// patnrId,
// prdtId,
// },
// })
// );
};
const renderItem = useCallback(
({ index, ...rest }) => {
const { imgUrl, prdtId, prdtNm, priceInfo } = youmaylikeData[index];
return (
<TItemCard
{...rest}
key={prdtId}
imageAlt={prdtId}
imageSource={imgUrl}
priceInfo={priceInfo}
productName={prdtNm}
onClick={handleItemClick}
/>
);
},
[youmaylikeData]
);
return (
<>
<Container
className={classNames(
css.container,
expanded && css.expanded,
focused && css.focused
)}
onFocus={onFocus}
>
<SpottableComponent
className={css.button}
onFocus={onFocus}
onBlur={onBlur}
>
{$L("YOU MAY LIKE")} <span className={css.arrow} />
</SpottableComponent>
<MainContainer className={css.itemWrap}>
{youmaylikeData && youmaylikeData.length > 0 && (
<TVirtualGridList
spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
dataSize={youmaylikeData.length}
direction="horizontal"
renderItem={renderItem}
itemWidth={324}
itemHeight={438}
spacing={15}
onClick={handleItemClick}
className={css.itemList}
/>
)}
</MainContainer>
</Container>
</>
);
}

52
com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.module.less Normal file
View File

@@ -0,0 +1,52 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.container {
.size(@w: 1920px,@h: 60px);
position: absolute;
top: 1018px;
left: 0;
border-top: 4px solid #7a808d;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
&.focused {
.focusDropShadow();
border-top: 4px solid @PRIMARY_COLOR_RED;
}
&.expanded {
.size(@w: 1920px,@h: 570px);
background-color: #f8f8f8;
position: absolute;
top: 510px;
left: 0;
}
.button {
.flex();
.size(@w: 324px,@h: 78px);
.font(@fontFamily: @baseFontBold, @fontSize: 30px);
.position(@position: absolute, @top: -41px, @left: 60px);
border-radius: 12px;
background-color: #7a808d;
color: #ffffff;
&:focus {
.focusDropShadow();
background-color: @PRIMARY_COLOR_RED;
}
}
.itemWrap {
padding: 72px 0 60px 60px;
}
// .arrow {
// position: absolute;
// background-position: center;
// background-size: 44px 44px;
// background-image: url("../../../../assets/images/icons/ic-arrow-up.svg");
// z-index: 10;
// }
}