Merge remote-tracking branch 'origin/develop'

Author: github-actions[bot]

package-lock.json

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import {
+  validateAdminId,
+  validateAdminPassword,
+  type ValidationResult,
+} from '../../../utils/adminValidators';
+
+interface AddAdminFormProps {
+  onSubmit: (data: { name: string; userId: string; password: string }) => void;
+}
+
+const AddAdminForm: React.FC<AddAdminFormProps> = ({ onSubmit }) => {
+  const [name, setName] = useState('');
+  const [userId, setUserId] = useState('');
+  const [password, setPassword] = useState('');
+
+  // 유효성 검증 결과 상태
+  const [userIdValidation, setUserIdValidation] = useState<ValidationResult>({ isValid: true });
+  const [passwordValidation, setPasswordValidation] = useState<ValidationResult>({ isValid: true });
+  const [koreanInputError, setKoreanInputError] = useState(false);
+
+  // 한글 입력 방지 및 에러 메시지 표시
+  const handleKoreanInput = (value: string) => {
+    const hasKorean = /[ㄱ-ㅎㅏ-ㅣ가-힣]/.test(value);
+    // 한글이 있으면 에러 메시지 표시, 없으면 바로 숨김
+    setKoreanInputError(hasKorean);
+    return hasKorean ? value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g, '') : value;
+  };
+
+  // 입력값 변경 핸들러
+  const handleUserIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = handleKoreanInput(e.target.value);
+    setUserId(value);
+    setUserIdValidation(validateAdminId(value));
+  };
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = handleKoreanInput(e.target.value);
+    setPassword(value);
+    setPasswordValidation(validateAdminPassword(value));
+  };
+
+  const isFormValid =
+    name.trim() &&
+    userId.trim() &&
+    password.trim() &&
+    userIdValidation.isValid &&
+    passwordValidation.isValid;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isFormValid) {
+      onSubmit({ name, userId, password });
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="text-white flex flex-col gap-10 max-w-[490px] w-full mx-auto"
+    >
+      {/* 이름 */}
+      <div>
+        <label className="heading-2-semibold block mb-8">이름</label>
+        <input
+          type="text"
+          placeholder="이름을 입력하세요."
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full rounded-8 bg-grey-700 py-20 px-24 placeholder-grey-400 subhead-1-medium text-grey-50 outline-none focus:ring-1 focus:ring-grey-300"
+        />
+      </div>
+
+      {/* 계정 */}
+      <div>
+        <label className="heading-2-semibold block mb-8">계정</label>
+        <div className="mb-12">
+          <input
+            type="text"
+            placeholder="아이디를 입력하세요."
+            value={userId}
+            onChange={handleUserIdChange}
+            pattern="[A-Za-z0-9!@#$%^&*()_+\-=[\]{};':\\|,.<>/?]+"
+            className={`w-full rounded-8 bg-grey-700 py-20 px-24 placeholder-grey-400 subhead-1-medium text-grey-50 outline-none focus:ring-1 focus:ring-grey-300 ${
+              !userIdValidation.isValid && userId ? 'ring-1 ring-status-error' : ''
+            }`}
+          />
+          {!userIdValidation.isValid && userId && (
+            <p className="mt-8 text-status-error body-2-medium">{userIdValidation.error}</p>
+          )}
+          {koreanInputError && (
+            <p className="mt-8 text-status-error body-2-medium">
+              한글은 입력할 수 없습니다. 영문, 숫자, 특수문자만 사용 가능합니다.
+            </p>
+          )}
+        </div>
+        <div>
+          <input
+            type="password"
+            placeholder="비밀번호를 입력하세요."
+            value={password}
+            onChange={handlePasswordChange}
+            pattern="[A-Za-z0-9!@#$%^&*()_+\-=[\]{};':\\|,.<>/?]+"
+            className={`w-full rounded-8 bg-grey-700 py-20 px-24 placeholder-grey-400 subhead-1-medium text-grey-50 outline-none focus:ring-1 focus:ring-grey-300 ${
+              !passwordValidation.isValid && password ? 'ring-1 ring-status-error' : ''
+            }`}
+          />
+          {!passwordValidation.isValid && password && (
+            <p className="mt-8 text-status-error body-2-medium">{passwordValidation.error}</p>
+          )}
+        </div>
+      </div>
+
+      {/* 버튼 */}
+      <button
+        type="submit"
+        disabled={!isFormValid}
+        className={`w-full mt-48 py-[18px] rounded-8 heading-3-semibold transition-all duration-300
+          ${
+            isFormValid
+              ? 'text-black cursor-pointer bg-green-300 hover:[background-image:var(--gradient-graphic)]'
+              : 'bg-grey-200 text-grey-700 cursor-not-allowed opacity-60'
+          }`}
+      >
+        관리자 아이디 추가하기
+      </button>
+    </form>
+  );
+};
+
+export default AddAdminForm;

src/components/admin/auth-manage/AddAdminForm.tsx

@@ -0,0 +1,114 @@
+import { useState, useCallback } from 'react';
+import AuthDeleteModal from '../auth-manage/AuthDeleteModal';
+
+const AdminList = () => {
+  const admins = [
+    { no: 1, name: '데브톡', id: 'devtalk1' },
+    { no: 2, name: '김데브', id: 'adgfeev2' },
+    { no: 3, name: '이데브', id: 'deeev3' },
+    { no: 4, name: '박데브', id: 'dddev4' },
+    { no: 5, name: '최데브', id: 'deeev5' },
+    { no: 6, name: '정데브', id: 'kkeev6' },
+    { no: 7, name: '안데브', id: 'deeev7' },
+    { no: 8, name: '강데브', id: 'deeev8' },
+    { no: 9, name: '인데브', id: 'deeev9' },
+  ];
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const [selectedAdmin, setSelectedAdmin] = useState<{
+    no: number;
+    name: string;
+    id: string;
+  } | null>(null);
+
+  // 우클릭 메뉴 처리
+  const handleContextMenu = useCallback((e: React.MouseEvent, admin: typeof selectedAdmin) => {
+    e.preventDefault(); // 기본 컨텍스트 메뉴 방지
+    setContextMenu({ x: e.clientX, y: e.clientY });
+    setSelectedAdmin(admin);
+  }, []);
+
+  const handleDelete = (no: number) => {
+    console.log(`관리자 ID ${no} 삭제`);
+  };
+
+  return (
+    <div className="w-full bg-grey-900 text-white rounded-10 overflow-hidden">
+      <table className="w-full text-left border-collapse">
+        {/* 헤더 */}
+        <thead>
+          <tr className="bg-grey-700 text-grey-200 subhead-1-medium">
+            <th className="w-[80px] py-20 px-[26px] text-center">No.</th>
+            <th className="max-w-[415px] py-20 px-24">이름</th>
+            <th className="py-20 px-24">아이디</th>
+            <th className="w-[120px] py-20 px-[44px] text-center">관리</th>
+          </tr>
+        </thead>
+
+        {/* 바디 */}
+        <tbody>
+          {admins.map((admin) => (
+            <tr
+              key={admin.no}
+              onContextMenu={(e) => handleContextMenu(e, admin)}
+              className="subhead-1-medium border-t border-grey-700 hover:bg-grey-800 transition-colors"
+            >
+              <td className="py-20 px-20 text-center">{String(admin.no).padStart(2, '0')}</td>
+              <td className="py-20 px-24">{admin.name}</td>
+              <td className="py-20 px-24">{admin.id}</td>
+              <td
+                className="py-20 px-[44px] text-center text-status-error hover:text-shadow-status-error cursor-pointer"
+                onClick={() => {
+                  setSelectedAdmin(admin);
+                  setModalOpen(true);
+                }}
+              >
+                삭제
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {selectedAdmin && (
+        <AuthDeleteModal
+          open={modalOpen}
+          adminId={selectedAdmin?.id ?? ''}
+          adminName={selectedAdmin?.name ?? ''}
+          onConfirm={() => {
+            handleDelete(selectedAdmin?.no ?? 0);
+            setModalOpen(false);
+          }}
+          onCancel={() => setModalOpen(false)}
+        />
+      )}
+
+      {/* 우클릭 메뉴 */}
+      {contextMenu && selectedAdmin && (
+        <div
+          className="fixed bg-grey-800 rounded-8 shadow-lg py-8 z-50 hover:bg-grey-700"
+          style={{
+            left: contextMenu.x,
+            top: contextMenu.y,
+          }}
+        >
+          <button
+            className="w-full px-16 py-12 text-left text-status-error body-2-medium cursor-pointer"
+            onClick={() => {
+              setModalOpen(true);
+              setContextMenu(null);
+            }}
+          >
+            관리자 권한 삭제
+          </button>
+        </div>
+      )}
+
+      {/* 배경 클릭시 컨텍스트 메뉴 닫기 */}
+      {contextMenu && <div className="fixed inset-0 z-40" onClick={() => setContextMenu(null)} />}
+    </div>
+  );
+};
+
+export default AdminList;