diff --git a/src/main/java/com/springles/controller/api/ChatRoomController.java b/src/main/java/com/springles/controller/api/ChatRoomController.java
index 91539339..d4fea4c9 100644
--- a/src/main/java/com/springles/controller/api/ChatRoomController.java
+++ b/src/main/java/com/springles/controller/api/ChatRoomController.java
@@ -8,6 +8,8 @@
 import com.springles.domain.dto.member.MemberCreateRequest;
 import com.springles.domain.dto.member.MemberInfoResponse;
 import com.springles.domain.dto.response.ResResult;
+import com.springles.exception.CustomException;
+import com.springles.exception.constants.ErrorCode;
 import com.springles.jwt.JwtTokenUtils;
 import com.springles.service.ChatRoomService;
 import com.springles.service.CookieService;
@@ -21,6 +23,8 @@
 import org.springframework.web.bind.annotation.*;
 import org.springframework.security.core.Authentication;
 
+import java.util.List;
+
 @RestController
 @RequiredArgsConstructor
 @RequestMapping("v1")
@@ -41,8 +45,8 @@ public ResponseEntity<ResResult> createChatRoom(@Valid @RequestBody ChatRoomReqD
         Long id = info.getId();
         String memberName = info.getMemberName();
 
-        log.info("MemberCreateRequest.getMemberName() = {}",((MemberCreateRequest) auth.getPrincipal()).getMemberName()); // 인증 된 멤버 이름
-        log.info("MemberCreateRequest.isAuthenticated() = {}", auth.isAuthenticated()); // 인증 되었다면 true
+//        log.info("MemberCreateRequest.getMemberName() = {}",((MemberCreateRequest) auth.getPrincipal()).getMemberName()); // 인증 된 멤버 이름
+//        log.info("MemberCreateRequest.isAuthenticated() = {}", auth.isAuthenticated()); // 인증 되었다면 true
 
         // 응답 메시지 return
         ResponseCode responseCode = ResponseCode.CHATROOM_CREATE;
@@ -54,35 +58,63 @@ public ResponseEntity<ResResult> createChatRoom(@Valid @RequestBody ChatRoomReqD
                 .build(), HttpStatus.OK);
     }
 
-    /**
-     /chatrooms?title={title}
-     /chatrooms?nickname={nickname}
-     */
-    @GetMapping(value = "/chatrooms")
-    public ResponseEntity<ResResult> searchChatRooms(@RequestParam(value = "title", required = false) String title,
-                                                     @RequestParam(value = "nickname", required = false) String nickname) {
-
+    // 채팅방 단일 조회
+    @GetMapping(value="/chatroom/{roomId}")
+    public ResponseEntity<ResResult> readChatRoom(
+            @PathVariable Long roomId
+    ){
 
-        Object chatRooms = null;
+        ResponseCode responseCode = ResponseCode.CHATROOM_READ;
 
-        // title 로 검색
-        if (title != null) { chatRooms = chatRoomService.findChatRoomByTitle(title);}
-
-        // 방장 이름으로 검색
-        else if (nickname != null) { chatRooms = chatRoomService.findChatRoomByNickname(nickname); }
+        return new ResponseEntity<>(
+                ResResult.builder()
+                        .responseCode(responseCode)
+                        .code(responseCode.getCode())
+                        .message(responseCode.getMessage())
+                        .data(chatRoomService.findChatRoomByChatRoomId(roomId))
+                        .build(), HttpStatus.OK);
+    }
 
-        // 대기중인 모든 채팅방
-        else { chatRooms = chatRoomService.findAllChatRooms(); }
+    // 채팅방 전체 조회
+    @GetMapping(value = "/chatrooms")
+    public ResponseEntity<ResResult> readChatRooms() {
 
-        ResponseCode responseCode = ResponseCode.CHATROOM_SEARCH;
+        ResponseCode responseCode = ResponseCode.CHATROOM_READ;
 
         return new ResponseEntity<>(
                 ResResult.builder()
                         .responseCode(responseCode)
                         .code(responseCode.getCode())
                         .message(responseCode.getMessage())
-                        .data(chatRooms)
+                        .data(chatRoomService.findAllChatRooms())
                         .build(), HttpStatus.OK);
+
+    }
+
+    /**
+     /chatrooms?title={title}
+     /chatrooms?nickname={nickname}
+     */
+    // 채팅방 검색
+    @GetMapping(value = "/chatroom/search")
+    public ResponseEntity<?> searchChatRooms(
+            @RequestParam(value = "content", required = false, defaultValue = "") String content
+    ) {
+        ResponseCode responseCode = ResponseCode.CHATROOM_SEARCH;
+        return new ResponseEntity<>(
+            ResResult.builder()
+                    .responseCode(responseCode)
+                    .code(responseCode.getCode())
+                    .message(responseCode.getMessage())
+                    .data(chatRoomService.findAllByTitleAndNickname(content))
+                    .build(), HttpStatus.OK);
+
+//            // 일치하는 방이 하나도 없을 때
+////            model.addAttribute("errorMessage", String.format("'%s'에 해당하는 유저 또는 방을 찾지 못해 전체 목록을 불러옵니다.",searchContent));
+//            // 전체 채팅 목록 불러오기
+//            List<ChatRoomResponseDto> allChatRooms = chatRoomService.findAllChatRooms();
+////            model.addAttribute("allChatRooms", allChatRooms);
+//        }
     }
 
     // 채팅방 수정
diff --git a/src/main/java/com/springles/controller/api/MemberController.java b/src/main/java/com/springles/controller/api/MemberController.java
index 8bc979b9..edfb981b 100644
--- a/src/main/java/com/springles/controller/api/MemberController.java
+++ b/src/main/java/com/springles/controller/api/MemberController.java
@@ -22,6 +22,21 @@ public class MemberController {
     private final MemberService memberService;
     private final CookieService cookieService;
 
+    // 멤버 정보 조회
+    @GetMapping("/info")
+    public ResponseEntity<ResResult> profileInfo(HttpServletRequest request) {
+        // 멤버 정보 가져오기
+        String accessToken = (String)request.getAttribute("accessToken");
+        ResponseCode responseCode = ResponseCode.MEMBER_DETAIL;
+        return ResponseEntity.ok(
+                ResResult.builder()
+                        .responseCode(responseCode)
+                        .code(responseCode.getCode())
+                        .message(responseCode.getMessage())
+                        .data(memberService.getUserSimpleProfileInfo(accessToken))
+                        .build());
+    }
+
     // 회원가입
     @PostMapping("/signup")
     public ResponseEntity<ResResult> signup(
diff --git a/src/main/java/com/springles/controller/ui/ChatRoomUiController.java b/src/main/java/com/springles/controller/ui/ChatRoomUiController.java
index e0410401..01913b3b 100644
--- a/src/main/java/com/springles/controller/ui/ChatRoomUiController.java
+++ b/src/main/java/com/springles/controller/ui/ChatRoomUiController.java
@@ -1,6 +1,7 @@
 package com.springles.controller.ui;
 
 
+import com.springles.controller.api.MemberController;
 import com.springles.domain.dto.chatroom.ChatRoomReqDTO;
 import com.springles.domain.dto.chatroom.ChatRoomResponseDto;
 import com.springles.domain.dto.member.MemberInfoResponse;
@@ -26,7 +27,6 @@
 @Slf4j
 public class ChatRoomUiController {
 
-    private final MemberUiController memberUiController;
     private final ChatRoomService chatRoomService;
     private final CookieService cookieService;
 
@@ -38,39 +38,7 @@ public String chatroom() {
 
     // 채팅방 목록 페이지 (전체 조회)
     @GetMapping("index")
-    public String chatRoomList(Model model,
-                               HttpServletRequest request,
-                               @RequestParam(value = "search-content", required = false, defaultValue = "") String searchContent
-    ) {
-        // 목록 전체 조회
-        String accessToken = cookieService.atkFromCookie(request);
-
-        // 회원 정보 호출
-//        MemberInfoResponse info = memberUiController.info(accessToken);
-        // 회원 프로필 정보 호출
-        MemberProfileResponse profileInfo = memberUiController.profileInfo(accessToken);
-        model.addAttribute("member",profileInfo);
-        // 채팅방 검색
-        try {
-            List<ChatRoomResponseDto> allByTitleAndNickname = chatRoomService.findAllByTitleAndNickname(searchContent);
-            model.addAttribute("allChatRooms", allByTitleAndNickname);
-
-        } catch (CustomException e) {
-
-            // 검색어가 비어있다면
-            if (searchContent.isBlank()) {
-                model.addAttribute("errorMessage", e.getMessage());
-            }
-
-            // 검색어가 비어 있지 않고 방을 찾지 못했을 때
-            else{
-                model.addAttribute("errorMessage", String.format("'%s'에 해당하는 유저 또는 방을 찾지 못해 전체 목록을 불러옵니다.",searchContent) );
-            }
-
-            List<ChatRoomResponseDto> allChatRooms = chatRoomService.findAllChatRooms();
-            model.addAttribute("allChatRooms", allChatRooms);
-        }
-
+    public String chatRoomList() {
         return "home/index";
     }
 }
diff --git a/src/main/java/com/springles/controller/ui/ChatUiController.java b/src/main/java/com/springles/controller/ui/ChatUiController.java
index 066c42d5..cb5d1cb2 100644
--- a/src/main/java/com/springles/controller/ui/ChatUiController.java
+++ b/src/main/java/com/springles/controller/ui/ChatUiController.java
@@ -122,12 +122,9 @@ public String quickEnterRoom( HttpServletRequest request, Model model){
             model.addAttribute("nextUrl", String.format("/v1/add"));
             return "check/confirm";
         }
-
-
     }
 
 
-
     // url 공유 하기 버튼
     @GetMapping("{roomId}/detail")
     public String roomDetails(@PathVariable("roomId") Long id , Model model){
diff --git a/src/main/java/com/springles/controller/ui/MemberUiController.java b/src/main/java/com/springles/controller/ui/MemberUiController.java
index bf2c832e..d318f785 100644
--- a/src/main/java/com/springles/controller/ui/MemberUiController.java
+++ b/src/main/java/com/springles/controller/ui/MemberUiController.java
@@ -11,14 +11,13 @@
 import jakarta.servlet.http.Cookie;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
-import jakarta.validation.Valid;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
-import org.springframework.web.servlet.view.RedirectView;
+
 
 @Controller
 @RequestMapping("v1")
@@ -43,7 +42,6 @@ public String loginPage(Model model, MemberLoginRequest memberDto) {
         return "member/login";
     }
 
-
     // 아이디 찾기 페이지 조회
     @GetMapping("/vertification-id")
     public String vertificationId() {
diff --git a/src/main/java/com/springles/domain/constants/ResponseCode.java b/src/main/java/com/springles/domain/constants/ResponseCode.java
index 7bddde77..5d601856 100644
--- a/src/main/java/com/springles/domain/constants/ResponseCode.java
+++ b/src/main/java/com/springles/domain/constants/ResponseCode.java
@@ -15,6 +15,7 @@ public enum ResponseCode {
     CHATROOM_UPDATE(HttpStatus.CREATED, "201", "채팅방 수정 성공"),
     CHATROOM_DELETE(HttpStatus.NO_CONTENT, "201", "채팅방 삭제 성공"),
     CHATROOM_SEARCH(HttpStatus.OK,"200", "채팅방 검색 완료"),
+    CHATROOM_READ(HttpStatus.OK,"200", "채팅방 조회 완료"),
 
     /* AUTH */
     MEMBER_SAVE(HttpStatus.CREATED, "201", "회원가입 성공"),
diff --git a/src/main/java/com/springles/domain/dto/member/MemberSimpleProfileResponse.java b/src/main/java/com/springles/domain/dto/member/MemberSimpleProfileResponse.java
new file mode 100644
index 00000000..3c7ad39a
--- /dev/null
+++ b/src/main/java/com/springles/domain/dto/member/MemberSimpleProfileResponse.java
@@ -0,0 +1,31 @@
+package com.springles.domain.dto.member;
+
+import com.springles.domain.constants.GameRole;
+import com.springles.domain.constants.Level;
+import com.springles.domain.constants.ProfileImg;
+import com.springles.domain.entity.MemberGameInfo;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+
+@Getter
+@Builder
+@AllArgsConstructor
+@RequiredArgsConstructor
+public class MemberSimpleProfileResponse {
+    private String nickname;    // 게임 닉네임
+    private String profileImg;
+    private Level level; // 유저 레벨
+    private Long memberId;
+
+    public static MemberSimpleProfileResponse of(MemberGameInfo memberGameInfo, Long memberId) {
+        return MemberSimpleProfileResponse.builder()
+                .memberId(memberId)
+                .nickname(memberGameInfo.getNickname())
+                .profileImg(memberGameInfo.getProfileImg().getFileUrl())
+                .level(memberGameInfo.getLevel())
+                .build();
+    }
+
+}
diff --git a/src/main/java/com/springles/exception/constants/ErrorCode.java b/src/main/java/com/springles/exception/constants/ErrorCode.java
index f0a8e55b..4f1fe651 100644
--- a/src/main/java/com/springles/exception/constants/ErrorCode.java
+++ b/src/main/java/com/springles/exception/constants/ErrorCode.java
@@ -43,6 +43,7 @@ public enum ErrorCode {
     NOT_FOUND_ROOM(HttpStatus.NOT_FOUND, "방을 찾을 수 없습니다."),
     USER_NOT_OWNER(HttpStatus.UNAUTHORIZED, "수정 권한이 없습니다."),
     NOT_FOUND_QUICK_ENTRY_ROOM(HttpStatus.NOT_FOUND, "빠른 입장이 가능한 방을 찾을 수 없습니다."),
+    EMTPY_KEYWORD(HttpStatus.BAD_REQUEST, "검색어가 비어있습니다."),
 
     /* MEMBER */
     MEMBER_NOT_FOUND(HttpStatus.NOT_FOUND, "등록되지 않은 회원입니다."),
diff --git a/src/main/java/com/springles/service/MemberService.java b/src/main/java/com/springles/service/MemberService.java
index ce783685..72b4ba71 100644
--- a/src/main/java/com/springles/service/MemberService.java
+++ b/src/main/java/com/springles/service/MemberService.java
@@ -14,6 +14,9 @@ public interface MemberService {
     // 사용자 정보 API
     MemberInfoResponse getUserInfo(String accessToken);
 
+    // 메인페이지 사용자 프로필 정보 호출
+    MemberSimpleProfileResponse getUserSimpleProfileInfo(String accessToken);
+
     MemberInfoResponse findUserByName(String memberName);
 
     // 사용자 프로필 정보 호출
diff --git a/src/main/java/com/springles/service/impl/ChatRoomServiceImpl.java b/src/main/java/com/springles/service/impl/ChatRoomServiceImpl.java
index 6535d87e..0a00a1d7 100644
--- a/src/main/java/com/springles/service/impl/ChatRoomServiceImpl.java
+++ b/src/main/java/com/springles/service/impl/ChatRoomServiceImpl.java
@@ -74,7 +74,6 @@ public List<ChatRoomResponseDto> findAllByCloseFalseAndState() {
      */
     @Override
     public List<ChatRoomResponseDto> findAllChatRooms() {
-
         List<ChatRoom> findAllChatRooms = chatRoomJpaRepository.findAll();
         return findAllChatRooms.stream().map(ChatRoomResponseDto::of).toList();
 
@@ -205,7 +204,7 @@ public List<ChatRoomResponseDto> findAllByTitleAndNickname(String searchContent)
 
         List<ChatRoomResponseDto> list = new ArrayList<>();
 
-        // 만약 검색어가 없다면 NO_CONTENT 반환
+        // 검색어가 비어 있는 경우
         if (searchContent.isEmpty()) {
             throw new CustomException(ErrorCode.NO_CONTENT);
         }
@@ -216,13 +215,13 @@ public List<ChatRoomResponseDto> findAllByTitleAndNickname(String searchContent)
         list.addAll(chatRoomByTitle);
         list.addAll(chatRoomByNickname);
 
-        // 검색 결과가 비어있다면 NOT_FOUND_ROOM 반환
+        //  검색 결과 일치하는 채팅방이 없는 경우 ''에 대한 검색 결과는 없습니다.
         if (list.isEmpty()) {
             throw new CustomException(ErrorCode.NOT_FOUND_ROOM);
         }
 
+        // 검색 결과 반환
         return list.stream().distinct().toList();
-
     }
 
     // 채팅방 입장 시 채팅 정보 받아오기
diff --git a/src/main/java/com/springles/service/impl/MemberServiceImpl.java b/src/main/java/com/springles/service/impl/MemberServiceImpl.java
index 62bc03bf..08391931 100644
--- a/src/main/java/com/springles/service/impl/MemberServiceImpl.java
+++ b/src/main/java/com/springles/service/impl/MemberServiceImpl.java
@@ -49,12 +49,32 @@ public MemberInfoResponse getUserInfo(String accessToken) {
                 .orElseThrow(() -> new CustomException(ErrorCode.NOT_FOUND_MEMBER)));
     }
 
+
+    /**
+     * 메인페이지 사용자 프로필 간단 정보 조회
+     */
+    public MemberSimpleProfileResponse getUserSimpleProfileInfo(String accessToken) {
+        String memberName = jwtTokenUtils.parseClaims(accessToken).getSubject();
+
+        Optional<Member> optionalMember = memberRepository.findByMemberName(memberName);
+        if(optionalMember.isEmpty()) {
+            throw new CustomException(ErrorCode.NOT_FOUND_MEMBER);
+        }
+
+        Optional<MemberGameInfo> optionalMemberGameInfo = memberGameInfoJpaRepository.findByMemberId(optionalMember.get().getId());
+
+        return MemberSimpleProfileResponse.of(optionalMemberGameInfo.get(), optionalMember.get().getId());
+    }
+
+
+
     @Override
     public MemberInfoResponse findUserByName(String memberName) {
         return MemberInfoResponse.of(memberRepository.findByMemberName(memberName)
             .orElseThrow(() -> new CustomException(ErrorCode.NOT_FOUND_MEMBER)));
     }
 
+
     /**
      * 사용자 프로필 정보 반환
      */
diff --git a/src/main/resources/static/css/basic.css b/src/main/resources/static/css/basic.css
index f3ba9798..28010b09 100644
--- a/src/main/resources/static/css/basic.css
+++ b/src/main/resources/static/css/basic.css
@@ -3,13 +3,17 @@ html {
     min-height: 100%;
     margin: 0;
 }
+
 body {
-    background-color:#F5F5F5
+    /*background-image : url("../images/mafia.jpg");*/
+    /*background-size : cover;*/
 }
 
 .navbar {
     padding-left: 40px;
     padding-right: 40px;
+    height: 8vh;
+    background-color:#F5F5F5
 }
 
 .index-container{
@@ -36,6 +40,8 @@ body {
 .card-header{
     text-align: left;
     background-color:#666666;
+    border-top-left-radius: 14px;
+    border-top-right-radius: 14px;
 }
 
 .form-item {
@@ -46,10 +52,7 @@ body {
 .profile {
     border-radius: 14px;
     border: #666666 solid 1px;
-    /*width: 30vw;*/
     height: 30vh;
-    /*padding: 3px 6px;*/
-    /*background-color: blue;*/
 }
 
 .card-body2 {
@@ -64,7 +67,6 @@ body {
 }
 
 .my_bg {
-    /*background-image: url("../images/profile.png");*/
     background-size: 100% 100%;
     align-items:center;
     justify-content: center;
@@ -134,7 +136,7 @@ body {
 
 .cover {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     margin: 10px;
 }
 
@@ -247,3 +249,6 @@ body {
     width: 70%; /* Could be more or less, depending on screen size */
 }
 
+.password-input {
+
+}
\ No newline at end of file
diff --git a/src/main/resources/static/images/mafia.jpg b/src/main/resources/static/images/mafia.jpg
new file mode 100644
index 00000000..cb848bc6
Binary files /dev/null and b/src/main/resources/static/images/mafia.jpg differ
diff --git a/src/main/resources/templates/chat-room.html b/src/main/resources/templates/chat-room.html
index fec679e1..98fa4a9e 100644
--- a/src/main/resources/templates/chat-room.html
+++ b/src/main/resources/templates/chat-room.html
@@ -169,6 +169,7 @@ <h3>참여자</h3>
     </div>
   </div>
 
+
   <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
   <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
   <script src="/js/stomp.js"></script>
diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
index ae412218..cd184613 100644
--- a/src/main/resources/templates/fragments/header.html
+++ b/src/main/resources/templates/fragments/header.html
@@ -4,20 +4,14 @@
       xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
 
 <div th:fragment="header">
-    <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #666666; height: 10vh;">
-        <!--        <button class="navbar-toggler" type="button" data-toggle="collapse"-->
-        <!--                data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"-->
-        <!--                aria-expanded="false" aria-label="Toggle navigation">-->
-        <!--            <span class="navbar-toggler-icon"></span>-->
-        <!--        </button>-->
-        <a class="navbar-brand" href="/v1/index">Chatfia</a>
-
+    <nav class="navbar navbar-expand-sm">
+        <a class="navbar-brand text-muted" href="/v1/index">Chatfia</a>
         <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
             <ul class="navbar-nav mr-auto mt-2 mt-lg-0"></ul>
             <div class="form-inline my-2 my-lg-0">
                 <div class="nav-item">
-                    <a sec:authorize="isAnonymous()" class="nav-link text-white" href="/v1/login-page">로그인</a>
-                    <a sec:authorize="isAuthenticated()" class="nav-link text-white" href="/v1/my-page">마이페이지</a>
+                    <a sec:authorize="isAnonymous()" class="nav-link text-muted" href="/v1/login-page">로그인</a>
+                    <a sec:authorize="isAuthenticated()" class="nav-link text-muted" href="/v1/my-page">마이페이지</a>
                 </div>
                 <div class="nav-item">
                     <a sec:authorize="isAnonymous()" class="nav-link text-white" href="/v1/signup">회원가입</a>
@@ -44,6 +38,7 @@
                             })
                         </script>
                     </th:block>
+
                 </div>
             </div>
         </div>
diff --git a/src/main/resources/templates/home/index.html b/src/main/resources/templates/home/index.html
index 55b38a84..ac6a9f97 100644
--- a/src/main/resources/templates/home/index.html
+++ b/src/main/resources/templates/home/index.html
@@ -11,16 +11,19 @@
                 <!-----------------------사용자 정보 ----------------------------------------------------------->
                 <div class="card profile">
                     <!---------레벨 ---------->
-                    <div class="card-header text-white" style="border-radius: 14px;" th:text="${member.getLevel()}"></div>
+                    <div class="card-header text-white">
+                        <p id="level"></p>
+                    </div>
                     <div class="card-body2 container row">
                         <!--------- 프로필 사진 -------->
-                        <div class="my_div my_bg col m-3 p-0">
-                            <img class="my_bg_img" id="profileImg" th:src="${member.getProfileImg().getFileUrl()}"
-                                 alt="프로필이미지"/>
+                        <div class="my_div my_bg col m-3 p-3">
+                            <img class="my_bg_img" id="profileImg" alt="프로필이미지"/>
                         </div>
                         <!--------------------- 닉네임 -------->
                         <div class="nick-name-box col p-3">
-                            <div class="nick-name" th:text="${member.getNickname()}"></div>
+                            <div class="nick-name">
+                                <p id="nickName"></p>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -39,105 +42,53 @@
             <div class="col-7 center px-2 m-5">
                 <div class="container row cover">
                     <!------------------ 체크 박스 ------------------------>
-                    <div class="custom-control custom-checkbox my-1 mr-sm-2 check-box">
-                        <input type="checkbox"
-                               id="checkbox"
-                               name="checkbox"
-                               class="custom-control-input form-check-input">
-                        <label class="custom-control-label" for="checkbox">오픈&대기중</label>
-                    </div>
-                    <!------------------- 검색 ------------------------->
-                    <form class="form-inline" th:action="@{/v1/index}" method="get">
+<!--                    <div class="custom-control custom-checkbox my-1 mr-sm-2 check-box">-->
+<!--                        <input type="checkbox"-->
+<!--                               id="checkbox"-->
+<!--                               name="checkbox"-->
+<!--                               class="custom-control-input form-check-input"-->
+<!--                               onclick="chatRoomCheckboxFilter()">-->
+<!--                        <label class="custom-control-label" for="checkbox">오픈&대기중</label>-->
+<!--                    </div>-->
+                    <!------------------- 검색창 ------------------------->
+                    <form class="form-inline">
+                        <!------------------ 리셋 ---------------------------->
+                        <button type="button" class="btn btn-light my-1" onclick="clearButton()">리셋</button>
                         <div class="input-group">
                             <div class="input-group-prepend">
-                                <button class="input-group-text" type="submit">
-                                    <img class="search_thumbnail" src="/images/search.png"/>
-                                </button>
+                                <input class="form-control mr-sm-2" type="text" id="search-content" name="search-content"
+                                       placeholder="nickname or title"/>
+
                             </div>
-                            <input class="form-control mr-sm-2" type="text" id="search-content" name="search-content"
-                                   placeholder="nickname or title"/>
+                            <button class="input-group-text" type="button" onclick="search()">
+                                <img class="search_thumbnail" src="/images/search.png"/>
+                            </button>
                         </div>
-                        <!------------------ 리셋 ---------------------------->
-                        <button type="button" class="btn btn-light my-1" onclick="clearButton()">리셋</button>
                     </form>
                 </div>
                 <!------------------ 메시지 --------------------------->
-                <div th:if="${errorMessage}" id="errorMessage" class="alert alert-danger">
-                    <p th:text="${errorMessage}"></p>
-                </div>
+<!--                <div id="errorMessage" class="alert alert-danger">-->
+<!--                    <p></p>-->
+<!--                </div>-->
+                <!----------------------- 채팅방 목록 ------------------------------------------------------->
+                <div id="display"></div>
 
-                <!------------------ 채팅방 목록 ----------------------->
-                <div class="chat_list_ui" id="chatRoom">
-                    <div th:if="${allChatRooms != null}">
-                        <div th:id="'room_' + ${i.index}" class="list-group" th:each="room, i: ${allChatRooms}">
-                            <a th:href="@{/chat/{roomId}/{nickName} (roomId=${room.id},nickName=${member.getNickname()})}"
-                               th:attrappend="roomId=${room.id},nickName=${member.getNickname()},isClose=${room.getClose()}"
-                               id="chatroom-url" name="chatroom-url"
-                               class="list-group-item list-group-item-action flex-column align-items-start">
-                                <div class="d-flex w-100 justify-content-between">
-                                    <!-----------------게임중 / 대기중 -------------------->
-                                    <span id="state"
-                                          th:text="${room.state}"
-                                          class="badge badge-primary badge-pill"></span>
-                                    <!-----------------비밀방 여부 -------------------->
-                                    <div class="d-flex w-100 justify-content-between">
-                                    <span id="close" th:if="${room.getClose()}">
-                                        <img class="lock_thumbnail" src="/images/lock.png"/>
-                                    </span>
-                                        <span id="open" th:unless="${room.getClose()}">
-                                    </span>
-                                    </div>
-                                </div>
-                                <div class="contaniner row" style="text-align: left">
-                                    <!---------------- 방 제목 ----------------------------->
-                                    <div class="col-11">
-                                        <h5 class="mb-1" th:text="${room.title}"></h5>
-                                    </div>
-                                    <!-----------------참여인원 / 정원 -------------------->
-                                    <div class="col-1">
-                                        <span class="mb-1" th:text="${room.head}"></span>/
-                                        <span class="mb-1" th:text="${room.capacity}"></span>
-                                    </div>
-                                </div>
-                            </a>
-                            <!--------------------비밀방 비밀번호 입력 ----------------------->
-<!--                            <div th:id="'passwordInput_' + ${room.id}" class="password-input" style="display: none;">-->
-<!--                                <input type="text" name="userInput" id="userInput"/>-->
-<!--                                <button type="button" id="password-submit" name="password-submit" class="submit_btn"-->
-<!--                                        th:attr="data-roomId=${room.id},data-nickName=${member.getNickname()},data-isClose=${room.close},data-roomPassword=${room.password}">-->
-<!--                                    확인-->
-<!--                                </button>-->
-<!--                            </div>-->
-                            <!-- Modal -->
-
-                            <!--------------------비밀방 비밀번호 입력 Modal ----------------------->
-                            <div th:id="'passwordInput_' + ${room.id}" id="modal" class="searchModal password-input">
-                                <div class="search-modal-content">
-                                    <div class="page-header">
-                                        <h1>MODAL</h1>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-sm-12">
-                                            <div class="row">
-                                                <div class="col-sm-6">
-                                                    <h5> 비밀번호를 입력하세요.</h5>
-                                                </div>
-                                                <div class="col-sm-6">
-                                                    <div th:id="'passwordInput_' + ${room.id}" class="password-input">
-                                                        <input type="text" name="userInput" id="userInput"/>
-                                                        <button type="button" id="password-submit" name="password-submit" class="submit_btn"
-                                                                th:attr="data-roomId=${room.id},data-nickName=${member.getNickname()},data-isClose=${room.close},data-roomPassword=${room.password}">
-                                                            확인
-                                                        </button>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="btn" onClick="closeModal()">
-            <span class="pop_bt modalCloseBtn">닫기</span>
-                                    </div>
-                                </div>
+                <!-- 비밀방 입장 시 비밀번호 입력 Modal  -->
+                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="exampleModalLabel">비밀방 입장</h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <input type="password" class="form-control" id="userInput" placeholder="비밀번호를 입력하세요.">
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
+                                <button type="button" class="btn btn-primary" name="password-submit">확인</button>
                             </div>
                         </div>
                     </div>
@@ -148,83 +99,167 @@ <h5> 비밀번호를 입력하세요.</h5>
             <th:block layout:fragment="script">
                 <script th:inline="javascript">  // 자바스크립트 인라인
 
-                // Modal 닫기
-                function closeModal() {
-                    $('.searchModal').hide();
-                };
+                // 페이지 로딩 시 동작
+                $(function () {
+                    // 프로필 정보 조회
+                    $.get("/member/info",
+                        function (data) {
+                            $("#level").text(data.data.level);
+                            $("#profileImg").attr("src", data.data.profileImg);
+                            $("#nickName").text(data.data.nickname);
+                        })
+                    });
+                    // 채팅방 전체 목록 조회
+                    $.get("/v1/chatrooms",
+                        function(data) {
+                            chatRoomList(data)
+                    });
 
-                $('#checkbox').on('click', function () {
-                    const checkBtn = document.getElementById('checkbox');
-                    let allChatRooms = [[${allChatRooms}]];
-                    if (allChatRooms.length === 0) return;
-                    allChatRooms = [[${allChatRooms}]];
-                    console.log("allChatRooms : " + allChatRooms);
-                    // 필터를 적용해야하는 경우라면
-                    if (checkBtn.checked) {
+                // 채팅방 입장
+                function enterRoom(chatRoomId, isClose) {
+                    // 비밀방은 비밀번호 입력 Modal
+                    if (isClose === true) {
+                        const modal = document.getElementById("exampleModal");
+                        // modal.style.display = "block";
+                        $("button[name='password-submit']").click(function (event) {
+                            event.preventDefault();
+                            $.ajax({
+                                url: `/v1/chatroom/${chatRoomId}`,
+                                type: 'GET',
+                                success: function(data) {
+                                    const nickName = document.getElementById("nickName").innerText;
+                                    const userInput = document.getElementById('userInput').value;
+                                    const roomPassword = data.data.password;
 
-                        for (var i = 0; i < allChatRooms.length; i++) {
-                            // 비밀방 또는 게임중이면 HIDE
-                            if (allChatRooms[i].close || allChatRooms[i].state === "PLAYING") {
-                                document.getElementById('room_' + i).style.display = "none";
-                            }
-                        }
+                                    if (roomPassword !== userInput) {
+                                        alert('비밀번호가 일치하지 않습니다.')
+                                    } else {
+                                        window.location.href = '/chat/' + chatRoomId + '/' + nickName; // 맞다면 이동
+                                    }
+                                },
+                                error: function(response) {
+                                    alert(JSON.stringify(response))
+                                },
+                            });
+                        });
+
+                        // 오픈방이면 바로 이동
                     } else {
-                        for (var i = 0; i < allChatRooms.length; i++) {
-                            document.getElementById('room_' + i).style.display = "";
-                        }
+                        const nickName = document.getElementById("nickName").innerText
+                        window.location.href = '/chat/' + chatRoomId + '/' + nickName;
                     }
-
-                });
-
-                // 검색 리셋
-                function clearButton() {
-                    window.location.href = "/v1/index";
                 }
 
-                // 채팅방 선택 후 비밀방 여부 확인, 비밀번호 입력창 띄우기
-                $("a[name='chatroom-url']").click(function (event) {
-
-                    event.preventDefault();
-                    const roomId = $(this).attr("roomId");
-                    const isClose = $(this).attr("isClose");
-                    const nickname = $(this).attr("nickname");
-                    const passwordInputDiv = document.getElementById("passwordInput_" + roomId);// passwordInputDiv 요소 가지고 옴.
+                // 채팅방 목록 생성
+                    function chatRoomList(data){
+                    var html = `<div id="chatroomList" style=" padding: 3vh; height:50vh; width:100%; overflow-y:scroll;">`
+                    $.each(data.data, function (index, item) {
+                        // 채팅방 선택 시 입장 enterRoom 함수 실행
+                        html += `<a onclick="enterRoom(${item.id}, ${item.close});"
+                                    class="list-group-item list-group-item-action flex-column align-items-start"
+                                    id="chatroom"
+                                    data-toggle="${modal_info2()}"
+                                    data-target="${modal_info()}"
+                                    >`
+                            + `<div class="test d-flex w-100 justify-content-between">`
+                            + `<span class="state badge badge-primary badge-pill">` + item.state + `</span>`
+                            + `<div class="d-flex w-100 justify-content-between">`
+                            + `<span class="mb-1">`
+                            + `<img id="roomImage" class="lock_thumbnail" src="${img_info()}">`
+                            + `</span>`
+                            + `</div>`
+                            + `</div>`
+                            + `<div class="contaniner row" style="text-align: left">`
+                            // 방 제목
+                            + `<div class="col-10">`
+                            + `<h5 class="mb-1">` + item.title + `</h5>`
+                            + `</div>`
+                            // 참여 인원 / 정원
+                            + `<div class="col-1">`
+                            + `<span class="mb-1">` + item.head + `</span>` + "/"
+                            + `<span class="mb-1">` + item.capacity + `</span>`
+                            + `</div>`
+                            + `</div>`
 
-                    console.log(roomId);
-                    console.log(isClose);
-                    console.log(nickname);
-
-                    if (isClose === 'true') { // 비밀방이면
-                        passwordInputDiv.style.display = "block"; // 비밀번호 입력가능한 Modal 표출
-                        // $("#modal").show();
-                    } else {
-                        window.location.href = '/chat/' + roomId + '/' + nickname; // 오픈방이면 input 을 보여주지 않고 chat room 으로 이동시킴
-                    }
-                });
+                        // 비밀방인 경우 열쇠 이미지 , 공개방인 경우 이미지 없음
+                        function img_info() {
+                            if (item.close) {
+                                return "/images/lock.png";
+                            } else {
+                                return "";
+                            }
+                        }
 
-                // 비밀번호 제출
-                $("button[name='password-submit']").click(function (event) {
+                        function modal_info() {
+                            if (item.close) {
+                                return "#exampleModal";
+                            } else {
+                                return "";
+                            }
+                        }
 
-                    event.preventDefault();
+                        function modal_info2() {
+                            if (item.close) {
+                                return "modal";
+                            } else {
+                                return "";
+                            }
+                        }
+                    })
+                    html += "</a>";
+                    html += "</div>";
+                    $("#display").empty();
+                    $("#display").append(html);
+                }
 
-                    const roomId = $(this).attr("data-roomId");
-                    const isClose = $(this).attr("data-isClose");
-                    const nickname = $(this).attr("data-nickname");
-                    const roomPassword = $(this).attr("data-roomPassword");
-                    const userInput = $(this).prev().val();
+                // 채팅방 검색
+                function search(){
+                    const content = $('#search-content').val();
+                    // 검색어가 없는 경우 아무 실행도 하지 않습니다.
+                    if(content === ''){
+                        return false;
+                    }
+                    // 검색어가 있는 경우
+                    $.ajax({
+                        url: `/v1/chatroom/search?content=${content}`,
+                        type: 'GET',
+                        success: function(data) {
+                            // 검색 결과에 따라 채팅방 목록 바꾸기
+                            chatRoomList(data);
+                        },
+                        error: function(response) {
+                            // 오류메시지 alert (해당하는 방이 없는 경우)
+                            alert(JSON.stringify(response.responseJSON.message));
+                        },
+                    });
+                }
 
-                    console.log(roomPassword);
-                    console.log(isClose);
-                    console.log(nickname);
-                    console.log("userInput = " + userInput);
+                // checkbox
+                // function chatRoomCheckboxFilter(){
+                //     const checkBtn = document.getElementById('checkbox');
+                //     let allChatRooms = [[${allChatRooms}]];
+                //     if (allChatRooms.length === 0) return;
+                //     allChatRooms = [[${allChatRooms}]];
+                //     // 필터를 적용해야하는 경우라면
+                //     if (checkBtn.checked) {
+                //         for (var i = 0; i < allChatRooms.length; i++) {
+                //             // 비밀방 또는 게임중이면 HIDE
+                //             if (allChatRooms[i].close || allChatRooms[i].state === "PLAYING") {
+                //                 document.getElementById('room_' + i).style.display = "none";
+                //             }
+                //         }
+                //     } else {
+                //         for (var i = 0; i < allChatRooms.length; i++) {
+                //             document.getElementById('room_' + i).style.display = "";
+                //         }
+                //     }
+                // }
 
-                    if (roomPassword !== userInput) {
-                        alert('비밀번호가 일치하지 않습니다.')
-                        event.preventDefault();
-                    } else {
-                        window.location.href = '/chat/' + roomId + '/' + nickname; // 맞다면 이동
-                    }
-                });
+                // 검색어 리셋
+                function clearButton() {
+                    // 검색어 input 비우기
+                    $('#search-content').val("");
+                }
                 </script>
             </th:block>
         </div>