Feat : 리스트 생성 페이지 구현 및 API 연결 #16
Conversation
Eugene-A-01
requested review from
kanglocal,
ParkSohyunee,
Nahyun-Kang and
seoyoung-min
|
|
||
| export const container = style({ | ||
| display: 'flex', | ||
| flexDirection: 'row', |
There was a problem hiding this comment.
flex Direction default값이 'row'라 제외해도 좋을 것 같습니다!
| }); | ||
|
|
||
| export const button = style({ | ||
| width: '', |
There was a problem hiding this comment.
빈값 발견! (혹시 의미가 있는걸까요??)
| /** | ||
| * ButtonSelector 컴포넌트: | ||
| * 사용자가 좌우스크롤로 이동하며 클릭을 통해 | ||
| * 카테고리를 선택할 수 있는 컴포넌트 | ||
| * | ||
| * @param list - 버튼으로 보여줄 목록 | ||
| * @param onClick - 버튼을 클릭했을때 동작시킬 함수 | ||
| * @param defaultValue - 기본으로 선택되어있는 요소 | ||
| */ |
There was a problem hiding this comment.
헉 까먹을뻔 했어요!!
설명이 있으니 너무 좋네요! 감사합니다🙇♀️💗
| width: '50px', | ||
| height: '50px', | ||
|
|
||
| appearance: 'none', |
There was a problem hiding this comment.
appearance란 CSS 속성이 있는줄도 몰랐네요!! 배워갑니다💗
|
|
||
| export const headerNextButton = style({ | ||
| fontSize: '1.6rem', | ||
| color: '#8d8d8d', |
There was a problem hiding this comment.
피그마에 있는 색 중 #AFB1B6을 쓰면 어떨까요??
또, 비활성화 상태에서는 호버해도 마우스 모양이 클릭으로 변하지 않도록
cursor: 'default', 속성 추가해도 좋을 것 같습니다! :)
| useEffect(() => { | ||
| const closeDropdown = (event: MouseEvent) => { | ||
| if ( | ||
| dropdownRef.current && | ||
| inputRef.current && | ||
| listRef.current && | ||
| !dropdownRef.current.contains(event.target as Node) && | ||
| !inputRef.current.contains(event.target as Node) && | ||
| !listRef.current.contains(event.target as Node) | ||
| ) { | ||
| setIsDropDownOpen(false); | ||
| } | ||
| }; | ||
| document.addEventListener('click', closeDropdown); | ||
|
|
||
| fetchData(); | ||
|
|
||
| return () => { | ||
| document.removeEventListener('click', closeDropdown); | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
여기는 useOnClickOutside 훅으로 줄여볼 수 있을 것도 같은데, 테스트를 안해봤네요! 다음에 한 번 시도해보겠습니다~!
| function MemberSelector({ placeholder, members = [], fetchData, onClickAdd, onClickDelete }: MemberSelectorProps) { | ||
| const [input, setInput] = useState(''); | ||
| const [selectedList, setSelectedList] = useState<UserProfileType[]>([]); | ||
| const [isDropDownOpen, setIsDropDownOpen] = useState(false); |
There was a problem hiding this comment.
별 차이는 없겠지만, useBooleanOutput 훅을 사용해 볼 수 있을 것 같아요!
| const [isDropDownOpen, setIsDropDownOpen] = useState(false); | |
| const { handleSetOn, handleSetOff, isOn } = useBooleanOutput(false) | |
| //... |
| * Section 컴포넌트: | ||
| * 리액트 생성 페이지의 영역을 나누는 레이아웃용 컴포넌트 | ||
| * | ||
| * @param props.title - 영역의 이름 | ||
| * @param props.isRequired - 필수 입력 영역, 빨간 *가 표시된다. | ||
| * @param props.children - 영역 안에 포함될 tsx 내용 |
| import * as styles from './SimpleInput.css'; | ||
|
|
||
| interface SimpleInputProps { | ||
| type: 'simple' | 'long'; |
There was a problem hiding this comment.
지극히 개인적인 의견을 남겨보자면,
컴포넌트 이름이 SimpleInput이다 보니, 'input' | 'textarea'로 구분한다면, 두 타입의 차이가 잘 드러날 것 같다는 생각이 듭니다!!
| rules: { | ||
| required?: { | ||
| errorMessage: string; | ||
| }; | ||
| maxLength?: { | ||
| length: number; | ||
| errorMessage: string; | ||
| }; | ||
| }; |
There was a problem hiding this comment.
룰은 string으로 받고,
string에 따라 formInputValidation 상수 파일에서 빼서 쓰는 것도 좋을 것 같아요!
ex.
//import
import * as inputRules from '@/lib/constants/formInputValidation'
//타입
rules: string
//적용
<textarea {...register(name, {required: inputRules[rules]}/>
|
현재 파일 이름인 globalStyles가 아니라 GlobalStyles로 되어있어 빌드에러가 생긴것같습니다! |
|
유진님 많은 부분 구현하시느라 너무 고생많으셨습니다!! 😭👍 |
개요
작업 사항
스크린샷
리뷰어에게