[웹개발 100일] Day 5 - 게시글 업로드 페이지 UI 제작

 
 
 

🚀 요약

꿈은 원대하게 시작했는데 되는 게 하나도 없어서 뻘짓만 함 🙃🔫
 
작업 시간: 2시간
✅ 이벤트 업로드 페이지 UI 구현 (진행중)
 
 
 

🚀 글 목록 페이지 UI 개선

나중에 자리가 좁을 거 같아서 박스 그리드를 한줄로 크게 만들어줬다.

 

 

 

🚀 글 업로드 페이지 UI (미완)

하..
뭘 어떻게 개선해야 할지 일단 오늘은 더이상 생각 안 남
애초에 사진 섞인 글 편집기를 손으로 만들겠단 시도가 잘못된 건가 ?....
뭔가 근본부터 틀려먹었단 느낌을 받았음
 

 
 
 
어쨌든 오늘 쓴 것 중 그나마 건질 만한 코드는 이렇게 생겼다 👇

const EventUpload = () => {
  return (
    <div className="text-center flex flex-col h-[calc(100vh-120px)]">
      <span className="sticky top-14 bg-white w-full py-8">
        <h2 className="text-3xl font-bold">New Event</h2>
      </span>
      <div className="flex flex-col flex-grow gap-6 w-full justify-between px-20 py-14 rounded-md border-2 border-blue-300">
        <p className="text-gray-600 min-w-full">
          <strong>
            <input
              className="text-xl min-w-full p-2 focus-visible:outline-none placeholder-gray-400 placeholder:italic border-b-2 border-blue-300"
              placeholder="Enter your title here"
            />
          </strong>
        </p>
        <div
          className="resize-none flex-grow text-start text-gray-900 whitespace-pre-wrap bg-transparent focus-visible:outline-none placeholder-gray-400 placeholder:italic border p-2"
          contentEditable
        ></div>
      </div>
    </div>
  );
};

export default EventUpload;

 
내일은 저녁에 너무 바빠서 작업 못할 듯..
목요일에 게시판 글쓰기 페이지 어떻게 만드는지 자료 좀 찾아보고 해야겠다.
일단 텍스트 서식은 제끼고 사진 첨부 기능이라도 어떻게든 우겨넣을 수 있음 좋겠고
레퍼런스 안 보고 해서 뻘짓만 한 거 같기도 ,
예전에 만들었던 글쓰기 페이지가 쇼핑몰 후기란이라 사진을 섞을 필요 없었단 걸 잊었다 ....
 
 
 
다음 작업 때 읽어볼 글

[스프링부트] 블로그처럼 글 사이에 사진이 있는 게시판 만들기 + AWS S3

이거 보니까 실시간으로 첨부 이미지를 보여주려면 역시 일단 어디다 저장해서 다시 가져와야 하는 듯하고?

예전에 분명 네이버 클라우드로 비슷한 거 했었는데 기억꾸가 안 남
 

[JavaScript] SpringBoot 프로젝트 : 프로필 사진 기능 구현(4) - 이미지 미리보기(input type = "file", FileReade

근데 자료가 다 자바임 하놔ㅡㅡ
자바공화국에서 C로 먹고 살기가 힘이 들구나