검증 배지 정보 수정 제안, 프론트엔드에서 원클릭으로 간편하게!

사용자가 제공한 검증 배지 정보를 수정 제안하는 과정이 너무 번거로웠어요. 이 글은 이 불편함을 해소하기 위해 프론트엔드에서 원클릭으로 정보 수정을 제안할 수 있도록 기능을 개선한 경험을 공유합니다.

시도와 함정

기존에는 검증 배지 정보 수정 제안을 하려면 별도의 페이지로 이동하거나 복잡한 절차를 거쳐야 했습니다. 사용자 경험을 개선하고자 검증 배지 답변 화면에서 바로 수정 제안을 할 수 있도록 UI를 변경하고 싶었어요.

처음에는 단순히 버튼 하나를 추가하고 API를 호출하는 방식으로 접근했습니다. 그런데 이게 생각보다 간단하지 않더라고요. 버튼 클릭 시 어떤 데이터를 보내야 할지, 응답은 어떻게 처리해야 할지 여러 번 테스트하면서 시간을 보냈습니다.

// 초기 시도 코드 (동작하지 않음)
document.getElementById('suggest-edit-button').addEventListener('click', () => {
  const badgeId = document.getElementById('badge-id').value;
  const newInfo = document.getElementById('new-info-textarea').value;
fetch(/api/badges/${badgeId}/suggest-edit, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ suggestion: newInfo }),
})
.then(response => response.json())
.then(data => {
alert('수정 제안이 완료되었습니다!');
})
.catch(error => {
console.error('수정 제안 실패:', error);
alert('수정 제안에 실패했습니다.');
});
});

위 코드처럼 간단하게 구현하려 했지만, 실제로는 badge-id를 어떻게 가져와야 할지, new-info-textarea는 어떤 형태로 받아야 할지 등 구체적인 구현 디테일에서 막혔어요. 특히, 수정 제안 시 어떤 필드 값을 보내야 유효한지, 서버에서는 어떤 형식으로 응답을 받아야 하는지 명확하지 않아 3시간 정도 삽질했던 것 같습니다.

원인

결국 문제는 fetch API 호출 시 전달하는 body 데이터의 구조와 서버에서 기대하는 파라미터 이름이 달랐다는 점이었어요. 또한, 검증 배지 답변 화면에서 수정 제안을 할 때 필요한 badgeId를 동적으로 가져오는 로직이 누락되어 있었습니다. 단순히 버튼을 추가하는 것을 넘어, 해당 검증 배지 정보에 대한 고유 식별자와 사용자가 입력한 수정 내용을 정확한 형식으로 서버에 전달해야 했죠.

해결

이 문제를 해결하기 위해 검증 배지 답변 컴포넌트 내에서 badgeId를 props로 받아오고, 사용자가 입력한 수정 내용을 useState로 관리했습니다. 그리고 fetch 요청 시 body에 badgeId와 suggestion 필드를 명확하게 포함시켜 보냈습니다.

// 해결된 코드
import React, { useState } from 'react';
function BadgeAnswer({ badgeId, onSuggestionSuccess }) {
const [suggestionText, setSuggestionText] = useState('');
const handleSuggestEdit = async () => {
if (!suggestionText.trim()) {
alert('수정 제안 내용을 입력해주세요.');
return;
}
try {
  const response = await fetch(`/api/v1/badges/${badgeId}/suggestions`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 필요한 경우 인증 토큰 추가
      // 'Authorization': `Bearer ${yourAuthToken}`,
    },
    body: JSON.stringify({
      suggestion: suggestionText,
    }),
  });

  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.message || '서버 오류가 발생했습니다.');
  }

  alert('수정 제안이 성공적으로 제출되었습니다!');
  setSuggestionText(''); // 입력 필드 초기화
  if (onSuggestionSuccess) {
    onSuggestionSuccess(); // 부모 컴포넌트에 성공 알림
  }
} catch (error) {
  console.error('수정 제안 실패:', error);
  alert(`수정 제안에 실패했습니다: ${error.message}`);
}

};
return (
<div>
<textarea
rows="4"
cols="50"
placeholder="검증 배지 정보에 대한 수정 제안을 입력해주세요."
value={suggestionText}
onChange={(e) => setSuggestionText(e.target.value)}
/>
<button onClick={handleSuggestEdit}>정보 수정 제안</button>
</div>
);
}
export default BadgeAnswer;

이렇게 badgeId를 컴포넌트 레벨에서 직접 관리하고, fetch 요청 시 body에 suggestion이라는 이름으로 텍스트를 담아 보내니 서버에서 정상적으로 데이터를 받아 처리하는 것을 확인할 수 있었습니다.

결과

• 검증 배지 답변 화면에서 바로 정보 수정 제안을 할 수 있게 되었습니다.
• 사용자 피드백을 반영하여 정보 수정 제안 기능이 추가되고 관련 UI가 개선되었습니다.
• 이 과정에서 발생한 문제점과 해결 방안이 문서로 기록되었습니다.

정리 — 같은 함정 안 빠지려면

• [ ] API 요청 시 필요한 모든 파라미터(ID, 데이터 등)가 정확한 이름과 형식으로 전달되는지 확인하자.
• [ ] 프론트엔드에서 동적으로 필요한 값(예: badgeId)을 어떻게 가져와서 사용할지 미리 계획하자.
• [ ] 서버 응답의 ok 상태와 에러 메시지를 꼼꼼히 확인하여 디버깅 시간을 단축하자.
• [ ] 기능 개선 후 관련 내용을 문서로 기록하는 습관을 들이자.