[FE] feat: 채팅 기능 연동 및 전반적인 구조 수정

.gitignore

@@ -67,4 +67,6 @@ src/backend/**/generated/
 src/backend/**/http/http-client.private.env.json
 
 # docker-compose env
-src/backend/.env
+src/backend/.env
+
+cert/*

src/frontend/package.json

@@ -14,6 +14,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "axios": "^1.7.9",
@@ -24,6 +25,8 @@
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.5",
     "styled-components": "^6.1.14",
+    "vite-plugin-mkcert": "^1.17.6",
+    "websocket": "^1.0.35",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

src/frontend/src/components/friend/AddFriendForm/index.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import * as S from './styles';
+
+export type ResultMessageType = 'success' | 'fail';
+
+interface ResultMessage {
+  type: ResultMessageType;
+  content: string;
+}
+
+const AddFriendForm = () => {
+  // TODO: 친구 검색 및 요청 보내기 로직 연동
+  // TODO: 요청 보내기 결과에 따라 resultMessage를 설정하고 표시
+  const [inputData, setInputData] = useState('');
+  const [resultMessage, setResultMessage] = useState<ResultMessage | null>(null);
+
+  const handleInputChange = (value: string) => {
+    setInputData(value);
+  };
+
+  const handleSendRequestButtonClick = () => {
+    console.log('친구 요청');
+  };
+
+  return (
+    <S.AddFriendFormContainer>
+      <S.FormTitle>친구 추가하기</S.FormTitle>
+      <S.FormSubtitle>AsyncGate 이메일을 사용하여 친구를 추가할 수 있어요</S.FormSubtitle>
+      <S.FriendSearchInputWrapper>
+        <S.FriendSearchInput
+          onChange={(e) => handleInputChange(e.target.value)}
+          placeholder="AsyncGate 이메일을 사용하여 친구를 추가할 수 있어요."
+        />
+        <S.SendRequestButton $isDisabled={!inputData.trim()} onClick={handleSendRequestButtonClick}>
+          친구 요청 보내기
+        </S.SendRequestButton>
+      </S.FriendSearchInputWrapper>
+      {resultMessage && <S.ResultMessage $type={resultMessage.type}>{resultMessage.content}</S.ResultMessage>}
+    </S.AddFriendFormContainer>
+  );
+};
+
+export default AddFriendForm;

src/frontend/src/components/friend/AddFriendForm/styles.ts

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+import { BodyRegularText, ChipText, TitleText2 } from '@/styles/Typography';
+
+import { ResultMessageType } from '.';
+
+export const AddFriendFormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 2rem 3rem;
+`;
+
+export const FormTitle = styled(TitleText2)`
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+export const FormSubtitle = styled(BodyRegularText)`
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const FriendSearchInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 5rem;
+  margin-top: 1.6rem;
+  padding: 0 1.2rem;
+  border-radius: 0.8rem;
+
+  background-color: ${({ theme }) => theme.colors.dark[800]};
+`;
+
+export const FriendSearchInput = styled.input`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+
+  height: 4rem;
+  border: none;
+
+  color: ${({ theme }) => theme.colors.white};
+
+  background-color: ${({ theme }) => theme.colors.dark[800]};
+  outline: none;
+`;
+
+export const SendRequestButton = styled.button<{ $isDisabled: boolean }>`
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+
+  height: 3.2rem;
+  padding: 0.2rem 1.6rem;
+  border-radius: 0.4rem;
+
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.dark[300]};
+
+  background-color: ${({ theme }) => theme.colors.blue};
+`;
+
+export const ResultMessage = styled(BodyRegularText)<{ $type: ResultMessageType }>`
+  color: ${({ theme, $type }) => ($type === 'success' ? theme.colors.green : theme.colors.red)};
+`;

src/frontend/src/components/friend/DirectMessageCategory/index.tsx

@@ -0,0 +1,14 @@
+import * as S from './styles';
+
+const DirectMessageCategory = () => {
+  return (
+    <>
+      <S.FriendTitle>
+        <S.TitleName>다이렉트 메시지</S.TitleName>
+      </S.FriendTitle>
+      {/* TODO: 친구 채팅방 목록 */}
+    </>
+  );
+};
+
+export default DirectMessageCategory;

src/frontend/src/components/friend/DirectMessageCategory/styles.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { TitleText2 } from '@/styles/Typography';
+
+export const FriendTitle = styled.div`
+  display: flex;
+  align-items: center;
+
+  height: 4.8rem;
+  padding: 1.2rem 1.6rem;
+  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.dark[500]};
+
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const TitleName = styled(TitleText2)`
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;

src/frontend/src/components/friend/DirectMessageChattingRoom/index.tsx

@@ -0,0 +1,35 @@
+import { BiHash } from 'react-icons/bi';
+import { FaInbox } from 'react-icons/fa';
+
+import MessageSection from '@/pages/FriendsPage/components/ChattingSection/components/MessageSection';
+import { useChannelInfoStore } from '@/stores/channelInfo';
+
+import * as S from './styles';
+
+// 디스코드에서는 채널 타입 아이콘 대신 상대방 프로필 사진이 뜸
+// 우선은 프로필 사진 자리에 아이콘 배치
+const DirectMessageChattingRoom = () => {
+  const { selectedDMChannel } = useChannelInfoStore();
+  if (!selectedDMChannel) return null;
+
+  return (
+    <>
+      <S.ChattingHeader>
+        <S.ChannelInfo>
+          <S.ChannelImage>
+            <BiHash size={28} />
+          </S.ChannelImage>
+          <S.ChannelTitle>{selectedDMChannel.name}</S.ChannelTitle>
+        </S.ChannelInfo>
+        <S.ToolBar>
+          <S.IconWrapper>
+            <FaInbox size={24} />
+          </S.IconWrapper>
+        </S.ToolBar>
+      </S.ChattingHeader>
+      <MessageSection channelId={selectedDMChannel.id} />
+    </>
+  );
+};
+
+export default DirectMessageChattingRoom;

src/frontend/src/components/friend/DirectMessageChattingRoom/styles.ts

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+import { BodyMediumText } from '@/styles/Typography';
+
+export const ChattingHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 4.8rem;
+  padding: 0.8rem;
+  border-bottom: 0.2rem solid ${({ theme }) => theme.colors.dark[700]};
+
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const ChannelInfo = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const ChannelImage = styled.div`
+  margin: 0 0.8rem;
+`;
+
+export const ChannelTitle = styled(BodyMediumText)`
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const ToolBar = styled.div`
+  display: flex;
+`;
+
+export const IconWrapper = styled.div`
+  cursor: pointer;
+  margin: 0 0.8rem;
+`;

src/frontend/src/components/friend/FriendsList/index.tsx

@@ -0,0 +1,45 @@
+import * as S from './styles';
+
+// TODO: API 문서에 맞게 수정 및 types 폴더로 이동
+export interface Friend {
+  name: string;
+  profileImageUrl: string;
+  isOnline: boolean;
+}
+
+// TODO: useQuery로 친구 리스트 요청
+const friends: Friend[] = [
+  {
+    name: '친구1',
+    profileImageUrl: '',
+    isOnline: true,
+  },
+  {
+    name: '친구2',
+    profileImageUrl: '',
+    isOnline: true,
+  },
+  {
+    name: '친구3',
+    profileImageUrl: '',
+    isOnline: false,
+  },
+];
+
+const FriendsList = () => {
+  return (
+    <S.FriendsList>
+      <S.FriendCount>모든 친구 - {friends.length}명</S.FriendCount>
+      {friends.map((friend, index) => (
+        <S.FriendItem key={`${friend.name}_${index}`}>
+          <S.FriendProfileImage $imageUrl={friend.profileImageUrl}>
+            <S.FriendStatusMark $isOnline={friend.isOnline} />
+          </S.FriendProfileImage>
+          <S.FriendName>{friend.name}</S.FriendName>
+        </S.FriendItem>
+      ))}
+    </S.FriendsList>
+  );
+};
+
+export default FriendsList;

src/frontend/src/components/friend/FriendsList/styles.ts

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+
+import { BodyMediumText, ChipText } from '@/styles/Typography';
+
+export const FriendsList = styled.ul`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  margin-top: 0.8rem;
+  padding: 0 2rem 0 3rem;
+
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const FriendCount = styled(ChipText)`
+  margin: 1.6rem 0 1rem;
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const FriendItem = styled.li`
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  height: 6.2rem;
+  border-top: 0.1rem solid ${({ theme }) => theme.colors.dark[500]};
+  border-radius: 0.4rem;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.dark[500]};
+  }
+`;
+
+export const FriendProfileImage = styled.div<{ $imageUrl: string }>`
+  position: relative;
+
+  width: 3.2rem;
+  height: 3.2rem;
+  border-radius: 50%;
+
+  background-color: ${({ theme }) => theme.colors.white};
+  background-image: url(${(props) => props.$imageUrl});
+`;
+
+export const FriendStatusMark = styled.div<{ $isOnline: boolean }>`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+
+  width: 1rem;
+  height: 1rem;
+  border: 0.1rem solid ${({ theme }) => theme.colors.dark[400]};
+  border-radius: 50%;
+
+  background-color: ${({ $isOnline }) => ($isOnline ? 'green' : 'black')};
+`;
+
+export const FriendName = styled(BodyMediumText)`
+  overflow: hidden;
+
+  padding-left: 0.8rem;
+
+  color: ${({ theme }) => theme.colors.white};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const FriendStatus = styled(ChipText)`
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;