Merge pull request #41 from boostcampwm-2022/feat/#20-B

Feat/#20-B: 워크스페이스 리스트 API, UI 연동

Author: dohun31

client/package.json

@@ -9,8 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "classnames": "^2.3.2",
     "@react-icons/all-files": "^4.1.0",
+    "axios": "^1.1.3",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3"

client/src/App.tsx

@@ -1,6 +1,7 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { LoginPage, WorkspacePage } from "./pages";
-import "style/reset.scss";
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import { LoginPage, WorkspacePage } from './pages';
+import 'style/reset.scss';
 
 function App() {
   return (

client/src/apis/http.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const SERVER_URL = 'http://localhost:8080';
+
+export const http = axios.create({
+  baseURL: SERVER_URL,
+});

client/src/apis/user.ts

@@ -0,0 +1,11 @@
+import { http } from './http';
+
+export const getWorkspaces = async (userId: number) => {
+  try {
+    const { data } = await http.get(`/user/${userId}/workspace`);
+
+    return data;
+  } catch (e) {
+    return;
+  }
+};

client/src/components/WorkspaceList/WorkspaceThumbnailList.tsx

@@ -1,14 +1,13 @@
+import { Workspace } from 'src/types/workspace';
+
 import style from './style.module.scss';
 import WorkspaceThumbnailItem from './WorkspaceThumbnailItem';
 
-const workspaces = [
-  { id: 1, name: '왭' },
-  { id: 2, name: '네이버' },
-  { id: 3, name: '카카오' },
-  { id: 4, name: '토스' },
-];
+interface WorkspaceThumbnailListProps {
+  workspaces: Workspace[];
+}
 
-function WorkspaceThumbnailList() {
+function WorkspaceThumbnailList({ workspaces }: WorkspaceThumbnailListProps) {
   return (
     <ul className={style.thumbnail__list}>
       {workspaces.map((workspace) => (

client/src/components/WorkspaceList/index.tsx

@@ -1,4 +1,6 @@
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
+import { getWorkspaces } from 'src/apis/user';
+import { Workspace } from 'src/types/workspace';
 
 import AddButton from './AddButton';
 import style from './style.module.scss';
@@ -9,9 +11,24 @@ interface WorkspaceListProps {
 }
 
 function WorkspaceList({ onSelectModalOpen }: WorkspaceListProps) {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  /**
+   * 나중에 login하고 context생기면 바꿔 끼우면 돼요.
+   */
+  const userId = 63814960;
+
+  const updateWorkspaces = async (userId: number) => {
+    const { workspaces } = await getWorkspaces(userId);
+    setWorkspaces(workspaces);
+  };
+
+  useEffect(() => {
+    updateWorkspaces(userId);
+  }, []);
+
   return (
     <div className={style.workspace__container}>
-      <WorkspaceThumbnaliList />
+      <WorkspaceThumbnaliList workspaces={workspaces} />
       <AddButton onClick={onSelectModalOpen} />
     </div>
   );

client/src/types/workspace.ts

@@ -0,0 +1,4 @@
+export interface Workspace {
+  id: number;
+  name: string;
+}

server/apis/user/controller.ts

@@ -17,6 +17,8 @@ router.get(
       userId,
     );
 
+    res.setHeader('Access-Control-Allow-origin', '*');
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
     res.send({ workspaces });
   }),
 );