Refactor/api

[MintaekCho]

• 북마크 Optimistic UI로 개선
• API controller 추가
• toggle 버튼 추상화

type Props = {
  toggled: boolean;
  onToggle: (toggled: boolean) => void;
  onIcon: React.ReactNode;
  offIcon: React.ReactNode;
};

export default function Toggle({ toggled, onToggle, onIcon, offIcon }: Props) {
  return <button onClick={() => onToggle(toggled)}>{toggled ? onIcon : offIcon}</button>;
}

Toggle 사용법

<Toggle
   toggled={isBookmark as boolean} // 토글 활성화 여부
   onToggle={handleLike} // 토글 클릭시 처리할 콜백함수 
   onIcon={<HeartFillIcon />} //  토글 활성화 상태일 때 아이콘
   offIcon={<HeartIcon />} // 토글 비활성화 상태일 때 아이콘
/>

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
consert-app	✅ Ready (Inspect)	Visit Preview	Jul 4, 2023 7:50am