0603 TIL

김형석·2022년 6월 15일

wanted-POB

목록 보기

24/26

💡새로 배운 내용

동적으로 Mark 태그 적용

import React, { useCallback, useMemo } from 'react'
import { useRecoilState } from 'recoil'
import { searchKeyWordState } from 'states/search'
import styles from './dropDown.module.scss'

const DropDownItem = ({ data }: { data: IDropDown }) => {
  const { name } = data
  const [keyWord, setKeyWord] = useRecoilState(searchKeyWordState)

  const handleClickDropDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const { drop } = e.currentTarget.dataset
      setKeyWord(drop!)
    },
    [setKeyWord]
  )
  // TODO : 로직 단순화
  const markText = useMemo(() => {
    let markIdx = 0
    if (!keyWord.length) {
      return <span />
    }
    const splitKeyWord = keyWord.split('')
    const targetElement = (
      <div role='button' data-drop={name} tabIndex={0} onClick={handleClickDropDown}>
        {name.split('').map((element, idx) => {
          if (String(splitKeyWord[markIdx]).toLowerCase() === name[idx].toLowerCase()) {
            markIdx += 1
            const markKey = `mark_${idx}_${element}`
            return (
              <mark className={styles.markKeyWord} key={markKey}>
                {element}
              </mark>
            )
          }
          const spanKey = `span_${idx}_${element}`
          return (
            <span className={styles.spanKeyWord} key={spanKey}>
              {element}
            </span>
          )
        })}
      </div>
    )
    return targetElement
  }, [handleClickDropDown, keyWord, name])

  return <li className={styles.dropDownItem}>{markText}</li>
}

export default DropDownItem

일단 짜긴 했는데 너무 가독성이 떨어져보인다.. 교체를 할 필요가 있어보인다.

recoil-persist

새로 고침시에도 유지되도록 설정할지,, 적용여부를 생각해봐야겠다

npm instll recoil-persist

Atom Effects | Recoil

API 관련

https://api.coinpaprika.com/v1/tickers/eth-ethereum/historical?start=2022-06-03&interval=1h

오후 한시 = 03시까지 데이터만 나옴

10시간 이전의 데이터까지만 나옴

start부분 RFC format으로 전달해줘야함 ex)2022-06-02T20:00:00Z

가로 스크롤

flex-wrap : nowrap

item 스타일

flex: 0 0 auto;

🎨 디자인 관련

주인공은 단 한명인가

가장 중요한 버튼이 눈에 잘 띄는가
중요치 않은 놈은 색이 있는데 중요한 놈은 색이 없다던가
중요치 않은 놈이 중요한 놈보다 더 크던가
페이지에서 혹은 한 섹션에서 가장 중요한놈은 한명임

만약 로그인 페이지에서 로그인 버튼은 흰색으로 칠하고, 비번 찾기 버튼을 보라색으로 칠했다면..
그건 마치 연인에게 삼각김밥 사주고 다른 이성과 오마카세를 먹으러 가는 것과 동일하다고 보시면 됩니다.
등급에 따라 높은 등급은 차별하고 강조하고, 낮은 등급은 톤다운하고 죽이세요.

형제간의 우애

비슷한 요소들은 가까이, 다른 요소들은 멀리 배치합니다.

유비 관우 장비 삼형제는 함께 묶임이 타당함. 장비가 유비, 관우보다 조조랑 거리가 가깝다? 문제 있죠 이거...
날짜의 시작 입력폼과 날짜의 끝 입력폼은 가까워야 함.
아이디 입력창과 비번 입력창은 가까워야 합니다. 비번 입력창이 아이디 입력창 보다 로그인 버튼에 더 가깝다? 이상함.