diff --git a/src/containers/myPage/myPage.presenter.jsx b/src/containers/myPage/myPage.presenter.jsx
index a0b5e9e..6b3e5bf 100644
--- a/src/containers/myPage/myPage.presenter.jsx
+++ b/src/containers/myPage/myPage.presenter.jsx
@@ -2,17 +2,30 @@ 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 = () => {
import axios from 'axios';
const MyPageUI = ({ closeModal }) => {
const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
const { goToHome } = useStore();
const userData = JSON.parse(localStorage.getItem('userdata')) || {};
-
const [posts, setPosts] = useState([]);
+ 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);
+ return `${date.getMonth() + 1}월 ${date.getDate()}일 (${date.toLocaleDateString('ko-KR', { weekday: 'short' })}) ${date.getHours()}시 ${date.getMinutes()}분`;
+ };
const [page, setPage] = useState(0); // 현재 페이지 상태
const [totalPages, setTotalPages] = useState(1); // 전체 페이지 수
-
- // useState로 초기 상태 설정
+ const [businessName, setBusinessName] = useState("");
+ const [location, setLocation] = useState("");
+ const [address, setAddress] = useState("");
const [businessName, setBusinessName] = useState(userData.businessName || "");
const [location, setLocation] = useState(userData.location || "");
const [address, setAddress] = useState(userData.address || "");
@@ -20,11 +33,6 @@ const MyPageUI = ({ closeModal }) => {
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: {
@@ -48,19 +56,30 @@ const MyPageUI = ({ closeModal }) => {
fetchPosts();
}, [BACKEND_URL, page]);
-
- // 날짜 형식 파싱
- 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()}분`;
+ // 모달
+ const openModal = (postId) => {
+ setSelectedPostId(postId);
+ setIsModalOpen(true);
};
- const handlePageChange = (newPage) => {
- if (newPage >= 0 && newPage < totalPages) {
- setPage(newPage);
- }
+ const closeModal = () => {
+ setIsModalOpen(false);
+ setSelectedPostId(null);
};
+
+ // 날짜 형식 파싱
+ 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()}분`;
+ };
+
+ const handlePageChange = (newPage) => {
+ if (newPage >= 0 && newPage < totalPages) {
+ setPage(newPage);
+ }
+ };
+
const handleSubmit = () => {
// 페이지 변경 함수
const postData = async () => {
@@ -135,27 +154,33 @@ const MyPageUI = ({ closeModal }) => {
{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)}>
+ 다음
)}
+
);
};
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;