diff --git a/public/svgs/Subtract.svg b/public/svgs/Subtract.svg new file mode 100644 index 00000000..dd8e7f6c --- /dev/null +++ b/public/svgs/Subtract.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/banner_basic.svg b/public/svgs/banner_basic.svg new file mode 100644 index 00000000..6b9b03a2 --- /dev/null +++ b/public/svgs/banner_basic.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/svgs/icon_footer_logo.svg b/public/svgs/icon_footer_logo.svg new file mode 100644 index 00000000..771324d7 --- /dev/null +++ b/public/svgs/icon_footer_logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/svgs/icon_small_band.svg b/public/svgs/icon_small_band.svg new file mode 100644 index 00000000..0a7a7ff3 --- /dev/null +++ b/public/svgs/icon_small_band.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/svgs/icon_small_dance.svg b/public/svgs/icon_small_dance.svg new file mode 100644 index 00000000..7e7de691 --- /dev/null +++ b/public/svgs/icon_small_dance.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/svgs/icon_small_etc.svg b/public/svgs/icon_small_etc.svg new file mode 100644 index 00000000..d0c8b940 --- /dev/null +++ b/public/svgs/icon_small_etc.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/svgs/icon_small_musical.svg b/public/svgs/icon_small_musical.svg new file mode 100644 index 00000000..41fd51d2 --- /dev/null +++ b/public/svgs/icon_small_musical.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/banner_basic.png b/src/assets/images/banner_basic.png new file mode 100644 index 00000000..f941ddf8 Binary files /dev/null and b/src/assets/images/banner_basic.png differ diff --git a/src/assets/svgs/BannerBasic.tsx b/src/assets/svgs/BannerBasic.tsx new file mode 100644 index 00000000..c5be02fe --- /dev/null +++ b/src/assets/svgs/BannerBasic.tsx @@ -0,0 +1,38 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgBannerBasic = (props: SVGProps) => ( + + + + + + + + + + + + + +); +export default SvgBannerBasic; diff --git a/src/assets/svgs/IconFooterLogo.tsx b/src/assets/svgs/IconFooterLogo.tsx new file mode 100644 index 00000000..5abba1b8 --- /dev/null +++ b/src/assets/svgs/IconFooterLogo.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIconFooterLogo = (props: SVGProps) => ( + + + + + + +); +export default SvgIconFooterLogo; diff --git a/src/assets/svgs/IconSmallBand.tsx b/src/assets/svgs/IconSmallBand.tsx new file mode 100644 index 00000000..b8fae6eb --- /dev/null +++ b/src/assets/svgs/IconSmallBand.tsx @@ -0,0 +1,12 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIconSmallBand = (props: SVGProps) => ( + + + + + + + +); +export default SvgIconSmallBand; diff --git a/src/assets/svgs/IconSmallDance.tsx b/src/assets/svgs/IconSmallDance.tsx new file mode 100644 index 00000000..99c3b8a8 --- /dev/null +++ b/src/assets/svgs/IconSmallDance.tsx @@ -0,0 +1,10 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIconSmallDance = (props: SVGProps) => ( + + + + + +); +export default SvgIconSmallDance; diff --git a/src/assets/svgs/IconSmallEtc.tsx b/src/assets/svgs/IconSmallEtc.tsx new file mode 100644 index 00000000..466bf07f --- /dev/null +++ b/src/assets/svgs/IconSmallEtc.tsx @@ -0,0 +1,10 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIconSmallEtc = (props: SVGProps) => ( + + + + + +); +export default SvgIconSmallEtc; diff --git a/src/assets/svgs/IconSmallMusical.tsx b/src/assets/svgs/IconSmallMusical.tsx new file mode 100644 index 00000000..cb971451 --- /dev/null +++ b/src/assets/svgs/IconSmallMusical.tsx @@ -0,0 +1,13 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIconSmallMusical = (props: SVGProps) => ( + + + +); +export default SvgIconSmallMusical; diff --git a/src/assets/svgs/Subtract.tsx b/src/assets/svgs/Subtract.tsx new file mode 100644 index 00000000..65165732 --- /dev/null +++ b/src/assets/svgs/Subtract.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgSubtract = (props: SVGProps) => ( + + + + + + + +); +export default SvgSubtract; diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index fe2f3d96..3e65db88 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -1,3 +1,4 @@ +export { default as BannerBasic } from "./BannerBasic"; export { default as Empty } from "./Empty"; export { default as IcHamburgar } from "./IcHamburgar"; export { default as IcomCopy } from "./IcomCopy"; @@ -13,6 +14,7 @@ export { default as IconCheckboxUnselectedOn } from "./IconCheckboxUnselectedOn" export { default as IconChevronBack } from "./IconChevronBack"; export { default as IconEyeOff } from "./IconEyeOff"; export { default as IconEyeOn } from "./IconEyeOn"; +export { default as IconFooterLogo } from "./IconFooterLogo"; export { default as IconHanna } from "./IconHanna"; export { default as IconIbk } from "./IconIbk"; export { default as IconIm } from "./IconIm"; @@ -26,6 +28,10 @@ export { default as IconSaemauel } from "./IconSaemauel"; export { default as IconSc } from "./IconSc"; export { default as IconShinhan } from "./IconShinhan"; export { default as IconShinhyup } from "./IconShinhyup"; +export { default as IconSmallBand } from "./IconSmallBand"; +export { default as IconSmallDance } from "./IconSmallDance"; +export { default as IconSmallEtc } from "./IconSmallEtc"; +export { default as IconSmallMusical } from "./IconSmallMusical"; export { default as IconSoohyup } from "./IconSoohyup"; export { default as IconTextfiedlDelete } from "./IconTextfiedlDelete"; export { default as IconTime } from "./IconTime"; @@ -36,3 +42,4 @@ export { default as IconWoochaegook } from "./IconWoochaegook"; export { default as IconWoori } from "./IconWoori"; export { default as IconXButton } from "./IconXButton"; export { default as IcOutlinePlace } from "./IcOutlinePlace"; +export { default as Subtract } from "./Subtract"; diff --git a/src/components/commons/chip/Chip.styled.ts b/src/components/commons/chip/Chip.styled.ts index f8ba99ea..a105a44d 100644 --- a/src/components/commons/chip/Chip.styled.ts +++ b/src/components/commons/chip/Chip.styled.ts @@ -32,13 +32,34 @@ export const ChipWrapper = styled.div<{ color?: ChipsColorTypes }>` default: return ` background-color: ${theme.colors.gray_0}; - color: ${theme.colors.gray_900}; + color: ${theme.colors.pink_400}; `; } }} `; -export const ChipIcon = styled.span` +export const ChipIcon = styled.span<{ iconColor?: string }>` width: 1.6rem; height: 1.6rem; + + ${({ theme, iconColor }) => { + switch (iconColor) { + case "pink": + return ` + color: ${theme.colors.pink_400}; + `; + case "white": + return ` + color: ${theme.colors.white}; + `; + case "gray": + return ` + color: ${theme.colors.gray_500}; + `; + default: + return ` + color: ${theme.colors.gray_500}; + `; + } + }} `; diff --git a/src/components/commons/chip/Chip.tsx b/src/components/commons/chip/Chip.tsx index 1dadba99..098232e0 100644 --- a/src/components/commons/chip/Chip.tsx +++ b/src/components/commons/chip/Chip.tsx @@ -7,13 +7,14 @@ interface ChipProps { label: string; color?: ChipsColorTypes; icon?: React.ReactNode; + iconColor?: string; onClick?: () => void; } -const Chip = ({ label, color, icon, onClick }: ChipProps) => { +const Chip = ({ label, color, icon, iconColor, onClick }: ChipProps) => { return ( - {icon && {icon}} + {icon && {icon}} {label} ); diff --git a/src/pages/main/Main.styled.ts b/src/pages/main/Main.styled.ts new file mode 100644 index 00000000..5c6f5648 --- /dev/null +++ b/src/pages/main/Main.styled.ts @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +export const MainWrapper = styled.section` + width: auto; + + color: ${({ theme }) => theme.colors.gray_900}; + + background-color: ${({ theme }) => theme.colors.gray_900}; +`; diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx new file mode 100644 index 00000000..1f672879 --- /dev/null +++ b/src/pages/main/Main.tsx @@ -0,0 +1,25 @@ +import { useState } from "react"; +import * as S from "./Main.styled"; + +import Performance from "./components/performance/Performance"; +import Chips from "./components/chips/Chips"; +import Footer from "./components/footer/Footer"; + +const Main = () => { + // chips 클릭하면 seGenre 달라지게! + const [genre, setGenre] = useState("ALL"); + + const handleGenre = (value: string) => { + setGenre(value); + }; + + return ( + + + +