처음 사이트를 만들었을 때에는 글꼴종류 (폰트)만 고려하고 글꼴의 크기는 고려하지 않았었다. 하지만 실제로 폰트들을 적용시켜본 후 폰트들마다 가지고 있는 특성이 다르기 때문에 같은 폰트의 크기더라도 다른 사이즈로 보여 가독성과 디자인에 영향을 많이 끼쳤다.
그래서 글꼴만 선택할 수 있는 추가 Input을 만들기로 결정하고
이것을 전역으로 관리하여 폰트 크기와 색상을 사용자가 선택할 수 있게끔 구현했다.
<와이어프레임>
글꼴 페이지가 추가되면서 대표사진에 있던 폰트선택을 청첩장 글꼴 파트로 옮기게 되었고 버튼형식의 폰트선택이 아닌 select형태를 사용하게 되면서 그에 따른 폰트 종류를 늘리기로 결정하였다.
💥 트러블슛팅
청첩장 제작페이지에서 preview와 완성된 청첩장보기에서 같은 컴포넌트를 공유하는 부분들이 있었다.
☝️ 프로젝트 데이터 저장방법
- useFormContext()의 setValue()를 이용하여 데이터를 저장한 방식
- supabase에 데이터를 등록
supabase에 데이터가 등록되기 전에는 useFormContext()에 데이터가 등록되어 있다. 청첩장 제작페이지에서는 미리보기가 모두 FormProvider로 감싸져있어 useWatch()나 getValue()로 데이터를 조회하고 가져올 수 있었지만 청첩장 완성 페이지에서는 FormProvider가 설정되어 있지 않기 때문에 데이터를 조회할 수 없다는 오류가 발생하였다.
♧ 여기서 여러가지 고민을 하면서 여러 시행착오를 겪었다.
- zustand를 사용하여 글꼴 사이즈와 컬러의 상태값을 저장하고 있기 때문에 zustand에 저장되어 있는 데이터를 가져오자
=> zustand는 클라이언트 사이드에서 데이터를 가져올 수 있기 때문에
청첩장 미리 보기 페이지는 SSR 정적 페이지임으로 데이터를 가져올수 없다는 오류발생
store > useFontStore.ts
import { create } from 'zustand';
import { ColorType } from '@/types/invitationFormType.type';
type FontStoreState = {
fontSize: number;
increaseFontSize: (type: number) => void;
decreaseFontSize: (type: number) => void;
resetFontSize: () => void;
};
export const useFontStore = create<FontStoreState>((set) => ({
fontSize: 0,
increaseFontSize: (type) =>
set((state) => ({
fontSize: state.fontSize + (type === 2 ? 4 : 2),
})),
decreaseFontSize: (type) =>
set((state) => ({
fontSize: state.fontSize - (type === 2 ? 4 : 2),
})),
resetFontSize: () => set(() => ({ fontSize: 0 })),
}));
type FontColorStore = {
fontColor: ColorType;
setFontColor: (color: ColorType) => void;
};
export const useFontColorStore = create<FontColorStore>((set) => ({
fontColor: { r: 255, g: 255, b: 255, a: 1, name: '커스텀' },
setFontColor: (color: ColorType) => set(() => ({ fontColor: color })),
}));
-
supabase에 저장되어 있는 데이터를 가져오자
=> supabase에 데이터가 (현재 개발할 시점에) 임시저장되고 제출이 되는 때에는 사용자가 다음 Input으로 넘어가기 위해 버튼을 누르거나 마지막 제출버튼을 누를 때이다.
=> 사용자가 다음 페이지로 넘어가고 데이터가 supabase에 저장되지 않으면 사용자는 실시간으로 선택한 데이터가 적용된 값을 청첩장 제작페이지 미리보기에서 볼 수 없다.🌟 해결 방법
두 가지를 직접 다 구현해보고 여러 컴포넌트들을 바꿔 보면서
청첩장 제작 페이지의 프리뷰와 완성페이지 미리보기에서 공통적으로 사용되는 컴포넌트들은 supabase에 저장되어 있는 값을 가져오고 CSR렌더링을 사용하고 있는 곳에서는 zustand에 저장되어 있는 useFontStore()값을 가져와 데이터를 가져왔다.
🔥 구현을 하면서 느낀 점
지금까지 Next.JS로 개발할 때 느낀 점은 CSR과 SSR를 적절한 곳에서 사용하면서 데이터를 불러오는 성능 속도를 개선할 수 있다는 장점이 더 컸다. 하지만 이번에 공통된 컴포넌트에서의 데이터를 적용해보고 렌더링 기법을 넘나들며 개발을 하다보니 각 렌더링 기법에서 사용할 수 없는 기술들과 주의 해야할 점을 명확히 알게 된 것 같다.
