Ko-Eunseo commented 1 year ago

16 공통 컴포넌트 작성

useTab 훅 작성

사용법

우선 useTab, Tabbar 컴포넌트를 import합니다.

const tabList = ["공연", "팬명록"]; // 1. 탭 리스트를 작성
const { curIndex, curItem, changeItem } = useTab({ init: 0, tabList }); 2. useTab에 init, 탭 리스트 객체 형태로 전달
<Tabbar tabItems={tabList} curIndex={curIndex} changeItem={changeItem} /> 3. Tabbar 컴포넌트에 useTab 부속물 전달

curIndex는 현재 선택한 탭의 인덱스입니다. (예: 0)
curItem은 현재 선택한 탭의 문자열입니다. (예: 공연)

changeItem은 탭 인덱스를 바꾸는 함수입니다.

  {curItem === "팬명록" && (
    <>
      <div className="m-4">
        <h2 className="text-xl font-bold mb-4">Fans Comment</h2>
        <ArtistComments />
      </div>
    </>
  )}

위와 같은 형식으로 tabItem에 따라 컴포넌트를 렌더링하면 됩니다.

카드 컴포넌트 추상화: atoms/Card.tsx

타입

현재 타입은 아래와 같습니다. 아티스트 타입 혹은 콘서트 타입을 받습니다.

type CardType = ArtistData | ConcertData;
interface CardProps<T> { //카드 컴포넌트에서 T에는 CardType이 들어갑니다.
  type: "artist" | "concert";
  canBook?: boolean;
  data: T;
}

사용법

<Card type="concert" data={concert} />

Link로 연결되는 article 컴포넌트입니다. 배열과 같이 사용하니 li 태그 내에서 쓸 것을 권합니다.

가로 배열 아이템

사용법

const {data} = useSWR('key', fetcher);
<RowItem label={data.이름} img={data.이미지 주소} />

label은 노출될 문자열입니다.
img는 이미지 주소입니다. 이미지가 없다면 전달하지 않아도 상관없습니다.
[ img label ] 레이아웃의 아이템입니다. 이미지가 없다면 [ label] 과 같이 text가 오른쪽정렬됩니다.

arrayToString

배열을 받아 문자열로 반환하는 유틸함수입니다.

사용법

const 배열 = [ '사과', '수박', '망고' ];
arrayToString(배열); // '사과, 수박, 망고' 를 리턴합니다.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
consert-app	❌ Failed (Inspect)		Jul 1, 2023 0:05am