온보딩 데이터 페칭 및 Flow UI 완성

[froggy1014]

PR 타입 ( 하나 이상의 PR 타입을 선택해주세요 )

• 기능 추가
• 버그 수정
• 의존성, 환경 변수, 빌드 관련 코드 업데이트
• 기타 사소한 수정

개요

Oauth로 리다이렉트까지 끝내고 싶었지만 너무 사이즈가 커질 것 같아서 PR 올립니다.

file changes 죄송합니다. 브랜치를 여기저기 왔다갔다하느라 변경점 반영하느라 크고 작은 변동사항이 많네요. ..

변경 사항

Default Header를 서버 혹은 클라이언트 양쪽에서 사용할 수 있도록 아이콘 버튼쪽만 분리하였습니다.

서버사이드에서는 onClick 이벤트를 넣을 수 없는데 디자인상 같은 컴포넌트를 공유하게되어있어 스텝 상태를 관리하거나 라우팅 둘다 사용하기 위해 이렇게 컴포넌트를 분류하였는데.. 같이쓰는것보다 아예 컴포넌트를 새로하나파야하나 싶기도했습니다.

const DefaultHeader: FC<Props> = ({
  label = "",
  showBackButton = true,
  href,
  onClick,
}) => {
  return (
    <header className="fixed top-0 z-[999] flex h-[44px] w-full max-w-none items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900 lg:max-w-[450px]">

      {showBackButton && <ClientBackButton href={href} onClick={onClick} />}  // 여기

      <span className="max-w-[200px] truncate text-label-semi">{label}</span>
      <div className="size-[44px]" />
    </header>
  );
};

export default const ClientBackButton: FC<Props> = ({ href, onClick }) => {
  if (href) {
    return (
      <Link href={href} onClick={onClick}>
        <ArrowLeftSmallIcon width={24} height={24} />
      </Link>
    );
  } else {
    return (
      <button onClick={onClick}>
        <ArrowLeftSmallIcon width={24} height={24} />
      </button>
    );
  }
};

---

revalidate 시간을 따로 주지않았습니다. 자주바뀌는 데이터가 아니라 순전히 사용자가 선택할 아이템 목록들을 불러오는거라서 Tag만 하나 추가해서, 서버에서 원할때만 업데이트 치도록했습니다.

export const getMoods = async () => {
  const endpoint = FIESTA_ENDPOINTS.festivals.moods;
  const { data } = await instance.get<Array<FestivalMood>>(endpoint, {
    next: {
      tags: festivalOnBoarding.all,
    },
  });

  return data;
};

코드 리뷰시 참고 사항

현재 실제로 가입하는 API가 완성이 덜 되어서 - 추후 여기에 살붙여서 작업할 것 같습니다.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
fiesta	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 1:32pm

[punchdrunkard]

이번에도 고생 많으셨습니다~
컨페티터지는거 넘 귀엽네요....

[Zero-1016]

고생하셨습니다 :) 좋은 코드 잘보고 갑니다! 😊

[saseungmin]

고생하셨습니다~~

변수명을 변경한다거나, 파일명을 변경하는 리팩터링 과정이 보여서 좋네요!