프론트엔드에서 app_id와 game_name을 모달 형식으로 추가한 뒤, 검색 로직 흐름

프론트엔드에서 사용자가 게임을 선택하거나 검색하기 위한 모달 형식 UI를 활용하면서, 이를 백엔드와 연결하여 검색 로직을 구현하는 전체 흐름을 블로그 형식으로 설명합니다.

---

1. 개요

검색 UI를 개선하기 위해 모달 형식을 활용하여 사용자가 게임 이름과 ID를 선택할 수 있도록 구현합니다.
목표:
1. 사용자가 검색창에 키워드를 입력하면, 게임 목록을 모달로 표시.
2. 사용자가 게임을 선택하면 해당 게임의 app_id와 game_name이 백엔드로 전달.
3. 백엔드는 app_id를 기준으로 관련 리뷰를 검색하여 클라이언트에 반환.

---

2. 시스템 구성

프론트엔드

1. 검색창 및 모달:

   • 사용자가 키워드를 입력하면 모달 창이 열리고, 관련 게임 목록이 표시됩니다.
   • 목록에서 게임을 선택하면 app_id와 game_name이 저장됩니다.

2. 데이터 흐름:

   • 검색 키워드를 입력 → 모달에서 선택 → app_id와 game_name 백엔드로 전송.

---

백엔드

1. 게임 데이터 검색 API:

   • 키워드를 입력받아, 관련 게임 데이터를 반환.
   • 게임 이름, app_id, 릴리스 날짜 등을 포함.

2. 리뷰 검색 API:

   • app_id를 기준으로 리뷰를 검색.
   • 사용자가 선택한 게임에 대한 리뷰 데이터를 클라이언트에 반환.

---

3. 검색 흐름

1) 사용자가 검색창에 키워드 입력

• 사용자가 키워드를 입력하면, 실시간으로 API 호출을 통해 게임 이름과 ID 목록을 검색합니다.
• 예시:
  • 검색 키워드: action
  • API 요청:

    GET /api/games/search/?query=action

---

2) 모달 창에서 게임 목록 표시

• 프론트엔드는 검색 결과를 기반으로 모달 창을 열고, 결과 목록을 표시합니다.
• 각 결과는 게임 이름(game_name)과 ID(app_id)를 포함.

모달 UI

게임 이름	릴리스 날짜	선택 버튼
Action Game 1	2021-10-10	선택
Action Adventure RPG	2020-06-15	선택

---

3) 게임 선택 및 데이터 전송

• 사용자가 "선택" 버튼을 클릭하면, 해당 app_id와 game_name이 저장됩니다.
• 백엔드로 리뷰 검색 요청:

  POST /api/reviews/search/
  {
      "app_id": 12345,
      "game_name": "Action Game 1"
  }

---

4) 백엔드 리뷰 검색

1. 리뷰 검색 API:
   • 백엔드는 app_id를 기반으로 데이터베이스에서 리뷰를 검색.
   • 검색 결과를 JSON 형식으로 반환.
2. 결과 예시:

   [
       {
           "id": 1,
           "game_name": "Action Game 1",
           "content": "Amazing gameplay with great action scenes!",
           "created_at": "2025-01-13T12:00:00Z",
           "total_likes": 15
       },
       {
           "id": 2,
           "game_name": "Action Game 1",
           "content": "A masterpiece in the action genre!",
           "created_at": "2025-01-12T10:00:00Z",
           "total_likes": 10
       }
   ]

---

5) 프론트엔드 결과 표시

• 프론트엔드는 검색 결과를 UI에 표시합니다.
• 예를 들어, 게임 리뷰 목록 페이지에 각 리뷰의 내용과 좋아요 수를 표시.

---

4. 상세 동작 흐름

1. 사용자 입력:

   • 검색창에서 키워드를 입력.
   • API 요청으로 관련 게임 목록을 가져옴.

2. 모달 창 표시:

   • API 응답 데이터를 기반으로 게임 목록을 모달에 표시.
   • 사용자가 목록에서 원하는 게임을 선택.

3. 데이터 전송:

   • 선택한 게임의 app_id와 game_name을 백엔드로 전송하여 리뷰 검색 요청.

4. 백엔드 검색:

   • app_id를 기반으로 데이터베이스에서 리뷰 검색.
   • 검색된 리뷰 데이터를 클라이언트로 반환.

5. 결과 표시:

   • 검색된 리뷰 데이터를 UI에 표시.

---

5. 확장 아이디어

1) 자동완성 기능 추가

• 검색창에 입력할 때, 실시간으로 키워드 기반 게임 목록을 표시.
• 자동완성 목록에서 선택하면 바로 리뷰 검색.

2) 게임 세부정보 표시

• 모달에서 게임의 세부정보(예: 장르, 플랫폼, 출시일)를 함께 제공.

3) 페이지네이션

• 리뷰 검색 결과가 많을 경우, 페이지네이션을 추가하여 UI를 간결하게 유지.

---