From 9ee9dc2e78b15d6a67c05f0bc433a171d0c405e7 Mon Sep 17 00:00:00 2001
From: yumin22 <22joomin@naver.com>
Date: Fri, 1 Nov 2024 00:00:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20postFinalContent=20GET=20api=20?=
=?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=EC=A1=B0=ED=9A=8C=20Modal=20?=
=?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/containers/myPage/myPage.presenter.jsx | 116 +++++-------------
src/containers/myPage/myPage.style.jsx | 17 +++
.../myPage/textDetail.component.jsx | 95 ++++++++++++++
3 files changed, 143 insertions(+), 85 deletions(-)
diff --git a/src/containers/myPage/myPage.presenter.jsx b/src/containers/myPage/myPage.presenter.jsx
index 4f96688..f9f1929 100644
--- a/src/containers/myPage/myPage.presenter.jsx
+++ b/src/containers/myPage/myPage.presenter.jsx
@@ -2,35 +2,28 @@ import React, { useEffect, useState } from 'react';
import * as S from "./myPage.style";
import * as C from "../createText/createText.style";
import useStore from "../../store/useStore";
+import TextDetail from './textDetail.component';
const MyPageUI = () => {
const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
const { goToHome } = useStore();
- const userData = localStorage.getItem('userdata')
const [posts, setPosts] = useState([]);
- const [page, setPage] = useState(0); // 현재 페이지 상태
- const [totalPages, setTotalPages] = useState(1); // 전체 페이지 수
- const [businessName, setBusinessName] = useState("");
- const [location, setLocation] = useState("");
- const [address, setAddress] = useState("");
- const handleSubmit = () => {
- closeModal();
- // 날짜 형식 파싱
+ const [page, setPage] = useState(0);
+ const [totalPages, setTotalPages] = useState(1);
+ const [selectedPostId, setSelectedPostId] = useState(null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ // 날짜 형식 파싱
const formatDate = (dateString) => {
const date = new Date(dateString);
- const options = { month: 'numeric', day: 'numeric', weekday: 'short', hour: 'numeric', minute: 'numeric' };
return `${date.getMonth() + 1}월 ${date.getDate()}일 (${date.toLocaleDateString('ko-KR', { weekday: 'short' })}) ${date.getHours()}시 ${date.getMinutes()}분`;
};
+
useEffect(() => {
const fetchPosts = async () => {
try {
const accessToken = localStorage.getItem('accessToken');
- if (!accessToken) {
- console.error("accessToken 오류 발생");
- return;
- }
-
const response = await fetch(`${BACKEND_URL}/post/findAll?page=${page}&size=3`, {
method: "GET",
headers: {
@@ -41,7 +34,7 @@ const MyPageUI = () => {
if (response.ok) {
const data = await response.json();
- const sortedPosts = data.content.sort((a, b) => new Date(b.postDate) - new Date(a.postDate)); // 최신순 정렬
+ const sortedPosts = data.content.sort((a, b) => new Date(b.postDate) - new Date(a.postDate));
setPosts(sortedPosts);
setTotalPages(data.totalPages);
} else {
@@ -55,107 +48,60 @@ const MyPageUI = () => {
fetchPosts();
}, [BACKEND_URL, page]);
- // 페이지 변경 함수
- const handlePageChange = (newPage) => {
- if (newPage >= 0 && newPage < totalPages) {
- setPage(newPage);
- }
+ // 모달
+ const openModal = (postId) => {
+ setSelectedPostId(postId);
+ setIsModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setIsModalOpen(false);
+ setSelectedPostId(null);
};
- const postData = async () => {
- try {
- const response = await axios.post(`${BACKEND_URL}/users/info`, {
- businessName,
- location,
- address
- }, {
- headers: {
- 'Content-Type': 'application/json',
- 'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
- }
- });
- console.log(response.data);
- } catch (error) {
- console.error('Error:', error.response ? error.response.data : error.message);
- }
- };
- postData();
-
- }
return (
홍보사원, 영남이
-
+
마이페이지
-
- 회원 정보 수정
-
- 상호명
-
- setBusinessName(e.target.value)}
- />
-
-
-
-
- 지역
-
- setLocation(e.target.value)}
- />
-
-
-
-
- 주소
-
- setAddress(e.target.value)}
- />
-
-
-
- 저장하기
-
이전 홍보글 확인하기
- {/* 최신순으로 정렬 */}
{posts.map((post) => (
console.log(`홍보글 ID: ${post.postId} 클릭됨`)}
+ onClick={() => openModal(post.postId)} // postId로 모달 열기
>
{formatDate(post.postDate)}
))}
+ {/* 페이지네이션 */}
{page > 0 && (
- handlePageChange(page - 1)}>
-
+ setPage(page - 1)}>
+ 이전
)}
{page + 1} / {totalPages}
{page < totalPages - 1 && (
- handlePageChange(page + 1)}>
-
+ setPage(page + 1)}>
+ 다음
)}
+
);
};
+
export default MyPageUI;
diff --git a/src/containers/myPage/myPage.style.jsx b/src/containers/myPage/myPage.style.jsx
index 2351f2c..00c8794 100644
--- a/src/containers/myPage/myPage.style.jsx
+++ b/src/containers/myPage/myPage.style.jsx
@@ -144,4 +144,21 @@ export const PaginationBtn = styled.button`
background: none;
`
+// textDetail
+export const IconGroup = styled.div`
+ display: flex;
+ gap: 15px;
+ font-size: 18px;
+`
+export const ViewText = styled.div`
+ background: gray;
+ width: 100%;
+ min-height: 50%;
+ margin-top: 10%;
+ padding: 5%;
+ font-size: 16px;
+ color: black;
+ font-weight: 500;
+ font-family: "Pretendard";
+`
diff --git a/src/containers/myPage/textDetail.component.jsx b/src/containers/myPage/textDetail.component.jsx
index e69de29..db0aac9 100644
--- a/src/containers/myPage/textDetail.component.jsx
+++ b/src/containers/myPage/textDetail.component.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+import Modal from 'react-modal';
+import * as S from "./myPage.style";
+
+Modal.setAppElement('#root');
+
+const TextDetail = ({ isOpen, postId, closeModal }) => {
+ const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
+ const [postContent, setPostContent] = useState("");
+ const [copied, setCopied] = useState(false);
+
+ useEffect(() => {
+ if (postId && isOpen) {
+ const fetchPostContent = async () => {
+ try {
+ const accessToken = localStorage.getItem('accessToken');
+ const response = await fetch(`${BACKEND_URL}/post/findOne/${postId}`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${accessToken}`,
+ },
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ setPostContent(data.postFinalContent); // 불러온 콘텐츠 설정
+ } else {
+ console.error("조회 실패 오류");
+ }
+ } catch (error) {
+ console.error("요청 오류:", error);
+ }
+ };
+ fetchPostContent();
+ }
+ }, [postId, isOpen, BACKEND_URL]);
+
+ // 클립보드 복사
+ const copyToClipboard = () => {
+ navigator.clipboard.writeText(postContent)
+ .then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000); // 2초 후 원래 아이콘으로
+ })
+ .catch((error) => console.error("복사 실패:", error));
+ };
+
+ return (
+
+
+
+
+
+
+ {postContent}
+
+
+ );
+}
+
+export default TextDetail;