[신혜윤] 풀스택-FE-mission-6

[hyeyoonS]

요구사항

기본 요구사항

프론트엔드 구현 요구사항

공통

• Github에 위클리 미션 PR을 만들어 주세요.
• React를 사용해 진행합니다.

중고마켓 페이지

• 중고마켓 페이지 url path를 “/items”으로 설정하세요.
• '상품 등록하기' 버튼을 누르면 “/registration” 로 이동합니다. ( 빈 페이지 )

상품 등록 페이지

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

심화 요구사항

프론트엔드

상품 등록 페이지

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

구현 스크린샷

QA종합 의견

난이도

• 반응형은 어렵지 않았고, 등록 폼 관련해서 서버에 데이터를 보내는 것과 별개로 유효성 검사는 프론트에서 처리해야 해서 시간이 조금 걸렸어요!
• 태그 값을 칩으로 분리하고, 폼 제출시 태그 인풋이 아닌 [태그 칩 배열]로 보내는 데 시간이 걸렸어요!

---

분량

• 백엔드 구현과 동시에 진행하는 것으로 보여서, 분량은 적절한 것 같습니다.

---

의견

• 빈 값이 있을 경우 ‘필수 값입니다’ 라는 에러문구가 추가되거나 필드 제목 옆에 필수 값이라는 (*)표시가 있으면 어떨까요?.? 어차피 빈 값이 있으면 등록 버튼이 비활성화가 되긴 하지만,, 사용자의 입장에서 생각해보았습니다…~

• 미션6의 POST메소드를 사용하려면 토큰이 필요해서, 미션9에 있는 로그인&토큰 설정을 마쳐야 API호출이 가능합니다!

  • 그렇지 않으면 상품 등록도, 이미지 등록도 모두 401 unAuthorized 오류가 떠서, 미션6에서 api호출을 할 수가 없습니다,,!

  ⇒ 관련된 트러블 슈팅도 어렵습니다..!

  ⇒ 저는 우선 임시로…. 토큰 설정을 해서 POST메소드 잘 사용되는 것 까지 확인을 했는데요.. 토큰 설정은 모두 미션9 로그인 관련 요구사항을 모두 완료해야 하기 때문에.. 미션6의 요구사항 수정이 필요해 보입니다..!

• ↑ 위와 관련해서, 이미지 필드를 우선 제외하고(임의로 “임시 URL”지정했습니다), 등록 버튼 클릭시 콘솔로 내가 보내는 데이터를 확인하는 것은 가능합니다..! 하지만 anAuthorized로 반환되는 상황에서 바람직한 대처 방법은 아닌 것 같습니다 ㅠㅠ

    const sendData = {
      images: ["임시URL"],
      name: data.name,
      description: data.description,
      price: +data.price,
      tags: allTags,
    };
    
    console.log(sendData);

---

임시로 액세스토큰만 설정하고 리프레시토큰 설정을 아직 안 한 상태라 로그아웃이 너무 자주 되어서.. ㅠㅠ 미션9 토큰 설정 부분 구현 후에 이미지 첨부 API도 이어서 수정하도록 하겠습니다..!