[윤혜림] Sprint7 #258

y5037 · 2024-12-07T08:37:48Z

요구사항

기본

Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React를 사용합니다

상품 상세

상품 상세 페이지 주소는 "/items/{productId}" 입니다.
response 로 받은 아래의 데이터로 화면을 구현합니다.
favoriteCount : 하트 개수
images : 상품 이미지
tags : 상품태그
name : 상품 이름
description : 상품 설명
목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 "/items" 으로 이동합니다

상품 문의 댓글

문의하기에 내용을 입력하면 등록 버튼의 색상은 "3692FF"로 변합니다.
response 로 받은 아래의 데이터로 화면을 구현합니다
image : 작성자 이미지
nickname : 작성자 닉네임
content : 작성자가 남긴 문구
description : 상품 설명
updatedAt : 문의글 마지막 업데이트 시간

체크리스트 [심화]

모든 버튼에 자유롭게 Hover효과를 적용하세요.

스크린샷

멘토에게

이전 코드리뷰는 계속해서 반영중입니다.
코멘트 등록 / 수정 / 코멘트 페이지네이션 보류 되었습니다. 코드리뷰 전 구현 되면 커밋 하겠습니다.
https://nerim-pandamarket-react.netlify.app/items/226

1005hoon

혜림님! 항상 코드리뷰 내용들을 잘 반영해주시는게 눈에 띄네요
초반 코드리뷰때보다 실력이 많이 좋아지고 있는게 확 보입니다!
그리고 되게 사소한거 디테일을 엄청 잘 잡아주시네요 ㅎㅎ 이것도 정말 혜림님만이 지니고있는 역량이라고 생각해요.

이제 조금만 더 욕심내어본다면, 기능 구현이 커질수록 역할과 책임이 무너지는 부분들이 계속 생기는데요, 이런 부분들 조금 차근차근 해나가보면 어떨까요? 물론 쉽진않겠지만 혜림님은 이 과정이 이제 얼마 남지 않았다는 생각이 드네요 ㅎㅎ

고생 많으셨습니다!

1005hoon · 2024-12-11T05:14:05Z

package.json

    "react-responsive": "^10.0.0",
    "react-router-dom": "^6.28.0",
    "react-scripts": "5.0.1",
+    "react-timeago": "^7.2.0",


오 기능 구현에 필요한 라이브러리 탐색하는거 좋습니다

1005hoon · 2024-12-11T05:14:32Z

src/Api/api.js

api 디렉토리의 경우, 콤포넌트를 위한 디렉토리가 아닌것으로 생각되어요.
따라서 소문자로 경로 이름을 두면 어떨까요?

1005hoon · 2024-12-11T05:14:40Z

src/Api/api.js

-  const response = await fetch(
-    `https://panda-market-api.vercel.app/products?${query}`
-  );
+const BASE_URL = "https://panda-market-api.vercel.app";


상수로 관리하는거 너무 좋습니당

1005hoon · 2024-12-11T05:14:58Z

src/Api/api.js

+const BASE_URL = "https://panda-market-api.vercel.app";
+
+// 베스트/전체 상품 리스트
+async function getProductData(params = {}) {


default 값 주신거 너무 좋습니다 👍🏻

1005hoon · 2024-12-11T05:16:35Z

src/Api/api.js

 }

+// 디테일 상품 정보
+export async function getProductId(productId, setProductData) {


오, 우리 api 함수들의 역할을 다시 한번만 생각해볼까요?

우선 API에 둔 함수의 역할은 다음과 같이 생각되는데요

전달받은 인자값 또는 데이터를 서버에 전송하기 좋게 가공하기

서버에 네트워크 통신 전송하기

결과에 따라 오류를 던져주거나 전달받은 데이터를 반환해주기

이 상황에서 api함수들은 딱 위 작업만 진행을 하고, 화면에 보여질 데이터를 업데이트 해주는 setState액션은 콤포넌트와 가장 가까운 곳에서 작업을 진행해주어야 할 것 같아요!

1005hoon · 2024-12-11T05:23:25Z

src/Components/ProductDetail/InquiryRegister.js

UI와 UI기능은 되게 잘 구현하셨네요!
그럼 이제 유지보수성 / 코드 책임을 명확하게 두기 위해 문의하기와 문의 목록, 그리고 목록으로 돌아가기를 분리해보면 어떨까요?

1005hoon · 2024-12-11T05:23:45Z

src/Components/ProductDetail/ProductDetail.js

+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      // 해당 이벤트가 영역 밖이라면 케밥 버튼 비활성화
+      if (outRef.current && !outRef.current.contains(event.target)) {
+        setSelectBox(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [handleOptionClick]);


이런 디테일 신경쓰시는거 너무 좋네요

혜림님의 강점이라고 생각합니다

1005hoon · 2024-12-11T05:24:28Z

src/Components/ProductList/GeneralItemsList.js

1005hoon · 2024-12-11T05:25:23Z

src/Components/ProductList/BestListFilter.js

 import { useState, useEffect } from "react";
 import getProductData from "../../Api/api";
-import { useMediaQuery } from "react-responsive";
+import CalculatorMediaQuery from "../../utils/calculatormediaQuery";


class 또는 Component가 아닌 이상은 소문자로 시작하도록 작성해주세요!

이렇게 한번 3rd party module을 래핑해서 사용하신거 너무 좋습니다

1005hoon · 2024-12-11T05:26:23Z

src/Components/ProductList/GeneralSearchForm.js

y5037 added 24 commits December 4, 2024 16:38

chore: 콤포넌트 외의 파일들은 소문자로 수정

d15ab4e

refactor(mentor): 새로 생성한 utils 디렉토리로 이메일 유효성 검사 파일을 옮기고 파일명 소문자로 수정

fd53c0b

refactor(mentor): 테스트와 유지보수의 어려움을 최소화 하기 위해 유틸 함수로 추출

d6cadc1

chore: 개연성 없는 import 순서 및 직관적이지 않은 변수 또는 콤포넌트명 변경

eacf748

chore: refactor(mentor): 콤포넌트 분리 및 연관성 높은 파일명으로 수정

eaf7637

chore: 중고마켓의 미디어쿼리 utils로 분리

3def5b2

refactor(mentor): 상품등록 페이지를 상품리스트 페이지와 묶어 Route 처리

b442aff

refactor(mentor): GET API 쿼리 스트링 params로 받아 URLSearchParams 사용으로 변경

355d4d2

refactor(mentor): return 조건들을 더욱 명시적으로 수정

1319769

refactor(mentor): 코드의 의미를 명확히 전달하기 위해 의도를 명시하는 이름으로 변경

a993b6d

refactor(mentor): 페이지 번호 생성 로직의 가독성을 높이기 위해 헬퍼 함수로 분리

975819f

refactor(mentor): number 데이터 타입에서 바로 콤마 처리

eeb62ec

refactor(mentor): 사용되지 않는 prop 제거

67f70c0

refactor(mentor): 코드를 직관적으로 볼 수 있도록 컴포넌트로 분리

a9c496f

feat: 제품 상세페이지에서 상품 상세부분 API 구현

df03083

chore: 상품 디테일 페이지 옵션 메뉴 추가, 기능 구현X

645380e

chore: CSS 디렉토리 및 파일명 컴포넌트가 아니므로 소문자로 변경

2915b45

chore: 직관적인 파일명으로 변경

490ab08

chore: 전체 상품 리스트에 상품 디테일 페이지 링크 추가

085d86d

feat: 상품 이미지 src 에러 발생 시 기본 이미지 출력

6713da0

feat: 상품 디테일 페이지 코멘트 부분 API 출력

4204b23

feat: 상품 디테일 페이지 코멘트 없을 시 UI 추가

a93e213

test: API POST 접근 권한 없음 에러 발생(로그인 구현X)으로 상품 디테일 페이지 코멘트 등록하기 기능 구현 보류

96b9194

feat: 코멘트 수정하기 UI 추가

e02e998

y5037 changed the base branch from main to React-윤혜림 December 7, 2024 08:38

y5037 requested a review from 1005hoon December 7, 2024 08:38

y5037 added the 순한맛🐑 마음이 많이 여립니다.. label Dec 7, 2024

y5037 added 3 commits December 7, 2024 18:08

chore: 코멘트 섹션 CSS 누락건 추가

cf7c64c

chore: 렌더링 시 보이는 border가 UI적으로 미관상 좋지 않아 CSS 수정

e0e49be

chore: 상품 디테일 썸네일 CSS 수정

12f60a1

chore: 코멘트 API POST 구현 보류에 대한 주석 추가

05b878e

1005hoon approved these changes Dec 11, 2024

View reviewed changes

1005hoon merged commit 4920e65 into codeit-bootcamp-frontend:React-윤혜림 Dec 11, 2024

[윤혜림] Sprint7 #258

[윤혜림] Sprint7 #258

Uh oh!

Conversation

y5037 commented Dec 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

스크린샷

멘토에게

Uh oh!

1005hoon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

y5037 commented Dec 7, 2024 •

edited

Loading