Skip to content

Commit ef115cb

Browse files
juyeong-sjuyeong-s
authored
Merge pull request #35 from boostcampwm-2022/feat/#23-S
Feat/#23-S : 공통 모달 컴포넌트 구현
2 parents 77d11b7 + b46eb35 commit ef115cb

File tree

21 files changed

+408
-33
lines changed

21 files changed

+408
-33
lines changed

‎client/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
</head>
1515
<body>
1616
<div id="root"></div>
17+
<div id="portal-root"></div>
1718
<script type="module" src="/src/main.tsx"></script>
1819
</body>
1920
</html>

‎client/src/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { BrowserRouter, Routes, Route } from "react-router-dom";
2-
import LoginPage from "src/pages/Login";
2+
import { LoginPage, WorkspacePage } from "./pages";
33
import "style/reset.scss";
44

55
function App() {
66
return (
77
<BrowserRouter>
88
<Routes>
99
<Route path="/" element={<LoginPage />} />
10+
<Route path="/workspace" element={<WorkspacePage />} />
1011
</Routes>
1112
</BrowserRouter>
1213
);

‎client/src/components/Portal/index.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createPortal } from "react-dom";
2+
3+
interface PortalProps {
4+
children: React.ReactNode;
5+
}
6+
7+
function Portal({ children }: PortalProps) {
8+
const portalRoot = document.getElementById("portal-root");
9+
return portalRoot ? createPortal(children, portalRoot) : null;
10+
}
11+
12+
export default Portal;

‎client/src/components/SelectModal/index.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import cx from 'classnames';
2+
import Portal from 'src/components/Portal';
3+
4+
import style from './style.module.scss';
5+
6+
interface SelcetModalProps {
7+
children: JSX.Element;
8+
className?: string;
9+
onClose: () => void;
10+
}
11+
12+
function SelcetModal({ children, className, onClose }: SelcetModalProps) {
13+
const onClickCloseBtn = () => {
14+
onClose();
15+
};
16+
17+
return (
18+
<Portal>
19+
<div
20+
className={style.modal}
21+
role="alertdialog"
22+
aria-modal
23+
aria-labelledby="modal"
24+
>
25+
<div className={cx(style.container, className)}>{children}</div>
26+
<div
27+
className={style.dimmer}
28+
onClick={onClickCloseBtn}
29+
tabIndex={0}
30+
></div>
31+
</div>
32+
</Portal>
33+
);
34+
}
35+
36+
export default SelcetModal;

‎client/src/components/SelectModal/style.module.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@import 'style/color.scss';
2+
3+
.modal {
4+
z-index: 100;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
position: fixed;
9+
top: 0;
10+
bottom: 0;
11+
left: 0;
12+
right: 0;
13+
14+
.container {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
19+
width: fit-content;
20+
height: fit-content;
21+
22+
border-radius: 10px;
23+
background-color: $primary-100;
24+
padding: 20px;
25+
color: $white;
26+
font-size: 14px;
27+
margin: auto;
28+
}
29+
.dimmer {
30+
position: fixed;
31+
top: 0;
32+
bottom: 0;
33+
left: 0;
34+
right: 0;
35+
background-color: $modalBackground;
36+
}
37+
}

‎client/src/components/WorkspaceList/AddButton.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
import { MdAdd } from "@react-icons/all-files/md/MdAdd";
2-
import React from "react";
1+
import { MdAdd } from '@react-icons/all-files/md/MdAdd';
2+
import React from 'react';
33

4-
import style from "./style.module.scss";
4+
import style from './style.module.scss';
5+
6+
interface AddButtonProps {
7+
onClick: () => void;
8+
}
9+
10+
function AddButton({ onClick }: AddButtonProps) {
11+
const onClickBtn = () => {
12+
onClick();
13+
};
514

6-
function AddButton() {
715
return (
8-
<div className={style.button}>
9-
<MdAdd color="white" size={15} />
10-
</div>
16+
<button className={style.button} onClick={onClickBtn}>
17+
<MdAdd color="white" size={20} />
18+
</button>
1119
);
1220
}
1321

‎client/src/components/WorkspaceList/WorkspaceThumbnailItem.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
1+
import { memo } from 'react';
22

3-
import style from "./style.module.scss";
3+
import style from './style.module.scss';
44

55
interface WorkspaceThumbnailItemProps {
66
name: string;
@@ -21,4 +21,4 @@ function WorkspaceThumbnailItem({ name }: WorkspaceThumbnailItemProps) {
2121
);
2222
}
2323

24-
export default WorkspaceThumbnailItem;
24+
export default memo(WorkspaceThumbnailItem);

‎client/src/components/WorkspaceList/WorkspaceThumbnailList.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import React from "react";
2-
3-
import style from "./style.module.scss";
4-
import WorkspaceThumbnailItem from "./WorkspaceThumbnailItem";
1+
import style from './style.module.scss';
2+
import WorkspaceThumbnailItem from './WorkspaceThumbnailItem';
53

64
const workspaces = [
7-
{ id: 1, name: "왭" },
8-
{ id: 2, name: "네이버" },
9-
{ id: 3, name: "카카오" },
10-
{ id: 4, name: "토스" },
5+
{ id: 1, name: '왭' },
6+
{ id: 2, name: '네이버' },
7+
{ id: 3, name: '카카오' },
8+
{ id: 4, name: '토스' },
119
];
1210

1311
function WorkspaceThumbnailList() {

‎client/src/components/WorkspaceList/index.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import React from "react";
1+
import { memo } from 'react';
22

3-
import AddButton from "./AddButton";
4-
import style from "./style.module.scss";
5-
import WorkspaceThumbnaliList from "./WorkspaceThumbnailList";
3+
import AddButton from './AddButton';
4+
import style from './style.module.scss';
5+
import WorkspaceThumbnaliList from './WorkspaceThumbnailList';
66

7-
function WorkspaceList() {
7+
interface WorkspaceListProps {
8+
onSelectModalOpen: () => void;
9+
}
10+
11+
function WorkspaceList({ onSelectModalOpen }: WorkspaceListProps) {
812
return (
913
<div className={style.workspace__container}>
1014
<WorkspaceThumbnaliList />
11-
<AddButton />
15+
<AddButton onClick={onSelectModalOpen} />
1216
</div>
1317
);
1418
}
1519

16-
export default WorkspaceList;
20+
export default memo(WorkspaceList);

‎client/src/components/WorkspaceList/style.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
border: 1px solid $white;
2222
border-radius: 50%;
23+
cursor: pointer;
2324

2425
& + & {
2526
margin-top: 12px;
@@ -46,4 +47,5 @@
4647
align-items: center;
4748

4849
padding: 12px;
50+
cursor: pointer;
4951
}

0 commit comments

Comments
 (0)