Skip to content

Conversation

@cskime
Copy link
Collaborator

@cskime cskime commented Aug 1, 2025

요구사항

기본

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

심화

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

주요 변경사항

  • /additem 주소의 상품 등록하기 page를 구현합니다.
  • 이번 미션과 관련된 일부 component들을 styled-components를 사용해서 다시 구현했습니다.
  • 새로 추가하거나 수정한 component들의 파일 이름을 kebab-case로 변경했습니다.

스크린샷

Desktop Tablet Mobile
sprint6-desktop sprint6-tablet sprint6-mobile

멘토에게

  • cd8d67e commit의 수정사항과 관련해서 질문이 있습니다.
    • Mobile에서 상품 이미지 등록 input(AddingItemImageInput)과 이미지 preview(AddingItemImage)가 화면 가능한 영역의 50%를 차지하도록 구현했습니다.
    • 이 때, AddingItemImageInputAddingItemImage의 너비는 동일하게 맞춰지는데 AddingItemImageInput의 높이가 약간 커지는 문제가 있습니다. (왼쪽 회색 box의 높이가 약간 큽니다.)
      image
    • CSS를 계속 바꿔봤는데 왜 이만큼 차이가 생기는건지 모르겠습니다 ㅠ

cskime added 26 commits July 29, 2025 19:46
@cskime cskime requested a review from kiJu2 August 1, 2025 05:12
@cskime cskime self-assigned this Aug 1, 2025
@cskime cskime added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Aug 1, 2025
@cskime cskime changed the base branch from main to React-김참솔 August 1, 2025 05:13
@kiJu2
Copy link
Collaborator

kiJu2 commented Aug 4, 2025

스프리트 미션 하시느라 수고 많으셨어요.
참솔님 학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

@kiJu2
Copy link
Collaborator

kiJu2 commented Aug 4, 2025

cd8d67e commit의 수정사항과 관련해서 질문이 있습니다.
Mobile에서 상품 이미지 등록 input(AddingItemImageInput)과 이미지 preview(AddingItemImage)가 화면 가능한 영역의 50%를 차지하도록 구현했습니다.
이 때, AddingItemImageInput과 AddingItemImage의 너비는 동일하게 맞춰지는데 AddingItemImageInput의 높이가 약간 커지는 문제가 있습니다. (왼쪽 회색 box의 높이가 약간 큽니다.)


오호 그렇군요.
제가 확인이 어려워서 그런데 혹시 배포링크가 어떻게되는지 알 수 있을까요 ?

Copy link
Collaborator

Choose a reason for hiding this comment

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

굿굿 개발 환경과 운영 환경을 따로 분리하셨군요 ! 😉👍

}
`;

function Item({ imageUrl, title, price, likeCount }) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

(제안) Item보다는 ProductCard와 같이 좀 더 명확한 이름을 쓰는건 어떨까요?

Item이라고 쓰여있으니 어떤 UI인지 헷갈릴 것 같아서 조심스레 제안드려봅니다 ~! 😊

Copy link
Collaborator Author

@cskime cskime Aug 4, 2025

Choose a reason for hiding this comment

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

스프린트 미션에서 /additem 이라는 path를 사용하는걸 보고 일관성을 고려해서 Item 이라는 이름을 프로젝트 전체에서 사용했는데요. 혹시 Product 라는 이름을 사용했을 때 path와 다른 용어를 사용해서 생기는 단점은 없을까요?

Comment on lines +52 to +65
const handleTagKeyUp = (event) => {
if (event.key !== "Enter") return;

const tagName = event.target.value.trim();
if (tagName.length === 0) return;

if (tags.includes(tagName)) return;
setTags([...tags, tagName]);

setInputValues({
...inputValues,
tag: "",
});
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

크으.. 코드가 정말 가독성 좋게 잘 짜여져있네요.

"만약, 엔터가 아닐 경우 함수를 종료한다.", "만약, trim 후 빈 값이면 함수를 종료한다", "만약, 기존 태그와 중복이라면 함수를 종료한다"...
자칫 if 블록 지옥이 될 수 있었는데 조기에 종료함으로써 가독성을 참 좋게 작성하셨네요 👍👍

@kiJu2
Copy link
Collaborator

kiJu2 commented Aug 4, 2025

수고하셨습니다 참솔님 !
가독성 높은 이벤트 핸들링 코드와 환경 분리, 스타일링 세심한 처리까지 인상적이었어요.
특히 조건문에서 조기 종료로 흐름을 깔끔하게 정리한 점은 정말 좋았습니다.

참솔님은 앞으로도 쭉 성장하시길거라 생각합니다 ! 👍👍

@kiJu2 kiJu2 merged commit 3bd9e3b into codeit-bootcamp-frontend:React-김참솔 Aug 4, 2025
@cskime cskime deleted the React-김참솔-sprint6 branch August 7, 2025 04:35
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