feature - postlist 페이지 및 컴포넌트 디자인 완료

[cryingdryice]

개요

PostListPage 컴포넌트를 구현하여 공지사항, 자유게시판, 풀이게시판의 게시글을 관리하고 표시할 수 있는 기능을 추가했습니다. 이 페이지는 검색 기능과 카테고리 필터링을 제공하여 사용자가 원하는 게시글을 쉽게 찾을 수 있도록 설계되었습니다.

구현 사항

• 게시글 데이터 관리: 공지게시판, 자유게시판, 풀이게시판의 게시글을 포함하는 postsData를 정의했습니다.
• 카테고리 필터링: SubjectDropdown 컴포넌트를 통해 모두, 공지게시판, 자유게시판, 풀이게시판 중 하나의 카테고리를 선택하여 해당 게시글만 표시할 수 있습니다.
• 검색 기능: SearchBar 컴포넌트를 추가하여 사용자가 키워드를 입력해 게시글을 검색할 수 있도록 했습니다.
• 네비게이션 바 추가: 페이지 상단에 홈으로 버튼과 마이페이지 버튼을 포함한 네비게이션 바를 추가했습니다.

컴포넌트 구조

plaintext코드 복사
PostListPage (루트 컴포넌트)
│
├── <nav className="navbar"> (네비게이션 바)
│   ├── <button className="nav-button">홈으로</button> (홈 버튼)
│   └── <button className="nav-button">마이페이지</button> (마이페이지 버튼)
│
├── <div className="controls-container"> (검색 바 및 카테고리 드롭다운)
│   ├── <SearchBar onSearch={handleSearch} /> (검색 바)
│   └── <SubjectDropdown category={category} onSelectCategory={handleSelectCategory} /> (카테고리 선택 드롭다운)
│
└── <PostList posts={postsData} /> (게시글 목록)

추가 설명

• PostList: postsData를 기반으로 게시글 리스트를 렌더링하며, 선택된 카테고리에 따라 게시글을 필터링합니다.
• SearchBar: 사용자가 입력한 키워드를 기반으로 게시글을 검색하는 기능을 제공합니다.
• SubjectDropdown: 게시판 카테고리(모두, 공지게시판, 자유게시판, 풀이게시판) 중에서 선택할 수 있도록 드롭다운 메뉴를 구현했습니다.

기타

• 현재 검색 및 카테고리 필터링 기능은 템플릿 형태로 작성되어 있으며, 로직 구현이 필요합니다.
• 추가적인 게시판이 필요하면, postsData와 category 배열을 업데이트하여 확장할 수 있습니다.
• 백엔드와 상의하여 추후 페이징기능을 구현할 예정입니다.

스크린샷