merge dev

src/components/atoms/chatting/ChatMenu.tsx

@@ -29,18 +29,17 @@ const Component = styled.div<{ roomId: string }>`
 `;
 
 const Icon = styled.button`
-  width: 3rem;
-  height: 3rem;
+  width: 2rem;
+  height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   svg {
-    height: 65%;
-    width: 65%;
+    height: 100%;
+    width: 100%;
   }
   &:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-    border-radius: 50%;
+    opacity: 0.7;
   }
 `;

src/components/atoms/chatting/SendChat.tsx

@@ -111,4 +111,7 @@ const Button = styled.button`
     width: 2rem;
     height: 2rem;
   }
+  &:hover {
+    opacity: 0.7;
+  }
 `;

src/components/headerProfile/Friends.tsx

@@ -1,30 +1,43 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import styled from 'styled-components';
 import media from 'src/styles/media';
-import { detailedFriend } from 'src/interface/singleFriend.interface';
 import useFriends from 'src/hooks/friend/useFriends';
 import FriendList from '../profile/friends/FriendList';
 import AddFriend from '../profile/friends/AddFriend';
+import { detailedFriend } from '../../interface/singleFriend.interface';
 
 export default function Friends() {
   const [categoryType, setCategoryType] = useState('friendList');
   const { isLoading, error, data } = useFriends();
-  if (isLoading) return <>loading</>;
-  if (error) return <>error</>;
-  const acceptedFriends = data.filter(
-    (friend: detailedFriend) => friend.status === 'ACCEPTED',
-  );
-  const pendingFriends = data.filter(
-    (friend: detailedFriend) => friend.status === 'PENDING',
-  );
 
-  const onClickFriendList = () => {
+  const onClickFriendList = useCallback(() => {
     setCategoryType('friendList');
-  };
+  }, []);
 
-  const onClickAddFriend = () => {
+  const onClickAddFriend = useCallback(() => {
     setCategoryType('addFriend');
-  };
+  }, []);
+
+  if (isLoading) return <>loading</>;
+  if (error) return <>error</>;
+
+  const acceptedFriends = data
+    ?.filter((friend: detailedFriend) => friend.status === 'ACCEPTED')
+    .map((friend: detailedFriend) => friend.sender || friend.receiver);
+
+  const pendingSendFriends = data
+    ?.filter(
+      (friend: detailedFriend) =>
+        friend.status === 'PENDING' && friend.role === 'SENDER',
+    )
+    .map((friend: detailedFriend) => friend.receiver);
+
+  const pendingRecvFriends = data
+    ?.filter(
+      (friend: detailedFriend) =>
+        friend.status === 'PENDING' && friend.role === 'RECEIVER',
+    )
+    .map((friend: detailedFriend) => friend.sender);
 
   return (
     <Components>
@@ -46,7 +59,10 @@ export default function Friends() {
         {categoryType === 'friendList' ? (
           <FriendList friendList={acceptedFriends} />
         ) : (
-          <AddFriend friendList={pendingFriends} />
+          <AddFriend
+            pendingSendFriends={pendingSendFriends}
+            pendingRecvFriends={pendingRecvFriends}
+          />
         )}
       </FriendComponent>
     </Components>

src/components/profile/Friends.tsx

@@ -1,21 +1,15 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 import useFriends from 'src/hooks/friend/useFriends';
-import { detailedFriend } from 'src/interface/singleFriend.interface';
 import FriendList from './friends/FriendList';
 import AddFriend from './friends/AddFriend';
+import { detailedFriend } from '../../interface/singleFriend.interface';
 
 export default function Friends({ isModal }: { isModal: boolean }) {
   const [categoryType, setCategoryType] = useState('friendList');
   const { isLoading, error, data } = useFriends();
   if (isLoading) return <>loading</>;
   if (error) return <>error</>;
-  const acceptedFriends = data.filter(
-    (friend: detailedFriend) => friend.status === 'ACCEPTED',
-  );
-  const pendingFriends = data.filter(
-    (friend: detailedFriend) => friend.status === 'PENDING',
-  );
 
   const onClickFriendList = () => {
     setCategoryType('friendList');
@@ -25,6 +19,24 @@ export default function Friends({ isModal }: { isModal: boolean }) {
     setCategoryType('addFriend');
   };
 
+  const acceptedFriends = data
+    ?.filter((friend: detailedFriend) => friend.status === 'ACCEPTED')
+    .map((friend: detailedFriend) => friend.sender || friend.receiver);
+
+  const pendingSendFriends = data
+    ?.filter(
+      (friend: detailedFriend) =>
+        friend.status === 'PENDING' && friend.role === 'SENDER',
+    )
+    .map((friend: detailedFriend) => friend.receiver);
+
+  const pendingRecvFriends = data
+    ?.filter(
+      (friend: detailedFriend) =>
+        friend.status === 'PENDING' && friend.role === 'RECEIVER',
+    )
+    .map((friend: detailedFriend) => friend.sender);
+
   return (
     <Components isModal={isModal}>
       <Category>
@@ -45,7 +57,10 @@ export default function Friends({ isModal }: { isModal: boolean }) {
         {categoryType === 'friendList' ? (
           <FriendList friendList={acceptedFriends} />
         ) : (
-          <AddFriend friendList={pendingFriends} />
+          <AddFriend
+            pendingSendFriends={pendingSendFriends}
+            pendingRecvFriends={pendingRecvFriends}
+          />
         )}
       </FriendComponent>
     </Components>
@@ -60,6 +75,7 @@ const Components = styled.div<{ isModal: boolean }>`
   position: absolute;
   right: 1rem;
   top: 0;
+  height: 100%;
   @media (max-width: ${(props) => (props.isModal ? '100vw ' : '1020px')}) {
     position: static;
     padding: 0 3.2rem;
@@ -70,14 +86,16 @@ const Components = styled.div<{ isModal: boolean }>`
 
 const FriendComponent = styled.div<{ isModal: boolean }>`
   width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  /* ::-webkit-scrollbar {
+    display: none;
+  } */
   @media (max-width: ${(props) => (props.isModal ? '100vw ' : '1020px')}) {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     max-height: 15rem;
-    overflow: auto;
-    ::-webkit-scrollbar {
-      display: none;
-    }
+    overflow-y: auto;
   }
 `;
 

src/components/profile/friends/AcceptOrDecline.tsx

@@ -3,33 +3,22 @@ import styled from 'styled-components';
 import media from 'src/styles/media';
 import useAcceptFriendRequest from 'src/hooks/friend/useAcceptFriendRequest';
 import useDeleteFriendRequest from 'src/hooks/friend/useDeleteFriendRequest';
-import useMainModal from '../../../hooks/useMainModal';
 
 export default function AcceptOrDecline({ friend }) {
-  const { setProfileModal } = useMainModal();
-  const closeProfileModal = () => {
-    setProfileModal(false);
-  };
   const {
     mutate: acceptMutate,
     isLoading: acceptLoading,
     isError: acceptError,
-    isSuccess: acceptSuccess,
   } = useAcceptFriendRequest(friend?.uid);
 
   const {
     mutate: deleteMutate,
     isLoading: deleteLoading,
     isError: deleteError,
-    isSuccess: deleteSuccess,
   } = useDeleteFriendRequest(friend?.uid);
 
   if (acceptLoading || deleteLoading) return null;
   if (acceptError || deleteError) return null;
-  if (acceptSuccess || deleteSuccess) {
-    console.log('success request');
-    closeProfileModal();
-  }
 
   const acceptRequest = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
@@ -42,12 +31,12 @@ export default function AcceptOrDecline({ friend }) {
   };
   return (
     <Buttons>
-      <Button color="fb7185" onClick={deleteRequest}>
-        거절
-      </Button>
       <Button color="34d399" onClick={acceptRequest}>
         수락
       </Button>
+      <Button color="fb7185" onClick={deleteRequest}>
+        거절
+      </Button>
     </Buttons>
   );
 }

src/components/profile/friends/AddFriend.tsx

@@ -1,37 +1,38 @@
+import React from 'react';
 import styled from 'styled-components';
 import media from 'src/styles/media';
-import { detailedFriend } from 'src/interface/singleFriend.interface';
+import singleFriend from 'src/interface/singleFriend.interface';
 import FriendIcon from './FriendIcon';
 import AcceptOrDecline from './AcceptOrDecline';
 
-export default function AddFriend({
-  friendList,
+export default React.memo(function AddFriend({
+  pendingSendFriends,
+  pendingRecvFriends,
 }: {
-  friendList: detailedFriend[];
+  pendingSendFriends: singleFriend[];
+  pendingRecvFriends: singleFriend[];
 }) {
-  const RECV = 'RECEIVER';
-
   return (
     <>
-      {friendList.map((friend, index) => (
+      {pendingRecvFriends.map((friend, index) => (
+        <Component key={Symbol(index).toString()}>
+          <FriendIcon friend={friend} />
+          <Contents>
+            <AcceptOrDecline friend={friend} />
+          </Contents>
+        </Component>
+      ))}
+      {pendingSendFriends.map((friend, index) => (
         <Component key={Symbol(index).toString()}>
-          {friend.role === RECV ? (
-            <FriendIcon friend={friend.sender} />
-          ) : (
-            <FriendIcon friend={friend.receiver} />
-          )}
+          <FriendIcon friend={friend} />
           <Contents>
-            {friend.role === RECV ? (
-              <AcceptOrDecline friend={friend.sender} />
-            ) : (
-              <Text>친구신청 보냄</Text>
-            )}
+            <Text>친구신청 보냄</Text>
           </Contents>
         </Component>
       ))}
     </>
   );
-}
+});
 
 const Component = styled.div`
   display: flex;

src/components/profile/friends/FriendList.tsx

@@ -1,24 +1,20 @@
-/* eslint-disable no-unused-vars */
+import React from 'react';
 import styled from 'styled-components';
 import media from 'src/styles/media';
-import { detailedFriend } from 'src/interface/singleFriend.interface';
+import singleFriend from 'src/interface/singleFriend.interface';
 import ChattingUtil from 'src/components/atoms/chattingModal/chattingUtil';
 import { ReactComponent as SendImage } from '../../../assets/svg/MessageSend.svg';
 import FriendIcon from './FriendIcon';
 
-export default function FriendList({
+export default React.memo(function FriendList({
   friendList,
 }: {
-  friendList: detailedFriend[];
+  friendList: singleFriend[];
 }) {
   const { openChat } = ChattingUtil();
-  const filteredFriends = friendList.map((friend) =>
-    friend.role === 'RECEIVER' ? friend.sender : friend.receiver,
-  );
-
   return (
     <>
-      {filteredFriends.map((friend) => (
+      {friendList.map((friend) => (
         <Component key={friend?.uid}>
           <FriendIcon friend={friend} />
           <SendMessage onClick={() => openChat(friend?.uid)}>
@@ -30,7 +26,7 @@ export default function FriendList({
       ))}
     </>
   );
-}
+});
 
 const Component = styled.div`
   display: flex;
@@ -39,7 +35,7 @@ const Component = styled.div`
   color: #f9fafb;
   font-size: 1.5rem;
   margin-top: 2.8rem;
-  max-width: 28rem;
+  max-width: 33rem;
   ${media.small} {
     font-size: 1.2rem;
     margin-top: 2rem;