[🌏어스마켓 프로젝트] input 자동완성 끄기, useForm reset, SVG 효과

1. input  자동완성 기능 끄기

 

 

input 창에 이전에 테스트용으로 작성한 텍스트들이 뜨는 것을 일일이 지우기 귀찮았다...

사용자의 편의를 돕기 위해 브라우저가 기억해두는 고마운 기능이지만

레이아웃, 디자인을 방해하는 요소로 작용하기도 한다.

 

 

위에 사진은 프로젝트 post 페이지 안에 댓글 입력창 부분이다.

자동완성 기능을 사용해서 댓글을 입력했고, input 선택 영역이 padding 값을 포함한다는 것을 알게 되었다.

우선 margin 값으로 변경해서 영역 문제는 해결했고,

텍스트가 계속 쌓이면서 UI를 헤치고 있어서 자동완성 기능을 없애는 방향을 선택했다.

 

📁 autocomplete="off" 

: 자동 완성 기능을 없애는 방법

<input type="text" autocomplete="off" />

• input 태그 안에 autocomplete 속성을 off로 설정한다.

리액트에서 캐멀 케이스케이스 표기법을 사용하기 때문에 이 점을 주의하기!

간단한 문제인데 여기서 조금 헤맸다..ㅎㅎ

<SubmitChatInput 
    name="comment"
    type="text"
    placeholder="댓글 입력하기"
    autoComplete="off"
    {...register("comment")}
/>

 

자동 완성 기능을 off 해두니 한결 깔끔해졌다!

 

 

2. 리액트 useForm reset 하기

submit 후 input 입력창 안에 텍스트가 그대로 남아있는 문제 해결하기.

모든 필드 값을 리셋하고 폼 안의 모든 에러를 초기화하는 방법

 

 1.  reset() 메서드를 추가한다.

const PostView = () => {
  const { register, handleSubmit, reset } = useForm();
  // 댓글 생성
  const onSubmit = data => {
    const { comment } = data;
    dispatch(commentCreateAction(comment, postId));
    reset();
  };

: 문제를 해결하긴 했지만 유효성 검사 측면에서 더 알아봐야겠다.

 

 

3. SVG에 그림자 효과 추가하기

📁 팀 프로젝트에서 SVG 방식을 선택한 이유

1. 모든 디스플레이에서 이미지가 선명하게 보인다. 

2. 다른 이미지 파일 유형에 비해 최적화될 때 파일 크기가 작다.

 

 

📁 어스 마켓 프로젝트 로고 작업을 간단하게 만들어보면서

SVG 파일 형식이 모든 스타일을 지원하지 않는다는 것을 알게 되었다.

그림자 효과 같은 그래픽 스타일을 XML 코드로 편집하여 사용자 정의 효과를 생성했다.

<filter height="200%" id="filter-shadow" x="0" y="0">
    <feOffset  dx="0" dy="5" in="SourceGraphic" result="offOut"></feOffset>
    <feGaussianBlur  in="offOut" result="blurOut" stdDeviation="5"></feGaussianBlur>
    <feBlend  in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>

• <feOffset> : 그림자 효과를 만드는 데 사용
• <feGaussianBlur stdDeviation=""> : 흐림 정도를 정의
• <feBlend> : 원본 그래픽을 가져와 오프셋 이미지 위에 원본을 혼합

 

📍인터넷 익스플로러와 사파리는 SVG 필터를 지원하지 않는다.

 

참고 사이트

https://helpx.adobe.com/kr/illustrator/using/svg.html

https://ldrerin.tistory.com/398