Merge pull request #2 from handong-app/junglesub/new-feed

피드 개시글 로직 수정

.env.example

@@ -2,4 +2,7 @@ DB_HOST=
 DB_NAME=
 DB_USERNAME=
 DB_PASSWORD=
-DB_CLASSNAME=
+DB_CLASSNAME=
+
+FB_CONFIG_PATH=
+FB_BUCKET=

.gitignore

@@ -1,5 +1,7 @@
 .env
 
+secrets/
+
 .DS_Store
 static/
 

build.gradle

@@ -31,8 +31,18 @@ dependencies {
     //db
     runtimeOnly 'com.mysql:mysql-connector-j'
     implementation 'org.mariadb.jdbc:mariadb-java-client:3.1.2'
+    //mybatis
+    implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.3' //3.0.2 => 3.0.3으로 상승!!
+    //swagger 사용!!!
+    implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.0.2' //swagger 사용을 위함.
     // 추가 종료
 
+    //firebase stuff
+    implementation group: 'com.google.firebase', name: 'firebase-admin', version: '8.1.0'
+
+    //devtool hotreload
+    developmentOnly 'org.springframework.boot:spring-boot-devtools'
+
     compileOnly 'org.projectlombok:lombok'
     annotationProcessor 'org.projectlombok:lombok'
     testImplementation 'org.springframework.boot:spring-boot-starter-test'

src/main/front/package.json

@@ -9,8 +9,10 @@
     "http-proxy-middleware": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-infinite-scroller": "^1.2.6",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "react-show-more-text": "git+git@github.com:junglesub/react-show-more-text.git",
     "sass": "^1.77.8",
     "web-vitals": "^2.1.4"
   },

src/main/front/src/components/FeedItemNew/FeedItemGallery.css

@@ -0,0 +1,85 @@
+/* Base styles for the post images container */
+.post-images {
+  padding: 0 24px;
+  padding-bottom: 16px;
+  display: grid;
+  gap: 5px;
+  position: relative;
+}
+
+/* 1 image layout - full width */
+.images-1 {
+  grid-template-columns: 1fr;
+}
+
+.images-1 img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* 2 images - two equal-sized images side by side */
+.images-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+.images-2 img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* 3 images - one large image on the left, two smaller stacked images on the right */
+.images-3 {
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+.images-3 img:first-child {
+  grid-row: 1 / span 2;
+}
+
+.images-3 img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* 4 images - a 2x2 grid */
+.images-4 {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+.images-4 img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* More than 4 images - display 4 images with a + overlay for remaining images */
+.more-images-overlay {
+  grid-column: 2 / span 1;
+  grid-row: 2 / span 1;
+
+  font-size: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  position: relative;
+}
+
+.more-images-overlay span {
+  z-index: 2;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/main/front/src/components/FeedItemNew/FeedItemGallery.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import "./FeedItemGallery.css";
+
+const FeedItemGallery = ({ images = [] }) => {
+  if (images.length === 0) return <></>;
+  return (
+    <div className={`post-images images-${images.length}`}>
+      {images.slice(0, 3).map((image, index) => (
+        <img key={index} src={image} alt={`Image ${index + 1}`} />
+      ))}
+      {images.length > 4 && (
+        <div className="more-images-overlay">
+          {images.length > 5 && <span>+{images.length - 4}</span>}
+          <img key={1} src={images[3]} alt={`Image`} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FeedItemGallery;

src/main/front/src/components/FeedItemNew/FeedItemNew.jsx

@@ -1,9 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 
 import kakaotalk from "./kakaotalk.png";
 import comment from "./comment.png";
 import like from "./like.png";
 import share from "./share.png";
+import { convertTextToLinks } from "../../tools/tools";
+import FeedItemGallery from "./FeedItemGallery";
+import ReactShowMoreText from "react-show-more-text";
 
 function formatTimestamp(timestamp) {
   // Parse the timestamp into a Date object
@@ -35,10 +38,15 @@ function FeedItemNew({ item, getAllData }) {
           <button onClick={() => {}}>Bookmark</button>
         </div>
       </div>
-      <div className="content">{item.content.trim()}</div>
-      {item.img && (
+      <div className="content">
+        <ReactShowMoreText lines={3} truncatedEndingComponent="">
+          {convertTextToLinks(item.content.trim())}
+        </ReactShowMoreText>
+      </div>
+      {item.files && (
         <div className="image">
-          <img src={`/${item.img}`} alt="ss" />
+          <FeedItemGallery images={item.files} />
+          {/* <img src={`${item.img}`} alt="ss" /> */}
         </div>
       )}
       <div className="bottomMenu">

src/main/front/src/index.js

@@ -9,11 +9,11 @@ import Admin from "./pages/Admin";
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: <NewUI />,
   },
   {
     path: "/newui",
-    element: <NewUI />,
+    element: <App />,
   },
   {
     path: "/admin",

src/main/front/src/pages/NewUI.css

@@ -9,7 +9,7 @@ body,
 .NewUI {
   /* border: 1px solid black; */
   background-color: #eef0f3;
-  max-width: 800px;
+  max-width: 700px;
   margin: auto;
   /* padding: 16px; */
   padding: 0;
@@ -25,6 +25,11 @@ body,
   text-align: center;
   text-transform: uppercase;
 }
+
+.NewUI .list {
+  overflow: auto;
+}
+
 .NewUI .create {
   margin-top: 16px;
   /* background-color: #fffcf4;
@@ -124,9 +129,18 @@ body,
 .NewUI .FeedItem .content {
   white-space: pre;
   text-wrap: pretty !important;
+  word-break: break-all;
+  overflow-wrap: break-word;
   padding-top: 16px;
   padding-bottom: 16px;
 }
+
+.NewUI .show-more-less-clickable {
+  display: block;
+  color: #6699cc;
+  cursor: pointer;
+}
+
 .NewUI .FeedItem .image,
 .NewUI .FeedItem .image img {
   padding: 0;