From a7235382190f7b75a5367d5bd9cc437dd25fd41c Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 20 Aug 2025 19:00:24 +0900
Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=EB=82=B4=20=EB=AA=A8=EC=9E=84?=
=?UTF-8?q?=EB=B0=A9=20=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/group/Modal.styles.ts | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/components/group/Modal.styles.ts b/src/components/group/Modal.styles.ts
index 0d1665bd..84ce7760 100644
--- a/src/components/group/Modal.styles.ts
+++ b/src/components/group/Modal.styles.ts
@@ -4,11 +4,14 @@ import styled from '@emotion/styled';
export const Overlay = styled.div<{ $whiteBg?: boolean }>`
display: flex;
justify-content: center;
- align-items: flex-start;
+ align-items: center;
position: fixed;
top: 0;
- left: 0;
- width: 100vw;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ max-width: 767px;
+ min-width: 320px;
height: 100vh;
background: ${({ $whiteBg }) => ($whiteBg ? 'white' : colors.black.main)};
z-index: 110;
From 778b713c5781a2f4a82113eb95edcd8678b628da Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 20 Aug 2025 19:03:12 +0900
Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=EB=A1=9C=EB=94=A9=EC=8A=A4=ED=94=BC?=
=?UTF-8?q?=EB=84=88=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/LoadingSpinner.tsx | 4 ++++
src/pages/searchBook/SearchBook.tsx | 2 +-
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/components/common/LoadingSpinner.tsx b/src/components/common/LoadingSpinner.tsx
index cc69312c..99b4bf6a 100644
--- a/src/components/common/LoadingSpinner.tsx
+++ b/src/components/common/LoadingSpinner.tsx
@@ -24,6 +24,10 @@ const LoadingSpinner = ({
const Container = styled.div<{ fullHeight: boolean }>`
display: flex;
flex-direction: column;
+ width: 100%;
+ max-width: 767px;
+ min-width: 320px;
+ margin: 0 auto;
justify-content: center;
align-items: center;
${({ fullHeight }) =>
diff --git a/src/pages/searchBook/SearchBook.tsx b/src/pages/searchBook/SearchBook.tsx
index f6b8e42a..ff362416 100644
--- a/src/pages/searchBook/SearchBook.tsx
+++ b/src/pages/searchBook/SearchBook.tsx
@@ -238,7 +238,7 @@ const SearchBook = () => {
if (isLoading || error || !bookDetail) {
if (isLoading) {
- return ;
+ return ;
}
return (
From fdc64e5fbe70f758a31ba583bf5d0a273b45f9d1 Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 20 Aug 2025 19:13:12 +0900
Subject: [PATCH 3/6] =?UTF-8?q?fix:=20isMyself=20=EB=B3=80=EC=88=98=20?=
=?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/feed/UserProfileItem.tsx | 9 +++++++--
src/pages/feed/FollowerListPage.tsx | 1 +
src/types/follow.ts | 1 +
src/types/user.ts | 1 +
4 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/src/components/feed/UserProfileItem.tsx b/src/components/feed/UserProfileItem.tsx
index bc8694ba..50641d80 100644
--- a/src/components/feed/UserProfileItem.tsx
+++ b/src/components/feed/UserProfileItem.tsx
@@ -17,13 +17,18 @@ const UserProfileItem = ({
userId,
isLast,
type,
+ isMyself,
}: UserProfileItemProps) => {
const navigate = useNavigate();
const [followed, setFollowed] = useState(isFollowing);
const { openPopup } = usePopupStore();
const handleProfileClick = () => {
- navigate(`/otherfeed/${userId}`);
+ if (isMyself) {
+ navigate(`/myfeed/${userId}`);
+ } else {
+ navigate(`/otherfeed/${userId}`);
+ }
};
const toggleFollow = async (e: React.MouseEvent) => {
@@ -62,7 +67,7 @@ const UserProfileItem = ({
- {type === 'followlist' && (
+ {type === 'followlist' && !isMyself && (
{followed ? '띱 취소' : '띱 하기'}
diff --git a/src/pages/feed/FollowerListPage.tsx b/src/pages/feed/FollowerListPage.tsx
index 69931a95..6d54b7e8 100644
--- a/src/pages/feed/FollowerListPage.tsx
+++ b/src/pages/feed/FollowerListPage.tsx
@@ -135,6 +135,7 @@ const FollowerListPage = () => {
type={type as UserProfileType}
isFollowing={user.isFollowing}
isLast={index === userList.length - 1}
+ isMyself={user.isMyself}
/>
))}
diff --git a/src/types/follow.ts b/src/types/follow.ts
index c1183b99..3fd5f735 100644
--- a/src/types/follow.ts
+++ b/src/types/follow.ts
@@ -6,4 +6,5 @@ export interface FollowData {
aliasColor?: string;
followerCount?: number;
isFollowing?: boolean;
+ isMyself?: boolean;
}
diff --git a/src/types/user.ts b/src/types/user.ts
index 5a05c8b6..dd08b47f 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -10,4 +10,5 @@ export interface UserProfileItemProps {
userId: number;
isLast?: boolean;
type?: UserProfileType;
+ isMyself?: boolean;
}
From 489aa4699adfe2241c71580398810ed7efb4539d Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 20 Aug 2025 19:59:58 +0900
Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=20=EC=B1=85=20?=
=?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/Post/PostFooter.tsx | 12 +++++-
src/components/feed/FeedPost.tsx | 4 +-
src/pages/mypage/SavePage.tsx | 47 +++++++++++++++++++----
src/types/post.ts | 1 +
4 files changed, 52 insertions(+), 12 deletions(-)
diff --git a/src/components/common/Post/PostFooter.tsx b/src/components/common/Post/PostFooter.tsx
index 7132ee41..418d9671 100644
--- a/src/components/common/Post/PostFooter.tsx
+++ b/src/components/common/Post/PostFooter.tsx
@@ -52,6 +52,7 @@ interface PostFooterProps {
isLiked?: boolean;
isPublic?: boolean;
isDetail?: boolean;
+ onSaveToggle?: (feedId: number, newSaveState: boolean) => void;
}
const PostFooter = ({
@@ -63,6 +64,7 @@ const PostFooter = ({
isLiked = false,
isPublic = true,
isDetail = false,
+ onSaveToggle,
}: PostFooterProps) => {
const [liked, setLiked] = useState(isLiked);
const [likeCount, setLikeCount] = useState(initialLikeCount);
@@ -90,9 +92,15 @@ const PostFooter = ({
const response = await postSaveFeed(feedId, !saved);
if (response.isSuccess) {
+ const newSaveState = response.data?.isSaved ?? !saved;
// 성공 시 상태 업데이트
- setSaved(response.data?.isSaved ?? !saved);
- console.log('저장 상태 변경 성공:', response.data?.isSaved);
+ setSaved(newSaveState);
+ console.log('저장 상태 변경 성공:', newSaveState);
+
+ // 부모 컴포넌트에 알림
+ if (onSaveToggle) {
+ onSaveToggle(feedId, newSaveState);
+ }
} else {
console.error('저장 상태 변경 실패:', response.message);
}
diff --git a/src/components/feed/FeedPost.tsx b/src/components/feed/FeedPost.tsx
index 8d421eb0..28d3105a 100644
--- a/src/components/feed/FeedPost.tsx
+++ b/src/components/feed/FeedPost.tsx
@@ -26,13 +26,13 @@ const BorderBottom = styled.div`
background: #1c1c1c;
`;
-const FeedPost = ({ showHeader, isLast, isMyFeed, ...postData }: FeedPostProps) => {
+const FeedPost = ({ showHeader, isLast, isMyFeed, onSaveToggle, ...postData }: FeedPostProps) => {
return (
<>
{showHeader && }
-
+
{!isLast && }
diff --git a/src/pages/mypage/SavePage.tsx b/src/pages/mypage/SavePage.tsx
index 54ac2391..12530160 100644
--- a/src/pages/mypage/SavePage.tsx
+++ b/src/pages/mypage/SavePage.tsx
@@ -11,6 +11,7 @@ import { colors, typography } from '@/styles/global/global';
import { getSavedBooksInMy, type SavedBookInMy } from '@/api/books/getSavedBooksInMy';
import { getSavedFeedsInMy, type SavedFeedInMy } from '@/api/feeds/getSavedFeedsInMy';
import { postSaveBook } from '@/api/books/postSaveBook';
+
import LoadingSpinner from '@/components/common/LoadingSpinner';
const tabs = ['피드', '책'];
@@ -38,7 +39,17 @@ const SavePage = () => {
navigate('/mypage');
};
- // 저장된 피드 로드
+ // 저장된 책 목록 로드 함수
+ const loadSavedBooks = useCallback(async () => {
+ try {
+ const response = await getSavedBooksInMy();
+ setSavedBooks(response.data.bookList);
+ } catch (error) {
+ console.error('저장된 책 목록 로드 실패:', error);
+ }
+ }, []);
+
+ // 저장된 피드 목록 로드 함수
const loadSavedFeeds = useCallback(async (cursor: string | null = null) => {
try {
setFeedLoading(true);
@@ -61,7 +72,7 @@ const SavePage = () => {
}
}, []);
- // 페이지 진입 시 모든 데이터 로드
+ // 페이지 진입 시 모든 데이터 로드 (한 번만 실행)
useEffect(() => {
const loadAllData = async () => {
try {
@@ -88,7 +99,7 @@ const SavePage = () => {
};
loadAllData();
- }, []); // 한 번만 실행
+ }, []); // 빈 의존성 배열로 변경
// Intersection Observer 설정 (피드)
useEffect(() => {
@@ -122,10 +133,15 @@ const SavePage = () => {
const newSaveState = !currentBook.isSaved;
await postSaveBook(isbn, newSaveState);
- // 로컬 상태 업데이트
- setSavedBooks(prev =>
- prev.map(book => (book.isbn === isbn ? { ...book, isSaved: newSaveState } : book)),
- );
+ // 저장 취소인 경우 저장된 책 목록을 다시 불러옴
+ if (!newSaveState) {
+ await loadSavedBooks();
+ } else {
+ // 저장인 경우 로컬 상태만 업데이트
+ setSavedBooks(prev =>
+ prev.map(book => (book.isbn === isbn ? { ...book, isSaved: newSaveState } : book)),
+ );
+ }
console.log('저장 토글:', isbn, newSaveState);
} catch (error) {
@@ -133,6 +149,19 @@ const SavePage = () => {
}
};
+ // 피드 저장 토글 처리
+ const handleFeedSaveToggle = async (feedId: number, newSaveState: boolean) => {
+ try {
+ if (!newSaveState) {
+ // 저장 취소인 경우 리스트에서 제거
+ setSavedFeeds(prev => prev.filter(feed => feed.feedId !== feedId));
+ console.log('피드 저장 취소 완료:', feedId);
+ }
+ } catch (error) {
+ console.error('피드 저장 상태 변경 실패:', error);
+ }
+ };
+
return (
{
showHeader={true}
isMyFeed={false}
isLast={index === savedFeeds.length - 1}
+ onSaveToggle={handleFeedSaveToggle}
{...feed}
/>
))}
@@ -258,8 +288,9 @@ const EmptyState = styled.div`
const BookList = styled.div`
display: flex;
flex-direction: column;
+ width: 100%;
min-width: 320px;
- max-width: 540px;
+ max-width: 767px;
padding-top: 32px;
margin: 0 auto;
width: 100%;
diff --git a/src/types/post.ts b/src/types/post.ts
index f275a192..a329791e 100644
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -31,6 +31,7 @@ export interface FeedPostProps extends PostData {
isMyFeed?: boolean;
isTotalFeed?: boolean;
isLast?: boolean;
+ onSaveToggle?: (feedId: number, newSaveState: boolean) => void;
}
export type PostBodyProps = Pick<
From e3a5ccfc5af3fe03e1056e555487146b28452bc0 Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 20 Aug 2025 20:45:55 +0900
Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=EC=82=AC=EC=A7=84=20=ED=81=B4?=
=?UTF-8?q?=EB=A6=AD=20=EB=B2=94=EC=9C=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/Post/PostBody.tsx | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/components/common/Post/PostBody.tsx b/src/components/common/Post/PostBody.tsx
index 59f44074..383434b2 100644
--- a/src/components/common/Post/PostBody.tsx
+++ b/src/components/common/Post/PostBody.tsx
@@ -9,6 +9,7 @@ const Container = styled.div`
flex-direction: column;
width: 100%;
gap: 16px;
+ cursor: pointer;
`;
const PostContent = styled.div<{ hasImage: boolean }>`
@@ -82,9 +83,11 @@ const PostBody = ({
}, [contentBody]);
return (
-
-
- handlePostClick(feedId)}>
+ handlePostClick(feedId)}>
+ e.stopPropagation()}>
+
+
+
{contentBody}
From ae2f98a471efcd80c29bb3869a78ea27e38fa7c7 Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 20 Aug 2025 21:08:31 +0900
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=EB=82=B4=20=EB=9D=B1=20=EB=AA=A9?=
=?UTF-8?q?=EB=A1=9D=20=EC=A0=84=EC=B2=B4=20=EB=B0=94=20=EC=84=A0=20?=
=?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/feed/FollowerListPage.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/pages/feed/FollowerListPage.tsx b/src/pages/feed/FollowerListPage.tsx
index 6d54b7e8..c4129f26 100644
--- a/src/pages/feed/FollowerListPage.tsx
+++ b/src/pages/feed/FollowerListPage.tsx
@@ -157,7 +157,9 @@ const Wrapper = styled.div`
const TotalBar = styled.div`
position: fixed;
top: 0;
- width: 727px;
+ width: 94.8%;
+ max-width: 727px;
+ min-width: 320px;
padding: 76px 0px 4px 0px;
border-bottom: 1px solid var(--color-darkgrey-dark);
background-color: var(--color-black-main);