Merge branch 'iipbs/st/dev' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/st/dev

.gitea/workflows/deploy.yml

@@ -24,6 +24,8 @@ jobs:
         run: |
           ssh -i ~/.ssh/deploy_key -p 28 onasys@192.168.0.4 << 'EOF'
             cd ~/frontend
+            git restore .
+            git clean -fd
             git pull origin deploy
             pnpm install
             pnpm turbo build

apps/_template/features/README.md

@@ -13,6 +13,7 @@
 > ⚠️ **중요**: 모든 것을 feature로 만들 필요는 없습니다.
 
 Feature로 만드는 것이 좋은 지표:
+
 - **여러 페이지에서 재사용됨**: 예를 들어, 여러 에디터가 있고 모두 댓글 기능이 있다면, 댓글은 재사용 가능한 feature입니다
 - **중요한 비즈니스 기능**: 신규 프로젝트 참여자가 Features 폴더를 보고 앱의 주요 기능을 빠르게 파악할 수 있어야 합니다
 
@@ -56,7 +57,7 @@ export function LoginForm() {
     password: ''
   });
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     await loginUser(credentials);
   };
@@ -104,11 +105,13 @@ export type { LoginCredentials } from './model/types';
 ## 레이어 의존성 규칙
 
 ✅ **허용되는 의존성**:
+
 - `shared` 레이어의 모듈
 - `entities` 레이어의 모듈
 - 같은 feature 슬라이스 내의 다른 세그먼트
 
 ❌ **금지된 의존성**:
+
 - 다른 `features` 슬라이스 (feature 간 직접 의존 금지)
 - `widgets` 레이어
 - `pages` 레이어

apps/cm/package.json

@@ -12,6 +12,9 @@
     "@common/assets": "workspace:*",
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@fullcalendar/core": "^6.1.17",

apps/cm/src/pages/auth/login/ui/SignupModal.tsx

@@ -14,7 +14,9 @@ interface SignupModalProps {
 }
 
 function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
-  const [currentStep, setCurrentStep] = useState<'agreement' | 'signup'>('agreement');
+  const [currentStep, setCurrentStep] = useState<"agreement" | "signup">(
+    "agreement",
+  );
   const [agreed, setAgreed] = useState(false);
   const [formData, setFormData] = useState({
     userId: "",
@@ -47,7 +49,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
   // 모달이 닫힐 때 초기화
   useEffect(() => {
     if (!open) {
-      setCurrentStep('agreement');
+      setCurrentStep("agreement");
       setAgreed(false);
       setFormData({
         userId: "",
@@ -81,17 +83,19 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const handleNextStep = () => {
     if (agreed) {
-      setCurrentStep('signup');
+      setCurrentStep("signup");
     }
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
-    
+    setFormData((prev) => ({ ...prev, [name]: value }));
+
     // 에러 초기화
     if (errors[name]) {
-      setErrors(prev => ({ ...prev, [name]: "" }));
+      setErrors((prev) => ({ ...prev, [name]: "" }));
     }
   };
 
@@ -102,20 +106,27 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     if (!formData.userId) newErrors.userId = "아이디를 입력해주세요.";
     if (!formData.userName) newErrors.userName = "이름을 입력해주세요.";
     if (!formData.password) newErrors.password = "비밀번호를 입력해주세요.";
-    if (!formData.confirmPassword) newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
+    if (!formData.confirmPassword)
+      newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
     if (!formData.pswdHnt) newErrors.pswdHnt = "비밀번호 힌트를 입력해주세요.";
     if (!formData.laeSeCd) newErrors.laeSeCd = "법인구분을 선택해주세요.";
     if (!formData.ogdpSeCd) newErrors.ogdpSeCd = "기관구분을 선택해주세요.";
 
     // 비밀번호 확인
-    if (formData.password && formData.confirmPassword && formData.password !== formData.confirmPassword) {
+    if (
+      formData.password &&
+      formData.confirmPassword &&
+      formData.password !== formData.confirmPassword
+    ) {
       newErrors.confirmPassword = "비밀번호가 일치하지 않습니다.";
     }
 
     // 비밀번호 정규식 검증
-    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
+    const passwordRegex =
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
     if (formData.password && !passwordRegex.test(formData.password)) {
-      newErrors.password = "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
+      newErrors.password =
+        "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
     }
 
     // 이메일 형식 검증
@@ -124,8 +135,10 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     }
 
     // 중복 체크 검증
-    if (idAvailable === false) newErrors.userId = "이미 사용 중인 아이디입니다.";
-    if (emailAvailable === false) newErrors.email = "이미 사용 중인 이메일입니다.";
+    if (idAvailable === false)
+      newErrors.userId = "이미 사용 중인 아이디입니다.";
+    if (emailAvailable === false)
+      newErrors.email = "이미 사용 중인 이메일입니다.";
 
     setErrors(newErrors);
     const isValid = Object.keys(newErrors).length === 0;
@@ -135,7 +148,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkUserIdDuplicate = async () => {
     if (!formData.userId) {
-      setErrors(prev => ({ ...prev, userId: "아이디를 입력해주세요." }));
+      setErrors((prev) => ({ ...prev, userId: "아이디를 입력해주세요." }));
       return;
     }
 
@@ -147,19 +160,25 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       });
       const response = await signupClient.post<boolean>(
         `${ENDPOINT.USER_SERVICE.USERS}/existsUserId`,
-        { userId: formData.userId }
+        { userId: formData.userId },
       );
 
       const exists = response.data;
       setIdAvailable(!exists);
       if (exists) {
-        setErrors(prev => ({ ...prev, userId: "이미 사용 중인 아이디입니다." }));
+        setErrors((prev) => ({
+          ...prev,
+          userId: "이미 사용 중인 아이디입니다.",
+        }));
       } else {
-        setErrors(prev => ({ ...prev, userId: "" }));
+        setErrors((prev) => ({ ...prev, userId: "" }));
       }
     } catch (error) {
       console.error("아이디 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, userId: "아이디 중복 체크 중 오류가 발생했습니다." }));
+      setErrors((prev) => ({
+        ...prev,
+        userId: "아이디 중복 체크 중 오류가 발생했습니다.",
+      }));
     } finally {
       setIsCheckingId(false);
     }
@@ -167,7 +186,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkEmailDuplicate = async () => {
     if (!formData.email) {
-      setErrors(prev => ({ ...prev, email: "이메일을 입력해주세요." }));
+      setErrors((prev) => ({ ...prev, email: "이메일을 입력해주세요." }));
       return;
     }
 
@@ -179,28 +198,34 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       });
       const response = await signupClient.post<boolean>(
         `${ENDPOINT.USER_SERVICE.USERS}/exists`,
-        { email: formData.email }
+        { email: formData.email },
       );
 
       const exists = response.data;
       setEmailAvailable(!exists);
       if (exists) {
-        setErrors(prev => ({ ...prev, email: "이미 사용 중인 이메일입니다." }));
+        setErrors((prev) => ({
+          ...prev,
+          email: "이미 사용 중인 이메일입니다.",
+        }));
       } else {
-        setErrors(prev => ({ ...prev, email: "" }));
+        setErrors((prev) => ({ ...prev, email: "" }));
       }
     } catch (error) {
       console.error("이메일 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, email: "이메일 중복 체크 중 오류가 발생했습니다." }));
+      setErrors((prev) => ({
+        ...prev,
+        email: "이메일 중복 체크 중 오류가 발생했습니다.",
+      }));
     } finally {
       setIsCheckingEmail(false);
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     console.log("회원가입 버튼 클릭됨");
-    
+
     if (!validateForm()) {
       console.log("폼 검증 실패");
       return;
@@ -230,19 +255,19 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
       // SignupClient를 통해 익명사용자 회원가입 API 호출
       const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL
+        baseURL: BASE_URL,
       });
       const response = await signupClient.post(
         `${ENDPOINT.USER_SERVICE.USERS}/anonymouse/users/join`,
-        signupData
+        signupData,
       );
 
       console.log("회원가입 성공:", response.data);
-      
+
       // 성공 시 모달 닫기 및 콜백 호출
       onSuccess();
       onClose();
-      
+
       // 폼 초기화
       setFormData({
         userId: "",
@@ -267,13 +292,12 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       setErrors({});
       setIdAvailable(null);
       setEmailAvailable(null);
-
     } catch (error: unknown) {
       console.error("회원가입 오류:", error);
       if (error instanceof Error) {
-        setErrors(prev => ({ ...prev, submit: error.message }));
+        setErrors((prev) => ({ ...prev, submit: error.message }));
       } else {
-        setErrors(prev => ({ ...prev, submit: "회원가입에 실패했습니다." }));
+        setErrors((prev) => ({ ...prev, submit: "회원가입에 실패했습니다." }));
       }
     } finally {
       setIsLoading(false);
@@ -286,36 +310,52 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal-content" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
-          <h2>{currentStep === 'agreement' ? '개인정보제공동의' : '회원가입'}</h2>
-          <button className="close-button" onClick={onClose}>×</button>
+          <h2>
+            {currentStep === "agreement" ? "개인정보제공동의" : "회원가입"}
+          </h2>
+          <button className="close-button" onClick={onClose}>
+            ×
+          </button>
         </div>
-        
-        {currentStep === 'agreement' ? (
+
+        {currentStep === "agreement" ? (
           <div className="agreement-content">
             <div className="agreement-text">
               <h3>개인정보 수집 및 이용 동의</h3>
               <p>회원가입을 위해 다음과 같이 개인정보를 수집 및 이용합니다.</p>
-              
+
               <h4>1. 수집하는 개인정보 항목</h4>
               <ul>
-                <li>필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분, 기관구분</li>
-                <li>선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드, 상세기관코드, 사업자등록번호</li>
+                <li>
+                  필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분,
+                  기관구분
+                </li>
+                <li>
+                  선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드,
+                  상세기관코드, 사업자등록번호
+                </li>
               </ul>
-              
+
               <h4>2. 개인정보의 수집 및 이용목적</h4>
               <ul>
                 <li>회원가입 및 관리</li>
                 <li>서비스 제공 및 운영</li>
                 <li>고객상담 및 문의응답</li>
               </ul>
-              
+
               <h4>3. 개인정보의 보유 및 이용기간</h4>
-              <p>회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당 기간까지)</p>
-              
+              <p>
+                회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당
+                기간까지)
+              </p>
+
               <h4>4. 동의 거부권 및 거부 시 불이익</h4>
-              <p>개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부 시 회원가입이 제한됩니다.</p>
+              <p>
+                개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부
+                시 회원가입이 제한됩니다.
+              </p>
             </div>
-            
+
             <div className="agreement-checkbox">
               <label>
                 <input
@@ -326,13 +366,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                 <span>개인정보 수집 및 이용에 동의합니다.</span>
               </label>
             </div>
-            
+
             <div className="agreement-actions">
-              <button
-                type="button"
-                onClick={onClose}
-                className="cancel-button"
-              >
+              <button type="button" onClick={onClose} className="cancel-button">
                 취소
               </button>
               <button
@@ -349,7 +385,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
           <form onSubmit={handleSubmit} className="signup-form">
             <div className="form-section">
               <h3>기본 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="userId">아이디 *</label>
@@ -373,8 +409,14 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingId ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {idAvailable === true && <span className="success-message">사용 가능한 아이디입니다.</span>}
-                  {errors.userId && <span className="error-message">{errors.userId}</span>}
+                  {idAvailable === true && (
+                    <span className="success-message">
+                      사용 가능한 아이디입니다.
+                    </span>
+                  )}
+                  {errors.userId && (
+                    <span className="error-message">{errors.userId}</span>
+                  )}
                 </div>
               </div>
 
@@ -390,7 +432,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     placeholder="이름을 입력하세요"
                     disabled={isLoading}
                   />
-                  {errors.userName && <span className="error-message">{errors.userName}</span>}
+                  {errors.userName && (
+                    <span className="error-message">{errors.userName}</span>
+                  )}
                 </div>
               </div>
 
@@ -416,8 +460,14 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingEmail ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {emailAvailable === true && <span className="success-message">사용 가능한 이메일입니다.</span>}
-                  {errors.email && <span className="error-message">{errors.email}</span>}
+                  {emailAvailable === true && (
+                    <span className="success-message">
+                      사용 가능한 이메일입니다.
+                    </span>
+                  )}
+                  {errors.email && (
+                    <span className="error-message">{errors.email}</span>
+                  )}
                 </div>
               </div>
 
@@ -434,7 +484,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.password && <span className="error-message">{errors.password}</span>}
+                  {errors.password && (
+                    <span className="error-message">{errors.password}</span>
+                  )}
                 </div>
               </div>
 
@@ -451,7 +503,11 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.confirmPassword && <span className="error-message">{errors.confirmPassword}</span>}
+                  {errors.confirmPassword && (
+                    <span className="error-message">
+                      {errors.confirmPassword}
+                    </span>
+                  )}
                 </div>
               </div>
 
@@ -468,7 +524,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.pswdHnt && <span className="error-message">{errors.pswdHnt}</span>}
+                  {errors.pswdHnt && (
+                    <span className="error-message">{errors.pswdHnt}</span>
+                  )}
                 </div>
               </div>
 
@@ -485,14 +543,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={100}
                     disabled={isLoading}
                   />
-                  {errors.pswdAns && <span className="error-message">{errors.pswdAns}</span>}
+                  {errors.pswdAns && (
+                    <span className="error-message">{errors.pswdAns}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>연락처 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="mphn">휴대폰 번호</label>
@@ -506,7 +566,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.mphn && <span className="error-message">{errors.mphn}</span>}
+                  {errors.mphn && (
+                    <span className="error-message">{errors.mphn}</span>
+                  )}
                 </div>
               </div>
 
@@ -523,14 +585,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.telno && <span className="error-message">{errors.telno}</span>}
+                  {errors.telno && (
+                    <span className="error-message">{errors.telno}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>주소 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="zip">우편번호</label>
@@ -544,7 +608,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={5}
                     disabled={isLoading}
                   />
-                  {errors.zip && <span className="error-message">{errors.zip}</span>}
+                  {errors.zip && (
+                    <span className="error-message">{errors.zip}</span>
+                  )}
                 </div>
               </div>
 
@@ -561,7 +627,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.addr && <span className="error-message">{errors.addr}</span>}
+                  {errors.addr && (
+                    <span className="error-message">{errors.addr}</span>
+                  )}
                 </div>
               </div>
 
@@ -578,14 +646,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.daddr && <span className="error-message">{errors.daddr}</span>}
+                  {errors.daddr && (
+                    <span className="error-message">{errors.daddr}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>기관 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="laeSeCd">법인구분 *</label>
@@ -601,7 +671,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="02">민간기업</option>
                     <option value="03">개인</option>
                   </select>
-                  {errors.laeSeCd && <span className="error-message">{errors.laeSeCd}</span>}
+                  {errors.laeSeCd && (
+                    <span className="error-message">{errors.laeSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -621,7 +693,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="03">공공기관</option>
                     <option value="04">민간기업</option>
                   </select>
-                  {errors.ogdpSeCd && <span className="error-message">{errors.ogdpSeCd}</span>}
+                  {errors.ogdpSeCd && (
+                    <span className="error-message">{errors.ogdpSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -638,7 +712,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.instSeCd && <span className="error-message">{errors.instSeCd}</span>}
+                  {errors.instSeCd && (
+                    <span className="error-message">{errors.instSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -655,21 +731,25 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.dtlInstCd && <span className="error-message">{errors.dtlInstCd}</span>}
+                  {errors.dtlInstCd && (
+                    <span className="error-message">{errors.dtlInstCd}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             {errors.submit && (
               <div className="form-row">
-                <div className="error-message submit-error">{errors.submit}</div>
+                <div className="error-message submit-error">
+                  {errors.submit}
+                </div>
               </div>
             )}
 
             <div className="form-actions">
               <button
                 type="button"
-                onClick={() => setCurrentStep('agreement')}
+                onClick={() => setCurrentStep("agreement")}
                 className="back-button"
                 disabled={isLoading}
               >

apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx

@@ -305,7 +305,7 @@ function UserSignupModal({ open, onClose, onSuccess }: UserSignupModalProps) {
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     console.log("회원가입 버튼 클릭됨 - handleSubmit");
     console.log("현재 폼 데이터:", formData);

apps/cm/src/pages/auth/login/ui/login-page.tsx

@@ -26,7 +26,7 @@ function LoginPage() {
     console.log("Modal states - OTP:", showOtpModal, "2FA:", showTwoFAModal);
   }, [showOtpModal, showTwoFAModal]);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError("");
@@ -43,44 +43,54 @@ function LoginPage() {
       if (isOtpEnabled) {
         // 2FA 로그인 - Proxy를 통해 처리 (2FA 전용 엔드포인트 사용)
         console.log("Starting 2FA login...");
-        
-        const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            userId,
-            password,
-            provider: 'password'
-          }),
-        });
+
+        const response = await fetch(
+          `/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              userId,
+              password,
+              provider: "password",
+            }),
+          },
+        );
 
         if (!response.ok) {
           const errorData = await response.json();
-          let errorMsg = errorData.message || '로그인 실패';
+          let errorMsg = errorData.message || "로그인 실패";
           if (Array.isArray(errorData.errors) && errorData.errors.length > 0) {
-            errorMsg = errorData.errors.map((e: { message: string }) => e.message).join(', ');
+            errorMsg = errorData.errors
+              .map((e: { message: string }) => e.message)
+              .join(", ");
           }
           throw new Error(errorMsg);
         }
 
         const data = await response.json();
         console.log("2FA login response:", data);
-        console.log("Response headers:", Object.fromEntries(response.headers.entries()));
-        
+        console.log(
+          "Response headers:",
+          Object.fromEntries(response.headers.entries()),
+        );
+
         // 2FA 로그인 응답에는 tempToken과 registered2FA만 포함됨
         if (!data.tempToken) {
           throw new Error("Missing tempToken in 2FA login response");
         }
 
         // 임시 토큰을 localStorage에 저장 (OTP 인증용)
-        localStorage.setItem('tempToken', data.tempToken);
+        localStorage.setItem("tempToken", data.tempToken);
         console.log("tempToken saved:", data.tempToken);
 
         if (data.registered2FA) {
           console.log("User has 2FA registered, showing OTP modal");
           setShowOtpModal(true);
         } else {
-          console.log("User doesn't have 2FA registered, showing 2FA setup modal");
+          console.log(
+            "User doesn't have 2FA registered, showing 2FA setup modal",
+          );
           setShowTwoFAModal(true);
         }
       } else {
@@ -91,7 +101,7 @@ function LoginPage() {
       }
     } catch (error: unknown) {
       console.error("Login error:", error);
-      
+
       // 에러 처리
       if (error instanceof Error) {
         setError(error.message);
@@ -147,9 +157,9 @@ function LoginPage() {
             <h1>
               유역하수도통합플랫폼
               <br />
-              <span>하수도 포탈</span>
+              <span>유역하수도 포탈</span>
             </h1>
-            <p>유역하수도통합플랫폼 하수도 포탈에 오신 것을 환영합니다.</p>
+            <p>유역하수도통합플랫폼 유역하수도포탈에 오신 것을 환영합니다.</p>
           </div>
           <div className="img">
             <Image src={images.logo} width={229} height={46} alt="logo" />
@@ -218,25 +228,36 @@ function LoginPage() {
                 <label htmlFor="checkTwoFA">OTP 인증</label>
               </div>
             </div>
-            <button 
-              type="submit" 
-              className="login_btn fx"
-              disabled={isLoading}
-            >
+            <button type="submit" className="login_btn fx" disabled={isLoading}>
               <span>{isLoading ? "로그인 중..." : "LOGIN"}</span>
             </button>
             {error && (
-              <div className="error-message" style={{ color: "red", textAlign: "center", marginTop: "10px" }}>
+              <div
+                className="error-message"
+                style={{ color: "red", textAlign: "center", marginTop: "10px" }}
+              >
                 {error}
               </div>
             )}
             {successMessage && (
-              <div className="success-message" style={{ color: "green", textAlign: "center", marginTop: "10px" }}>
+              <div
+                className="success-message"
+                style={{
+                  color: "green",
+                  textAlign: "center",
+                  marginTop: "10px",
+                }}
+              >
                 {successMessage}
               </div>
             )}
-            <div className="signup-link" style={{ textAlign: "center", marginTop: "15px" }}>
-              <span style={{ color: "#666", fontSize: "14px" }}>계정이 없으신가요? </span>
+            <div
+              className="signup-link"
+              style={{ textAlign: "center", marginTop: "15px" }}
+            >
+              <span style={{ color: "#666", fontSize: "14px" }}>
+                계정이 없으신가요?{" "}
+              </span>
               <button
                 type="button"
                 onClick={() => setShowSignupModal(true)}
@@ -246,7 +267,7 @@ function LoginPage() {
                   color: "#3b82f6",
                   textDecoration: "underline",
                   cursor: "pointer",
-                  fontSize: "14px"
+                  fontSize: "14px",
                 }}
               >
                 회원가입
@@ -282,8 +303,8 @@ function LoginPage() {
                   종합환경연구단지)
                 </span>
                 <span>
-                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                  3722
+                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계)
+                  032-590-3723, 3722
                 </span>
                 <span>팩스 :032-590-3729</span>
               </p>

apps/cm/src/pages/dashboard/lib/hooks/use-dnd-sensors.ts

@@ -0,0 +1,16 @@
+import {
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+export function useDndSensors() {
+  return useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+}

apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+import { arrayMove } from "@dnd-kit/sortable";
+import type { DragEndEvent } from "@dnd-kit/core";
+import type { PanelItem } from "../../model/types";
+
+interface UsePanelOrderProps {
+  initialPanels: PanelItem[];
+  storageKey: string;
+}
+
+export function usePanelOrder({
+  initialPanels,
+  storageKey,
+}: UsePanelOrderProps) {
+  const [panels, setPanels] = useState<PanelItem[]>(initialPanels);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (isInitialized) return;
+
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      try {
+        const savedIds = JSON.parse(saved);
+        const restoredPanels = savedIds
+          .map((id: string) => initialPanels.find((p) => p.id === id))
+          .filter(Boolean);
+        if (restoredPanels.length === initialPanels.length) {
+          setPanels(restoredPanels);
+        }
+      } catch {
+        setPanels(initialPanels);
+      }
+    }
+    setIsInitialized(true);
+  }, [storageKey]);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setPanels((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        const newItems = arrayMove(items, oldIndex, newIndex);
+
+        // localStorage에 저장
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify(newItems.map((item) => item.id)),
+        );
+
+        return newItems;
+      });
+    }
+  };
+
+  return { panels, handleDragEnd };
+}

apps/cm/src/pages/dashboard/model/panel-config.tsx

@@ -0,0 +1,71 @@
+import FoFcltCntRt from "@/pages/dashboard/ui/fo-fclt-cnt-rt";
+import SnPplStatus from "@/pages/dashboard/ui/sn-ppl-status";
+import ReuseChart from "@/pages/dashboard/ui/reuse-chart";
+import FoWqltInflEffl from "@/pages/dashboard/ui/fo-wqlt-Infl-effl";
+import SnOldPpl from "@/pages/dashboard/ui/sn-old-ppl";
+import ReuseStatus from "@/pages/dashboard/ui/reuse-status";
+import SupportList from "@/pages/dashboard/ui/support-list";
+import DataStatusList from "@/pages/dashboard/ui/datastatus-list";
+import NoticeList from "@/pages/dashboard/ui/notice-list";
+import BannerList from "@/pages/dashboard/ui/banner-list";
+import type { PanelItem } from "./types";
+
+export function getInitialTopPanels(): PanelItem[] {
+  return [
+    {
+      id: "panel-1",
+      component: <FoFcltCntRt />,
+      className: "",
+    },
+    {
+      id: "panel-2",
+      component: <SnPplStatus />,
+      className: "",
+    },
+    {
+      id: "panel-3",
+      component: <ReuseChart />,
+      className: "",
+    },
+    {
+      id: "panel-4",
+      component: <FoWqltInflEffl />,
+      className: "",
+    },
+    {
+      id: "panel-5",
+      component: <SnOldPpl />,
+      className: "",
+    },
+    {
+      id: "panel-6",
+      component: <ReuseStatus />,
+      className: "",
+    },
+  ];
+}
+
+export function getInitialBottomPanels(): PanelItem[] {
+  return [
+    {
+      id: "panel-7",
+      component: <SupportList />,
+      className: "",
+    },
+    {
+      id: "panel-8",
+      component: <DataStatusList />,
+      className: "",
+    },
+    {
+      id: "panel-9",
+      component: <NoticeList />,
+      className: "",
+    },
+    {
+      id: "panel-10",
+      component: <BannerList />,
+      className: "",
+    },
+  ];
+}

apps/cm/src/pages/dashboard/model/types.ts

@@ -0,0 +1,7 @@
+export interface PanelItem {
+  id: string;
+  component: React.ReactNode;
+  className?: string;
+}
+
+export type PanelType = "top" | "bottom";

apps/cm/src/pages/dashboard/ui/banner-list.tsx

@@ -1,10 +1,15 @@
 "use client";
 
-import { useRef } from "react";
+import { useRef, useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@/shared/config";
-import { getImageUrlByAtflCd, getBannerList, type Banner } from "../api/banner-service";
+import {
+  getImageUrlByAtflCd,
+  getBannerList,
+  type Banner,
+} from "../api/banner-service";
 import { getCookie } from "@/shared/lib";
+import { useDragHandle } from "./sortable-panel";
 
 import {
   Carousel,
@@ -21,7 +26,13 @@ type BannerImageProps = {
 };
 
 const BannerList: React.FC = () => {
-  const siteId = getCookie("site-id-key") ?? "";
+  const { dragHandleProps, isDragging } = useDragHandle();
+  const [siteId, setSiteId] = useState<string>("");
+
+  useEffect(() => {
+    const id = getCookie("site-id-key") ?? "";
+    setSiteId(id);
+  }, []);
 
   const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
     const { data: imageUrl, isLoading } = useQuery({
@@ -91,6 +102,19 @@ const BannerList: React.FC = () => {
     return maybe.status ?? maybe.response?.status;
   };
 
+  // siteId가 없을 때
+  if (!siteId) {
+    return (
+      <div className="card card-border">
+        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
+          <div className="text-sm text-muted-foreground">
+            사이트 ID가 없습니다
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   // 401 에러 처리
   if (bannerError) {
     const is401Error =
@@ -133,21 +157,14 @@ const BannerList: React.FC = () => {
     );
   }
 
-  // siteId가 없을 때
-  if (!siteId) {
-    return (
-      <div className="card card-border">
-        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">
-            사이트 ID가 없습니다
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="card card-border"  style={{ height: "230px" }}>
+    <div className="card card-border" style={{ height: "230px" }}>
+      {/* 드래그 핸들 - 배너 위에 오버레이 */}
+      <div 
+        className={`absolute inset-0 z-10 cursor-grab active:cursor-grabbing ${isDragging ? 'bg-black/20' : 'bg-transparent'}`}
+        {...dragHandleProps}
+        title="배너를 드래그하여 패널 순서 변경"
+      />
       <Carousel
         plugins={[plugin.current]}
         opts={{ loop: true }}

apps/cm/src/pages/dashboard/ui/dashboard-page.tsx

@@ -6,6 +6,8 @@ import { tokenManager } from "@/entities/auth/lib/token-manager";
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
 import { KoreaBasinMap } from "../lib/korea-basin-map";
+import { useDndSensors } from "../lib/hooks/use-dnd-sensors";
+import { usePanelOrder } from "../lib/hooks/use-panel-order";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -18,18 +20,15 @@ import {
   Tooltip,
   ArcElement,
 } from "chart.js";
-import SnPplStatus from "./sn-ppl-status";
-import SnOldPpl from "./sn-old-ppl";
-import FoFcltCntRt from "./fo-fclt-cnt-rt";
-import FoWqltInflEffl from "./fo-wqlt-Infl-effl";
-import ReuseChart from "./reuse-chart";
-import ReuseStatus from "./reuse-status";
-import NoticeList from "./notice-list";
-import BannerList from "./banner-list";
-import SupportList from "./support-list";
-import DataStatusList from "./datastatus-list";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
+import {
+  getInitialTopPanels,
+  getInitialBottomPanels,
+} from "../model/panel-config";
 import MyPostList from "./mypost-list";
 import ScheduleList from "./schedule-list";
+import { SortablePanel } from "./sortable-panel";
 
 // Chart.js 등록
 ChartJS.register(
@@ -41,7 +40,7 @@ ChartJS.register(
   Filler,
   Legend,
   Tooltip,
-  ArcElement
+  ArcElement,
 );
 
 interface UserInfo {
@@ -54,7 +53,29 @@ interface UserInfo {
 function DashboardPage() {
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
   const [error, setError] = useState("");
-  const router = useRouter();  
+  const [isMounted, setIsMounted] = useState(false);
+  const router = useRouter();
+
+  // dnd-kit 센서 설정
+  const sensors = useDndSensors();
+
+  // 패널 순서 관리
+  const { panels: topPanels, handleDragEnd: handleTopDragEnd } = usePanelOrder({
+    initialPanels: getInitialTopPanels(),
+    storageKey: "dashboard-top-panels-order",
+  });
+
+  const { panels: bottomPanels, handleDragEnd: handleBottomDragEnd } =
+    usePanelOrder({
+      initialPanels: getInitialBottomPanels(),
+      storageKey: "dashboard-bottom-panels-order",
+    });
+
+  // 클라이언트에서만 드래그 기능 활성화 (hydration 문제 방지)
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   useEffect(() => {
     const fetchUserInfo = async () => {
       console.log("fetchUserInfo called");
@@ -115,96 +136,149 @@ function DashboardPage() {
   return (
     <div className="p-2 sm:p-4 md:p-6">
       <div className="flex flex-col gap-1">
-        {/* 첫번째 라인 */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 gap-1">
-          {/* 첫번쨰 열 */}
-          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
-            {/* 전국 하수처리시설 개소수 및 가동률 */}
-            <FoFcltCntRt />
-
-            {/* 오수관로 및 우수관로 현황 */}
-            <SnPplStatus />
-
-            {/* 하수처리수 재이용 (m³) */}
-            <ReuseChart />
+        {/* 첫번째 라인 - 좌측 6개 패널(2x3) + 우측 지도/사용자 정보 */}
+        <div className="flex flex-col gap-1 lg:flex-row">
+          {/* 좌측: 드래그 가능한 6개 패널 (2x3 그리드, 화면의 50%) */}
+          <div className="w-full lg:w-1/2">
+            {isMounted ? (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleTopDragEnd}
+              >
+                <SortableContext
+                  items={topPanels.map((p) => p.id)}
+                  strategy={rectSortingStrategy}
+                >
+                  <div className="grid grid-cols-2 gap-1">
+                    {topPanels.map((panel) => (
+                      <SortablePanel
+                        key={panel.id}
+                        id={panel.id}
+                        className={panel.className}
+                      >
+                        {panel.component}
+                      </SortablePanel>
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            ) : (
+              <div className="grid grid-cols-2 gap-1">
+                {topPanels.map((panel) => (
+                  <div key={panel.id} className={panel.className}>
+                    {panel.component}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
 
-          {/* 두번쨰 열 */}
-          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
-            {/* 수계별 유입ㆍ방류수질 분석 */}
-            <FoWqltInflEffl />
+          {/* 우측: 고정된 지도와 사용자 정보 (화면의 50%) */}
+          <div className="flex w-full gap-1 lg:w-1/2">
+            {/* 지도영역 - 고정 (드래그 불가) */}
+            <div className="flex-1">
+              <KoreaBasinMap />
+            </div>
 
-            {/* 노후하수관로현황 */}
-            <SnOldPpl />
-
-            {/* 물재이용 현황 (재이용량, m³) */}
-            <ReuseStatus />
-          </div>
-
-          {/* 지도영역 */}
-          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-3">
-            <KoreaBasinMap />
-          </div>
-
-          {/* 사용자 정보 카드 */}
-          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-1 !p-0">
-            {error && <div className="mb-4 text-red-500">{error}</div>}
-            {userInfo ? (
-            <div className="card card_border login_info_box" style={{ minHeight: "150px", height: "auto" }}>
-              <div className="login_header" style={{ paddingLeft: "10px", paddingRight: "10px" }}>
-                <div className="login_avatar">
-                  <Image 
-                    src="/images/icon_loginID.png" 
-                    alt="프로필" 
-                    width={40}
-                    height={40}
-                    onError={(e) => {
-                      const target = e.target as HTMLImageElement;
-                      target.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e1e5e9'/%3E%3Ctext x='20' y='26' font-size='20' text-anchor='middle' fill='%23999'%3E%3F%3C/text%3E%3C/svg%3E";
-                    }} 
-                  />
-                </div>
-                <div className="login_user_info">
-                  <div className="user_name">{userInfo.userName || "-"}</div>
-                  <div className="user_status">온라인</div>
-                  <div className="user_status text-xs sm:text-sm">
-                    <b>2FA 활성화:</b>{" "}
-                    {userInfo.twoFactorEnabled ? "예" : "아니오"}
+            {/* 사용자 정보 카드 - 고정 (드래그 불가) */}
+            <div className="flex w-full flex-col gap-1 !p-0 lg:w-[300px]">
+              {error && <div className="mb-4 text-red-500">{error}</div>}
+              {userInfo ? (
+                <div
+                  className="card card_border login_info_box"
+                  style={{ minHeight: "150px", height: "auto" }}
+                >
+                  <div
+                    className="login_header"
+                    style={{ paddingLeft: "10px", paddingRight: "10px" }}
+                  >
+                    <div className="login_avatar">
+                      <Image
+                        src="/images/icon_loginID.png"
+                        alt="프로필"
+                        width={40}
+                        height={40}
+                        onError={(e) => {
+                          const target = e.target as HTMLImageElement;
+                          target.src =
+                            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e1e5e9'/%3E%3Ctext x='20' y='26' font-size='20' text-anchor='middle' fill='%23999'%3E%3F%3C/text%3E%3C/svg%3E";
+                        }}
+                      />
+                    </div>
+                    <div className="login_user_info">
+                      <div className="user_name">
+                        {userInfo.userName || "-"}
+                      </div>
+                      <div className="user_status">온라인</div>
+                      <div className="user_status text-xs sm:text-sm">
+                        <b>2FA 활성화:</b>{" "}
+                        {userInfo.twoFactorEnabled ? "예" : "아니오"}
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="login_actions"
+                    style={{ paddingLeft: "10px", paddingRight: "10px" }}
+                  >
+                    <button
+                      className="login_btn text-xs sm:text-sm"
+                      onClick={handleLogout}
+                    >
+                      로그아웃
+                    </button>
+                    <button
+                      className="signup_btn text-xs sm:text-sm"
+                      onClick={handleChangePassword}
+                    >
+                      마이페이지
+                    </button>
                   </div>
                 </div>
-              </div>
-                <div className="login_actions" style={{ paddingLeft: "10px", paddingRight: "10px" }}>
-                  <button className="login_btn text-xs sm:text-sm" onClick={handleLogout}>로그아웃</button>
-                  <button className="signup_btn text-xs sm:text-sm" onClick={handleChangePassword}>마이페이지</button>
-              </div>
+              ) : (
+                !error && <div>사용자 정보를 불러오는 중...</div>
+              )}
+
+              <ScheduleList />
+
+              <MyPostList />
             </div>
-            ) : (
-              !error && <div>사용자 정보를 불러오는 중...</div>
-            )}
-            
-            <ScheduleList />
-            
-            <MyPostList />
-          </div>          
-        </div>
-
-        {/* 두번째 라인 */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-1">
-          <div className="card card-border" style={{ height: "250px" }}>
-            <SupportList />
-          </div>
-          <div className="card card-border" style={{ height: "250px" }}>
-            <DataStatusList />
-          </div>
-          <div className="card card-border" style={{ height: "250px" }}>
-            <NoticeList />
-          </div>
-
-          {/* 배너 영역 */}
-          <div className="card card-border" style={{ height: "250px" }}>
-            <BannerList />
           </div>
         </div>
+
+        {/* 두번째 라인 - 드래그 가능한 4개 패널 */}
+        {isMounted ? (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleBottomDragEnd}
+          >
+            <SortableContext
+              items={bottomPanels.map((p) => p.id)}
+              strategy={rectSortingStrategy}
+            >
+              <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
+                {bottomPanels.map((panel) => (
+                  <SortablePanel
+                    key={panel.id}
+                    id={panel.id}
+                    className="card card-border"
+                  >
+                    <div style={{ height: "250px" }}>{panel.component}</div>
+                  </SortablePanel>
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        ) : (
+          <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
+            {bottomPanels.map((panel) => (
+              <div key={panel.id} className="card card-border">
+                <div style={{ height: "250px" }}>{panel.component}</div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

apps/cm/src/pages/dashboard/ui/datastatus-list.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@/shared/config";
 import { getDataStatusList, type DataStatus } from "../api/datastatus-service";
 import type { PageableList } from "@/shared/model";
+import { useDragHandle } from "./sortable-panel";
 
 import {
   Carousel,
@@ -35,6 +36,7 @@ const getRegionInfo = (regionName: string) => {
 };
 
 const DataStatusList: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const plugin = useRef(
     Autoplay({ delay: 3000, stopOnInteraction: true })
   );
@@ -106,7 +108,11 @@ const DataStatusList: React.FC = () => {
 
   return (
     <>
-      <div className="card_title bottomline">
+      <div 
+        className={`card_title bottomline cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <div className="leftArea">
           <h4>자료현황</h4>
         </div>

apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx

@@ -9,8 +9,10 @@ import { Doughnut } from "react-chartjs-2";
 import type { Chart as ChartJS } from "chart.js";
 // import type { mapOperFcltItem, mapBasinData } from "../model/fo-interface";
 import { OperationApi, operFcltStore, basinStore } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 const FoFcltCntRt: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [year, setYear] = useState<string | null>(null);
   const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const operFcltStatus = useStore(operFcltStore, (state) => state.operFcltStatus);
@@ -57,9 +59,18 @@ const FoFcltCntRt: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
-        <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
+        </div>
       </div>
       <div className="h-70 p-4">
         <div className="flex gap-2 h-full">

apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx

@@ -14,6 +14,7 @@ import {
 import type { OperWqltContent } from "../model/fo-interface";
 import { OperationApi, basinStore } from "../api/fo-service";
 import { defaultInitOperWqltState } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 // Chart.js 등록
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
@@ -21,6 +22,7 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, T
 type WaterQualityType = 'BOD' | 'TOC' | 'SS' | 'TP' | 'TN';
 
 const FoWqltInflEffl: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const [selectedTab, setSelectedTab] = useState<WaterQualityType>('BOD');  
   const [wqltData, setWqltData] = useState<OperWqltContent[]>([]);
@@ -195,9 +197,18 @@ const FoWqltInflEffl: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
+        </div>
       </div>
       <div className="h-70 p-0 flex items-center justify-center">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>

apps/cm/src/pages/dashboard/ui/notice-list.tsx

@@ -10,9 +10,11 @@ import {
   noticePostTableColumns,
 } from "../model/table-columns";
 import { Button } from "@common/components";
+import { useDragHandle } from "./sortable-panel";
 
 
 const NoticeList: React.FC = () => {
+    const { dragHandleProps, isDragging } = useDragHandle();
     const router = useRouter();
     const noticePostQuery = useQuery({
         queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
@@ -51,9 +53,18 @@ const NoticeList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0"  style={{ height: "220px" }}>
-      <div className="card-header !m-0 !border-none text-foreground">
+      <div 
+        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">공지사항</h3>
-        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       {noticePostTableComponent}
     </div>

apps/cm/src/pages/dashboard/ui/reuse-chart.tsx

@@ -8,6 +8,7 @@ import { Line } from 'react-chartjs-2';
 import { Button } from "@common/components";
 import type { ReuseStatusContent } from "../model/fo-interface";
 import { OperationApi, reuseStore } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -36,6 +37,7 @@ ChartJS.register(
 
 
 const ReuseChart: React.FC = () => {  
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [activeIndex, setActiveIndex] = useState(0);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const reuseStatusData = useStore(
@@ -183,9 +185,18 @@ const ReuseChart: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">{chartItems[activeIndex]?.title}</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="relative" style={{ maxWidth: 400, height: 180, marginLeft: 20 }}>
         <div className="h-full">

apps/cm/src/pages/dashboard/ui/reuse-status.tsx

@@ -7,8 +7,10 @@ import { useStore } from "zustand";
 import { Button } from "@common/components";
 import type { ReuseStatusContent } from "../model/fo-interface";
 import { OperationApi, reuseStore} from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 const ReuseStatus: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   // const [reuseStatusData, setReuseStatusData] = useState<ReuseStatusContent[]>([]);
   const reuseStatusData = useStore(
     reuseStore,
@@ -32,9 +34,18 @@ const ReuseStatus: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">물재이용 현황 (재이용량, m³)</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-70 p-4">
         <div className="w-full h-full flex items-center justify-center">

apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx

@@ -17,12 +17,14 @@ import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
 import type { PplLengthContent, ChartDataSet, OldPplChartData } from "../model/sn-interface";
 import { SewerageApi, useOldPplStore,useMapOldPplStore, transformChartDataToMapData } from "../api/sn-service";
+import { useDragHandle } from "./sortable-panel";
 
 
 // ChartJS 컴포넌트 등록
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 export default function SnOldPpl() {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [oldPplLenData, setOldPplLenData] = useState<PplLengthContent[]>([]);
   const {chartData, setChartData}  = useOldPplStore();
   const {setMapData}  = useMapOldPplStore();
@@ -170,9 +172,18 @@ export default function SnOldPpl() {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">노후 하수관로 현황</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-70 p-0 flex items-center justify-center">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>

apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx

@@ -17,6 +17,7 @@ import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
 import type { PplLengthContent } from "../model/sn-interface";
 import { SewerageApi,useUsePplStore } from "../api/sn-service";
+import { useDragHandle } from "./sortable-panel";
 
 interface ChartDataSet {
   label: string;
@@ -29,6 +30,7 @@ interface ChartDataSet {
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 export default function SnPplStatus() {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const {chartData, setChartData}  = useUsePplStore();
   const [usgPplLenData, setUsgPplLenData]  = useState<PplLengthContent[]>([]);
   
@@ -157,10 +159,18 @@ export default function SnPplStatus() {
   };
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
-        
-        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-60 p-4">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>

apps/cm/src/pages/dashboard/ui/sortable-panel.tsx

@@ -0,0 +1,64 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { createContext, useContext } from "react";
+
+interface SortablePanelProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface DragHandleContextValue {
+  dragHandleProps: React.HTMLAttributes<HTMLElement>;
+  isDragging: boolean;
+}
+
+const DragHandleContext = createContext<DragHandleContextValue | null>(null);
+
+export function SortablePanel({ id, children, className }: SortablePanelProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const contextValue: DragHandleContextValue = {
+    dragHandleProps: { ...attributes, ...listeners },
+    isDragging,
+  };
+
+  return (
+    <DragHandleContext.Provider value={contextValue}>
+      <div
+        ref={setNodeRef}
+        style={style}
+        className={className}
+      >
+        {children}
+      </div>
+    </DragHandleContext.Provider>
+  );
+}
+
+export function useDragHandle() {
+  const context = useContext(DragHandleContext);
+  
+  // Context가 없을 때 (서버 렌더링 또는 isMounted = false) 기본값 반환
+  if (!context) {
+    return {
+      dragHandleProps: {},
+      isDragging: false,
+    };
+  }
+  
+  return context;
+}

apps/cm/src/pages/dashboard/ui/support-list.tsx

@@ -7,8 +7,10 @@ import { useDataTable } from "@/shared/lib";
 import type { PageableList } from "@/shared/model";
 import { supportTableColumns } from "../model/support-columns";
 import { getSupportList, type Support } from "../api/support-service";
+import { useDragHandle } from "./sortable-panel";
 
 const SupportList: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const supportQuery = useQuery<PageableList<Support>>({
     queryKey: [ENDPOINT.IC_SERVICE.GROUPING_STATISTICS],
     queryFn: async () => {
@@ -29,7 +31,11 @@ const SupportList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0" style={{ height: "220px" }}>
-      <div className="card-header !m-0 !border-none text-foreground">
+      <div 
+        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">지원현황</h3>
       </div>
       {supportTableComponent}

apps/cm/src/pages/users/ui/users-page.tsx

@@ -102,7 +102,7 @@ function UsersPage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,

apps/common/features/src/pages/(post)/faq/ui/faq-page.tsx

@@ -83,7 +83,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
     }
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     refetch();
   };

apps/common/features/src/pages/auth/login/ui/login-page.tsx

@@ -6,7 +6,7 @@ import { LoginApi } from "@/entities/auth";
 import "./login.css";
 
 function LoginPage() {
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const formData = new FormData(e.target as HTMLFormElement);

apps/common/features/src/pages/search/ui/search-page.tsx

@@ -33,7 +33,7 @@ function SearchPage() {
     queryFn: () => SearchApi.searchPost({ keyword: keyword, siteId }),
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
     setKeyword(formData.get("keyword") as string);
@@ -84,7 +84,8 @@ function SearchPage() {
               <TabsList className="mx-auto">
                 <TabsTrigger value="all">
                   전체 (
-                  { (data?.contsList?.length ?? 0) + (data?.boardList?.totalElements ?? 0)}
+                  {(data?.contsList?.length ?? 0) +
+                    (data?.boardList?.totalElements ?? 0)}
                   건)
                 </TabsTrigger>
                 <TabsTrigger value="contents">

apps/common/features/src/widgets/post/ui/post-page.tsx

@@ -134,7 +134,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
     }
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,

apps/cs/app/(auth)/layout.tsx

@@ -0,0 +1,17 @@
+import "@/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}

apps/cs/app/(main)/(with-base-layout)/ntftalk-history/page.tsx

@@ -0,0 +1,3 @@
+import { NtftalkHistoryPage } from "@/pages/ntftalk-history";
+
+export default NtftalkHistoryPage;

apps/cs/app/(main)/(with-base-layout)/ntftalk-temp/page.tsx

@@ -0,0 +1,3 @@
+import { NtftalkTempPage } from "@/pages/ntftalk-temp";
+
+export default NtftalkTempPage;