Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[정원식] Sprint6 #192

Conversation

wonsik3686
Copy link
Collaborator

@wonsik3686 wonsik3686 commented Jun 28, 2024

요구사항[기본]

  •  상품 등록 페이지 주소는 “/additem” 입니다.
  •  페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
  •  상품 이미지는 최대 한개 업로드가 가능합니다.
  •  각 input의 placeholder 값을 정확히 입력해주세요.
  •  이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
  •  API를 통한 상품 등록은 추후 미션에서 적용합니다.

요구사항 [심화] [심화]

  •  이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
  •  추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.

스크린샷

image image image image

배포

@wonsik3686 wonsik3686 requested a review from wlgns2223 June 28, 2024 14:59
@wonsik3686 wonsik3686 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 28, 2024
function AddItems() {
const [values, setValues] = useState(INITIAL_VALUES);
const [initialPreview, setInitialPreview] = useState(undefined);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setInitialPreview가 사용되지 않고 있어요. 그래서 이 라인을 지우고 ImageFileInput 컴포넌트에서 preview 상태의 초깃값을 undefined로 해주면 될 것 같습니다.

function ImageFileInput({
className = '',
name,
value,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

value 보다는 어떤 상세한 변수명이 좋을 것 같습니다. 컴포넌트를 들여다 봤을때 이미지를 뜻하는거니까 productImage와 같이 좀 더 자세한 변수명을 사용해주세요.

<>
<div className="card-input-image-file">
<img
src={preview || ImgDeafault}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

디폴트 이미지 사용해주신 점 아주 좋습니다 !

<div className="wrapper-form-add-item">
<form className="form-add-item" onSubmit={handleSubmit}>
<div className="wrapper-input-form-add-item">
<label className="title-input-form-add-item">상품 이미지</label>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일반적인 제목을 나타낼 의도라면 p태그가 좀 더 적절하겠습니다 ㅎㅎ

if (!values.tags.includes(tag)) {
handleChange(
'tags',
values.tags.length > 0 ? [...values.tags, tag] : [tag]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

불변성을 잘 지켜주셨네요 !!

Comment on lines +72 to +76
<Button
text="등록"
onClick={handleSubmit}
isDisabled={!isAllValid}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

submit 역할을 하는 버튼이므로 form 태그 안에 위치하는게 어떨까요?

@wlgns2223
Copy link
Collaborator

스프린트 미션 수고하셨습니다 !!

@wlgns2223 wlgns2223 merged commit 417f694 into codeit-bootcamp-frontend:React-정원식 Jun 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants