Merge pull request #210 from Selody-project/206-front-task-피드-업로드-구현

206 front task 피드 업로드 구현

package.json

@@ -26,10 +26,11 @@
 		"@react-oauth/google": "^0.11.0",
 		"@reduxjs/toolkit": "^1.9.3",
 		"axios": "^1.4.0",
+		"browser-image-compression": "^2.0.2",
 		"cross-env": "7.0.3",
+		"date-fns": "^2.30.0",
 		"dotenv": "16.3.1",
 		"eslint": "8.49.0",
-		"date-fns": "^2.30.0",
 		"eslint-plugin-import": "2.28.0",
 		"framer-motion": "^10.12.14",
 		"jest-transform-stub": "2.0.0",

src/components/Common/Feed/Feed.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
@@ -8,6 +8,8 @@ import {
 	CommentIcon,
 	EmptyHeartIcon,
 	FillHeartIcon,
+	LeftArrowIcon,
+	RightArrowIcon,
 } from "@/constants/iconConstants";
 import {
 	cancelLikeGroupPost,
@@ -23,11 +25,15 @@ import {
 	InfoDiv,
 	BottomDiv,
 	ContentDiv,
+	CarouselDiv,
+	CarouselBoxDiv,
+	CarouselItemDiv,
+	ArrowButton,
 	IconDiv,
 	IconItemButton,
 } from "./Feed.styles";
 
-const Feed = ({ post, groupId, leaderId, isGroupPage }) => {
+const Feed = ({ post, groupId, isGroupPage, leaderId }) => {
 	const dispatch = useDispatch();
 
 	const { user } = useSelector((state) => state.auth);
@@ -36,7 +42,13 @@ const Feed = ({ post, groupId, leaderId, isGroupPage }) => {
 	const [postLikesCount, setPostLikesCount] = useState(post.likesCount);
 	const [isOptionOpen, setIsOptionOpen] = useState(false);
 
+	const [isPrevButtonDisplayed, setIsPrevButtonDisplayed] = useState(false);
+	const [isNextButtonDisplayed, setIsNextButtonDisplayed] = useState(false);
+	const [currentWidth, setCurrentWidth] = useState(0);
+
 	const optionMenuRef = useRef();
+	const listRef = useRef(null);
+	const itemRef = useRef(null);
 
 	const navigate = useNavigate();
 
@@ -78,6 +90,49 @@ const Feed = ({ post, groupId, leaderId, isGroupPage }) => {
 		}
 	};
 
+	const handleLeftClick = () => {
+		const wrap = itemRef.current;
+
+		wrap.scrollBy({
+			left: -500,
+			behavior: "smooth",
+		});
+
+		setCurrentWidth((prev) => prev - 500);
+	};
+
+	const handleRightClick = () => {
+		const wrap = itemRef.current;
+
+		wrap.scrollBy({
+			left: 500,
+			behavior: "smooth",
+		});
+
+		setCurrentWidth((prev) => prev + 500);
+	};
+
+	useEffect(() => {
+		if (!post.image) {
+			return;
+		}
+
+		if (
+			currentWidth !== 0 &&
+			currentWidth < post.image.split(",").length * 500
+		) {
+			setIsPrevButtonDisplayed(true);
+		} else {
+			setIsPrevButtonDisplayed(false);
+		}
+
+		if (currentWidth === post.image.split(",").length * 500 - 500) {
+			setIsNextButtonDisplayed(false);
+		} else {
+			setIsNextButtonDisplayed(true);
+		}
+	}, [currentWidth]);
+
 	return (
 		<FeedArticle
 			onClick={() =>
@@ -115,6 +170,36 @@ const Feed = ({ post, groupId, leaderId, isGroupPage }) => {
 					<p>{post.content}</p>
 				</ContentDiv>
 
+				{post.image && (
+					<CarouselDiv ref={listRef}>
+						<CarouselBoxDiv ref={itemRef}>
+							{post.image.split(",").map((img) => (
+								<CarouselItemDiv key={img}>
+									<img src={img} alt="postImg" />
+								</CarouselItemDiv>
+							))}
+						</CarouselBoxDiv>
+						{post.image.split(",").length > 1 && (
+							<>
+								{isPrevButtonDisplayed && (
+									<ArrowButton onClick={handleLeftClick} className="prevButton">
+										<LeftArrowIcon />
+									</ArrowButton>
+								)}
+
+								{isNextButtonDisplayed && (
+									<ArrowButton
+										onClick={handleRightClick}
+										className="nextButton"
+									>
+										<RightArrowIcon />
+									</ArrowButton>
+								)}
+							</>
+						)}
+					</CarouselDiv>
+				)}
+
 				<IconDiv>
 					<IconItemButton onClick={handleLikeClick}>
 						{isPostLiked ? <FillHeartIcon /> : <EmptyHeartIcon />}

src/components/Common/Feed/Feed.styles.js

@@ -91,11 +91,55 @@ export const BottomDiv = styled.div`
 export const ContentDiv = styled.div`
 	& > p {
 		color: ${({ theme: { colors } }) => colors.text_03};
-		font-size: ${({ theme: { typography } }) => typography.size.s1};
+		font-size: 15px;
 		line-height: normal;
 	}
 `;
 
+export const CarouselDiv = styled.div`
+	width: 500px;
+	height: 250px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: ${({ theme: { colors } }) => colors.disabled_text};
+	overflow: hidden;
+	position: relative;
+`;
+
+export const CarouselBoxDiv = styled.div`
+	display: flex;
+	overflow: hidden;
+`;
+
+export const CarouselItemDiv = styled.div`
+	display: flex;
+
+	& > img {
+		width: 500px;
+		height: 250px;
+		object-fit: contain;
+	}
+`;
+
+export const ArrowButton = styled.button`
+	position: absolute;
+	top: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	transform: translateY(-50%);
+
+	&.prevButton {
+		left: 0;
+	}
+
+	&.nextButton {
+		right: 0;
+	}
+`;
+
 export const IconDiv = styled.div`
 	display: flex;
 	gap: 26px;