1. Skeleton UI란?Skeleton UI는 콘텐츠가 로드되기 전에 표시되는 임시 화면으로, 실제 콘텐츠의 레이아웃을 미리 보여주는 플레이스홀더입니다.주로 회색 막대나 박스 형태로 표시되며, 로딩 중임을 나타내는 애니메이션 효과를 포함하는 것이 일반적입니다.2. Skeleton UI를 사용해야 하는 이유인지된 성능 향상사용자는 빈 화면이나 로딩 스피너보다 Skeleton UI를 볼 때 로딩 시간이 더 짧게 느껴진다.콘텐츠의 구조를 미리 보여줄 수 있다.더 나은 사용자 경험갑작스러운 레이아웃 변경을 방지하여 CLS(Cumulative Layout Shift)를 줄일 수 있다.앱이 더 반응적이고 생동감 있게 느껴진다.3. SkeletonUI 적용하는 법 컴포넌트 이름은 BoardPreview(Boar..

결과 미리보기 더보기 구현하고 싶은 것페이지는 최대 다섯개까지만 보여줌내가 선택한 페이지가 가운데 위치했으면 좋겠음ex) 총 페이지가 8페이지, 내가 선택한 페이지가 6이라면, 4 - 5 - 6 - 7 - 8 이렇게 보여주기 구현한 방법현재 페이지와 총 페이지를 상위 컴포넌트로부터 Props로 받는다.1~총 페이지까지 배열 PageArray를 생성한다.PageArray배열을 slice를 이용해 현재 페이지 기준 앞 뒤로 2개씩 자른다.여기서 예외를 처리해줘야 하는데 가능한 예외는 다음과 같다.일단, 현재 페이지가 1이라면 그냥 1 2 3 4 5 이런식으로 보여줘야 함현재 페이지가 2여도 1 2 3 4 5그리고 현재 페이지가 총 페이지 - 1이라면 총 페이지가 8이라고 했을때, 4 5 6 7 8 이렇게 보..

이번 프로젝트에서 GmarketSans 폰트를 적용해야하는데next 기본 폰트모음에는 없기 때문에 직접 적용해줘야 함!1. public 밑 GmarketSansTTF폴더 생성하고 폴더 안에 ttf 파일을 넣기 2. font.css.ts 파일 생성 후 GlobalFontFace 코드 작성import { globalFontFace } from '@vanilla-extract/css';const gmarketSans = 'gmarketSans';globalFontFace(gmarketSans, [ { src: 'url("/GmarketSansTTF/GmarketSansTTFBold.ttf")', fontWeight: 'bold', }, { src: 'url("/GmarketSansTTF/..