Diary 페이지에서 특정 일기를 불러와 상세 내용을 보여주는 기능을 구현했다.URL 파라미터로 전달된 일기 ID를 통해 데이터를 조회하고, 존재하지 않는 일기에 대한 예외 처리도 추가했다.일기 데이터 불러오기useDiary 커스텀 훅특정 ID의 일기를 찾아 반환하는 커스텀 훅을 구현했다.const data = useContext(DiaryStateContext);DiaryStateContext를 통해 전역에서 관리되는 일기 데이터에 접근한다. 특정 일기 찾기 및 예외 처리const [curDiaryItem, setCurDiaryItem] = useState();useEffect(() => { const currentDiaryItem = data.find((item) => item.id === id);..

New 페이지에서 일기를 작성할 수 있는 기능을 구현했다.날짜 선택, 감정 선택, 일기 내용 입력이 가능하며, 날짜 포맷팅 유틸리티를 통해 일관된 날짜 형식을 유지한다.날짜 포맷팅 유틸리티formatWithZero 함수날짜를 두 자릿수로 일관되게 표시하기 위한 함수다.const formatWithZero = (number: number) => number 숫자가 10보다 작을 경우 앞에 0을 붙여 반환한다. getStringDate 함수날짜 데이터를 원하는 문자열 형식으로 변환하는 함수다.export const getStringDate = ( targetDate: Date | string | number, format: string = "yyyy-mm-dd") => { const dateObj =..

Home 페이지에서 월별 일기 데이터를 관리하고 정렬하는 기능을 구현했다. 사용자가 월을 전환하며 해당 기간의 일기만 볼 수 있고, 최신순 또는 오래된순으로 정렬할 수 있다.날짜 및 기간 관리현재 날짜 표시 및 월 변경pivotDate상태로 현재 표시 중인 월을 관리하고, 좌우 버튼으로 이전/다음 달로 이동할 수 있도록 구현했다.const [pivotDate, setPivotDate] = useState(new Date());const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1));};const onDecreaseMonth = () => { setPivotDate(new..

이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션하면서, 기존에 자바스크립트로 작성된 공용 컴포넌트들을 타입스크립트로 재작성했다. 기존 프로젝트에서 이미 Button과 Header 같은 재사용 가능한 컴포넌트를 구현해두었지만, 타입 안정성이 부족했다. 타입스크립트를 도입하면서 props의 타입을 명확히 정의하고, 컴파일 타임에 오류를 잡을 수 있도록 개선했다.Button 컴포넌트props 타입 정의text, type, onClick 세 가지 props의 타입을 명시적으로 정의했다.type ButtonProps = { text: string; type: "DEFAULT" | "POSITIVE" | "NEGATIVE"; onClick: () => void;};export defau..