[feat] #19/할 일 생성 모달 레이아웃 구현

[jihye5081]

#️⃣ Issue Number

#19

📝 요약

할 일 생성 모달 레이아웃 구현 완료했습니다.
레이아웃만 구현한 상태라서 추가 기능들 구현 예정입니다.
레이아웃 구현을 위해 작성한 코드 및 기본 코드들은 추가 기능 구현 완료 후 삭제 예정입니다.
레이아웃 구현에 필요한 Textarea, Input 컴포넌트를 약간 수정했습니다.
Modal에 max-h-[80vh]로 작성되어 있어 피그마 상의 크기보다 조금 작습니다.(상의 후 수정 예정)

🛠️ PR 유형

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항(오타 수정, 변수명 변경 등)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

📷 스크린샷

1. PC 버전

2. 태블릿 버전

3. 모바일 버전
   

4. 담당자 클릭 시
   

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
taskify	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 28, 2025 6:36pm

[codeit-kkm]

수고하셨습니다!

[hyeonjiroh]

담당자 부분을 이런 식으로 구현하는 게 좋을 것 같습니다.

드롭다운을 부모 요소에 relative 속성을 주고 드롭다운으로 나오는 담당자 목록 요소에 absolute 부모 요소와 4px 차이 나도록 top을 주는 것이 좋아 보입니다.

다음은 수정해본 코드입니다. 참고 부탁드립니다. 드롭다운을 위에서 말한 것처럼 수정했고, 안의 요소들이 피그마 시안에서는 py-[11px]인데 지혜님 코드에서는 py-2로 되어있어서 함께 수정했습니다.

<div className="flex flex-col w-[271px] gap-6 tablet:w-[520px] tablet:gap-8 relative">
        <div className="relative flex flex-col">
          <label className="block mb-2.5 text-lg font-medium text-gray-800 tablet:mb-2 tablet:text-2lg">
            담당자
          </label>
          <button
            className="w-full px-4 py-3 font-normal text-md text-gray-500 border border-gray-400 rounded-md tablet:py-[11px] tablet:text-lg"
            onClick={() => setIsDropdownOpen((prev) => !prev)}
          >
            <div className="flex justify-between">
              <span>{selectedManager || "이름을 입력해 주세요"}</span>
              <Image src={dropdownIcon} width={8} height={8} alt="" />
            </div>
          </button>

          {isDropdownOpen && (
            <ul className="border border-gray-400 rounded-md w-[271px] tablet:w-[520px] absolute top-[89px] z-10 bg-white">
              {managers.map((manager) => (
                <li
                  key={manager}
                  className="px-4 py-[11px] hover:text-violet hover:bg-violet-8 cursor-pointer"
                  onClick={() => {
                    setSelectedManager(manager);
                    setIsDropdownOpen(false);
                  }}
                >
                  {manager}
                </li>
              ))}
            </ul>
          )}
        </div>

모달창 높이는 다음에 같이 이야기해봐요! 고생하셨습니다!