미션 8 중간 점검

최대한 구글링을 통해 문제를 해결하려고 했으나, 한 문제에 너무 시간 소요가 되는 것 같아서 GPT에게 물어본 내용을 정리하려고 합니다. 아직 미션을 다 진행 한 것이 아니라서 추후 계속 업데이트할 예정입니다.

 

---

1. Textarea 문제

<textarea
placeholder="입력해주세요"
/>

이런 textarea를 적용할 때, 아래와 같이 너무 딱 달라붙는 문제가 생긴다. 너무 보기가 싫어서 패딩도 줘보고 했는데 해결이 안되었다...

간단한 해결 방법!

들여쓰기 css를 적용한다. px이 커질수록 안녕이 오른쪽으로 밀어내진다.

.input {
  text-indent: 20px;
}

---

2. 클릭 후 수정하기, 삭제하기 모달창 위치

초급 프로젝트 때는 그냥 잘됐는데... 선택하는게 위쪽이랑 아래쪽에 따로따로 있어서 해결이 안되나보다...

  const [modalPosition, setModalPosition] = useState({ top: 0, left: 0 });

	...

  const toggleModal = (e) => {
    const rect = e.target.getBoundingClientRect();
    setModalPosition({ top: rect.top + 25, left: rect.left - 130 });
    setIsModalOpen((prev) => !prev);
  };
  
 	...
  
   <EditDeleteModal
          onEdit={handleEditClick}
          onDelete={handleDeleteClick}
          style={{
            position: "absolute",
            top: `${modalPosition.top}px`,
            left: `${modalPosition.left}px`,
          }}
        />

getboundingclientrect() 이 있다는 것도 처음 알았다...

  

getboundingclientrect는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환하는 것이랍니다... 그래서 setter에 원하는 위치를 + -하면서 조정했다..

 

---

3. Select 옵션에서 화살표 없애기

 .dropbox{
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 }

 

윈도우 쓰는 입장에서 appearance: none만 줘도 충분히 안보이지만, 개발자는... 모든 환경에서 똑같이 보이기 위해서...

두 가지를 더 추가해줘야한다...

두 번째줄 none은 Safari 환경을 위한 것이고, 세 번째 줄 none은 firefox 환경을 위한 설정이다.

그리고 원하는 이미지를 background로 추가했다.

background: url("../../images/board/arrow.svg") no-repeat right 20px center;

위에는 기본적인 화살표이지만 아래는 원하는 이미지를 넣어 커스텀 할수도 있다는 사실!

 

---

5. Footer 위치 이동

제일 시간을 많이 잡아먹은 코드였다...

PC나 태블릿일 때는 위처럼 보였다가 모바일일 떄는 아래처럼 보여야한다.

카피라이트 왜 아래에 있는건데... 기본 HTML했을 때 어찌저찌 성공했고, React때는 왠지 모르게 안돼서 포기하고 넘어갔다... 

이제는 더이상 물러날 곳이 없다... 

 

해결해야지...GPT한테 물어봤지만... 내 프롬프트를 이해하지 못하는 걸까... 해결을 못해준다... 역시 CSS 모르는 바보 GPT...

 그래서 html 때 했던 github를 파고파서 찾아냈다... 

방법은!

css에서 order를 주는 것이다.

.copyright {
    order: 2;
    margin: 20px 0 0 0;
    width: 100%;
  }
  .link_icon {
    order: 1;
    width: 100%;
    justify-content: space-between;
  }

 

copyright 뒤로 물러나시고.. 링크와 아이콘을 앞으로 어서오시고...