[TabLayout] 시나리오 변경 반영
This commit is contained in:
고동영
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -10,7 +10,7 @@
|
||||
align-items: center;
|
||||
height: 84px;
|
||||
position: relative;
|
||||
padding-left: 48px;
|
||||
justify-content: center;
|
||||
|
||||
&.focused {
|
||||
color: #eee;
|
||||
@@ -21,7 +21,7 @@
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
left: 18px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
content: "";
|
||||
|
||||
@@ -83,13 +83,16 @@ const TabItemBase = ({
|
||||
<div
|
||||
className={classNames(
|
||||
css.imageWrap,
|
||||
focused && css.focused,
|
||||
selected && css.selected,
|
||||
focused && selected && css.selectedFocus
|
||||
selected && css.selected
|
||||
// focused && selected && css.selectedFocus
|
||||
)}
|
||||
>
|
||||
<img src={path} alt="" />
|
||||
<span className={classNames(css.outline)} />
|
||||
<div
|
||||
className={classNames(css.iconContainer, focused && css.focused)}
|
||||
>
|
||||
<img src={path} alt="" />
|
||||
<h3>{patncNm}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -119,9 +122,9 @@ const TabItemBase = ({
|
||||
ref={itemRef}
|
||||
className={classNames(
|
||||
css.tabItem,
|
||||
path && css.featuredBrands,
|
||||
!path && focused && css.focused,
|
||||
!focused && !path && selected && css.selected,
|
||||
// selected && focused && css.selected,
|
||||
path && css.path
|
||||
)}
|
||||
onKeyDown={onKeyDown}
|
||||
|
||||
@@ -9,10 +9,14 @@
|
||||
margin: 21px 0;
|
||||
position: relative;
|
||||
padding: 0 24px 0 48px;
|
||||
|
||||
> div {
|
||||
height: 78px;
|
||||
}
|
||||
|
||||
&.featuredBrands {
|
||||
margin: 21px 0 45px;
|
||||
}
|
||||
&.focused {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(to right, #cb1253, #e15ba1);
|
||||
@@ -22,7 +26,6 @@
|
||||
}
|
||||
&.path {
|
||||
padding-left: 0px;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
@@ -31,46 +34,46 @@
|
||||
|
||||
.imageWrap {
|
||||
position: relative;
|
||||
margin: 0 30px 0 48px;
|
||||
img {
|
||||
.size(@w: 120px, @h: 120px);
|
||||
object-fit: contain;
|
||||
}
|
||||
margin: 63px 0 0 0;
|
||||
|
||||
span {
|
||||
.position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
|
||||
.size(@w: 140px, @h: 140px);
|
||||
.iconContainer {
|
||||
.size(@w: 420px, @h: 110px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
img {
|
||||
box-shadow: -3px 0px 30px 0 #c70850;
|
||||
border-radius: 37%;
|
||||
.size(@w: 138px, @h: 138px);
|
||||
.size(@w:80px, @h: 80px);
|
||||
object-fit: contain;
|
||||
margin-right: 21px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
span {
|
||||
background-image: url("../../../assets/images/icons/ic-tab-partners-focus@3x.png");
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(to right, #cb1253, #e15ba1);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
img {
|
||||
.size(@w: 138px, @h: 138px);
|
||||
.size(@w: 80px, @h: 80px);
|
||||
object-fit: contain;
|
||||
}
|
||||
span {
|
||||
background-image: url("../../../assets/images/icons/ic-tab-partners-lnb-selected@3x.png");
|
||||
}
|
||||
}
|
||||
&.selectedFocus {
|
||||
img {
|
||||
box-shadow: -3px 0px 30px 0 #808080;
|
||||
border-radius: 37%;
|
||||
border: 5px solid #c70850;
|
||||
border-radius: 44.9px;
|
||||
}
|
||||
}
|
||||
// &.selectedFocus {
|
||||
// img {
|
||||
// box-shadow: -3px 0px 30px 0 #808080;
|
||||
// border-radius: 37%;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.text {
|
||||
@@ -110,7 +113,7 @@
|
||||
|
||||
// Fashion
|
||||
&.category-icon-1000 {
|
||||
background-image: url("../../../assets/images/icons/ic-category-fashion-nor@3x.png");
|
||||
background-image: url("../../../assets/images/icons/ic-category-fashion-normal@3x.png");
|
||||
}
|
||||
|
||||
// Beauty
|
||||
@@ -125,7 +128,7 @@
|
||||
|
||||
// Home
|
||||
&.category-icon-1006 {
|
||||
background-image: url("../../../assets/images/icons/ic-category-home-nor@3x.png");
|
||||
background-image: url("../../../assets/images/icons/ic-category-home-normal@3x.png");
|
||||
}
|
||||
|
||||
// Kitchen & Food
|
||||
@@ -135,7 +138,7 @@
|
||||
|
||||
// Accessories
|
||||
&.category-icon-1014 {
|
||||
background-image: url("../../../assets/images/icons/ic-category-accessories-nor@3x.png");
|
||||
background-image: url("../../../assets/images/icons/ic-category-accessories-normal@3x.png");
|
||||
}
|
||||
|
||||
// Heaclth & Fitness
|
||||
@@ -145,16 +148,16 @@
|
||||
|
||||
// Crafts & Sewing
|
||||
&.category-icon-1011 {
|
||||
background-image: url("../../../assets/images/icons/ic-category-cw-nor@3x.png");
|
||||
background-image: url("../../../assets/images/icons/ic-category-cw-normal@3x.png");
|
||||
}
|
||||
|
||||
// Electronics
|
||||
&.category-icon-1010 {
|
||||
background-image: url("../../../assets/images/icons/ic-category-electronics-nor@3x.png");
|
||||
background-image: url("../../../assets/images/icons/ic-category-electronics-normal@3x.png");
|
||||
}
|
||||
// Entertainment
|
||||
&.category-icon-1012 {
|
||||
background-image: url("../../../assets/images/icons/ic-category-enter-nor@3x.png");
|
||||
background-image: url("../../../assets/images/icons/ic-category-entertainment-normal@3x.png");
|
||||
}
|
||||
|
||||
// Clearance
|
||||
|
||||
@@ -1,16 +1,30 @@
|
||||
import React from "react";
|
||||
|
||||
import { scaleW } from "../../../utils/helperMethods";
|
||||
import { convertThemeColor } from "./convertThemeColor";
|
||||
|
||||
const FeaturedBrandIcon = ({ iconType = "normal" }) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
fill={convertThemeColor(iconType)}
|
||||
d="M42.1 17.999c0 2.762-2.672 5.166-5.434 5.166s-5.833-2.238-5.833-4.999c0 2.761-4.071 4.999-6.833 4.999-2.761 0-6.833-2.238-6.833-4.999 0 2.761-3.072 4.999-5.834 4.999-2.761 0-7.233-2.404-7.233-5.166 0-.284.854-.727 0-1.899l3.772-8.406C7.944 6.831 9.133 5.1 10.001 5.1h27.998c.869 0 2.057 1.731 2.129 2.594L42.1 16.1c.945 1.172 0 1.615 0 1.899zm-24.933 5.759c1.327 1.187 4.912 1.91 6.833 1.91 1.922 0 5.506-.723 6.833-1.91 1.327 1.187 3.912 1.91 5.833 1.91a7.473 7.473 0 0 0 3.334-.78v13.445c0 1.841-1.158 2.767-3.9 2.767H29v-9c0-.021-1.079-2-2.9-2h-5.101c-.919 0-1.999 1.979-1.999 2v9h-8c-1.841 0-3.001-.926-3.001-2.767V24.888a7.476 7.476 0 0 0 3.334.78c1.922 0 4.506-.723 5.834-1.91z"
|
||||
/>
|
||||
<path opacity=".302" fill="none" d="M0 0h48v47.1H0V0z" />
|
||||
<svg
|
||||
width={scaleW(48)}
|
||||
height={scaleW(48)}
|
||||
viewBox="0 0 45 45"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_133_77)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M33.1786 1.75572C34.5449 1.41978 35.9331 2.22124 36.3254 3.57252L40.3753 17.5242C40.5732 18.2059 40.4914 18.8557 40.2245 19.3992C40.1958 19.4679 40.1624 19.5356 40.1242 19.6018L27.9461 40.6948C26.4968 43.2052 23.2868 44.0653 20.7765 42.6159L7.14035 34.7431C4.63001 33.2938 3.7699 30.0838 5.21925 27.5735L17.3973 6.48042C17.4359 6.41361 17.4782 6.3503 17.5239 6.29061C17.8612 5.78856 18.3825 5.39352 19.0711 5.22423L33.1786 1.75572ZM29.9551 16.8825C29.139 18.2959 27.3317 18.7801 25.9183 17.9641C24.5049 17.1481 24.0206 15.3407 24.8366 13.9273C25.6527 12.5139 27.46 12.0296 28.8734 12.8457C30.2868 13.6617 30.7711 15.469 29.9551 16.8825ZM31.9036 18.0075C30.4663 20.497 27.2829 21.35 24.7933 19.9127C22.3037 18.4753 21.4507 15.2919 22.8881 12.8023C24.3254 10.3127 27.5089 9.45974 29.9984 10.8971C32.488 12.3345 33.341 15.5179 31.9036 18.0075Z"
|
||||
fill={convertThemeColor(iconType)}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_133_77">
|
||||
<rect width="45" height="45" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
import { scaleW } from "../../../utils/helperMethods";
|
||||
import { convertThemeColor } from "./convertThemeColor";
|
||||
|
||||
const HotPicksIcon = ({ iconType = "normal" }) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
|
||||
<svg
|
||||
width={scaleW(48)}
|
||||
height={scaleW(48)}
|
||||
viewBox="0 0 46 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M25.6956 20.2093C27.0973 19.2066 28.1142 17.5964 28.41 15.8456C28.4999 15.3216 28.4979 14.7044 28.4646 14.1611L28.5139 14.1614C28.6736 14.2797 28.8146 14.4227 28.968 14.5471C30.3365 15.7044 31.4323 17.0264 32.2981 18.5938C33.2858 20.3841 33.8455 22.4987 34.1466 24.5128C34.4594 26.6318 34.5246 28.848 34.0166 30.9492C33.515 33.0195 32.6253 34.9885 31.1458 36.5523C29.8465 37.926 28.1163 39.1425 26.359 39.8156L24.5932 39.9086C26.4841 37.7489 27.9324 34.4074 26.5783 32.0406C25.1754 29.587 22.499 29.2603 22.1195 26.0545C21.9444 24.572 22.4363 23.0201 23.2777 21.8223C20.7536 22.7001 19.1036 24.8367 17.9952 27.193C16.7805 29.7585 16.0963 33.2656 16.9044 36.067C17.3143 37.5016 18.7247 38.8505 19.8225 39.8824C19.4526 39.8244 18.8298 39.7338 18.5649 39.6703C15.9586 39.0107 12.9443 37.5584 11.6335 35.161C10.2985 32.7141 10.4209 29.2155 11.0744 26.5968C11.7278 23.9844 13.4011 22.0578 14.7619 19.7957C16.1538 17.4907 17.6662 15.6309 18.283 12.9441C18.8935 10.2943 18.7437 7.80606 17.4642 5.36567C19.5152 5.97824 21.6594 7.43081 23.0058 9.10634C24.4686 10.9308 25.4631 13.5297 25.7807 15.8525C25.9864 17.3722 26.0883 18.7245 25.7017 20.2216L25.6956 20.2093Z"
|
||||
fill={convertThemeColor(iconType)}
|
||||
d="M22.723 42.112a2.016 2.016 0 0 1-2.852 0L5.614 27.856a2.018 2.018 0 0 1 0-2.852l19.962-19.96 15.695 1.44 1.413 15.669-19.961 19.959zm10.762-27.866a3.78 3.78 0 0 0-5.344 5.345 3.78 3.78 0 0 0 5.344-5.345z"
|
||||
stroke="#606060"
|
||||
stroke-width="2.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path opacity=".302" fill="none" d="M0 0h48v47.1H0V0z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,16 +1,23 @@
|
||||
import React from "react";
|
||||
|
||||
import { scaleW } from "../../../utils/helperMethods";
|
||||
import { convertThemeColor } from "./convertThemeColor";
|
||||
|
||||
const TrendingNowIcon = ({ iconType = "normal" }) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
|
||||
<svg
|
||||
width={scaleW(48)}
|
||||
height={scaleW(48)}
|
||||
viewBox="0 0 45 45"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.54309 2.96484C3.71466 2.96484 3.04309 3.63641 3.04309 4.46484V40.5397C3.04309 41.3682 3.71466 42.0397 4.54309 42.0397H40.4576C41.286 42.0397 41.9576 41.3682 41.9576 40.5397V4.46484C41.9576 3.63642 41.286 2.96484 40.4576 2.96484H4.54309ZM29.2579 8.90363C29.643 8.80452 30.0095 9.11797 29.9714 9.51376L29.4507 14.9202C29.4062 15.382 28.8601 15.6025 28.5075 15.3009L26.9722 13.9881L23.2734 18.3135C22.8935 18.7578 22.2254 18.81 21.7811 18.43C21.3368 18.0501 21.2846 17.382 21.6645 16.9377L25.3633 12.6123L23.7682 11.2482C23.4155 10.9467 23.5485 10.373 23.9978 10.2574L29.2579 8.90363ZM39.1267 10.4224C39.5965 10.8291 39.6476 11.5396 39.2409 12.0093L25.4559 27.931C25.2551 28.1629 24.9683 28.3028 24.6618 28.3182C24.3554 28.3335 24.056 28.2231 23.8329 28.0124L19.7707 24.1756L13.1607 32.7978C12.7827 33.2909 12.0765 33.3842 11.5834 33.0061C11.0903 32.6281 10.997 31.9219 11.3751 31.4288L18.7437 21.817C18.9375 21.5642 19.2293 21.4054 19.5467 21.38C19.8642 21.3546 20.1775 21.4649 20.4091 21.6836L24.5239 25.5701L37.5399 10.5366C37.9465 10.0668 38.657 10.0157 39.1267 10.4224ZM7.50018 6.37598C8.1215 6.37598 8.62518 6.87966 8.62518 7.50098V36.376H37.5002C38.1215 36.376 38.6252 36.8797 38.6252 37.501C38.6252 38.1223 38.1215 38.626 37.5002 38.626H7.50018C6.87886 38.626 6.37518 38.1223 6.37518 37.501V7.50098C6.37518 6.87966 6.87886 6.37598 7.50018 6.37598Z"
|
||||
fill={convertThemeColor(iconType)}
|
||||
d="m40.657 39.908-5.195-.883a1.091 1.091 0 0 0-1.207.685l-1.82 4.87c-.319.852-1.504.952-1.965.166l-7.221-12.308c.234.009.468.014.703.014 4.536 0 8.641-1.821 11.601-4.76l6.232 10.625c.46.786-.219 1.746-1.128 1.591zM23.951 29.241c-7.215 0-13.065-5.757-13.065-12.858 0-7.102 5.85-12.858 13.065-12.858s13.066 5.756 13.066 12.858c0 7.101-5.851 12.858-13.066 12.858zm4.836-15.436-1.989-.424a1.206 1.206 0 0 1-.785-.56L24.99 11.09c-.463-.782-1.611-.782-2.075 0l-1.024 1.731c-.169.286-.453.49-.783.56l-1.989.424c-.899.191-1.254 1.266-.641 1.941l1.357 1.494c.224.247.332.576.299.905l-.205 1.994c-.093.901.837 1.564 1.677 1.199l1.863-.807c.309-.133.66-.133.968 0l1.863.807c.84.365 1.771-.298 1.677-1.199l-.205-1.994a1.173 1.173 0 0 1 .299-.905l1.357-1.494c.612-.675.258-1.75-.641-1.941zM19.06 31.719l3.006 5.126-4.633 7.898c-.461.787-1.647.687-1.964-.165l-1.819-4.87a1.093 1.093 0 0 0-1.208-.686l-5.195.883c-.91.156-1.59-.804-1.128-1.591l6.231-10.622a16.372 16.372 0 0 0 6.71 4.027z"
|
||||
/>
|
||||
<path opacity=".302" fill="none" d="M-.015.012h48v48h-48v-48z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user