[Feat/#102] 공연 정보 입력 뷰 구현 #109
Conversation
|
PR 작성하느라 고생 많았어요!! 라벨 잘 지정되었는지 확인 한 번 해 주기 🫶 |
| // const castFilled = gigInfo.castList.every( | ||
| // (cast) => cast.castName && cast.castRole && cast.castPhoto | ||
| // ); | ||
| // const staffFilled = gigInfo.staffList.every( | ||
| // (staff) => staff.staffName && staff.staffRole && staff.staffPhoto | ||
| // ); |
There was a problem hiding this comment.
그거 공연진 입력하고 나서 쓰일 것 같아서 일부러 남겨뒀어용...
| // && | ||
| // castFilled && | ||
| // staffFilled |
| <S.Divider /> | ||
|
|
||
| <InputRegisterBox title="유의사항"> | ||
| <TextArea |
There was a problem hiding this comment.
p4) 현재 figma와 비교했을 때 유의사항 TextArea가 상단이 조금 높은 거 같은데 한 번 확인해 주세요!
There was a problem hiding this comment.
채현이 코드 작성 고생했어! 많은 상태들이 엮여 있어서 생각보다 오래 걸리고 힘들었을텐데 적절하게 typing으로 나누면서 잘 작성했네 👍 나도 활용해야 해서 좀 자세히 보긴 했는데, 당장은 아니더라도 보완할 점이 보여서 남겨둘게 !
우선, 스텝 1에서 포스터를 등록해야 "다음"버튼이 활성화하는 것은 좋은데 만약 해당 포스터를 삭제했을 경우, 새롭게 등록하지 않아도 "다음" 버튼이 활성화되어 있더라고.
그리고, 스텝 2에서 아무것도 입력 안해도 "다음" 버튼 활성화되어 있는 것은 좋은데,
아래의 사진처럼 출연진 사진을 올렸다가
삭제하면,
버튼이 비활성화되더라고. 너무 세세한 부분 같아서 지금을 일단 참고만 하고, 만약 여유있을 때 수정하면 될 거 같아! 아니면 2차 스프린트 때..?
여튼 고생 많았어~~
| const [bankOpen, setBankOpen] = useState(false); | ||
| const [bankInfo, setBankInfo] = useState(""); | ||
| const [isChecked, setIsChecked] = useState(false); | ||
| const [isFree, setIsFree] = useState(false); |
There was a problem hiding this comment.
p5) state가 위의 gigInfo랑 이 4개밖에 존재하지 않는 줄 알고 어떻게 관리했나 봤는데 gigInfo를 객체 상태로 하나로 관리하고, handleEvent.ts 파일의 isAllFieldsFilled 를 통해 한번에 관리하시던데 꽤 좋은 것 같아요 👍
| useEffect(() => { | ||
| if (isFree) { | ||
| setGigInfo((prev) => ({ | ||
| ...prev, | ||
| ticketPrice: "0", | ||
| accountNumber: "", | ||
| bankName: "", | ||
| })); | ||
| setBankInfo(""); | ||
| } | ||
| }, [isFree]); |
There was a problem hiding this comment.
p5) isFree는 boolean으로 토글되도록 만들고, 여기서는 따로 ticketPrice : 0 으로 설정해주는 거 좋네요!
| const file = e.target.files?.[0]; | ||
| if (file) { | ||
| setPostImg(file); | ||
|
|
||
| const fileReader = new FileReader(); | ||
| fileReader.onload = function (event) { | ||
| const imageUrl = event.target?.result as string; | ||
| setPreviewImg(imageUrl); | ||
| onImageUpload(imageUrl); | ||
| }; | ||
|
|
||
| fileReader.readAsDataURL(file); | ||
| } |
There was a problem hiding this comment.
p5) 사실 이 부분 이해하고 싶어서 좀 찾아봤는데,
FileReader는 파일을 읽기 위한 API를 제공하는 객체, File 은사용자가 파일 입력 필드에서 선택한 파일이나 드래그 앤 드롭을 통해 업로드한 파일 객체 (prop으로 사용하기도 함), readAsDataURL 는 파일을 base64 인코딩된 데이터 URL로 변환하는 코드라고 하더라구요. event.target?.result as string 은 FileReader가 파일을 읽고 나서 결과 데이터를 저장하는 속성에 타입 단언을 하는 코드라는 것도 처음 알아서, 생각보다 이해에 오래 걸렸던 것 같아요!
코드 잘 작성하셨네요 ~! 고생하셨습니다 !
| export const isAllFieldsFilled = (gigInfo: GigInfo, isFree: boolean) => { | ||
| const requiredFields = [ | ||
| "performanceTitle", | ||
| "genre", | ||
| "runningTime", | ||
| "performanceDescription", | ||
| "performanceAttentionNote", | ||
| "posterImage", | ||
| "performanceTeamName", | ||
| "performanceVenue", | ||
| "performanceContact", | ||
| "performancePeriod", | ||
| "ticketPrice", | ||
| "totalScheduleCount", | ||
| ]; | ||
|
|
||
| if (!isFree) { | ||
| requiredFields.push("bankName", "accountNumber"); | ||
| } | ||
| const scheduleFilled = gigInfo.scheduleList.every( | ||
| (schedule) => schedule.performanceDate && schedule.totalTicketCount && schedule.scheduleNumber | ||
| ); | ||
|
|
||
| return requiredFields.every((field) => gigInfo[field as keyof GigInfo]) && scheduleFilled; | ||
| }; |
There was a problem hiding this comment.
p5) 이게 너무 좋은 것 같아요! 사실 이 부분 보면서 많이 배웠습니다 .
every() 를 사용해서 전부 해당하는지 확인 후 불리언 값 리턴하는 거.. 👍👍
src/pages/register/Register.tsx
Outdated
| <InputAccountWrapper> | ||
| <InputBank bankOpen={bankOpen} onClick={() => handleBankOpen(setBankOpen, isFree)}> | ||
| {bankInfo} | ||
| </InputBank> | ||
| <TextField | ||
| name="accountNumber" | ||
| value={accountNumber} | ||
| onChange={(e) => handleChange(e, setGigInfo)} | ||
| filter={numericFilter} | ||
| disabled={isFree} | ||
| placeholder="입금 받으실 계좌번호를 (-)제외 숫자만 입력해주세요." | ||
| /> | ||
| </InputAccountWrapper> |
| <TimePickerRegisterBox title="회차별 시간대"> | ||
| {scheduleList.map((schedule, index) => ( | ||
| <div key={index}> | ||
| <S.InputDescription>{index + 1}회차</S.InputDescription> | ||
| <Spacing marginBottom={"1"} /> | ||
| <TimePicker | ||
| value={schedule.performanceDate} | ||
| onChangeValue={(date) => handleDateChange(index, date, setGigInfo)} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </TimePickerRegisterBox> |
There was a problem hiding this comment.
p3) press 될 때, 파란색으로 변하는데 배포상태에서 확인해야할 것 같아요!
src/pages/register/Register.tsx
Outdated
| genre, | ||
| runningTime, | ||
| performanceDescription, | ||
| bankName, |
|
|
||
| interface TimePickerRegisterBoxProps { | ||
| title: string; | ||
| marginBottom?: number; |
There was a problem hiding this comment.
p4) 요기 marginBottom number인데 아래에는 string이에용
There was a problem hiding this comment.
저기서 쓴 marginBottom 은 <S.TimePickerRegisterBox $marginBottom={marginBottom}>
여기에 썻고 number인데 <Spacing marginBottom={"1.4"} />이거 말씀하신걸까여...?
이름 다르게 할까요??
| ]; | ||
|
|
||
| if (!isFree) { | ||
| requiredFields.push("bankName", "accountNumber"); |
There was a problem hiding this comment.
| requiredFields.push("bankName", "accountNumber"); | |
| requiredFields = [...requiredFields, "bankName", "accountNumber"]; |
There was a problem hiding this comment.
새로 배열을 만들기는 코드가 복잡해질 것 같아서
const requiredFields = [
"performanceTitle",
"genre",
"runningTime",
"performanceDescription",
"performanceAttentionNote",
"posterImage",
"performanceTeamName",
"performanceVenue",
"performanceContact",
"performancePeriod",
"ticketPrice",
"totalScheduleCount",
...(!isFree ? ["bankName", "accountNumber"] : []),
];
이렇게 반영했습니다
|
📌 관련 이슈번호
🎟️ PR 유형
어떤 변경 사항이 있나요?
✅ Key Changes
📢 To Reviewers
📸 스크린샷
아 영상 기껏찍었는데 용량크다고 안된다네요...
아직 준혁오빠 체크 쇽샥못해서 버튼 비활성화 되어있어요
🔗 참고 자료