dayjs.locale('ko'); export default function App() { const [entries, setEntries] = useSharedStorage("sharedDiaryEntries", []); const user = useUser(); const [modalVisible, setModalVisible] = useState(false); const [editingEntry, setEditingEntry] = useState(null); const [titleInput, setTitleInput] = useState(""); const [contentInput, setContentInput] = useState(""); const [titleError, setTitleError] = useState(false); const [contentError, setContentError] = useState(false); const [flash, setFlash] = useState(false); const safeEntries = entries || []; const sorted = useMemo(() => [...safeEntries].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)), [safeEntries]); const openNew = () => { setEditingEntry(null); setTitleInput(""); setContentInput(""); setTitleError(false); setContentError(false); setModalVisible(true); }; const openEdit = (entry) => { setEditingEntry(entry); setTitleInput(entry.title); setContentInput(entry.content); setTitleError(false); setContentError(false); setModalVisible(true); }; const closeModal = () => { setModalVisible(false); setEditingEntry(null); setTitleInput(""); setContentInput(""); }; const handleSave = () => { let hasError = false; if (!titleInput.trim()) { setTitleError(true); hasError = true; } else setTitleError(false); if (!contentInput.trim()) { setContentError(true); hasError = true; } else setContentError(false); if (hasError) return; if (editingEntry) { setEntries((safeEntries || []).map(e => e.id === editingEntry.id ? { ...e, title: titleInput.trim(), content: contentInput.trim(), timestamp: new Date().toISOString() } : e )); } else { const newEntry = { id: `${Date.now()}-${Math.random().toString(36).slice(2)}`, title: titleInput.trim(), content: contentInput.trim(), timestamp: new Date().toISOString(), }; setEntries([newEntry, ...safeEntries]); } setFlash(true); setTimeout(() => setFlash(false), 1500); closeModal(); }; const handleDelete = (id) => { if (window.confirm("이 일기를 삭제하시겠습니까?")) { setEntries((safeEntries || []).filter(e => e.id !== id)); } }; const canSave = titleInput.trim().length > 0 && contentInput.trim().length > 0; return (

{/* 플래시 피드백 */} {flash && (

✅ 일기가 저장되었습니다

)} {/* 빈 상태 */} {sorted.length === 0 && (

📔

아직 작성된 일기가 없습니다

첫 번째 일기를 작성해 보세요

)} {/* 일기 목록 */}

{(sorted || []).map(entry => (

openEdit(entry)} >

{entry.title}

{dayjs(entry.timestamp).format("YYYY년 MM월 DD일 (ddd) HH:mm")}

{entry._authorName && (

{entry._authorAvatar && (

)} {entry._authorName}

)}

{entry.content}

))}

{/* 새 일기 FAB */} {sorted.length > 0 && (

)} {/* 모달 */} {modalVisible && (

{editingEntry ? "일기 수정" : "새 일기 쓰기"}

{/* 제목 */}

제목 { setTitleInput(e.target.value); if (e.target.value.trim()) setTitleError(false); }} placeholder="오늘의 제목을 입력하세요" className={`w-full px-3 py-2 rounded-xl border text-amber-900 text-sm outline-none transition-all ${ titleError ? "border-red-400 bg-red-50" : "border-amber-200 bg-amber-50 focus:border-amber-400" }`} /> {titleError &&

제목을 입력해 주세요

}

{/* 내용 */}

내용

{ setContentInput(e.target.value); if (e.target.value.trim()) setContentError(false); }}
                placeholder="오늘 있었던 일을 자유롭게 써 보세요..."
                rows={5}
                className={`w-full px-3 py-2 rounded-xl border text-amber-900 text-sm outline-none resize-none leading-relaxed transition-all ${
                  contentError ? "border-red-400 bg-red-50" : "border-amber-200 bg-amber-50 focus:border-amber-400"
                }`}
              />
              {contentError && <p className="text-red-400 text-[10px]">내용을 입력해 주세요</p>}
            </div>

{/* 버튼 */}
            <div className="flex gap-2">
              <button
                onClick={closeModal}
                className="flex-1 py-3 rounded-xl border border-amber-200 text-amber-700 text-sm font-semibold active:scale-95 transition-all"
              >
                취소
              </button>
              <button
                onClick={handleSave}
                disabled={!canSave}
                className={`flex-1 py-3 rounded-xl text-sm font-bold transition-all active:scale-95 ${
                  canSave
                    ? "bg-amber-600 text-white"
                    : "bg-amber-200 text-amber-400 cursor-not-allowed"
                }`}
              >
                {editingEntry ? "수정 완료" : "저장하기"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>