export default function App() { const [memos, setMemos] = useSharedStorage("sharedMemos", []); const [showAddModal, setShowAddModal] = useState(false); const [newTitle, setNewTitle] = useState(""); const [newContent, setNewContent] = useState(""); const [addError, setAddError] = useState(""); const [editingId, setEditingId] = useState(null); const [editTitle, setEditTitle] = useState(""); const [editContent, setEditContent] = useState(""); const [editError, setEditError] = useState(""); const [deleteConfirmId, setDeleteConfirmId] = useState(null); const [flash, setFlash] = useState(""); const { send } = useNotification(); const safeMemos = Array.isArray(memos) ? memos : []; const showFlash = (msg) => { setFlash(msg); setTimeout(() => setFlash(""), 2000); }; const handleAddSubmit = () => { if (!newTitle.trim() || !newContent.trim()) { setAddError("제목과 내용을 모두 입력해주세요."); return; } const memo = { id: Date.now().toString(), title: newTitle.trim(), content: newContent.trim(), timestamp: new Date().toISOString(), }; setMemos([memo, ...safeMemos]); send("새 메모 추가됨: " + memo.title); setNewTitle(""); setNewContent(""); setAddError(""); setShowAddModal(false); showFlash("메모가 추가되었습니다!"); }; const handleEditStart = (memo) => { setEditingId(memo.id); setEditTitle(memo.title); setEditContent(memo.content); setEditError(""); }; const handleEditSave = (id) => { if (!editTitle.trim() || !editContent.trim()) { setEditError("제목과 내용을 모두 입력해주세요."); return; } const updated = (safeMemos || []).map((m) => m.id === id ? { ...m, title: editTitle.trim(), content: editContent.trim(), editedAt: new Date().toISOString() } : m ); setMemos(updated); send("메모 수정됨: " + editTitle.trim()); setEditingId(null); setEditError(""); showFlash("메모가 수정되었습니다!"); }; const handleEditCancel = () => { setEditingId(null); setEditError(""); }; const handleDeleteConfirm = (id) => { const memo = (safeMemos || []).find((m) => m.id === id); setMemos((safeMemos || []).filter((m) => m.id !== id)); if (memo) send("메모 삭제됨: " + memo.title); setDeleteConfirmId(null); showFlash("메모가 삭제되었습니다."); }; const formatDate = (iso) => { if (!iso) return ""; const d = new Date(iso); return d.toLocaleString("ko-KR", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }); }; return (

{flash ? (

{flash}

) : null}

{/* 헤더 */}

공유 메모 보드

팀원 모두와 실시간 공유

{safeMemos.length}개

{/* 메모 목록 */} {safeMemos.length === 0 ? (

📝

아직 메모가 없어요.
첫 번째 메모를 추가해보세요!

) : (

{(safeMemos || []).map((memo) => (

{editingId === memo.id ? (

setEditTitle(e.target.value)} placeholder="제목 입력" />

setEditContent(e.target.value)}
                      placeholder="내용 입력"
                    />
                    {editError && (
                      <p className="text-xs text-red-500">{editError}</p>
                    )}
                    <div className="flex gap-2">
                      <button
                        className="flex-1 py-2 bg-red-500 text-white text-sm font-semibold rounded-xl active:scale-95 transition-all"
                        onClick={() => handleEditSave(memo.id)}
                      >
                        저장
                      </button>
                      <button
                        className="flex-1 py-2 bg-gray-100 text-gray-600 text-sm font-semibold rounded-xl active:scale-95 transition-all"
                        onClick={handleEditCancel}
                      >
                        취소
                      </button>
                    </div>
                  </div>
                ) : (
                  <>
                    <div className="flex items-start justify-between gap-2 mb-1">
                      <h2 className="text-sm font-bold text-gray-900 flex-1 leading-snug">{memo.title}</h2>
                      <div className="flex gap-1 shrink-0">
                        <button
                          className="w-8 h-8 flex items-center justify-center rounded-lg bg-blue-50 text-blue-500 text-xs active:scale-95 transition-all"
                          onClick={() => handleEditStart(memo)}
                          title="수정"
                        >
                          ✏️
                        </button>
                        <button
                          className="w-8 h-8 flex items-center justify-center rounded-lg bg-red-50 text-red-500 text-xs active:scale-95 transition-all"
                          onClick={() => setDeleteConfirmId(memo.id)}
                          title="삭제"
                        >
                          🗑️
                        </button>
                      </div>
                    </div>
                    <p className="text-xs text-gray-700 leading-relaxed mb-2 whitespace-pre-wrap">{memo.content}</p>
                    <div className="flex items-center gap-2">
                      <span className="text-[10px] text-gray-400">{formatDate(memo.timestamp)}</span>
                      {memo.editedAt && (
                        <span className="text-[10px] bg-orange-100 text-orange-600 px-2 py-0.5 rounded-full">수정됨</span>
                      )}
                    </div>
                  </>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

{/* 플로팅 추가 버튼 */}
      <button
        className="absolute bottom-6 right-5 w-14 h-14 bg-red-500 text-white rounded-full shadow-lg flex items-center justify-center text-2xl active:scale-95 transition-all z-30"
        onClick={() => { setShowAddModal(true); setAddError(""); setNewTitle(""); setNewContent(""); }}
      >
        +
      </button>

{/* 추가 모달 */}
      {showAddModal && (
        <div className="absolute inset-0 z-40">
          <div className="absolute inset-0 bg-black/40" onClick={() => setShowAddModal(false)} />
          <div className="absolute bottom-0 inset-x-0 bg-white rounded-t-2xl p-5 z-10">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-base font-bold text-gray-900">새 메모 추가</h3>
              <button
                className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 active:scale-95 transition-all"
                onClick={() => setShowAddModal(false)}
              >
                ✕
              </button>
            </div>
            <div className="flex flex-col gap-3">
              <div>
                <label className="text-xs font-semibold text-gray-700 mb-1 block">제목</label>
                <input
                  className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:border-red-400"
                  placeholder="메모 제목을 입력하세요"
                  value={newTitle}
                  onChange={(e) => setNewTitle(e.target.value)}
                  maxLength={100}
                />
              </div>
              <div>
                <label className="text-xs font-semibold text-gray-700 mb-1 block">내용</label>
                <textarea
                  className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:border-red-400 resize-none"
                  placeholder="메모 내용을 입력하세요"
                  rows={4}
                  value={newContent}
                  onChange={(e) => setNewContent(e.target.value)}
                  maxLength={1000}
                />
              </div>
              {addError && <p className="text-xs text-red-500">{addError}</p>}
              <button
                className={`w-full py-3 rounded-xl text-sm font-bold transition-all active:scale-95 ${
                  newTitle.trim() && newContent.trim()
                    ? "bg-red-500 text-white"
                    : "bg-gray-100 text-gray-400 cursor-not-allowed"
                }`}
                onClick={handleAddSubmit}
              >
                메모 저장하기
              </button>
            </div>
          </div>
        </div>
      )}

{/* 삭제 확인 모달 */}
      {deleteConfirmId && (
        <div className="absolute inset-0 z-40">
          <div className="absolute inset-0 bg-black/40" onClick={() => setDeleteConfirmId(null)} />
          <div className="absolute bottom-0 inset-x-0 bg-white rounded-t-2xl p-5 z-10">
            <div className="flex flex-col items-center gap-4">
              <div className="w-14 h-14 rounded-full bg-red-50 flex items-center justify-center text-2xl">🗑️</div>
              <div className="text-center">
                <h3 className="text-base font-bold text-gray-900 mb-1">메모를 삭제할까요?</h3>
                <p className="text-xs text-gray-500">삭제한 메모는 복구할 수 없습니다.</p>
              </div>
              <div className="flex gap-3 w-full">
                <button
                  className="flex-1 py-3 bg-gray-100 text-gray-700 text-sm font-semibold rounded-xl active:scale-95 transition-all"
                  onClick={() => setDeleteConfirmId(null)}
                >
                  취소
                </button>
                <button
                  className="flex-1 py-3 bg-red-500 text-white text-sm font-semibold rounded-xl active:scale-95 transition-all"
                  onClick={() => handleDeleteConfirm(deleteConfirmId)}
                >
                  삭제하기
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>