[이지현] Sprint5 #192

two678 · 2025-05-09T08:25:29Z

Repo: https://github.com/two678/15-Sprint-Mission/tree/React-%EC%9D%B4%EC%A7%80%ED%98%84-sprint5
배포사이트: https://pandamaket-jihyun.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개 보이기

심화

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

주요 변경사항

기존 바닐라 JS로 구현한 프로젝트를 모두 리액트로 마이그레이션 했습니다.
중고 마켓 페이지를 구현했습니다.
중고 마켓 페이지의 반응형을 구현하여 PC 사이즈, Tablet 사이즈, Mobile 사이즈일 때를 나눠서 구현했습니다.
페이지 네이션을 구현하여 페이지 버튼을 누르면 그에 맞게 전체 상품이 화면에 다르게 보여집니다.

스크린샷

베스트상품
전체상품

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.
pr 하니까 위에 The head ref may contain hidden characters: "React-\uC774\uC9C0\uD604-sprint5" 이렇게 뜨는데 브랜치에 한글 있어서 그런건가용?

[Fix] delete merged branch github action

…sprint1 [이지현] Sprint1

- 수정: 언어 속성 `<html lang="kr">`에서 `<html lang="ko">`로 변경 - 네비게이션 버튼을 `<button>`에서 `<a>` 태그로 변경하여 웹 접근성 개선 - 이미지 파일 2배수 추출 후 사이즈 조정 및 최적화

- div 태그로 구성된 아이콘들을 ul과 li 태그로 변경하여 의미론적 HTML 구조 개선

- 로그인 폼(이메일, 비밀번호 입력, 로그인 버튼) 추가 - 구글 및 카카오 간편 로그인 아이콘 추가 - 회원가입 페이지(signup.html) 기본 파일 추가

- 전체적인 레이아웃 및 색상 구성 - 아이콘 및 버튼 디자인 추가 - 로그인 폼 및 간편 로그인 섹션 스타일링

- signup.html 작성 및 레이아웃 구성 - 로그인/회원가입 페이지 공통 스타일 적용을 위한 auth.css 수정 - login.html 스타일에 맞춰 ID와 클래스 수정

- 비밀번호 입력란의 아이콘 클래스명을 hide_icon에서 pwd_icon으로 수정 - 클래스명 변경에 따라 관련된 CSS 스타일 적용

…sprint2 [이지현] Sprint2

…, KakaoBg.png -> Kakao.png)

- body에 정의하고 나머지는 inherit 적용

- AuthLayout.jsx로의 마이그레이션 작업 시작 - 로그인 및 회원가입 페이지 컴포넌트 구조 변경 - 일부 CSS 수정 및 반응형 디자인 적용

GANGYIKIM

지현님 5번째 미션 작업 고생하셨습니다.
기존 페이지도 옮겨주시느라 더 힘드셨을 것 같아요~
시간 되실때 정리를 조금 더 해주시면 좋을 것 같아요!
다음 미션도 화이팅입니다~

전체 상품 영역에서 페이지를 옮길때마다 로딩 컴포넌트가 보이게 되고, 전체 높이가 줄어들며 레이아웃이 덜컹거리네요~ 추후 로딩 영역의 높이를 기존 상품과 같게 해주시거나 skeleton UI로 해주시면 더 자연스러울 것 같아요.
pr 하니까 위에 The head ref may contain hidden characters: "React-\uC774\uC9C0\uD604-sprint5" 이렇게 뜨는데 브랜치에 한글 있어서 그런건가용?:
넵 맞습니다. github는 공식적으로는 영문, 숫자 및 몇가지 특문만으로 브런치명을 생성하기를 권장합니다. 문서

GANGYIKIM · 2025-05-13T00:50:14Z

src/pages/Items/index.jsx

+import BestItems from "./components/BestItems";
+import AllItems from "./components/AllItems";


💊 제안
다른 곳에 배럴 파일을 만드신 것처럼 components 폴더에도 배럴 파일을 만드시면 구조가 통일감 있고 더 좋을 것 같아요.

GANGYIKIM · 2025-05-13T02:24:01Z

src/pages/Items/components/BestItems/index.jsx

+        <ul css={BestItemsGridContainer}>
+          {displayItems.map((item) => (
+            <li key={item.id}>
+              <article css={ItemsContainer}>


💊 제안
추후 상세 페이지 제작시 이동할 수 있게 link 태그로 바꿔주세요~

GANGYIKIM · 2025-05-13T02:42:10Z

src/App.jsx

👍 칭찬
레이아웃에 따라 라우트 구성하신 것 좋습니다~

GANGYIKIM · 2025-05-13T04:17:17Z

src/api/axios.js

+);
+
+// 응답 인터셉터
+baseAPI.interceptors.response.use(


💬 여담
axios의 interceptor 를 이용해서 실패한 요청에 대한 재시도를 하게 구현하신 점 좋아요.
추후 react-query를 배우시게 되면 이러한 처리를 라이브러리에서 자동으로 해주게 되니 지금 구현해보신 것이 그때 도움이 되실거에요~
axios를 사용할때 재시도 로직에 대해 자세히 적은 글을 첨부하니 나중에 읽어보시면 더 좋겠네요.

https://dev.to/scrapfly_dev/how-to-retry-in-axios-5e87

GANGYIKIM · 2025-05-13T04:25:21Z

src/components/Button/index.jsx

+  ${disabled &&
+  css`
+    background-color: var(--gray400);
+  `}


💊 제안
button이 disabled 일 경우, disabled를 인자로 받아 조건부 렌더링을 하시기 보다 &:disabled 로 하시는 것이 더 적절할 것 같아요.
disabled, hover 등의 css로 관리 가능한 상태들은 props보다 css 를 이용해 관리해주세요.

GANGYIKIM · 2025-05-13T04:37:25Z

src/pages/Items/components/AllItems/index.jsx

+  const getSortedItems = () => {
+    if (!Array.isArray(items)) return [];
+
+    const itemsCopy = [...items];
+
+    if (sortOption === "recent") {
+      // 최신순 정렬 (ID 기준으로 내림차순)
+      return itemsCopy.sort((a, b) => b.id - a.id);
+    } else if (sortOption === "favorite") {
+      // 좋아요순 정렬
+      return itemsCopy.sort((a, b) => b.favoriteCount - a.favoriteCount);
+    }
+
+    return itemsCopy;
+  };


❗️ 수정요청
프론트에서 sortOption 값에 따라 상품 요소를 정렬하도록 작성하셨는데, 이렇게 되면 전체 상품 목록에서 정렬되는 것이 아니라, 불러온 데이터 내에서 정렬하는 것이라 의도한 바와 다르게 동작할거에요!
이런 경우 Products api의 orderBy param을 통해 구현하셔야 합니다.

GANGYIKIM · 2025-05-13T04:38:33Z

src/hooks/useProducts.js

+
+const useProducts = (page = 1, pageSize = 10, orderBy = "recent") => {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);


💊 제안
boolean 타입을 추론할 수 있는 isLoading을 추천드려요~

GANGYIKIM · 2025-05-13T04:40:48Z

src/pages/Items/components/AllItems/index.jsx

💊 제안
하나의 파일이 너무 길어 가독성이 많이 떨어집니다~
컴포넌트를 더 분리하시고 로직도 분리하시면 좋겠네요. 지금의 경우 현 파일에서 header, product 관련 코드, pagination 등 모든 것을 관리하고 있어 파악이 어렵습니다~

GANGYIKIM · 2025-05-13T04:41:43Z

src/pages/Items/components/AllItems/index.jsx

+
+function AllItems() {
+  const { isMobile, isTablet } = useScreenSize();
+  const [searchTerm, setSearchTerm] = useState("");


💊 제안
요구사항에는 없었지만 상품 검색기능도 구현하시면 더 좋을 것 같아요!

GANGYIKIM · 2025-05-13T04:42:19Z

src/pages/Items/components/AllItems/index.jsx

+                  css={AllItemsSearchInput}
+                />
+              </div>
+              <div style={{ position: "relative" }} ref={sortMenuRef}>


❗️ 수정요청
꼭 필요한 경우가 아니라면 인라인 스타일 사용 지양해주세요~

hanseulhee and others added 30 commits October 10, 2023 14:15

reset

b2e37bd

Merge branch 'codeit-bootcamp-frontend:main' into main

6f8bbb0

fix: 머지 후 브랜치 삭제 github action 수정

e11e25f

env: workflows 폴더로 이동

212e864

Merge pull request #237 from hanseulhee/fix-github-actions

4dc5dd0

[Fix] delete merged branch github action

Feat: 전체 기능 구현 완료

8d022ce

Modify the path of pages

47033c1

Merge pull request codeit-bootcamp-frontend#21 from two678/Basic-이지현-…

fa5c54e

…sprint1 [이지현] Sprint1

refactor(images): 고해상도 이미지로 변경하고 파일명을 소문자로 통일, 코드 반영

229ff1c

refactor(logo): 불필요한 로고 파일 정리 후 폴더명 수정, 코드 반영

c6bd3f6

refactor: div 태그를 ul/li로 변경하여 목록 구조화

6f1e531

- div 태그로 구성된 아이콘들을 ul과 li 태그로 변경하여 의미론적 HTML 구조 개선

fix: 폰트 우선 순위 수정하여 올바른 폰트 적용

8c12e1f

style: reset.css 추가 및 home.css 스타일 초기화 적용

56ac645

feat: 상단 네비게이션바 고정 위치 변경 및 클래스명 global_nav로 수정(스크롤 시에도 최상단 유지)

a37e4c8

feat: 로그인 페이지 기본 HTML 구조 추가

1c167b3

feat: 로그인 페이지 로고 추가 및 로고 클릭 시 루트 페이지로 이동 기능 추가

78cb777

feat: 로그인 페이지 기본 레이아웃 및 회원가입 페이지 추가

2cf200a

- 로그인 폼(이메일, 비밀번호 입력, 로그인 버튼) 추가 - 구글 및 카카오 간편 로그인 아이콘 추가 - 회원가입 페이지(signup.html) 기본 파일 추가

feat: 로그인 페이지 UI 디자인 및 스타일 적용

60a5d1e

- 전체적인 레이아웃 및 색상 구성 - 아이콘 및 버튼 디자인 추가 - 로그인 폼 및 간편 로그인 섹션 스타일링

feat: signup.html 작성 및 로그인/회원가입 공통 스타일 수정

46cfdd1

- signup.html 작성 및 레이아웃 구성 - 로그인/회원가입 페이지 공통 스타일 적용을 위한 auth.css 수정 - login.html 스타일에 맞춰 ID와 클래스 수정

fix: 비밀번호 아이콘 클래스명 수정 (hide_icon → pwd_icon)

ba3f3e1

- 비밀번호 입력란의 아이콘 클래스명을 hide_icon에서 pwd_icon으로 수정 - 클래스명 변경에 따라 관련된 CSS 스타일 적용

Merge pull request codeit-bootcamp-frontend#56 from two678/Basic-이지현-…

dd9f4bd

…sprint2 [이지현] Sprint2

fix: 로고 이미지 깨짐 현상 수정 및 파일명 변경 (logo_1.png -> logo.png)

a6e66e5

rename: 로그인/회원가입 페이지에서 이미지 파일명 변경 및 코드 수정 (GoogleBg.png -> Google.png…

c9de9e2

…, KakaoBg.png -> Kakao.png)

feat: CSS 변수(auth.css -> variables.css) 분리 및 login, signup.html에 적용

08a33b6

style: font-family 상속 구조 개선

27fcacf

- body에 정의하고 나머지는 inherit 적용

fix: login.html, signup.html에 label 태그 추가하여 접근성 개선

5ae67a7

fix: 비밀번호 보이기/숨기기 아이콘을 button 요소로 변경

8a48ccc

fix: signup.html에서 회원가입 링크를 로그인 링크로 변경

e0edb69

fix: login.html, signup.html 에서 alt 태그 메시지 수정

c34cefe

two678 added 15 commits April 13, 2025 16:18

Docs: 완료된 체크리스트 항목 업데이트

39f0d27

Docs: README.md 업데이트

958c0bd

Refactor: 로그인/회원가입 페이지 마이그레이션 진행 중

492fb08

- AuthLayout.jsx로의 마이그레이션 작업 시작 - 로그인 및 회원가입 페이지 컴포넌트 구조 변경 - 일부 CSS 수정 및 반응형 디자인 적용

Refactor: 전체적인 폴더 구조 변경 및 파일 이동

dfe5d46

♻️ Refactor: Home 페이지 로고 반응형 수정

fea55bf

✨ Feat: 로고 사이즈 기능 추가 및 props 변경

fbb2162

💄 Style: 로그인 페이지 리액트로 마이그레이션 및 이모션 적용

2f1c680

♻️ Refactor: 비밀번호 페이지 마이그레이션 및 이모션 적용

3d0176a

✨ Feat: 검증 로직 분리

a66e67e

✨ Feat: 베스트 상품 구현

b14a3aa

✨ Feat: 전체상품 그리드 구현

4c7fbc1

✨ Feat: 전체 상품 컴포넌트 구현 완료

b3345ce

✨ Feat: 페이지 네이션 구현

343f553

✨ Feat: 페이지네이션 항상 5개씩 보이게 설정

ceeac1e

✨ Feat: 페이지네이션 props 수정

a0ef9de

two678 assigned two678 and GANGYIKIM and unassigned two678 and GANGYIKIM May 9, 2025

two678 requested a review from GANGYIKIM May 9, 2025 08:27

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

two678 added 6 commits May 9, 2025 19:37

📝 Dos: README.md 와 CHECKLIST.md 업데이트

4af7a85

💄 Feat: 홈 페이지 섹션 스타일을 이모션으로 마이그레이션 및 불필요한 SCSS 파일 삭제

0c00b11

💄 Styles: 홈페이지 헤더 스타일 이모션으로 변경

e026a41

💄 Style: 홈페이지 푸터 이모션 적용

91684f3

✨ Feat: public 폴더 생성 및 이미지 파일들 이동 (경로 수정)

206bdcb

💄 Style: 홈페이지 안에 내용 이모션 적용

d76f758

GANGYIKIM approved these changes May 13, 2025

View reviewed changes

GANGYIKIM merged commit a62c994 into codeit-bootcamp-frontend:React-이지현 May 13, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[이지현] Sprint5 #192

[이지현] Sprint5 #192

Uh oh!

two678 commented May 9, 2025 •

edited

Loading

Uh oh!

GANGYIKIM left a comment

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

GANGYIKIM May 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		import BestItems from "./components/BestItems";
		import AllItems from "./components/AllItems";

[이지현] Sprint5 #192

[이지현] Sprint5 #192

Uh oh!

Conversation

two678 commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

중고마켓

중고마켓 반응형

심화

주요 변경사항

스크린샷

멘토에게

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!

4 participants

two678 commented May 9, 2025 •

edited

Loading