[TIL] 20240603 76일차

2024-06-04 기능 구현 계획

[메모/생각정리]

 

- 로그인이 필요한 컨텐츠인 경우 모달창 출력하도록 하기 (별점 모달창 응용)

→ base.html, base_no_search.html 모두 적용하기

 

- aSend 공사

header 옵션 넣을 수 있게

response.status로 분기 처리

→ 성공 관련 코드(2xx)일 경우 return await response.json()

→ 실패 관련 코드(4xx)일 경우 error 메시지를 따로 전달하는 경우 모달창으로 처리 or console.log 찍을 수 있게

→ 서버 실패 관련 코드(5xx)일 경우 console.log로 보일 수 있도록

★ base.html, base_no_search.html 모두 적용하기

 

- 브로셔 작성

2024-06-04(화) 버전 1 완성되는대로 바로 시작 or 2024-06-05(수) 시작

 

 

유저 페이지 - 2

[기능 구현]

 

내가 등록한 게임 / 내가 즐겨찾기한 게임 버튼 부분

 

- 현재 로그인한 유저가 자신의 정보를 조회할 경우 (page_user.username === user.username) ‘내가 등록한 게임’ 과 ‘내가 즐겨찾기한 게임’ 데이터를 보여주기
- 다른 유저의 정보를 조회할 경우 (else) ‘<page_user.username>이 등록한 게임’ 데이터 보여주기

 

프로필 이미지 업로드 기능 구현

 

- label 태그에 button 태그를 상속시켜서 button 을 눌렀을 때 파일 선택창이 뜨도록 변경. input 태그는 display: none 속성 부여

<label for="id_thumbnail">
    <span class="btn btn-secondary">이미지 업로드</span>
</label>
<input type="file" name="image" accept="image/*" id="id_thumbnail" alt="..."
       style="display: none">

 

 

모달창이 실제로 동작하도록 하기 (프로필 변경, 비밀번호 변경)

 

- 프로필 변경 시 이미지만 변경하거나 이메일만 변경할 경우를 고려해서 api view 함수를 수정. email 정보를 수정하지 않았을 때 email과 user.email은 같으므로 pass 처리

# 이메일 검증
email = self.request.data.get('email', user.email)
# email 수정을 하지 않았을 경우 문제 없이 pass
if email == user.email:
    pass
# 이메일이 유효하지 않거나 다른 유저의 이메일로 수정하려고 할 경우 error
elif not self.EMAIL_PATTERN.match(email):
    return Response({"error_message": "올바른 email을 입력해주세요."})
elif get_user_model().objects.filter(email=email).exists():
    return Response({"error_message": "이미 존재하는 email입니다.."})

 

- api view 함수에서 response로 전달하는 image url 부분 수정. user 데이터에 프로필 이미지 src 정보가 없는 경우엔 .url로 접근할 수 없기 때문에 분기 처리가 필요

return Response(
    {
        "message": "회원 정보 수정 완료",
        "data": {
            "email": user.email,
            "image": user.image.url if user.image else "이미지 없음"
        }
    },
    status=status.HTTP_202_ACCEPTED
)

 

 

 

게임 상세 페이지 - 별점 모달창, 즐겨찾기

[기능 구현]

 

정렬
- 평점, 별점 버튼 / 제작자, 즐겨찾기 버튼 / 등록일, 태그 목록
- 3개 묶음에 대해 정렬 처리

 

별점 모달창 로그인 상태에 따라 다르게 보이기
- 현재 유저가 로그인했는지 여부를 확인하고, 로그인하지 않았다면 별점 버튼을 눌렀을 때 로그인을 요청하는 내용의 모달창을 띄우도록 함

 

즐겨찾기 버튼
- 즐겨찾기 버튼을 눌렀을 때 실제로 반영이 되고, 유저 페이지로 이동해서 내가 즐겨찾기한 목록을 불러왔을 때 확인할 수 있도록 함

 

 

즐겨찾기 진행 (즐겨찾기 버튼을 누르고 나면, 버튼 텍스트가 ‘즐겨찾기 취소’로 보이도록 함)

 

 

실제로 목록에 보여지고 있음

 

 

즐겨찾기 취소 (’즐겨찾기 취소’ 텍스트가 보이는 상태의 버튼을 누르면, 버튼 텍스트가 ‘즐겨찾기’로 보이도록 함)

 

 

목록에서 삭제

 

- 유저가 해당 글(게임)을 즐겨찾기 했는지 여부에 따라 즐겨찾기 버튼의 텍스트가 달리 보이도록 하였음
즐겨찾기한 상태 → 버튼 텍스트는 ‘즐겨찾기 취소'

즐겨찾기를 안 한 상태 → 버튼 텍스트는 ‘즐겨찾기’