Skip to content

Commit 479a008

Browse files
Merge pull request #69 from pirogramming/feat-chan
Feat chan
2 parents 63db98b + ffa4d06 commit 479a008

13 files changed

Lines changed: 679 additions & 9 deletions

File tree

backend-core/static/users/css/login.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,32 @@ input {
147147
margin-top: 15px;
148148
}
149149

150+
/* 로그인 없이 둘러보기 버튼 */
151+
.btn-guest {
152+
display: flex;
153+
align-items: center;
154+
justify-content: center;
155+
width: 100%;
156+
height: 56px;
157+
margin-top: 12px;
158+
background-color: #F2F4F7;
159+
color: #98A2B3;
160+
border: 1px solid #D0D5DD;
161+
border-radius: 12px;
162+
font-size: 16px;
163+
font-weight: 600;
164+
text-decoration: none;
165+
cursor: pointer;
166+
box-sizing: border-box;
167+
transition: background-color 0.2s, border-color 0.2s;
168+
}
169+
170+
.btn-guest:hover {
171+
background-color: #E4E7EC;
172+
border-color: #98A2B3;
173+
color: #667085;
174+
}
175+
150176
/* 6. 하단 푸터 및 이용약관 */
151177
.footer {
152178
margin-top: 25px;
Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
@charset "UTF-8";
2+
3+
body {
4+
background-color: #f8f9fa;
5+
margin: 0;
6+
min-height: 100vh;
7+
font-family: 'Noto Sans KR', sans-serif;
8+
color: #1D2939;
9+
}
10+
11+
.signout-wrapper {
12+
width: 100%;
13+
max-width: 450px;
14+
min-height: 100vh;
15+
margin: 0 auto;
16+
background-color: #ffffff;
17+
box-sizing: border-box;
18+
}
19+
20+
.signout-container {
21+
padding: 20px 25px 32px;
22+
display: flex;
23+
flex-direction: column;
24+
gap: 24px;
25+
}
26+
27+
/* 헤더: 뒤로가기 + 제목 */
28+
.signout-header {
29+
display: flex;
30+
align-items: center;
31+
gap: 12px;
32+
padding-top: 12px;
33+
margin-bottom: 8px;
34+
}
35+
36+
.signout-header .back-arrow {
37+
width: 40px;
38+
height: 40px;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
background: none;
43+
border: none;
44+
font-size: 22px;
45+
color: #344054;
46+
cursor: pointer;
47+
border-radius: 8px;
48+
}
49+
50+
.signout-header .back-arrow:hover {
51+
background-color: #F2F4F7;
52+
}
53+
54+
.signout-header h1 {
55+
font-size: 22px;
56+
font-weight: 700;
57+
color: #101828;
58+
margin: 0;
59+
}
60+
61+
/* 탈퇴할 계정 정보 */
62+
.user-info-box {
63+
padding: 16px;
64+
background-color: #F9FAFB;
65+
border: 1px solid #E4E7EC;
66+
border-radius: 12px;
67+
}
68+
69+
.user-info-label {
70+
font-size: 12px;
71+
color: #667085;
72+
margin: 0 0 6px 0;
73+
}
74+
75+
.user-info-box .user-email,
76+
.user-info-box .user-name {
77+
margin: 0;
78+
font-size: 15px;
79+
font-weight: 600;
80+
color: #344054;
81+
}
82+
83+
.user-info-box .user-name {
84+
margin-top: 4px;
85+
font-weight: 500;
86+
color: #475467;
87+
}
88+
89+
/* 경고 박스 (연한 빨강/핑크) */
90+
.warning-box {
91+
padding: 24px 20px;
92+
background-color: #FEF2F2;
93+
border: 1px solid #FECACA;
94+
border-radius: 12px;
95+
text-align: center;
96+
}
97+
98+
.warning-icon {
99+
width: 48px;
100+
height: 48px;
101+
margin: 0 auto 14px;
102+
display: flex;
103+
align-items: center;
104+
justify-content: center;
105+
background-color: #FEE2E2;
106+
border-radius: 50%;
107+
font-size: 24px;
108+
color: #B45309;
109+
font-weight: bold;
110+
}
111+
112+
.warning-title {
113+
font-size: 18px;
114+
font-weight: 700;
115+
color: #B91C1C;
116+
margin: 0 0 8px 0;
117+
}
118+
119+
.warning-desc {
120+
font-size: 14px;
121+
color: #667085;
122+
line-height: 1.5;
123+
margin: 0;
124+
}
125+
126+
/* 삭제되는 정보 */
127+
.deleted-info {
128+
text-align: left;
129+
}
130+
131+
.deleted-info h3 {
132+
font-size: 15px;
133+
font-weight: 700;
134+
color: #344054;
135+
margin: 0 0 12px 0;
136+
}
137+
138+
.deleted-info ul {
139+
margin: 0;
140+
padding-left: 20px;
141+
font-size: 14px;
142+
color: #475467;
143+
line-height: 1.8;
144+
}
145+
146+
.deleted-info li {
147+
margin-bottom: 4px;
148+
}
149+
150+
.deleted-info li::marker {
151+
color: #DC2626;
152+
}
153+
154+
/* 재가입 안내 (연한 노란 박스) */
155+
.reregister-notice {
156+
display: flex;
157+
align-items: flex-start;
158+
gap: 10px;
159+
padding: 14px 16px;
160+
background-color: #FFFBEB;
161+
border: 1px solid #FDE68A;
162+
border-radius: 12px;
163+
}
164+
165+
.reregister-notice .notice-icon {
166+
font-size: 18px;
167+
flex-shrink: 0;
168+
}
169+
170+
.reregister-notice p {
171+
margin: 0;
172+
font-size: 13px;
173+
color: #667085;
174+
line-height: 1.5;
175+
}
176+
177+
/* 버튼 영역 */
178+
.button-group {
179+
display: flex;
180+
flex-direction: column;
181+
gap: 12px;
182+
margin-top: 8px;
183+
}
184+
185+
.btn-cancel {
186+
width: 100%;
187+
height: 52px;
188+
background-color: #ffffff;
189+
color: #344054;
190+
border: 1px solid #D0D5DD;
191+
border-radius: 12px;
192+
font-size: 16px;
193+
font-weight: 600;
194+
cursor: pointer;
195+
font-family: 'Noto Sans KR', sans-serif;
196+
}
197+
198+
.btn-cancel:hover {
199+
background-color: #F9FAFB;
200+
border-color: #98A2B3;
201+
}
202+
203+
.btn-withdraw {
204+
width: 100%;
205+
height: 52px;
206+
background-color: #B91C1C;
207+
color: #ffffff;
208+
border: none;
209+
border-radius: 12px;
210+
font-size: 16px;
211+
font-weight: 600;
212+
cursor: pointer;
213+
font-family: 'Noto Sans KR', sans-serif;
214+
}
215+
216+
.btn-withdraw:hover {
217+
background-color: #991B1B;
218+
}

backend-core/static/users/js/homepage_guest.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,31 @@
11
/**
22
* 비로그인 전용 홈 페이지: API로 미션 목록만 불러와서 렌더링
33
*/
4+
5+
const CATEGORY_MAP = {
6+
'ERRAND': '심부름',
7+
'STUDY': '학업',
8+
'RENTAL': '대여',
9+
'RECRUIT': '구인',
10+
'LIFE': '생활',
11+
'OTHER': '기타'
12+
};
13+
14+
const CATEGORY_CLASS_MAP = {
15+
'심부름': 'errand', 'ERRAND': 'errand',
16+
'학업': 'study', 'STUDY': 'study',
17+
'대여': 'rent', 'RENTAL': 'rent',
18+
'구인': 'job', 'RECRUIT': 'job',
19+
'생활': 'life', 'LIFE': 'life',
20+
'기타': 'etc', 'OTHER': 'etc'
21+
};
22+
23+
const STATUS_MAP = {
24+
'WAITING': { text: '대기중', class: 'waiting' },
25+
'MATCHED': { text: '진행중', class: 'matched' },
26+
'COMPLETED': { text: '완료', class: 'completed' }
27+
};
28+
429
async function loadGuestHomepage() {
530
if (localStorage.getItem('access_token')) {
631
window.location.href = '/api/users/homepage/';
@@ -38,10 +63,10 @@ async function loadGuestHomepage() {
3863

3964
container.innerHTML = latestMissions.map(function (m) {
4065
const title = (m.title || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
41-
const category = m.category || '기타';
66+
const category = CATEGORY_MAP[m.category] || '기타';
4267
const location_name = m.location_name || '장소 미지정';
4368
const reward = m.reward != null ? m.reward.toLocaleString() + '원' : '가격 미정';
44-
const status = m.status || '진행중';
69+
const status = STATUS_MAP[m.status].text || '진행중';
4570
const id = m.id || '';
4671

4772
// 카테고리에 맞는 클래스 선택
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const MYPAGE_URL = '/api/users/mypage/';
2+
const LOGIN_URL = '/api/users/login/';
3+
4+
function goToMypage() {
5+
window.location.href = MYPAGE_URL;
6+
}
7+
8+
async function loadUserAndRender() {
9+
const user = await Auth.getData('/api/users/api/profile_modify/');
10+
if (!user) {
11+
return;
12+
}
13+
const emailEl = document.getElementById('signout-user-email');
14+
const nameEl = document.getElementById('signout-user-name');
15+
if (emailEl) emailEl.textContent = user.univ_email || '—';
16+
if (nameEl) nameEl.textContent = user.username ? `${user.username} 님` : '—';
17+
}
18+
19+
async function confirmSignout() {
20+
if (!confirm('정말 탈퇴하시겠습니까? 이 작업은 되돌릴 수 없습니다.')) {
21+
return;
22+
}
23+
const res = await Auth.deleteData('/api/users/api/signout/');
24+
if (res !== null) {
25+
Auth.clearTokens();
26+
window.location.href = LOGIN_URL;
27+
} else {
28+
alert('탈퇴 처리 중 오류가 발생했습니다.');
29+
}
30+
}
31+
32+
document.addEventListener('DOMContentLoaded', loadUserAndRender);

backend-core/staticfiles/users/css/login.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,32 @@ input {
147147
margin-top: 15px;
148148
}
149149

150+
/* 로그인 없이 둘러보기 버튼 */
151+
.btn-guest {
152+
display: flex;
153+
align-items: center;
154+
justify-content: center;
155+
width: 100%;
156+
height: 56px;
157+
margin-top: 12px;
158+
background-color: #F2F4F7;
159+
color: #98A2B3;
160+
border: 1px solid #D0D5DD;
161+
border-radius: 12px;
162+
font-size: 16px;
163+
font-weight: 600;
164+
text-decoration: none;
165+
cursor: pointer;
166+
box-sizing: border-box;
167+
transition: background-color 0.2s, border-color 0.2s;
168+
}
169+
170+
.btn-guest:hover {
171+
background-color: #E4E7EC;
172+
border-color: #98A2B3;
173+
color: #667085;
174+
}
175+
150176
/* 6. 하단 푸터 및 이용약관 */
151177
.footer {
152178
margin-top: 25px;

0 commit comments

Comments
 (0)