Skip to content

Commit f0b9074

Browse files
Eunjin03Eunjin03
authored
Merge pull request #20 from KWcapstone/6-feat-meeting-page-상단바-생성
6 feat meeting page 상단바 생성
2 parents afa70c4 + 225dc81 commit f0b9074

File tree

11 files changed

+236
-257
lines changed

11 files changed

+236
-257
lines changed

‎src/assets/imgs/icon/dwn_black.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/assets/imgs/icon/dwn_white.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/imgs/icon/home.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/imgs/icon/side_panel.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/routes/Routes.tsx‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,47 @@ import ProjectPage from "@/views/main/page/ProjectPage";
44
import SplashRedirect from "./SplashRedirect";
55
import RecordPage from "@/views/main/page/RecordPage";
66
import SummaryPage from "@/views/main/page/SummaryPage";
7+
import MeetingPage from "@/views/meeting/page/MeetingPage";
78
import ProtectedRoute from "./ProtectedRoute";
89

910
const Router = () => {
1011
return (
1112
<BrowserRouter>
1213
<Routes>
13-
<Route path="/" element={<SplashRedirect />} />
14-
<Route path="/project" element={<ProtectedRoute><ProjectPage /></ProtectedRoute>} />
15-
<Route path="/record" element={<ProtectedRoute><RecordPage /></ProtectedRoute>} />
16-
<Route path="/summary" element={<ProtectedRoute><SummaryPage /></ProtectedRoute>} />
14+
<Route path="/" element={<SplashPage />} />
15+
<Route
16+
path="/project"
17+
element={
18+
<ProtectedRoute>
19+
<ProjectPage />
20+
</ProtectedRoute>
21+
}
22+
/>
23+
<Route
24+
path="/record"
25+
element={
26+
<ProtectedRoute>
27+
<RecordPage />
28+
</ProtectedRoute>
29+
}
30+
/>
31+
<Route
32+
path="/summary"
33+
element={
34+
<ProtectedRoute>
35+
<SummaryPage />
36+
</ProtectedRoute>
37+
}
38+
/>
39+
<Route
40+
path="/meeting"
41+
element={
42+
<ProtectedRoute>
43+
<MeetingPage />
44+
</ProtectedRoute>
45+
}
46+
/>
47+
1748
</Routes>
1849
</BrowserRouter>
1950
);

‎src/views/meeting/components/HeaderBar.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import "@/views/meeting/style/header-bar.sass";
2+
import test from "@/assets/imgs/common/test.png";
3+
import home from "@/assets/imgs/icon/home.svg";
4+
import dwn from "@/assets/imgs/icon/dwn_white.svg";
5+
6+
const HeaderBar = () => {
7+
return (
8+
<div className="header-bar">
9+
<img src={home} alt="home" className="home-icon" />
10+
<div className="right-section">
11+
<div className="share">공유하기</div>
12+
<div className="user-pofiles">
13+
<div className="user-profile">
14+
<img src={test} alt="profile" />
15+
</div>
16+
<div className="user-profile">
17+
<img src={test} alt="profile" />
18+
</div>
19+
<div className="user-profile">
20+
<img src={test} alt="profile" />
21+
</div>
22+
<div className="user-profile">
23+
<img src={test} alt="profile" />
24+
</div>
25+
<div className="user-profile">
26+
<img src={test} alt="profile" />
27+
</div>
28+
<div className="user-profile more">+3</div>
29+
<hr className="divider" />
30+
<button className="add-user">
31+
<img src={dwn} alt="add" className="add-icon" />
32+
<span className="add-text">다운받기</span>
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
);
38+
};
39+
40+
export default HeaderBar;

‎src/views/meeting/components/SideBar.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import "@/views/meeting/style/side-bar.sass";
2+
import sidePanel from "@/assets/imgs/icon/side_panel.svg";
3+
import test from "@/assets/imgs/common/test.png";
4+
5+
const SideBar = () => {
6+
return (
7+
<div className="side-bar">
8+
<div className="side-bar-wrap">
9+
<img src={sidePanel} alt="side-panel" className="side-panel-icon" />
10+
<div className="side-bar-title-wrap">
11+
<div className="side-bar-title">새회의</div>
12+
<div className="side-bar-detail">
13+
<div className="side-bar-date">
14+
<span className="date-title">회의일자</span>
15+
<span className="date-des">25.2.24 월 오후 11:47</span>
16+
</div>
17+
<div className="side-bar-creator">
18+
<span className="creator-title">생성자</span>
19+
<div className="creator-wrap">
20+
<img src={test} alt="creator" className="creator-icon" />
21+
<span className="creator-des">모아바</span>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
28+
<div className="side-panel-text">사이드 패널</div>
29+
</div>
30+
);
31+
};
32+
33+
export default SideBar;

‎src/views/meeting/page/MeetingPage.tsx‎

Lines changed: 13 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,23 @@
11
// style
2-
import "@/views/main/style/project.sass";
2+
import "@/views/meeting/style/meeting.sass";
33
import arrow from "@/assets/imgs/icon/arrow_down_black.svg";
4-
import test from "@/assets/imgs/common/user.svg";
4+
import test from "@/assets/imgs/common/test.png";
5+
import HeaderBar from "../components/HeaderBar";
6+
import SideBar from "../components/SideBar";
57

6-
// component
7-
import SideBar from "@/views/main/components/SideBar";
8-
9-
import { useState } from "react";
10-
import { Link } from "react-router-dom";
11-
12-
const ProjectPage = () => {
13-
const [tap, setTap] = useState<string>("all");
14-
const [order, setOrder] = useState<boolean>(true);
15-
const [showOrder, setShowOrder] = useState<boolean>(false);
8+
const MeetingPage = () => {
169

1710
return (
18-
<div className="main">
11+
<>
12+
<HeaderBar />
1913
<SideBar />
20-
<div className="project-wrap">
21-
<div className="nevigation-wrap">
22-
<div className="title-wrap">
23-
<h2>전체 회의</h2>
24-
<div className="search-wrap">
25-
<input type="text" placeholder="회의명 검색" />
26-
<Link to="/meeting">새로 만들기</Link>
27-
</div>
28-
</div>
29-
<div className="sort-wrap">
30-
<div className="tap-wrap">
31-
<ul>
32-
<li className={tap === "all" ? "active" : ""} onClick={() => setTap("all")}>전체</li>
33-
<li className={tap === "mine" ? "active" : ""} onClick={() => setTap("mine")}>내 회의</li>
34-
<li className={tap === "invite" ? "active" : ""} onClick={() => setTap("invite")}>초대된 회의</li>
35-
</ul>
36-
</div>
37-
<div className="order-wrap">
38-
<button onClick={() => setShowOrder(!showOrder)}>{ order ? "최신순" : "오래된 순" }<img src={arrow}/></button>
39-
{
40-
showOrder &&
41-
<ul>
42-
<li onClick={() => {setOrder(true); setShowOrder(false)}}>최신순</li>
43-
<li onClick={() => {setOrder(false); setShowOrder(false)}}>오래된 순</li>
44-
</ul>
45-
}
46-
</div>
47-
</div>
48-
</div>
49-
<div className="card-wrap">
50-
<div className="card">
51-
<img src={test} alt="" />
52-
<div className="info-wrap">
53-
<div className="title-wrap">
54-
<div className="title">모아바 회의</div>
55-
<div className="date">2025/1/16</div>
56-
</div>
57-
<div className="owner-wrap">
58-
<div className="owner"><img src={test}/>모아바</div>
59-
</div>
60-
</div>
61-
</div>
62-
<div className="card">
63-
<img src={test} alt="" />
64-
<div className="info-wrap">
65-
<div className="title-wrap">
66-
<div className="title">모아바 회의</div>
67-
<div className="date">2025/1/16</div>
68-
</div>
69-
<div className="owner-wrap">
70-
<div className="owner"><img src={test}/>모아바</div>
71-
</div>
72-
</div>
73-
</div>
74-
<div className="card">
75-
<img src={test} alt="" />
76-
<div className="info-wrap">
77-
<div className="title-wrap">
78-
<div className="title">모아바 회의</div>
79-
<div className="date">2025/1/16</div>
80-
</div>
81-
<div className="owner-wrap">
82-
<div className="owner"><img src={test}/>모아바</div>
83-
</div>
84-
</div>
85-
</div>
86-
<div className="card">
87-
<img src={test} alt="" />
88-
<div className="info-wrap">
89-
<div className="title-wrap">
90-
<div className="title">모아바 회의</div>
91-
<div className="date">2025/1/16</div>
92-
</div>
93-
<div className="owner-wrap">
94-
<div className="owner"><img src={test}/>모아바</div>
95-
</div>
96-
</div>
97-
</div>
98-
<div className="card">
99-
<img src={test} alt="" />
100-
<div className="info-wrap">
101-
<div className="title-wrap">
102-
<div className="title">모아바 회의</div>
103-
<div className="date">2025/1/16</div>
104-
</div>
105-
<div className="owner-wrap">
106-
<div className="owner"><img src={test}/>모아바</div>
107-
</div>
108-
</div>
109-
</div>
110-
<div className="card">
111-
<img src={test} alt="" />
112-
<div className="info-wrap">
113-
<div className="title-wrap">
114-
<div className="title">모아바 회의</div>
115-
<div className="date">2025/1/16</div>
116-
</div>
117-
<div className="owner-wrap">
118-
<div className="owner"><img src={test}/>모아바</div>
119-
</div>
120-
</div>
121-
</div>
122-
<div className="card">
123-
<img src={test} alt="" />
124-
<div className="info-wrap">
125-
<div className="title-wrap">
126-
<div className="title">모아바 회의</div>
127-
<div className="date">2025/1/16</div>
128-
</div>
129-
<div className="owner-wrap">
130-
<div className="owner"><img src={test}/>모아바</div>
131-
</div>
132-
</div>
133-
</div>
134-
</div>
14+
15+
<div className="project-content">
16+
<h1>회의 페이지</h1>
17+
13518
</div>
136-
</div>
19+
</>
13720
);
13821
};
13922

140-
export default ProjectPage;
23+
export default MeetingPage;

‎src/views/meeting/style/header-bar.sass‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import '@/sass/helpers/_variables.sass'
2+
@import '@/sass/helpers/_mixins.scss'
3+
@import '@/sass/uix/_input.sass'
4+
@import '@/sass/uix/_button.sass'
5+
@import '@/sass/base/_fonts.sass'
6+
7+
.header-bar
8+
+flex-box(space-between, center)
9+
+padding(9px 16px)
10+
+box-sizing(border-box)
11+
12+
border-bottom: 1px solid $gray-100
13+
background-color: $white
14+
15+
.right-section
16+
+flex-box(center, center, 16px)
17+
18+
.share
19+
font-family: Pretendard
20+
font-size: 14px
21+
font-style: normal
22+
font-weight: 500
23+
line-height: 150%
24+
letter-spacing: -0.154px
25+
color: #07F
26+
cursor: pointer
27+
28+
.user-pofiles
29+
+flex-box(center, center)
30+
31+
.user-profile
32+
+size(24px, 24px)
33+
+flex-box(center, center)
34+
border-radius: 50%;
35+
overflow: hidden;
36+
border: 2px solid white;
37+
margin-left: -12px;
38+
background-color: #e0e0e0;
39+
40+
.more
41+
background-color: #D9DBE2
42+
font-size: 12px;
43+
color: #625C5C;
44+
font-family: Pretendard;
45+
font-size: 12px;
46+
font-style: normal;
47+
font-weight: 500;
48+
line-height: 150%; /* 18px */
49+
letter-spacing: -0.132px;
50+
51+
&:first-child
52+
margin-left: 0;
53+
54+
img
55+
width: 100%;
56+
height: 100%;
57+
object-fit: cover;
58+
59+
.divider
60+
+size(1px, 24px)
61+
border-width:0;
62+
background-color: #DDD
63+
margin-left: 16px
64+
margin-right: 16px
65+
66+
.add-user
67+
+flex-box(center, center, 4px)
68+
+btn(null, 40px, 8px)
69+
+padding(10px 18px 10px 12px)
70+
background-color: $gray-900
71+
.add-icon
72+
+size(20px, 20px)
73+
color: #FFF;
74+
.add-text
75+
color: #FFF;
76+
font-family: Pretendard;
77+
font-size: 14px;
78+
font-style: normal;
79+
font-weight: 600;
80+
line-height: 150%; /* 21px */

0 commit comments

Comments
 (0)