Deploy: 회의록 UI & 소켓 서버 & 백엔드 api 수정 (#113)

3주차 중간 과정까지 main에 머지 및 배포합니다.

- 회의록 UI
- 소켓 서버
- 백엔드 api 수정

Co-authored-by: dohun <[email protected]>
Co-authored-by: juyeong-chungbuk <[email protected]>
Co-authored-by: hodun <[email protected]>
Co-authored-by: Seyoung Kim <[email protected]>
Co-authored-by: se030 <[email protected]>

Author: 4 people

client/.stylelintrc

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "stylelint-config-recommended-scss",
+    "stylelint-config-prettier-scss",
+    "stylelint-config-property-sort-order-smacss"
+  ],
+  "plugins": ["stylelint-scss"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "max-nesting-depth": 3,
+    "no-descending-specificity": null,
+    "string-quotes": "single",
+    "scss/at-rule-conditional-no-parentheses": null,
+    "selector-pseudo-class-no-unknown": null,
+    "property-no-unknown": null
+  }
+}

client/package.json

@@ -25,6 +25,10 @@
     "@vitejs/plugin-react": "^2.2.0",
     "eslint-plugin-react": "latest",
     "sass": "^1.56.1",
+    "stylelint": "^14.15.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-property-sort-order-smacss": "^9.0.0",
+    "stylelint-config-recommended-scss": "^8.0.0",
     "vite": "^3.2.3",
     "vite-tsconfig-paths": "^3.5.2"
   }

client/src/App.tsx

@@ -1,42 +1,45 @@
-import { useState, useEffect } from 'react';
-import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { getAuth } from 'src/apis/auth';
 import UserContext from 'src/contexts/user';
 import { LoadingPage, LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
-import { User } from 'src/types/user';
+import { UserInfo } from 'src/types/user';
+
 import 'styles/reset.scss';
 
 function App() {
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
-  const [user, setUser] = useState<User | null>(null);
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 
   const navigate = useNavigate();
   const location = useLocation();
 
   const autoLogin = async () => {
-    const currentUser = await getAuth();
+    const { user, workspaces } = await getAuth();
 
     setIsLoaded(true);
 
-    if (!currentUser) {
-      if (location.pathname === '/workspace') navigate('/');
+    if (!user) {
+      if (location.pathname.match('/workspace')) navigate('/');
       return;
     }
 
-    setUser(currentUser);
-    navigate('/workspace');
+    setUserInfo({ user, workspaces });
+
+    const { id } = workspaces[0];
+    navigate(`/workspace/${id}`);
   };
 
   useEffect(() => {
     autoLogin();
   }, []);
 
   return isLoaded ? (
-    <UserContext.Provider value={{ user, setUser }}>
+    <UserContext.Provider value={{ userInfo, setUserInfo }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />
         <Route path="/oauth" element={<OAuthPage />} />
-        <Route path="/workspace" element={<WorkspacePage />} />
+        <Route path="/workspace/:id" element={<WorkspacePage />} />
       </Routes>
     </UserContext.Provider>
   ) : (

client/src/apis/auth.ts

@@ -1,21 +1,20 @@
 import { PostLoginParams } from 'params/auth';
+import { GetUserInfo } from 'src/types/workspace';
 
 import { http } from './http';
-import { OK, CREATED } from './http-status';
+import { CREATED, OK } from './http-status';
 
-export const getAuth = async () => {
-  try {
-    const res = await http.get(`/auth`);
+export const getAuth = async (): Promise<GetUserInfo> => {
+  const res = await http.get(`/auth`);
 
-    if (res.status !== OK) return null;
+  if (res.status !== OK) throw new Error();
 
-    return res.data;
-  } catch (e) {
-    return null;
-  }
+  return res.data;
 };
 
-export const postAuthLogin = async ({ code }: PostLoginParams) => {
+export const postAuthLogin = async ({
+  code,
+}: PostLoginParams): Promise<GetUserInfo> => {
   const res = await http.post(`/auth/login`, { code });
 
   if (res.status !== CREATED) throw new Error();

client/src/apis/workspace.ts

@@ -1,8 +1,8 @@
-import { PostJoinParams, PostParams } from 'params/workspace';
-import { Workspace } from 'src/types/workspace';
+import { GetInfoParams, PostJoinParams, PostParams } from 'params/workspace';
+import { Workspace, WorkspaceInfo } from 'src/types/workspace';
 
 import { http } from './http';
-import { CREATED } from './http-status';
+import { CREATED, OK } from './http-status';
 
 export const postWorkspace = async ({
   name,
@@ -23,3 +23,13 @@ export const postWorkspaceJoin = async ({
 
   return res.data;
 };
+
+export const getWorkspaceInfo = async ({
+  id,
+}: GetInfoParams): Promise<WorkspaceInfo> => {
+  const res = await http.get(`/workspace/${id}`);
+
+  if (res.status !== OK) throw new Error();
+
+  return res.data;
+};

client/src/components/Confbar/index.tsx

@@ -0,0 +1,5 @@
+function Confbar() {
+  return <div></div>;
+}
+
+export default Confbar;

client/src/components/Mom/index.tsx

@@ -0,0 +1,45 @@
+import style from './style.module.scss';
+
+function Mom() {
+  // context나 props로 가져오기
+  const selectedMom = {
+    id: 1,
+    name: '회의록 1',
+    createdAt: new Date(),
+  };
+
+  /*
+    contentEditable 내용을 컨트롤하고 싶다면 ref 활용해볼 수 있음
+    const titleRef = useRef<HTMLHeadingElement>(null);
+  */
+
+  const onTitleChange: React.FormEventHandler<HTMLHeadingElement> = (e) => {
+    /*
+      제목 변경하는 요청
+      const title = e.target as HTMLHeadingElement;
+      title.innerText
+      OR
+      titleRef.current.innerText
+    */
+  };
+
+  return (
+    <div className={style['mom-container']}>
+      <div className={style['mom']}>
+        <div className={style['mom-header']}>
+          <h1
+            contentEditable={true}
+            suppressContentEditableWarning={true}
+            onInput={onTitleChange}
+          >
+            {selectedMom.name}
+          </h1>
+          <span>{selectedMom.createdAt.toLocaleString()}</span>
+        </div>
+        <div className={style['editor-container']}>회의록 내용</div>
+      </div>
+    </div>
+  );
+}
+
+export default Mom;

client/src/components/Mom/style.module.scss

@@ -0,0 +1,44 @@
+@import 'styles/color.module.scss';
+
+.mom-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100vh;
+  background-color: $off-white;
+}
+
+.mom {
+  position: relative;
+  width: 90%;
+  height: calc(100% - 30px);
+}
+
+.mom-header {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  height: 70px;
+  padding: 0px 15px 20px 15px;
+  box-sizing: border-box;
+  color: $gray-100;
+
+  & > h1 {
+    font-size: 32px;
+    font-weight: 500;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.editor-container {
+  height: calc(100% - 70px);
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: white;
+}

client/src/components/Sidebar/ConfButton.tsx

@@ -0,0 +1,7 @@
+import style from './style.module.scss';
+
+function ConfButton() {
+  return <button className={style['conf-button']}>회의시작</button>;
+}
+
+export default ConfButton;

client/src/components/Sidebar/MemberList.tsx

@@ -0,0 +1,29 @@
+import style from './style.module.scss';
+
+function MemberList() {
+  const members = [
+    {
+      id: 1,
+      name: '백도훈',
+      avatarUrl: 'https://avatars.githubusercontent.com/u/65100540?s=60&v=4',
+    },
+    {
+      id: 2,
+      name: '백도훈',
+      avatarUrl: 'https://avatars.githubusercontent.com/u/65100540?s=60&v=4',
+    },
+  ];
+
+  return (
+    <ul className={style['member-list']}>
+      {members.map((item) => (
+        <li key={item.id} className={style['member-item']}>
+          <img src={item.avatarUrl} />
+          <span>{item.name}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default MemberList;