Merge pull request #400 from boostcampwm-2022/dev

Week6

.github/workflows/server.yml

@@ -12,7 +12,7 @@ on:
 
 jobs:
   build_api:
-    if: github.event.pull_request.merged == true
+    if: ${{ github.event.pull_request.merged == true  && contains(github.ref, 'dev-be')}}
     runs-on: ubuntu-latest
     steps:
       - name: 체크아웃
@@ -49,7 +49,7 @@ jobs:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_ASUMI_URL }}
         if: always()
   build_socket:
-    if: github.event.pull_request.merged == true
+    if: ${{ github.event.pull_request.merged == true  && contains(github.ref, 'dev-be')}}
     runs-on: ubuntu-latest
     steps:
       - name: 체크아웃
@@ -85,7 +85,7 @@ jobs:
           cache: 'npm'
 
       - name: Yarn 설치
-        run: npm install yarn
+        run: npm install yarn --force
 
       - name: yarn으로 패키지 설치
         run: yarn install
@@ -109,7 +109,7 @@ jobs:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_FAIL_WEBHOOK_URL }}
         if: failure()
   nCloudDeploy:
-    if: github.event.pull_request.merged == true
+    if: ${{ github.event.pull_request.merged == true  && contains(github.ref, 'dev-be')}}
     needs: [build_api, build_socket]
     runs-on: ubuntu-latest
     steps:

README.md

@@ -30,16 +30,29 @@
 
 ## 프로젝트 소개
 아스니티(Asmi + Community)는 디스코드와 슬랙을 참고한 실시간 채팅 서비스입니다.
-실시간 통신을 통해 커뮤니티에 속한 사용자들끼리 채팅할 수 있으며, 귤 까먹으면서 채팅(시간제한이 있는 채팅)을 할 수 있는 기능이 있습니다.
+실시간 통신을 통해 커뮤니티에 속한 사용자들끼리 채팅할 수 있습니다.
+
+## 프로젝스 소개 자료
+
+📎 [배포 링크](http://www.asnity.site) : http://www.asnity.site
+
+🖥 [데모 영상](https://www.youtube.com/watch?v=2gI3OlJXAZQ)
+
+📽 [발표 영상](https://youtu.be/vEL2TTPZ9tk)
+
+📋 [발표 PPT](https://docs.google.com/presentation/d/1kduK9v3o7nCGQghsplh-WrS9VVjWvp8R/edit?usp=sharing&ouid=115620821189866783380&rtpof=true&sd=true)
 
 ## Wiki
 
+- [Team Notion](https://grand-beanie-e57.notion.site/Asnity-cbd4dcce58f540b4b5b7ff33c8cea984)
 - [기획서](https://github.com/boostcampwm-2022/web24-Asnity/wiki/%EA%B8%B0%ED%9A%8D%EC%84%9C)
 - [Architecture](https://github.com/boostcampwm-2022/web24-Asnity/wiki/Architecture)
 - [Skill Spec](https://github.com/boostcampwm-2022/web24-Asnity/wiki/Skill-Spec)
 - [Database ERD](https://github.com/boostcampwm-2022/web24-Asnity/wiki/DB-Diagram)
 - [Backlog](https://lake-duke-f63.notion.site/25c4c9e46d464ea1a82a68c8399ceaf0?v=ea1b4f77e71f4d17b2be0ebdc9c03702)
-
+
+
+
 ## Skill Spec
 <div align="center">
 <img src="https://img.shields.io/badge/Node.js-16.17.0-339933?logo=node.js"> <img src="https://img.shields.io/badge/TypeScript-4.7.4-3178C6?logo=typescript"> <img src="https://img.shields.io/badge/Jest-29.3.1-C21325?logo=jest">
@@ -52,7 +65,7 @@
 <br />
 
 <div align="center">
-  <img src="https://img.shields.io/badge/MongoDB-4.4.17-47A248?logo=mongodb"> <img src="https://img.shields.io/badge/Mongoose-6.7.2-47A248?logo=mongodb"> <img src="https://img.shields.io/badge/NestJS-9.1.5-E0234E?logo=NestJS">
+  <img src="https://img.shields.io/badge/MongoDB-4.4.17-47A248?logo=mongodb"> <img src="https://img.shields.io/badge/Mongoose-6.7.2-47A248?logo=mongodb"> <img src="https://img.shields.io/badge/NestJS-9.1.5-E0234E?logo=NestJS"> <img src="https://img.shields.io/badge/Redis-7.0.6-DC382D?logo=Redis">
 </div>
 
 <div align="center">
@@ -65,4 +78,4 @@
 <br />
 </div>
 
-![stack](https://user-images.githubusercontent.com/79135734/206748158-d0659242-4034-4cf3-bbab-95418d49bf54.PNG)
+![image](https://user-images.githubusercontent.com/34162358/207605404-3da6f4f9-65a6-4167-992a-6eef41ccebd9.png)

client/config/webpack.analysis.ts

@@ -9,7 +9,7 @@ import { merge } from 'webpack-merge';
 import common from './webpack.common';
 
 const config: Configuration = {
-  devtool: 'inline-source-map',
+  devtool: 'cheap-module-source-map',
   mode: 'production',
   module: {
     rules: [

client/config/webpack.prod.ts

@@ -8,7 +8,7 @@ import { merge } from 'webpack-merge';
 import common from './webpack.common';
 
 const config: Configuration = {
-  devtool: 'inline-source-map',
+  devtool: 'cheap-module-source-map',
   mode: 'production',
   module: {
     rules: [

client/package.json

@@ -7,14 +7,15 @@
     "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.ts --progress",
     "dev:proxy": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.proxy.ts --progress",
     "dev:https": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.https.ts --progress",
-    "build:dev": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod:dev.ts --progress",
     "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.ts --progress",
     "analysis": "cross-env NODE_ENV=production webpack --config ./config/webpack.analysis.ts --progress",
     "test": "jest"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",
+    "@loadable/component": "^5.15.2",
     "@tanstack/react-query": "^4.16.1",
+    "@types/loadable__component": "^5.13.4",
     "axios": "^1.1.3",
     "classnames": "^2.3.2",
     "immer": "^9.0.16",

client/public/index.html

@@ -11,6 +11,7 @@
     <title>Asnity</title>
   </head>
   <body>
+    <div id="tooltip"></div>
     <div id="root"></div>
   </body>
 </html>

client/src/App.tsx

@@ -1,20 +1,7 @@
 import ChannelLayer from '@layouts/ChannelLayer';
 import CommunityLayer from '@layouts/CommunityLayer';
-import AccessDenied from '@pages/AccessDenied';
-import AuthorizedLayer from '@pages/AuthorizedLayer';
-import Channel from '@pages/Channel';
-import Community from '@pages/Community';
-import DM from '@pages/DM';
-import DMRoom from '@pages/DMRoom';
-import Friends from '@pages/Friends';
-import Home from '@pages/Home';
-import NotFound from '@pages/NotFound';
-import Root from '@pages/Root';
-import SignIn from '@pages/SignIn';
-import SignUp from '@pages/SignUp';
-import UnAuthorizedLayer from '@pages/UnAuthorizedLayer';
-import UnknownError from '@pages/UnknownError';
-import communitiesLoader from '@routes/communitiesLoader';
+import loadable from '@loadable/component';
+import HomeErrorElement from '@routes/HomeErrorElement';
 import React from 'react';
 import {
   RouterProvider,
@@ -25,18 +12,27 @@ import {
   Outlet,
 } from 'react-router-dom';
 
-import queryClient from './queryClient';
+const AccessDenied = loadable(() => import('@pages/AccessDenied'));
+const AuthorizedLayer = loadable(() => import('@pages/AuthorizedLayer'));
+const Channel = loadable(() => import('@pages/Channel'));
+const Community = loadable(() => import('@pages/Community'));
+const DM = loadable(() => import('@pages/DM'));
+const DMRoom = loadable(() => import('@pages/DMRoom'));
+const Error = loadable(() => import('@pages/Error'));
+const Friends = loadable(() => import('@pages/Friends'));
+const Home = loadable(() => import('@pages/Home'));
+const NotFound = loadable(() => import('@pages/NotFound'));
+const Root = loadable(() => import('@pages/Root'));
+const SignIn = loadable(() => import('@pages/SignIn'));
+const SignUp = loadable(() => import('@pages/SignUp'));
+const UnAuthorizedLayer = loadable(() => import('@pages/UnAuthorizedLayer'));
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route>
       <Route path="/" element={<Root />} />
       <Route element={<AuthorizedLayer />}>
-        <Route
-          element={<Home />}
-          loader={communitiesLoader(queryClient)}
-          errorElement={<Navigate to="/" />}
-        >
+        <Route element={<Home />} errorElement={<HomeErrorElement />}>
           <Route path="dms" element={<DM />}>
             <Route index element={<Friends />} />
             <Route
@@ -70,7 +66,7 @@ const router = createBrowserRouter(
         <Route path="sign-up" element={<SignUp />} />
       </Route>
       <Route path="/access-denied" element={<AccessDenied />} />
-      <Route path="/unknown-error" element={<UnknownError />} />
+      <Route path="/error" element={<Error />} />
       <Route path="*" element={<NotFound />} />
     </Route>,
   ),

client/src/apis/channel.ts

@@ -9,7 +9,7 @@ export interface JoinedChannel {
   name: string;
   isPrivate: boolean;
   description: string;
-  lastRead: boolean; // NOTE: get communities에는 있는데, get channel에는 없는 프로퍼티.
+  existUnreadChat: boolean; // NOTE: get communities에는 있는데, get channel에는 없는 프로퍼티.
   type: string; // TODO: DM or Channel -> DM 구현할 때 타입 구체화
   createdAt: string;
 }
@@ -76,7 +76,7 @@ export const leaveChannel: LeaveChannel = (channelId) => {
 
   return tokenAxios
     .delete<LeaveChannelResponse>(endPoint)
-    .then((res) => res.data.result);
+    .then((response) => response.data.result);
 };
 
 export interface InviteChannelRequest {
@@ -106,3 +106,26 @@ export const inviteChannel: InviteChannel = ({
     })
     .then((response) => response.data.result);
 };
+
+export interface UpdateLastReadRequest {
+  channelId: string;
+  communityId: string;
+}
+
+export interface UpdateLastReadResult {
+  message: string;
+}
+export type UpdateLastReadResponse = SuccessResponse<UpdateLastReadResult>;
+export type UpdateLastRead = (
+  fields: UpdateLastReadRequest,
+) => Promise<UpdateLastReadResult>;
+
+export const updateLastRead: UpdateLastRead = ({ channelId, communityId }) => {
+  const endPoint = `/api/channels/${channelId}/lastRead`;
+
+  return tokenAxios
+    .patch<UpdateLastReadResponse>(endPoint, {
+      community_id: communityId,
+    })
+    .then((response) => response.data.result);
+};

client/src/apis/chat.ts

@@ -3,10 +3,10 @@ import type { SuccessResponse } from '@@types/apis/response';
 import endPoint from '@constants/endPoint';
 import { tokenAxios } from '@utils/axios';
 
-export type ChatType = 'TEXT' | 'IMAGE';
+export type ChatType = 'TEXT' | 'IMAGE' | 'SYSTEM';
 
 export interface Chat {
-  id: string;
+  id: number; // TODO: chatId로 바꿔야 할 수도.
   type: ChatType;
   content: string;
   senderId: string;
@@ -37,3 +37,20 @@ export const getChats: GetChats = (channelId, prev) => {
     .get<GetChatsResponse>(_endPoint, { params: { prev } })
     .then((response) => response.data.result);
 };
+
+export type GetUnreadChatIdResult = {
+  unreadChatId: number;
+};
+
+export type GetUnreadChatIdResponse = SuccessResponse<GetUnreadChatIdResult>;
+export type GetUnreadChatId = (
+  channelId: string,
+) => Promise<GetUnreadChatIdResult['unreadChatId']>;
+
+export const getUnreadChatId: GetUnreadChatId = (channelId) => {
+  const _endPoint = endPoint.getUnreadChatId(channelId);
+
+  return tokenAxios
+    .get<GetUnreadChatIdResponse>(_endPoint)
+    .then((response) => response.data.result.unreadChatId);
+};

client/src/apis/dm.ts

@@ -24,5 +24,5 @@ export const getDirectMessages: GetDirectMessages = () => {
 
   return tokenAxios
     .get<GetDirectMessagesResponse>(endPoint)
-    .then((res) => res.data.result);
+    .then((response) => response.data.result);
 };

client/src/apis/user.ts

@@ -40,25 +40,25 @@ export const getFollowings: GetFollowings = () => {
 
   return tokenAxios
     .get<GetFollowingsResponse>(endPoint)
-    .then((res) => res.data.result.followings);
+    .then((response) => response.data.result.followings);
 };
 
-export interface UpdateFollowingResult {
+export interface ToggleFollowingResult {
   message?: string;
 }
-export type UpdateFollowingResponse = SuccessResponse<UpdateFollowingResult>;
-export type UpdateFollowing = (
+export type ToggleFollowingResponse = SuccessResponse<ToggleFollowingResult>;
+export type ToggleFollowing = (
   userId: string,
-) => Promise<UpdateFollowingResult>;
+) => Promise<ToggleFollowingResult>;
 
 // 유저를 팔로우한다.
 // 유저가 팔로잉 상태라면 언팔로우 한다. (toggle)
-export const updateFollowing: UpdateFollowing = (userId) => {
+export const toggleFollowing: ToggleFollowing = (userId) => {
   const endPoint = `/api/user/following/${userId}`;
 
   return tokenAxios
-    .post<UpdateFollowingResponse>(endPoint)
-    .then((res) => res.data.result);
+    .post<ToggleFollowingResponse>(endPoint)
+    .then((response) => response.data.result);
 };
 
 export type GetFollowersResult = {
@@ -72,7 +72,7 @@ export const getFollowers: GetFollowers = () => {
 
   return tokenAxios
     .get<GetFollowersResponse>(endPoint)
-    .then((res) => res.data.result.followers);
+    .then((response) => response.data.result.followers);
 };
 
 export interface GetUsersParams {