[user service] 사용자 멀티 디바이스 로그인 처리 deviceId 추가건

.gitea/workflows/deploy.yml

@@ -1,33 +0,0 @@
-name: Deploy Frontend
-
-on:
-  push:
-    branches:
-      - deploy
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup SSH
-        run: |
-          mkdir -p ~/.ssh
-          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/deploy_key
-          chmod 600 ~/.ssh/deploy_key
-          ssh-keyscan -p 28 -H 192.168.0.4 >> ~/.ssh/known_hosts
-
-      - name: Deploy
-        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
-            pm2 reload all
-          EOF

.gitignore

@@ -30,3 +30,4 @@ settings.json
 
 apps/**/tsconfig.tsbuildinfo
 logs/
+apps/st/start_cs.log

apps/_template/.env.example

@@ -3,6 +3,3 @@ NEXT_PUBLIC_PORT=
 NEXT_PUBLIC_PROXY_HOST=
 NEXT_PUBLIC_SITE_ID=
 NEXT_PUBLIC_SERVER_API_URL=
-
-# 401 시 브라우저 리다이렉트 대상
-NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL=/auth/login

apps/_template/features/README.md

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

apps/_template/package.json

@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.3.8",
+    "eslint-config-next": "15.4.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/cm/package.json

@@ -12,9 +12,6 @@
     "@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",
@@ -55,7 +52,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.3.8",
+    "eslint-config-next": "15.4.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/cm/src/entities/auth/lib/auth-wrapper.tsx

@@ -5,15 +5,16 @@ import { useRouter } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
-import { isAtLoginRedirectUrl } from "@common/network";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
+import { LoginApi } from "../api/login-service";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
-    if (isAtLoginRedirectUrl("/auth/login")) {
+    // 로그인 페이지에서는 인증 체크를 건너뜀
+    if (window.location.pathname === '/auth/login') {
       return;
     }
 
@@ -34,8 +35,13 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-        setUserInfo(null);
+
-        if (!isAtLoginRedirectUrl("/auth/login")) {
+        try {
+          await LoginApi.silentRefresh();
+          await authCheck();
+        } catch (refreshError) {
+          console.error("Token refresh failed:", refreshError);
+          setUserInfo(null);
           router.push("/auth/login");
         }
       }

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

@@ -14,9 +14,7 @@ interface SignupModalProps {
 }
 
 function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
-  const [currentStep, setCurrentStep] = useState<"agreement" | "signup">(
+  const [currentStep, setCurrentStep] = useState<'agreement' | 'signup'>('agreement');
-    "agreement",
-  );
   const [agreed, setAgreed] = useState(false);
   const [formData, setFormData] = useState({
     userId: "",
@@ -49,7 +47,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
   // 모달이 닫힐 때 초기화
   useEffect(() => {
     if (!open) {
-      setCurrentStep("agreement");
+      setCurrentStep('agreement');
       setAgreed(false);
       setFormData({
         userId: "",
@@ -83,19 +81,17 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const handleNextStep = () => {
     if (agreed) {
-      setCurrentStep("signup");
+      setCurrentStep('signup');
     }
   };
 
-  const handleInputChange = (
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    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]: "" }));
     }
   };
 
@@ -106,27 +102,20 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     if (!formData.userId) newErrors.userId = "아이디를 입력해주세요.";
     if (!formData.userName) newErrors.userName = "이름을 입력해주세요.";
     if (!formData.password) newErrors.password = "비밀번호를 입력해주세요.";
-    if (!formData.confirmPassword)
+    if (!formData.confirmPassword) newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
-      newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
     if (!formData.pswdHnt) newErrors.pswdHnt = "비밀번호 힌트를 입력해주세요.";
     if (!formData.laeSeCd) newErrors.laeSeCd = "법인구분을 선택해주세요.";
     if (!formData.ogdpSeCd) newErrors.ogdpSeCd = "기관구분을 선택해주세요.";
 
     // 비밀번호 확인
-    if (
+    if (formData.password && formData.confirmPassword && formData.password !== formData.confirmPassword) {
-      formData.password &&
-      formData.confirmPassword &&
-      formData.password !== formData.confirmPassword
-    ) {
       newErrors.confirmPassword = "비밀번호가 일치하지 않습니다.";
     }
 
     // 비밀번호 정규식 검증
-    const passwordRegex =
+    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
-      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
     if (formData.password && !passwordRegex.test(formData.password)) {
-      newErrors.password =
+      newErrors.password = "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
-        "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
     }
 
     // 이메일 형식 검증
@@ -135,10 +124,8 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     }
 
     // 중복 체크 검증
-    if (idAvailable === false)
+    if (idAvailable === false) newErrors.userId = "이미 사용 중인 아이디입니다.";
-      newErrors.userId = "이미 사용 중인 아이디입니다.";
+    if (emailAvailable === false) newErrors.email = "이미 사용 중인 이메일입니다.";
-    if (emailAvailable === false)
-      newErrors.email = "이미 사용 중인 이메일입니다.";
 
     setErrors(newErrors);
     const isValid = Object.keys(newErrors).length === 0;
@@ -148,7 +135,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkUserIdDuplicate = async () => {
     if (!formData.userId) {
-      setErrors((prev) => ({ ...prev, userId: "아이디를 입력해주세요." }));
+      setErrors(prev => ({ ...prev, userId: "아이디를 입력해주세요." }));
       return;
     }
 
@@ -160,25 +147,19 @@ 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) => ({
+        setErrors(prev => ({ ...prev, userId: "이미 사용 중인 아이디입니다." }));
-          ...prev,
-          userId: "이미 사용 중인 아이디입니다.",
-        }));
       } else {
-        setErrors((prev) => ({ ...prev, userId: "" }));
+        setErrors(prev => ({ ...prev, userId: "" }));
       }
     } catch (error) {
       console.error("아이디 중복 체크 오류:", error);
-      setErrors((prev) => ({
+      setErrors(prev => ({ ...prev, userId: "아이디 중복 체크 중 오류가 발생했습니다." }));
-        ...prev,
-        userId: "아이디 중복 체크 중 오류가 발생했습니다.",
-      }));
     } finally {
       setIsCheckingId(false);
     }
@@ -186,7 +167,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkEmailDuplicate = async () => {
     if (!formData.email) {
-      setErrors((prev) => ({ ...prev, email: "이메일을 입력해주세요." }));
+      setErrors(prev => ({ ...prev, email: "이메일을 입력해주세요." }));
       return;
     }
 
@@ -198,31 +179,25 @@ 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) => ({
+        setErrors(prev => ({ ...prev, email: "이미 사용 중인 이메일입니다." }));
-          ...prev,
-          email: "이미 사용 중인 이메일입니다.",
-        }));
       } else {
-        setErrors((prev) => ({ ...prev, email: "" }));
+        setErrors(prev => ({ ...prev, email: "" }));
       }
     } catch (error) {
       console.error("이메일 중복 체크 오류:", error);
-      setErrors((prev) => ({
+      setErrors(prev => ({ ...prev, email: "이메일 중복 체크 중 오류가 발생했습니다." }));
-        ...prev,
-        email: "이메일 중복 체크 중 오류가 발생했습니다.",
-      }));
     } finally {
       setIsCheckingEmail(false);
     }
   };
 
-  const handleSubmit = async (e: React.SubmitEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     console.log("회원가입 버튼 클릭됨");
     
@@ -255,11 +230,11 @@ 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);
@@ -292,12 +267,13 @@ 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);
@@ -310,15 +286,11 @@ 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>
+          <h2>{currentStep === 'agreement' ? '개인정보제공동의' : '회원가입'}</h2>
-            {currentStep === "agreement" ? "개인정보제공동의" : "회원가입"}
+          <button className="close-button" onClick={onClose}>×</button>
-          </h2>
-          <button className="close-button" onClick={onClose}>
-            ×
-          </button>
         </div>
         
-        {currentStep === "agreement" ? (
+        {currentStep === 'agreement' ? (
           <div className="agreement-content">
             <div className="agreement-text">
               <h3>개인정보 수집 및 이용 동의</h3>
@@ -326,14 +298,8 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
               
               <h4>1. 수집하는 개인정보 항목</h4>
               <ul>
-                <li>
+                <li>필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분, 기관구분</li>
-                  필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분,
+                <li>선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드, 상세기관코드, 사업자등록번호</li>
-                  기관구분
-                </li>
-                <li>
-                  선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드,
-                  상세기관코드, 사업자등록번호
-                </li>
               </ul>
               
               <h4>2. 개인정보의 수집 및 이용목적</h4>
@@ -344,16 +310,10 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
               </ul>
               
               <h4>3. 개인정보의 보유 및 이용기간</h4>
-              <p>
+              <p>회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당 기간까지)</p>
-                회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당
-                기간까지)
-              </p>
               
               <h4>4. 동의 거부권 및 거부 시 불이익</h4>
-              <p>
+              <p>개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부 시 회원가입이 제한됩니다.</p>
-                개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부
-                시 회원가입이 제한됩니다.
-              </p>
             </div>
             
             <div className="agreement-checkbox">
@@ -368,7 +328,11 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
             </div>
             
             <div className="agreement-actions">
-              <button type="button" onClick={onClose} className="cancel-button">
+              <button
+                type="button"
+                onClick={onClose}
+                className="cancel-button"
+              >
                 취소
               </button>
               <button
@@ -409,14 +373,8 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingId ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {idAvailable === true && (
+                  {idAvailable === true && <span className="success-message">사용 가능한 아이디입니다.</span>}
-                    <span className="success-message">
+                  {errors.userId && <span className="error-message">{errors.userId}</span>}
-                      사용 가능한 아이디입니다.
-                    </span>
-                  )}
-                  {errors.userId && (
-                    <span className="error-message">{errors.userId}</span>
-                  )}
                 </div>
               </div>
 
@@ -432,9 +390,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     placeholder="이름을 입력하세요"
                     disabled={isLoading}
                   />
-                  {errors.userName && (
+                  {errors.userName && <span className="error-message">{errors.userName}</span>}
-                    <span className="error-message">{errors.userName}</span>
-                  )}
                 </div>
               </div>
 
@@ -460,14 +416,8 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingEmail ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {emailAvailable === true && (
+                  {emailAvailable === true && <span className="success-message">사용 가능한 이메일입니다.</span>}
-                    <span className="success-message">
+                  {errors.email && <span className="error-message">{errors.email}</span>}
-                      사용 가능한 이메일입니다.
-                    </span>
-                  )}
-                  {errors.email && (
-                    <span className="error-message">{errors.email}</span>
-                  )}
                 </div>
               </div>
 
@@ -484,9 +434,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.password && (
+                  {errors.password && <span className="error-message">{errors.password}</span>}
-                    <span className="error-message">{errors.password}</span>
-                  )}
                 </div>
               </div>
 
@@ -503,11 +451,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.confirmPassword && (
+                  {errors.confirmPassword && <span className="error-message">{errors.confirmPassword}</span>}
-                    <span className="error-message">
-                      {errors.confirmPassword}
-                    </span>
-                  )}
                 </div>
               </div>
 
@@ -524,9 +468,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.pswdHnt && (
+                  {errors.pswdHnt && <span className="error-message">{errors.pswdHnt}</span>}
-                    <span className="error-message">{errors.pswdHnt}</span>
-                  )}
                 </div>
               </div>
 
@@ -543,9 +485,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={100}
                     disabled={isLoading}
                   />
-                  {errors.pswdAns && (
+                  {errors.pswdAns && <span className="error-message">{errors.pswdAns}</span>}
-                    <span className="error-message">{errors.pswdAns}</span>
-                  )}
                 </div>
               </div>
             </div>
@@ -566,9 +506,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.mphn && (
+                  {errors.mphn && <span className="error-message">{errors.mphn}</span>}
-                    <span className="error-message">{errors.mphn}</span>
-                  )}
                 </div>
               </div>
 
@@ -585,9 +523,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.telno && (
+                  {errors.telno && <span className="error-message">{errors.telno}</span>}
-                    <span className="error-message">{errors.telno}</span>
-                  )}
                 </div>
               </div>
             </div>
@@ -608,9 +544,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={5}
                     disabled={isLoading}
                   />
-                  {errors.zip && (
+                  {errors.zip && <span className="error-message">{errors.zip}</span>}
-                    <span className="error-message">{errors.zip}</span>
-                  )}
                 </div>
               </div>
 
@@ -627,9 +561,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.addr && (
+                  {errors.addr && <span className="error-message">{errors.addr}</span>}
-                    <span className="error-message">{errors.addr}</span>
-                  )}
                 </div>
               </div>
 
@@ -646,9 +578,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.daddr && (
+                  {errors.daddr && <span className="error-message">{errors.daddr}</span>}
-                    <span className="error-message">{errors.daddr}</span>
-                  )}
                 </div>
               </div>
             </div>
@@ -671,9 +601,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="02">민간기업</option>
                     <option value="03">개인</option>
                   </select>
-                  {errors.laeSeCd && (
+                  {errors.laeSeCd && <span className="error-message">{errors.laeSeCd}</span>}
-                    <span className="error-message">{errors.laeSeCd}</span>
-                  )}
                 </div>
               </div>
 
@@ -693,9 +621,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="03">공공기관</option>
                     <option value="04">민간기업</option>
                   </select>
-                  {errors.ogdpSeCd && (
+                  {errors.ogdpSeCd && <span className="error-message">{errors.ogdpSeCd}</span>}
-                    <span className="error-message">{errors.ogdpSeCd}</span>
-                  )}
                 </div>
               </div>
 
@@ -712,9 +638,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.instSeCd && (
+                  {errors.instSeCd && <span className="error-message">{errors.instSeCd}</span>}
-                    <span className="error-message">{errors.instSeCd}</span>
-                  )}
                 </div>
               </div>
 
@@ -731,25 +655,21 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.dtlInstCd && (
+                  {errors.dtlInstCd && <span className="error-message">{errors.dtlInstCd}</span>}
-                    <span className="error-message">{errors.dtlInstCd}</span>
-                  )}
                 </div>
               </div>
             </div>
 
             {errors.submit && (
               <div className="form-row">
-                <div className="error-message submit-error">
+                <div className="error-message submit-error">{errors.submit}</div>
-                  {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.SubmitEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     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.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError("");
@@ -44,36 +44,28 @@ function LoginPage() {
         // 2FA 로그인 - Proxy를 통해 처리 (2FA 전용 엔드포인트 사용)
         console.log("Starting 2FA login...");
         
-        const response = await fetch(
+        const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`, {
-          `/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`,
+          method: 'POST',
-          {
+          headers: { 'Content-Type': 'application/json' },
-            method: "POST",
+          body: JSON.stringify({
-            headers: { "Content-Type": "application/json" },
+            userId,
-            body: JSON.stringify({
+            password,
-              userId,
+            provider: 'password'
-              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
+            errorMsg = errorData.errors.map((e: { message: string }) => e.message).join(', ');
-              .map((e: { message: string }) => e.message)
-              .join(", ");
           }
           throw new Error(errorMsg);
         }
 
         const data = await response.json();
         console.log("2FA login response:", data);
-        console.log(
+        console.log("Response headers:", Object.fromEntries(response.headers.entries()));
-          "Response headers:",
-          Object.fromEntries(response.headers.entries()),
-        );
         
         // 2FA 로그인 응답에는 tempToken과 registered2FA만 포함됨
         if (!data.tempToken) {
@@ -81,16 +73,14 @@ function LoginPage() {
         }
 
         // 임시 토큰을 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(
+          console.log("User doesn't have 2FA registered, showing 2FA setup modal");
-            "User doesn't have 2FA registered, showing 2FA setup modal",
-          );
           setShowTwoFAModal(true);
         }
       } else {
@@ -157,9 +147,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" />
@@ -228,36 +218,25 @@ 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
+              <div className="error-message" style={{ color: "red", textAlign: "center", marginTop: "10px" }}>
-                className="error-message"
-                style={{ color: "red", textAlign: "center", marginTop: "10px" }}
-              >
                 {error}
               </div>
             )}
             {successMessage && (
-              <div
+              <div className="success-message" style={{ color: "green", textAlign: "center", marginTop: "10px" }}>
-                className="success-message"
-                style={{
-                  color: "green",
-                  textAlign: "center",
-                  marginTop: "10px",
-                }}
-              >
                 {successMessage}
               </div>
             )}
-            <div
+            <div className="signup-link" style={{ textAlign: "center", marginTop: "15px" }}>
-              className="signup-link"
+              <span style={{ color: "#666", fontSize: "14px" }}>계정이 없으신가요? </span>
-              style={{ textAlign: "center", marginTop: "15px" }}
-            >
-              <span style={{ color: "#666", fontSize: "14px" }}>
-                계정이 없으신가요?{" "}
-              </span>
               <button
                 type="button"
                 onClick={() => setShowSignupModal(true)}
@@ -267,7 +246,7 @@ function LoginPage() {
                   color: "#3b82f6",
                   textDecoration: "underline",
                   cursor: "pointer",
-                  fontSize: "14px",
+                  fontSize: "14px"
                 }}
               >
                 회원가입
@@ -303,8 +282,8 @@ function LoginPage() {
                   종합환경연구단지)
                 </span>
                 <span>
-                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계)
+                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                  032-590-3723, 3722
+                  3722
                 </span>
                 <span>팩스 :032-590-3729</span>
               </p>

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

@@ -1,16 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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,15 +1,10 @@
 "use client";
 
-import { useRef, useState, useEffect } from "react";
+import { useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@/shared/config";
-import {
+import { getImageUrlByAtflCd, getBannerList, type Banner } from "../api/banner-service";
-  getImageUrlByAtflCd,
-  getBannerList,
-  type Banner,
-} from "../api/banner-service";
 import { getCookie } from "@/shared/lib";
-import { useDragHandle } from "./sortable-panel";
 
 import {
   Carousel,
@@ -26,13 +21,7 @@ type BannerImageProps = {
 };
 
 const BannerList: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
+  const siteId = getCookie("site-id-key") ?? "";
-  const [siteId, setSiteId] = useState<string>("");
-
-  useEffect(() => {
-    const id = getCookie("site-id-key") ?? "";
-    setSiteId(id);
-  }, []);
 
   const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
     const { data: imageUrl, isLoading } = useQuery({
@@ -102,19 +91,6 @@ 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 =
@@ -157,14 +133,21 @@ 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,8 +6,6 @@ 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,
@@ -20,15 +18,18 @@ import {
   Tooltip,
   ArcElement,
 } from "chart.js";
-import { DndContext, closestCenter } from "@dnd-kit/core";
+import SnPplStatus from "./sn-ppl-status";
-import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
+import SnOldPpl from "./sn-old-ppl";
-import {
+import FoFcltCntRt from "./fo-fclt-cnt-rt";
-  getInitialTopPanels,
+import FoWqltInflEffl from "./fo-wqlt-Infl-effl";
-  getInitialBottomPanels,
+import ReuseChart from "./reuse-chart";
-} from "../model/panel-config";
+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 MyPostList from "./mypost-list";
 import ScheduleList from "./schedule-list";
-import { SortablePanel } from "./sortable-panel";
 
 // Chart.js 등록
 ChartJS.register(
@@ -40,7 +41,7 @@ ChartJS.register(
   Filler,
   Legend,
   Tooltip,
-  ArcElement,
+  ArcElement
 );
 
 interface UserInfo {
@@ -53,29 +54,7 @@ interface UserInfo {
 function DashboardPage() {
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
   const [error, setError] = useState("");
-  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");
@@ -136,149 +115,96 @@ function DashboardPage() {
   return (
     <div className="p-2 sm:p-4 md:p-6">
       <div className="flex flex-col gap-1">
-        {/* 첫번째 라인 - 좌측 6개 패널(2x3) + 우측 지도/사용자 정보 */}
+        {/* 첫번째 라인 */}
-        <div className="flex flex-col gap-1 lg:flex-row">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 gap-1">
-          {/* 좌측: 드래그 가능한 6개 패널 (2x3 그리드, 화면의 50%) */}
+          {/* 첫번쨰 열 */}
-          <div className="w-full lg:w-1/2">
+          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
-            {isMounted ? (
+            {/* 전국 하수처리시설 개소수 및 가동률 */}
-              <DndContext
+            <FoFcltCntRt />
-                sensors={sensors}
+
-                collisionDetection={closestCenter}
+            {/* 오수관로 및 우수관로 현황 */}
-                onDragEnd={handleTopDragEnd}
+            <SnPplStatus />
-              >
+
-                <SortableContext
+            {/* 하수처리수 재이용 (m³) */}
-                  items={topPanels.map((p) => p.id)}
+            <ReuseChart />
-                  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>
 
-          {/* 우측: 고정된 지도와 사용자 정보 (화면의 50%) */}
+          {/* 두번쨰 열 */}
-          <div className="flex w-full gap-1 lg:w-1/2">
+          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
-            {/* 지도영역 - 고정 (드래그 불가) */}
+            {/* 수계별 유입ㆍ방류수질 분석 */}
-            <div className="flex-1">
+            <FoWqltInflEffl />
-              <KoreaBasinMap />
-            </div>
 
-            {/* 사용자 정보 카드 - 고정 (드래그 불가) */}
+            {/* 노후하수관로현황 */}
-            <div className="flex w-full flex-col gap-1 !p-0 lg:w-[300px]">
+            <SnOldPpl />
-              {error && <div className="mb-4 text-red-500">{error}</div>}
+
-              {userInfo ? (
+            {/* 물재이용 현황 (재이용량, m³) */}
-                <div
+            <ReuseStatus />
-                  className="card card_border login_info_box"
+          </div>
-                  style={{ minHeight: "150px", height: "auto" }}
+
-                >
+          {/* 지도영역 */}
-                  <div
+          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-3">
-                    className="login_header"
+            <KoreaBasinMap />
-                    style={{ paddingLeft: "10px", paddingRight: "10px" }}
+          </div>
-                  >
+
-                    <div className="login_avatar">
+          {/* 사용자 정보 카드 */}
-                      <Image
+          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-1 !p-0">
-                        src="/images/icon_loginID.png"
+            {error && <div className="mb-4 text-red-500">{error}</div>}
-                        alt="프로필"
+            {userInfo ? (
-                        width={40}
+            <div className="card card_border login_info_box" style={{ minHeight: "150px", height: "auto" }}>
-                        height={40}
+              <div className="login_header" style={{ paddingLeft: "10px", paddingRight: "10px" }}>
-                        onError={(e) => {
+                <div className="login_avatar">
-                          const target = e.target as HTMLImageElement;
+                  <Image 
-                          target.src =
+                    src="/images/icon_loginID.png" 
-                            "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";
+                    alt="프로필" 
-                        }}
+                    width={40}
-                      />
+                    height={40}
-                    </div>
+                    onError={(e) => {
-                    <div className="login_user_info">
+                      const target = e.target as HTMLImageElement;
-                      <div className="user_name">
+                      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";
-                        {userInfo.userName || "-"}
+                    }} 
-                      </div>
+                  />
-                      <div className="user_status">온라인</div>
+                </div>
-                      <div className="user_status text-xs sm:text-sm">
+                <div className="login_user_info">
-                        <b>2FA 활성화:</b>{" "}
+                  <div className="user_name">{userInfo.userName || "-"}</div>
-                        {userInfo.twoFactorEnabled ? "예" : "아니오"}
+                  <div className="user_status">온라인</div>
-                      </div>
+                  <div className="user_status text-xs sm:text-sm">
-                    </div>
+                    <b>2FA 활성화:</b>{" "}
-                  </div>
+                    {userInfo.twoFactorEnabled ? "예" : "아니오"}
-                  <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>
-                !error && <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>
-              <ScheduleList />
+              </div>
-
-              <MyPostList />
             </div>
+            ) : (
+              !error && <div>사용자 정보를 불러오는 중...</div>
+            )}
+            
+            <ScheduleList />
+            
+            <MyPostList />
           </div>          
         </div>
 
-        {/* 두번째 라인 - 드래그 가능한 4개 패널 */}
+        {/* 두번째 라인 */}
-        {isMounted ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-1">
-          <DndContext
+          <div className="card card-border" style={{ height: "250px" }}>
-            sensors={sensors}
+            <SupportList />
-            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 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>
       </div>
     </div>
   );

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

@@ -5,7 +5,6 @@ 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,
@@ -36,7 +35,6 @@ const getRegionInfo = (regionName: string) => {
 };
 
 const DataStatusList: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
   const plugin = useRef(
     Autoplay({ delay: 3000, stopOnInteraction: true })
   );
@@ -108,11 +106,7 @@ const DataStatusList: React.FC = () => {
 
   return (
     <>
-      <div 
+      <div className="card_title bottomline">
-        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,10 +9,8 @@ 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);
@@ -59,18 +57,9 @@ const FoFcltCntRt: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div 
+      <div className="card-header text-foreground">
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
         <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
-        <div 
+        <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
-          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,7 +14,6 @@ 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);
@@ -22,7 +21,6 @@ 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[]>([]);
@@ -197,18 +195,9 @@ const FoWqltInflEffl: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div 
+      <div className="card-header text-foreground">
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <div 
+        <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
-          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,11 +10,9 @@ 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],
@@ -53,18 +51,9 @@ const NoticeList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0"  style={{ height: "220px" }}>
-      <div 
+      <div className="card-header !m-0 !border-none text-foreground">
-        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 
+        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-          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,7 +8,6 @@ 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,
@@ -37,7 +36,6 @@ 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(
@@ -185,18 +183,9 @@ const ReuseChart: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div 
+      <div className="card-header text-foreground">
-        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>
-        <div 
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-          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,10 +7,8 @@ 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,
@@ -34,18 +32,9 @@ const ReuseStatus: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div 
+      <div className="card-header text-foreground">
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
         <h3 className="text-2xl font-medium">물재이용 현황 (재이용량, m³)</h3>
-        <div 
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-          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,14 +17,12 @@ 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();
@@ -172,18 +170,9 @@ export default function SnOldPpl() {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div 
+      <div className="card-header text-foreground">
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
         <h3 className="text-2xl font-medium">노후 하수관로 현황</h3>
-        <div 
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-          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,7 +17,6 @@ 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;
@@ -30,7 +29,6 @@ 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[]>([]);
   
@@ -159,18 +157,10 @@ export default function SnPplStatus() {
   };
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div 
+      <div className="card-header text-foreground">
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
         <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
-        <div 
+        
-          onPointerDown={(e) => e.stopPropagation()}
+        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-          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

@@ -1,64 +0,0 @@
-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,10 +7,8 @@ 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 () => {
@@ -31,11 +29,7 @@ const SupportList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0" style={{ height: "220px" }}>
-      <div 
+      <div className="card-header !m-0 !border-none text-foreground">
-        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.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,

apps/common/features/package.json

@@ -46,7 +46,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.3.8",
+    "eslint-config-next": "15.1.7",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/common/features/src/entities/auth/lib/auth-wrapper.tsx

@@ -4,17 +4,13 @@ import { useEffect } from "react";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
-import { getAuthLoginRedirectUrl, isAtLoginRedirectUrl } from "@common/network";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
+import { LoginApi } from "../api/login-service";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
-    if (isAtLoginRedirectUrl(getAuthLoginRedirectUrl())) {
-      return;
-    }
-
     const userId = getCookie(AUTH_USER_ID);
     if (!userId) {
       throw new Error("Missing required authentication tokens");
@@ -32,6 +28,8 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
+        await LoginApi.silentRefresh();
+        await authCheck();
       }
     })();
   }, []);

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

@@ -83,7 +83,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
     }
   };
 
-  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<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.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<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.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
     setKeyword(formData.get("keyword") as string);
@@ -84,8 +84,7 @@ function SearchPage() {
               <TabsList className="mx-auto">
                 <TabsTrigger value="all">
                   전체 (
-                  {(data?.contsList?.length ?? 0) +
+                  { (data?.contsList?.length ?? 0) + (data?.boardList?.totalElements ?? 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.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,

apps/cs/.env.example

@@ -1,8 +1,7 @@
 # apps/cs/src/shared/config/env.ts 참고
 NEXT_PUBLIC_PORT=3000
 NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
-SERVER_API_URL=http://192.168.0.102:8000
 NEXT_PUBLIC_SITE_ID=CS
 NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
+NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
 NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
-NEXT_PUBLIC_TINY_BASE_URL=

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

@@ -1,17 +0,0 @@
-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

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

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

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

apps/cs/app/(with-base-layout)/layout.tsx

@@ -6,7 +6,6 @@ import { BaseLayout } from "@common/components";
 import type { MenuItem } from "@/entities/menu";
 import { useMenuStore } from "@/shared/lib";
 import { PageLayout } from "@/shared/ui/page-layout";
-import { tokenManager } from "@/entities/auth";
 
 export default function WithBaseLayout({
   children,
@@ -27,7 +26,6 @@ export default function WithBaseLayout({
   return (
     <BaseLayout
       queryClient={queryClient}
-      tokenManager={tokenManager}
       currentPath={pathname ?? ""}
       handleMenuClick={handleMenuClick}
     >