Free공지 더 보기 토글

Next.js app-router 로 공지 목록 페이지의 더 보기 토글을 완성하는 문제입니다. 공지마다 'Read more' 버튼이 있고, 한 번 누르면 본문이 열리고 한 번 더 누르면 닫힙니다. 공지 데이터는 정적 배열(lib/notices)이며, 토글 로직은 components 폴더의 토글 컴포넌트 파일에 둡니다.

Next.js app-router 는 컴포넌트를 어디서 실행할지에 대한 구분을 갖고 있습니다. 화면을 그리기만 하는 부분과, 사용자의 클릭에 반응해 화면을 바꾸는 부분은 실행되는 자리가 다릅니다. 이 문제는 버튼을 누르면 본문이 열리고 닫히는, 사용자와 주고받는 동작을 가진 작은 위젯을 만드는 일을 다룹니다. 누를 때마다 화면이 실제로 바뀌는지 직접 확인하는 습관이 중요합니다.

Next.js app-router 에서 상호작용하는 위젯은 어떻게 만드나요?

버튼 클릭처럼 사용자와 주고받는 동작이 있는 부분은 페이지 전체가 아니라 그 조각만 따로 떼어 작은 컴포넌트로 만드는 게 기본 설계입니다. 이 문제의 토글 컴포넌트가 그런 조각입니다.

토글 동작은 어떻게 검증하나요?

npm test 로 @testing-library/react 테스트를 돌리고, 개발 서버로 띄운 /notices 에서 'Read more' 를 눌러 본문이 열리고 한 번 더 누르면 닫히는지 직접 확인하세요.

공지 데이터는 어디서 오나요?

lib/notices.ts 의 정적 배열(3개)에서 옵니다. 이 데이터는 완성돼 있어 고칠 필요가 없고, 서버 저장·전역 상태는 범위 밖입니다.