[TIL] 24/01/24 [최종] css 지옥

오늘도 화이팅!

 

---

프로젝트 진행 상황

✓ MVP 기능 보충해서 합치기 중 (10 %정도 남지 않았을까)

✓ css 맞추다가 밤샐 듯

 

---

내 진행 상황 

오늘 한일

1. csssss

2. 에디터 제목 본문 누를 때 드디어 줄에 적용된 걸로 표시 됨 ㅎ

무식한 코드지만 드롭다운으로 바꾸면서 이렇게 밖에 못함.

핸들러도 빼두었다.

	<div className="selectBox relative">
        <div
          className={`flex items-center justify-between my-auto border-[1px] border-white hover:border-[1px] hover:border-[#E6E6E6] rounded-[3px] w-[81px] h-[33px] leading-[33px] px-[7px] py-[8px] text-[14px] cursor-pointer transition-all
          ${isActive ? "bg-[#E6E6E6]" : "bg-white"}`}
          onClick={(e) => onClickFontSizeHandler(e)}
        >
          {
            {/*이 부분 !!! ㅋㅋㅋㅋ */}
            <div className="h-[33px]">
              {editor.isActive("heading", { level: 1 })
                ? "제목 1"
                : editor.isActive("heading", { level: 2 })
                  ? "제목 2"
                  : editor.isActive("heading", { level: 3 })
                    ? "제목 3"
                    : editor.isActive("paragraph")
                      ? "본문"
                      : selectedValue}
            </div>
          }
          {isActive ? <IoIosArrowUp /> : <IoIosArrowDown />}
        </div>
        <ul
          className={`absolute flex flex-col mt-[3px] rounded-lg border-[0.5px] *:w-[81px] *:h-[29px] *:leading-[29px] *:px-[7px] *:bg-white text-[14px] z-10 ${
            isActive ? "visible" : "invisible"
          }`}
        >
          <button
            type="button"
            className="rounded-t-lg hover:bg-[#E6E6E6]"
            onClick={setH1FontHandler}
          >
            제목 1
          </button>
          <button
            type="button"
            className="hover:bg-[#E6E6E6]"
            onClick={setH2FontHandler}
          >
            제목 2
          </button>
          <button
            type="button"
            className="hover:bg-[#E6E6E6]"
            onClick={setH3FontHandler}
          >
            제목 3
          </button>
          <button
            type="button"
            className="rounded-b-lg hover:bg-[#E6E6E6]"
            onClick={setParagraphFontHandler}
          >
            본문
          </button>
        </ul>
      </div>

 

 

오늘 나머지 공부 (21시~ 달려!)

1. css 맞추기 ...  호버색 클릭색 맞추고, 지역도 드롭다운으로 바꿔야한다.... 하