feature - 게시글 생성 페이지 및 컴포넌트 디자인 완료

[cryingdryice]

개요

PostCreator 컴포넌트를 구현하여 사용자가 새로운 게시글을 작성할 수 있는 기능을 추가했습니다. 이 페이지는 카테고리 선택, 제목 입력, 내용 입력 기능을 제공하며, 작성된 게시글을 제출하거나 목록으로 돌아갈 수 있는 버튼을 포함하고 있습니다.

구현 사항

• 게시글 작성 폼: 사용자가 새 게시글을 작성할 수 있는 폼을 구현했습니다. 폼에는 카테고리 선택, 제목 입력, 내용 입력 필드가 포함되어 있습니다.
• 카테고리 선택 기능: 드롭다운 메뉴를 통해 사용자가 게시글의 카테고리를 선택할 수 있도록 했습니다.
• 제목 및 내용 입력 필드: 사용자가 게시글의 제목과 내용을 입력할 수 있는 필드를 제공했습니다.
• 버튼 배치: 게시글을 작성하여 제출하는 버튼과, 목록으로 돌아가는 버튼을 양옆 끝에 배치하여 사용자의 편의성을 높였습니다.
• 입력 데이터 관리: useState 훅을 사용하여 카테고리, 제목, 내용 입력값을 관리하며, 제출 시 콘솔에 출력됩니다.

컴포넌트 구조

plaintext코드 복사
PostCreator (루트 컴포넌트)
│
└── <form className="new-post-form"> (게시글 작성 폼)
    │
    ├── <label htmlFor="category">카테고리</label>
    ├── <select id="category"> (카테고리 선택 드롭다운)
    ├── <label htmlFor="title">제목</label>
    ├── <input type="text" id="title"> (제목 입력 필드)
    ├── <label htmlFor="content">내용</label>
    ├── <textarea id="content"> (내용 입력 필드)
    └── <div className="button-container"> (버튼 컨테이너)
        ├── <button type="submit" className="submit-btn">게시글 작성</button> (게시글 작성 버튼)
        └── <button type="button" className="back-btn">목록으로</button> (목록으로 돌아가기 버튼)

추가 설명

• 버튼 배치: flexbox를 사용하여 게시글 작성 버튼과 목록으로 버튼을 양쪽 끝에 배치했습니다. 사용자 인터페이스가 직관적이고 편리해졌습니다.
• 입력 값 관리: useState 훅을 사용하여 입력된 카테고리, 제목, 내용을 관리하고, 제출 시 console.log를 통해 데이터를 확인할 수 있도록 했습니다.

기타

• 데이터 처리: 현재는 입력된 데이터를 console.log로 출력하는 로직만 포함되어 있으며, 실제 서버에 데이터를 전송하는 기능은 추가되어 있지 않습니다. 이 부분은 추후 구현이 필요합니다.

스크린샷