[FEATURES] 마이 페이지 기능 구현 (#66)

* feat : MyPage 개발 - 마이페이구현 * Refactor : 코드 Build되도록 수정
donsonioc2010 · Sep 26, 2023 · 2bb163a · 2bb163a
1 parent 7ca83fe
commit 2bb163a
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 47 deletions.
diff --git a/Api/src/main/java/picasso/server/api/user/controller/MypageController.java b/Api/src/main/java/picasso/server/api/user/controller/MypageController.java
@@ -8,47 +8,51 @@
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.multipart.MultipartFile;
 import picasso.server.api.user.service.MypageService;
 import picasso.server.api.user.service.UserService;
+import picasso.server.api.user.vo.request.MyPageRequestDto;
 import picasso.server.domain.domains.user.entity.User;
 
-import java.util.HashMap;
-import java.util.Map;
-import java.util.Optional;
-
 @Slf4j
 @Controller
 @RequestMapping("/user")
 @RequiredArgsConstructor
 public class MypageController {
 
-  private final UserService userService;
   private final MypageService mypageService;
 
-  // 마이페이지 수정 전
+
   @GetMapping("/mypage")
-  public String getUserByEmail(HttpSession session, Model model) {
+  public String showMyPage(HttpSession session, Model model) {
     User loginUser = (User) session.getAttribute("loginUser");
+
     if (loginUser == null) {
-      // TODO : 사용자 정보 없는 경우 Exception 처리 필요 (로그인을 하지 않은 상태이기 떄문)
+      return "redirect:/auth/login";
     }
 
-    Optional<User> optionalUser = userService.findUserById(loginUser.getId());
-    if (optionalUser.isEmpty()) {
-      // TODO : 로그인 사용자(세션)는 존재하더라도, DB에서 현재 사용자 정보가 존재하지 않는 경우이기 떄문에 Exception처리가 필요
-    }
-    model.addAttribute("user", optionalUser.get());
+    User userDetail = mypageService.getUserDetail(loginUser.getId());
+    model.addAttribute("user", userDetail);
+
     return "user/mypage";
   }
 
-  // TODO: 테스트용 Controller 입니다. 추후 삭제 혹은 변경이 필요합니다.
-  @ResponseBody
-  @PostMapping("/session-info")
-  public Map<String, Long> paymentSessionInfoRtn(HttpSession session) {
-    User temp = (User)session.getAttribute("loginUser");
-    return new HashMap<String, Long>(){{
-      put("userId", 1L);
-    }};
+
+  @PostMapping("/update")
+  public String handleEdit(MyPageRequestDto requestDto, HttpSession session, Model model) {
+    User loginUser = (User) session.getAttribute("loginUser");
+    if (loginUser == null) {
+      return "redirect:/auth/login";
+    }
+
+    MultipartFile profileImage = requestDto.getProfile();
+
+    User user = mypageService.updateUserInfo(session, requestDto);
+    if (user == null) {
+      return "redirect:/error";
+    }
+    session.setAttribute("loginUser", user);
+    model.addAttribute("user", user);
+    return "redirect:/user/mypage";
   }
 }
diff --git a/Api/src/main/java/picasso/server/api/user/service/MypageService.java b/Api/src/main/java/picasso/server/api/user/service/MypageService.java
@@ -1,17 +1,55 @@
 package picasso.server.api.user.service;
 
+import jakarta.servlet.http.HttpSession;
 import jakarta.transaction.Transactional;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
-import picasso.server.domain.domains.user.repository.MypageRepository;
+import picasso.server.api.user.vo.request.MyPageRequestDto;
+import picasso.server.common.exception.NotFoundException;
+import picasso.server.common.util.NaverObjectStorageUsageType;
+import picasso.server.common.util.NaverObjectStorageUtil;
+import picasso.server.domain.domains.user.entity.User;
+import picasso.server.domain.domains.user.repository.UserRepository;
 
 @Service
 @Transactional
 @RequiredArgsConstructor
 public class MypageService {
 
-  private final MypageRepository mypageRepository;
+  private final UserRepository userRepository;
+  private final NaverObjectStorageUtil naverObjectStorageUtil;
 
+  public User getUserDetail(Long id) {
+    return userRepository.findById(id).orElse(null);
+  }
 
-}
+  /**
+   *
+   * @param session 현재 존재하는 Session
+   * @param updateRequestDto 수정해야 하는 정보
+   * @return
+   */
 
+  public User updateUserInfo(HttpSession session, MyPageRequestDto updateRequestDto) {
+    User sessionLoginUser = (User) session.getAttribute("loginUser");
+    User databaseUserInfo = userRepository.findById(sessionLoginUser.getId()).orElseThrow(()-> NotFoundException.EXCEPTION);
+
+    if(sessionLoginUser.getEmail().equals(databaseUserInfo.getEmail())) {
+      if(!databaseUserInfo.getNickName().equals(updateRequestDto.getChgNickName())) {
+        databaseUserInfo.setNickName(updateRequestDto.getChgNickName());
+      }
+
+
+      if(!updateRequestDto.getProfile().isEmpty()) {
+        databaseUserInfo.setProfile(
+                naverObjectStorageUtil.storageFileUpload(
+                        NaverObjectStorageUsageType.PROFILE, updateRequestDto.getProfile()
+                )
+        );
+      }
+      return databaseUserInfo;
+    }
+
+    return null;
+  }
+}
diff --git a/Api/src/main/java/picasso/server/api/user/vo/request/MyPageRequestDto.java b/Api/src/main/java/picasso/server/api/user/vo/request/MyPageRequestDto.java
@@ -0,0 +1,20 @@
+package picasso.server.api.user.vo.request;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import lombok.ToString;
+import org.springframework.web.multipart.MultipartFile;
+
+@Getter
+@Setter
+@ToString
+@AllArgsConstructor
+@NoArgsConstructor
+public class MyPageRequestDto {
+  private String orgNickName;
+  private String chgNickName;
+  private String isNewProfile;
+  private MultipartFile profile;
+}
diff --git a/Api/src/main/resources/static/css/mypage.css b/Api/src/main/resources/static/css/mypage.css
@@ -0,0 +1,22 @@
+div.container > div.mypage-container {
+    border-radius: 2%;
+    padding: 40px;
+    margin: 100px auto;
+    width: 80vh;
+    min-width: 800px;
+    background-color: rgba(220, 220, 220, 0.857);
+}
+
+form#mypage-form > div.mypage-title {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.img-thumbnail {
+    width: 100%;
+    height: 300px;
+}
+
+.col > button {
+    width: 100%;
+}
diff --git a/Api/src/main/resources/static/js/mypage.js b/Api/src/main/resources/static/js/mypage.js
@@ -0,0 +1,19 @@
+function validateFileExtension(fileInput) {
+    const allowedExtensions = ['jpg', 'jpeg', 'png'];
+    const filenameDisplayElement = document.getElementById('filename');
+
+    if (fileInput.files.length > 0) {
+        const fileName = fileInput.files[0].name;
+        const fileExtension = fileName.split('.').pop().toLowerCase();
+
+        if (!allowedExtensions.includes(fileExtension)) {
+            alert("프로필 사진은 .jpg, .jpeg 또는 .png 확장자만 허용됩니다.");
+            fileInput.value = ''; // 파일 입력을 초기화합니다.
+            filenameDisplayElement.textContent = '';
+        } else {
+            filenameDisplayElement.textContent = fileName;
+        }
+    } else {
+        filenameDisplayElement.textContent = '';
+    }
+}
diff --git a/Api/src/main/resources/templates/user/mypage.html b/Api/src/main/resources/templates/user/mypage.html
@@ -1,20 +1,78 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-<head>
-  <title>My Page</title>
-</head>
-<body>
-<form th:action="@{/user}" method="post">
-  <label for="nickname">Nickname:</label>
-  <input type="text" id="nickname" name="nickname" /><br/>
+<html
+        lang="ko"
+        xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:th="http://www.thymeleaf.org"
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+        layout:decorate="~{layout/layout}"
+>
+<main layout:fragment="content">
+  <link rel="stylesheet" type="text/css" href="/static/css/member/mypage.css" />
+  <div class="container">
+    <div class="mypage-container">
+      <form th:action="@{/user/update}" method="post" id="mypage-form" enctype="multipart/form-data">
+        <div class="row mypage-title">
+          <h1>마이페이지</h1>
+        </div>
 
-  <label for="point">Point:</label>
-  <input type="text" id="point" name="point" /><br/>
+        <div class="row d-flex align-items-center">
+          <div class="col-md-4 mb-5">
+            <img id="thumbnail-preview" th:if="${user.profile != null}" th:src="|https://kr.object.ncloudstorage.com/picasso-bucket/${user.profile}|" class="img-thumbnail" alt="..." style="width: 100%; height: 300px;">
+          </div>
 
-  <label for="profile">Profile:</label>
-  <input type="file" id="profile" name="profile" /><br/>>
-  <button type="submit">등록</button>
+          <div class="col-md-8">
+            <div class="mb-3 row">
+              <label for="chgNickName" class="col-sm-2 col-form-label">NickName</label>
+              <div class="col-sm-10">
+                <input type="hidden" id="orgNickName" name="orgNickName" th:value="${user.nickName}" />
+                <input type="text" class="form-control" id="chgNickName" name="chgNickName" th:value="${user.nickName}">
+              </div>
+            </div>
 
-</form>
-</body>
+            <div class="mb-3 row">
+              <label for="point" class="col-sm-2 col-form-label">Point</label>
+              <div class="col-sm-10">
+                <input type="text" readonly class="form-control-plaintext" id="point" th:value="${user.point}">
+              </div>
+            </div>
+
+            <div class="mb-3 row">
+              <label for="profile" class="col-sm-2 col-form-label">Profile</label>
+              <div class="col-sm-10">
+                <input class="form-control" type="file" id="profile" name="profile" accept=".jpg, .jpeg, .png" onchange="previewThumbnail(); validateFileExtension(this);">
+                <span id="filename" class="d-block mt-2"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <div class="row" style="margin-bottom:10px;">
+          <div class="col" >
+            <button type="button" style="width:100%;" class="btn btn-secondary btn-lg">취소</button>
+          </div>
+          <div class="col" >
+            <button type="submit" style="width:100%;" class="btn btn-primary btn-lg">수정</button>
+          </div>
+        </div>
+      </form>
+      <hr>
+      <div class="row">
+        <div class="col">
+          <button type="button" class="btn btn-primary btn-lg" style="width:100%;">Point 충전</button>
+        </div>
+        <div class="col">
+          <button type="button" class="btn btn-primary btn-lg" style="width:100%;">낙찰횟수</button>
+        </div>
+        <div class="col">
+          <button type="button" class="btn btn-primary btn-lg" style="width:100%;">내 경매</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
+<th:block layout:fragment="script">
+  <script src="/static/js/mypage.js"></script>
+</th:block>
 </html>
diff --git a/Domain/src/main/java/picasso/server/domain/domains/user/entity/User.java b/Domain/src/main/java/picasso/server/domain/domains/user/entity/User.java
@@ -95,6 +95,7 @@ public class User {
   private LocalDateTime loginAt = LocalDateTime.now();
 
   @OneToMany(mappedBy = "user", fetch = FetchType.LAZY)
+  @Builder.Default
   private List<Picture> pictures = new ArrayList<>();
 
   public void updatePoint(Long point) {

diff --git a/Domain/src/main/java/picasso/server/domain/domains/user/repository/MypageRepository.java b/Domain/src/main/java/picasso/server/domain/domains/user/repository/MypageRepository.java