Feed 페이지 렌더링

youjungHwang · Dec 18, 2022 · 380f0d8 · 380f0d8
1 parent 12cdf61
commit 380f0d8
Show file tree

Hide file tree

Showing 11 changed files with 238 additions and 153 deletions.
diff --git a/src/main/java/com/photo/domain/image/Image.java b/src/main/java/com/photo/domain/image/Image.java
@@ -18,6 +18,7 @@ public class Image extends BaseTimeEntity {
     private String caption;
     private String imageUrl;
 
+    @JsonIgnoreProperties({"images"})
     @JoinColumn(name = "userId")
     @ManyToOne
     private User user;

diff --git a/src/main/java/com/photo/domain/image/ImageRepository.java b/src/main/java/com/photo/domain/image/ImageRepository.java
@@ -1,6 +1,15 @@
 package com.photo.domain.image;
 
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 
 public interface ImageRepository extends JpaRepository<Image, Integer> {
+
+    @Query(value = "SELECT * FROM image WHERE userId IN (SELECT toUserId FROM follow WHERE fromUserId = :sessionId)", nativeQuery = true)
+    Page<Image> cFeed (@Param(value = "sessionId") int sessionId, @Param(value = "pageable") Pageable pageable);
+
+
 }
diff --git a/src/main/java/com/photo/service/ImageService.java b/src/main/java/com/photo/service/ImageService.java
@@ -6,12 +6,15 @@
 import com.photo.web.dto.image.ImageUploadDto;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
+import java.util.List;
 import java.util.UUID;
 
 @RequiredArgsConstructor
@@ -20,6 +23,11 @@ public class ImageService {
 
     private final ImageRepository imageRepository;
 
+    @Transactional(readOnly = true)
+    public Page<Image> Feed(int sessionId, Pageable pageable) {
+        Page<Image> images = imageRepository.cFeed(sessionId, pageable);
+        return images;
+    }
     @Value("${file.path}")
     private String imageUploadRoute;
 

diff --git a/src/main/java/com/photo/web/ImageController.java b/src/main/java/com/photo/web/ImageController.java
@@ -1,32 +1,37 @@
 package com.photo.web;
 
 import com.photo.config.auth.CustomUserDetails;
+import com.photo.domain.image.Image;
 import com.photo.handler.exception.CustomValidationException;
 import com.photo.service.ImageService;
 import com.photo.web.dto.image.ImageUploadDto;
 import lombok.Getter;
 import lombok.RequiredArgsConstructor;
 import org.springframework.security.core.annotation.AuthenticationPrincipal;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 
+import java.util.List;
+
 @RequiredArgsConstructor
 @Controller
 public class ImageController {
 
     private final ImageService imageService;
 
-    @GetMapping({"/","/image/story"})
-    public String story() {
-        return "image/story";
+    @GetMapping({"/","/image/feed"})
+    public String feed() {
+        return "image/feed";
     }
 
     @GetMapping("/image/popular")
     public String popular() {
-        return "image/popular";
+        return "/image/popular";
     }
 
+
     @GetMapping("/image/upload")
     public String upload() {
         return "image/upload";

diff --git a/src/main/java/com/photo/web/api/ImageApiController.java b/src/main/java/com/photo/web/api/ImageApiController.java
@@ -0,0 +1,33 @@
+package com.photo.web.api;
+
+import com.photo.config.auth.CustomUserDetails;
+import com.photo.domain.image.Image;
+import com.photo.service.ImageService;
+import com.photo.web.dto.ResDto;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
+import org.springframework.data.web.PageableDefault;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+
+@RequiredArgsConstructor
+@RestController
+public class ImageApiController {
+
+    private final ImageService imageService;
+
+    @GetMapping("/api/feed")
+    public ResponseEntity<?> Feed(@AuthenticationPrincipal CustomUserDetails customUserDetails,
+                                   @PageableDefault(size=4, sort="id", direction = Sort.Direction.DESC) Pageable pageable){
+        Page<Image> images = imageService.Feed(customUserDetails.getUser().getId(), pageable);
+        return new ResponseEntity<>(new ResDto<>(1,"피드 성공", images), HttpStatus.OK);
+    }
+
+
+}
diff --git a/src/main/resources/static/js/feed.js b/src/main/resources/static/js/feed.js
@@ -0,0 +1,159 @@
+/**
+	2. 스토리 페이지
+	(1) 스토리 로드하기
+	(2) 스토리 스크롤 페이징하기
+	(3) 좋아요, 안좋아요
+	(4) 댓글쓰기
+	(5) 댓글삭제
+ */
+
+// (1) 스토리 로드하기
+let page = 0;
+
+function storyLoad() {
+ $.ajax({
+        type: "get",
+        url: `/api/feed?page=${page}`,
+        dataType: "json",
+        success: function(res) {
+            console.log(res.data)
+
+            res.data.content.forEach((image) => {
+                let storyItem = getStoryItem(image);
+
+                $("#storyList").append(storyItem);
+            });
+        },
+        error: function(error) {
+            console.log("스토리 렌더링 오류", error);
+        }
+    });
+}
+
+storyLoad();
+
+function getStoryItem(image) {
+    let item =`<div class="story-list__item">
+               	<div class="sl__item__header">
+               		<div>
+               			<img class="profile-image" src="/upload/${image.user.profileImageUrl}" onerror="this.src='/images/defaultStory.png'" />
+               		</div>
+               		<div>${image.user.username}</div>
+               	</div>
+
+               	<div class="sl__item__img">
+               		<img src="/upload/${image.imageUrl}" />
+               	</div>
+
+               	<div class="sl__item__contents">
+               		<div class="sl__item__contents__icon">
+
+               			<button>
+               				<i class="fas fa-heart active" id="storyLikeIcon-1" onclick="toggleLike()"></i>
+               			</button>
+               		</div>
+
+               		<span class="like"><b id="storyLikeCount-1">3 </b>likes</span>
+
+               		<div class="sl__item__contents__content">
+               			<p>${image.caption}</p>
+               		</div>
+
+               		<div id="storyCommentList-1">
+
+               			<div class="sl__item__contents__comment" id="storyCommentItem-1">
+               				<p>
+               					<b>blueberry :</b> 저도 꼭 볼게요!
+               				</p>
+
+               				<button>
+               					<i class="fas fa-times"></i>
+               				</button>
+
+               			</div>
+
+               		</div>
+
+               		<div class="sl__item__input">
+               			<input type="text" placeholder="댓글 달기" id="storyCommentInput-1" />
+               			<button type="button" onClick="addComment()">게시</button>
+               		</div>
+
+               	</div>
+                </div>`;
+    return item;
+
+}
+
+// (2) 스토리 스크롤 페이징하기
+$(window).scroll(() => {
+/*
+    console.log("윈도우 현재 scroll 위치", $(window).scrollTop());
+    console.log("전체 문서의 높이(고정값)", $(document).height());
+    console.log("윈도우 높이(고정값, 보이는 컴퓨터 화면)", $(window).height());
+    결과 : 전체 문서의 높이 - 윈도우 높이 = 윈도우 현재 scroll 위치
+*/
+
+    let checkNum = $(window).scrollTop() - ($(document).height() - $(window).height());
+
+    if(checkNum < 1 && checkNum > -1) {
+        page++;
+        storyLoad();
+    }
+
+});
+
+
+// (3) 좋아요, 안좋아요
+function toggleLike() {
+	let likeIcon = $("#storyLikeIcon-1");
+	if (likeIcon.hasClass("far")) {
+		likeIcon.addClass("fas");
+		likeIcon.addClass("active");
+		likeIcon.removeClass("far");
+	} else {
+		likeIcon.removeClass("fas");
+		likeIcon.removeClass("active");
+		likeIcon.addClass("far");
+	}
+}
+
+// (4) 댓글쓰기
+function addComment() {
+
+	let commentInput = $("#storyCommentInput-1");
+	let commentList = $("#storyCommentList-1");
+
+	let data = {
+		content: commentInput.val()
+	}
+
+	if (data.content === "") {
+		alert("댓글을 작성해주세요!");
+		return;
+	}
+
+	let content = `
+			  <div class="sl__item__contents__comment" id="storyCommentItem-2""> 
+			    <p>
+			      <b>GilDong :</b>
+			      댓글 샘플입니다.
+			    </p>
+			    <button><i class="fas fa-times"></i></button>
+			  </div>
+	`;
+	commentList.prepend(content);
+	commentInput.val("");
+}
+
+// (5) 댓글 삭제
+function deleteComment() {
+
+}
+
+
+
+
+
+
+
diff --git a/src/main/resources/static/js/story.js b/src/main/resources/static/js/story.js
diff --git a/src/main/resources/templates/image/feed.html b/src/main/resources/templates/image/feed.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<div th:replace="~{/layout/header :: header}"></div>
+
+<main class="main">
+	<section class="container" style="width: 35%">
+		<!--전체 리스트 시작-->
+		<article class="story-list" id="storyList">
+		</article>
+	</section>
+</main>
+<script th:src="@{/js/feed.js}"></script>
+
+</html>