Merge pull request #34 from prgrms-web-devcourse-final-project/featur…

…e/QFEED-69

[Feat] QFEED-70 팔로워 팔로잉 레이아웃

src/pages/ChatList/index.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ProfileImageCon from '../../components/ui/ProfileImageCon/ProfileImageCon';
 import InputBar from '../../components/ui/InputBar/InputBar';
-
+import Header from '@/components/common/Header';
 interface ChatItemProps {
   id: string; // 채팅방 ID
   profileImg?: string; // 프로필 이미지 URL
@@ -26,7 +26,7 @@ const ChatItem: React.FC<ChatItemProps> = ({
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(`/chat/${id}`); // 클릭 시 채팅방으로 이동
+    navigate(`/chatroom/${id}`); // 클릭 시 채팅방으로 이동
   };
 
   return (
@@ -86,6 +86,7 @@ const ChatList: React.FC = () => {
   return (
     <div css={chatListContainerStyle}>
       {/* 검색 인풋 */}
+      <Header />
       <InputBar placeholder="검색어를 입력하세요" onSearch={handleSearchChange} />
       {/* 채팅 리스트 */}
       <div css={chatListStyle}>
@@ -106,7 +107,8 @@ const chatListContainerStyle = css`
 `;
 const chatListStyle = css`
   height: 100vh;
-  background-color: #f3ebe0;
+  background-color: #f9f3ec;
+
   border-bottom: 1px solid #ccc;
 `;
 

src/pages/ChatRoom/index.tsx

@@ -2,6 +2,7 @@
 import { css } from '@emotion/react';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import ProfileImageCon from '../../components/ui/ProfileImageCon/ProfileImageCon';
 import { HiOutlineBell } from 'react-icons/hi2';
 import { HiOutlineBellSlash } from 'react-icons/hi2';
@@ -10,6 +11,7 @@ import ChatInputBar from '@/pages/ChatRoom/component/InputBar';
 
 const ChatRoom: React.FC = () => {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
   const [messages, setMessages] = useState([
     {
       id: 1,
@@ -55,7 +57,7 @@ const ChatRoom: React.FC = () => {
     <div css={chatRoomContainer}>
       {/* Header */}
       <div css={headerStyle}>
-        <IoChevronBack />
+        <IoChevronBack css={backIconStyle} onClick={() => navigate(-1)} />
         <span css={headerTitle}>{id} 백종원</span>
         <button css={iconButtonStyle} onClick={toggleNotification}>
           {isNotificationEnabled ? (
@@ -117,8 +119,7 @@ const iconStyle = css`
 const chatRoomContainer = css`
   display: flex;
   flex-direction: column;
-  height: 773px;
-  background-color: #f9f4ef;
+  height: 100vh;
 `;
 
 const headerStyle = css`
@@ -135,12 +136,16 @@ const headerTitle = css`
   font-size: 18px;
   font-weight: bold;
 `;
+const backIconStyle = css`
+  font-size: 24px;
+  cursor: pointer;
+`;
 
 const messageListStyle = css`
   flex: 1;
   padding: 10px;
   overflow-y: auto;
-  background-color: #f3ebe0;
+  background-color: #f9f3ec;
 `;
 
 const otherMessageStyle = css`

src/pages/follower/index.tsx

@@ -0,0 +1,188 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { IoChevronBack } from 'react-icons/io5';
+import ProfileImageCon from '@/components/ui/ProfileImageCon/ProfileImageCon';
+
+const FollowerFollowingPage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('follower'); // "follower" or "following"
+  const navigate = useNavigate();
+  const [followers, setFollowers] = useState([
+    { id: 1, name: '백종원', isFollowing: true },
+    { id: 2, name: '백종원', isFollowing: false },
+    { id: 3, name: '백종원', isFollowing: false },
+    { id: 4, name: '백종원', isFollowing: true },
+  ]);
+
+  const [following, setFollowing] = useState([
+    { id: 1, name: '백종원', isFollowing: true },
+    { id: 2, name: '백종원', isFollowing: true },
+    { id: 3, name: '백종원', isFollowing: true },
+    { id: 4, name: '백종원', isFollowing: true },
+  ]);
+
+  const handleFollowerToggle = (id: number) => {
+    setFollowers((prev) =>
+      prev.map((follower) =>
+        follower.id === id ? { ...follower, isFollowing: !follower.isFollowing } : follower
+      )
+    );
+  };
+  const handleFollowingToggle = (id: number) => {
+    setFollowing((prev) =>
+      prev.map((follow) =>
+        follow.id === id ? { ...follow, isFollowing: !follow.isFollowing } : follow
+      )
+    );
+  };
+
+  return (
+    <div css={containerStyle}>
+      {/* Header */}
+      <div css={headerStyle}>
+        <IoChevronBack css={backIconStyle} onClick={() => navigate(-1)} />
+      </div>
+
+      {/* Tabs */}
+      <div css={tabContainerStyle}>
+        <button
+          css={[tabStyle, activeTab === 'follower' && activeTabStyle]}
+          onClick={() => setActiveTab('follower')}
+        >
+          팔로워
+        </button>
+        <button
+          css={[tabStyle, activeTab === 'following' && activeTabStyle]}
+          onClick={() => setActiveTab('following')}
+        >
+          팔로잉
+        </button>
+      </div>
+
+      {/* List */}
+      <div css={listContainerStyle}>
+        {activeTab === 'follower' &&
+          followers.map((follower) => (
+            <div key={follower.id} css={listItemStyle}>
+              <ProfileImageCon src="" size={40} />
+              <span css={nameStyle}>{follower.name}</span>
+              {follower.isFollowing ? (
+                <div css={buttonGroupStyle}>
+                  <button css={ButtonStyle}>메시지</button>
+                  <button css={ButtonStyle} onClick={() => handleFollowerToggle(follower.id)}>
+                    팔로우 취소
+                  </button>
+                </div>
+              ) : (
+                <button css={ButtonStyle} onClick={() => handleFollowerToggle(follower.id)}>
+                  맞팔로우
+                </button>
+              )}
+            </div>
+          ))}
+
+        {activeTab === 'following' &&
+          following.map((follow) => (
+            <div key={follow.id} css={listItemStyle}>
+              <ProfileImageCon src="" size={40} />
+              <span css={nameStyle}>{follow.name}</span>
+              {follow.isFollowing ? (
+                <div css={buttonGroupStyle}>
+                  <button css={ButtonStyle}>메시지</button>
+                  <button css={ButtonStyle} onClick={() => handleFollowingToggle(follow.id)}>
+                    팔로우 취소
+                  </button>
+                </div>
+              ) : (
+                <button css={ButtonStyle} onClick={() => handleFollowingToggle(follow.id)}>
+                  맞팔로우
+                </button>
+              )}
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default FollowerFollowingPage;
+
+// 스타일 정의
+const containerStyle = css`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f9f4ef;
+`;
+
+const headerStyle = css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 16px 8px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #ccc;
+`;
+
+const backIconStyle = css`
+  font-size: 24px;
+  cursor: pointer;
+  position: absolute;
+`;
+
+const tabContainerStyle = css`
+  display: flex;
+  border-bottom: 1px solid #e0e0e0;
+`;
+
+const tabStyle = css`
+  flex: 1;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+  background-color: #f9f4ef;
+  border: none;
+  border-bottom: 2px solid transparent;
+`;
+
+const activeTabStyle = css`
+  font-weight: bold;
+  border-bottom: 2px solid #b9a298;
+`;
+
+const listContainerStyle = css`
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+`;
+
+const listItemStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #e0e0e0;
+`;
+
+const nameStyle = css`
+  margin-left: 10px;
+  font-size: 16px;
+  flex: 1;
+`;
+
+const buttonGroupStyle = css`
+  display: flex;
+  gap: 8px;
+`;
+
+const ButtonStyle = css`
+  background-color: #ffffff;
+  color: #9d6f70;
+  border: none;
+  border-radius: 16px;
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+`;

src/router/index.tsx

@@ -9,6 +9,7 @@ import NotificationPage from '@/pages/Alarm';
 import PostGroupPage from '@/pages/QSpacePost/PostGroupPage';
 import { createBrowserRouter } from 'react-router-dom';
 import { LandingPage } from '@/pages/Landing';
+import ChatRoom from '@/pages/ChatRoom';
 import QSpaceDetailPage from '@/pages/QSpaceDetail';
 
 const router = createBrowserRouter([
@@ -56,6 +57,10 @@ const router = createBrowserRouter([
         path: '/alarm',
         element: <NotificationPage />,
       },
+      {
+        path: '/chatroom/:id',
+        element: <ChatRoom />,
+      },
     ],
   },
 ]);