TIL 최종프로젝트(19) 피드백 수정

2023.07.04 화 <- 07.03 월요일 자 TIL

 

css나 html 부분을 빼면 크게 적을게 없네요 간단히 적어봅시다

 

[피드백]

1.행사 정보를 보여주는 카드에서 티켓 가격을 보여주었으면 좋겠습니다.

2.댓글 작성 시 글을 어디에 써야할지 알아보기 힘들다.

3.댓글 작성 시 문제에 대한 안내가 미흡하다, 예시로 이미지를 빼먹고 댓글 등록을 시도할 시 아무런 안내창도 없고 등록도 되지 않는다

4.(팀내 의견)행사 리스트 페이지에 티켓 가격은 제외해라 보기 안 좋다

 

[적용]

1.행사 정보를 보여주는 카드에서 티켓 가격을 보여주었으면 좋겠습니다.

 

행사 정보를 받아오는 모델은 Event 모델입니다.(백엔드)

class Event(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=50)
    content = models.TextField()
    image = models.ImageField(blank=True, upload_to="%Y/%m/")
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    event_start_date = models.DateTimeField()
    event_end_date = models.DateTimeField()
    time_slots = models.JSONField()
    max_booking = models.PositiveIntegerField(validators=[MinValueValidator(1)])
    money = models.IntegerField()
    likes = models.ManyToManyField(User, related_name="like_event", blank=True)
    event_bookmarks = models.ManyToManyField(
        User, related_name="bookmark_events", blank=True
    )

다행히 가격을 보여주기 위한 데이터가 담긴 필드가 있습니다.

 

행사를 보여줄 때에는 fetch를 사용하여 GET 메소드를 통해 데이터를 가져와야 합니다.

//행사 리스트 페이지 중 랜덤 영역
async function RandomEventList() {
  const random_response = await fetch(`${backend_base_url}/events/`, { method: 'GET' });
  const random_response_json = await random_response.json();
  
//행사 리스트 페이지
async function EventList() {
  const response = await fetch(`${backend_base_url}/events/`);
  const response_json = await response.json()
  const eventListContainer = document.getElementById('event_list');

  response_json.forEach
  
  //행사 상세 페이지
  async function EventDetail() {
  const urlParams = new URLSearchParams(window.location.search);
  event_id = urlParams.get('event_id');
  const eventDetailURL = `${frontend_base_url}/event-detail.html?event_id=${event_id}`;

  const response = await fetch(`${backend_base_url}/events/${event_id}`, { method: 'GET' });

행사 리스트의 경우는 하나 이상의 데이터 묶음을 가져오니 forEach를 사용하여 하나 하나 꺼내 사용합니다.

RandomEventList, EventList 함수의 url이 같고 EventDetail 함수의 url은 다릅니다.

 

백엔드 urls.py에 작성한 url을 봅시다

    path("", views.EventView.as_view(), name="event_view"),
    path("<int:event_id>/", views.EventDetailView.as_view(), name="event_detail_view"),

RandomEventList, EventList는 같은 view를 사용하고 EventDetail는 다른 view를 사용합니다.

 

해당 view가 사용하는 serializer를 봅시다.

class EventSerializer(serializers.ModelSerializer):
    created_at = serializers.DateTimeField(format="%m월%d일 %H:%M", read_only=True)
    updated_at = serializers.DateTimeField(format="%m월%d일 %H:%M", read_only=True)
    event_start_date = serializers.DateTimeField(format="%Y-%m-%d", read_only=True)
    event_end_date = serializers.DateTimeField(format="%Y-%m-%d", read_only=True)
    review_count = serializers.SerializerMethodField()

    likes_count = serializers.SerializerMethodField()
    author = serializers.SerializerMethodField()

    def get_author(self, obj):
        author = obj.author.email.split("@")[0]
        return author

    def get_review_count(self, obj):
        return obj.review_set.count()

    def get_likes_count(self, obj):
        return obj.likes.count()

    class Meta:
        model = Event
        fields = (
            "id",
            "author",
            "title",
            "content",
            "image",
            "created_at",
            "updated_at",
            "event_start_date",
            "event_end_date",
            "time_slots",
            "max_booking",
            "money",
            "likes",
            "review_count",
            "likes_count",
            "event_bookmarks",
        )


class EventListSerializer(EventSerializer):
    class Meta:
        model = Event
        fields = (
            "id",
            "title",
            "image",
            "event_start_date",
            "event_end_date",
            "review_count",
            "likes",
            "likes_count",
            "event_bookmarks",
        )

EventListSerializer은 EventSerializer를 상속하여 사용합니다.

 

EventListSerializer는 리스트 형태로 출력되기 때문에 EventSerializer보다는 간략한 정보를 담고 있습니다.

 

리스트와 상세페이지에서 가격이 나와야하기 때문에 EventListSerializer 필드에 "money", 를 추가해주어야 합니다.

 

이후 프론트에서 받아온 money를 변수에 넣어 append 시켜줍니다

(코드생략)
  const get_money = response_json.money

(코드생략)
  eventMoneyElement.id = 'event_money'
  eventMoneyElement.className = 'event-money';
  eventMoneyElement.textContent = "관람료: 1인 "+get_money+"원"
(코드생략)
  cardTxtElement.appendChild(eventMoneyElement);

css에 해당 className이 없다면 style을 주기위해 css를 추가해 주어야 합니다.

관람료가 출력됩니다!

 

2.댓글 작성 시 글을 어디에 써야할지 알아보기 힘들다.

플레이스홀더 속성을 이용하면 간단하게 구현이 가능합니다.

<input id="com_txt" type="text" class="txt" placeholder="내용을 입력해주세요">

커트롤+쉬프트+c 를 누르고 해당 영역을 클릭하면 이 영역이 어디에 있는지 개발자 도구를 통해 확인이 가능합니다.

지금 placeholder가 추가되어 있는 것을 확인할 수 있습니다.

저런식으로 html에 해당 태그에 속성을 추가해도 되고, js 부분에서 추가하여도 됩니다.

reviewContentElement.placeholder = '플레이스홀더 내용';

단, 플레이스홀더는 input, textarea 태그에서만 사용이 가능합니다.

3.댓글 작성 시 문제에 대한 안내가 미흡하다.

이 부분은 정리한 것이 있어 이미지로 대체하겠습니다.

 

 

오류 해결 전/ 해결 후를 사진이나 동영상으로 남겨야해서 정리하여 저장해둔 사진입니다.

TIL 쓰기 쉽다!

 

느낀점

4번의 경우 기껏 만든 기능을 행사 상세페이지를 제외하고 모두 제거하게 되었습니다.

이렇게 팀과의 끝없는 의논이 중요합니다.