Skip to content

Commit ab83cea

Browse files
sojeongP0415sojeongP0415
committed
Merge remote-tracking branch 'origin/sunwoong'
2 parents 6cf63ce + c9140b2 commit ab83cea

8 files changed

Lines changed: 965 additions & 0 deletions

File tree

‎src/components/mypage/Mypage.css‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
.mypage {
2+
display: flex;
3+
font-family: 'Noto Sans KR', sans-serif;
4+
color: #333;
5+
background-color: #fafafa;
6+
min-height: 100vh;
7+
}
8+
9+
.content {
10+
flex: 1;
11+
padding: 40px;
12+
max-width: 1500px;
13+
margin: 0 auto;
14+
}
15+
16+
.page-title {
17+
font-size: 30px;
18+
font-weight: bold;
19+
margin-bottom: 30px;
20+
}
21+
22+
.profile-header {
23+
display: flex;
24+
align-items: flex-start;
25+
justify-content: space-between;
26+
background-color: white;
27+
padding: 20px;
28+
border-radius: 8px;
29+
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
30+
margin-bottom: 30px;
31+
min-height: 340px;
32+
}
33+
34+
.avatar {
35+
width: 150px;
36+
height: 150px;
37+
border-radius: 50%;
38+
background-color: #ddd;
39+
}
40+
41+
.info {
42+
flex: 1;
43+
margin-left: 40px;
44+
}
45+
46+
.info h2 {
47+
font-size: 30px;
48+
font-weight: bold;
49+
margin-bottom: 6px;
50+
}
51+
52+
.email {
53+
font-size: 17px;
54+
color: #555;
55+
font-weight: 500;
56+
margin-bottom: 6px;
57+
}
58+
59+
.bio {
60+
margin-top: 8px;
61+
color: #666;
62+
}
63+
64+
.tags span {
65+
background-color: #e0e0ff;
66+
padding: 4px 8px;
67+
margin-right: 6px;
68+
border-radius: 8px;
69+
font-size: 16px;
70+
}
71+
72+
.edit-btn {
73+
background-color: #a684f1;
74+
color: white;
75+
border: none;
76+
padding: 12px 24px;
77+
border-radius: 8px;
78+
cursor: pointer;
79+
font-size: 18px; /* 글자 크기 키우기 */
80+
}
81+
82+
.stats {
83+
display: flex;
84+
gap: 20px;
85+
margin-bottom: 40px;
86+
width: 100%;
87+
}
88+
89+
.stat-box {
90+
flex: 1 1 0;
91+
background-color: white;
92+
padding: 24px;
93+
border-radius: 12px;
94+
text-align: left;
95+
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
96+
min-height: 150px;
97+
display: flex;
98+
flex-direction: column;
99+
justify-content: space-between;
100+
}
101+
102+
.stat-box h3 {
103+
font-size: 18px;
104+
color: #555;
105+
margin-bottom: 6px;
106+
margin-left: 12px;
107+
}
108+
109+
.stat-box .count {
110+
font-size: 28px;
111+
font-weight: bold;
112+
margin-bottom: 8px;
113+
margin-left: 12px;
114+
}
115+
116+
.stat-box .change {
117+
font-size: 15px;
118+
color: #888;
119+
margin-left: 12px;
120+
}
121+
122+
.stat-box .change.up {
123+
color: green;
124+
}
125+
126+
.stat-box .change.down {
127+
color: red;
128+
}
129+
130+
.stat-box span {
131+
font-size: 2px;
132+
color: #888;
133+
}
134+
135+
.recent-projects {
136+
margin-bottom: 60px;
137+
border-bottom: none; /* 선 제거 */
138+
}
139+
140+
.recent-projects .section-title {
141+
font-size: 24px;
142+
font-weight: bold;
143+
margin-bottom: 20px;
144+
color: #333;
145+
display: flex;
146+
justify-content: space-between;
147+
align-items: center;
148+
}
149+
150+
.view-all-btn {
151+
background-color: #f0f0f0;
152+
border-radius: 8px;
153+
padding: 8px 16px;
154+
text-decoration: none;
155+
font-size: 15px;
156+
color: #333;
157+
border: 1px solid #ccc;
158+
transition: all 0.2s ease-in-out;
159+
}
160+
161+
.view-all-btn:hover {
162+
background-color: #e0e0e0;
163+
color: #000;
164+
border-color: #999;
165+
}
166+
167+
.recent-projects .project-list {
168+
display: flex;
169+
gap: 20px;
170+
}
171+
172+
.project-card {
173+
flex: 1 1 calc(33.333% - 20px);
174+
background-color: white;
175+
padding: 24px;
176+
border-radius: 16px;
177+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
178+
text-align: left;
179+
position: relative;
180+
min-height: 220px;
181+
display: flex;
182+
flex-direction: column;
183+
justify-content: space-between;
184+
background-size: cover;
185+
background-position: center;
186+
}
187+
188+
.thumbnail {
189+
width: 100%;
190+
height: 200px; /* 적당한 높이 설정 */
191+
object-fit: cover;
192+
border-top-left-radius: 16px;
193+
border-top-right-radius: 16px;
194+
margin-bottom: 16px;
195+
}
196+
197+
198+
.project-card:hover {
199+
transform: translateY(-4px);
200+
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
201+
}
202+
203+
.project-card h4 {
204+
font-size: 24px;
205+
font-weight: bold;
206+
color: #333;
207+
margin-bottom: 10px;
208+
}
209+
210+
.project-card p {
211+
font-size: 16px;
212+
color: #666;
213+
line-height: 1.5;
214+
margin-bottom: 10px;
215+
}
216+
217+
.project-card .tag {
218+
display: inline-block;
219+
font-size: 12px; /* 작게 */
220+
background-color: #f1f1f1;
221+
color: #555;
222+
padding: 2px 4px; /* 좌우 여백 줄이기 */
223+
border-radius: 4px; /* 둥근 정도도 살짝 줄이기 */
224+
max-width: max-content; /* 불필요한 너비 방지 */
225+
}
226+
227+
.icon {
228+
margin-right: 40px;
229+
font-size: 40px;
230+
color: #888;
231+
vertical-align: middle;
232+
float: right; /* 아이콘을 오른쪽으로 배치 */
233+
}
234+
235+
236+

‎src/components/mypage/Mypage.jsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
import './Mypage.css';
3+
import { FaExchangeAlt, FaUser, FaStar } from 'react-icons/fa';
4+
import Sidebar from './Sidebar'; // Sidebar 불러오기
5+
6+
const MyPage = () => {
7+
return (
8+
<div className="mypage">
9+
<Sidebar />
10+
11+
<main className="content">
12+
<h1 className="page-title">마이페이지</h1>
13+
14+
<section className="profile">
15+
<div className="profile-header">
16+
<div className="avatar" />
17+
<div className="info">
18+
<h2>김코딩</h2>
19+
<p>@kimcoding</p>
20+
<p className="bio">
21+
알고리즘과 데이터 구조에 관심이 많은 개발자입니다. 코드를 시각화하며 복잡한 개념을 쉽게 이해하고 공유하는 것을 좋아합니다.
22+
</p>
23+
<div className="tags">
24+
<span>Python</span>
25+
<span>JavaScript</span>
26+
<span>알고리즘</span>
27+
<span>데이터 시각화</span>
28+
<span>웹 개발</span>
29+
</div>
30+
</div>
31+
<button className="edit-btn">프로필 편집</button>
32+
</div>
33+
</section>
34+
35+
<section className="stats">
36+
<div className="stat-box">
37+
<h3>총 프로젝트 <FaExchangeAlt className="icon" /></h3>
38+
<div className="count">12</div>
39+
<div className="change up">↑ 20% 지난 달 대비</div>
40+
</div>
41+
42+
<div className="stat-box">
43+
<h3>팔로워 <FaUser className="icon" /></h3>
44+
<div className="count">48</div>
45+
<div className="change up">↑ 5% 지난 달 대비</div>
46+
</div>
47+
48+
<div className="stat-box">
49+
<h3>즐겨찾기 <FaStar className="icon" /></h3>
50+
<div className="count">7</div>
51+
<div className="change down">↓ 2% 지난 달 대비</div>
52+
</div>
53+
</section>
54+
55+
<section className="recent-projects">
56+
<div className="section-title">
57+
<span>최근 프로젝트</span>
58+
<a href="/projects" className="view-all-btn">모든 프로젝트 보기 →</a>
59+
</div>
60+
<div className="project-list">
61+
<div className="project-card">
62+
<img src="/path/to/thumbnail1.jpg" alt="썸네일" className="thumbnail" />
63+
<h4>버블 정렬 시각화</h4>
64+
<span className="tag">JavaScript</span>
65+
<p>버블 정렬 알고리즘의 단계별 시각화 및 성능 분석</p>
66+
</div>
67+
68+
69+
70+
<div className="project-card">
71+
<img src="/path/to/thumbnail1.jpg" alt="썸네일" className="thumbnail" />
72+
<h4>이진 트리 구현</h4>
73+
<span className="tag">Python</span>
74+
<p>이진 트리 데이터 구조의 구현 및 시각화</p>
75+
</div>
76+
77+
78+
<div className="project-card">
79+
<img src="/path/to/thumbnail1.jpg" alt="썸네일" className="thumbnail" />
80+
<h4>다익스트라 알고리즘</h4>
81+
<span className="tag">TypeScript</span>
82+
<p>최단 경로 찾기 알고리즘 시각화</p>
83+
</div>
84+
85+
86+
</div>
87+
</section>
88+
</main>
89+
</div>
90+
);
91+
};
92+
93+
export default MyPage;

0 commit comments

Comments
 (0)