[스틸스] 고객 지원 페이지 구현 (axios, Date, slice)

 

인터넷에서 글을 적는 데 어려움을 느끼는 사용자를 위해 전화 문의가 가능하도록 정보를 먼저 안내한 후 최소한의 내용 수집으로 문의가 가능하게끔 페이지를 구현했다.

 

 

고객 지원 페이지를 구현하면서 고민을 많이 했던 부분은 무분별한 반복 문의글 작성에 대한 대처였다.

 

고객 지원을 악용하여 보복성이나 방해성으로 같은 내용의 문의를 계속해서 작성하는 것을 방지하고,

최소 고객의 문의 내용에 대한 설명을 수집하기 위해 데이터 베이스에서 문의 내용을  primary key로 설정해 중복을 허용하지 않도록 설정했다.

 

 

따라서, 입력 내용이 동일한 경우 동일한 문의 내역이 존재한다는 메세지를 클라이언트 측에 전달하도록 코드를 작성해주었다.

 

axios.post('/customer', {

        username,

        phone,

        usercontent,

        date: new Date().toISOString().slice(0, 10)

    })

        .then(response => {

            alert(response.data);

            window.location.reload();

        })

        .catch(error => alert('동일한 문의 내역이 존재합니다.'));

 

---

 

728x90

 

 

사용자가 입력한 데이터를 서버에 전달하기 위해 axios POST 요청을 이용해 입력 내용을 전달했고,

글을 작성한 일자도 함께 저장하기 위해 new Date로 Date 객체를 생성해  'YYYY-MM-DD' 형식으로 날짜가 저장될 수 있게 했다.

 date: new Date().toISOString().slice(0, 10)

 

• new Date() : 현재 날짜와 시간을 나타내는 Date 객체 생성
• .toISOString() : Date 객체를 ISO 8601 형식의 문자열로 변환 ( 'YYYY-MM-DDTHH:mm:ss.sssZ' )
  ex. 2024년 6월 11일의 현재 시간이 '2024-06-11T12:34:56.789Z'와 같은 형식으로 나타남
• .slice(0, 10) : 변환된 ISO 8601 문자열에서 처음 10문자를 잘라내 'YYYY-MM-DD' 부분만 추출
  ex. '2024-06-11T12:34:56.789Z' 문자열에서 '2024-06-11' 부분만을 가져옴

 

클라이언트 측에서 요청을 보내면 서버측에서 INSERT INTO 문을 사용해 전달받은 데이터 값을 데이터베이스에 저장하게 된다.

 

---

 

 

작성한 문의 내역은 본인의 마이페이지에서 확인할 수 있도록 axios GET 요청을 통해 데이터베이스에 저장된 데이터를 불러와 보여주도록 로직을 설정했다.

 

고객 지원 페이지