Apply workspace page design from Figma (#418)

* Change layout in workspace page * Apply `DocumentCard` design
yorkie-team · Nov 30, 2024 · 78b204b · 78b204b
1 parent dadb024
commit 78b204b
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 76 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,6 +6,12 @@
 		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
 		<link rel="apple-touch-icon" href="/favicon-512x512.png" />
+		<link
+			rel="stylesheet"
+			as="style"
+			crossorigin
+			href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="description" content="Yorkie Codepair" />
 		<title>CodePair</title>

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,7 +1,3 @@
-import "@fontsource/roboto/300.css";
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/500.css";
-import "@fontsource/roboto/700.css";
 import { Box, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
 import * as Sentry from "@sentry/react";
 import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -67,6 +63,7 @@ function App() {
 				button: {
 					textTransform: "none",
 				},
+				fontFamily: `"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;`,
 			},
 			palette: {
 				mode: config.theme == "default" ? defaultMode : config.theme,

diff --git a/frontend/src/components/cards/DocumentCard.tsx b/frontend/src/components/cards/DocumentCard.tsx
@@ -1,29 +1,55 @@
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
-import { Card, CardActionArea, CardContent, Stack, Typography } from "@mui/material";
-import moment from "moment";
-import { useNavigate, useParams } from "react-router-dom";
+import { Paper, Stack, Typography } from "@mui/material";
+import { Link, useParams } from "react-router-dom";
 import { Document } from "../../hooks/api/types/document.d";
+import moment from "moment";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
 
 interface DocumentCardProps {
 	document: Document;
 }
 
 function DocumentCard(props: DocumentCardProps) {
 	const { document } = props;
-	const navigate = useNavigate();
 	const params = useParams();
 
-	const handleToDocument = () => {
-		navigate(`/${params.workspaceSlug}/${document.id}`);
-	};
-
 	return (
-		<Card sx={{ width: "100%" }}>
-			<CardActionArea onClick={handleToDocument}>
-				<CardContent>
-					<Typography variant="h5" component="div" noWrap>
-						{document.title}
+		<Link
+			to={`/${params.workspaceSlug}/${document.id}`}
+			style={{
+				textDecoration: "none",
+			}}
+		>
+			<Paper
+				variant="outlined"
+				sx={{
+					px: 3,
+					py: 2,
+				}}
+			>
+				<Stack direction="row" justifyContent="space-between">
+					<Typography variant="body2" color="primary">
+						{moment(document.createdAt).format("D MMM YYYY")}
 					</Typography>
+
+					{/* TODO(devleejb): When the document deletion is implemented, uncomment the following code */}
+					{/* <IconButton size="small" sx={{ p: 0 }}>
+						<MoreVertIcon fontSize="small" />
+					</IconButton> */}
+				</Stack>
+				<Typography variant="h6" component="div" noWrap fontWeight={600}>
+					{document.title}
+				</Typography>
+				<Stack direction="row" mt={1} gap={1} flexWrap="wrap" height={56}>
+					{/* TODO(devleejb): When the tag sytem is implemented, uncomment the following code */}
+					{/* {new Array(4).fill(0).map((_, index) => (
+						<Chip
+							label={`Tag ${index + 1}`}
+							sx={{ borderRadius: "4px", backgroundColor: "#E6F2FC" }}
+							size="small"
+						/>
+					))} */}
+				</Stack>
+				<Stack direction="row" alignItems="end" justifyContent="space-between" mt={2}>
 					<Stack direction="row" alignItems="center" gap={1}>
 						<AccessTimeIcon
 							fontSize="small"
@@ -32,12 +58,33 @@ function DocumentCard(props: DocumentCardProps) {
 							}}
 						/>
 						<Typography variant="body2" color="text.secondary" noWrap>
-							Changed {moment(document.updatedAt).fromNow()}
+							{moment(document.updatedAt).format("D MMM YYYY")}
 						</Typography>
 					</Stack>
-				</CardContent>
-			</CardActionArea>
-		</Card>
+					{/* TODO(devleejb): When the fetching presemces from yorkie is implemented, uncomment the following code */}
+					{/* <AvatarGroup
+						total={6}
+						max={5}
+						sx={{
+							"& .MuiAvatar-root": {
+								width: 32,
+								height: 32,
+							},
+						}}
+					>
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+						<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
+					</AvatarGroup> */}
+				</Stack>
+			</Paper>
+		</Link>
 	);
 }
 

diff --git a/frontend/src/components/layouts/WorkspaceLayout.tsx b/frontend/src/components/layouts/WorkspaceLayout.tsx
@@ -20,16 +20,18 @@ function WorkspaceLayout() {
 	const { drawerOpen } = useSelector(selectConfig);
 
 	return (
-		<Box sx={{ display: "flex" }}>
+		<Stack gap={0}>
 			<WorkspaceHeader />
-			<Stack direction="row" sx={{ width: "100%" }}>
+			<Stack direction="row">
 				<WorkspaceDrawer open={drawerOpen} />
-				<Box flexGrow={1} padding={3}>
+				<Box flexGrow={1} maxWidth="100%" px={2}>
 					<WorkspaceDrawerHeader />
-					<Outlet />
+					<Box mx="auto" maxWidth={1440} width="100%">
+						<Outlet />
+					</Box>
 				</Box>
 			</Stack>
-		</Box>
+		</Stack>
 	);
 }
 

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,7 +1,26 @@
+* {
+	font-family:
+		"Pretendard Variable",
+		Pretendard,
+		-apple-system,
+		BlinkMacSystemFont,
+		system-ui,
+		Roboto,
+		"Helvetica Neue",
+		"Segoe UI",
+		"Apple SD Gothic Neo",
+		"Noto Sans KR",
+		"Malgun Gothic",
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		sans-serif;
+}
+
 body {
 	margin: 0;
 	min-height: 100vh;
-	overflow: hidden;
+	/* overflow: hidden; */
 }
 
 #yorkie-intelligence-footer .wmde-markdown {

diff --git a/frontend/src/pages/workspace/Index.tsx b/frontend/src/pages/workspace/Index.tsx
@@ -4,14 +4,30 @@ import {
 	useGetWorkspaceDocumentListQuery,
 } from "../../hooks/api/workspaceDocument";
 import { useGetWorkspaceQuery } from "../../hooks/api/workspace";
-import { Backdrop, Box, Button, CircularProgress, Grid, Stack, Typography } from "@mui/material";
+import {
+	Backdrop,
+	Box,
+	Button,
+	CircularProgress,
+	Grid2,
+	Paper,
+	Stack,
+	Tab,
+	Tabs,
+	Typography,
+} from "@mui/material";
 import DocumentCard from "../../components/cards/DocumentCard";
 import { useMemo, useState } from "react";
 import { Document } from "../../hooks/api/types/document.d";
 import InfiniteScroll from "react-infinite-scroller";
 import CreateModal from "../../components/modals/CreateModal";
 import AddIcon from "@mui/icons-material/Add";
 
+const tabs = [
+	"BOARD",
+	// "TABLE"
+];
+
 function WorkspaceIndex() {
 	const params = useParams();
 	const navigate = useNavigate();
@@ -51,54 +67,65 @@ function WorkspaceIndex() {
 	};
 
 	return (
-		<Stack gap={2}>
-			<Stack direction="row" justifyContent="space-between" alignItems="center" px={2}>
-				<Typography variant="h5" fontWeight="bold">
-					{workspace?.title}{" "}
-					<Typography component="span" variant="inherit" color="primary">
-						{documentPageList?.pages[0].totalLength}
-					</Typography>
-				</Typography>
-				<Button
-					variant="contained"
-					startIcon={<AddIcon />}
-					onClick={handleCreateDocumentModalOpen}
-				>
-					New Note
-				</Button>
-			</Stack>
-			<Stack
-				style={{
-					maxHeight: "calc(100vh - 144px)",
-					overflow: "auto",
+		<Stack position="relative" pb={6}>
+			<Paper
+				elevation={0}
+				sx={{
+					position: "sticky",
+					top: 64,
+					left: 0,
+					width: "100%",
+					pb: 4,
+					zIndex: 3,
 				}}
 			>
-				<InfiniteScroll
-					pageStart={0}
-					loadMore={() => fetchNextPage()}
-					hasMore={hasNextPage}
-					loader={
-						<Stack className="loader" key={0} alignItems="center">
-							<CircularProgress size={20} />
-						</Stack>
-					}
-					useWindow={false}
-				>
-					<Box p={2} width={1}>
-						<Grid
-							container
-							spacing={{ xs: 2, md: 3 }}
-							columns={{ xs: 4, sm: 8, md: 12, lg: 12 }}
-						>
-							{documentList.map((document) => (
-								<Grid key={document.id} item xs={4} sm={4} md={4} lg={3}>
-									<DocumentCard document={document} />
-								</Grid>
-							))}
-						</Grid>
-					</Box>
-				</InfiniteScroll>
-			</Stack>
+				<Stack direction="row" justifyContent="space-between" alignItems="center" pt={6}>
+					<Typography variant="h5" fontWeight="bold">
+						{workspace?.title}{" "}
+						<Typography component="span" variant="inherit" color="primary">
+							{documentPageList?.pages[0].totalLength}
+						</Typography>
+					</Typography>
+					<Button
+						variant="contained"
+						startIcon={<AddIcon />}
+						onClick={handleCreateDocumentModalOpen}
+					>
+						New Note
+					</Button>
+				</Stack>
+			</Paper>
+			<Box sx={{ borderBottom: 1, borderColor: "divider" }} mb={4}>
+				<Tabs value={tabs[0]}>
+					{tabs.map((tab) => (
+						<Tab key={tab} label={tab} value={tab} />
+					))}
+				</Tabs>
+			</Box>
+			<InfiniteScroll
+				pageStart={0}
+				loadMore={() => fetchNextPage()}
+				hasMore={hasNextPage}
+				loader={
+					<Stack className="loader" key={0} alignItems="center">
+						<CircularProgress size={20} />
+					</Stack>
+				}
+			>
+				<Box width={1}>
+					<Grid2
+						container
+						spacing={{ xs: 2, md: 3 }}
+						columns={{ xs: 4, sm: 8, md: 12, lg: 12 }}
+					>
+						{documentList.map((document) => (
+							<Grid2 key={document.id} size={4}>
+								<DocumentCard document={document} />
+							</Grid2>
+						))}
+					</Grid2>
+				</Box>
+			</InfiniteScroll>
 			<CreateModal
 				open={createDocumentModalOpen}
 				title="Note"

diff --git a/frontend/src/pages/workspace/member/Index.tsx b/frontend/src/pages/workspace/member/Index.tsx
@@ -45,7 +45,7 @@ function MemberIndex() {
 
 	return (
 		<Container maxWidth="lg">
-			<Stack gap={4}>
+			<Stack gap={4} py={6}>
 				<Stack direction="row" justifyContent="space-between" alignItems="center" px={2}>
 					<Typography variant="h5" fontWeight="bold">
 						{workspace?.title}{" "}