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 #42

Open
wants to merge 47 commits into
base: react-조형민
Choose a base branch
from

Conversation

paengdal
Copy link
Collaborator

@paengdal paengdal commented Nov 28, 2024

요구사항

기본 요구사항

공통

  • 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글자 이내

주요 변경사항

  • 없음

스크린샷

  • 없음

멘토에게

  • 여쭤봤던 form action 부분은 RegistrationForm.js에 있습니다. 🥲

@paengdal paengdal requested review from sprint-edu and seobew and removed request for sprint-edu November 28, 2024 21:59
@paengdal paengdal self-assigned this Nov 28, 2024
@paengdal paengdal added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 진행 중 🏃 스프린트 미션 진행중입니다. labels Nov 28, 2024
@paengdal paengdal added 최종 제출 스프린트미션 최종 제출본입니다. and removed 진행 중 🏃 스프린트 미션 진행중입니다. labels Dec 2, 2024
Copy link
Collaborator

@seobew seobew left a comment

Choose a reason for hiding this comment

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

형민님 fe도 고생많으셨습니다.

여러 고민들이 보여서 좋네요!
몇개 코멘트 작성해놧으니 보시고 이해 안가시면 말씀해주세요!

수고하셨습니다~

@@ -0,0 +1 @@
16.20.2
Copy link
Collaborator

Choose a reason for hiding this comment

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

현재 lts 버전이 22인데, 16 버전을 쓰는 이유가 있으실까요??

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

어떤 에러가 나서 찾아보니 버전 관련 에러라고 해서..버전을 저렇게 낮췄더니 작동을 하길래 일단 해버렸습니닷… 😳

))}
</div>
);
// const MENU_TEXT = ['최신순', '좋아요순'];
Copy link
Collaborator

Choose a reason for hiding this comment

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

요 주석은 삭제해야할것 같습니다~

};

/**
* 포커스 아웃시 onBlur가 호출되었을 때 blur이벤트로 드롭다운 메뉴가 클릭되지 않는 문제 발생
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런 좋습니다 👍

: `좋아요순 ${isDropdownView ? '▲' : '▼'}`;

const handleButtonClick = () => {
setDropdownView(!isDropdownView);
Copy link
Collaborator

Choose a reason for hiding this comment

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

이거는 아래와같이 변경할수 있을것 같아요

setDropdownView((v) => !v)

onBlur={handleNameBlur}
placeholder="상품명을 입력해주세요"
/>
{!isValidName && <div className="error-message">1자 이상 10자 이내로 입력해 주세요.</div>}
Copy link
Collaborator

Choose a reason for hiding this comment

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

요런거 관련해서 react-hook-form 같은걸 써볼수 있습니다.
시간나실때 한번 보시면 좋습니다~
https://react-hook-form.com/

/>
{!isValidTag && <div className="error-message">5글자 이내로 입력해 주세요.</div>}
{tags.map((tag, i) => {
return <TagChip value={tag} key={i} onClick={handleChipClick} chipIdx={i} />;
Copy link
Collaborator

Choose a reason for hiding this comment

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

key에 index인 i를 넣는거는 좋지 않아서 tag를 넣거나 tag-${i}요렇게 넣는것도 좋을것 같아요~

<div>
<Header />
<main>
<RegistrationForm />
Copy link
Collaborator

Choose a reason for hiding this comment

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

form으로 빼신것 좋습니다 ㅎㅎ 현업에서도 form은 따로 빼서 작업 많이합니다!

@@ -0,0 +1,11 @@
import { useMediaQuery } from "react-responsive";

export default function useDeviceSize() {
Copy link
Collaborator

Choose a reason for hiding this comment

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

깔끔한 훅이네요 👍

@@ -0,0 +1,45 @@
import { useState } from "react";

function useCheckInputValid(validation) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런 커스텀 훅 시도 좋습니다 👍 위에서 얘기드린대로 react-hook-form을 쓰면 이런게 지원되는데,
이렇게 하나하나 구현해보는것은 좋습니다 ㅎㅎ

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