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

♻️refactor: change tabs structure to pass component by props #71

Merged
merged 1 commit into from
Jan 1, 2025
Merged

♻️refactor: change tabs structure to pass component by props #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
37 changes: 30 additions & 7 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,16 @@ const TABS = [

const CHIPS = [
{
index: 0,
name: "고정멤버",
label: "고정멤버",
value: "고정멤버",
},
{
index: 1,
name: "아카데미",
label: "아카데미",
value: "아카데미",
},
{
index: 2,
name: "이세돌",
label: "이세돌",
value: "이세돌",
},
]

Expand Down Expand Up @@ -255,7 +255,30 @@ const App = () => {
TABS={TABS}
selectedTabIndex={selectedTabIndex}
setSelectedTabIndex={setSelectedTabIndex}
CHIPS={CHIPS}
topButtonComponent={
<Filter.Arrow
options={[
{ label: "최신순", value: "newest" },
{ label: "오래된순", value: "oldest" },
{ label: "조회순", value: "views" },
]}
onChange={value => alert(`filter 의 options 이 선택되었습니다 "${value}"`)}
/>
}
bottomButtonComponent={
<Button.Fill size="small" onClick={() => alert("Button Click!")}>
Button Fill small gray
</Button.Fill>
}
chipComponents={CHIPS.map((CHIP, index) => (
<Chip.Normal
key={index}
item={CHIP}
onClick={(value: string) => {
alert(`${value} selected`)
}}
/>
))}
/>
</div>
{selectedTabIndex === 0 && (
Expand Down
44 changes: 14 additions & 30 deletions src/components/Tabs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,20 @@ interface IItem {
title: string
}

interface IChip {
index: number
name: string
}

const Tabs = ({ TABS, CHIPS, selectedTabIndex, setSelectedTabIndex }: {
const Tabs = ({
TABS,
selectedTabIndex,
setSelectedTabIndex,
topButtonComponent,
bottomButtonComponent,
chipComponents,
}: {
TABS: IItem[]
CHIPS: IChip[]
selectedTabIndex: Number
setSelectedTabIndex: React.Dispatch<SetStateAction<number>>
topButtonComponent?: React.ReactElement // top Button (e.g. filter)
bottomButtonComponent?: React.ReactElement // bottom Button(e.g. memberfilter)
chipComponents?: React.ReactElement[] // render chips
}) => {
return (
<Container>
Expand All @@ -36,21 +40,11 @@ const Tabs = ({ TABS, CHIPS, selectedTabIndex, setSelectedTabIndex }: {
)
})}
</Wrapper>
<Wrapper>
{/* TODO : IMPORT FILTER COMPONENT */}
<TabBtn text="FILTER" />
</Wrapper>
<Wrapper>{topButtonComponent}</Wrapper>
</TopWrapper>
<BottomWrapper>
<ChipWrapper>
{CHIPS.map(CHIP => {
return <FakeChip key={CHIP.index}># {CHIP.name}</FakeChip>
})}
</ChipWrapper>
<Wrapper>
{/* TODO : IMPORT MEMBER FILTER COMPONENT */}
<TabBtn text="MEMBER FILTER" />
</Wrapper>
<ChipWrapper>{chipComponents}</ChipWrapper>
<Wrapper>{bottomButtonComponent}</Wrapper>
</BottomWrapper>
</Container>
)
Expand Down Expand Up @@ -92,15 +86,5 @@ const ChipWrapper = styled.div`
align-items: center;
gap: 10px;
`
// TODO : ERASE CHIP CSS
const FakeChip = styled.span`
width: fit-content;
height: fit-content;
border-radius: 5px;
background-color: gray;
padding: 8px 12px;
font-size: 14px;
color: white;
`

export default Tabs
Loading