테이블 구조 변경
기존의 테이블 구조에는 많은 문제가 있었는데..
먼저 date 속성을 추가했다. 원하는 날짜의 식단을 추가하기 위해! 기존의 date는 createdAt으로 변경했다
그리고 image를 식단별로 최대 3개까지 넣을 수 있었는데,
이제는 food 별로 하나를 넣도록 하였다.
또 더 이상 image를 추가하지 않고 이모지를 사용하기로 했다. (이미지를 추가하기 위한 나의 노력들이..........따흑)
마지막으로 아침 점심 저녁을 text로 저장했었는데 0 1 2 int 타입으로 변경 (정렬하기 위해서)
트러블 슈팅 1: supabase type
supabase의 테이블 구조를 변경했다.
그 중에서 dietType 식단타입 (아침 | 점심 | 저녁)을
기존에는 '아침'처럼 text로 저장했었는데
아침 -> 점심 -> 저녁 순서로 정렬하기 위해서 number(각각 0, 1, 2)로 저장하는 방법을 선택했다.
supabase의 구조를 바꾸니 기존의 type/supabase.ts 파일과 타입이 맞지 않는 문제가 발생했다.
그래서 도움!!!!을 요청했다.
npm run gen 츄라이했지만 실패. 권한이 없다고 한다.
npx supabase login으로 로그인 후
npm run gen 하면 성공!
package.json에 따르면 npm run gen은
"npx supabase gen types --lang=typescript --project-id abijrjpibayqrzanhqcq --schema public > src/types/supabase.ts"
이다
트러블 슈팅 2: svgr 크기 설정
svg에서 width height 속성을 빼주고
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="plus">
<path id="Icon" d="M12 5V19M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>tailwind css를 이용하여 width height를 설정해준다!
import PlusIcon from '/public/icons/plus.svg';
<PlusIcon className="w-6 h-6" />