Merge pull request #166 from boostcampwm-2021/dev

NogariHouse Release v1.0.2
boostcampwm-2021 · Dec 1, 2021 · 6536f0a · 6536f0a
2 parents 1cd9ed8 + 12560cb
commit 6536f0a
Show file tree

Hide file tree

Showing 42 changed files with 479 additions and 221 deletions.
diff --git a/client/src/api/user/index.ts b/client/src/api/user/index.ts
@@ -123,7 +123,14 @@ type TChangeProfileImage = { ok: boolean, newProfileUrl: string }
 
 export const changeProfileImage = async (userDocumentId: string, formData: FormData) => {
   try {
-    const response = await fetch(`${process.env.REACT_APP_API_URL}/api/user/profile-image`, postCredentialsOption(formData));
+    const response = await fetch(
+      `${process.env.REACT_APP_API_URL}/api/user/profile-image`,
+      {
+        method: 'post',
+        credentials: 'include',
+        body: formData,
+      },
+    );
 
     if (!response.ok) throw new Error(`HTTP Error! status: ${response.status}`);
 

diff --git a/client/src/assets/styles/global-styles.ts b/client/src/assets/styles/global-styles.ts
@@ -11,13 +11,15 @@ const GlobalStyle = createGlobalStyle`
     font-weight: normal;
     font-style: normal;
     src: url(${Bangers});
+    font-display: swap;
   }
 
   @font-face {
     font-family: 'Nunito';
     font-weight: normal;
     font-style: normal;
     src: url(${Nunito});
+    font-display: swap;
   }
 
   html, body {

diff --git a/client/src/assets/styles/select.tsx b/client/src/assets/styles/select.tsx
@@ -40,7 +40,6 @@ export const SelectInputBar = styled.input`
 
   border: none;
   font-size: 18px;
-  font-family: 'Nunito';
 
   &:focus {
     outline: none;

diff --git a/client/src/components/chat/detail-view/footer/index.tsx b/client/src/components/chat/detail-view/footer/index.tsx
@@ -1,14 +1,32 @@
 import { useRef } from 'react';
 import { FiSend } from 'react-icons/fi';
 import { useRecoilValue } from 'recoil';
+import { Socket } from 'socket.io-client';
 
 import userType from '@atoms/user';
+import chatSocketMessage from '@constants/socket-message/chat';
 import { makeDateToHourMinute } from '@utils/index';
 import { ChatRoomFooterStyle, MsgInput, SendBtnDiv } from './style';
 
+interface IChattingLog {
+  key: string,
+  message: string,
+  profileUrl: string,
+  userName: string,
+  userDocumentId: string,
+  date: string,
+}
+
+interface IChatFooterProps {
+  addChattingLog: (arg: IChattingLog) => void,
+  chatDocumentId: string,
+  chatSocket: Socket,
+  participants: Array<string>,
+}
+
 export default function ChatRoomFooter({
   addChattingLog, chatDocumentId, chatSocket, participants,
-}: any) {
+}: IChatFooterProps) {
   const messageInputRef = useRef<HTMLTextAreaElement>(null);
   const user = useRecoilValue(userType);
 
@@ -20,7 +38,7 @@ export default function ChatRoomFooter({
 
     if (message.trim() === '') return;
 
-    chatSocket?.emit('chat:sendMsg', {
+    chatSocket?.emit(chatSocketMessage.sendMsg, {
       userDocumentId: user.userDocumentId,
       userName: user.userName,
       profileUrl: user.profileUrl,
@@ -29,10 +47,15 @@ export default function ChatRoomFooter({
       chatDocumentId,
       key: `${nowDate.getTime()}_${user.userDocumentId}`,
     });
-    chatSocket?.emit('chat:alertMsg', { participants, chatDocumentId });
-    chatSocket?.emit('chat:updateCount', participants, chatDocumentId);
+    chatSocket?.emit(chatSocketMessage.alertMsg, { participants, chatDocumentId });
+    chatSocket?.emit(chatSocketMessage.updateCount, participants, chatDocumentId);
     addChattingLog({
-      userDocumentId: user.userDocumentId, userName: user.userName, profileUrl: user.profileUrl, message, date: makeDateToHourMinute(new Date()),
+      key: `${nowDate.getTime()}_${user.userDocumentId}`,
+      userDocumentId: user.userDocumentId,
+      userName: user.userName,
+      profileUrl: user.profileUrl,
+      message,
+      date: makeDateToHourMinute(nowDate),
     });
   };
 

diff --git a/client/src/components/chat/detail-view/header/index.tsx b/client/src/components/chat/detail-view/header/index.tsx
@@ -7,8 +7,18 @@ import {
   BackBtn, ParticipantsDiv, ParticipantsProfileDiv, ParticipantsProfile, ParticipantsName,
 } from './style';
 
-export default React.memo(({ participantsInfo }: any) => {
-  const userNames = participantsInfo.map((user:any) => user.userName).join(', ');
+interface IParticipantInfo {
+  profileUrl: string,
+  userDocumentId: string,
+  userName: string,
+}
+
+interface IHeaderProps {
+  participantsInfo: Array<IParticipantInfo>
+}
+
+export default React.memo(({ participantsInfo }: IHeaderProps) => {
+  const userNames = participantsInfo.map((user: IParticipantInfo) => user.userName).join(', ');
 
   return (
     <ChatHeaderStyle>
@@ -19,7 +29,7 @@ export default React.memo(({ participantsInfo }: any) => {
       </BackBtn>
       <ParticipantsDiv>
         <ParticipantsProfileDiv>
-          {participantsInfo.map((user: any) => (<ParticipantsProfile key={user.userDocumentId} src={user.profileUrl} />))}
+          {participantsInfo.map((user: IParticipantInfo) => (<ParticipantsProfile key={user.userDocumentId} src={user.profileUrl} />))}
         </ParticipantsProfileDiv>
         <ParticipantsName>{userNames}</ParticipantsName>
       </ParticipantsDiv>

diff --git a/client/src/components/chat/detail-view/index.tsx b/client/src/components/chat/detail-view/index.tsx
@@ -26,12 +26,13 @@ import {
 type urlParams = { chatDocumentId: string };
 
 interface IChattingLog {
+  key: string,
   message: string,
   profileUrl: string,
   userName: string,
   userDocumentId: string,
   date: string,
-  linkTo: string,
+  linkTo?: string,
 }
 
 function ChatRoomDetailView() {
@@ -49,7 +50,7 @@ function ChatRoomDetailView() {
   let previousY = 0;
   let previousRatio = 0;
 
-  const addChattingLog = (chatLog: any) => {
+  const addChattingLog = (chatLog: IChattingLog) => {
     dispatch({ type: 'ADD_CHATTING_LOG', payload: { chatLog } });
     chattingLogDiv.current!.scrollTop = chattingLogDiv.current!.scrollHeight - chattingLogDiv.current!.clientHeight;
   };
@@ -70,7 +71,7 @@ function ChatRoomDetailView() {
     });
   };
 
-  const moveToLink = (linkTo: string) => {
+  const moveToLink = (linkTo: string | undefined) => {
     if (!linkTo) return;
     setRoomView('inRoomView');
     setRoomDocumentId(linkTo);
@@ -83,7 +84,14 @@ function ChatRoomDetailView() {
       getChattingLog(chatDocumentId, chatState.chattingLog.length)
         .then((res: any) => {
           setNowFetching(false);
-          dispatch({ type: 'UPDATE', payload: { responseChattingLog: res.chattingLog, participantsInfo: location.state.participantsInfo, user } });
+          dispatch({
+            type: 'UPDATE',
+            payload: {
+              responseChattingLog: res.chattingLog,
+              participantsInfo: location.state.participantsInfo,
+              user,
+            },
+          });
         });
     }
   }, [nowFetching]);
@@ -101,7 +109,7 @@ function ChatRoomDetailView() {
   useEffect(() => {
     if (!chatSocket) return;
     chatSocket.emit(chatSocketMessage.roomJoin, chatDocumentId);
-    chatSocket.on(chatSocketMessage.sendMsg, (payload: any) => {
+    chatSocket.on(chatSocketMessage.sendMsg, (payload: IChattingLog) => {
       dispatch({ type: 'ADD_CHATTING_LOG', payload: { chatLog: payload } });
     });
     return () => {
@@ -130,9 +138,9 @@ function ChatRoomDetailView() {
       <ChatRoomHeader participantsInfo={location.state.participantsInfo} />
       <ChattingLog ref={chattingLogDiv}>
         {chatState.chattingLog.map(({
-          message, profileUrl, userName, userDocumentId, date, linkTo,
-        } : IChattingLog, index: number) => (
-          <Chat key={index} isMyMsg={userDocumentId === user.userDocumentId}>
+          message, profileUrl, userName, userDocumentId, date, linkTo, key,
+        } : IChattingLog) => (
+          <Chat key={key} isMyMsg={userDocumentId === user.userDocumentId}>
             <UserProfile src={profileUrl} />
             <Message isMyMsg={userDocumentId === user.userDocumentId} onClick={() => moveToLink(linkTo)}>
               {userDocumentId === user.userDocumentId
@@ -151,7 +159,7 @@ function ChatRoomDetailView() {
         addChattingLog={addChattingLog}
         chatDocumentId={chatDocumentId}
         chatSocket={chatSocket}
-        participants={location.state.participantsInfo.map((participant: any) => participant.userDocumentId)}
+        participants={location.state.participantsInfo.map((participant: IChattingLog) => participant.userDocumentId)}
       />
     </ChatRoomsLayout>
   );

diff --git a/client/src/components/chat/detail-view/reducer.ts b/client/src/components/chat/detail-view/reducer.ts
@@ -5,6 +5,13 @@
 
 import { deepCopy, makeDateToHourMinute } from '@utils/index';
 
+interface IChatBasicInfo {
+  date: string,
+  userDocumentId: string,
+  message: string,
+  linkTo?: string,
+}
+
 export const initialState = {
   chattingLog: [],
 };
@@ -24,7 +31,7 @@ export function chatReducer(state: any, action: any): any {
     case 'UPDATE': {
       const { responseChattingLog, user, participantsInfo } = payload;
 
-      const newChattingLog = responseChattingLog.map((chat: any) => {
+      const newChattingLog = responseChattingLog.map((chat: IChatBasicInfo) => {
         if (chat.userDocumentId === user.userDocumentId) {
           return ({
             key: `${new Date(chat.date).getTime()}_${chat.userDocumentId}`,
@@ -37,7 +44,7 @@ export function chatReducer(state: any, action: any): any {
           });
         }
 
-        const userData = participantsInfo.filter((userInfo: any) => userInfo.userDocumentId === chat.userDocumentId);
+        const userData = participantsInfo.filter((userInfo: IChatBasicInfo) => userInfo.userDocumentId === chat.userDocumentId);
         return ({
           key: `${new Date(chat.date).getTime()}_${chat.userDocumentId}`,
           message: chat.message,

diff --git a/client/src/components/chat/main-view/index.tsx b/client/src/components/chat/main-view/index.tsx
@@ -7,6 +7,7 @@ import unReadMsgCountState from '@atoms/not-read-msg';
 import ChatRoomListHeader from '@src/components/chat/main-view/header';
 import ChatUserCard from '@src/components/chat/main-view/chat-card';
 import { ChatRoomsLayout } from '@components/chat/style';
+import chatSocketMessage from '@constants/socket-message/chat';
 import LoadingSpinner from '@styles/loading-spinner';
 import { getChatRooms } from '@api/chat';
 import { makeDateToHourMinute, makeDateToMonthDate } from '@utils/index';
@@ -77,11 +78,11 @@ function ChatRoomsViews() {
 
   useEffect(() => {
     if (!socket) return;
-    socket.on('chat:alertMsg', setNewRooms);
-    socket.on('chat:makeChat', newChatRooms);
+    socket.on(chatSocketMessage.alertMsg, setNewRooms);
+    socket.on(chatSocketMessage.makeChat, newChatRooms);
     return () => {
-      socket.off('chat:alertMsg');
-      socket.off('chat:makeChat');
+      socket.off(chatSocketMessage.alertMsg);
+      socket.off(chatSocketMessage.makeChat);
     };
   }, [socket]);
 

diff --git a/client/src/components/common/default-header/index.tsx b/client/src/components/common/default-header/index.tsx
@@ -92,16 +92,16 @@ function DefaultHeader() {
         </ResponsiveMenuIconsLayout>
         <MenuIconsLayout>
           <IconContainer>
-            <Link to={`/profile/${user.userId}`}><ImageLayout src={user.profileUrl} alt="사용자" /></Link>
+            <Link to={`/profile/${user.userId}`} aria-label="profile"><ImageLayout src={user.profileUrl} alt="사용자" /></Link>
             {leftSideIcons.map(makeIconToLink)}
-            <Link to="/chat-rooms" style={{ position: 'relative' }}>
+            <Link to="/chat-rooms" aria-label="chat-room" style={{ position: 'relative' }}>
               {unReadMsgCount > 0 ? <MsgCount><span style={{ margin: '5px' }}>{unReadMsgCount > 99 ? '99+' : unReadMsgCount}</span></MsgCount> : ''}
               <HiOutlinePaperAirplane size={48} color="black" />
             </Link>
           </IconContainer>
           <IconContainer>
             {rightSideIcons.map(makeIconToLink)}
-            <Link to="/activity" style={{ position: 'relative' }}>
+            <Link to="/activity" aria-label="activity" style={{ position: 'relative' }}>
               {isActivityChecked ? <ActiveDot /> : ''}
               <HiOutlineBell size={48} color="black" />
             </Link>

diff --git a/client/src/components/common/menu-modal/index.tsx b/client/src/components/common/menu-modal/index.tsx
@@ -30,26 +30,26 @@ function SliderMenu({ isActivityChecked, unReadMsgCount }: any) {
     setIsOpenRoom(false);
   };
 
-  const makeLinkListToStyledLink = (list: ILinkList) => {
-    if (list.key === 'chat-rooms') {
+  const makeLinkListToStyledLink = (listItem: ILinkList) => {
+    if (listItem.key === 'chat-rooms') {
       return (
-        <MenuWrap to={list.link} key={list.key}>
-          <LinkMenu>{list.text}</LinkMenu>
+        <MenuWrap to={listItem.link} key={listItem.key} aria-label="chat-rooms">
+          <LinkMenu>{listItem.text}</LinkMenu>
           {unReadMsgCount > 0 ? <MsgCount><span style={{ margin: '5px' }}>{unReadMsgCount > 99 ? '99+' : unReadMsgCount}</span></MsgCount> : ''}
         </MenuWrap>
       );
     }
-    if (list.key === 'activity') {
+    if (listItem.key === 'activity') {
       return (
-        <MenuWrap to={list.link} key={list.key}>
-          <LinkMenu>{list.text}</LinkMenu>
+        <MenuWrap to={listItem.link} key={listItem.key} aria-label="activity">
+          <LinkMenu>{listItem.text}</LinkMenu>
           {isActivityChecked ? <ActiveDot /> : ''}
         </MenuWrap>
       );
     }
     return (
-      <StyledLink to={list.link} key={list.key}>
-        <LinkMenu>{list.text}</LinkMenu>
+      <StyledLink to={listItem.link} key={listItem.key} aria-label={listItem.key as string}>
+        <LinkMenu>{listItem.text}</LinkMenu>
       </StyledLink>
     );
   };
@@ -67,7 +67,7 @@ function SliderMenu({ isActivityChecked, unReadMsgCount }: any) {
       <BackgroundWrapper onClick={() => setIsOpenMenu(!isOpenMenu)} />
       <MenuModalBox state={isOpenMenu}>
         <StyledLinkListLayout onClick={clickHandler}>
-          <StyledLink to={`/profile/${user.userId}`}>
+          <StyledLink to={`/profile/${user.userId}`} aria-label="profile">
             <ProfileBox>
               <ImageLayout src={user.profileUrl} alt="사용자" />
               <ProfileInfo>

diff --git a/client/src/components/common/toast/style.ts b/client/src/components/common/toast/style.ts
@@ -24,6 +24,11 @@ export const Notification = styled.div`
 
   height: 50px;
   width: 365px;
+
+  @media (max-width: 768px){
+    width: 250px;
+  }
+  
   color: #fff;
   padding: 20px 15px 10px 10px;
 

diff --git a/client/src/components/event/register-modal/index.tsx b/client/src/components/event/register-modal/index.tsx
@@ -6,6 +6,7 @@ import toastListSelector from '@selectors/toast-list';
 import { BackgroundWrapper } from '@styles/modal';
 import postEvent from '@api/event';
 import { nowCountState, nowFetchingState, nowItemsListState } from '@src/recoil/atoms/main-section-scroll';
+import toastMessage from '@constants/toast-message';
 import EventSelectUserDropdown from './select-uesr-dropdown';
 import {
   CustomEventRegisterModal, ModalHeader, CustomEventForm, CustomFormBox,
@@ -51,11 +52,7 @@ function EventRegisterModal() {
       };
 
       await postEvent(eventInfo);
-      setToastList({
-        type: 'success',
-        title: '등록 성공',
-        description: `${inputTitleRef.current?.value} 이벤트가 등록되었습니다!`,
-      });
+      setToastList(toastMessage.addEventSuccess(`${inputTitleRef.current?.value} 이벤트가 등록되었습니다!`));
 
       changeModalState();
       resetNowItemsList();

diff --git a/client/src/components/event/register-modal/style.ts b/client/src/components/event/register-modal/style.ts
@@ -100,7 +100,6 @@ export const SelectUserComponent = styled.div`
   background-color: #F1F0E4;
   border-radius: 30px;
 
-  font-family: 'Nunito';
   color: #819C88;
 
   cursor: default;