From fd91a41aa9dcfe3657170679258f731d6f818e10 Mon Sep 17 00:00:00 2001
From: rukadeveloper <kansaki135@gmail.com>
Date: Sat, 2 Aug 2025 05:16:24 -0700
Subject: [PATCH 1/2] delete chat

---
 .../chat/ChatRequestModal.module.scss         | 197 -------------
 src/components/chat/ChatRequestModal.tsx      | 120 --------
 src/components/chat/ChatRoom.module.scss      | 200 -------------
 src/components/chat/ChatRoom.tsx              | 118 --------
 src/hooks/useChat.ts                          | 272 ------------------
 src/hooks/useWebSocket.ts                     | 183 ------------
 6 files changed, 1090 deletions(-)
 delete mode 100644 src/components/chat/ChatRequestModal.module.scss
 delete mode 100644 src/components/chat/ChatRequestModal.tsx
 delete mode 100644 src/components/chat/ChatRoom.module.scss
 delete mode 100644 src/components/chat/ChatRoom.tsx
 delete mode 100644 src/hooks/useChat.ts
 delete mode 100644 src/hooks/useWebSocket.ts

diff --git a/src/components/chat/ChatRequestModal.module.scss b/src/components/chat/ChatRequestModal.module.scss
deleted file mode 100644
index 975517e..0000000
--- a/src/components/chat/ChatRequestModal.module.scss
+++ /dev/null
@@ -1,197 +0,0 @@
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
-  background: white;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 400px;
-  max-height: 80vh;
-  overflow: hidden;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 20px 0 20px;
-  border-bottom: 1px solid #e9ecef;
-
-  h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .closeButton {
-    background: none;
-    border: none;
-    font-size: 24px;
-    color: #999;
-    cursor: pointer;
-    padding: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-
-    &:hover {
-      background-color: #f8f9fa;
-      color: #666;
-    }
-  }
-}
-
-.content {
-  padding: 20px;
-
-  .receiverInfo {
-    margin-bottom: 16px;
-    padding: 12px;
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    border-left: 4px solid #2773e6;
-
-    span {
-      font-size: 14px;
-      color: #666;
-      font-weight: 500;
-    }
-  }
-
-  .receiverInput {
-    margin-bottom: 16px;
-
-    label {
-      display: block;
-      font-size: 14px;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 8px;
-    }
-
-    input {
-      width: 100%;
-      padding: 12px;
-      border: 1px solid #e9ecef;
-      border-radius: 8px;
-      font-size: 14px;
-      margin-bottom: 12px;
-      outline: none;
-      transition: border-color 0.2s ease;
-
-      &::placeholder {
-        color: #999;
-      }
-
-      &:focus {
-        border-color: #2773e6;
-      }
-    }
-  }
-
-  .messageInput {
-    label {
-      display: block;
-      font-size: 14px;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 8px;
-    }
-
-    textarea {
-      width: 100%;
-      padding: 12px;
-      border: 1px solid #e9ecef;
-      border-radius: 8px;
-      font-size: 14px;
-      font-family: inherit;
-      resize: vertical;
-      min-height: 100px;
-      outline: none;
-      transition: border-color 0.2s ease;
-
-      &::placeholder {
-        color: #999;
-      }
-
-      &:focus {
-        border-color: #2773e6;
-      }
-    }
-  }
-}
-
-.footer {
-  display: flex;
-  gap: 12px;
-  padding: 0 20px 20px 20px;
-
-  button {
-    flex: 1;
-    padding: 12px;
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-  }
-
-  .cancelButton {
-    background-color: #f8f9fa;
-    color: #666;
-
-    &:hover:not(:disabled) {
-      background-color: #e9ecef;
-    }
-  }
-
-  .sendButton {
-    background-color: #2773e6;
-    color: white;
-
-    &:hover:not(:disabled) {
-      background-color: #1e5bb8;
-    }
-  }
-}
-
-// 반응형 디자인
-@media (max-width: 768px) {
-  .modal {
-    width: 95%;
-    margin: 20px;
-  }
-
-  .header {
-    padding: 16px 16px 0 16px;
-  }
-
-  .content {
-    padding: 16px;
-  }
-
-  .footer {
-    padding: 0 16px 16px 16px;
-  }
-}
diff --git a/src/components/chat/ChatRequestModal.tsx b/src/components/chat/ChatRequestModal.tsx
deleted file mode 100644
index 5ea7360..0000000
--- a/src/components/chat/ChatRequestModal.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useState } from "react";
-import styles from "./ChatRequestModal.module.scss";
-
-interface ChatRequestModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSendRequest: (receiverId: number, message: string) => Promise<void>;
-  receiverId?: number;
-  receiverName?: string;
-}
-
-const ChatRequestModal = ({
-  isOpen,
-  onClose,
-  onSendRequest,
-  receiverId,
-  receiverName,
-}: ChatRequestModalProps) => {
-  const [message, setMessage] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [inputReceiverId, setInputReceiverId] = useState("");
-  const [inputReceiverName, setInputReceiverName] = useState("");
-
-  const handleSendRequest = async () => {
-    const targetReceiverId = receiverId || parseInt(inputReceiverId);
-    if (!message.trim() || !targetReceiverId) return;
-
-    try {
-      setIsLoading(true);
-      await onSendRequest(targetReceiverId, message);
-      setMessage("");
-      setInputReceiverId("");
-      setInputReceiverName("");
-      onClose();
-    } catch (error) {
-      console.error("채팅 요청 전송 실패:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSendRequest();
-    }
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className={styles.overlay} onClick={onClose}>
-      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.header}>
-          <h3>채팅 요청</h3>
-          <button className={styles.closeButton} onClick={onClose}>
-            ×
-          </button>
-        </div>
-
-        <div className={styles.content}>
-          {receiverName ? (
-            <div className={styles.receiverInfo}>
-              <span>받는 사람: {receiverName}</span>
-            </div>
-          ) : (
-            <div className={styles.receiverInput}>
-              <label>받는 사람 ID</label>
-              <input
-                type="number"
-                placeholder="받는 사람의 ID를 입력하세요"
-                value={inputReceiverId}
-                onChange={(e) => setInputReceiverId(e.target.value)}
-              />
-              <label>받는 사람 이름 (선택사항)</label>
-              <input
-                type="text"
-                placeholder="받는 사람의 이름을 입력하세요"
-                value={inputReceiverName}
-                onChange={(e) => setInputReceiverName(e.target.value)}
-              />
-            </div>
-          )}
-
-          <div className={styles.messageInput}>
-            <label>채팅 요청 메시지</label>
-            <textarea
-              placeholder="채팅 요청 메시지를 입력하세요..."
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              onKeyPress={handleKeyPress}
-              rows={4}
-            />
-          </div>
-        </div>
-
-        <div className={styles.footer}>
-          <button
-            className={styles.cancelButton}
-            onClick={onClose}
-            disabled={isLoading}
-          >
-            취소
-          </button>
-          <button
-            className={styles.sendButton}
-            onClick={handleSendRequest}
-            disabled={
-              !message.trim() || (!receiverId && !inputReceiverId) || isLoading
-            }
-          >
-            {isLoading ? "전송 중..." : "전송"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ChatRequestModal;
diff --git a/src/components/chat/ChatRoom.module.scss b/src/components/chat/ChatRoom.module.scss
deleted file mode 100644
index 92e725d..0000000
--- a/src/components/chat/ChatRoom.module.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-.chatRoom {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background-color: #f8f9fa;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: 16px 20px;
-  background: white;
-  border-bottom: 1px solid #e9ecef;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-  .backButton {
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #666;
-    cursor: pointer;
-    padding: 8px;
-    margin-right: 12px;
-    border-radius: 50%;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: #f8f9fa;
-    }
-  }
-
-  .roomInfo {
-    flex: 1;
-
-    h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: #333;
-    }
-
-    .participantCount {
-      font-size: 12px;
-      color: #999;
-    }
-  }
-}
-
-.messagesContainer {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-  background: #f8f9fa;
-
-  .emptyState {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    text-align: center;
-    color: #666;
-
-    .emptyIcon {
-      font-size: 48px;
-      margin-bottom: 16px;
-    }
-
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #333;
-      margin: 0 0 8px 0;
-    }
-
-    p {
-      font-size: 14px;
-      color: #999;
-      margin: 0;
-    }
-  }
-
-  .messages {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    .message {
-      display: flex;
-      margin-bottom: 8px;
-
-      .messageContent {
-        max-width: 70%;
-        padding: 12px 16px;
-        border-radius: 18px;
-        position: relative;
-
-        p {
-          margin: 0 0 4px 0;
-          font-size: 14px;
-          line-height: 1.4;
-        }
-
-        .timestamp {
-          font-size: 11px;
-          opacity: 0.7;
-        }
-      }
-    }
-
-    .ownMessage {
-      justify-content: flex-end;
-
-      .messageContent {
-        background-color: #2773e6;
-        color: white;
-        border-bottom-right-radius: 4px;
-      }
-    }
-
-    .otherMessage {
-      justify-content: flex-start;
-
-      .messageContent {
-        background-color: white;
-        color: #333;
-        border-bottom-left-radius: 4px;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-}
-
-.inputContainer {
-  padding: 16px 20px;
-  background: white;
-  border-top: 1px solid #e9ecef;
-
-  .inputWrapper {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .messageInput {
-      flex: 1;
-      padding: 12px 16px;
-      border: 1px solid #e9ecef;
-      border-radius: 24px;
-      font-size: 14px;
-      outline: none;
-      transition: border-color 0.2s ease;
-      background: #f8f9fa;
-
-      &::placeholder {
-        color: #999;
-      }
-
-      &:focus {
-        border-color: #2773e6;
-        background: white;
-      }
-    }
-
-    .sendButton {
-      padding: 12px 20px;
-      background: #2773e6;
-      color: white;
-      border: none;
-      border-radius: 20px;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: background-color 0.2s ease;
-
-      &:hover:not(:disabled) {
-        background: #1e5bb8;
-      }
-
-      &:disabled {
-        background: #ccc;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-// 반응형 디자인
-@media (max-width: 768px) {
-  .header {
-    padding: 12px 16px;
-  }
-
-  .messagesContainer {
-    padding: 16px;
-  }
-
-  .inputContainer {
-    padding: 12px 16px;
-  }
-}
diff --git a/src/components/chat/ChatRoom.tsx b/src/components/chat/ChatRoom.tsx
deleted file mode 100644
index 51d6854..0000000
--- a/src/components/chat/ChatRoom.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { useUserInfo } from "../../stores/userStore";
-import { useChat } from "../../hooks/useChat";
-import type { ChatRoom as ChatRoomType } from "../../api/chatApi";
-import styles from "./ChatRoom.module.scss";
-
-interface ChatRoomProps {
-  room: ChatRoomType;
-  onBack: () => void;
-}
-
-const ChatRoom = ({ room, onBack }: ChatRoomProps) => {
-  const user = useUserInfo();
-  const { sendMessage, subscribeToRoom } = useChat();
-  const [newMessage, setNewMessage] = useState("");
-  const [messages, setMessages] = useState<any[]>([]);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  // 스크롤을 맨 아래로 이동
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  // 채팅방 구독
-  useEffect(() => {
-    subscribeToRoom(room.id);
-  }, [room.id, subscribeToRoom]);
-
-  // 메시지 전송
-  const handleSendMessage = () => {
-    if (newMessage.trim()) {
-      sendMessage(room.id, newMessage);
-      setNewMessage("");
-    }
-  };
-
-  // Enter 키로 메시지 전송
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSendMessage();
-    }
-  };
-
-  return (
-    <div className={styles.chatRoom}>
-      {/* 헤더 */}
-      <div className={styles.header}>
-        <button className={styles.backButton} onClick={onBack}>
-          ←
-        </button>
-        <div className={styles.roomInfo}>
-          <h3>{room.name}</h3>
-          <span className={styles.participantCount}>
-            {room.participants.length}명
-          </span>
-        </div>
-      </div>
-
-      {/* 메시지 목록 */}
-      <div className={styles.messagesContainer}>
-        {messages.length === 0 ? (
-          <div className={styles.emptyState}>
-            <div className={styles.emptyIcon}>💬</div>
-            <h3>메시지가 없습니다</h3>
-            <p>첫 번째 메시지를 보내보세요!</p>
-          </div>
-        ) : (
-          <div className={styles.messages}>
-            {messages.map((message, index) => (
-              <div
-                key={index}
-                className={`${styles.message} ${
-                  message.isOwn ? styles.ownMessage : styles.otherMessage
-                }`}
-              >
-                <div className={styles.messageContent}>
-                  <p>{message.message}</p>
-                  <span className={styles.timestamp}>
-                    {new Date(message.timestamp).toLocaleTimeString()}
-                  </span>
-                </div>
-              </div>
-            ))}
-            <div ref={messagesEndRef} />
-          </div>
-        )}
-      </div>
-
-      {/* 메시지 입력 */}
-      <div className={styles.inputContainer}>
-        <div className={styles.inputWrapper}>
-          <input
-            type="text"
-            placeholder="메시지를 입력하세요..."
-            value={newMessage}
-            onChange={(e) => setNewMessage(e.target.value)}
-            onKeyPress={handleKeyPress}
-            className={styles.messageInput}
-          />
-          <button
-            onClick={handleSendMessage}
-            className={styles.sendButton}
-            disabled={!newMessage.trim()}
-          >
-            전송
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ChatRoom;
diff --git a/src/hooks/useChat.ts b/src/hooks/useChat.ts
deleted file mode 100644
index 011e7e5..0000000
--- a/src/hooks/useChat.ts
+++ /dev/null
@@ -1,272 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { useWebSocket } from "./useWebSocket";
-import {
-  getDirectChatRooms,
-  getGroupChatRooms,
-  getReceivedChatRequests,
-  getSentChatRequests,
-  sendChatRequest,
-  approveChatRequest,
-  rejectChatRequest,
-  cancelChatRequest,
-} from "../api/chatApi";
-import type { ChatRoom, ChatRequest, ChatMessage } from "../api/chatApi";
-import { useUserInfo } from "../stores/userStore";
-
-interface UseChatReturn {
-  // 채팅방 목록
-  directRooms: ChatRoom[];
-  groupRooms: ChatRoom[];
-
-  // 채팅 요청
-  receivedRequests: ChatRequest[];
-  sentRequests: ChatRequest[];
-
-  // 메시지
-  messages: ChatMessage[];
-
-  // 로딩 상태
-  isLoading: boolean;
-  isConnected: boolean;
-
-  // 액션 함수들
-  loadDirectRooms: () => Promise<void>;
-  loadGroupRooms: () => Promise<void>;
-  loadReceivedRequests: () => Promise<void>;
-  loadSentRequests: () => Promise<void>;
-  sendChatRequestAction: (receiverId: number, message: string) => Promise<void>;
-  approveRequest: (requestId: number) => Promise<void>;
-  rejectRequest: (requestId: number) => Promise<void>;
-  cancelRequest: (requestId: number) => Promise<void>;
-  sendMessage: (roomId: number, message: string) => void;
-  subscribeToRoom: (roomId: number) => void;
-}
-
-export const useChat = (): UseChatReturn => {
-  const [directRooms, setDirectRooms] = useState<ChatRoom[]>([]);
-  const [groupRooms, setGroupRooms] = useState<ChatRoom[]>([]);
-  const [receivedRequests, setReceivedRequests] = useState<ChatRequest[]>([]);
-  const [sentRequests, setSentRequests] = useState<ChatRequest[]>([]);
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const user = useUserInfo();
-  const {
-    isConnected,
-    sendMessage: wsSendMessage,
-    subscribeToRoom: wsSubscribeToRoom,
-    onMessage,
-    onSubscribe,
-  } = useWebSocket();
-
-  // 1:1 채팅방 목록 로드
-  const loadDirectRooms = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      const response = await getDirectChatRooms();
-      // API 응답이 배열이 아닐 경우를 대비한 안전 처리
-      const rooms = Array.isArray(response) ? response : [];
-      setDirectRooms(rooms);
-    } catch (error) {
-      console.error("1:1 채팅방 목록 로드 실패:", error);
-      setDirectRooms([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // 단체 채팅방 목록 로드
-  const loadGroupRooms = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      const response = await getGroupChatRooms();
-      // API 응답이 배열이 아닐 경우를 대비한 안전 처리
-      const rooms = Array.isArray(response) ? response : [];
-      setGroupRooms(rooms);
-    } catch (error) {
-      console.error("단체 채팅방 목록 로드 실패:", error);
-      setGroupRooms([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // 받은 채팅 요청 목록 로드
-  const loadReceivedRequests = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      const response = await getReceivedChatRequests();
-      // API 응답이 배열이 아닐 경우를 대비한 안전 처리
-      const requests = Array.isArray(response) ? response : [];
-      setReceivedRequests(requests);
-    } catch (error) {
-      console.error("받은 채팅 요청 목록 로드 실패:", error);
-      setReceivedRequests([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // 보낸 채팅 요청 목록 로드
-  const loadSentRequests = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      const response = await getSentChatRequests();
-      // API 응답이 배열이 아닐 경우를 대비한 안전 처리
-      const requests = Array.isArray(response) ? response : [];
-      setSentRequests(requests);
-    } catch (error) {
-      console.error("보낸 채팅 요청 목록 로드 실패:", error);
-      setSentRequests([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // 채팅 요청 보내기
-  const sendChatRequestAction = useCallback(
-    async (receiverId: number, message: string) => {
-      try {
-        await sendChatRequest(receiverId, message);
-        // 보낸 요청 목록 새로고침
-        await loadSentRequests();
-      } catch (error) {
-        console.error("채팅 요청 전송 실패:", error);
-        throw error;
-      }
-    },
-    [loadSentRequests]
-  );
-
-  // 채팅 요청 승인
-  const approveRequest = useCallback(
-    async (requestId: number) => {
-      try {
-        await approveChatRequest(requestId);
-        // 받은 요청 목록 새로고침
-        await loadReceivedRequests();
-        // 1:1 채팅방 목록 새로고침
-        await loadDirectRooms();
-      } catch (error) {
-        console.error("채팅 요청 승인 실패:", error);
-        throw error;
-      }
-    },
-    [loadReceivedRequests, loadDirectRooms]
-  );
-
-  // 채팅 요청 거절
-  const rejectRequest = useCallback(
-    async (requestId: number) => {
-      try {
-        await rejectChatRequest(requestId);
-        // 받은 요청 목록 새로고침
-        await loadReceivedRequests();
-      } catch (error) {
-        console.error("채팅 요청 거절 실패:", error);
-        throw error;
-      }
-    },
-    [loadReceivedRequests]
-  );
-
-  // 채팅 요청 취소
-  const cancelRequest = useCallback(
-    async (requestId: number) => {
-      try {
-        await cancelChatRequest(requestId);
-        // 보낸 요청 목록 새로고침
-        await loadSentRequests();
-      } catch (error) {
-        console.error("채팅 요청 취소 실패:", error);
-        throw error;
-      }
-    },
-    [loadSentRequests]
-  );
-
-  // 메시지 전송
-  const sendMessage = useCallback(
-    (roomId: number, message: string) => {
-      wsSendMessage(roomId, message);
-    },
-    [wsSendMessage]
-  );
-
-  // 채팅방 구독
-  const subscribeToRoom = useCallback(
-    (roomId: number) => {
-      wsSubscribeToRoom(roomId);
-    },
-    [wsSubscribeToRoom]
-  );
-
-  // WebSocket 메시지 처리
-  useEffect(() => {
-    const handleMessage = (data: any) => {
-      if (data.type === "MESSAGE" && data.roomId && data.message) {
-        const newMessage: ChatMessage = {
-          id: Date.now(),
-          roomId: data.roomId,
-          senderId: data.senderId || 0,
-          senderName: data.senderName || "알 수 없음",
-          message: data.message,
-          timestamp: data.timestamp || new Date().toISOString(),
-          isOwn: data.senderId === user.memberApartmentId,
-        };
-
-        setMessages((prev) => [...prev, newMessage]);
-      }
-    };
-
-    onMessage(handleMessage);
-  }, [onMessage, user.memberApartmentId]);
-
-  // 구독된 채팅방 처리
-  useEffect(() => {
-    const handleSubscribe = (rooms: number[]) => {
-      console.log("구독된 채팅방:", rooms);
-      // 필요한 경우 채팅방 목록 새로고침
-      loadDirectRooms();
-      loadGroupRooms();
-    };
-
-    onSubscribe(handleSubscribe);
-  }, [onSubscribe, loadDirectRooms, loadGroupRooms]);
-
-  // 초기 데이터 로드
-  useEffect(() => {
-    if (user.isLogin) {
-      loadDirectRooms();
-      loadGroupRooms();
-      loadReceivedRequests();
-      loadSentRequests();
-    }
-  }, [
-    user.isLogin,
-    loadDirectRooms,
-    loadGroupRooms,
-    loadReceivedRequests,
-    loadSentRequests,
-  ]);
-
-  return {
-    directRooms,
-    groupRooms,
-    receivedRequests,
-    sentRequests,
-    messages,
-    isLoading,
-    isConnected,
-    loadDirectRooms,
-    loadGroupRooms,
-    loadReceivedRequests,
-    loadSentRequests,
-    sendChatRequestAction,
-    approveRequest,
-    rejectRequest,
-    cancelRequest,
-    sendMessage,
-    subscribeToRoom,
-  };
-};
diff --git a/src/hooks/useWebSocket.ts b/src/hooks/useWebSocket.ts
deleted file mode 100644
index a828104..0000000
--- a/src/hooks/useWebSocket.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from "react";
-import { getWebSocketToken } from "../api/chatApi";
-import { useUserInfo } from "../stores/userStore";
-
-interface WebSocketMessage {
-  type: "MESSAGE" | "SUBSCRIBE" | "SUBSCRIBE_RESPONSE";
-  roomId?: number;
-  message?: string;
-  senderId?: number;
-  senderName?: string;
-  timestamp?: string;
-  subscribedRooms?: number[];
-}
-
-interface UseWebSocketReturn {
-  isConnected: boolean;
-  sendMessage: (roomId: number, message: string) => void;
-  subscribeToRoom: (roomId: number) => void;
-  unsubscribeFromRoom: (roomId: number) => void;
-  onMessage: (callback: (message: WebSocketMessage) => void) => void;
-  onSubscribe: (callback: (rooms: number[]) => void) => void;
-}
-
-export const useWebSocket = (): UseWebSocketReturn => {
-  const [isConnected, setIsConnected] = useState(false);
-  const wsRef = useRef<WebSocket | null>(null);
-  const messageCallbacks = useRef<((message: WebSocketMessage) => void)[]>([]);
-  const subscribeCallbacks = useRef<((rooms: number[]) => void)[]>([]);
-  const user = useUserInfo();
-
-  // WebSocket 연결
-  const connect = useCallback(async () => {
-    try {
-      console.log("WebSocket 연결 시작...");
-
-      // 토큰 발급
-      const { token } = await getWebSocketToken();
-      console.log("토큰 발급 성공:", token ? "토큰 있음" : "토큰 없음");
-
-      // 토큰 검증
-      if (!token) {
-        throw new Error("토큰이 발급되지 않았습니다.");
-      }
-
-      // WebSocket 연결
-      const wsUrl = `wss://danjitalk.duckdns.org/api/ws/chat?token=${token}`;
-      console.log("WebSocket URL:", wsUrl);
-
-      const ws = new WebSocket(wsUrl);
-
-      ws.onopen = () => {
-        console.log("WebSocket 연결됨");
-        setIsConnected(true);
-
-        // 구독 요청
-        ws.send(JSON.stringify({ type: "SUBSCRIBE" }));
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const data: WebSocketMessage = JSON.parse(event.data);
-          console.log("WebSocket 메시지 수신:", data);
-
-          if (data.type === "SUBSCRIBE_RESPONSE" && data.subscribedRooms) {
-            // 구독된 채널 목록 처리
-            subscribeCallbacks.current.forEach((callback) =>
-              callback(data.subscribedRooms!)
-            );
-          } else if (data.type === "MESSAGE") {
-            // 메시지 처리
-            messageCallbacks.current.forEach((callback) => callback(data));
-          }
-        } catch (error) {
-          console.error("WebSocket 메시지 파싱 오류:", error);
-        }
-      };
-
-      ws.onclose = (event) => {
-        console.log("WebSocket 연결 종료:", {
-          code: event.code,
-          reason: event.reason,
-          wasClean: event.wasClean,
-        });
-        setIsConnected(false);
-      };
-
-      ws.onerror = (error) => {
-        console.error("WebSocket 오류:", error);
-        setIsConnected(false);
-      };
-
-      wsRef.current = ws;
-    } catch (error) {
-      console.error("WebSocket 연결 실패:", error);
-    }
-  }, []);
-
-  // 연결 해제
-  const disconnect = useCallback(() => {
-    if (wsRef.current) {
-      wsRef.current.close();
-      wsRef.current = null;
-    }
-  }, []);
-
-  // 메시지 전송
-  const sendMessage = useCallback(
-    (roomId: number, message: string) => {
-      if (wsRef.current && isConnected) {
-        const payload = {
-          type: "MESSAGE",
-          roomId,
-          message,
-        };
-        wsRef.current.send(JSON.stringify(payload));
-      }
-    },
-    [isConnected]
-  );
-
-  // 채팅방 구독
-  const subscribeToRoom = useCallback(
-    (roomId: number) => {
-      if (wsRef.current && isConnected) {
-        const payload = {
-          type: "SUBSCRIBE",
-          roomId,
-        };
-        wsRef.current.send(JSON.stringify(payload));
-      }
-    },
-    [isConnected]
-  );
-
-  // 채팅방 구독 해제
-  const unsubscribeFromRoom = useCallback(
-    (roomId: number) => {
-      if (wsRef.current && isConnected) {
-        const payload = {
-          type: "UNSUBSCRIBE",
-          roomId,
-        };
-        wsRef.current.send(JSON.stringify(payload));
-      }
-    },
-    [isConnected]
-  );
-
-  // 메시지 콜백 등록
-  const onMessage = useCallback(
-    (callback: (message: WebSocketMessage) => void) => {
-      messageCallbacks.current.push(callback);
-    },
-    []
-  );
-
-  // 구독 콜백 등록
-  const onSubscribe = useCallback((callback: (rooms: number[]) => void) => {
-    subscribeCallbacks.current.push(callback);
-  }, []);
-
-  // 로그인 상태에 따라 연결/해제
-  useEffect(() => {
-    if (user.isLogin) {
-      connect();
-    } else {
-      disconnect();
-    }
-
-    return () => {
-      disconnect();
-    };
-  }, [user.isLogin, connect, disconnect]);
-
-  return {
-    isConnected,
-    sendMessage,
-    subscribeToRoom,
-    unsubscribeFromRoom,
-    onMessage,
-    onSubscribe,
-  };
-};

From 13632cfeebd20b586decfbef610309cba7781458 Mon Sep 17 00:00:00 2001
From: rukadeveloper <kansaki135@gmail.com>
Date: Fri, 8 Aug 2025 18:02:42 -0700
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=ED=8C=A8=EC=8A=A4=EC=9B=8C?=
 =?UTF-8?q?=EB=93=9C=20=EB=B0=94=EB=80=8C=EB=8A=94=20=ED=98=84=EC=83=81=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/chatApi.ts                       | 182 ---------
 src/api/endpoints.ts                     |  23 +-
 src/components/landing/PreviewDevice.tsx |   2 +-
 src/pages/chat/ChatPage.module.scss      | 311 ----------------
 src/pages/chat/ChatPage.tsx              | 452 -----------------------
 src/pages/my-pages/MyPage.tsx            |  34 +-
 src/routes/AppRoutes.tsx                 |   7 +-
 src/stores/userStore.ts                  |  99 +++--
 8 files changed, 77 insertions(+), 1033 deletions(-)
 delete mode 100644 src/api/chatApi.ts
 delete mode 100644 src/pages/chat/ChatPage.module.scss
 delete mode 100644 src/pages/chat/ChatPage.tsx

diff --git a/src/api/chatApi.ts b/src/api/chatApi.ts
deleted file mode 100644
index eb26cdc..0000000
--- a/src/api/chatApi.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-import axios from "axios";
-import { API_ENDPOINTS } from "./endpoints";
-
-// 채팅 요청 인터페이스
-export interface ChatRequest {
-  id: number;
-  senderId: number;
-  receiverId: number;
-  message: string;
-  status: "PENDING" | "APPROVED" | "REJECTED";
-  createdAt: string;
-}
-
-// 채팅방 인터페이스
-export interface ChatRoom {
-  id: number;
-  name: string;
-  type: "DIRECT" | "GROUP";
-  lastMessage?: string;
-  lastMessageTime?: string;
-  unreadCount: number;
-  participants: ChatParticipant[];
-}
-
-// 채팅 참여자 인터페이스
-export interface ChatParticipant {
-  id: number;
-  nickname: string;
-  profileImage?: string;
-}
-
-// 메시지 인터페이스
-export interface ChatMessage {
-  id: number;
-  roomId: number;
-  senderId: number;
-  senderName: string;
-  message: string;
-  timestamp: string;
-  isOwn: boolean;
-}
-
-// 사용자 검색 결과 인터페이스
-export interface UserSearchResult {
-  id: number;
-  nickname: string;
-  name: string;
-  profileImage?: string;
-  apartmentName?: string;
-}
-
-// 1대1 채팅 요청
-export const sendChatRequest = async (receiverId: number, message: string) => {
-  const response = await axios.post(
-    `${API_ENDPOINTS.CHAT.REQUEST}`,
-    {
-      receiverId,
-      message,
-    },
-    { withCredentials: true }
-  );
-  return response.data;
-};
-
-// 채팅 요청 승인
-export const approveChatRequest = async (requestId: number) => {
-  const response = await axios.post(
-    `${API_ENDPOINTS.CHAT.APPROVE_REQUEST}/${requestId}/approve`,
-    {},
-    { withCredentials: true }
-  );
-  return response.data;
-};
-
-// 채팅 요청 거절
-export const rejectChatRequest = async (requestId: number) => {
-  const response = await axios.delete(
-    `${API_ENDPOINTS.CHAT.REJECT_REQUEST}/${requestId}/reject`,
-    { withCredentials: true }
-  );
-  return response.data;
-};
-
-// 보낸 채팅 취소
-export const cancelChatRequest = async (requestId: number) => {
-  const response = await axios.delete(
-    `${API_ENDPOINTS.CHAT.CANCEL_REQUEST}/${requestId}`,
-    { withCredentials: true }
-  );
-  return response.data;
-};
-
-// 받은 채팅 요청 목록 조회
-export const getReceivedChatRequests = async (): Promise<ChatRequest[]> => {
-  const response = await axios.get(`${API_ENDPOINTS.CHAT.RECEIVED_REQUESTS}`, {
-    withCredentials: true,
-  });
-  // API 응답 구조에 따라 data 필드에서 배열을 추출
-  return response.data?.data || response.data || [];
-};
-
-// 보낸 채팅 요청 목록 조회
-export const getSentChatRequests = async (): Promise<ChatRequest[]> => {
-  const response = await axios.get(`${API_ENDPOINTS.CHAT.SENT_REQUESTS}`, {
-    withCredentials: true,
-  });
-  // API 응답 구조에 따라 data 필드에서 배열을 추출
-  return response.data?.data || response.data || [];
-};
-
-// 1대1 채팅 목록 조회
-export const getDirectChatRooms = async (): Promise<ChatRoom[]> => {
-  const response = await axios.get(`${API_ENDPOINTS.CHAT.DIRECT_ROOMS}`, {
-    withCredentials: true,
-  });
-  // API 응답 구조에 따라 data 필드에서 배열을 추출
-  return response.data?.data || response.data || [];
-};
-
-// 단체 채팅 목록 조회
-export const getGroupChatRooms = async (): Promise<ChatRoom[]> => {
-  const response = await axios.get(`${API_ENDPOINTS.CHAT.GROUP_ROOMS}`, {
-    withCredentials: true,
-  });
-  // API 응답 구조에 따라 data 필드에서 배열을 추출
-  return response.data?.data || response.data || [];
-};
-
-// 채팅방 상세 조회
-export const getChatRoomDetail = async (roomId: number): Promise<ChatRoom> => {
-  const response = await axios.get(
-    `${API_ENDPOINTS.CHAT.ROOM_DETAIL}/${roomId}`,
-    { withCredentials: true }
-  );
-  return response.data;
-};
-
-// 임시 토큰 발급
-export const getWebSocketToken = async (): Promise<{ token: string }> => {
-  console.log("WebSocket 토큰 발급 시작...");
-
-  try {
-    // /api/ws/token 엔드포인트 시도 (프록시를 통해 https://danjitalk.duckdns.org/api/ws/token로 전달)
-    console.log("토큰 발급 엔드포인트 시도: /api/ws/token");
-    const response = await axios.post(
-      "/api/ws/token",
-      {},
-      { withCredentials: true }
-    );
-    console.log("토큰 발급 응답:", response.data);
-
-    // API 응답 구조에 따라 토큰 추출
-    let token: string;
-    if (typeof response.data === "string") {
-      // 응답이 문자열인 경우
-      token = response.data;
-    } else if (response.data?.token) {
-      // 응답이 { token: "..." } 형태인 경우
-      token = response.data.token;
-    } else if (response.data?.data?.token) {
-      // 응답이 { data: { token: "..." } } 형태인 경우
-      token = response.data.data.token;
-    } else if (response.data?.data) {
-      // 응답이 { data: "..." } 형태인 경우
-      token = response.data.data;
-    } else {
-      console.error("토큰을 찾을 수 없습니다. 응답 구조:", response.data);
-      throw new Error("토큰을 찾을 수 없습니다.");
-    }
-
-    console.log("추출된 토큰:", token ? "토큰 있음" : "토큰 없음");
-    return { token };
-  } catch (error: any) {
-    console.error("WebSocket 토큰 발급 실패:", {
-      status: error.response?.status,
-      statusText: error.response?.statusText,
-      data: error.response?.data,
-      message: error.message,
-    });
-    throw new Error("WebSocket 토큰을 발급받을 수 없습니다.");
-  }
-};
diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index 956f01e..2794bfd 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -10,11 +10,11 @@ export const API_ENDPOINTS = {
     CERTIFICATION: "/mail/certification-code/send",
   },
 
-  FIND:{
-    EMAIL: '/member/find-id',
-    RESET_PW: '/member/reset-password',
+  FIND: {
+    EMAIL: "/member/find-id",
+    RESET_PW: "/member/reset-password",
   },
-  
+
   // 사용자 관련 엔드포인트
   USER: {
     PROFILE: "/users/profile",
@@ -65,19 +65,4 @@ export const API_ENDPOINTS = {
     ADD_RECENT_KEYWORD: "/search/recent-keywords",
     RECENT_APARTMENT: "/search/recent-apartment",
   },
-
-  // 채팅 관련 엔드포인트
-  CHAT: {
-    REQUEST: "/chat/request",
-    APPROVE_REQUEST: "/chat/request",
-    REJECT_REQUEST: "/chat/request",
-    CANCEL_REQUEST: "/chat/request",
-    RECEIVED_REQUESTS: "/chat/request/received",
-    SENT_REQUESTS: "/chat/request/sent",
-    DIRECT_ROOMS: "/chat/direct",
-    GROUP_ROOMS: "/chat/group",
-    ROOM_DETAIL: "/chat/room",
-    SEARCH_USERS: "/users/search",
-    WS_TOKEN: "/ws/token",
-  },
 };
diff --git a/src/components/landing/PreviewDevice.tsx b/src/components/landing/PreviewDevice.tsx
index 8c9c201..49273de 100644
--- a/src/components/landing/PreviewDevice.tsx
+++ b/src/components/landing/PreviewDevice.tsx
@@ -22,7 +22,7 @@ const PreviewDevice = ({ children }: { children: React.ReactNode }) => {
   return (
     <div
       className={`preview-device ${
-        isOpen || isAlertOpen || isAuthLoading || isEmailLoading || isPending
+        isOpen || isAuthLoading || isEmailLoading || isPending
           ? "of-hidden"
           : ""
       }`}
diff --git a/src/pages/chat/ChatPage.module.scss b/src/pages/chat/ChatPage.module.scss
deleted file mode 100644
index 605ba37..0000000
--- a/src/pages/chat/ChatPage.module.scss
+++ /dev/null
@@ -1,311 +0,0 @@
-.chat-page {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background-color: #f8f9fa;
-}
-
-.chat-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  background: white;
-}
-
-// 탭 네비게이션
-.tab-navigation {
-  display: flex;
-  background: white;
-  border-bottom: 1px solid #e9ecef;
-  padding: 0 10px;
-
-  .tab-button {
-    flex: 1;
-    padding: 12px 8px;
-    background: none;
-    border: none;
-    font-size: 13px;
-    font-weight: 500;
-    color: #666;
-    cursor: pointer;
-    position: relative;
-    transition: color 0.2s ease;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.active {
-      color: #2773e6;
-      font-weight: 600;
-
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 2px;
-        background-color: #2773e6;
-      }
-    }
-
-    &:hover {
-      color: #2773e6;
-    }
-  }
-}
-
-// 검색 컨테이너
-.search-container {
-  padding: 16px 20px;
-  background: white;
-  border-bottom: 1px solid #f0f0f0;
-
-  .search-wrapper {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-
-    .search-input {
-      flex: 1;
-      padding: 12px 16px;
-      border: 1px solid #e9ecef;
-      border-radius: 8px;
-      font-size: 14px;
-      background: #f8f9fa;
-      outline: none;
-      transition: border-color 0.2s ease;
-
-      &::placeholder {
-        color: #999;
-      }
-
-      &:focus {
-        border-color: #2773e6;
-        background: white;
-      }
-    }
-
-    .new-chat-button {
-      padding: 12px 16px;
-      background: #2773e6;
-      color: white;
-      border: none;
-      border-radius: 8px;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: background-color 0.2s ease;
-      white-space: nowrap;
-
-      &:hover {
-        background: #1e5bb8;
-      }
-    }
-  }
-}
-
-// 채팅방 목록
-.chat-rooms {
-  flex: 1;
-  overflow-y: auto;
-  background: white;
-}
-
-.chat-room-item {
-  display: flex;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #f0f0f0;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background-color: #f8f9fa;
-  }
-
-  .room-avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-right: 12px;
-    flex-shrink: 0;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  .room-info {
-    flex: 1;
-    min-width: 0;
-
-    .room-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 4px;
-
-      h4 {
-        font-size: 16px;
-        font-weight: 600;
-        color: #333;
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .last-time {
-        font-size: 12px;
-        color: #999;
-        flex-shrink: 0;
-      }
-    }
-
-    .room-footer {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .last-message {
-        font-size: 14px;
-        color: #666;
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        flex: 1;
-      }
-
-      .unread-count {
-        background: #ff4757;
-        color: white;
-        font-size: 12px;
-        font-weight: 600;
-        padding: 2px 6px;
-        border-radius: 10px;
-        min-width: 18px;
-        text-align: center;
-        margin-left: 8px;
-      }
-    }
-  }
-}
-
-// 연락처 목록
-.contacts-list {
-  flex: 1;
-  overflow-y: auto;
-  background: white;
-}
-
-// 빈 상태
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  text-align: center;
-  color: #666;
-
-  .empty-icon {
-    font-size: 48px;
-    margin-bottom: 16px;
-  }
-
-  h3 {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-    margin: 0 0 8px 0;
-  }
-
-  p {
-    font-size: 14px;
-    color: #999;
-    margin: 0;
-  }
-}
-
-// 메시지 입력 영역
-.message-input-container {
-  padding: 16px 20px;
-  background: white;
-  border-top: 1px solid #e9ecef;
-
-  .message-input-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .message-input {
-      flex: 1;
-      padding: 12px 16px;
-      border: 1px solid #e9ecef;
-      border-radius: 24px;
-      font-size: 14px;
-      outline: none;
-      transition: border-color 0.2s ease;
-      background: #f8f9fa;
-
-      &::placeholder {
-        color: #999;
-      }
-
-      &:focus {
-        border-color: #2773e6;
-        background: white;
-      }
-    }
-
-    .send-button {
-      padding: 12px 20px;
-      background: #2773e6;
-      color: white;
-      border: none;
-      border-radius: 20px;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: background-color 0.2s ease;
-
-      &:hover:not(:disabled) {
-        background: #1e5bb8;
-      }
-
-      &:disabled {
-        background: #ccc;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-// 반응형 디자인
-@media (max-width: 768px) {
-  .chat-container {
-    padding: 0;
-  }
-
-  .tab-navigation {
-    padding: 0 16px;
-  }
-
-  .search-container {
-    padding: 12px 16px;
-  }
-
-  .chat-room-item {
-    padding: 12px 16px;
-  }
-
-  .message-input-container {
-    padding: 12px 16px;
-  }
-}
diff --git a/src/pages/chat/ChatPage.tsx b/src/pages/chat/ChatPage.tsx
deleted file mode 100644
index 25cffe6..0000000
--- a/src/pages/chat/ChatPage.tsx
+++ /dev/null
@@ -1,452 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import { useUserInfo } from "../../stores/userStore";
-import { useChat } from "../../hooks/useChat";
-import Header from "../../layouts/Header";
-import ChatRequestModal from "../../components/chat/ChatRequestModal";
-import styles from "./ChatPage.module.scss";
-import type { ChatRoom, ChatRequest } from "../../api/chatApi";
-
-const ChatPage = () => {
-  const navigate = useNavigate();
-  const user = useUserInfo();
-  const {
-    directRooms,
-    groupRooms,
-    receivedRequests,
-    sentRequests,
-    isLoading,
-    isConnected,
-    loadDirectRooms,
-    loadGroupRooms,
-    loadReceivedRequests,
-    loadSentRequests,
-    sendChatRequestAction,
-    approveRequest,
-    rejectRequest,
-    cancelRequest,
-  } = useChat();
-
-  const [selectedTab, setSelectedTab] = useState<
-    "individual" | "group" | "received" | "sent"
-  >("individual");
-  const [searchText, setSearchText] = useState("");
-  const [newMessage, setNewMessage] = useState("");
-  const [selectedRoomId, setSelectedRoomId] = useState<number | null>(null);
-  const [isChatRequestModalOpen, setIsChatRequestModalOpen] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  // 로그인하지 않은 사용자는 로그인 페이지로 리다이렉트
-  useEffect(() => {
-    if (!user.isLogin) {
-      navigate("/login", { replace: true });
-    }
-  }, [user.isLogin, navigate]);
-
-  // 스크롤을 맨 아래로 이동
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, []);
-
-  // 메시지 전송
-  const handleSendMessage = () => {
-    if (newMessage.trim() && selectedRoomId) {
-      // WebSocket을 통해 메시지 전송
-      setNewMessage("");
-    }
-  };
-
-  // Enter 키로 메시지 전송
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSendMessage();
-    }
-  };
-
-  // 채팅 요청 처리
-  const handleApproveRequest = async (requestId: number) => {
-    try {
-      await approveRequest(requestId);
-    } catch (error) {
-      console.error("채팅 요청 승인 실패:", error);
-    }
-  };
-
-  const handleRejectRequest = async (requestId: number) => {
-    try {
-      await rejectRequest(requestId);
-    } catch (error) {
-      console.error("채팅 요청 거절 실패:", error);
-    }
-  };
-
-  const handleCancelRequest = async (requestId: number) => {
-    try {
-      await cancelRequest(requestId);
-    } catch (error) {
-      console.error("채팅 요청 취소 실패:", error);
-    }
-  };
-
-  const handleSendChatRequest = async (receiverId: number, message: string) => {
-    try {
-      await sendChatRequestAction(receiverId, message);
-    } catch (error) {
-      console.error("채팅 요청 전송 실패:", error);
-      throw error;
-    }
-  };
-
-  // 로그인하지 않은 사용자인 경우 아무것도 렌더링하지 않음
-  if (!user.isLogin) {
-    return null;
-  }
-
-  // 필터링된 채팅방 목록 (안전 처리 추가)
-  const filteredDirectRooms = Array.isArray(directRooms)
-    ? directRooms.filter((room) =>
-        room.name.toLowerCase().includes(searchText.toLowerCase())
-      )
-    : [];
-
-  const filteredGroupRooms = Array.isArray(groupRooms)
-    ? groupRooms.filter((room) =>
-        room.name.toLowerCase().includes(searchText.toLowerCase())
-      )
-    : [];
-
-  const filteredReceivedRequests = Array.isArray(receivedRequests)
-    ? receivedRequests.filter((request) =>
-        request.message.toLowerCase().includes(searchText.toLowerCase())
-      )
-    : [];
-
-  const filteredSentRequests = Array.isArray(sentRequests)
-    ? sentRequests.filter((request) =>
-        request.message.toLowerCase().includes(searchText.toLowerCase())
-      )
-    : [];
-
-  return (
-    <div className={styles["chat-page"]}>
-      <Header title="채팅" type="main" hasBackButton={true} />
-
-      <div className={styles["chat-container"]}>
-        {/* 탭 네비게이션 */}
-        <div className={styles["tab-navigation"]}>
-          <button
-            className={`${styles["tab-button"]} ${
-              selectedTab === "individual" ? styles["active"] : ""
-            }`}
-            onClick={() => setSelectedTab("individual")}
-          >
-            1:1 채팅
-          </button>
-          <button
-            className={`${styles["tab-button"]} ${
-              selectedTab === "group" ? styles["active"] : ""
-            }`}
-            onClick={() => setSelectedTab("group")}
-          >
-            단체 채팅
-          </button>
-          <button
-            className={`${styles["tab-button"]} ${
-              selectedTab === "received" ? styles["active"] : ""
-            }`}
-            onClick={() => setSelectedTab("received")}
-          >
-            받은 요청
-          </button>
-          <button
-            className={`${styles["tab-button"]} ${
-              selectedTab === "sent" ? styles["active"] : ""
-            }`}
-            onClick={() => setSelectedTab("sent")}
-          >
-            보낸 요청
-          </button>
-        </div>
-
-        {/* 검색바 및 채팅 요청 버튼 */}
-        <div className={styles["search-container"]}>
-          <div className={styles["search-wrapper"]}>
-            <input
-              type="text"
-              placeholder="채팅방 또는 연락처 검색"
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              className={styles["search-input"]}
-            />
-            <button
-              className={styles["new-chat-button"]}
-              onClick={() => setIsChatRequestModalOpen(true)}
-            >
-              새 채팅
-            </button>
-          </div>
-        </div>
-
-        {/* 1:1 채팅 목록 */}
-        {selectedTab === "individual" && (
-          <div className={styles["chat-rooms"]}>
-            {isLoading ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>⏳</div>
-                <h3>로딩 중...</h3>
-              </div>
-            ) : filteredDirectRooms.length === 0 ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>💬</div>
-                <h3>1:1 채팅이 없습니다</h3>
-                <p>새로운 1:1 대화를 시작해보세요</p>
-              </div>
-            ) : (
-              filteredDirectRooms.map((room) => (
-                <div key={room.id} className={styles["chat-room-item"]}>
-                  <div className={styles["room-avatar"]}>
-                    <img
-                      src={
-                        room.participants[0]?.profileImage ||
-                        "/profile_imgSrc.jpg"
-                      }
-                      alt={room.name}
-                    />
-                  </div>
-                  <div className={styles["room-info"]}>
-                    <div className={styles["room-header"]}>
-                      <h4>{room.name}</h4>
-                      <span className={styles["last-time"]}>
-                        {room.lastMessageTime}
-                      </span>
-                    </div>
-                    <div className={styles["room-footer"]}>
-                      <p className={styles["last-message"]}>
-                        {room.lastMessage || "메시지가 없습니다"}
-                      </p>
-                      {room.unreadCount > 0 && (
-                        <span className={styles["unread-count"]}>
-                          {room.unreadCount}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        )}
-
-        {/* 단체 채팅 목록 */}
-        {selectedTab === "group" && (
-          <div className={styles["chat-rooms"]}>
-            {isLoading ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>⏳</div>
-                <h3>로딩 중...</h3>
-              </div>
-            ) : filteredGroupRooms.length === 0 ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>👥</div>
-                <h3>단체 채팅이 없습니다</h3>
-                <p>단체 채팅방을 만들어보세요</p>
-              </div>
-            ) : (
-              filteredGroupRooms.map((room) => (
-                <div key={room.id} className={styles["chat-room-item"]}>
-                  <div className={styles["room-avatar"]}>
-                    <img src="/profile_imgSrc.jpg" alt={room.name} />
-                  </div>
-                  <div className={styles["room-info"]}>
-                    <div className={styles["room-header"]}>
-                      <h4>{room.name}</h4>
-                      <span className={styles["last-time"]}>
-                        {room.lastMessageTime}
-                      </span>
-                    </div>
-                    <div className={styles["room-footer"]}>
-                      <p className={styles["last-message"]}>
-                        {room.lastMessage || "메시지가 없습니다"}
-                      </p>
-                      {room.unreadCount > 0 && (
-                        <span className={styles["unread-count"]}>
-                          {room.unreadCount}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        )}
-
-        {/* 받은 요청 목록 */}
-        {selectedTab === "received" && (
-          <div className={styles["chat-rooms"]}>
-            {isLoading ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>⏳</div>
-                <h3>로딩 중...</h3>
-              </div>
-            ) : filteredReceivedRequests.length === 0 ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>📥</div>
-                <h3>받은 요청이 없습니다</h3>
-                <p>다른 사용자의 채팅 요청을 기다려보세요</p>
-              </div>
-            ) : (
-              filteredReceivedRequests.map((request) => (
-                <div key={request.id} className={styles["chat-room-item"]}>
-                  <div className={styles["room-avatar"]}>
-                    <img src="/profile_imgSrc.jpg" alt="요청자" />
-                  </div>
-                  <div className={styles["room-info"]}>
-                    <div className={styles["room-header"]}>
-                      <h4>채팅 요청</h4>
-                      <span className={styles["last-time"]}>
-                        {new Date(request.createdAt).toLocaleDateString()}
-                      </span>
-                    </div>
-                    <div className={styles["room-footer"]}>
-                      <p className={styles["last-message"]}>
-                        {request.message}
-                      </p>
-                      <div style={{ display: "flex", gap: "8px" }}>
-                        <button
-                          onClick={() => handleApproveRequest(request.id)}
-                          style={{
-                            padding: "4px 8px",
-                            fontSize: "12px",
-                            backgroundColor: "#2773e6",
-                            color: "white",
-                            border: "none",
-                            borderRadius: "4px",
-                            cursor: "pointer",
-                          }}
-                        >
-                          승인
-                        </button>
-                        <button
-                          onClick={() => handleRejectRequest(request.id)}
-                          style={{
-                            padding: "4px 8px",
-                            fontSize: "12px",
-                            backgroundColor: "#ff4757",
-                            color: "white",
-                            border: "none",
-                            borderRadius: "4px",
-                            cursor: "pointer",
-                          }}
-                        >
-                          거절
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        )}
-
-        {/* 보낸 요청 목록 */}
-        {selectedTab === "sent" && (
-          <div className={styles["chat-rooms"]}>
-            {isLoading ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>⏳</div>
-                <h3>로딩 중...</h3>
-              </div>
-            ) : filteredSentRequests.length === 0 ? (
-              <div className={styles["empty-state"]}>
-                <div className={styles["empty-icon"]}>📤</div>
-                <h3>보낸 요청이 없습니다</h3>
-                <p>채팅 요청을 보내보세요</p>
-              </div>
-            ) : (
-              filteredSentRequests.map((request) => (
-                <div key={request.id} className={styles["chat-room-item"]}>
-                  <div className={styles["room-avatar"]}>
-                    <img src="/profile_imgSrc.jpg" alt="수신자" />
-                  </div>
-                  <div className={styles["room-info"]}>
-                    <div className={styles["room-header"]}>
-                      <h4>채팅 요청</h4>
-                      <span className={styles["last-time"]}>
-                        {new Date(request.createdAt).toLocaleDateString()}
-                      </span>
-                    </div>
-                    <div className={styles["room-footer"]}>
-                      <p className={styles["last-message"]}>
-                        {request.message}
-                      </p>
-                      <div style={{ display: "flex", gap: "8px" }}>
-                        <span style={{ fontSize: "12px", color: "#666" }}>
-                          {request.status === "PENDING" && "대기 중"}
-                          {request.status === "APPROVED" && "승인됨"}
-                          {request.status === "REJECTED" && "거절됨"}
-                        </span>
-                        {request.status === "PENDING" && (
-                          <button
-                            onClick={() => handleCancelRequest(request.id)}
-                            style={{
-                              padding: "4px 8px",
-                              fontSize: "12px",
-                              backgroundColor: "#ff4757",
-                              color: "white",
-                              border: "none",
-                              borderRadius: "4px",
-                              cursor: "pointer",
-                            }}
-                          >
-                            취소
-                          </button>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        )}
-
-        {/* 메시지 입력 영역 */}
-        <div className={styles["message-input-container"]}>
-          <div className={styles["message-input-wrapper"]}>
-            <input
-              type="text"
-              placeholder="메시지를 입력하세요..."
-              value={newMessage}
-              onChange={(e) => setNewMessage(e.target.value)}
-              onKeyPress={handleKeyPress}
-              className={styles["message-input"]}
-            />
-            <button
-              onClick={handleSendMessage}
-              className={styles["send-button"]}
-              disabled={!newMessage.trim() || !selectedRoomId}
-            >
-              전송
-            </button>
-          </div>
-        </div>
-
-        {/* 채팅 요청 모달 */}
-        <ChatRequestModal
-          isOpen={isChatRequestModalOpen}
-          onClose={() => setIsChatRequestModalOpen(false)}
-          onSendRequest={handleSendChatRequest}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ChatPage;
diff --git a/src/pages/my-pages/MyPage.tsx b/src/pages/my-pages/MyPage.tsx
index 4fff8c3..713f2f7 100644
--- a/src/pages/my-pages/MyPage.tsx
+++ b/src/pages/my-pages/MyPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useUserInfo } from "../../stores/userStore";
 
@@ -158,25 +158,31 @@ const ApartmentSection = () => {
 
   const registerApart = () => {
     navigate("/register-my-apart-info");
-  }
+  };
 
   return (
     <>
-      {
-        user.apartmentID == null?
+      {user.apartmentId == null ? (
         <div className={styles["non-apartment"]}>
           <div className={styles["non-apartment__card"]}>
             <img src={LogoIcon} />
             <p>등록된 단지가 없습니다.</p>
           </div>
           <div className={styles["non-apartment__div-btn"]}>
-            <button className={`${styles["apartment__btn"]} ${styles["apartment__btn--unregister"]}`} onClick={registerApart}>단지 등록</button>
+            <button
+              className={`${styles["apartment__btn"]} ${styles["apartment__btn--unregister"]}`}
+              onClick={registerApart}
+            >
+              단지 등록
+            </button>
           </div>
         </div>
-        :
+      ) : (
         <div className={styles["apartment"]}>
           <div className={styles["apartment__header"]}>
-            <h3 className={styles["apartment__title"]}>{user.nickname}의 아파트</h3>
+            <h3 className={styles["apartment__title"]}>
+              {user.nickname}의 아파트
+            </h3>
             <button className={styles["apartment__edit-btn"]}>수정</button>
           </div>
 
@@ -187,24 +193,28 @@ const ApartmentSection = () => {
               className={styles["apartment__image"]}
             />
             <div className={styles["apartment__info"]}>
-              <h4 className={styles["apartment__name"]}>{user.apartmentName}</h4>
+              <h4 className={styles["apartment__name"]}>
+                {user.apartmentName}
+              </h4>
               <p className={styles["apartment__address"]}>{user.location}</p>
-              <p className={styles["apartment__unit"]}>{user.uint}</p>
+              <p className={styles["apartment__unit"]}>{user.unit}</p>
             </div>
           </div>
 
           <div className={styles["apartment__actions"]}>
             <button
-              className={`${styles["apartment__btn"]} ${styles["apartment__btn--unregister"]}`}>
+              className={`${styles["apartment__btn"]} ${styles["apartment__btn--unregister"]}`}
+            >
               등록해제
             </button>
             <button
-              className={`${styles["apartment__btn"]} ${styles["apartment__btn--goto"]}`}>
+              className={`${styles["apartment__btn"]} ${styles["apartment__btn--goto"]}`}
+            >
               바로가기
             </button>
           </div>
         </div>
-      }
+      )}
     </>
   );
 };
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 19ca4a6..c66f236 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -12,10 +12,10 @@ import { ResetPasswordPage } from "../pages/find-info/resetPasswordPage";
 import { MainPage } from "../pages/main/MainPage";
 import RegisterMyApart from "../pages/register-my-apart-info/registerMyApartInfo";
 
-import MyPage from "../pages/my-pages/MyPage";
 import { SettingsRoutes } from "./SettingsRoutes";
+
+import MyPage from "../pages/my-pages/MyPage";
 import Settings from "../pages/settings/Settings";
-import ChatPage from "../pages/chat/ChatPage";
 
 const AppRoutes = () => {
   return (
@@ -42,9 +42,6 @@ const AppRoutes = () => {
         <Route element={<SettingsRoutes />}>
           <Route path="/settings" element={<Settings />} />
         </Route>
-
-        {/* 채팅 라우팅 */}
-        <Route path="/chat" element={<ChatPage />} />
       </Routes>
     </Suspense>
   );
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 6744e01..af0e90a 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -2,13 +2,6 @@ import { create } from "zustand";
 import axios from "axios";
 import { API_ENDPOINTS } from "../api/endpoints";
 
-interface UploadResponse {
-  url: string;
-  filename: string;
-  size: number;
-  profileImageUrl?: string;
-}
-
 interface MemberProfileUpdateResponse {
   uploadResponse: any;
   userInfo: any;
@@ -23,38 +16,29 @@ interface ImageCompressionOptions {
 }
 
 interface IUserInfoBase {
-  // 사용자 데이터
-  apartmentID?: string | null;
-  apartmentName?: string| null;
-  building?: string| null;
+  // 사용자 기본 데이터
   email: string;
   password: string;
-  fileID?: string| null;
-  location?: string| null;
-  memberApartmentID?: string| null;
-  moveInDate?: string| null;
-  name?: string| null;
-  nickname?: string| null;
-  phoneNumber?: string| null;
-  region?: string| null;
-  uint?: string
-
-  // 사용자 데이터 받아온 이후 정해지는 것들
+  name?: string | null;
+  nickname?: string | null;
+  phoneNumber?: string | null;
+
+  // 로그인/오류 상태
   isLogin: boolean;
   error: string;
 
   // 아파트 정보
-  apartmentId: null;
-  apartmentName: null | string;
-  building: null;
-  carNumber: null | number;
-  fileId: null | string | number;
+  apartmentId: string | number | null;
+  apartmentName: string | null;
+  building: string | null;
+  carNumber: number | null;
+  fileId: string | number | null;
   location: string | null;
   memberApartmentId: number | null;
-  moveInDate: null | string;
+  moveInDate: string | null;
   numberOfResidents: number | null;
   region: string | null;
-  unit: null;
+  unit: string | null;
 
   // 파일 업로드 관련 (최적화됨)
   profileImage: string;
@@ -73,17 +57,17 @@ interface IUserInfoBase {
   setError: (error: string) => void;
 
   // 아파트 정보 setter 함수들
-  setApartmentId: (apartmentId: null) => void;
-  setApartmentName: (apartmentName: null | string) => void;
-  setBuilding: (building: null) => void;
-  setCarNumber: (carNumber: null | number) => void;
-  setFileId: (fileId: null | string | number) => void;
+  setApartmentId: (apartmentId: string | number | null) => void;
+  setApartmentName: (apartmentName: string | null) => void;
+  setBuilding: (building: string | null) => void;
+  setCarNumber: (carNumber: number | null) => void;
+  setFileId: (fileId: string | number | null) => void;
   setLocation: (location: string | null) => void;
   setMemberApartmentId: (memberApartmentId: number | null) => void;
-  setMoveInDate: (moveInDate: null | string) => void;
+  setMoveInDate: (moveInDate: string | null) => void;
   setNumberOfResidents: (numberOfResidents: number | null) => void;
   setRegion: (region: string | null) => void;
-  setUnit: (unit: null) => void;
+  setUnit: (unit: string | null) => void;
 
   // 파일 업로드 관련 setter 함수들 (최적화됨)
   setProfileImage: (imageUrl: string) => void;
@@ -353,12 +337,17 @@ export const useUserInfo = create<IUserInfoBase>((set, get) => ({
     const tryUpload = async (method: "blob" | "string" | "separate") => {
       const formData = new FormData();
 
-      const requestDto = {
-        password: memberData.password || "",
-        name: memberData.name || "",
-        nickname: memberData.nickname || "",
-        phoneNumber: memberData.phoneNumber || "",
-      };
+      // 비밀번호를 포함하여 빈 문자열은 보내지 않도록 동적으로 DTO 구성
+      const requestDto: Record<string, string> = {};
+      if (typeof memberData.name === "string")
+        requestDto.name = memberData.name;
+      if (typeof memberData.nickname === "string")
+        requestDto.nickname = memberData.nickname;
+      if (typeof memberData.phoneNumber === "string")
+        requestDto.phoneNumber = memberData.phoneNumber;
+      // 비밀번호는 사용자가 입력한 경우에만 포함
+      if (memberData.password && memberData.password.trim().length > 0)
+        requestDto.password = memberData.password;
 
       switch (method) {
         case "blob":
@@ -435,15 +424,23 @@ export const useUserInfo = create<IUserInfoBase>((set, get) => ({
       let lastError;
 
       console.log("FormData 구성:");
-      console.log(
-        "- requestDto:",
-        JSON.stringify({
-          password: memberData.password || "",
-          name: memberData.name || "",
-          nickname: memberData.nickname || "",
-          phoneNumber: memberData.phoneNumber || "",
-        })
-      );
+      const requestDtoLog = {
+        ...(typeof memberData.name === "string" && memberData.name.trim() !== ""
+          ? { name: memberData.name }
+          : {}),
+        ...(typeof memberData.nickname === "string" &&
+        memberData.nickname.trim() !== ""
+          ? { nickname: memberData.nickname }
+          : {}),
+        ...(typeof memberData.phoneNumber === "string" &&
+        memberData.phoneNumber.trim() !== ""
+          ? { phoneNumber: memberData.phoneNumber }
+          : {}),
+        ...(memberData.password && memberData.password.trim().length > 0
+          ? { password: "****" }
+          : {}),
+      } as Record<string, string>;
+      console.log("- requestDto:", JSON.stringify(requestDtoLog));
       if (finalProfileFile) {
         console.log(
           "- multipartFile:",