feat: 내 띱 목록 API 연동 완료

src/api/users/getRecentFollowing.ts

@@ -13,7 +13,7 @@ export interface GetRecentFollowingResponse {
   code: number;
   message: string;
   data: {
-    recentWriters: RecentWriterData[];
+    myFollowingUsers: RecentWriterData[];
   };
 }
 

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<RecentWriterData[]>([]);
+  const [myFollowings, setMyFollowings] = useState<RecentWriterData[]>([]);
   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');

src/components/feed/TabBar.tsx

@@ -26,28 +26,41 @@ 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;
   onTabClick: (tab: string) => void;
 }
 
 const TabBar = ({ tabs, activeTab, onTabClick }: TabProps) => {
+  // 현재 활성 탭의 인덱스 계산
+  const activeIndex = tabs.findIndex(tab => tab === activeTab);
+
   return (
     <Container>
       {tabs.map(tab => (
@@ -59,6 +72,8 @@ const TabBar = ({ tabs, activeTab, onTabClick }: TabProps) => {
           {tab}
         </TabButton>
       ))}
+      {/* 슬라이드 애니메이션 밑줄 */}
+      <ActiveIndicator activeIndex={activeIndex} />
     </Container>
   );
 };

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 (
     <Wrapper>
       <Header>마이페이지</Header>
@@ -97,10 +105,15 @@ const Mypage = () => {
           <SectionTitle>메뉴</SectionTitle>
           <MenuGrid>
             <MenuButton src={alert} name="알림설정" isButton onClick={handleAlert} />
-            <MenuButton src={service} name="고객센터" isButton />
+            <MenuButton src={service} name="고객센터" isButton onClick={handleService} />
             <MenuButton src={notice} name="공지사항" isButton />
-            <MenuButton src={terms} name="이용약관" isButton onClick={handleNotice} />
-            <MenuButton src={guide} name="가이드" isButton />
+            <MenuButton
+              src={terms}
+              name="개인정보처리방침 & 이용약관"
+              isButton
+              onClick={handleNotice}
+            />
+            <MenuButton src={guide} name="가이드" isButton onClick={handleGuide} />
             <MenuButton src={ver} name="버젼 1.0" isButton={false} />
           </MenuGrid>
         </Section>