feat: add followlist page, followerlist page

src/components/feed/FollowList.tsx

@@ -1,50 +1,64 @@
 import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
 import rightArrow from '../../assets/feed/rightArrow.svg';
 import people from '../../assets/feed/people.svg';
 import character from '../../assets/feed/character.svg';
 
 const followerData = {
   followers: [
-    { src: 'https://placehold.co/36x36', username: 'user1' },
-    { src: 'https://placehold.co/36x36', username: 'user2' },
-    { src: 'https://placehold.co/36x36', username: 'user3' },
-    { src: 'https://placehold.co/36x36', username: 'user4' },
-    { src: 'https://placehold.co/36x36', username: 'user5' },
-    { src: 'https://placehold.co/36x36', username: 'user6' },
-    { src: 'https://placehold.co/36x36', username: 'user7' },
-    { src: 'https://placehold.co/36x36', username: 'user8' },
-    { src: 'https://placehold.co/36x36', username: 'user9' },
-    { src: 'https://placehold.co/36x36', username: 'user10' },
-    { src: 'https://placehold.co/36x36', username: 'user11' },
-    { src: 'https://placehold.co/36x36', username: 'user12' },
+    { userId: 1, src: 'https://placehold.co/36x36', username: 'user1' },
+    { userId: 2, src: 'https://placehold.co/36x36', username: 'user2' },
+    { userId: 3, src: 'https://placehold.co/36x36', username: 'user3' },
+    { userId: 4, src: 'https://placehold.co/36x36', username: 'user4' },
+    { userId: 5, src: 'https://placehold.co/36x36', username: 'user5' },
+    { userId: 6, src: 'https://placehold.co/36x36', username: 'user6' },
+    { userId: 7, src: 'https://placehold.co/36x36', username: 'user7' },
+    { userId: 8, src: 'https://placehold.co/36x36', username: 'user8' },
+    { userId: 9, src: 'https://placehold.co/36x36', username: 'user9' },
+    { userId: 10, src: 'https://placehold.co/36x36', username: 'user10' },
+    { userId: 11, src: 'https://placehold.co/36x36', username: 'user11' },
+    { userId: 12, src: 'https://placehold.co/36x36', username: 'user12' },
   ],
 };
 
 const FollowList = () => {
+  const navigate = useNavigate();
   const { followers } = followerData;
   const hasFollowers = followers.length > 0;
   const visible = hasFollowers ? followers.slice(0, 10) : [];
 
+  const handleFindClick = () => {
+    navigate('/feed/usersearch');
+  };
+
+  const handleMoreClick = () => {
+    navigate('/feed/followlist');
+  };
+
+  const handleProfileClick = (userId: number) => {
+    navigate(`/otherfeed/${userId}`);
+  };
+
   return (
     <Container>
       <div className="title">
         <img src={people} />
-        <div>내 구독</div>
+        <div>내 띱</div>
       </div>
       {hasFollowers ? (
         <FollowContainer>
           <div className="followerList">
-            {visible.map(({ src, username }) => (
-              <div className="followers" key={username}>
+            {visible.map(({ userId, src, username }) => (
+              <div className="followers" key={username} onClick={() => handleProfileClick(userId)}>
                 <img src={src} />
                 <div className="username">{username}</div>
               </div>
             ))}
           </div>
-          <img src={rightArrow} alt="더보기" />
+          <img src={rightArrow} alt="더보기" onClick={handleMoreClick} />
         </FollowContainer>
       ) : (
-        <EmptyFollowerContainer>
+        <EmptyFollowerContainer onClick={handleFindClick}>
           <div>관심있는 독서메이트를 찾아보세요!</div>
           <img src={character} alt="더보기" />
         </EmptyFollowerContainer>
@@ -137,6 +151,7 @@ const EmptyFollowerContainer = styled.div`
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   line-height: 20px;
+  cursor: pointer;
 `;
 
 export default FollowList;

src/components/feed/MyFeed.tsx

@@ -1,21 +1,47 @@
 import styled from '@emotion/styled';
-import MyProfile from './MyProfile';
+import Profile from './Profile';
 import FeedPost from './FeedPost';
 import type { FeedListProps } from '../../types/post';
+import { colors, typography } from '@/styles/global/global';
+import TotalBar from './TotalBar';
 
 const Container = styled.div`
   padding-top: 136px;
   padding-bottom: 155px;
   background-color: var(--color-black-main);
 `;
 
+const EmptyState = styled.div`
+  display: flex;
+  height: 473px;
+  padding: 32px 0 20px 0;
+  justify-content: center;
+  align-items: center;
+
+  color: ${colors.white};
+  font-size: ${typography.fontSize.lg};
+  font-weight: ${typography.fontWeight.semibold};
+  line-height: 24px;
+  letter-spacing: 0.018px;
+`;
+
 const MyFeed = ({ showHeader, posts = [], isMyFeed }: FeedListProps) => {
+  const hasPosts = posts.length > 0;
+  const postCount = posts.length;
+
   return (
     <Container>
-      <MyProfile />
-      {posts.map(post => (
-        <FeedPost key={post.postId} showHeader={showHeader} isMyFeed={isMyFeed} {...post} />
-      ))}
+      <Profile showFollowButton={false} />
+      <TotalBar count={postCount} />
+      {hasPosts ? (
+        posts.map(post => (
+          <FeedPost key={post.postId} showHeader={showHeader} isMyFeed={isMyFeed} {...post} />
+        ))
+      ) : (
+        <EmptyState>
+          <div>피드에 글을 작성해 보세요</div>
+        </EmptyState>
+      )}
     </Container>
   );
 };

src/components/feed/MyFollower.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import people from '../../assets/feed/people.svg';
 import rightArrow from '../../assets/feed/rightArrow.svg';
@@ -41,6 +42,7 @@ const Container = styled.div`
     flex-direction: row;
     align-items: center;
     gap: 4px;
+    cursor: pointer;
 
     .profileImg {
       width: 24px;
@@ -51,8 +53,14 @@ const Container = styled.div`
   }
 `;
 
+interface Follower {
+  id: string;
+  profileImageUrl: string;
+}
+
 const MyFollower = () => {
-  const followers = [
+  const navigate = useNavigate();
+  const followers: Follower[] = [
     { id: '1', profileImageUrl: 'https://placehold.co/24x24' },
     { id: '2', profileImageUrl: 'https://placehold.co/24x24' },
     { id: '3', profileImageUrl: 'https://placehold.co/24x24' },
@@ -61,6 +69,10 @@ const MyFollower = () => {
     { id: '6', profileImageUrl: 'https://placehold.co/24x24' },
   ];
 
+  const handleMoreClick = () => {
+    navigate('/feed/followerlist');
+  };
+
   return (
     <Container>
       <div className="left">
@@ -70,12 +82,14 @@ const MyFollower = () => {
           <div className="disc">이 구독중</div>
         </div>
       </div>
-      <div className="right">
-        {followers.slice(0, 5).map(f => (
-          <img className="profileImg" key={f.id} src={f.profileImageUrl} alt="구독자" />
-        ))}
-        <img src={rightArrow} />
-      </div>
+      {followers.length > 0 && (
+        <div className="right" onClick={handleMoreClick}>
+          {followers.slice(0, 5).map(f => (
+            <img className="profileImg" key={f.id} src={f.profileImageUrl} alt="구독자" />
+          ))}
+          <img src={rightArrow} />
+        </div>
+      )}
     </Container>
   );
 };

src/components/feed/OtherFeed.tsx

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+import Profile from './Profile';
+import FeedPost from './FeedPost';
+import type { FeedListProps } from '../../types/post';
+import { colors, typography } from '../../styles/global/global';
+import TotalBar from './TotalBar';
+
+const Container = styled.div`
+  padding-top: 56px;
+  padding-bottom: 155px;
+  background-color: var(--color-black-main);
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  height: 473px;
+  padding: 32px 0 20px 0;
+  justify-content: center;
+  align-items: center;
+
+  color: ${colors.white};
+  font-size: ${typography.fontSize.lg};
+  font-weight: ${typography.fontWeight.semibold};
+  line-height: 24px;
+  letter-spacing: 0.018px;
+`;
+
+const OtherFeed = ({ showHeader, posts = [], isMyFeed }: FeedListProps) => {
+  const hasPosts = posts.length > 0;
+  const postCount = posts.length;
+
+  return (
+    <Container>
+      <Profile showFollowButton={true} isFollowed={false} />
+      <TotalBar count={postCount} />
+      {hasPosts ? (
+        posts.map(post => (
+          <FeedPost key={post.postId} showHeader={showHeader} isMyFeed={isMyFeed} {...post} />
+        ))
+      ) : (
+        <EmptyState>
+          <div>피드에 작성된 글이 없어요</div>
+        </EmptyState>
+      )}
+    </Container>
+  );
+};
+
+export default OtherFeed;

src/components/feed/MyProfile.tsx → src/components/feed/Profile.tsx

@@ -1,24 +1,38 @@
 import styled from '@emotion/styled';
 import MyFollower from './MyFollower';
 
-const MyProfile = () => {
+const mockProfile = {
+  profileImgUrl: 'https://placehold.co/54x54',
+  userName: '문학하는 고래',
+  userTitle: '문학가',
+  titleColor: '#a1d5ff',
+};
+
+export interface ProfileProps {
+  showFollowButton?: boolean;
+  isFollowed?: boolean;
+}
+
+const Profile = ({ showFollowButton, isFollowed }: ProfileProps) => {
+  const { profileImgUrl, userName, userTitle, titleColor } = mockProfile;
+
   return (
     <Container>
       <UserProfile>
         <div className="userInfo">
-          <img src="https://placehold.co/54x54" />
+          <img src={profileImgUrl} />
           <div className="user">
-            <div className="username">userName</div>
-            <div className="usertitle">userTitle</div>
+            <div className="username">{userName}</div>
+            <div className="usertitle" style={{ color: titleColor }}>
+              {userTitle}
+            </div>
           </div>
         </div>
-        {/* <div className="followbutton">구독</div> */}
+        {showFollowButton && (
+          <div className="followbutton">{isFollowed ? '구독 취소' : '구독'}</div>
+        )}
       </UserProfile>
       <MyFollower />
-      <TotalBar>
-        <div className="total">전체</div>
-        <div className="count">4</div>
-      </TotalBar>
     </Container>
   );
 };
@@ -29,7 +43,7 @@ const Container = styled.div`
   width: 100%;
   min-width: 320px;
   max-width: 540px;
-  height: 200px;
+  height: 166px;
   padding: 0 20px;
   padding-top: 32px;
   margin: 0 auto;
@@ -61,17 +75,16 @@ const UserProfile = styled.div`
 
       .username {
         color: var(--color-white);
-        font-size: var(--string-size-large01, 18px);
-        font-weight: var(--string-weight-semibold, 600);
-        line-height: 24px;
-        letter-spacing: 0.018px;
+        font-size: var(--font-size-xs);
+        font-weight: var(--font-weight-medium);
+        line-height: normal;
       }
 
       .usertitle {
-        color: var(--color-text-literature_mint, #a0f8e8);
-        font-size: var(--string-size-medium01, 14px);
+        color: var(--color-text-humanities_skyblue, #a1d5ff);
+        font-size: var(--font-size-xs);
         font-weight: var(--string-weight-regular, 400);
-        line-height: 20px;
+        line-height: normal;
       }
     }
   }
@@ -88,23 +101,4 @@ const UserProfile = styled.div`
   }
 `;
 
-const TotalBar = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #282828;
-  gap: 2px;
-  color: var(--color-grey-100);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  line-height: 24px;
-
-  .total {
-  }
-
-  .count {
-    text-align: right;
-  }
-`;
-
-export default MyProfile;
+export default Profile;