[김서연] Sprint5 #180

Seon-K · 2025-05-05T09:48:46Z

요구사항

배포 사이트
https://sprint-mission5-pandamarket.netlify.app/

기본

중고마켓

중고마켓 페이지 주소는 “/items” 입니다.
페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
'상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

중고마켓 반응형

베스트 상품
- Desktop : 4개 보이기
- Tablet : 2개 보이기
- Mobile : 1개 보이기
전체 상품
- Desktop : 12개 보이기
- Tablet : 6개 보이기
- Mobile : 4개 보이기

심화

페이지 네이션 기능을 구현합니다.

스크린샷

PC

태블릿

모바일

멘토에게

로그인, 회원가입 페이지 기능 구현은 아직 구현하지 못했습니다.
메인페이지에서 모바일 사이즈 반응형이 적용되지 않고 있는데, 원인을 모르겠습니다.
header를 sticky로 고정해두었는데, 모바일에서는 적용되지 않는 이유를 모르겠습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

- 주요 페이지 라우팅 설정 (Home, Login, Signup ... ) - 폴더 구조 정리 (componenets, pages, style) - 컴포넌트 폴더 생성 (Auth, Home-(Banner, Header, ContentSection ...)) - 이미지 파일 불러오기

이름 수정

…-Sprint-Mission into React-김서연-sprint5

Chore: 파일명 수정

GANGYIKIM

서연님 5번째 미션 제출 고생하셨습니다!
기존의 작업하신 페이지들도 옮기시느라 시간이 많이 걸리셨을 것 같은데 대단합니다!
이는 필수 사항은 아니니 시간 되실때 마무리하시면 좋겠습니다.

메인페이지에서 모바일 사이즈 반응형이 적용되지 않고 있는데, 원인을 모르겠습니다.: 제가 봤을 때는 css에서 모바일 디자인 관련 코드가 없어보여요. 예를들어 content-card의 경우도 배포해주신 사이트에서 확인했을 때는 모바일 화면에서도 width가 67.6rem을 가지게 작업되어 있네요! 다만 이는 지금 요구사항의 필수 구현 사항은 아니니 추후 시간되실때 수정해보세요.
header를 sticky로 고정해두었는데, 모바일에서는 적용되지 않는 이유를 모르겠습니다.: 이 문제는 mdn의 문서를 읽어보시면 이해하시는데 도움이 되실거에요. 우선적으로 이유를 말씀드리자면 모바일일때 body 에 주신 overflow-x 때문입니다~

GANGYIKIM · 2025-05-09T05:57:49Z

public/ic_sort.svg

💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다.
따라서 공백 구분시 _와 - 중 하나만 사용하셔서 같은 네이밍 룰을 따르시는 것을 추천드려요~

GANGYIKIM · 2025-05-09T05:58:37Z

src/App.jsx

💬 여담
React Router를 사용하고 계신데 향후 라우트가 많아지면 Route들을 별도의 파일로 분리하면 App 컴포넌트가 더 깔끔해지고, 라우트 관리도 쉬워집니다.

https://reactrouter.com/start/data/routing

GANGYIKIM · 2025-05-09T06:00:46Z

src/components/Item/Banner.jsx

💊 제안
Banner라는 컴포넌트 명보다 Header가 더 적절할 것 같아요. 일반적으로 Banner는 광고영역을 의미합니다.

GANGYIKIM · 2025-05-09T06:01:03Z

src/components/Item/Banner.jsx

+                <NavLink to="/community" style={getLinkStyle}>
+                  자유게시판
+                </NavLink>


👍 칭찬
NavLink 쓰신 거 좋아요!

GANGYIKIM · 2025-05-09T06:01:48Z

src/components/Item/Banner.jsx

+            <Link className="item-logo" to="/">
+              <img src={logo} alt="판다마켓 로고 이미지" />
+            </Link>
+            <Link className="item-logo-text" to="/">
+              <img src={logo_title} alt="판다마켓" />
+            </Link>


💊 제안
아래가 더 적절한 구분일 것 같아요~

Suggested change

<Link className="item-logo" to="/">

<img src={logo} alt="판다마켓 로고 이미지" />

</Link>

<Link className="item-logo-text" to="/">

<img src={logo_title} alt="판다마켓" />

</Link>

<Link to="/">

<img className="item-logo" src={logo} alt="판다마켓 로고 이미지" />

<img className="item-logo-text" src={logo_title} alt="판다마켓" />

</Link>

GANGYIKIM · 2025-05-09T06:19:45Z

src/components/Item/AllItems.jsx

❗️ 수정요청
상품 검색 기능이 구현되지 않은 것 같아요! 추가 구현해주시면 더 좋겠네요~

GANGYIKIM · 2025-05-09T06:23:29Z

src/components/Item/ItemCard.jsx

+        />
+        <div className="item-card-description">
+          <span className="item-name">{item.name}</span>
+          <h2 className="item-price">{item.price}</h2>


💊 제안
금액의 경우 (,)를 통해 단위가 구분되도록 아래처럼 작성해주세요!

Suggested change

<h2 className="item-price">{item.price}</h2>

<h2 className="item-price">{item.price.toLocaleString()}</h2>

GANGYIKIM · 2025-05-09T06:26:36Z

src/components/Item/ItemList.jsx

+function ItemList({ items, className }) {
+  return (
+    <div className={className}>
+      {items?.map((item) => (
+        <ItemCard key={item.id} item={item} className={className} />
+      ))}
+    </div>


💊 제안
ItemList에서 className props를 받아 이를 div에도 넘기고 ItemCard에도 넘기는 형태는 좀 헷갈리는 것 같아요!
만약 이렇게 받으셔야 한다면 prop명을 더 자세하게 적으시고 wrapperClassName, className 이렇게 따로 받으시는 것을 추천드려요.

GANGYIKIM · 2025-05-09T06:28:52Z

src/components/Item/component/Dropdown.jsx

+            <li
+              key={option.value}
+              className="dropdown-item"
+              onClick={() => handleOptionClick(option.value)}
+            >
+              {option.label}
+            </li>


❗️ 수정요청
이런 클릭 가능한 요소의 경우 버튼을 사용해주세요. 더 적절한 태그가 있는데 이미지 태그에 onClick 을 주게되면 button에게 기대하는 동작을 제대로 수행하지 못합니다!

Suggested change

<li

key={option.value}

className="dropdown-item"

onClick={() => handleOptionClick(option.value)}

>

{option.label}

</li>

<li

key={option.value}

className="dropdown-item"

>

<button type="button" value={option.value} onClick={handleOptionClick}>{option.label}</button>

</li>

위에처럼 button 태그로 바꾸시고 onClick 시 event 객체에서 button 태그의 value를 받아오는 방식으로 구현하시는 것을 추천드려요!

GANGYIKIM · 2025-05-09T06:40:46Z

src/components/Item/AllItems.jsx

+  useEffect(() => {
+    window.addEventListener("resize", debouncedResize);
+
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+      debouncedResize.cancel();
+    };
+  }, [debouncedResize]);


💊 제안
React 공식문서의 useState 주의사항을 보시면 setState를 통해 넣어준 값이 기존 값과 동일한 경우, 렌더링을 유발하지 않습니다.
따라서 리렌더링을 막기위해 debounce를 쓰실 필요가 없어보입니다~

https://ko.react.dev/reference/react/useState#setstate-caveats

Seon-K added 30 commits March 26, 2025 10:50

chore: CRA관련 파일 삭제

11e681d

chore: vite 환경 세팅

12fce32

regactor: Home/Banner 중첩 <header> 태그 삭제 및 Home <header> 태그 className 적용

038e829

rename: Home.css → home.css

b9bc2f4

chore: Auth 컴포넌트 구조 및 초기 세팅

bc34d3e

feat(auth): 로그인/회원가입 페이지 정적 UI 구현

bceb3e2

feat: 아이템 페이지 헤더 (Banner) & 베스트 상품 (BestItem) 구현

71142e7

chore(BestItem): 불필요한 주석 삭제

807f048

feat: AllItem 컴포넌트 정렬 기능 구현

693ffd0

Banner.css 이름 변경 및 위치 이동 & getPageSize() 함수 생성 및 PageNation 컴포넌트 생성

3a4b1af

style: Itemcard, ItemList, Item 스타일 추가

7fb5159

style: AllItem 스타일 추가

4df8044

Feat: 화면 사이즈 이벤트 debouce 함수 적용

b0ea768

Feat: 화면 사이즈 감지 이벤트 추가 및 debouce 함수 적용

b69e91b

Refactor: 베스트 상품과 전체 상품의 카드 크기 구분하여 적용

78b90b9

Refactor: 베스트 상품과 전체 상품의 카드 크기 구분하여 적용

b1be94b

Feat: ItemList 반응형 적용

d6ac7a3

Chore: lodash 라이브러리 설치

cbac850

Feat: 여백 반응형 적용

b7c25f5

Feat: 페이지 네이션 기능 추가 및 css 파일 생성

59fe05a

Refactor: 반응형 카드 높이 수정

2b966ab

Refactor: 반응형별 breakpoint 조정

f6dbb41

Refactor: currentBlock을 추가하여 한 번에 5페이지씩 보이도록 고정

4fa2961

PageNation 스타일 추가

613c36c

Chore: Dropdown 아이콘 추가

b1b74c6

Feat: ItemCard cursor pointer 추가

38788ac

Feat: Dropdown 컴포넌트 구현 및 AllItem header 반응형 적용

009a1ef

Feat: 메타 태그 수정

d863fde

Rename Home.css to home.css

c9b15ff

이름 수정

Seon-K added 6 commits May 5, 2025 18:15

Chore: DropDown 경로 수정

413e3cb

Merge branch 'React-김서연-sprint5' of https://github.com/SeoYeonK-04/15…

4fa41a4

…-Sprint-Mission into React-김서연-sprint5

Chore: 파일명 수정 및 재할당 변수 let으로 선언

0a927aa

Refactor: 재할당 변수 let으로 선언

4793f49

Rename DropDown.jsx to Dropdown.jsx

248bad7

Chore: 파일명 수정

Rename DropDown.css to Dropdown.css

00afeae

Chore: 파일명 수정

Seon-K requested a review from GANGYIKIM May 5, 2025 09:48

Seon-K self-assigned this May 5, 2025

Seon-K added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 5, 2025

Seon-K added 2 commits May 5, 2025 18:57

Fix: SPA 라우팅을 위한 Netlify 리디렉트 설정 추가

a8e991d

Refactor: 모바일 사이즈 dropdown 위치 조정

1ce9e25

GANGYIKIM approved these changes May 9, 2025

View reviewed changes

GANGYIKIM merged commit 3889458 into codeit-bootcamp-frontend:React-김서연 May 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[김서연] Sprint5 #180

[김서연] Sprint5 #180

Uh oh!

Seon-K commented May 5, 2025

Uh oh!

GANGYIKIM left a comment

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

GANGYIKIM May 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<h2 className="item-price">{item.price}</h2>
	<h2 className="item-price">{item.price.toLocaleString()}</h2>

[김서연] Sprint5 #180

[김서연] Sprint5 #180

Uh oh!

Conversation

Seon-K commented May 5, 2025

요구사항

기본

심화

스크린샷

멘토에게

Uh oh!

GANGYIKIM 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants