export default function App() { const [leavePosts, setLeavePosts] = useSharedStorage("leavePosts", []); const [leaveTime, setLeaveTime] = useState(""); const [message, setMessage] = useState(""); const [editPostId, setEditPostId] = useState(null); const [deleteConfirmId, setDeleteConfirmId] = useState(null); const safeList = Array.isArray(leavePosts) ? leavePosts : []; const sortedPosts = [...safeList].sort((a, b) => { if (!a.leaveTime) return 1; if (!b.leaveTime) return -1; return a.leaveTime.localeCompare(b.leaveTime); }); const isFormValid = leaveTime.trim() !== "" && message.trim() !== ""; const handleSubmit = () => { if (!isFormValid) return; if (editPostId) { setLeavePosts((safeList || []).map(p => p.id === editPostId ? { ...p, leaveTime, message, updatedAt: new Date().toISOString() } : p )); setEditPostId(null); } else { const newPost = { id: Date.now().toString(), leaveTime, message, createdAt: new Date().toISOString(), }; setLeavePosts([...safeList, newPost]); } setLeaveTime(""); setMessage(""); }; const handleEdit = (post) => { setEditPostId(post.id); setLeaveTime(post.leaveTime); setMessage(post.message); setDeleteConfirmId(null); }; const handleCancel = () => { setEditPostId(null); setLeaveTime(""); setMessage(""); }; const handleDeleteRequest = (id) => { setDeleteConfirmId(id); }; const handleDeleteConfirm = (id) => { setLeavePosts((safeList || []).filter(p => p.id !== id)); setDeleteConfirmId(null); if (editPostId === id) { setEditPostId(null); setLeaveTime(""); setMessage(""); } }; const handleDeleteCancel = () => { setDeleteConfirmId(null); }; const formatTime = (timeStr) => { if (!timeStr) return ""; const [h, m] = timeStr.split(":"); const hour = parseInt(h, 10); const period = hour < 12 ? "오전" : "오후"; const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour; return `${period} ${displayHour}:${m}`; }; const formatDate = (iso) => { if (!iso) return ""; const d = new Date(iso); const mo = d.getMonth() + 1; const da = d.getDate(); const hh = String(d.getHours()).padStart(2, "0"); const mm = String(d.getMinutes()).padStart(2, "0"); return `${mo}월 ${da}일 ${hh}:${mm} 등록`; }; return (

{/* 입력 폼 */}

{editPostId ? "✏️ 퇴근 정보 수정" : "🚪 퇴근 등록"}

퇴근 시간 setLeaveTime(e.target.value)} className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-violet-400" />

메시지

setMessage(e.target.value)}
                placeholder="퇴근 메시지를 입력하세요 (예: 오늘도 수고하셨습니다!)"
                rows={2}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-violet-400 resize-none"
              />
            </div>

<div className="flex gap-2 mt-1">
              {editPostId && (
                <button
                  onClick={handleCancel}
                  className="flex-1 border border-gray-200 text-gray-600 px-4 py-2.5 rounded-xl font-semibold text-sm active:scale-95 transition-all"
                >
                  취소
                </button>
              )}
              <button
                onClick={handleSubmit}
                disabled={!isFormValid}
                className={`flex-1 px-4 py-2.5 rounded-xl font-semibold text-sm transition-all active:scale-95 ${
                  isFormValid
                    ? "bg-gray-900 text-white"
                    : "bg-gray-200 text-gray-400 cursor-not-allowed"
                }`}
              >
                {editPostId ? "수정 완료" : "등록하기"}
              </button>
            </div>
          </div>
        </div>

{/* 게시물 목록 */}
        {sortedPosts.length === 0 ? (
          <div className="flex flex-col items-center justify-center gap-3 py-16">
            <div className="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center text-3xl">
              🏃
            </div>
            <p className="text-gray-500 text-sm text-center">아직 등록된 퇴근 정보가 없어요<br/>첫 번째로 퇴근을 알려보세요!</p>
          </div>
        ) : (
          <div className="flex flex-col gap-3">
            {(sortedPosts || []).map(post => (
              <div
                key={post.id}
                className={`bg-white rounded-2xl p-4 border shadow-sm transition-all ${
                  editPostId === post.id ? "border-violet-400" : "border-gray-100"
                }`}
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      {post._authorAvatar ? (
                        <img src={post._authorAvatar} className="w-6 h-6 rounded-full object-cover" />
                      ) : (
                        <div className="w-6 h-6 rounded-full bg-violet-200 flex items-center justify-center text-xs text-violet-700 font-bold">
                          {(post._authorName || "익명").charAt(0)}
                        </div>
                      )}
                      <span className="text-xs font-semibold text-gray-700">{post._authorName || "익명"}</span>
                      <span className="bg-blue-100 text-blue-600 text-xs font-bold px-2 py-0.5 rounded-full">
                        🕐 {formatTime(post.leaveTime)}
                      </span>
                    </div>
                    <p className="text-sm text-gray-700 mt-2 leading-relaxed">{post.message}</p>
                    <p className="text-[10px] text-gray-400 mt-1.5">{formatDate(post.updatedAt || post.createdAt)}</p>
                  </div>
                </div>

{/* 삭제 확인 */}
                {deleteConfirmId === post.id ? (
                  <div className="mt-3 pt-3 border-t border-gray-100">
                    <p className="text-xs text-gray-600 mb-2 text-center">정말 삭제하시겠어요?</p>
                    <div className="flex gap-2">
                      <button
                        onClick={handleDeleteCancel}
                        className="flex-1 border border-gray-200 text-gray-600 py-2 rounded-xl text-xs font-semibold active:scale-95 transition-all"
                      >
                        취소
                      </button>
                      <button
                        onClick={() => handleDeleteConfirm(post.id)}
                        className="flex-1 bg-red-500 text-white py-2 rounded-xl text-xs font-semibold active:scale-95 transition-all"
                      >
                        삭제
                      </button>
                    </div>
                  </div>
                ) : (
                  <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100">
                    <button
                      onClick={() => handleEdit(post)}
                      className="flex-1 border border-gray-200 text-gray-600 py-2 rounded-xl text-xs font-semibold active:scale-95 transition-all"
                    >
                      ✏️ 수정
                    </button>
                    <button
                      onClick={() => handleDeleteRequest(post.id)}
                      className="flex-1 border border-red-100 text-red-400 py-2 rounded-xl text-xs font-semibold active:scale-95 transition-all"
                    >
                      🗑️ 삭제
                    </button>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

<div className="text-[10px] text-gray-400 text-center py-4 opacity-60">
          퇴근 게시판 · 동료들과 퇴근 시간을 공유하세요
        </div>
      </div>
    </div>
  );
}</article></body></html>