Apply standardized dialog theme to PasswordDialog and Note dialogs

Project/frontend/src/components/note/NoteEditModal.tsx

@@ -26,7 +26,6 @@ export function NoteEditModal({
   processing,
   onClose,
   onSave,
-  initialEditMode = false,
 }: NoteEditModalProps) {
   const [pdate, setPdate] = useState('');
   const [title, setTitle] = useState('');
@@ -34,7 +33,6 @@ export function NoteEditModal({
   const [description, setDescription] = useState('');
   const [share, setShare] = useState(false);
   const [guid, setGuid] = useState('');
-  const [isEditMode, setIsEditMode] = useState(false);
 
   // 현재 로그인 사용자 정보 로드
   const [currentUserId, setCurrentUserId] = useState('');
@@ -66,19 +64,17 @@ export function NoteEditModal({
         setDescription(editingItem.description || '');
         setShare(editingItem.share || false);
         setGuid(editingItem.guid || '');
-        setIsEditMode(initialEditMode);
       } else {
-        // 신규 메모 - 편집 모드로 시작
+        // 신규 메모
         setPdate(new Date().toISOString().split('T')[0]);
         setTitle('');
         setUid(currentUserId);
         setDescription('');
         setShare(false);
         setGuid('');
-        setIsEditMode(true);
       }
     }
-  }, [isOpen, editingItem, currentUserId, initialEditMode]);
+  }, [isOpen, editingItem, currentUserId]);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -94,15 +90,15 @@ export function NoteEditModal({
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
-      <div className="bg-gray-900 rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden border border-white/10">
+      <div className="dialog-container rounded-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden transition-all duration-300">
         {/* 헤더 */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
-          <h2 className="text-xl font-bold text-white">
+        <div className="dialog-header flex items-center justify-between px-6 py-4">
+          <h2 className="dialog-title">
             {!editingItem ? '새 메모 작성' : '메모 편집'}
           </h2>
           <button
             onClick={onClose}
-            className="text-white/50 hover:text-white transition-colors"
+            className="text-text-secondary hover:text-text-primary transition-colors"
           >
             <X className="w-6 h-6" />
           </button>
@@ -117,47 +113,37 @@ export function NoteEditModal({
               <div>
                 <label className="flex items-center text-sm font-medium text-white/70 mb-2">
                   <Calendar className="w-4 h-4 mr-2" />
-                  날짜 {isEditMode && '*'}
+                  날짜
                 </label>
-                {isEditMode ? (
-                  <input
-                    type="date"
-                    value={pdate}
-                    onChange={(e) => setPdate(e.target.value)}
-                    required
-                    disabled={!canEdit}
-                    className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
-                  />
-                ) : (
-                  <div className="text-white text-sm">{pdate}</div>
-                )}
+                <input
+                  type="date"
+                  value={pdate}
+                  onChange={(e) => setPdate(e.target.value)}
+                  required
+                  disabled={!canEdit}
+                  className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
+                />
               </div>
 
               {/* 작성자 */}
               <div>
                 <label className="flex items-center text-sm font-medium text-white/70 mb-2">
                   <User className="w-4 h-4 mr-2" />
-                  작성자 {isEditMode && '*'}
+                  작성자
                 </label>
-                {isEditMode ? (
-                  <>
-                    <input
-                      type="text"
-                      value={uid}
-                      onChange={(e) => setUid(e.target.value)}
-                      required
-                      disabled={!canEdit || !canChangeUser}
-                      className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
-                      placeholder="사용자 ID"
-                    />
-                    {!canChangeUser && (
-                      <p className="text-xs text-white/50 mt-1">
-                        관리자만 변경 가능
-                      </p>
-                    )}
-                  </>
-                ) : (
-                  <div className="text-white text-sm">{uid}</div>
+                <input
+                  type="text"
+                  value={uid}
+                  onChange={(e) => setUid(e.target.value)}
+                  required
+                  disabled={!canEdit || !canChangeUser}
+                  className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
+                  placeholder="사용자 ID"
+                />
+                {!canChangeUser && (
+                  <p className="text-xs text-white/50 mt-1">
+                    관리자만 변경 가능
+                  </p>
                 )}
               </div>
 
@@ -166,33 +152,27 @@ export function NoteEditModal({
                 <label className="text-sm font-medium text-white/70 mb-2 block">
                   공유 설정
                 </label>
-                {isEditMode ? (
-                  <>
-                    <div className="flex items-center gap-2">
-                      <input
-                        type="checkbox"
-                        id="note-share"
-                        checked={share}
-                        onChange={(e) => setShare(e.target.checked)}
-                        disabled={!canEdit || !canChangeShare}
-                        className="w-4 h-4 bg-white/20 border border-white/30 rounded focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
-                      />
-                      <label htmlFor="note-share" className="text-sm text-white/70 cursor-pointer">
-                        공유
-                      </label>
-                    </div>
-                    {!canChangeShare && (
-                      <p className="text-xs text-white/50 mt-1">
-                        본인 메모만 변경 가능
-                      </p>
-                    )}
-                  </>
-                ) : (
-                  <div className="text-white text-sm">{share ? '공유됨' : '비공유'}</div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="note-share"
+                    checked={share}
+                    onChange={(e) => setShare(e.target.checked)}
+                    disabled={!canEdit || !canChangeShare}
+                    className="w-4 h-4 bg-white/20 border border-white/30 rounded focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
+                  />
+                  <label htmlFor="note-share" className="text-sm text-white/70 cursor-pointer">
+                    공유
+                  </label>
+                </div>
+                {!canChangeShare && (
+                  <p className="text-xs text-white/50 mt-1">
+                    본인 메모만 변경 가능
+                  </p>
                 )}
               </div>
 
-              {!canEdit && isEditMode && (
+              {!canEdit && (
                 <div className="bg-red-500/20 border border-red-500/50 rounded-lg p-3 text-red-300 text-xs">
                   타인의 자료는 수정할 수 없습니다.
                 </div>
@@ -204,21 +184,17 @@ export function NoteEditModal({
               {/* 제목 */}
               <div>
                 <label className="text-sm font-medium text-white/70 mb-2 block">
-                  제목 {isEditMode && '*'}
+                  제목
                 </label>
-                {isEditMode ? (
-                  <input
-                    type="text"
-                    value={title}
-                    onChange={(e) => setTitle(e.target.value)}
-                    required
-                    disabled={!canEdit}
-                    className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
-                    placeholder="메모 제목을 입력하세요"
-                  />
-                ) : (
-                  <div className="text-white text-lg font-semibold">{title}</div>
-                )}
+                <input
+                  type="text"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                  disabled={!canEdit}
+                  className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
+                  placeholder="메모 제목을 입력하세요"
+                />
               </div>
 
               {/* 내용 */}
@@ -226,27 +202,21 @@ export function NoteEditModal({
                 <label className="text-sm font-medium text-white/70 mb-2 block">
                   내용
                 </label>
-                {isEditMode ? (
-                  <textarea
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    disabled={!canEdit}
-                    rows={18}
-                    className="w-full bg-white/20 border border-white/30 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed resize-none"
-                    placeholder="메모 내용을 입력하세요"
-                  />
-                ) : (
-                  <div className="bg-white/10 border border-white/20 rounded-lg p-4 text-white whitespace-pre-wrap min-h-[400px]">
-                    {description || '내용이 없습니다.'}
-                  </div>
-                )}
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  disabled={!canEdit}
+                  rows={18}
+                  className="w-full bg-white/20 border border-white/30 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed resize-none"
+                  placeholder="메모 내용을 입력하세요"
+                />
               </div>
             </div>
           </div>
         </form>
 
         {/* 하단 버튼 */}
-        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-white/10 bg-white/5">
+        <div className="dialog-footer flex items-center justify-end gap-3 px-6 py-4">
           <button
             type="button"
             onClick={onClose}
@@ -255,7 +225,7 @@ export function NoteEditModal({
           >
             닫기
           </button>
-          {isEditMode && canEdit && (
+          {canEdit && (
             <button
               type="submit"
               onClick={handleSubmit}