# 24.10.17_ 마켓컬리 클론코딩_회원정보 수정

지난번 프로젝트 진행했던것에 이어서 구현 못했거나 오류 발생한 부분들 위주로 다시 프로젝트를 진행할 예정

 

• 개인 페이지에서 회원 정보 및 비밀번호 수정
• 추천인 코드 및 마일리지 기능
• 홈페이지 검색어 입력 기능 연동
• 선물특가 타이머 기능
• 시간 남으면 (메일로 회원 가입시 안내 메시지 보내기)

 

위와 같이 진행할 예정인데, 회원 정보 및 비밀번호 수정을 오늘 완료했음

 

기존의 profile_display.html 부분에서 회원정보 수정하는 버튼을 만들고

profile_display_change.html을 별도로 만들어서  회원 정보를 수정할 수 있게 유도함.

<main>         <h1>개인 페이지</h1>         <section class="profile-section">             <!-- 프로필 사진 -->             <div class="profile-picture">                 {% if user.profile_picture %}                     <img src="{{ user.profile_picture.url }}" alt="프로필 사진">                 {% else %}                     <img src="{% static 'images/default_profile.png' %}" alt="프로필 사진">                 {% endif %}             </div>                  <!-- 정보 수정 폼 -->             <form action="{% url 'profile_edit' %}" method="POST" enctype="multipart/form-data">                 {% csrf_token %}                 <div class="profile-info">                     <!-- 비필드 오류 메시지 -->                     {% if form.non_field_errors %}                         <div class="error-message">                             {{ form.non_field_errors.as_text }}                         </div>                     {% endif %}                          <!-- 프로필 사진 변경 -->                     <label for="profile_picture">프로필 사진:</label>                     <input type="file" id="profile_picture" name="profile_picture">                          <!-- 아이디 (수정 불가) -->                     <p><strong>아이디:</strong></p>                     <input type="text" id="username" name="username" value="{{ user.username }}" disabled>                          <!-- 이메일 수정 -->                     <p><strong>이메일:</strong></p>                     <input type="email" id="email" name="email" value="{{ user.email }}" required>                          <!-- 전화번호 수정 -->                     <p><strong>전화번호:</strong></p>                     <input type="tel" id="phone_number" name="phone_number" value="{{ user.phone_number }}" required>                          <!-- 주소 수정 -->                     <p><strong>주소:</strong></p>                     <input type="text" id="address" name="address" value="{{ user.address }}" required>                          <!-- 생년월일 수정 -->                     <p><strong>생년월일:</strong></p>                     <input type="date" id="date_of_birth" name="date_of_birth" value="{{ user.date_of_birth }}" required>                          <!-- 현재 비밀번호 -->                     <p><strong>현재 비밀번호:</strong></p>                     <input type="password" id="current_password" name="current_password" required>                          <!-- 새 비밀번호 -->                     <p><strong>새 비밀번호:</strong></p>                     <input type="password" id="password" name="password">                          <!-- 새 비밀번호 확인 -->                     <p><strong>새 비밀번호 확인:</strong></p>                     <input type="password" id="confirm_password" name="confirm_password">                          <button type="submit">정보 수정</button>                 </div>             </form>         </section>                  <!-- 로그아웃 버튼 -->         <form action="{% url 'logout' %}" method="post">             {% csrf_token %}             <button type="submit" class="logout-button">로그아웃</button>         </form>     </main>

 

• <div class="profile-picture"> 내에서 조건문을 이용해 기존 사용자가 프로필 사진을 등록했으면 해당 이미지를 보여주고, 그렇지 않으면 기본 이미지(default_profile.png)를 표시해줌
• <form action="{% url 'profile_edit' %}" method="POST" enctype="multipart/form-data"> 정보수정 폼으로  action="{% url 'profile_edit' %}": 폼이 제출되면 profile_edit라는 URL로 POST 요청을 보내 수정된 사용자 정보를 처리해줌
• enctype="multipart/form-data": 프로필 사진 파일을 업로드할 수 있도록 설정하는 속성
• {% csrf_token %}는 django의 보안 기능으로, CSRF 공격을 방지하기 위해 사용
• {% if form.non_field_errors %} 에는 비필드 오류(특정 필드와 관련이 없는 오류 발생)할때 텍스트 형태로 출력하는 것으로, 비밀번호 변경할 때 기존 비밀번호가 맞지 않거나, 변경한 비밀번호를 확인하는 과정에서 맞지 않는등 다른 검증 실패 시 여기에 오류 메시지를 표현해주기 위해 생성
• 이제 각각의 정보를 수정하는 부분인데 아이디의 경우 해당 페이지에서 변경이 불가능하게 막기 위해 disabled를 사용해 읽기 전용으로 설정했음.
• 이후 비밀번호 변경에 있어 사용자가 현재 비밀번호를 올바르게 입력해야 새 비밀번호로 수정할 수 있게 하였으며
• 새 비밀번호는 확인 필드를 통해 비밀번호가 일치하는지 검증을 진행하게 하였다.

 

즉 요약하면

• 사용자는 프로필 정보를 보고 수정할 수 있고
• 프로필 사진을 업로드 하거나 이메일, 전화번호, 주소, 생년월일, 비밀번호 수정이 가능하다
• 현재 비밀번호를 입력해야만 새 비밀번호를 설정할 수 있고
• 정보 수정 후 "정보 수정" 버튼을 클릭해야 해당 정보가 저장되는 것이다.

 

오늘 구현한 동작은 여기까지이고, 내일은 추천인 코드 및 마일리지 기능을 구현할 예정인데, 우선적으로는 현재 마켓컬리 개인정보에 있는 적립금, 칼리캐쉬 가 개인 페이지에서 프로필 아래 가운데 위치하게 개발할 예정이다.

 

 

 

추가로 깃허브를 통해 협업을 진행하고 있는데 아직 깃허브 이용한 스킬이 부족해서  branche 를 다루고 활용하는 것이 아직은 미숙한 상황이라 아래 영상을 통해 하고있지만 많은 어려움이 따르고 있다...

 

https://www.youtube.com/watch?v=tkkbYCajCjM&t=1294s

 

 

 

git clone해서 가져온 폴더에서 branche 작업을 하지 않으면 아직은 안되는 상황이라... (해당 내용은 좀 더 찾아봐야 겠다.)