Skip to content

Commit cd4a9ed

Browse files
chaesunwoongchaesunwoong
committed
사용자 페이지 사이드바 분리, 사용자 페이지(공유됨) 작업
1 parent 31bfa99 commit cd4a9ed

6 files changed

Lines changed: 327 additions & 79 deletions

File tree

‎src/components/mypage/Mypage.css‎

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,6 @@
66
min-height: 100vh;
77
}
88

9-
.sidebar {
10-
width: 302px;
11-
background-color: #ffffff;
12-
padding: 20px;
13-
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
14-
}
15-
16-
.sidebar .username {
17-
display: flex;
18-
align-items: center;
19-
font-size: 18px;
20-
font-weight: bold;
21-
margin-bottom: 20px;
22-
padding-bottom: 10px;
23-
border-bottom: 1px solid #ddd;
24-
}
25-
26-
.avatar-small {
27-
width: 48px;
28-
height: 48px;
29-
border-radius: 50%;
30-
background-color: #bbb; /* 회색 아바타 */
31-
margin-right: 15px;
32-
}
33-
34-
.user-info {
35-
display: flex;
36-
flex-direction: column;
37-
}
38-
39-
.user-info .name {
40-
font-size: 20px;
41-
font-weight: bold;
42-
color: #333;
43-
margin-bottom: 2px;
44-
}
45-
46-
.user-info .email {
47-
font-size: 13px;
48-
color: #888;
49-
}
50-
51-
.sidebar ul {
52-
list-style: none;
53-
padding: 0;
54-
}
55-
56-
.sidebar li {
57-
padding: 10px 10px;
58-
cursor: pointer;
59-
color: #555;
60-
}
61-
62-
.sidebar li.active {
63-
color: white;
64-
background-color: #a684f1;
65-
padding-left: 10px;
66-
border-radius: 4px;
67-
}
68-
699
.content {
7010
flex: 1;
7111
padding: 40px;

‎src/components/mypage/Mypage.jsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,12 @@
11
import React from 'react';
22
import './Mypage.css';
33
import { FaExchangeAlt, FaUser, FaStar } from 'react-icons/fa';
4+
import Sidebar from './Sidebar'; // Sidebar 불러오기
45

56
const MyPage = () => {
67
return (
78
<div className="mypage">
8-
<aside className="sidebar">
9-
<div className="username">
10-
<div className="avatar-small" />
11-
<div className="user-info">
12-
<span className="name">김코딩</span>
13-
<span className="email">@kimcoidng</span>
14-
</div>
15-
</div>
16-
17-
18-
<ul>
19-
<li className="active">📊 대시보드</li>
20-
<li>🗂️ 프로젝트</li>
21-
<li>💬 커뮤니티</li>
22-
<li>🌐 네트워크</li>
23-
<li>📁 공유함</li>
24-
<li>⚙️ 설정</li>
25-
</ul>
26-
</aside>
9+
<Sidebar />
2710

2811
<main className="content">
2912
<h1 className="page-title">마이페이지</h1>

‎src/components/mypage/Shared.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
.shared-projects-container {
2+
flex: 1;
3+
padding: 40px;
4+
max-width: 1200px;
5+
margin: 0 auto;
6+
background-color: #fafafa;
7+
min-height: 100vh;
8+
}
9+
10+
.search-input {
11+
width: 1180px;
12+
padding: 12px;
13+
font-size: 18px;
14+
margin-bottom: 40px;
15+
border: 1px solid #ccc;
16+
border-radius: 8px;
17+
background-color: white;
18+
}
19+
20+
.tab-buttons {
21+
display: flex;
22+
margin-bottom: 24px;
23+
}
24+
25+
.tab {
26+
padding: 8px 18px;
27+
background-color: #f0f0f0;
28+
color: #333;
29+
border: 1px solid #ccc;
30+
border-radius: 8px;
31+
cursor: pointer;
32+
font-size: 18px;
33+
transition: all 0.2s ease-in-out;
34+
}
35+
36+
.tab.active {
37+
background-color: #a684f1;
38+
color: white;
39+
border-color: #a684f1;
40+
}
41+
42+
.cards-wrapper {
43+
display: flex;
44+
flex-wrap: wrap;
45+
gap: 20px;
46+
margin-top: 10px;
47+
}
48+
49+
.project-card {
50+
flex: 1 1 calc(33.333% - 20px);
51+
background-color: white;
52+
padding: 18px;
53+
border-radius: 16px;
54+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
55+
min-height: 250px;
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: space-between;
59+
box-sizing: border-box;
60+
}
61+
62+
.project-card:hover {
63+
transform: translateY(-4px);
64+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
65+
}
66+
67+
.card-title {
68+
font-size: 22px;
69+
font-weight: bold;
70+
color: #333;
71+
margin-bottom: 4px;
72+
}
73+
74+
.tag {
75+
font-size: 16px !important;
76+
padding: 4px 10px;
77+
border-radius: 6px;
78+
margin-bottom: 6px;
79+
display: inline-block;
80+
}
81+
82+
.tag-edit {
83+
background-color: #dbf5db !important; /* 연한 초록 */
84+
color: #2a9232;
85+
}
86+
87+
.tag-view {
88+
background-color: #e6ecfd !important; /* 연한 파랑 */
89+
color: #4469e6;
90+
}
91+
92+
.tag-comment {
93+
background-color: #f5e7ff !important; /* 연한 보라 */
94+
color: #a153e8;
95+
}
96+
97+
98+
.description {
99+
font-size: 20px !important;
100+
color: #666;
101+
line-height: 1.4;
102+
margin-bottom: 12px;
103+
}
104+
105+
.card-bottom {
106+
display: flex;
107+
justify-content: space-between;
108+
align-items: center; /* 세로축 중앙 정렬 */
109+
flex-wrap: wrap;
110+
gap: 10px;
111+
}
112+
113+
114+
.card-meta {
115+
display: flex;
116+
gap: 10px;
117+
font-size: 15px;
118+
color: #555;
119+
}
120+
121+
.language,
122+
.date {
123+
font-size: 15px;
124+
color: #555;
125+
}
126+
127+
.open-button {
128+
align-self: flex-end;
129+
font-size: 18px;
130+
padding: 6px 17px;
131+
border-radius: 6px;
132+
background-color: #f0f0f0;
133+
border: 1px solid #ccc;
134+
cursor: pointer;
135+
}
136+
137+
.card-header {
138+
margin-bottom: 8px;
139+
}
140+
141+
.language {
142+
background-color: #fafafa;
143+
}
144+
145+
.collaborators {
146+
font-size: 15px;
147+
color: #555;
148+
display: inline-block;
149+
padding-left: 4px; /* 왼쪽 공간만 확보 */
150+
}
151+

‎src/components/mypage/Shared.jsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import './Shared.css';
3+
import Sidebar from './Sidebar'; // Sidebar 불러오기
4+
5+
const Shared = () => {
6+
return (
7+
<div className="mypage"> {/* Sidebar와 content를 Flex로 나란히 배치 */}
8+
<Sidebar />
9+
<div className="shared-projects-container">
10+
<h2 className="page-title">공유된 프로젝트</h2>
11+
<input type="text" placeholder=" 프로젝트 검색..." className="search-input" />
12+
13+
<div className="tab-buttons">
14+
<button className="tab active">나와 공유됨</button>
15+
<button className="tab">내가 공유함</button>
16+
</div>
17+
18+
<div className="cards-wrapper">
19+
<ProjectCard
20+
title="정렬 알고리즘 비교"
21+
tag="편집"
22+
language="JavaScript"
23+
date="2023. 5. 10."
24+
description="다양한 정렬 알고리즘의 성능 비교 및 시각화"
25+
collaborators="2"
26+
/>
27+
<ProjectCard
28+
title="이진 탐색 트리 구현"
29+
tag="보기"
30+
language="Python"
31+
date="2023. 5. 5."
32+
description="이진 탐색 트리의 구현 및 시각화"
33+
collaborators="1"
34+
/>
35+
<ProjectCard
36+
title="그래프 알고리즘 시각화"
37+
tag="댓글"
38+
language="TypeScript"
39+
date="2023. 4. 28."
40+
description="다양한 그래프 알고리즘의 시각화 및 성능 비교"
41+
collaborators="3"
42+
/>
43+
</div>
44+
</div>
45+
</div>
46+
);
47+
};
48+
const tagClassMap = {
49+
'편집': 'edit',
50+
'보기': 'view',
51+
'댓글': 'comment'
52+
};
53+
54+
const ProjectCard = ({ title, tag, language, date, description, collaborators }) => (
55+
<div className="project-card">
56+
<h3 className="card-title">{title}</h3>
57+
<span className={`tag tag-${tagClassMap[tag]}`}>{tag}</span>
58+
<p className="description">{description}</p>
59+
60+
<div className="card-bottom">
61+
<div className="card-meta">
62+
<span className={`language ${language.toLowerCase()}`}>{language}</span>
63+
<span className="date">{date}</span>
64+
</div>
65+
<span className="collaborators">👥 {collaborators}</span>
66+
<button className="open-button">열기</button>
67+
</div>
68+
</div>
69+
);
70+
71+
72+
73+
74+
export default Shared;

‎src/components/mypage/Sidebar.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.sidebar {
2+
width: 302px;
3+
background-color: #ffffff;
4+
padding: 20px;
5+
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
6+
}
7+
8+
.sidebar .username {
9+
display: flex;
10+
align-items: center;
11+
font-size: 18px;
12+
font-weight: bold;
13+
margin-bottom: 20px;
14+
padding-bottom: 10px;
15+
border-bottom: 1px solid #ddd;
16+
}
17+
18+
.avatar-small {
19+
width: 48px;
20+
height: 48px;
21+
border-radius: 50%;
22+
background-color: #bbb; /* 회색 아바타 */
23+
margin-right: 15px;
24+
}
25+
26+
.user-info {
27+
display: flex;
28+
flex-direction: column;
29+
}
30+
31+
.user-info .name {
32+
font-size: 20px;
33+
font-weight: bold;
34+
color: #333;
35+
margin-bottom: 2px;
36+
}
37+
38+
.user-info .email {
39+
font-size: 13px;
40+
color: #888;
41+
}
42+
43+
.sidebar ul {
44+
list-style: none;
45+
padding: 0;
46+
}
47+
48+
.sidebar li {
49+
padding: 10px 10px;
50+
cursor: pointer;
51+
color: #555;
52+
}
53+
54+
.sidebar li.active {
55+
color: white;
56+
background-color: #a684f1;
57+
padding-left: 10px;
58+
border-radius: 4px;
59+
}

0 commit comments

Comments
 (0)