Skip to content

Commit c9140b2

Browse files
chaesunwoongchaesunwoong
committed
사용자 페이지 사이드바 분리, 사용자 페이지(설정) 작업
1 parent cd4a9ed commit c9140b2

2 files changed

Lines changed: 311 additions & 0 deletions

File tree

‎src/components/mypage/Settings.css‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
/* 전체 레이아웃 */
2+
.mypage {
3+
display: flex;
4+
height: 100vh;
5+
background-color: #f4f4f4;
6+
font-family: 'Pretendard', sans-serif;
7+
}
8+
9+
/* 컨테이너 */
10+
.settings-container {
11+
flex: 1;
12+
margin: 0 auto;
13+
padding: 3rem;
14+
box-sizing: border-box;
15+
max-width: 1400px;
16+
}
17+
18+
/* 제목 */
19+
.settings-title {
20+
font-size: 40px;
21+
margin-bottom: 2rem;
22+
}
23+
24+
/* 탭 메뉴 */
25+
.settings-tabs {
26+
display: flex;
27+
gap: 10px;
28+
margin-bottom: 1rem;
29+
}
30+
31+
.tab {
32+
padding: 10px 20px;
33+
font-size: 16px;
34+
border: none;
35+
background-color: #f2f2f2;
36+
color: #888;
37+
border-radius: 8px;
38+
cursor: pointer;
39+
transition: background-color 0.2s ease;
40+
}
41+
42+
.tab.active {
43+
background-color: white;
44+
color: #000;
45+
font-weight: 600;
46+
}
47+
48+
/* 카드 */
49+
.settings-card {
50+
background-color: #fff;
51+
padding: 3rem;
52+
border-radius: 12px;
53+
box-shadow: none;
54+
}
55+
56+
/* 섹션 제목 및 설명 */
57+
.section-title {
58+
font-size: 36px;
59+
margin-bottom: 2rem;
60+
margin-top: 1px;
61+
}
62+
63+
.section-desc {
64+
font-size: 20px;
65+
margin-bottom: 2rem;
66+
color: #555;
67+
}
68+
69+
/* 프로필 이미지 */
70+
.profile-image-section {
71+
display: flex;
72+
align-items: center;
73+
gap: 2rem;
74+
margin-bottom: 2rem;
75+
}
76+
77+
.profile-image {
78+
width: 150px;
79+
height: 150px;
80+
background-color: #ddd;
81+
border-radius: 50%;
82+
}
83+
84+
/* 버튼 */
85+
.upload-btn,
86+
.delete-btn {
87+
margin-right: 10px;
88+
padding: 10px 20px;
89+
font-size: 16px;
90+
cursor: pointer;
91+
border: none;
92+
border-radius: 6px;
93+
}
94+
95+
.upload-btn {
96+
background-color: #007bff;
97+
color: white;
98+
}
99+
100+
.delete-btn {
101+
background-color: #ccc;
102+
color: #333;
103+
}
104+
105+
.upload-note {
106+
font-size: 15px;
107+
color: #888;
108+
margin-top: 4px;
109+
}
110+
111+
/* 폼 */
112+
.form-group {
113+
margin-bottom: 1.5rem;
114+
display: flex;
115+
flex-direction: column;
116+
}
117+
118+
.form-row {
119+
display: flex;
120+
gap: 2rem;
121+
margin-bottom: 0.5rem;
122+
}
123+
124+
.form-group.half {
125+
flex: 1;
126+
}
127+
128+
.form-group label {
129+
font-weight: 600;
130+
margin-bottom: 0.5rem;
131+
}
132+
133+
/* input & textarea */
134+
.form-group input[type="text"] {
135+
all: unset;
136+
box-sizing: border-box;
137+
padding: 12px 16px;
138+
font-size: 16px;
139+
border: 1px solid #ccc;
140+
border-radius: 8px;
141+
height: 48px;
142+
width: 100%;
143+
}
144+
145+
.form-group textarea {
146+
padding: 16px;
147+
font-size: 16px;
148+
border: 1px solid #ccc;
149+
border-radius: 8px;
150+
resize: none;
151+
min-height: 120px;
152+
}
153+
154+
/* 기타 텍스트 */
155+
.small-text {
156+
font-size: 13px;
157+
color: #888;
158+
margin-top: 0.3rem;
159+
}
160+
161+
/* 기술 스택 */
162+
.tech-stack {
163+
display: flex;
164+
flex-wrap: wrap;
165+
gap: 8px;
166+
margin-bottom: 1rem;
167+
}
168+
169+
.tag {
170+
background-color: #007bff;
171+
color: white;
172+
padding: 4px 14px;
173+
border-radius: 20px;
174+
font-size: 15px;
175+
display: inline-flex;
176+
align-items: center;
177+
gap: 6px;
178+
}
179+
180+
.remove-x {
181+
cursor: pointer;
182+
margin-left: 6px;
183+
font-weight: bold;
184+
color: white;
185+
padding: 0 6px;
186+
border-radius: 50%;
187+
line-height: 1;
188+
}
189+
190+
.remove-x:hover {
191+
background-color: rgba(255, 255, 255, 0.2);
192+
}
193+
194+
/* 기술 입력 */
195+
.tech-input-row {
196+
display: flex;
197+
gap: 15px;
198+
}
199+
200+
.tech-input-row input {
201+
flex-grow: 1;
202+
padding: 12px 16px;
203+
font-size: 16px;
204+
border: 1px solid #ccc;
205+
border-radius: 6px;
206+
}
207+
208+
.add-btn {
209+
background-color: #a684f1;
210+
color: white;
211+
border: none;
212+
padding: 8px 16px;
213+
border-radius: 6px;
214+
font-size: 20px;
215+
cursor: pointer;
216+
display: flex;
217+
align-items: center;
218+
justify-content: center;
219+
}
220+
221+
222+
223+
/* 소셜 링크 */
224+
.social-links {
225+
display: flex;
226+
gap: 16px;
227+
}
228+

‎src/components/mypage/Settings.jsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react';
2+
import './Settings.css';
3+
import Sidebar from './Sidebar';
4+
5+
const Settings = () => {
6+
return (
7+
<div className="mypage">
8+
<Sidebar />
9+
<div className="settings-container">
10+
<h1 className="settings-title">설정</h1>
11+
12+
<div className="settings-tabs">
13+
<button className="tab active">프로필</button>
14+
<button className="tab">계정</button>
15+
<button className="tab">테마</button>
16+
<button className="tab">알림</button>
17+
</div>
18+
19+
<div className="settings-card">
20+
<h2 className="section-title">프로필 정보</h2>
21+
<p className="section-desc">프로필 정보를 수정하여 다른 사용자에게 나를 소개하세요.</p>
22+
23+
<div className="profile-image-section">
24+
<div className="profile-image" />
25+
<div>
26+
<button className="upload-btn">이미지 업로드</button>
27+
<button className="delete-btn">삭제</button>
28+
<p className="upload-note">JPG, PNG 또는 GIF 파일. 최대 2MB.</p>
29+
</div>
30+
</div>
31+
32+
<div className="form-row">
33+
<div className="form-group half">
34+
<label>이름</label>
35+
<input type="text" defaultValue="김코딩" />
36+
</div>
37+
38+
<div className="form-group half">
39+
<label>사용자 이름</label>
40+
<input type="text" defaultValue="kimcoding" />
41+
<p className="small-text">codeviz.com/@kimcoding</p>
42+
</div>
43+
</div>
44+
45+
46+
<div className="form-group large-gap">
47+
<label>자기소개</label>
48+
<textarea defaultValue="알고리즘과 데이터 구조에 관심이 많은 개발자입니다. 코드 시각화를 통해 복잡한 개념을 쉽게 이해하고 공유하는 것을 좋아합니다." />
49+
</div>
50+
51+
<div className="form-group large-gap">
52+
<label>기술 스택</label>
53+
<div className="tech-stack">
54+
{["Python", "JavaScript", "React", "Node.js", "알고리즘"].map((tech) => (
55+
<span className="tag" key={tech}>
56+
{tech}
57+
<span className="remove-x">×</span>
58+
</span>
59+
))}
60+
</div>
61+
62+
<div className="tech-input-row">
63+
<input type="text" placeholder="새 기술 추가" />
64+
<button className="add-btn">+</button>
65+
</div>
66+
</div>
67+
68+
69+
<div className="form-group">
70+
<label>소셜 링크</label>
71+
<div className="social-links">
72+
<input type="text" defaultValue="https://github.com" />
73+
<input type="text" defaultValue="https://twitter.com" />
74+
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
);
81+
};
82+
83+
export default Settings;

0 commit comments

Comments
 (0)