[웹 프로젝트] 피드백 적용하기 2 - 게시글 상세 페이지 연결 UX 개선

문제 정의

피드백 2.

멋집니다! 기능도 많이 구현되어있네요!

제목만 클릭이 아니라 카드 클릭하면 상세로 넘어가면 편할거같아요 ㅎㅎ

 

 

해결 방향

카드 클릭 UX 개선
- 기존에는 게시글 제목을 클릭해야만 상세페이지로 이동했으나,
  카드 전체를 클릭하면 상세페이지로 이동하도록 변경하여 편의성을 높임

 

구현 상세

공지사항 게시판

- 기존 빨간 박스 안을 클릭해야 게시글 상세 보기로 넘어갔다. 수정 후에는 초록색 박스 안을 클릭해도 넘어가도록 했다.

 

<div 
  className="post-title-and-header"
  onClick={() => navigate(`/posts/NOTICE/${post.id}${type && keyword
    ? `?type=${type}&keyword=${keyword}&sortOption=${sortOption}&pageNumber=${pageNumber}`
    : `?sortOption=${sortOption}&pageNumber=${pageNumber}`}`)}
  style={{ cursor: 'pointer' }}
>

간단하게 게시글 제목에 있던 onClick을 헤더에 넣어줬다.

 

 

잡담 게시판

- 공지사항과 마찬가지로 기존에는 제목 부분인 빨간 박스 안을 클릭해야 상세 보기로 넘어갔지만, 수정 후에는 초록색 박스 안 아무 곳이나 클릭해도 넘어가도록 설정했다.

 

 

여행꿀팁 게시판

- 팁 카테고리를 클릭하면 그에 맞는 필터링을 적용하도록 했고, 나머지 부분은 상세 보기로 상세 보기로 넘어가도록 설정했다. 기존에는 빨간 박스인 제목을 클릭해야 상세 보기로 넘어갔지만, 초록색 박스 안 아무 곳을 클릭해도 넘어가도록 했고 추가로 파란색 팁카테고리를 클릭하면 그에 맞는 필터링을 해서 넘어갈 수 있도록 설정했다.

 

 

여행동료모집 게시판

- 기존 빨간색 부분을 클릭해야만 상세페이지로 넘어갔지만, 초록색 사각형으로 범위를 넓혔다. 또한 파란색범위의 국가명을 누르면 그에 맞는 필터링을 적용하게 했고, 보라색 범위의 여행유형 태그를 누르면 이 또한 그에 맞는 필터링을 적용되게 했다.

 

 

여행기록 게시판

- 여기도 원래 빨간 박스를 클릭해야 상세페이지로 넘어갔다. 수정 후에는 초록박스를 클릭하면 상세페이지로 넘어갈 수 있게 했고, 국가명을 누르면 그에 맞는 필터링을 이루어지도록 수정했다.

 

 

메인페이지

- 기존에 빨간색 박스를 클릭해야 상세페이지로 넘어갔다. 수정 후에는 초록색 박스 안에 어디든 클릭하면 상세페이지로 넘어가게 했고, 파란색 게시판 카테고리 부분을 클릭하면 해당 카테고리 페이지로 넘어가게 했다.

 

 

 

 

 

 

서버 주소

https://tripmark.co.kr/

발자국 - 여행 커뮤니티

 

테스트 계정 1

ID: test1@gmail.com

PW: !test1234

 

테스트 계정 2

ID: test2@gmail.com

PW: !test1234

 

피드백은 항상 감사히 받겠습니다.

 

OKKY(개발자 지식공유 플랫폼)에서 피드백 받은 내용입니다.

https://okky.kr/

OKKY - All That Developer