Skip to content

Conversation

@choi-mk
Copy link
Collaborator

@choi-mk choi-mk commented Mar 13, 2025

요구사항

기본 요구사항

공통

  • Github에 스프린트 미션 PR을 만들어 주세요.
  • React, Express를 사용해 진행합니다.

프론트엔드 구현 요구사항

랜딩 페이지

  • HTML과 CSS로 구현한 랜딩페이지를 React로 마이그레이션하세요.
  • 랜딩 페이지 url path는 "/"로 설정하세요.

중고마켓 페이지

  • 중고마켓 페이지 url path를 "/items"으로 설정하세요.
  • 페이지 주소가 "/items" 일 때 상단내비게이션바의 "중고마켓" 버튼의 색상은 "3692FF"입니다.
  • 중고마켓 페이지 판매 중인 상품은 본인이 만든 GET 메서드를 사용해 주세요.
  • 다만 좋아요 순 정렬 기능은 제외해 주세요.
  • 사진은 디폴트 이미지로 프론트엔드에서 처리해주세요.
  • 베스트 상품 목록 조회는 구현하지 않습니다.
  • '상품 등록하기' 버튼을 누르면 "/registration" 로 이동합니다. ( 빈 페이지 )

상품 등록 페이지

  • PC, Tablet, Mobile 디자인에 해당하는 상품 등록 페이지를 만들어 주세요.
  • 상품 등록 url path는 "/registration"입니다.
  • 상품 등록은 본인이 만든 POST 메서드를 사용해 주세요.
  • 등록 성공 시, 해당 상품 상세 페이지로 이동합니다. (빈페이지)

심화 요구사항

프론트엔드 구현 요구사항

상품 등록 페이지

  • 모든 입력 input box에 빈 값이 있을 경우, 등록 버튼이 비활성화됩니다.
  • 태그를 입력한 후 엔터키를 누르면, 그 태그가 칩 형태로 쌓입니다.
  • 상품명, 상품 소개, 판매 가격, 태그에 대한 유효성 검사 Custom Hook을 만들어주세요. 유효성 검사를 통과하지 않을 경우, 각 input에 빨간색 테두리와, 각각의 Input 아래에 빨간색 에러 메시지를 보여주세요.
    유효한 조건
    • 상품명: 1자 이상, 10자 이내
    • 상품 소개: 10자 이상, 100자 이내
    • 판매 가격: 1자 이상, 숫자
    • 태그: 5글자 이내

링크

https://6-sprint-mission-fe-qe9c.vercel.app/

주요 변경사항

스크린샷

image
image
image
image

멘토에게

  • register 부분을 다 못해서 부족한 점이 많습니다 참고 부탁드립니다!
  • backend 부분은 따로 코드잇 백엔드 레포지토리에 올렸습니다.
  • 지난주 코드리뷰 해주신 부분도 아직 수정을 못했는데 최대한 빨리 수정하겠습니다!

@choi-mk choi-mk changed the title Sprint 6 [최민경] Sprint 6 Mar 13, 2025
@loquemedalagana
Copy link

register는 나중에 auth 들어가면 좀 더 복잡해지는데 우선 여기서는 딱 요구사항 만큼만 해
스크린샷 2025-03-19 오후 10 20 42
주세요!
그리고 버튼 css 적용 다 못하신거 맞죠?

@loquemedalagana
Copy link

스크린샷 2025-03-19 오후 10 21 19

이거 원래 일부러 세로 가운데 정렬하신건가요?

</App>
</BrowserRouter>
);
}

Choose a reason for hiding this comment

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

태빈님한테 동일한 리뷰 달아드렸어요.


경로를 직접 입력하는 방식이 직관적으로 보일 수 있지만, 유지보수성과 확장성을 고려했을 때 상수로 분리하는 것이 더 유리합니다.

1.1 유지보수 용이성

  • 특정 URL이 변경될 경우, 해당 경로를 사용한 모든 곳을 일일이 찾아 수정해야 합니다.

  • 상수로 관리하면 단 한 곳에서 수정하면 되므로, 유지보수가 쉬워집니다.

  • 예를 들어, community를 communities로 변경한다고 가정할 때, 상수를 사용하면 한 곳만 수정하면 되지만, 직접 입력하는 방식이라면 여러 곳을 변경해야 합니다.

1.2 일관성 유지

  • 프로젝트 내에서 같은 URL을 일관되게 사용할 수 있습니다.

  • 오타로 인한 버그를 방지할 수 있습니다.

1.3 가독성 향상

  • 경로를 상수로 분리하면 코드의 역할이 분명해집니다.

  • 라우트 설정과 실제 경로값이 분리되어, 전체적인 구조를 이해하기 쉬워집니다.

keyWord = "",
} = {}) => {
try {
validnum(page, "page");

Choose a reason for hiding this comment

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

숫자 검증 피드백 반영 잘 하셨어요!!

setTagInput(e.target.value);
}
};

Choose a reason for hiding this comment

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

나중에 타입스크립트 들어가면 form을 더 체계적으로 다루는 방법 배워볼거에요! 우선 팀 프로젝트 때 자세히 논의해봐요~

};

const handleKeyDown = (e) => {
if (e.key === "Enter" && tagInput.trim() !== "") {

Choose a reason for hiding this comment

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

여기에 뭔가 하나 빠진거같아요~ 무엇일까요?

className={
isSubmit
? styles["register-button"]
: styles["register-button-disabled"]

Choose a reason for hiding this comment

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

cursor: not-allowed; 추가해주세요!

return valid === "";
};
return { valids, validate };
};

Choose a reason for hiding this comment

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

파일명을 useValidation 으로 바꿔주세요.


export const useDevice = () => {
const [device, setDevice] = useState();
};

Choose a reason for hiding this comment

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

파일명을 useDevice로 바꿔주세요.

@loquemedalagana
Copy link

loquemedalagana commented Mar 19, 2025

css가 조금 부족하긴 합니다만, tawilnd 쓰시면 조금 편하실건데 내일 멘토링 시간때 논의해봐요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants