072DATA

사용자가 여러 챌린지를 고르고 각 챌린지마다 최소 하나의세부 옵션을 골라야 하는 폼을 만들어야 했다예를 들어 '파일 정리'를 골랐으면"불필요한 파일 삭제", "폴더 정리" 중에 하나는 꼭 선택해야 했다.  해결 과정폼에서 다룰 데이터 타입을 먼저 정의했다interface ChallengeFormInputs { content: string; images?: FileList; selectedOptions: Record // 챌린지별로 선택된 옵션들} const { register, handleSubmit, formState: { errors }, setError, clearErrors} = useForm();react-hook-form을 설정하고, 폼을 제출할 때는 이렇게 유효성 검사를 했다..

🔍 1. Supabase API 구현 - 특정 기간 데이터 조회export const calendarApi = { getByDateRange: async (startDate: string, endDate: string, userId: string) => { try { // 지정된 시작 및 종료 날짜의 시간 범위를 설정 const startDateTime = `${startDate}T00:00:00.000Z`; // 시작 날짜의 00시 설정 const endDateTime = `${endDate}T23:59:59.999Z`; // 종료 날짜의 23시 59분 설정 const { data, error } = await supabase .from("cha..

오늘은 달력을 구현했는데  useCalendar라는 훅을 만들어서달력에 관련된 로직을 관리하여 꽤 깔끔하게 설계가 된듯하다아직까지는 이벤트 관련 로직이 없어서 UI 정도만 설계했다다음 업데이트 해야할 사항으로 각 날짜별로 통계를 내려주고 해당 월의 통합 데이터까지 출력해야 한다  🛠️ 전체 구조 및 기술 스택React와 TypeScript를 사용한 달력 구현dayjs 라이브러리로 날짜 처리Custom Hook을 통한 로직 관리Tailwind CSS로 스타일링   💡 주요 로직 분석1. Custom Hook (useCalendar)상태 관리const [currentMonth, setCurrentMonth] = useState(dayjs()); 현재 표시되는 월을 상태로 관리dayjs 인스턴스를 초기값으..

데이터 로딩할 때 Skeleton UI 적용하기 🦴오늘은 데이터를 불러오는 동안 사용자 경험을 개선하기 위해 Skeleton UI를 적용해봤슴다사실 전에는 그냥 "로딩중..." 이라고 표시하고 말았는데, 이번에는 좀 더 세련되게 만들어보고 싶었어요Skeleton UI란? 🤔Skeleton UI는 실제 컨텐츠가 로드되기 전에 보여주는 임시 화면입니다!!페이스북이나 유튜브 같은 서비스를 사용하다 보면 콘텐츠가로드되기 전에 회색 막대들이 깜빡이면서 로딩을 표시하는데 그것이 바로 Skeleton UI입니닷Skeleton UI를 사용하는 이유사용자가 어떤 내용이 로드될지 미리 예상할 수 있다갑자기 콘텐츠가 확 나타나는 것보다 자연스럽다로딩 중이라는 걸 직관적으로 보여준다만드는 방법! 💻Tailwind CSS..

최근 작업하는 프로젝트에서 레벨링 시스템을 구현했는데유저의 포인트를 기반으로 레벨을 계산하고 현재 레벨과 다음 레벨까지 남은 포인트를시각적으로 표현하여 경험치바도 만들어 보았다 1. 레벨과 경험치 설정 우선, 레벨과 필요한 경험치를 정의한 LEVEL_CONFIG 라는 상수를 만들었다각 레벨마다 이름, 최소/최대 포인트, 이미지 등을 포함해사용자가 어떤 레벨에 속하는지 쉽게 파악할 수 있게 했다.export const LEVEL_CONFIG = { 1: { name: "씨앗", min: 0, max: 1000, image: "/seed.png" }, 2: { name: "새싹", min: 1100, max: 5000, image: "/sesac.png" }, 3: { name: "트리", min: 5..