FEAT: 이벤트추가 Input form 구현 #10
Conversation
chj950807
commented
Oct 27, 2023
chj950807
commented
- Title Input (일반Input)
- Selector Input
- Editor (환경에 따른 오류 발생 여부 확인 필요)
- CheckBox
- DatePicker
- 이미지 업로드 ( 버그 수정 필요)
| > | ||
| {image.map((url, index) => { | ||
| return ( | ||
| <Button |
There was a problem hiding this comment.
이미지를 클릭 시 이미지가 삭제됩니다. 이미지 클릭 시 대표 사진변경하는 로직을 추가하고 삭제 버튼을 따로 구현해주어야 할 듯합니다.
<Button
variant="outlined"
color="error"
key={index}
sx={[
{
border: 2px solid ${customColors.white},
width: "200px",
minHeight: "200px",
padding: "0",
},
]}
>
{index === 0 ? (
<Box
sx={{
position: "absolute",
left: "0",
backgroundColor: "red",
padding: "3px 10px 3px 10px",
color: ${customColors.white},
}}
>
대표
<Box
sx={{
position: "absolute",
right: "0",
backgroundColor: "black",
padding: "3px 10px 3px 10px",
color: ${customColors.white},
}}
onClick={(e) => onClickDeleteFile(e, url)}
>
x
) : (
<Box
sx={{
position: "absolute",
right: "0",
backgroundColor: "black",
padding: "3px 10px 3px 10px",
color: ${customColors.white},
}}
onClick={(e) => onClickDeleteFile(e, url)}
>
x
)}
이런 식으로 이미지 상단에 x 버튼을 추가하면 어떨까요?
(아마 onClickDeleteFile 함수에서 e: React.MouseEvent<HTMLDivElement, MouseEvent>, 이렇게 수정해줘야 작동될 것 같습니다.)
There was a problem hiding this comment.
우선 대표 이미지 수정 로직 추가하였고, 삭제 부분 따로 만들어 두었습니다. 변수에 0번째 인덱스가 대표이미지라고 생각하고 있으면 이해하기 쉬울것 같습니다.
| if (!files) { | ||
| return; | ||
| } | ||
| if (files.length > 5) { |
There was a problem hiding this comment.
이미지가 5개 이상 업로드 되어도 계속 업로드 할 수 있습니다. 아마 비동기 관련 오류로 이미지가 업로드 되고 나서 files가 수정되는 것 같습니다.
if (image.length >= 5) {
return alert("최대 5개 사진까지 첨부 할 수 있습니다.");
}
이런식으로 이미지 배열의 길이를 통해 해결할 수 있을 것 같습니다!
There was a problem hiding this comment.
최대 이미지의 개수가 5이므로 image.length + files.length >5로 수정하였습니다.
| setHashtag, | ||
| }: EventInputFormProps) { | ||
| /* API 생기면 서버에서 얻어옴, 동시에 PhotoboothName은 첫번째 값으로 초기화 */ | ||
| const tempPhotoboothData: SelectInputData[] = [ |
There was a problem hiding this comment.
포토부스 카테고리 명을 ㄱㄴㄷ->abc 순으로 정렬해서 보여주도록 되어있습니다. 나중에 데이터 받을 때 추가로 구현해야 할 것 같습니다!
| export default function EventNew() { | ||
| const [title, setTitle] = useState<string>(""); | ||
| const [photoboothName, setPhotoboothName] = useState<string>(""); | ||
| const [image, setImage] = useState<string[]>([]); |
There was a problem hiding this comment.
const [images, setImages] = useState<{ imageUrl: string; isRepresentative: boolean }[]>([]);
이렇게 해당 이미지가 대표 이미지인지를 나타내는 정보를 추가로 작성하는게 좋지 않을까요?
There was a problem hiding this comment.
API 명세에서 represntative랑 나머지 이미지랑 분리해서 데이터를 보내드릴것이라고 명시 했습니다. 어떻게 보내는것이 좋을지도 의논 해야할것 같고,,
비동기로 동작하기때문에 동시에 파일을 업로드할경우 어떻게 대표사진을 처리할것인지에 대해서도 고민해야될것 같습니다.
현재에는 비동기처리가 제일 먼저 되는쪽이 0번째 변수로 들어가 대표사진이 되는것이라 추측하고 있습니다,,
There was a problem hiding this comment.
비동기로 동작하는다는 것이 image 배열에 업로드한 순서대로 저장되지 않는다는 말씀이신가요? 어떤 문제인지 잘 이해가 안되네요..
There was a problem hiding this comment.
파일 여러개를 한번에 업로드 할경우 첫번째 선택한 사진이 0번 인덱스로 가지 않는 경우가 있습니다.
위에 대표 이미지 수정 로직 추가함으로써 어느정도 해결된것 같습니다.
| }; | ||
|
|
||
| /* HashTag 배열에 추가 or 삭제 */ | ||
| const CheckedItemHandler = (data: string, checked: boolean) => { |
There was a problem hiding this comment.
이 부분에서 비동기? 문제로 체크 후 같은 항목을 다시 체크하면 바로 반영이 안되고 한번 더 클릭해야 적용이 되는 것 같습니다.
이 부분을 useEffect로 적용해보는 건 어떨까요?
(그리고 체크가 3개 초과할 경우 알림 처리 로직이 필요할 것 같습니다.)
There was a problem hiding this comment.
두 번 체크해야 하는 문제만 해결하면 될 것 같습니다!
There was a problem hiding this comment.
e.preventDefault() 로 인해 기존 체크박스 기능을 막아서 생긴 오류였습니다. 체크 3개 초과할 경우 알림 로직과 함께 수정하였습니다.
| height: "300px", | ||
| }} | ||
| > | ||
| <Editor |
There was a problem hiding this comment.
입력 데이터가 많아지면(여러줄) 글자가 에디터 영역을 벗어납니다.
영역을 벗어나면 스크롤 형식을 추가해야할 것 같습니다.
