Merge pull request #135 from boostcampwm-2022/dev

[CLIENT & Server] Week3 마무리

.github/workflows/server_jest.yml

@@ -0,0 +1,66 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Server Jest
+
+on:
+  push:
+    branches: [ "main", "dev","dev-be" ]
+    paths: 'server/**'
+  pull_request:
+    branches: [ "main", "dev","dev-be" ]
+    paths: 'server/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      # 해당 저장소의 코드를 가져옵니다.
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      # Node 18 버전을 사용합니다.
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      # yarn을 설치합니다.
+      - name: Install Yarn
+        run: npm install yarn
+
+      # 설치된 yarn을 통해 패키지를 설치합니다.
+      - name: Install dependencies
+        run: yarn install
+
+      # 테스트 수행과 그 테스트 결과를 xml파일로 생성합니다.
+      - name: Run tests
+        run: yarn server-test | tee ./coverage.txt
+
+      # 테스트 결과를 담은 xml 파일을 레포트로 변환합니다.
+      - name: Test Report
+        uses: dorny/test-reporter@v1
+        if: success() || failure()    # run this step even if previous step failed
+        with:
+          name: test-results
+          path: server/junit.xml
+          fail-on-error: 'false'
+          reporter: jest-junit        # Format of test results
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Jest Coverage Comment
+        uses: MishaKav/jest-coverage-comment@main
+        with:
+          coverage-path: ./coverage.txt
+          coverage-summary-path: ./server/coverage/coverage-final.json
+          junitxml-path: ./server/junit.xml
+      - name: build 실패 시 Slack 알림
+        uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          author_name: 백엔드 빌드 실패 알림
+          fields: repo, message, commit, author, action, eventName, ref, workflow, job, took
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_FAIL_WEBHOOK_URL }}
+        if: failure()

client/.eslintrc

@@ -26,6 +26,10 @@
     ],
     "@typescript-eslint/no-var-requires": "off",
     "react/no-unknown-property": "off",
-    "no-duplicate-imports": "off"
+    "no-duplicate-imports": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "no-nested-ternary": "off",
+    "@typescript-eslint/no-empty-interface": "off"
   }
 }

client/.gitignore

@@ -1,4 +1,5 @@
 env/*
 build/*
 dist/*
-.idea/
+.idea/
+*.pem

client/config/webpack.dev.https.ts

@@ -0,0 +1,34 @@
+import 'webpack-dev-server';
+
+import type { Configuration } from 'webpack';
+
+import path from 'path';
+
+import { merge } from 'webpack-merge';
+
+import common from './webpack.common';
+
+const config: Configuration = {
+  devtool: 'inline-source-map',
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devServer: {
+    https: {
+      key: path.resolve(__dirname, '..', 'localhost+2-key.pem'),
+      cert: path.resolve(__dirname, '..', 'localhost+2.pem'),
+    },
+    hot: true,
+    open: true,
+    historyApiFallback: true,
+  },
+};
+
+export default merge(common, config);

client/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.ts --progress",
+    "dev:https": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.https.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"
@@ -15,8 +16,10 @@
     "axios": "^1.1.3",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
+    "react-custom-scrollbars-2": "^4.5.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.39.4",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.4.3",
     "react-toastify": "^9.1.1",
     "shared": "1.0.0",
@@ -29,13 +32,15 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@faker-js/faker": "^7.6.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.9",
     "@tanstack/react-query-devtools": "^4.16.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.2.2",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
+    "@types/react-modal": "^3.13.1",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",

client/src/App.tsx

@@ -1,6 +1,5 @@
-import AuthorizedLayer from '@components/AuthorizedLayer';
-import UnAuthorizedLayer from '@components/UnAuthorizedLayer';
 import AccessDenied from '@pages/AccessDenied';
+import AuthorizedLayer from '@pages/AuthorizedLayer';
 import Community from '@pages/Community';
 import DM from '@pages/DM';
 import DMRoom from '@pages/DMRoom';
@@ -10,6 +9,8 @@ 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 React from 'react';
 import {
   RouterProvider,
@@ -38,7 +39,8 @@ const router = createBrowserRouter(
         <Route path="sign-in" element={<SignIn />} />
         <Route path="sign-up" element={<SignUp />} />
       </Route>
-      <Route path="/error" element={<AccessDenied />} />
+      <Route path="/access-denied" element={<AccessDenied />} />
+      <Route path="/unknown-error" element={<UnknownError />} />
       <Route path="*" element={<NotFound />} />
     </Route>,
   ),

client/src/apis/auth.ts

@@ -0,0 +1,66 @@
+import type { SuccessResponse } from '@@types/apis/response';
+
+import { API_URL } from '@constants/url';
+import axios from 'axios';
+
+export interface SignUpRequest {
+  id: string;
+  nickname: string;
+  password: string;
+}
+
+export interface SignUpResult {
+  message: string;
+}
+
+export type SignUp = (
+  fields: SignUpRequest,
+) => Promise<SuccessResponse<SignUpResult>>;
+
+export const signUp: SignUp = ({ id, nickname, password }) => {
+  const endPoint = `${API_URL}/api/user/auth/signup`;
+
+  return axios
+    .post(endPoint, { id, nickname, password })
+    .then((response) => response.data);
+};
+
+export interface SignInRequest {
+  id: string;
+  password: string;
+}
+
+export interface SignInResult {
+  _id: string;
+  accessToken: string;
+}
+
+export type SignIn = (
+  fields: SignInRequest,
+) => Promise<SuccessResponse<SignInResult>>;
+
+export const signIn: SignIn = ({ id, password }) => {
+  const endPoint = `${API_URL}/api/user/auth/signin`;
+
+  return axios
+    .post(endPoint, { id, password }, { withCredentials: true })
+    .then((response) => response.data);
+};
+// 액세스 토큰으로 다시 유저 정보 요청해야함
+// _id, id(이메일), nickname, status, profileUrl, description
+
+export interface ReissueTokenResult {
+  accessToken: string;
+}
+
+export type ReissueToken = () => Promise<SuccessResponse<ReissueTokenResult>>;
+
+export const reissueToken: ReissueToken = () => {
+  const endPoint = `${API_URL}/api/user/auth/refresh`;
+
+  return axios
+    .post(endPoint, {}, { withCredentials: true })
+    .then((response) => {
+      return response.data;
+    });
+};

client/src/apis/dm.ts

@@ -0,0 +1,16 @@
+import type { User } from '@apis/user';
+
+import { API_URL } from '@constants/url';
+import axios from 'axios';
+
+export interface DirectMessage {
+  _id: string;
+  user: User;
+}
+
+export type GetDirectMessagesResult = DirectMessage[];
+
+export type GetDirectMessages = () => Promise<GetDirectMessagesResult>;
+
+export const getDirectMessages: GetDirectMessages = () =>
+  axios.get(`${API_URL}/api/user/dms`).then((res) => res.data.result);

client/src/apis/user.ts

@@ -0,0 +1,63 @@
+import type { SuccessResponse } from '@@types/apis/response';
+
+import { API_URL } from '@constants/url';
+import axios from 'axios';
+
+export type UserStatus = 'online' | 'offline' | 'afk';
+
+export interface User {
+  _id: string;
+  id: string;
+  nickname: string;
+  status: UserStatus;
+  profileUrl: string;
+  description: string;
+}
+
+export type MyInfoResult = User;
+
+type GetMyInfo = () => Promise<MyInfoResult>;
+
+export const getMyInfo: GetMyInfo = () => {
+  return axios
+    .get(`${API_URL}/api/user/auth/me`)
+    .then((response) => response.data.result);
+};
+
+export interface GetFollowingsResult {
+  followings: User[];
+}
+export type GetFollowingsResponse = SuccessResponse<GetFollowingsResult>;
+
+export const getFollowings = (): Promise<GetFollowingsResponse> =>
+  axios.get(`${API_URL}/api/user/followings`).then((res) => res.data);
+
+export interface UpdateFollowingResult {
+  message?: string;
+}
+export type UpdateFollowingResponse = SuccessResponse<UpdateFollowingResult>;
+
+export const updateFollowing = (
+  userId: string,
+): Promise<UpdateFollowingResponse> =>
+  axios.post(`${API_URL}/api/user/following/${userId}`).then((res) => res.data);
+
+export interface GetFollowersResult {
+  followers: User[];
+}
+
+export type GetFollowersResponse = SuccessResponse<GetFollowersResult>;
+
+export const getFollowers = (): Promise<GetFollowersResponse> =>
+  axios.get(`${API_URL}/api/user/followers`).then((res) => res.data);
+export interface GetUsersParams {
+  search: string;
+}
+export interface GetUsersResult {
+  users: User[];
+}
+
+export type GetUsersResponse = SuccessResponse<GetUsersResult>;
+
+export const GetUsers = (params: GetUsersParams): Promise<GetUsersResponse> =>
+  axios.get(`${API_URL}/api/users`, { params }).then((res) => res.data);