From 17446a661d71fdf2312a2fdcf1cc1be18b4f3884 Mon Sep 17 00:00:00 2001
From: soo yeon <80268199+sypaik-dev@users.noreply.github.com>
Date: Wed, 22 Nov 2023 18:46:49 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20Rename:=20=ED=94=84=EB=A1=9C?=
=?UTF-8?q?=ED=95=84=20=ED=8F=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
=?UTF-8?q?=ED=99=94=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EA=B2=BD=EB=A1=9C=20?=
=?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../ProfileEditPage/ProfileEditPageStyle.jsx | 71 -------------------
.../{ => ProfilePage}/ProfilePage.jsx | 66 +++++++++--------
.../ProfileSettingPage/ProfileSettingPage.jsx | 2 +-
3 files changed, 33 insertions(+), 106 deletions(-)
delete mode 100644 src/pages/ProfilePage/ProfileEditPage/ProfileEditPageStyle.jsx
rename src/pages/ProfilePage/{ => ProfilePage}/ProfilePage.jsx (67%)
diff --git a/src/pages/ProfilePage/ProfileEditPage/ProfileEditPageStyle.jsx b/src/pages/ProfilePage/ProfileEditPage/ProfileEditPageStyle.jsx
deleted file mode 100644
index 4c0c585..0000000
--- a/src/pages/ProfilePage/ProfileEditPage/ProfileEditPageStyle.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled, { css } from "styled-components";
-import AddImg from '../../../assets/sprite/img-btn.svg';
-
-export const Container = styled.main`
- margin: 0 auto;
-
- .spriteImg-wrapper {
- position: absolute;
- bottom: 0;
- }
-
- .upload-button {
- position: absolute;
- left: 0;
- }
-`;
-
-export const ImageSection = styled.section`
-`;
-
-export const Label = styled.label`
- display: block;
- position: relative;
- width: 11rem;
- height: 11rem;
- margin: 3.5rem auto 5.5rem;
- background-color: white;
- border-radius: 50%;
- border: 1px solid ${({ theme }) => theme.colors.placeHolderColor};
- cursor: pointer;
-
- &::after {
- content: '';
- display: block;
- position: absolute;
- right: 0;
- bottom: 0;
- width: 3.6em;
- height: 3.6rem;
- background: url(${AddImg}) no-repeat center / 3.6rem 3.6rem;
- z-index: 2;
- }
-`
-
-export const Form = styled.form`
- &:last-child {
- margin-bottom: 3rem;
- }
-`;
-
-export const Image = styled.img`
- width: 100%;
- height: 100%;
- object-fit: contain;
- border-radius: 50%;
-`;
-
-export const ImageInput = styled.input`
- width: 0.1rem;
- height: 0.1rem;
- position: absolute;
- z-index: -1000rem;
-`;
-
-export const ErrorMessage = styled.p`
- ${({ theme }) => css`
- color: ${theme.colors.errorText};
- font-size: ${theme.fontSize.small};
- margin-top: -0.9rem;
- `}
-`;
diff --git a/src/pages/ProfilePage/ProfilePage.jsx b/src/pages/ProfilePage/ProfilePage/ProfilePage.jsx
similarity index 67%
rename from src/pages/ProfilePage/ProfilePage.jsx
rename to src/pages/ProfilePage/ProfilePage/ProfilePage.jsx
index 8814a66..5073a5d 100644
--- a/src/pages/ProfilePage/ProfilePage.jsx
+++ b/src/pages/ProfilePage/ProfilePage/ProfilePage.jsx
@@ -2,31 +2,29 @@ import React, { useState, useEffect, lazy, Suspense } from 'react';
import styled from 'styled-components';
import { useParams, useNavigate } from 'react-router-dom';
import { useRecoilValue, useRecoilCallback, useSetRecoilState } from 'recoil';
-import { useQuery } from 'react-query';
-import Header from '../../components/Header/TopBasicNavHeader';
-import Footer from '../../components/Footer/TabMenu';
-import Loading from '../../components/common/Loading/Loading';
-import Modal from '../../components/common/Modal/PostModal';
-import IconPostModal from '../../components/common/Modal/IconPostModal';
+import { useQuery, useInfiniteQuery } from 'react-query';
+import Header from '../../../components/Header/TopBasicNavHeader';
+import Footer from '../../../components/Footer/TabMenu';
+import Loading from '../../../components/common/Loading/Loading';
+import Modal from '../../../components/common/Modal/PostModal';
+import IconPostModal from '../../../components/common/Modal/IconPostModal';
import {
deletePostData,
resetProfile,
logOut,
reportUserPost,
sharePost,
-} from '../../components/common/Modal/ModalFunction';
-import PostPage from '../PostPage/PostPage';
-import { getUserProfile } from '../../api/profile';
-import { getMyPost } from '../../api/post';
-import { loginAtom } from '../../atoms/LoginAtom';
-import { userInfoAtom } from '../../atoms/UserAtom';
-import ProfileCard from '../../components/Profile/ProfileCard/ProfileCard';
+} from '../../../components/common/Modal/ModalFunction';
+import PostPage from '../../PostPage/PostPage';
+import { getUserProfile } from '../../../api/profile';
+import { getMyPost } from '../../../api/post';
+import { loginAtom } from '../../../atoms/LoginAtom';
+import { userInfoAtom } from '../../../atoms/UserAtom';
+import ProfileCard from '../../../components/Profile/ProfileCard/ProfileCard';
const ProfilePage = () => {
-
const { accountname: accountName } = useParams();
const navigate = useNavigate();
- const [posts, setPosts] = useState([]);
const [isModalOpen, setIsModalOpen] = useState(false);
const userToken = localStorage.getItem('token');
const userInfo = useRecoilValue(userInfoAtom);
@@ -36,26 +34,23 @@ const ProfilePage = () => {
const [modalText, setModalText] = useState([]);
const [modalFunc, setModalFunc] = useState([]);
-
useEffect(() => {
setIsDelete(false);
setIsModalOpen(false);
}, [isDelete]);
- const { data: userProfile, isLoading } = useQuery([
- 'getUserProfile', accountName],
- () => getUserProfile(accountName));
-
+ const { data: userProfile, isLoading } = useQuery(['getUserProfile', accountName], () => getUserProfile(accountName));
-// 내 게시글 목록
- const getPost = async () => {
- try {
- const postData = await getMyPost(accountName, 10, 0);
- setPosts(postData.post);
- } catch (error) {
- console.error('Error fetching user posts:', error);
+ // Infinite scroll
+ const { data: postData, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(
+ ['getMyPost', accountName],
+ ({ pageParam = 0 }) => getMyPost(accountName, 5, pageParam),
+ {
+ getNextPageParam: (lastPage, pages) => lastPage.hasMore ? pages.length : undefined,
}
- };
+ );
+
+ const posts = postData ? postData.pages.flatMap(page => page.post) : [];
const handleResetState = useRecoilCallback(({ reset }) => () => {
reset(userInfoAtom);
@@ -104,13 +99,12 @@ const ProfilePage = () => {
}
};
-
if (isLoading) {
return (
<>
- isLoading
+ isLoading
- )
+ );
}
return (
@@ -130,6 +124,11 @@ const ProfilePage = () => {
posts.map((post, index) => (
))}
+ {hasNextPage && (
+
+ )}
{isModalOpen && (
@@ -150,9 +149,8 @@ const ProfilePage = () => {
export default ProfilePage;
-const Container = styled.div`
-`
+const Container = styled.div``;
const Section = styled.section`
margin-bottom: 6rem;
-`
\ No newline at end of file
+`;
diff --git a/src/pages/SignupPage/ProfileSettingPage/ProfileSettingPage.jsx b/src/pages/SignupPage/ProfileSettingPage/ProfileSettingPage.jsx
index 3571972..966ef2f 100644
--- a/src/pages/SignupPage/ProfileSettingPage/ProfileSettingPage.jsx
+++ b/src/pages/SignupPage/ProfileSettingPage/ProfileSettingPage.jsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import { useNavigate, useLocation } from 'react-router-dom';
import { useMutation } from 'react-query';
import { postAccountnameDuplicate, postUserSignup } from '../../../api/auth';
-import ProfileForm from '../../../components/Profile/ProfileForm';
+import ProfileForm from '../../../components/Profile/ProfileForm/ProfileForm';
const ProfileSettingPage = () => {
const [isError, setIsError] = useState(false);