diff --git a/src/api/users/getRecentFollowing.ts b/src/api/users/getRecentFollowing.ts index db0773bd..469c1698 100644 --- a/src/api/users/getRecentFollowing.ts +++ b/src/api/users/getRecentFollowing.ts @@ -13,7 +13,7 @@ export interface GetRecentFollowingResponse { code: number; message: string; data: { - recentWriters: RecentWriterData[]; + myFollowingUsers: RecentWriterData[]; }; } diff --git a/src/components/feed/FollowList.tsx b/src/components/feed/FollowList.tsx index d259d57e..abe00877 100644 --- a/src/components/feed/FollowList.tsx +++ b/src/components/feed/FollowList.tsx @@ -9,7 +9,7 @@ import { getRecentFollowing, type RecentWriterData } from '@/api/users/getRecent const FollowList = () => { const navigate = useNavigate(); - const [recentWriters, setRecentWriters] = useState([]); + const [myFollowings, setMyFollowings] = useState([]); const [loading, setLoading] = useState(false); // API에서 최근 글 작성한 팔로우 리스트 조회 @@ -19,14 +19,14 @@ const FollowList = () => { const response = await getRecentFollowing(); if (response.isSuccess) { - setRecentWriters(response.data.recentWriters); + setMyFollowings(response.data.myFollowingUsers); } else { console.error('최근 팔로우 작성자 조회 실패:', response.message); - setRecentWriters([]); + setMyFollowings([]); } } catch (error) { console.error('최근 팔로우 작성자 조회 중 오류:', error); - setRecentWriters([]); + setMyFollowings([]); } finally { setLoading(false); } @@ -37,8 +37,8 @@ const FollowList = () => { fetchRecentFollowing(); }, []); - const hasFollowers = recentWriters.length > 0; - const visible = hasFollowers ? recentWriters.slice(0, 10) : []; + const hasFollowers = myFollowings.length > 0; + const visible = hasFollowers ? myFollowings.slice(0, 10) : []; const handleFindClick = () => { navigate('/feed/search'); diff --git a/src/components/feed/TabBar.tsx b/src/components/feed/TabBar.tsx index 4e53d2b3..d761b782 100644 --- a/src/components/feed/TabBar.tsx +++ b/src/components/feed/TabBar.tsx @@ -26,21 +26,31 @@ const TabButton = styled.div` padding: 8px 4px; font-size: var(--font-size-lg); cursor: pointer; + position: relative; &.active { color: var(--color-white); - border-bottom: 2px solid var(--color-white); font-weight: var(--font-weight-semibold); line-height: 24px; } &.inactive { color: var(--color-grey-300); - border-bottom: 2px solid transparent; font-weight: var(--font-weight-medium); line-height: 24px; } `; +const ActiveIndicator = styled.div<{ activeIndex: number }>` + position: absolute; + bottom: 0; + left: 20px; + width: 60px; + height: 2px; + background-color: var(--color-white); + transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateX(${props => props.activeIndex * 80}px); +`; + interface TabProps { tabs: string[]; activeTab: string; @@ -48,6 +58,9 @@ interface TabProps { } const TabBar = ({ tabs, activeTab, onTabClick }: TabProps) => { + // 현재 활성 탭의 인덱스 계산 + const activeIndex = tabs.findIndex(tab => tab === activeTab); + return ( {tabs.map(tab => ( @@ -59,6 +72,8 @@ const TabBar = ({ tabs, activeTab, onTabClick }: TabProps) => { {tab} ))} + {/* 슬라이드 애니메이션 밑줄 */} + ); }; diff --git a/src/pages/mypage/Mypage.tsx b/src/pages/mypage/Mypage.tsx index 17936f5f..2a08d959 100644 --- a/src/pages/mypage/Mypage.tsx +++ b/src/pages/mypage/Mypage.tsx @@ -54,7 +54,7 @@ const Mypage = () => { }; const handleNotice = () => { - window.open('https://www.naver.com', '_blank'); + window.open('https://slashpage.com/thip/7vgjr4m1nynpy2dwpy86', '_blank'); }; const handleSave = () => { @@ -69,6 +69,14 @@ const Mypage = () => { navigate('/mypage/withdraw'); }; + const handleGuide = () => { + window.open('https://slashpage.com/thip/ywk9j72989p6rmgpqvnd', '_blank'); + }; + + const handleService = () => { + window.open('https://slashpage.com/thip/xjqy1g2vw7vejm6vd54z', '_blank'); + }; + return (
마이페이지
@@ -97,10 +105,15 @@ const Mypage = () => { 메뉴 - + - - + +