미리보기
코드
"use client";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import { styled } from "@mui/material";
import Box from "@mui/material/Box";
import React from "react";
type MenuTabPropsType = {
tabList: {
label: string;
component: React.ReactNode;
}[];
};
export const CommonTab = ({ tabList }: MenuTabPropsType) => {
const [value, setValue] = React.useState(0);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};
return (
<Container>
{/* 탭 라벨 */}
<TabsWrapper value={value} onChange={handleChange} aria-label="basic tabs example">
{tabList.map((tab, idx) => (
<StyledTab key={idx} label={tab.label} />
))}
</TabsWrapper>
{/* 탭 판넬 */}
{tabList.map((tab, idx) => (
<CustomTabPanel key={idx} value={value} index={idx}>
{tab.component}
</CustomTabPanel>
))}
</Container>
);
};
export default CommonTab;
//////////////////////////////////////// 스타일 ////////////////////////////////////////
const Container = styled(Box)`
width: 100%;
`;
const TabsWrapper = styled(Tabs)`
width: 100%;
display: flex;
`;
const StyledTab = styled(Tab)`
flex: 1;
`;
//////////////////////////////////////// 하위 컴포넌트 ////////////////////////////////////////
//////////////////// 커스텀 탭 판넬 ////////////////////
const CustomTabPanel = (props: { children?: React.ReactNode; index: number; value: number }) => {
const { children, value, index, ...other } = props;
return (
<CustomTabPanelContainer role="tabpanel" hidden={value !== index} {...other}>
{value === index && <Box>{children}</Box>}
</CustomTabPanelContainer>
);
};
const CustomTabPanelContainer = styled(Box)``;
const tabList = [
{
label: "댓글",
component: <div>댓글</div>,
},
{
label: "공감",
component: <div>공감</div>,
},
];
<CommonTab tabList={tabList} />
참고자료
https://mui.com/material-ui/react-tabs/
React Tabs component - Material UI
Tabs make it easy to explore and switch between different views.
mui.com
'프론트엔드 > Component' 카테고리의 다른 글
[Component] MUI 아코디언 컴포넌트 예시 코드 (0) | 2025.03.04 |
---|---|
[Component] 이미지 캐러셀 사용 예시 (0) | 2025.03.04 |
[Component] 아코디언 배열 렌더링을 위한 재사용 컴포넌트 예시 코드 (1) | 2025.03.04 |
[Component] 2단 사이드바 컴포넌트(MUI + styled-components + Zustand) (1) | 2024.12.26 |
[Component] 사이드바 컴포넌트(MUI + styled-components + Zustand) (0) | 2024.12.26 |