[FE] 방 생성, 수정 기능 추가(#743) #746
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| overflow: hidden; | ||
| padding: 3rem 2rem 3rem 3rem; |
There was a problem hiding this comment.
스크롤이 박스에 딱 붙어서 생기는 게 안 예뻐서 아래 ModalBody에 padding-right: 1rem을 추가하였더니 가운데 정렬이 안 맞았습니다.
그 이유로 ModalContent의 오른쪽만 2rem으로 변경하여 가운데 정렬로 맞췄습니다!
| const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === "Enter") { | ||
| e.preventDefault(); | ||
| const trimmedKeyword = keyword.trim(); |
There was a problem hiding this comment.
스페이스만 치고 엔터키를 눌렀을 때는 제출이 되지 않게 하려고 trim을 추가하였습니다.
| <> | ||
| <div ref={firstChildRef} tabIndex={-1} aria-hidden /> | ||
| {hasCloseButton && ( | ||
| <S.CloseButton onClick={handleModalClose} ref={closeButtonRef} aria-label="모달 닫기"> | ||
| × | ||
| <Icon kind="close" size="2.4rem" /> | ||
| </S.CloseButton> | ||
| )} | ||
| {children} | ||
| </div> | ||
| <S.ModalBody>{children}</S.ModalBody> |
There was a problem hiding this comment.
x 버튼을 오른쪽 상단에 고정하기 위해 children을 ModalBody로 감싸고 ModalContent에 position: relative를 두었습니다.
| const validators = { | ||
| title(value: string): string { | ||
| if (this.isStringEmpty(value)) { | ||
| return "제목을 입력해주세요."; | ||
| } | ||
| return ""; | ||
| }, |
There was a problem hiding this comment.
더 추가해야할 유효성 검사가 있으면 이 댓글에 남겨주세요ㅎㅎㅎ!
| <CalendarDropdown selectedDate={selectedDateTime} handleSelectedDate={handleDateChange} /> | ||
| <TimeDropdown selectedTime={selectedDateTime} onTimeChange={handleTimeChange} /> | ||
| </> | ||
| <div style={{ display: "flex", gap: "1rem" }}> |
There was a problem hiding this comment.
이 두 개의 속성 때문에 파일 하나를 새로 생성하는 것이 비용이 큰 것 같아서 inline으로 넣어두었습니다..!
| <Input | ||
| type="text" | ||
| placeholder="Enter키를 누르면 키워드가 생성돼요" | ||
| value={keyword} | ||
| showCharCount={true} | ||
| maxLength={20} | ||
| onChange={handleInputChange} | ||
| onKeyDown={handleKeyDown} | ||
| error={error} | ||
| /> |
There was a problem hiding this comment.
생성페이지의 Input 컴포넌트 전반적으로 maxLength와 placeholder를 상수로 관리해보는 거 어떨까요??
const KEYWORD_CONFIG = {
MAX_LENGTH: 20,
PLACEHOLDER: 'Enter키를 누르면 키워드가 생성돼요'
} as const;
There was a problem hiding this comment.
이 파일 내에서만 쓰이는 값들이고 상수화 했을 때 코드가 분산되는 느낌이 있어서 하지 않았는데
상수화 했을 때 어떤 이점이 있을까요???😊
가로가 700px 밖에 되지 않아 위아래로 배치해도 인풋이 길어지지 않네요! 세로로 배치하는 것으로 디자인 수정했습니다😁 |
| `} | ||
|
|
||
| ${media.large` | ||
| height: 311px; | ||
| height: 384px; |
There was a problem hiding this comment.
카드 컴포넌트 크기가 변경된것을 스켈레톤에도 반영했군요 😄
| validators.title(formState.title) === "" && | ||
| validators.classification(formState.classification) === "" && | ||
| validators.content(formState.content) === "" && | ||
| validators.repositoryLink(formState.repositoryLink) === "" && | ||
| validators.thumbnailLink(formState.thumbnailLink) === "" && | ||
| validators.keywords(formState.keywords) === "" && | ||
| validators.matchingSize(formState.matchingSize) === "" && | ||
| validators.limitedParticipants(formState.limitedParticipants, formState.matchingSize) === "" && | ||
| validators.recruitmentDeadline(formState.recruitmentDeadline) === "" && | ||
| validators.reviewDeadline(formState.reviewDeadline, formState.recruitmentDeadline) === ""; |
There was a problem hiding this comment.
해당 로직도 util 에서 처리했다면 조금 더 가독성이 좋을거 같다는 생각이 드네요 ㅎㅎ
There was a problem hiding this comment.
validateForm 함수를 만들어서 이 부분을 util로 분리했습니다ㅎㅎ😊
e699e6e
📓 스토리북 링크
바로가기
📌 관련 이슈
✨ PR 세부 내용
1. 방 생성 플로팅 버튼 띄우기
-CoReA.Code.Review.Area.-.Chrome.2024-11-10.00-44-20.mp4
2. 입력폼 유효성 검사하기
완료 버튼 누르면 아래처럼 유효하지 않은 폼에 대해 에러메세지를 보여줍니다.
3. 키워드 생성하기
-CoReA.Code.Review.Area.-.Chrome.2024-11-14.13-09-53.mp4
4. 상세페이지 ControlButton 생성하기
MANAGER 일 때
PARTICIPATED 일 때
