React 김세환 sprint6 #52

CisThard · 2024-12-08T11:25:54Z

요구사항

기본 요구사항

공통

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

주요 변경사항

스크린샷

메인 페이지

중고마켓 페이지

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.
일부 마무리 되지 않은 작업들은 추후 진행하도록 하겠습니다.

seobew

세환님 고생 많으셨습니다!

네이밍 컨벤션 관련해서 좀더 신경써주시면 좋을것 같고,
나머지는 구현 못하신 부분 제외하고 깔끔하게 잘 작성해주신것 같아요 ㅎㅎ
몇가지 코멘트 달아놨으니 한번 확인 부탁드려요~

수고하셨습니다!

seobew · 2024-12-11T13:50:41Z

src/api/getProducts.js

+    page = 1, 
+    sort = "recent",
+    keyword = "",
+}


요런거 같은때 prettier 가 잘 잡아줍니다~

seobew · 2024-12-11T13:51:29Z

src/components/BestProducts.js

+
+export function BestProducts() {
+
+  const emptyHeart = require("../images/emptyHeart.png");


이렇게 정적인 파일은 렌더링 되기 위해 실행되는 함수 안보다는 위에 import문 아래에 넣어주는 것이 좋습니다!

seobew · 2024-12-11T13:52:57Z

src/components/BestProducts.js

+        setBestProducts(data);
+        data.forEach(product => {
+          if (!IsImage(String(product.images))) {
+            product.images = noImageAvailable;


여기서 넣어주기보다는 아래쪽에서 product.images ?? noImageAvailable로 넣어줘도 괜찮을것 같습니다!

seobew · 2024-12-11T13:55:05Z

src/components/Content.js

+
+export function Content() {
+
+  const content_image_01 = require("../images/Img_home_01.png");


js인데 변수는 웬만하면 camel case로 해주는게 좋을듯 합니다!
contentImage01 이런식으로요! 그리고 위에서 말씀드린대로 함수 밖에서 선언해주는게 좋습니다

seobew · 2024-12-11T13:55:28Z

src/components/DropDown.js

+    const [selectedOption, setSelectedOption] = useState(null);
+
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);


요런거는 setIsOpen((v) => !v) 요렇게 쓸수 있을것 같아요~

seobew · 2024-12-11T13:56:23Z

src/components/DropdownContent.js

+        );
+    }
+
+    return <p className="dropdown-no-options">옵션이 없습니다.</p>;


이걸 if (options.length == = 0) {
return
}

이런식으로 위에서 먼저 간단한 조건들에 대해서 처리하고 그 아래에서 리스트를 보여주는 로직을 넣어주는게 더 좋아보입니다

seobew · 2024-12-11T13:58:06Z

src/components/RegistrationForm.js

+      tags: product_tags
+    };
+
+    fetch("https://backend-c2ut.onrender.com/product", {


요런 api들은 따로 관리를 하고 함수만 호출하는 형태로 바꾸는게 더 좋을듯 합니다!

seobew · 2024-12-11T14:12:19Z

src/reset.css

reset.css 좋습니다 👍

seobew · 2024-12-11T14:13:10Z

src/utils/image.helper.js

+export const is_image = ["jpg", "jpeg", "png", "gif", "bmp"];
+
+export function IsImage(src) {
+  return is_image.includes(src.split(".").pop());


요거는 정규표현식 찾아보시면 더 깔끔하게 바꾸실수 있을것 같아요!

seobew · 2024-12-11T14:13:46Z

src/utils/image.helper.js

좋습니다 ㅎㅎ 이런 유틸성 헬퍼 파일을 따로 만들고 이름도 image.helper.js 라니!

CisThard added 6 commits November 30, 2024 00:58

feat: add navbar and footer

cab9639

feat: get api 추가, sort 후 데이터 가져오는 것 확인, gird로 UI 틀 정립

4dabf86

feat: tool bar 디자인 수정

60f6397

feat: 검색 기능 추가

77931f8

feat: pagenation 및 dropdown 추가

0b570b7

style: 전체 글꼴 변경, pagination 버튼 스타일 추가, 배경색 추가, navBar 하단 추가, 아이콘 간격 추가

bb01351

CisThard requested a review from seobew December 8, 2024 11:26

CisThard self-assigned this Dec 8, 2024

CisThard added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 완성은 아니지만 제출합니다... labels Dec 8, 2024

refactor: sprint5 코멘트 반영

c8dccb3

CisThard force-pushed the react-김세환-sprint6 branch from 78ad799 to b5d5281 Compare December 9, 2024 05:55

refactor: conflicts 해결

18b2804

CisThard force-pushed the react-김세환-sprint6 branch from f3eb26f to b5d5281 Compare December 9, 2024 06:25

feat: html/css에서 react로 마이그레이션

157c727

CisThard force-pushed the react-김세환-sprint6 branch from 1ce39d5 to 92ce525 Compare December 9, 2024 07:10

CisThard added 4 commits December 9, 2024 16:17

feat: 중고마켓 페이지 요구사항 완료

6e60adb

feat: 상품 등록 페이지 요구사항 완료

f45e1c7

style: NavBar 글꼴 제거

078e87c

refactor: 테스트 파일 제거

113950f

CisThard force-pushed the react-김세환-sprint6 branch from 92ce525 to 113950f Compare December 9, 2024 07:23

seobew approved these changes Dec 11, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 김세환 sprint6 #52

React 김세환 sprint6 #52

CisThard commented Dec 8, 2024

seobew left a comment

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024

seobew Dec 11, 2024


		export function BestProducts() {

		const emptyHeart = require("../images/emptyHeart.png");


		export function Content() {

		const content_image_01 = require("../images/Img_home_01.png");

React 김세환 sprint6 #52

Are you sure you want to change the base?

React 김세환 sprint6 #52

Conversation

CisThard commented Dec 8, 2024

요구사항

기본 요구사항

공통

프론트엔드 구현 요구사항

랜딩 페이지

중고마켓 페이지

상품 등록 페이지

심화 요구사항

상품 등록 페이지

유효한 조건

주요 변경사항

스크린샷

메인 페이지

중고마켓 페이지

멘토에게

seobew left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment