[웹개발 100일] Day 47~49 - 게시글 업로드 페이지 UI 구현 (진행중)

 
 
 
이제 이미지 업로드가 가능하니 게시글 작성 기능을 구현할 차례겠지요.
일단 오늘은 너무 대충 만들어놓은 UI를 좀 손봤습니다.
본문 작성란은 에디터 라이브러리를 가져다 쓸 듯한데 Tiptap을 고려하고 있어요.
 
 

---

🚀 요약

작업 시간: 3시간
✅ 게시글 업로드 페이지 UI 구현 (진행중)
 
 

---

🚀 게시글 업로드 페이지 UI 구현 (진행중)

 

 
아직 미완입니당
카테고리, 참석자, 모임 날짜를 정할 수 있게 하고 발행 버튼을 추가할 거예요.
 
 
일단 지금까지 구현한 거라도 놓고 갑니다.

import { useRef, useState } from "react";

const EventUpload = () => {
  const [content, setContent] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value);
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = "auto";
      textarea.style.height = `${textarea.scrollHeight}px`;
    }
  };

  return (
    <div className="flex flex-col items-center min-h-[30rem] px-4">
      {/* 상단 제목 */}
      <div className="w-full py-8 text-center">
        <h2 className="text-3xl font-bold">New Event</h2>
      </div>

      <div className="flex w-[800px] justify-between">
        <div>category</div>
        <div>event date</div>
        <div>participants</div>
        <button>Publish</button>
      </div>

      {/* 콘텐츠 박스 */}
      <div className="w-full max-w-4xl flex-grow border-2 border-blue-300 rounded-md px-8 py-8 flex flex-col gap-6 min-h-[38rem]">
        {/* 제목 */}
        <input
          type="text"
          className="text-xl w-full p-2 focus:outline-none placeholder-gray-400 placeholder:italic border-b-2 border-blue-300"
          placeholder="Enter your title here"
        />

        {/* 본문 */}
        <textarea
          ref={textareaRef}
          value={content}
          onChange={handleInput}
          className="w-full mt-4 text-gray-900 whitespace-pre-wrap bg-transparent focus:outline-none placeholder-gray-400 placeholder:italic p-2 overflow-hidden resize-none"
          placeholder="Write your event description..."
        />
      </div>
    </div>
  );
};

export default EventUpload;