[22.05.07] TIL

input[type='range']

Slider에서 range의 background에 대한 스타일을 넣어주기 위한 과정.
기존에는 styled-components를 이용해 prop을 넘겨주어 gradient 스타일을 적용했다.
CSS Module로 리팩토링하는 과정에서 어려움을 겪었는데

<input type='range' style={{ '--percentage': `${percentage}%` }} />

====

input[type='range'] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    colors.$ORANGE 0%,
    colors.$ORANGE var(--percentage),
    colors.$BACKGROUND_PRIMARY (--percentage),
    colors.$BACKGROUND_PRIMARY 100%);
  border-radius: 6px;
}

동작을 안해 range mark 용도의 div를 두어 percentage값에 따라 width를 변하게 하는 방법으로 스타일을 적용했다.

 <div className={styles.showPercentageBar} aria-hidden='true' style={{ '--percentage': `${percentage}%` }} />

====

.showPercentageBar {
  position: absolute;
  top: 9.5px;
  z-index: 3;
  width: calc(var(--percentage) - 6px);
  height: 4px;
  background-color: colors.$ORANGE;
  border-radius: 6px;
}

input

• autoCapitalize: 입력이나 수정 텍스트 대문자로 바꾸는 방식 제어
  - off 또는 none: 대문자로 변환하지 않음 (모든 문자의 기본값 소문자)
  - on 또는 sentences: 각 문장의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자
  - words: 각 단어의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자.
  - characters: 모든 문자의 기본값 대문자
• autoCorrect: 자동으로 오타 수정
• spellCheck: 맞춤법 검사 여부 (boolean)

<input
  type='text'
  id='email'
  placeholder='E-mail'
  value={email}
  onChange={handleEmailChange}
  autoCapitalize='off'
  autoCorrect='off'
  spellCheck='false'
/>

data filter

Dropdown 리팩토링 과정
data를 input change에 따라 filtering하는 로직을 변경했다.

/* 기존 */
const newData = data.filter((country) => country.toLowerCase().startsWith(word.toLowerCase()))

/* 수정 */
const filteredData = data.filter((data) => data.toLowerCase().includes(word.toLowerCase()))

선발 과제 리팩토링

• eslint, prettier, stylelint 적용
• styled-components -> CSS Module
• e.target -> e.currentTarget
• prevState: setState((prev) => !prev)
• key값 index -> custom key
• 이벤트 함수명 handle로 시작
• 변수명 수정

https://github.com/Leejin-Yang/wanted_pre_onboarding