[박현석]

- 타임라인 화면 구성
- 게시글 작성 기능 구현

hspark9781
/
Hoicegram
/
Hoicegram
Public
Cannot fork because you own this repository and are not a member of any organizations.
Code
Issues
10
Pull requests
Zenhub
Discussions
Actions
Projects
More
hspark9781/Hoicegram
H
Hoicegram
Board
Epics
Reports
Roadmap
Workflows

Create...

Edit workspace

View tutorials
Shortcuts
Open in web app
Help center
Get help from an expert
Changelog
Invite your team

hspark9781
hspark9781

#8

#9

#7

src/main/java/com/hsp/hoicegram/common/FileManagerService.java

@@ -0,0 +1,64 @@
+package com.hsp.hoicegram.common;
+
+import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+
+import org.springframework.web.multipart.MultipartFile;
+
+public class FileManagerService {
+
+	public static final String FILE_UPLOAD_PATH = "D:\\web_hsp\\spring_project\\upload\\hoicegram\\image"; 
+	// 
+	// "/Users/hsp9781/web_hsp/spring_project/upload/memo/image"
+
+	//파일 저장 -> 경로 생성
+
+	public static String saveFile(int userId, MultipartFile file) {
+
+		if(file == null) {
+			return null;
+		}
+
+		// 사용자 별로 폴더를 구분
+		// 시간을 포함해서 폴더를 구분
+		// UNIX TIME : 1970년 1월 1일 부터 흐른 시간을 (milli second 1/1000)
+		// 폴더 이름 : userId_time (3_3949828284)
+
+		String directoryName = "/" + userId + "_" + System.currentTimeMillis() + "/";
+
+		// 디렉토리 생성
+		String directoryPath = FILE_UPLOAD_PATH + directoryName;
+		File directory = new File(directoryPath);
+		if(!directory.mkdir()) {
+			// 디렉토리 생성 실패
+			return null;
+		}
+
+		// 파일 저장
+		try {
+			byte[] bytes = file.getBytes();
+
+			String filePath = directoryPath + file.getOriginalFilename();
+			Path path = Paths.get(filePath);
+
+			Files.write(path, bytes);
+
+
+		} catch (IOException e) {
+
+			e.printStackTrace();
+
+			return null;
+		}
+
+		// 클라이언트에서 저장된 파일을 접근할 수 있는 경로를 리턴
+		// 경로 규칙 /images/2_39i980139/test.png
+		// http://localhost:8080/images/2_39i980139/test.png
+
+		return "/images" + directoryName + file.getOriginalFilename();
+	}
+
+}

src/main/java/com/hsp/hoicegram/config/WebMVCConfig.java

@@ -0,0 +1,21 @@
+package com.hsp.hoicegram.config;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+import com.hsp.hoicegram.common.FileManagerService;
+
+@Configuration
+public class WebMVCConfig implements WebMvcConfigurer {
+
+	@Override
+	public void addResourceHandlers(ResourceHandlerRegistry registry) {
+
+		registry.addResourceHandler("/images/**")
+		.addResourceLocations("file:///" + FileManagerService.FILE_UPLOAD_PATH + "/"); // 맥은 //만
+
+
+	}
+
+}

src/main/java/com/hsp/hoicegram/post/PostController.java

@@ -8,9 +8,19 @@
 @RequestMapping("/post")
 public class PostController {
 
-	@GetMapping("/list/view")
+	@GetMapping("/timeline/view")
 	public String list() {
 		return "post/list";
 	}
 
+	@GetMapping("/create/view")
+	public String create() {
+		return "post/create";
+	}
+
+	@GetMapping("/detail/view")
+	public String detail() {
+		return "post/detail";
+	}
+
 }

src/main/java/com/hsp/hoicegram/post/PostRestController.java

@@ -0,0 +1,46 @@
+package com.hsp.hoicegram.post;
+
+import java.util.HashMap;
+import java.util.Map;
+
+import javax.servlet.http.HttpSession;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import com.hsp.hoicegram.post.bo.PostBO;
+
+@RestController
+@RequestMapping("/post")
+public class PostRestController {
+
+	@Autowired
+	private PostBO postBO;
+
+	@PostMapping("/create")
+	public Map<String, String> postCreate(
+			@RequestParam("content") String content
+			, @RequestParam(value="file", required=false) MultipartFile file
+			, HttpSession session) {
+
+		int userId = (Integer)session.getAttribute("userId");
+
+		int count = postBO.addPost(userId, content, file);
+
+		Map<String, String> resultMap = new HashMap<>();
+
+		if(count == 1) {
+			resultMap.put("result", "success");
+		} else {
+			resultMap.put("result", "fail");
+		}
+
+		return resultMap;
+
+	}
+
+}

src/main/java/com/hsp/hoicegram/post/bo/PostBO.java

@@ -0,0 +1,21 @@
+package com.hsp.hoicegram.post.bo;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
+
+import com.hsp.hoicegram.common.FileManagerService;
+import com.hsp.hoicegram.post.dao.PostDAO;
+
+@Service
+public class PostBO {
+
+	@Autowired
+	private PostDAO postDAO;
+
+	public int addPost(int userId, String content, MultipartFile file) {
+		String imagePath = FileManagerService.saveFile(userId, file);
+		return postDAO.insertPost(userId, content, imagePath);
+	}
+
+}

src/main/java/com/hsp/hoicegram/post/dao/PostDAO.java

@@ -0,0 +1,14 @@
+package com.hsp.hoicegram.post.dao;
+
+import org.apache.ibatis.annotations.Param;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface PostDAO {
+
+	public int insertPost(
+			@Param("userId") int userId
+			, @Param("content") String content
+			, @Param("imagePath") String imagePath);
+
+}

src/main/resources/mappers/postMapper.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+ <!DOCTYPE mapper
+  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+
+  <mapper namespace="com.hsp.hoicegram.post.dao.PostDAO">
+
+  	<insert id="insertPost" parameterType="map">
+  		INSERT INTO
+  			`post`
+  		(
+  			`userId`
+  			, `content`
+  			, `imagePath`
+  			, `createdAt`
+  			, `updatedAt`
+  		)
+  		VALUE
+  		(
+  			#{userId}
+  			, #{content}
+  			, #{imagePath}
+  			, now()
+  			, now()
+  		)
+  	</insert>
+
+  </mapper>

src/main/resources/static/css/post/style.css

@@ -21,10 +21,6 @@ header {
 	height:50px;
 }
 
-.contents > .comment {
-	height:300px;
-}
-
 footer {
 	height:70px;
 }

src/main/webapp/WEB-INF/jsp/post/create.jsp

@@ -0,0 +1,100 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+    pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>hoicegram-게시판</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+<link rel="stylesheet" href="/static/css/post/style.css" type="text/css">
+</head>
+<body>
+
+	<div id="wrap">
+		<header class="d-flex justify-content-between align-items-end">
+			<c:if test="${not empty userId }">
+			<div class="d-flex align-items-end">
+				<h4 class=" font-weight-light ml-1">${nickname }</h4>
+			</div>
+			<div class="mr-1"> <a href="/user/signout" class="btn btn-dark text-light">logout</a> </div>
+			</c:if>
+		</header>
+		<div class="menu d-flex justify-content-end mt-3">
+			<div class="dropdown">
+			  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			    Post menu
+			  </button>
+			  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+			    <a class="dropdown-item" href="/post/detail/view">게시물 수정</a>
+			    <a class="dropdown-item" href="/post/timeline/view">타임라인</a>
+			  </div>
+			</div>
+		</div>			
+		<section class="contents">		
+		<div class="mt-5">
+			<h3 class="font-weight-light">게시물 작성</h3>
+			<div class="mt-3">
+				<textarea rows="10" class="form-control" id="contentInput"></textarea>
+			</div>			
+			<div class="d-flex justify-content-between mt-3">
+				<input type="file" class="btn p-0" id="fileInput">	
+				<button type="button" id="saveBtn" class="btn btn-primary">저장</button>
+			</div>
+		</div>
+		</section>
+		<footer>
+			<div class="text-center mt-3">CopyRight</div>
+		</footer>		
+	</div>
+	<script>
+		$(document).ready(function() {
+			$("#saveBtn").on("click", function() {
+				let content = $("#contentInput").val();
+				let file = $("#fileInput")[0];
+				
+				if(content.trim() == "") {
+					alert("내용을 입력해 주세요");
+					return;
+				}
+				
+				var formData = new FormData();
+				formData.append("content", content);
+				formData.append("file", file.files[0]);
+				
+				$.ajax({
+					type:"post"
+					, url:"/post/create"
+					, data:formData
+					, enctype:"multipart/form-data"
+					, processData:false
+					, contentType:false
+					, success:function(data) {
+						if(data.result == "success") {
+							location.href="/post/timeline/view";
+						} else {
+							alert("저장 실패");
+						}
+					}
+					, error:function() {
+						alert("저장 에러");
+					}
+				});
+			});
+		});
+	</script>
+
+</body>
+</html>
+
+
+
+
+
+
+