시작하며
매칭 게시판과 관리자 페이지를 끝내고 마이페이지의 활동로그와 내 정보 수정 페이지의 기능 구현을 진행했다. 활동로그 같은 경우는 그동안 구현했던 페이지의 기능과 비슷했지만 내 정보 수정의 경우 닉네임이나 비밀번호를 동시에 변경하거나 하나씩 변경할 수 있는 페이지여서 핸들링해야하는 경우가 많았다.
활동로그
마이페이지의 활동로그 페이지에서는 유저의 매칭 리스트를 확인할 수 있고 매칭된 유저를 추천하거나 신고할 수 있다. 우선 마감 여부와 취소에 따라 보여지는 버튼이 달라지게 설정하였고 취소된 매칭의 경우 text-decoration: line-through;을 설정해주었다. 매칭이 정상적으로 이루어진 경우에만 추천과 신고 버튼이 보여지도록 설정해주었다.
//매칭 리스트 한줄이 map으로 렌더링되는 컴포넌트
const DataRow = ({
el,
handleIssueInfo,
setIssue,
deleteThumbsUp,
pushThumbsUp,
}) => {
return (
<tr className={el.isMatched === 2 ? 'canceled' : ''}>
<td className='date'>
<Link
to={`/view/${el.postId}`}
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<span>
{el.reserved_at.slice(0, 10) + ' ' + el.reserved_at.slice(11, 16)}
</span>
</Link>
</td>
<td className='location'>
<Link
to={`/view/${el.postId}`}
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<span>{el.place_name}</span>
</Link>
</td>
<td className='hostGuest'>
<Link
to={`/view/${el.postId}`}
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<span>
{el.guestNickname
? `${el.hostNickname}/${el.guestNickname}`
: el.hostNickname}
</span>
</Link>
</td>
<td className='match'>
<Link
to={`/view/${el.postId}`}
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<span>{!el.isMatched ? '모집중' : '마감'}</span>
</Link>
</td>
<td className='etc'>
{el.isMatched === 2 ? (
<div className='text-canceled'>취소 완료</div>
) : el.isMatched ? (
<div className='like-issue'>
{el.thumbsup ? (
<FontAwesomeIcon
icon={faThumbsUp}
className='btn-thumbsup'
onClick={() => {
deleteThumbsUp(el);
}}
/>
) : (
<FontAwesomeIcon
icon={unFaThumbsUp}
className='btn-thumbsup'
onClick={() => {
pushThumbsUp(el);
}}
/>
)}
<span
className='btn-issue'
onClick={async () => {
await handleIssueInfo(el);
await setIssue(false);
await setIssue(true);
}}
>
신고
</span>
</div>
) : (
''
)}
</td>
</tr>
);
};
신고 버튼을 누를 시에 상대유저의 닉네임이 표시된 새창이 생성되고 신고하기 버튼을 누르면 post 요청을 보내도록 구현하였고 신고 사유를 작성하지 않았을 시 모달이 표시되도록 하였다.
내 정보 수정
수정하기 페이지는 닉네임이나 비밀번호 중 하나의 정보를 변경하거나 둘다 동시에 변경이 가능하도록 구현해야해서 핸들링할 경우가 많았다. 내 정보 수정 페이지의 닉네임 input 창에는 처음에는 유저의 현재 닉네임이 표시되고 수정하고 중복확인을 거쳐야 수정이 가능하다. 비밀번호도 유효성검사를 통과해야 변경이 가능하도록 구현하였다.
로직이 어렵지는 않았으나 핸들링할 경우가 많아서 해당하는 메시지나 모달창의 메세지를 나누어 주는 부분이 많았다. 올바르게 정보를 입력한 경우에만 수정요청을 보낼 수 있도록 설정하고 구현을 마쳤다.
탈퇴하기도 신고하기와 마찬가지로 새창이 생성되도록 구현하였고 동의체크박스에 체크를 해야만 탈퇴하기 버튼이 활성화되도록 설정해주었다.
마치며
이제 어느 정도 기능 구현이 진행되면서 예상치 못하게 발생하는 버그들이 많았다. 프론트/백으로 나누어서 개발을 하는 것이 익숙하지 않아서 발생하는 문제도 있고 새로운 스택 특히 sequelize 때문에 생기는 오류도 많았다. 다행히 해결책을 찾아서 예상했던 일정대로 진행이 되고 있고 Advanced나 Nightmare에 해당하는 기능들도 몇가지 선택해서 구현하는 방향으로 진행하려고 한다.
