[웹개발 100일] Day 4 - 게시글 리스트, 디테일 페이지 UI 개선

 

 

 

 

🚀 요약

이제 다시 평일이라 하루 한 시간? 정도 낼 수 있지 않을까 싶다.

수요일 저녁은 바쁜데다가 다음날 외근이라 작업 못 할 수도.

 

작업 시간: 2시간

✅ 이벤트 리스트 UI 개선

✅ 이벤트 디테일 UI 마무리

 

 

 

🚀 이벤트 리스트 UI 개선

리스트가 보기에 별로인 거 같아서 카드형으로 다시 만들었다. 일단 내 생각엔 이게 나은 듯?

sticky로 페이지마다 타이틀 고정하고 싶었는데 제대로 안 붙어서 고생 좀 했다 ..

 

리스트 페이지 코드

<div className="text-center flex-grow flex flex-col">
      <span className="sticky top-14 w-full py-8 bg-white">
        <h2 className="text-3xl font-bold">Events</h2>
        <p className="text-gray-600">이벤트 리스트</p>
      </span>
      {/* <div className="flex flex-col flex-grow gap-3 w-full"> */}
      <div className="grid grid-cols-2 flex-grow gap-8 w-full">
        {events.map((event, index) => (
          <Link key={index} to={`/eventdetail/${index}`}>
            <div
              key={index}
              className="grid grid-cols-3 gap-3 text-start items-center p-10 rounded-md bg-white text-gray-900 min-h-20 border-2 border-blue-100"
            >
              <div className="col-span-2 flex flex-col gap-3">
                <span className=""><strong>{event}</strong></span>
                <div className="flex gap-1">
                  <span className="text-sm bg-blue-100 rounded-xl inline-block py-1 px-2">
                    지혜
                  </span>
                </div>
                <span className="text-sm">2024 / 2 / 14</span>
              </div>
              <span
                key={index}
                className="flex items-center justify-center rounded-md overflow-hidden min-h-24 max-h-24"
              >
                <img src={imagePaths[0]} />
              </span>
            </div>
          </Link>
        ))}
      </div>
    </div>

 

 

 

🚀 이벤트 디테일 UI 마무리

일단 이렇게 해놨다.. 사진은 더미데이터로 map 돌리는 정도만 구현해놨음

이제 업로드 페이지만 만들고 슬슬 백엔드에 손을 대야 할 것 같다.

그리고 어제였나? 쓰는 거 깜박했는데 라우팅 될 때 애니메이션도 추가함.

 

디테일 페이지 코드

{eventTitle}은 파라미터로 eventId 받아서 배열에서 찾은 후 넣어준다.

<div className="text-center flex-grow flex flex-col justify-start">
      <span className="sticky top-14 flex-grow bg-white w-full py-8">
        <h2 className="text-3xl font-bold">Event Detail</h2>
        <p className="text-gray-600">{eventTitle}</p>
      </span>
      <div className="flex flex-col flex-grow gap-6 w-full justify-start p-20 rounded-md bg-blue-100">
        <span className="flex text-start text-gray-900 flex-col flex-grow">
          텍스트
        </span>
        <div className="grid grid-cols-3 gap-12">
          {imagePaths.map((path, index) => (
            <span className="rounded-md overflow-hidden max-h-40 flex items-center">
              <img src={path} className="rounded-md" alt="" />
            </span>
          ))}
        </div>
      </div>
    </div>