Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BestTab Skeleton UI 만들기 #28

Merged
merged 4 commits into from
Apr 30, 2021
Merged

BestTab Skeleton UI 만들기 #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7071ea4
Merge branch 'team19/17' of https://github.com/ha3158987/sidedish int…
kowoohyuk Apr 28, 2021
e951ead
Merge branch 'team19/17' of https://github.com/ha3158987/sidedish int…
kowoohyuk Apr 29, 2021
1f85635
Merge branch 'team-19' of https://github.com/ha3158987/sidedish into …
kowoohyuk Apr 30, 2021
266cb39
[#27] feat: :sparkles: BestTab Skeleton UI 만들기
kowoohyuk Apr 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 46 additions & 53 deletions src/component/main/Main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import styled from "styled-components";
import {
useMainItemsContext,
useMainItemsActiveContext,
useSetMainItemsActiveContext
useSetMainItemsActiveContext,
} from "../Context";

const CarouselContainer = styled.div`
Expand All @@ -24,62 +24,55 @@ export default function Main() {

const onShowMoreItems = () => {
setActive(true);
}
};
const getSalePrice = (price, discountRate) => {
return price - price * (discountRate / 100);
};
if(!mainItems) return null;
if (!mainItems) return null;
return (
<>
<BestTab/>
{
active
? (mainItems.map(mainItem =>
<CarouselContainer>
<h2>{mainItem.title}</h2>
<DicoJsonCarousel>
{
mainItem.childs.map((item, idx) =>
<ItemCard
src={item.main_image}
title={item.title}
description={item.description}
salePrice={getSalePrice(item.price, item.discount)}
normalPrice={item.price}
labels={item.label}
key={idx}
id={item._id}
/>
)
}
</DicoJsonCarousel>
</CarouselContainer>
))
:
(
<CarouselContainer>
<h2>{mainItems[0].title}</h2>
<DicoJsonCarousel>
{
mainItems[0].childs.map((item, idx) =>
<ItemCard
src={item.main_image}
title={item.title}
description={item.description}
salePrice={getSalePrice(item.price, item.discount)}
normalPrice={item.price}
labels={item.label}
key={idx}
id={item._id}
/>
)
}
</DicoJsonCarousel>
</CarouselContainer>
)
}
<ShowMoreBtn active={active} onShowMoreItems={onShowMoreItems}/>
<PopUpContainer/>
<BestTab />
{active ? (
mainItems.map((mainItem, id) => (
<CarouselContainer key={id}>
<h2>{mainItem.title}</h2>
<DicoJsonCarousel options={{ loop: id === 0 }}>
{mainItem.childs.map((item, idx) => (
<ItemCard
src={item.main_image}
title={item.title}
description={item.description}
salePrice={getSalePrice(item.price, item.discount)}
normalPrice={item.price}
labels={item.label}
key={idx}
id={item._id}
/>
))}
</DicoJsonCarousel>
</CarouselContainer>
))
) : (
<CarouselContainer>
<h2>{mainItems[0].title}</h2>
<DicoJsonCarousel options={{ loop: true }}>
{mainItems[0].childs.map((item, idx) => (
<ItemCard
src={item.main_image}
title={item.title}
description={item.description}
salePrice={getSalePrice(item.price, item.discount)}
normalPrice={item.price}
labels={item.label}
key={idx}
id={item._id}
/>
))}
</DicoJsonCarousel>
</CarouselContainer>
)}
<ShowMoreBtn active={active} onShowMoreItems={onShowMoreItems} />
<PopUpContainer />
</>
);
}
}
32 changes: 19 additions & 13 deletions src/component/main/bestTab/BestTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from "styled-components";
import BestTabContainer from "./BestTabContainer";
import BestTabNavigator from "./BestTabNavigator";
import api from "../../../common/api.js";
import SkeletonTab from "./SkeletonTab";

const BestTabStyle = styled.div`
h2 {
Expand All @@ -20,7 +21,8 @@ export default function BestTab() {
try {
(async () => {
const data = await api("/best");
setBestItems(data);
setTimeout(() => setBestItems(data), 1000);
// setBestItems(data);
})();
} catch (e) {
console.log(e);
Expand All @@ -29,19 +31,23 @@ export default function BestTab() {
return;
}, [bestItems]);

if (!bestItems) return null;
// if (!bestItems) return null;

return (
<BestTabStyle>
<h2>후기가 증명하는 베스트 반찬</h2>
<BestTabNavigator
bestItems={bestItems}
active={active}
setActive={setActive}
/>
<BestTabContainer
bestItem={bestItems[active]}
/>
</BestTabStyle>
<>
{bestItems ? (
<BestTabStyle>
<h2>후기가 증명하는 베스트 반찬</h2>
<BestTabNavigator
bestItems={bestItems}
active={active}
setActive={setActive}
/>
<BestTabContainer bestItem={bestItems[active]} />
</BestTabStyle>
) : (
<SkeletonTab />
)}
</>
);
}
25 changes: 11 additions & 14 deletions src/component/main/bestTab/BestTabNavigator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import styled from "styled-components";
const BestTabNavigatorStyle = styled.div`
display: grid;
grid-gap: 0.5rem;
grid-template-columns: repeat(5,13rem);
grid-template-columns: repeat(5, 13rem);
`;

const BestTabNavigatorItemStyle = styled.div`
font-size: 1.125rem;
background-color: ${(props) => props.active ? "#EEF4FA" : "#F5F5F5"};
background-color: ${(props) => (props.active ? "#EEF4FA" : "#F5F5F5")};
padding: 1rem 2rem;
text-align: center;
font-weight: ${(props) => props.active ? 600 : 400};
color: ${(props) => props.active ? "#333" : "#828282"};
font-weight: ${(props) => (props.active ? 600 : 400)};
color: ${(props) => (props.active ? "#333" : "#828282")};
cursor: pointer;
&:hover {
color: #333;
Expand All @@ -23,17 +23,14 @@ export default function BestTabNavigator({ bestItems, active, setActive }) {
return (
<BestTabNavigatorStyle>
{bestItems.map((bestItem, i) => (
<BestTabNavigatorItemStyle
<BestTabNavigatorItemStyle
key={i}
onClick={() => setActive(i)}
active={(i === active)}>{bestItem.title}
onClick={() => setActive(i)}
active={i === active}
>
{bestItem.title}
</BestTabNavigatorItemStyle>
))}
{/*
<BestTabNavigatorItemStyle>풍성한 고기반찬</BestTabNavigatorItemStyle>
<BestTabNavigatorItemStyle>편리한 반찬세트</BestTabNavigatorItemStyle>
<BestTabNavigatorItemStyle>간편한 덮밥요리</BestTabNavigatorItemStyle>
<BestTabNavigatorItemStyle>우리아이 영양반찬</BestTabNavigatorItemStyle> */}
</BestTabNavigatorStyle>
)
}
);
}
Loading