# 24.10.23_ 마켓컬리 클론코딩5

728x90

오늘 추가한 내용, 회원탈퇴 기능

오늘은 개인 페이지 내에서 회원 탈퇴를 진행할 수 있게 회원 탈퇴 기능을 만들었다.

우선 회원 탈퇴 기능을 만든 후, 기존에 만들어져 있는 개인 페이지에 버튼을 추가해 회원 탈퇴 버튼을 추가해 그 페이지로 이동하게 하여 탈퇴를 진행하는 것으로 처리하였다.

delete_account.html

  <h2>회원 탈퇴</h2>
  <p>정말로 탈퇴하시겠습니까? 탈퇴 후에는 되돌릴 수 없습니다.</p>

  <form method="POST">
    {% csrf_token %}
    <label for="password">비밀번호 확인:</label>
    <input type="password" name="password" required id="password">
    <button type="submit">회원 탈퇴</button>
  </form>

  <a href="{% url 'profile' %}">취소</a>

<form method="POST">: 사용자로부터 비밀번호를 입력받기 위한 폼으로, POST 메서드를 사용하여 서버에 데이터를 전송
{% csrf_token %}: CSRF(Cross-Site Request Forgery) 공격을 방지하기 위한 토큰으로. Django는 보안상의 이유로 POST 요청에 CSRF 토큰을 요구한다.
<label> 및 <input>: 사용자가 자신의 비밀번호를 입력할 수 있는 필드를 제공하는데. required 속성이 있어 비밀번호 입력 없이 제출할 수 없게 설정했다.
<a href="{% url 'profile' %}">취소</a>: 사용자가 탈퇴를 원치 않을 경우, 프로필 페이지로 돌아갈 수 있는 링크를 제공 하였고. url 'profile'은 urls.py에 정의된 profile URL 패턴으로 연결하여 기존에 프로필 화면으로 돌아가게 하였다.

view.py

@login_required
def delete_account(request):
    if request.method == 'POST':
        # 사용자가 비밀번호를 입력했는지 확인
        if request.user.check_password(request.POST['password']):
            # 사용자 계정을 삭제합니다
            user = request.user
            user.delete()  # 계정 삭제
            messages.success(request, '계정이 성공적으로 삭제되었습니다.')
            return redirect('http://127.0.0.1:8000/')
        else:
            messages.error(request, '비밀번호가 일치하지 않습니다.')

    return render(request, 'users/delete_account.html')

@login_required: 데코레이터를 이용해 사용자가 로그인하지 않은 경우 해당 뷰에 접근할 수 없도록 제한 했다. 로그인하지 않은 사용자에게는 로그인 페이지로 리다이렉트 시켰다. (혹시나 로그인 하지 않고 회원 탈퇴 경로에 갈 경우를 대비)
def delete_account(request):: 계정을 삭제하기 위한 뷰 함수로 요청 객체인 request를 매개변수로 받고
if request.method == 'POST':: 요청 방식이 POST인지 확인하는데, 이는 사용자가 폼을 제출했는지를 나타내는 것이다.
request.user.check_password(request.POST['password']): 사용자가 입력한 비밀번호(request.POST['password'])가 현재 로그인한 사용자의 비밀번호와 일치하는지 확인하는 작업으로. 일치할 경우 True, 일치하지 않으면 False를 반환한다.
user = request.user: 현재 로그인한 사용자 객체를 가져오고
user.delete(): 현재 사용자 계정을 삭제하는 메서드이다. 이 작업은 한 번 실행되면 복구할 수 없으므로 신중하게 처리해야 할 것이다.
return render(request, 'users/delete_account.html'): GET 요청(즉, 사용자가 폼에 접근할 때)일 경우, 삭제 확인 폼을 포함한 delete_account.html 템플릿을 렌더링하여 사용자에게 보여주게 됩니다.

이후 urls.py 에서

urlpatterns = [
path('delete-account/', views.delete_account, name='delete_account'),
]

를 추가해 경로를 잡아주면 된다.

이후 버튼을 추가할 html에 가서

<a href="{% url 'delete_account' %}"class="profile-edit-button2" >회원 탈퇴</a>

버튼을 추가하고 해당 url을 넣어서 버튼 누르면 해당 페이지로 이동하게 처리하였다.

초기에는 위와 같이 만들었는데 역시 css 를 적용 안하면 너무 이쁘지 않아서 css를 적용했습니다.

하여 구조를 살짝 바꿔서

delete_account.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원 탈퇴</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'delete_account.css' %}"> 
</head>
<body>
    <div class="container">
        <h2>회원 탈퇴</h2>
        <p>정말로 탈퇴하시겠습니까? 탈퇴 후에는 되돌릴 수 없습니다.</p>

        <form method="POST">
            {% csrf_token %}
            <label for="password">비밀번호 확인:</label>
            <input type="password" name="password" required id="password">
            <button type="submit">회원 탈퇴</button>
        </form>

        <a href="{% url 'profile' %}">취소</a>
    </div>
</body>
</html>

static 내에 delete_account.css를 만들어 이 파일을 참조하여 사용하는 것으로 했고, 이를 위해 {% load static %} 을 선언해 주었습니다.

{% load static %} 는 django에서 정적 파일을 (CSS, JavaScript, 이미지 등)를 쉽게 사용할 수 있도록 해주는 템플릿 태그로, django의 정적 파일 처리 시스템을 활성화하여 해당 파일들을 올바른 url로 변환할 수 있게 해줍니다.

delete_account.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 20px;
}

h2 {
    text-align: center;
    color: #d9534f; /* 탈퇴를 강조하기 위한 색상 */
}

.container {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

p {
    text-align: center;
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #d9534f; /* 버튼 색상 */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #c9302c; /* 버튼 hover 효과 */
}

a {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #5bc0de; /* 취소 링크 색상 */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* hover 시 밑줄 효과 */
}

이렇게 설정을 넣어줘서

이와같이 꾸몄습니다.

내일은 홈페이지 메인 로고 버튼이나, 처음 홈페이지에 접속시 배너창이 뜨는것을 시도해볼 예정입니다.

728x90

저작자표시 비영리 동일조건

'PYTHON-BACK' 카테고리의 다른 글

# 24.10.25_ 마켓컬리 클론코딩7_git hub 정리 (2)	2024.10.28
# 24.10.24_ 마켓컬리 클론코딩6_구글 OAuth 2.0 소셜 로그인 (0)	2024.10.24
# 24.10.22_ 마켓컬리 클론코딩4_선물특가 타이머 (0)	2024.10.22
# 24.10.21_ 마켓컬리 클론코딩3_Google SMTP (1)	2024.10.21
# 24.10.18_ 마켓컬리 클론코딩2_적립금 (3)	2024.10.18

Astero블로그

# 24.10.23_ 마켓컬리 클론코딩5_회원탈퇴

'PYTHON-BACK' 카테고리의 다른 글

티스토리툴바

# 24.10.23_ 마켓컬리 클론코딩5_회원탈퇴

'PYTHON-BACK' 카테고리의 다른 글

'PYTHON-BACK' Related Articles

티스토리툴바