218 lines
7.9 KiB
HTML
218 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>프로필 수정 | 신라 AMP</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif']
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
/* "Currently:" 텍스트 숨기기 */
|
|
.help {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 파일 입력 필드 스타일링 */
|
|
input[type="file"] {
|
|
border: 1px solid #4a5568;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background-color: #2d3748;
|
|
color: white;
|
|
width: 100%;
|
|
}
|
|
|
|
input[type="file"]::-webkit-file-upload-button {
|
|
background-color: #4299e1;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
input[type="file"]::-webkit-file-upload-button:hover {
|
|
background-color: #3182ce;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white min-h-screen flex items-center justify-center px-4 font-sans">
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-md transition-all">
|
|
<div class="text-center mb-6">
|
|
<h1 class="text-3xl font-bold tracking-tight text-white">신라 AMP</h1>
|
|
<p class="text-sm text-gray-400 mt-2">프로필 수정</p>
|
|
</div>
|
|
|
|
<form method="POST" enctype="multipart/form-data" class="space-y-4">
|
|
{% csrf_token %}
|
|
{% if form.errors %}
|
|
<div class="text-red-400 text-sm mb-2">
|
|
{% for field, errors in form.errors.items %}
|
|
{% for error in errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div>
|
|
<label for="{{ form.이름.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.이름.label }}</label>
|
|
{{ form.이름 }}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.소속.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.소속.label }}</label>
|
|
{{ form.소속 }}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.직책.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.직책.label }}</label>
|
|
{{ form.직책 }}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.연락처.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.연락처.label }}</label>
|
|
{{ form.연락처 }}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.주소.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.주소.label }}</label>
|
|
{{ form.주소 }}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.생년월일.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.생년월일.label }}</label>
|
|
{{ form.생년월일 }}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.사진.id_for_label }}" class="block mb-1 text-sm text-gray-300">프로필 사진</label>
|
|
<!-- 커스텀 파일 입력 필드 -->
|
|
<input type="file"
|
|
name="{{ form.사진.name }}"
|
|
id="{{ form.사진.id_for_label }}"
|
|
accept="image/*"
|
|
class="w-full px-4 py-3 rounded-xl bg-gray-700 bg-opacity-80 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
|
|
{% if form.instance.사진 and form.instance.사진.url %}
|
|
<div class="mt-2">
|
|
<img id="profile-preview" src="{{ form.instance.사진.url }}" alt="프로필 사진 미리보기" class="w-24 h-24 rounded-full object-cover border-2 border-gray-500" />
|
|
</div>
|
|
{% else %}
|
|
<div class="mt-2">
|
|
<img id="profile-preview" src="/static/B_main/images/default_user.png" alt="프로필 사진 미리보기" class="w-24 h-24 rounded-full object-cover border-2 border-gray-500" />
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- 키워드 섹션 -->
|
|
<div class="border-t border-gray-600 pt-4">
|
|
<h3 class="text-lg font-semibold text-blue-400 mb-3">검색 키워드</h3>
|
|
<p class="text-sm text-gray-400 mb-4">다른 사람들이 당신을 찾을 수 있도록 키워드를 설정하세요</p>
|
|
|
|
<div class="mb-3">
|
|
{{ form.keyword1 }}
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
|
|
프로필 저장
|
|
</button>
|
|
</form>
|
|
|
|
<!-- 회원탈퇴 섹션 -->
|
|
<div class="mt-8 pt-6 border-t border-gray-600">
|
|
<div class="text-center">
|
|
<h3 class="text-lg font-semibold text-red-400 mb-2">회원탈퇴</h3>
|
|
<p class="text-sm text-gray-400 mb-4">
|
|
탈퇴하시면 로그인이 불가능하며, 개인정보는 보존됩니다.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onclick="confirmWithdrawal()"
|
|
class="px-6 py-2 bg-red-600 hover:bg-red-700 active:bg-red-800 rounded-lg text-white font-medium text-sm transition duration-200 shadow-md hover:shadow-lg">
|
|
회원탈퇴
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 비밀번호 변경 섹션 -->
|
|
<div class="mt-6 pt-6 border-t border-gray-600">
|
|
<div class="text-center">
|
|
<h3 class="text-lg font-semibold text-yellow-400 mb-2">비밀번호 변경</h3>
|
|
<p class="text-sm text-gray-400 mb-4">
|
|
전화번호 인증을 통해 비밀번호를 변경할 수 있습니다.
|
|
</p>
|
|
<a href="{% url 'accounts:password_change' %}"
|
|
class="inline-block px-6 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-white font-medium text-sm transition duration-200 shadow-md hover:shadow-lg">
|
|
비밀번호 변경
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 text-center text-sm">
|
|
<a href="{% url 'main' %}" class="text-blue-400 hover:text-blue-500 transition">
|
|
메인으로 돌아가기
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 사진 업로드 시 미리보기
|
|
document.querySelector('input[type=file][name$=사진]').addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(ev) {
|
|
document.getElementById('profile-preview').src = ev.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// 회원탈퇴 확인
|
|
function confirmWithdrawal() {
|
|
if (confirm('정말로 회원탈퇴를 하시겠습니까?\n\n탈퇴하시면 로그인이 불가능하며, 개인정보는 보존됩니다.')) {
|
|
// CSRF 토큰 가져오기
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
|
|
|
// 탈퇴 요청 전송
|
|
fetch('{% url "withdraw" %}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(response => {
|
|
console.log('Response status:', response.status);
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Response data:', data);
|
|
if (data.success) {
|
|
alert('회원탈퇴가 완료되었습니다.');
|
|
window.location.href = '{% url "main" %}';
|
|
} else {
|
|
alert('회원탈퇴 중 오류가 발생했습니다: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('회원탈퇴 중 오류가 발생했습니다.');
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|