2. 화면 구성 - (4) 고객센터 - 자주 묻는 질문

[1] 개요

  1. URL

    - HOST/faq

  2. 구성

    - FAQ 주제 분류하여 아코디언 형식으로 리스트화

[2] CODE

  1. HTML

/templates/faq.html

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         1. 회원서비스
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>[회원정보]</strong> 회원정보 수정은 어떻게 하나요?
		<br>
          1. 모바일앱 : 마이페이지 > 회원정보 수정
          <br>
          2. PC: 마이페이지 > 개인정보 수정/ 확인<code></code>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        2. 비즈니스 고객(점주)
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
		<strong>[입점문의] </strong> 사업자 등록으로 하려면 다른 절차가 있나요?<code></code>
		<br>
          사업자 등록은  PC홈페이지에서 가능합니다.
          <br>1. PC홈페이지 접속
        <br>2. 왼쪽상당 사업자 고객신청
        <br>3. 사업자 등록하기 선택
        <br>*사업자 본인확인의 경우 내용 입력 후 필요서류를 정확하게 등록해 주시면 2일이내에 인증이 가능하여 관리가 가능합니다.

      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        3. 리뷰관리
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>[리뷰문의]</strong> 업체리뷰 작성 후, 수정 또는 삭제가 가능한가요? <code></code>
      <br>리뷰삭제는 업체리뷰 페이지에서 [삭제]버튼을 통해 직접 삭제하실 수 있으며, 수정기능은 제공되지 않습니다.
          <br>
        ※ 방송통신위원회의 『인터넷 자기게시물 접근배제요청권 가이드라인』에 따라 이용자 본인이 인터넷 상 게시한 게시물에 대해 타인의 접근 배제를 요청하실 수 있습니다.
          <br>직접 삭제 처리가 어려우신 경우 또는 탈퇴 후 문의내역 삭제가 필요하신 경우에는 고객센터(☎1500-0000) 또는 모바일 앱 [고객센터> 채팅문의]로 문의하시면 신속히 처리해 드리겠습니다.

	</div>
    </div>
  </div>
   <div class="accordion-item">
    <h2 class="accordion-header" id="headingFour">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
      4. 고객센터
      </button>
    </h2>
    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
      <div class="accordion-body">
      <strong>[고객센터]</strong> 고객센터 운영시간은 어떻게 되나요?<code></code>
          <br>고객센터는 365일 24시간 연중무휴로 운영합니다.
          <br> 잠들지 않는 고객센터로 언제나 고객과 함께 하겠습니다.
	 </div>
    </div>
  </div>
   <div class="accordion-item">
    <h2 class="accordion-header" id="headingFive">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
        5. 리뷰캐쉬
      </button>
    </h2>
    <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>[리뷰포인트]</strong> 포인트 적립과 사용에 대해 알고싶습니다.
          <br>리뷰포인트는 리뷰 작성시 일반리뷰 50포인트, 포토리뷰100포인트로 지급되며
          <br>10000포인트 이상 마이페이지>환전하기에서 기프티콘으로 전환 가능합니다.
          <br>월 최다 리뷰, 베스트 리뷰에게는 월 시상 이벤트도 있으니 많은 이용 바랍니다.
	 </div>
    </div>
  </div>
</div>

  2. CSS

    - bootstrap CSS 적용

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  3. JavaScript

    - bootstrap JS 적용

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  4. Application

    - 자주 묻는 질문 화면(faq.html)으로 이동

/web/views.py -> class MyView(View)

@request_mapping("/faq", method="get")
def faq(self, request):
    return render(request, 'faq.html');

- 끝 -