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

[cryingdryice]

개요

PostFix 컴포넌트를 구현하여 기존 게시글을 수정할 수 있는 기능을 추가했습니다. 이 컴포넌트는 기존 게시글 데이터를 불러와 사용자가 카테고리, 제목, 내용을 수정한 후 이를 제출할 수 있도록 설계되었습니다.

구현 사항

• 기존 게시글 데이터 초기화: 컴포넌트가 렌더링될 때, 기존 게시글 데이터를 폼 필드에 초기값으로 설정했습니다. 이를 통해 사용자가 수정 전의 게시글 내용을 확인하고 수정할 수 있습니다.
• 카테고리, 제목, 내용 수정 기능: 사용자가 기존 게시글의 카테고리, 제목, 내용을 수정할 수 있도록 폼 필드와 상태 관리 로직을 구현했습니다.
• 수정된 데이터 제출: 사용자가 수정한 내용을 제출할 수 있도록 handleSubmit 함수를 통해 데이터를 처리했습니다. 현재는 콘솔에 출력되지만, 실제 데이터 처리 로직은 추후 추가할 수 있습니다.
• 양옆 버튼 배치: "게시글 수정" 버튼과 "목록으로" 버튼을 양쪽 끝에 배치하여 사용자의 편의성을 높였습니다.

컴포넌트 구조

plaintext코드 복사
PostFix (루트 컴포넌트)
│
└── <form className="postfix-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> (목록으로 버튼)

추가 설명

• 기본 게시글 데이터: 예시로 제공된 existingPost 객체를 사용하여 초기 폼 필드를 채웁니다. 이 데이터는 실제로는 서버에서 받아오거나, 라우팅을 통해 전달받을 수 있습니다.
• 데이터 처리: 현재는 handleSubmit 함수에서 수정된 데이터를 console.log로 출력하지만, 추후 실제 서버에 데이터를 전송하는 로직을 추가할 수 있습니다.

기타

• 버튼 배치: flexbox를 사용하여 버튼을 양쪽 끝에 배치함으로써, 사용자 인터페이스를 직관적으로 구성했습니다.
• 데이터 전송 로직: 현재 콘솔 출력만 지원하고 있으므로, 실제 데이터 전송 및 처리 로직을 추가하여 완전한 수정 기능을 구현해야 합니다.

스크린샷