Merge pull request #136 from prgrms-aibe-devcourse/feat/#134-profile-image-view

[feat] 멘토링 후기, 채팅방에 프로필 이미지 뜨도록 변경, redirect 경로 수정

Author: kimsehee-8135

src/main/java/com/knoc/reviewFeedback/dto/ReviewPageDto.java

@@ -18,7 +18,9 @@ public class ReviewPageDto {
     public static class ReviewCardDto {
         private final Long seniorProfileId;
         private final String juniorName;
+        private final String juniorProfileImageUrl;
         private final String seniorName;
+        private final String seniorProfileImageUrl;
         private final String mentoringType;
         private final String timeAgo;
         private final byte rating;
@@ -31,6 +33,7 @@ public static class ReviewCardDto {
     public static class TopSeniorDto {
         private final Long seniorProfileId;
         private final String name;
+        private final String profileImageUrl;
         private final BigDecimal rating;
     }
 }

src/main/java/com/knoc/reviewFeedback/service/ReviewFeedbackService.java

@@ -102,7 +102,9 @@ private List<ReviewPageDto.ReviewCardDto> mapToCards(List<ReviewFeedback> feedba
         return feedbacks.stream().map(r -> ReviewPageDto.ReviewCardDto.builder()
                 .seniorProfileId(r.getSeniorProfile().getId())
                 .juniorName(r.getJunior().getNickname())
+                .juniorProfileImageUrl(r.getJunior().getProfileImageUrl())
                 .seniorName(r.getSeniorProfile().getMember().getNickname())
+                .seniorProfileImageUrl(r.getSeniorProfile().getMember().getProfileImageUrl())
                 .mentoringType(r.getSeniorProfile().getPosition())
                 .timeAgo(timeAgo(r.getCreatedAt()))
                 .rating(r.getRating())
@@ -116,6 +118,7 @@ private List<ReviewPageDto.TopSeniorDto> mapToTopSeniors(List<SeniorProfile> sen
         return seniors.stream().map(s -> ReviewPageDto.TopSeniorDto.builder()
                 .seniorProfileId(s.getId())
                 .name(s.getMember().getNickname())
+                .profileImageUrl(s.getMember().getProfileImageUrl())
                 .rating(s.getAvgRating())
                 .build()
         ).toList();

src/main/java/com/knoc/senior/controller/SeniorApplyController.java

@@ -106,8 +106,7 @@ public String updateProfile(@AuthenticationPrincipal UserDetails userDetails,
                                 RedirectAttributes redirectAttributes) {
         Long memberId = getMemberId(userDetails);
         seniorProfileService.updateProfile(memberId, dto);
-        redirectAttributes.addFlashAttribute("successMessage", "시니어 프로필이 수정되었습니다.");
-        return "redirect:/senior/profile-update";
+        return "redirect:/my/dashboard?seniorProfileUpdated=true";
     }
 
     @Operation(summary = "이메일 인증 번호 발송",description = "기업 이메일로 인증번호를 발송합니다.")

src/main/resources/static/css/chatrooms.css

@@ -100,6 +100,13 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    overflow: hidden;
+}
+.room-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
 }
 
 .room-info { flex: 1; overflow: hidden; }
@@ -174,6 +181,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+}
+.chat-header-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
 }
 
 .chat-header-name {

src/main/resources/templates/chat/chatrooms.html

@@ -38,7 +38,11 @@
                        th:attr="data-room-id=${room.id}"
                        class="room-item">
 
-                        <div class="room-avatar" th:text="${#strings.substring(opponent.nickname, 0, 1)}"></div>
+                        <div class="room-avatar" th:with="avatarUrl=${opponent.profileImageUrl}">
+                            <img th:if="${avatarUrl != null and !#strings.isEmpty(avatarUrl)}" th:src="${avatarUrl}" alt="프로필 이미지"/>
+                            <span th:if="${avatarUrl == null or #strings.isEmpty(avatarUrl)}"
+                                  th:text="${#strings.substring(opponent.nickname, 0, 1)}"></span>
+                        </div>
 
                         <div class="room-info">
                             <div class="room-name" th:text="${opponent.nickname}"></div>
@@ -76,7 +80,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
                         </svg>
                     </button>
-                    <div class="chat-header-avatar" th:text="${#strings.substring(opponent.nickname, 0, 1)}"></div>
+                    <div class="chat-header-avatar" th:with="avatarUrl=${opponent.profileImageUrl}">
+                        <img th:if="${avatarUrl != null and !#strings.isEmpty(avatarUrl)}" th:src="${avatarUrl}" alt="프로필 이미지"/>
+                        <span th:if="${avatarUrl == null or #strings.isEmpty(avatarUrl)}"
+                              th:text="${#strings.substring(opponent.nickname, 0, 1)}"></span>
+                    </div>
                     <div class="chat-header-name" th:text="${opponent.nickname}"></div>
                     <span id="connectionStatus" class="connection-status status-disconnected">종료됨</span>
 

src/main/resources/templates/chat/rooms.html

@@ -57,6 +57,13 @@
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
+            overflow: hidden;
+        }
+        .room-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
         }
 
         .room-info {
@@ -134,8 +141,10 @@
 
                 <!-- 아바타: 상대방 닉네임 첫 글자 -->
                 <div class="room-avatar"
-                     th:with="opponent=${#authentication.name == room.junior.email ? room.senior : room.junior}"
-                     th:text="${#strings.substring(opponent.nickname, 0, 1)}">
+                     th:with="opponent=${#authentication.name == room.junior.email ? room.senior : room.junior}, avatarUrl=${opponent.profileImageUrl}">
+                    <img th:if="${avatarUrl != null and !#strings.isEmpty(avatarUrl)}" th:src="${avatarUrl}" alt="프로필 이미지"/>
+                    <span th:if="${avatarUrl == null or #strings.isEmpty(avatarUrl)}"
+                          th:text="${#strings.substring(opponent.nickname, 0, 1)}"></span>
                 </div>
 
                 <!-- 채팅방 정보 -->

src/main/resources/templates/my/dashboard/senior.html

@@ -354,6 +354,10 @@
          style="background-color: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; border-radius: 0.9rem; padding: 0.75rem 1.25rem;">
         프로필이 업데이트되었습니다.
     </div>
+    <div th:if="${param.seniorProfileUpdated}" class="alert mb-3"
+         style="background-color: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; border-radius: 0.9rem; padding: 0.75rem 1.25rem;">
+        전문성 정보가 업데이트되었습니다.
+    </div>
     <div th:if="${param.profileError}" class="alert mb-3"
          style="background-color: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.35); color: #f87171; border-radius: 0.9rem; padding: 0.75rem 1.25rem;">
         이미 사용 중인 닉네임입니다.

src/main/resources/templates/review/posts.html

@@ -84,6 +84,13 @@
             font-size: 0.9rem;
             color: #fff;
             flex-shrink: 0;
+            overflow: hidden;
+        }
+        .reviewer-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
         }
         .av-blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
         .av-green  { background: linear-gradient(135deg, #10b981, #059669); }
@@ -162,6 +169,13 @@
             color: #fff;
             flex-shrink: 0;
             border: 1px solid rgba(255,255,255,0.06);
+            overflow: hidden;
+        }
+        .senior-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
         }
         .sa-0 { background: linear-gradient(135deg, #1a3350, #1a7a8a); }
         .sa-1 { background: linear-gradient(135deg, #2a1a50, #4a3080); }
@@ -254,7 +268,12 @@ <h2 class="fw-bold text-white mb-2">성장의 기록이 모이는 곳</h2>
                     <div class="d-flex align-items-start justify-content-between mb-3">
                         <div class="d-flex align-items-center gap-3">
                             <div class="reviewer-avatar"
-                                 th:text="${#strings.substring(review.juniorName, 0, 1)}">J</div>
+                                 th:with="avatarUrl=${review.juniorProfileImageUrl}">
+                                <img th:if="${avatarUrl != null and !#strings.isEmpty(avatarUrl)}"
+                                     th:src="${avatarUrl}" alt="프로필 이미지"/>
+                                <span th:if="${avatarUrl == null or #strings.isEmpty(avatarUrl)}"
+                                      th:text="${#strings.substring(review.juniorName, 0, 1)}">J</span>
+                            </div>
                             <div>
                                 <div class="reviewer-name" th:text="${review.juniorName}">주OO 개발자</div>
                                 <div class="reviewer-meta">
@@ -399,7 +418,12 @@ <h2 class="fw-bold text-white mb-2">성장의 기록이 모이는 곳</h2>
                             <span class="senior-rank" th:text="${stat.index + 1}">1</span>
                             <div class="senior-avatar"
                                  th:classappend="'sa-' + ${stat.index % 3}"
-                                 th:text="${#strings.substring(senior.name, 0, 1)}">K</div>
+                                 th:with="avatarUrl=${senior.profileImageUrl}">
+                                <img th:if="${avatarUrl != null and !#strings.isEmpty(avatarUrl)}"
+                                     th:src="${avatarUrl}" alt="프로필 이미지"/>
+                                <span th:if="${avatarUrl == null or #strings.isEmpty(avatarUrl)}"
+                                      th:text="${#strings.substring(senior.name, 0, 1)}">K</span>
+                            </div>
                             <div class="senior-info">
                                 <span class="senior-name" th:text="${senior.name}">김훈식 시니어</span>
                                 <div class="senior-rating">
@@ -501,6 +525,7 @@ <h2 class="fw-bold text-white mb-2">성장의 기록이 모이는 곳</h2>
 
             reviewList.innerHTML = myReviews.map(function (review) {
                 const juniorName = escapeHtml(review.juniorName || '');
+                const juniorProfileImageUrl = escapeHtml(review.juniorProfileImageUrl || '');
                 const seniorName = escapeHtml(review.seniorName || '');
                 const mentoringType = escapeHtml(review.mentoringType || '');
                 const timeAgo = escapeHtml(review.timeAgo || '');
@@ -512,7 +537,11 @@ <h2 class="fw-bold text-white mb-2">성장의 기록이 모이는 곳</h2>
                     <div class="review-card">
                         <div class="d-flex align-items-start justify-content-between mb-3">
                             <div class="d-flex align-items-center gap-3">
-                                <div class="reviewer-avatar">${juniorName ? juniorName.substring(0, 1) : '나'}</div>
+                                <div class="reviewer-avatar">
+                                    ${juniorProfileImageUrl
+                                        ? `<img src="${juniorProfileImageUrl}" alt="프로필 이미지"/>`
+                                        : `<span>${juniorName ? juniorName.substring(0, 1) : '나'}</span>`}
+                                </div>
                                 <div>
                                     <div class="reviewer-name">${juniorName || '나의 후기'}</div>
                                     <div class="reviewer-meta">

src/main/resources/templates/workspace/workspace.html

@@ -466,7 +466,7 @@
         <div class="chat-pane">
             <div class="chat-header">
                 <div class="chat-header-avatar" th:with="avatarUrl=${workspace.opponentAvatarUrl}">
-                    <img th:if="${avatarUrl != null and !#strings.isEmpty(avatarUrl)}" th:src="${avatarUrl}" alt="avatar"/>
+                    <img th:if="${avatarUrl != null and !#strings.isEmpty(avatarUrl)}" th:src="${avatarUrl}" alt="프로필 이미지"/>
                     <span th:if="${avatarUrl == null or #strings.isEmpty(avatarUrl)}" th:text="${#strings.substring(workspace.opponentNickname, 0, 1)}"></span>
                 </div>
                 <div class="chat-header-name" th:text="${workspace.opponentNickname}"></div>