로컬 스토리지를 활용하여 사용자의 다크모드 설정, 일기 데이터, AI 답장을 저장하고 관리하는 기능을 구현했다.페이지를 새로고침하거나 재방문해도 사용자의 데이터가 유지된다.다크모드 설정 저장설정 불러오기애플리케이션 로드 시 로컬 스토리지에서 사용자의 마지막 다크모드 설정을 불러온다.const ThemeProvider = ({ children }: ThemeProviderProps) => { const loadDarkModeSetting = () => { const storedDarkModeSetting = localStorage.getItem("darkMode"); return storedDarkModeSetting ? JSON.parse(storedDarkModeSetting) : fals..

사용자가 작성한 일기에 대해 GPT API를 활용하여 상담 전문가 관점의 답장을 받을 수 있는 기능을 구현했다.GPT API 연동프롬프트 설정GPT API에 전달할 메시지 구조를 정의했다.const messages = [ // 역할 정의 { role: "system", content: "You are a Counseling Expert, specializing in personal development through diary writing.", }, // 사용자 일기 입력 { role: "user", content: ` """ ${prompt} """`, }, // AI 지시 사항 { role: "user", conten..

Tailwind CSS의 다크모드 기능과 React Context API를 활용하여 애플리케이션 전체에서 일관된 다크모드 전환 기능을 구현했다.Tailwind 설정tailwind.config.ts에서 다크모드를 클래스 기반으로 설정했다.darkMode: "class", // .dark 클래스 존재 여부에 따라 다크모드 활성화theme: { extend: { colors: { // 색상 스키마 }, },},이를 통해 HTML 요소에 .dark 클래스가 추가되면 다크모드 스타일이 적용되도록 했다. 다크모드 상태 관리ThemeContext 생성Context API를 사용해 다크모드 상태를 전역으로 관리했다.const ThemeContext = createContext({ isDark..