-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6edb4b1
commit c061b36
Showing
5 changed files
with
128 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import styled from "@emotion/styled"; | ||
|
||
const SmallRightChevron = ({ stroke = "#E4E4E5", onClick }: { stroke?: string; onClick?: () => void }) => { | ||
return ( | ||
<Wrapper> | ||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}> | ||
<g clip-path="url(#clip0_357_2385)"> | ||
<path d="M6 12L10 8L6 4" stroke={stroke} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" /> | ||
</g> | ||
<defs> | ||
<clipPath id="clip0_357_2385"> | ||
<rect width="16" height="16" fill="white" /> | ||
</clipPath> | ||
</defs> | ||
</svg> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
const Wrapper = styled.div` | ||
cursor: pointer; | ||
`; | ||
|
||
export default SmallRightChevron; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { Meta, StoryObj } from "@storybook/react"; | ||
import { Category } from "."; | ||
import { Tag } from "../Tag"; | ||
|
||
const meta = { | ||
title: "Atom/Category", | ||
component: Category, | ||
tags: ["autodocs"], | ||
} as Meta<typeof Category>; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof meta>; | ||
|
||
export const category: Story = { | ||
args: { | ||
categoryName: "카테고리명", | ||
children: [ | ||
<Tag variant={"main"} color={"purple"} children={"여름쿨톤"} />, | ||
<Tag variant={"main"} color={"pink"} children={"글로시 립"} />, | ||
<Tag variant={"dark"} color={"purple"} children={"페리페라"} />, | ||
<Tag variant={"dark"} color={"pink"} children={"페리페라"} />, | ||
<Tag variant={"main"} color={"purple"} children={"페리페라"} />, | ||
<Tag variant={"dark"} color={"purple"} children={"페리페라"} />, | ||
], | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import SmallRightChevron from "@assets/icons/SmallRightChevron"; | ||
import styled from "@emotion/styled"; | ||
import { theme } from "@styles/theme"; | ||
|
||
import { Button } from "../Button"; | ||
import { Text } from "../Text"; | ||
|
||
type CategoryPropsType = { | ||
categoryName: string; | ||
children: React.ReactNode[]; | ||
onPlusButtonClick?: () => void; | ||
onShowMorePreferencesClick?: () => void; | ||
}; | ||
|
||
export const Category = ({ | ||
categoryName, | ||
children, | ||
onPlusButtonClick, | ||
onShowMorePreferencesClick, | ||
}: CategoryPropsType) => { | ||
return ( | ||
<Wrapper> | ||
<Heading> | ||
<Text children={categoryName} typo={"Headline_16"} color={"white"} as={"div"} /> | ||
<Button variant={"circle"} children={"+"} onClick={onPlusButtonClick} /> | ||
</Heading> | ||
<TagWrapper> | ||
{children.map((child, index) => ( | ||
<TagItem key={index}>{child}</TagItem> | ||
))} | ||
</TagWrapper> | ||
<MorePreferencesContainer> | ||
<Text children={"취향 더보기"} typo={"Caption_12R"} color={"gray_300"} as={"div"} /> | ||
<SmallRightChevron stroke={theme.palette.gray_300} onClick={onShowMorePreferencesClick} /> | ||
</MorePreferencesContainer> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
const Wrapper = styled.div` | ||
width: 328px; | ||
border-radius: 16px; | ||
padding: 16px 18px; | ||
background-color: ${theme.palette.gray_800}; | ||
`; | ||
|
||
const Heading = styled.div` | ||
width: 100%; | ||
height: 24px; | ||
margin-bottom: 24px; | ||
display: flex; | ||
justify-content: space-between; | ||
`; | ||
|
||
const TagWrapper = styled.div` | ||
width: 100%; | ||
height: 76px; | ||
margin-bottom: 24px; | ||
display: flex; | ||
flex-wrap: wrap; | ||
gap: 12px; | ||
`; | ||
|
||
const TagItem = styled.div``; | ||
|
||
const MorePreferencesContainer = styled.div` | ||
width: 100%; | ||
height: 20px; | ||
display: flex; | ||
justify-content: space-between; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters