feat: 검색창 애니메이션 적용 #9
Conversation
| {results.length != 0 && ( | ||
| <SearchResults value={query} results={results} /> | ||
| )} | ||
| </SearchInputWrapper> |
There was a problem hiding this comment.
찾는 Input UI 와 Input 에 따른 결과 Result UI 는 Input 내에 있기보단 동일 레벨에 있어야 할 것 같아요
Input UI 가 결과 UI 를 알고 있는 구조가 자연스럽진 않아서요
Result UI 의 변경이 Input 에 영향을 끼치게 됨
to-be
<Search>
// 동일 뎁스
<SearchInput />
<SerachResult />
</Search>
| }; | ||
|
|
||
| const StyledInput = styled.input` | ||
| const SearchInputWrapper = styled.div<{ isExpanded: boolean }>` |
There was a problem hiding this comment.
interface Expandable {
isExpaned : boolean
}
interface SearchInputStyledProps extends ExpandableProps {
// additional styled props
}
styled.div<SearchInputStyledProps>이 파일 내부에 만들고 재사용하는 방법은.. 선택
| query: string; | ||
| setQuery: (query: string) => void; | ||
| onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; | ||
| onSubmit: () => void; | ||
| results: Professor[]; |
There was a problem hiding this comment.
results 는 input 만의 역할에 벗어난 데이터,
query는 input element의 일반적인 역할의 이름인 value 로
setQuery는 input 을 초기화 하는 용도로만 사용되는데 이걸 덜어낼 방향을 생각해보시는 것도.. 굳이 필요한 props 인가? 구현(동작)을 위해 껴넣어진 props 인가?
onSubmit 은 input레벨이 아니라 상위에서 처리해야 할 관심인 것 같아요
인풋의 역할은 사용자의 입력을 받아, 그 값을 상태로 관리해주고, 추가적으로 인풋이 오버레이 형태니 그것의 열고 닫힘을 관리해주는 것까지로 한정지을 수도 있겠네요
검색어를 submit 하고 결과를 찾아 result 를 보여주는 건 input 의 역할에서 벗어난 듯해요
이것을 생각하면서 props 디자인을 해보는 것도 괜찮을듯함다
| results: SearchResultTypes[]; | ||
| } | ||
|
|
||
| const logoMap: { [key: number] } = { |
There was a problem hiding this comment.
Record<number, React.svg 어쩌고 >
작업 내용 요약