[Next.js] 최종 팀프로젝트 - (8) 오답 리스트 화면에 나타내기

1. 단어/문법 오답 리스트 뿌려주기

1) 화면에 뿌려주긴 했으나, 단어/문법 오답리스트가 공통되는 로직이 많아 보완 필요

• 유저Id 값 불러오는 로직을 처음엔 supabase.from(”user_info”)였으나, supabase.auth.getUser();로 변경함.
  [변경이유] : 로그인을하면 supabase 자체적으로 'auth' 테이블에 데이터가 들어가기 때문에 사용자의 id만 필요한 것이라면 데이터가 많이 들어가있는 'user_info' 테이블을 굳이 부르지 않아도 되는 것이었다.
• 클라이언트 컴포넌트에서 서버컴포넌트로 변경함.("use client"; 지움)
  [변경이유] : 처음에 무조건 클라이언트로 작성해야 하는줄 알고 썼으며, Next.js가 기본적으로 SSR을 지원하고 클라이언트컴포넌트로 변경해야할 이유가 없기 때문에 서버 컴포넌트로 변경했다.
  ⇒ 탠스택쿼리 바로 적용해서 코드 작성했는데 바뀌니까 시련의 시간;;;🤯 (팀원들과 같이 변경)
  

2. 각 오답의 복습완료(✔️;체크표시) 버튼 클릭 시 '미완료/완료' 탭으로 나눠서 화면에 나타내기

1) user_answer 테이블의 ‘is_reviewed’ 기본값이 false 인데, ‘학습완료(✔️)’ 버튼을 클릭하면 true로 업데이트!

처음엔 디자인을 몰라 이렇게 코드를 작성했다.

2) 기존에 ‘미완료’ 오답(단어/문법) 리스트를 뿌려주다가, ‘완료’ 탭 클릭하면 is_reviewed가 true로 바뀐 리스트만 보여주기

중간에 디자인 결정이 완료되어,
아래처럼 '미완료'탭에는 is_reviewed가 false인 리스트를, '완료'탭에는 is_reviewed가 true인 리스트를 보여주는데, 틀린 단어나 문법 오른쪽에 '학습완료 또는 체크'버튼을 클릭하면 변경되게 변경하였다.

UI부분은 탭부분과 리스트부분으로 분리하여 코드를 작성했다.