- 이미지파일 선택 -> 아이콘으로 변경
- 사진의 경우 bg, round 없애기
- input 칸에 사진파일명과 메세지 조건부 어떻게 처리할건지 생각하고 피그마에 의견 남기기. 시안대로 우선 구현
- 채팅방 나가기 버튼 추가
✔️이미지 파일 선택버튼 생성
파일 선택하는
<input type="file" />을 아이콘으로 대체하려면,
기본적으로<input type="file" />은 CSS로 스타일링이 불가능하기 때문에,
이 요소를 숨기고 클릭 가능한 아이콘을 만들어 이를 클릭했을 때 파일 선택창을 열도록 해야 한다.
✔️수정내용
<input type="file" />요소는 숨기고, ref를 통해 접근한다.- 파일 선택을 위한 아이콘 버튼을 추가한다.
- 아이콘을 클릭했을 때 input 요소의 파일 선택 동작(클릭 이벤트)을 트리거
✔️고민했던 부분
- 파일 선택시 파일명이 input 칸에 표시되는것을 원함
-> 파일이름을 상태로 관리
-> placeholder 에 표시하도록 수정
=> 문제 : input칸에 메세지를 쓴다면 파일명이 사라지지만, 사진파일과 함께 전송이 됨.
=> 파일 자체를 input 에 넣어야 할 것 같음. (사진만 보낼 수 있도록 or 메세지만 보낼 수 있도록. 두개 동시에는 못보냄)
=> 파일이 첨부된 후에 input 칸에 파일명이 생기더라도, input 에 메세지를 입력하면 파일명도 사라지고, 파일선택된것도 사라지게 하고싶음
<input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
placeholder={imageFilename ? imageFilename : '메시지를 입력하세요.'}
className="ml-[6px] flex-grow py-4 rounded-full h-[36px] md:h-[56px] focus:outline-none bg-secondary-yellow-50 placeholder:text-[13px] md:placeholder:text-[16px]"
required
/>💠채팅 - 사진전송 진행상황
- 사진 or 메세지 둘 중 하나만 전송 가능하도록 구현함
- 사진 파일 선택시 input 메세지가 파일명으로 바뀜. DB에는 파일명이 아닌, 이미지 url 이 삽입됨
- 파일이 선택됐지만, 메세지를 입력하고 싶어서 입력하고자하는 메세지를 입력할경우 바로 내용이 반영되는게 아니라 빈칸 -> 내용반영 으로 한번 거치게 됨.
- 이때 선택된 이미지 파일은 null 로 변경됨.(파일 선택이 된건지, 안된건지 구분할만한 요소가 파일명 말고 다른 CSS 요소가 있는게 좋을수도?) -> 디자이너님과 상의해보기
