[Team-33][bangtae & 포키] 1주차 금요일 PR #94
Conversation
* rename: gnb 폴더 생성하여 관련 컴포넌트 이동 - styled -> customStyled 로 변경 적용 * refactor: gnb 컴포넌트 css 수정 * feat: main banner UI 구현 * refactor: gnb 컴포넌트 hover 및 cursor pointer 적용
* chore: mui 버전 통일 * feat: 글로벌 스타일 추가 * feat: SearchBar 컴포넌트 style 작성 및 이벤트 추가
* chore: alias 경로 설정을 위한 react-app-rewired 설치 및 설정파일 생성 * refactor: 절대경로 반영 (index, app, gnb, main-banner) * fix: search input width 고정
| @@ -0,0 +1,5 @@ | |||
| const { alias, configPaths } = require('react-app-rewire-alias'); | |||
There was a problem hiding this comment.
절대경로를 적용하셨군요! 👍
cra를 사용하지 않는 경우에는 별도 의존성 추가하지 않아도 사용하는 번들러(webpack, vite 등) config 설정만으로도 절대경로 설정이 가능합니다~ 참고만 해주세요 ㅎㅎ
| width: 88px; | ||
| height: 46px; | ||
| line-height: 46px; | ||
| text-align: center; | ||
| font-size: ${({ theme }) => theme.fontSize.logo}; | ||
| font-weight: ${({ theme }) => theme.fontWeight.logo}; | ||
| color: ${({ theme }) => theme.color.grey1}; | ||
| cursor: pointer; |
There was a problem hiding this comment.
h1 하위로 Link(react router dom) 컴포넌트로 링크 거는식으로 추가해봐도 좋을 것 같습니다~
저는 보통 cursor: pointer는 버튼이나 링크같은 경우에만 사용하는거 같아서 이질감이 조금 있는거 같네요
| top: 0px; | ||
| width: 1440px; | ||
| height: 640px; | ||
| z-index: -1; |
There was a problem hiding this comment.
z index를 마이너스로 두는것도 방법이겠지만, background image로도 넣을 수 있겠네요!
| </IconButton> | ||
| ); | ||
| } | ||
|
|
||
| const IconButton = styled.button` | ||
| visibility: ${({ visibility }) => visibility}; |
There was a problem hiding this comment.
visibility와 display의 차이점도 참고해 보시면 좋을것 같습니다~
| label={label} | ||
| placeholder={placeholder} | ||
| isLastElement={isLastElement(index) ? true : false} | ||
| isCurrentInput={isCurrentInput(label) ? true : false} |
There was a problem hiding this comment.
| isCurrentInput={isCurrentInput(label) ? true : false} | |
| isCurrentInput={isCurrentInput(label)} |
boolean을 반환하는 함수일 경우에는 또 true/false로 변환해 주지 않아도 됩니다!
| <SearchMenu bgColor={isFocus ? 'grey6' : 'white'} tabIndex="0" onBlur={handleBlur}> | ||
| {searchInputText.map(([key, { label, placeholder }], index) => ( | ||
| <Fragment key={key}> | ||
| <SearchInput |
There was a problem hiding this comment.
span(SearchMenu) 태그는 div 태그(SearchInput)를 포함할 수 없습니다!
아마 react에서도 워닝이 떴을 것 같은데 확인 한번 해보시면 좋을것 같습니다.
| {isLastElement ? null : <Line />} | ||
| {isLastElement ? <SearchButton isFocus={isFocus} /> : null} |
There was a problem hiding this comment.
| {isLastElement ? null : <Line />} | |
| {isLastElement ? <SearchButton isFocus={isFocus} /> : null} | |
| {isLastElement ? <SearchButton isFocus={isFocus} /> : <Line />} |
| border-left: 1px solid ${({ theme }) => theme.color.grey5}; | ||
| `; | ||
|
|
||
| const Container = styled.div` |
There was a problem hiding this comment.
상위 태그 스타일부터 순서대로 위치하면 보기에 좀더 편할것 같네요~
안녕하세요 후~
1주차 금요일 PR 입니다.
진행 사항이 많지 않지만 잘 부탁드립니다.
진행 사항
고민했던 점
진행 예정