친구 목록 메시지 보내기 연결

frontend/src/component/Sidebar/Chat/index.tsx

@@ -1,10 +1,11 @@
 import { chatContainer } from './chat.styled';
-import { useState } from 'react';
 import ChatList from './ChatList';
 import Chatting from './Chatting';
+import { useRecoilState } from 'recoil';
+import { chattingState } from '../../../store/atom/chatting';
 
 const Chat = () => {
-  const [chatTarget, setChatTarget] = useState('');
+  const [chatTarget, setChatTarget] = useRecoilState(chattingState);
 
   return (
     <ul css={chatContainer}>

frontend/src/component/Sidebar/Friends/friendItem.tsx

@@ -4,17 +4,21 @@ import { friendItemWrapper, userName } from './friends.styled';
 import message from '../../../assets/icon/messageIcon.svg';
 import unfollow from '../../../assets/icon/unfollowIcon.svg';
 import axios from 'axios';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import { friendsState } from '../../../store/atom/friends';
-import { useEffect } from 'react';
+import { sidebarState } from '../../../store/atom/sidebar';
+import { chattingState } from '../../../store/atom/chatting';
 
 const FriendItem = ({ friend }: { friend: friendType }) => {
   const [friends, setFriends] = useRecoilState(friendsState);
+  const setChatTarget = useSetRecoilState(chattingState);
+  const setCurrentTab = useSetRecoilState(sidebarState);
 
-  const { id, isOnline, nickname } = friend;
+  const { id, isOnline, isCalling, nickname } = friend;
 
   const sendChatting = () => {
-    alert(`${nickname}님과 채팅하기`);
+    setChatTarget(id);
+    setCurrentTab('chatting');
   };
 
   const unfollowing = async () => {
@@ -41,8 +45,11 @@ const FriendItem = ({ friend }: { friend: friendType }) => {
       <section id={id} css={friendItemWrapper(isOnline)}>
         <div css={userName(isOnline)}>{nickname}</div>
         <div>
-          <img src={message} alt="채팅하기" onClick={sendChatting}></img>
-          <img src={unfollow} alt="친구 끊기" onClick={unfollowing}></img>
+          <button onClick={sendChatting}>
+            <img src={message} alt="채팅하기 버튼"></img>
+          </button>
+          <img src={unfollow} alt="친구 끊기 버튼" onClick={unfollowing}></img>
+          {isCalling && <div></div>}
         </div>
       </section>
     </Content>

frontend/src/component/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useState } from 'react';
+import { MouseEvent, useEffect, useState } from 'react';
 import { sidebarWrapper, sidebar, toggleButton } from './sidebar.styled';
 import Mypage from './Mypage';
 
@@ -14,6 +14,8 @@ import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import Friends from './Friends';
 import Setting from './Setting';
 import Chat from './Chat';
+import { useRecoilState } from 'recoil';
+import { sidebarState } from '../../store/atom/sidebar';
 
 type componentType = {
   [key: string]: EmotionJSX.Element;
@@ -31,7 +33,7 @@ const Sidebar = () => {
   const [isMicOn, setMic] = useState(false);
   const [isCamOn, setCam] = useState(true);
 
-  const [currentTab, setCurrentTab] = useState<string>('friends');
+  const [currentTab, setCurrentTab] = useRecoilState(sidebarState);
 
   const changeTab = (e: MouseEvent) => {
     const navList = e.currentTarget.children;
@@ -43,22 +45,20 @@ const Sidebar = () => {
       const name = node.id;
       const $img = node.children[0];
 
-      $img === target
-        ? ($img.classList.add('active'), setCurrentTab(name))
-        : $img.classList.remove('active');
+      $img === target && setCurrentTab(name);
     });
   };
 
   return (
-    <aside css={sidebarWrapper(isOpen)}>
+    <aside css={sidebarWrapper(isOpen, currentTab)}>
       <div css={sidebar}>
         <nav className="sidebar-tab">
           <ul onClick={changeTab}>
             <li id="mypage">
               <img src={mypage} alt="마이페이지"></img>
             </li>
             <li id="friends">
-              <img className="active" src={friends} alt="친구목록"></img>
+              <img src={friends} alt="친구목록"></img>
             </li>
             <li id="chatting">
               <img src={chatting} alt="채팅"></img>

frontend/src/component/Sidebar/sidebar.styled.ts

@@ -3,7 +3,7 @@ import sidebarOpen from '../../assets/sidebar-open.svg';
 import sidebarClose from '../../assets/sidebar-close.svg';
 import { flexCenter } from '../../styles/mixin.styled';
 
-export const sidebarWrapper = (isOpen: boolean) => css`
+export const sidebarWrapper = (isOpen: boolean, currentTab: string) => css`
   position: absolute;
   top: 0;
   left: 0;
@@ -24,14 +24,16 @@ export const sidebarWrapper = (isOpen: boolean) => css`
     cursor: pointer;
     opacity: 0.5;
 
-    &.active {
-      opacity: 1;
-    }
-
     :hover {
       opacity: 0.8;
     }
   }
+
+  li#${currentTab} {
+    img {
+      opacity: 1;
+    }
+  }
 `;
 
 export const sidebar = css`

frontend/src/store/atom/chatting.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+import { v1 } from 'uuid';
+
+export const chattingState = atom<string>({
+  key: `chattingState/${v1()}`,
+
+  default: '',
+});

frontend/src/store/atom/sidebar.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+import { v1 } from 'uuid';
+
+export const sidebarState = atom<string>({
+  key: `sidebarState/${v1()}`,
+
+  default: 'friends',
+});