Closed Ko-Eunseo closed 1 year ago
const tabList = ["공연", "팬명록"]; // 1. 탭 리스트를 작성 const { curIndex, curItem, changeItem } = useTab({ init: 0, tabList }); 2. useTab에 init, 탭 리스트 객체 형태로 전달 <Tabbar tabItems={tabList} curIndex={curIndex} changeItem={changeItem} /> 3. Tabbar 컴포넌트에 useTab 부속물 전달
{curItem === "팬명록" && ( <> <div className="m-4"> <h2 className="text-xl font-bold mb-4">Fans Comment</h2> <ArtistComments /> </div> </> )}
위와 같은 형식으로 tabItem에 따라 컴포넌트를 렌더링하면 됩니다.
현재 타입은 아래와 같습니다. 아티스트 타입 혹은 콘서트 타입을 받습니다.
type CardType = ArtistData | ConcertData; interface CardProps<T> { //카드 컴포넌트에서 T에는 CardType이 들어갑니다. type: "artist" | "concert"; canBook?: boolean; data: T; }
<Card type="concert" data={concert} />
const {data} = useSWR('key', fetcher); <RowItem label={data.이름} img={data.이미지 주소} />
const 배열 = [ '사과', '수박', '망고' ]; arrayToString(배열); // '사과, 수박, 망고' 를 리턴합니다.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
16 공통 컴포넌트 작성
useTab 훅 작성
사용법
위와 같은 형식으로 tabItem에 따라 컴포넌트를 렌더링하면 됩니다.
카드 컴포넌트 추상화: atoms/Card.tsx
타입
현재 타입은 아래와 같습니다. 아티스트 타입 혹은 콘서트 타입을 받습니다.
사용법
가로 배열 아이템
사용법
arrayToString
사용법