Skip to content

[안예진]sprint5 미션 제출#69

Open
yyejin00 wants to merge 13 commits intocodeit-sprint-fullstack:react-안예진from
yyejin00:react-안예진-sprint5

Hidden character warning

The head ref may contain hidden characters: "react-\uc548\uc608\uc9c4-sprint5"
Open

[안예진]sprint5 미션 제출#69
yyejin00 wants to merge 13 commits intocodeit-sprint-fullstack:react-안예진from
yyejin00:react-안예진-sprint5

Conversation

@yyejin00
Copy link
Collaborator

@yyejin00 yyejin00 commented Jan 14, 2026

프론트엔드 구현 요구사항

랜딩 페이지

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

멘토님께 질문있습니다!

페이지네이션이랑 심화 요구사항 하다보니까 오늘 프런트 ui를 못챙겼습니다. 이번에 hook이랑 util 나눠서 작성해봤습니다. 이렇게 작성하는 게 맞는지 멘토님께 피드백 받고 싶습니다. 감사합니다!
멘토님 혹시 이번 PR merge 해주실 수 있을까요?

@yyejin00 yyejin00 self-assigned this Jan 14, 2026
@yyejin00 yyejin00 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 진행중 아직 스프린트 미션 제출일이 아닙니다. 새로 커밋된 내용에 대해 코드리뷰 해주세요! (2주 이상의 스프린트 미션 중간점검 PR 제출시 사용합니다.) labels Jan 14, 2026
@yyejin00 yyejin00 requested a review from wseungjin January 14, 2026 13:13
@yyejin00 yyejin00 changed the base branch from basic to react-안예진 January 14, 2026 13:15
@yyejin00 yyejin00 added 최종제출 스프린트 미션 최종 제출 PR입니다. 코드리뷰 및 평가해주세요! and removed 진행중 아직 스프린트 미션 제출일이 아닙니다. 새로 커밋된 내용에 대해 코드리뷰 해주세요! (2주 이상의 스프린트 미션 중간점검 PR 제출시 사용합니다.) labels Jan 18, 2026
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
Copy link
Collaborator

Choose a reason for hiding this comment

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

eslint + prettier= biome

if (newData.image !== originalData.image) {
patchData.image = newData.image;
}
return patchData;
Copy link
Collaborator

Choose a reason for hiding this comment

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

{ title : newData.title !== originalData.title ? newData.title : undefined
content
}

const name = formData.get('name');
const description = formData.get('description');
const price = Number(formData.get('price'));
const tags = formData.get('tags').split(',');
Copy link
Collaborator

Choose a reason for hiding this comment

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

validation 있으면 좋겠음

console.log(data);
return data;
} catch (error) {
console.log(`[product get] - 에러발생${error.message}`);
Copy link
Collaborator

Choose a reason for hiding this comment

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

유의미하진 않은거같아요.
개발용으로는 괜찮아요.

다른 사람이면 근데 알수가 없어서 로깅을 확장하면 좋겠습니다.

<a href="/pages/faq.html">FAQ</a>
</div>
<div className={styles.social}>
<div target="_blank" href="https://facebook.com">
Copy link
Collaborator

Choose a reason for hiding this comment

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

herf인데 왜 div태그인가요?

<div className={styles.content_text}>
<span className={styles.highlight}>hot item</span>
<div className={styles.title}>
인기 상품을
Copy link
Collaborator

Choose a reason for hiding this comment

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

h1 h2

}
};
getProducts();
}, [currentPage, orderBy, pageSize]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

hook 빼기, 로딩, 에러 처리

orderBy,
});
setItems(list); // 첫렌더링이라서 아규먼트로 콜백함수를 사용할 필요없음.
setTotalCount(totalCount);
Copy link
Collaborator

Choose a reason for hiding this comment

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

{ list ,
totalCount
}

onPageChange,
}) => {
const totalPages = Math.ceil(totalCount / pageSize);
if (totalPages <= 1) return null;
Copy link
Collaborator

Choose a reason for hiding this comment

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

react invalid hook call 이슈 공부


const half = Math.floor(PAGE_WINDOW / 2);

let startPage = currentPage - half;
Copy link
Collaborator

Choose a reason for hiding this comment

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

let 지양

startPage = Math.max(totalPages - PAGE_WINDOW + 1, 1);
}

const pages = [];
Copy link
Collaborator

Choose a reason for hiding this comment

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

[]; 생성하면 렌더링되면서 계속 생성할 수 있어요.
array랑 object는 생성한다고 값이 아니고 주소에 가까워요.

cosnt a = [2]
const b = [2]

a === b ?

프리미티브 값 vs array,object 대해서 공부를 해보면 좋을거 같습니다.

}

const pages = [];
for (let i = startPage; i <= endPage; i++) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

map, foreach, reduce만 사용해주세요.

실수할 가능성이 높거든요.

Copy link
Collaborator

@wseungjin wseungjin left a comment

Choose a reason for hiding this comment

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

수고하셨습니다~

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

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 최종제출 스프린트 미션 최종 제출 PR입니다. 코드리뷰 및 평가해주세요!

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants