[유동환] sprint5 #188

TopiaYu · 2025-05-08T17:12:57Z

요구사항

기본

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

베스트 상품

[x]Desktop : 4개 보이기
[x]Tablet : 2개 보이기
[x]Mobile : 1개 보이기
전체 상품
Desktop : 12개 보이기
[x]Tablet : 6개 보이기
[x]Mobile : 4개 보이기

심화

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

주요 변경사항

중고마켓 페이지 구현
반응형 구현

스크린샷

데스크탑

태블릿

모바일

멘토에게

페이지네이션은 아직 구현하지 않았습니다.
드롭다운은 select로 구현했습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

GANGYIKIM

동환님 5번째 리액트 미션 수고하셨습니다!
리액트로 작업하시는 것이 쉽지 않으셨을거에요.
그래도 요구사항을 다 구현하시고, 심화도 시도해보셔서 좋네요!
다음 미션들도 화이팅입니다~

다음에는 배포 주소도 같이 올려주시면 좋을 것 같아요!
sort 드롭다운도 디자인대로 구현해보시면 더 좋을 것 같아요.
전체 상품영역의 헤더가 모바일일 때 레이아웃이 변경되게 디자인 되어 있으니 추후 확인해보시고 수정하시면 좋겠습니다.

GANGYIKIM · 2025-05-12T07:46:38Z

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">


❗️ 수정요청

Suggested change

<html lang="en">

<html lang="ko">

GANGYIKIM · 2025-05-12T07:47:31Z

index.html

+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


💊 제안
유저가 알 수 있게 타이틀 태그를 수정해주시고 미션에서 추가하셨던 메타 태그도 추가하시면 더 좋을 것 같아요!

Suggested change

<title>Vite + React</title>

<title>판다마켓</title>

GANGYIKIM · 2025-05-12T07:51:51Z

src/App.jsx

+        <Header />
+
+        <Routes>
+          <Route path="/" element={<Main />} />


💊 제안
index 속성을 이용해 시작페이지라는 것을 더 명확하게 알 수 있게 하시는 것을 추천드립니다~

Suggested change

<Route path="/" element={<Main />} />

<Route index element={<Main />} />

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

GANGYIKIM · 2025-05-12T07:55:37Z

src/components/AllitemsStyle.js

💊 제안
emotions 문서에서 스타일 선언문들을 같은 파일에 둘 것을 권하고 있습니다~
공식 문서를 읽어보시고 이러한 방향도 고민해보세요!

https://emotion.sh/docs/best-practices#colocate-styles-with-components

GANGYIKIM · 2025-05-12T07:58:03Z

src/api/Api.js

@@ -0,0 +1,10 @@
+export async function getItems({ page=1, pageSize=100, orderBy="recent"}) {


❗️ 수정요청
pageSize의 default value가 너무 큰 것 같아요! 프론트에서 필요한 만큼만 불러오실거고 default value는 가장 많이 사용되는 값을 넣는 것이 좋으니 10정도를 추천드려요!

GANGYIKIM · 2025-05-12T08:04:40Z

src/components/BestItem.jsx

+                {bestItems.map((item) => {
+                    return <ItemList key={item.id} item={item}/>
+                })}                


💊 제안
순회를 돌며 단순히 jsx를 반환할 뿐이니 아래처럼 하시는게 가독성 측면에서 더 좋을 것 같아요.

Suggested change

{bestItems.map((item) => {

return <ItemList key={item.id} item={item}/>

})}

{bestItems.map((item) => <ItemList key={item.id} item={item}/> )}

GANGYIKIM · 2025-05-12T08:05:26Z

src/components/Header.jsx

+                            )}
+                        </Link>         
+                        <div css={NavlinkStyle}>
+                            <Link to={"/FreeBoard"} css={aTag}>자유게시판</Link>


❗️ 수정요청
사용하고 계신 라우팅 라이브러리에서는 네비게이션에서 사용되는 wrapping된 link 컴포넌트를 제공합니다~
이를 통해 해당 컴포넌트들에서 일반적인 요구사항을 더 쉽게 구현할 수 있고, 컴포넌트의 역할도 더 명확해지니
아래 문서를 읽고 수정해보시면 더 좋겠습니다.

https://reactrouter.com/api/components/NavLink

GANGYIKIM · 2025-05-12T08:06:03Z

src/components/ItemList.jsx

+
+/** @jsxImportSource @emotion/react */
+
+const ItemList = ({ item }) => {


💊 제안
product 라는 객체로 props를 받기보다 images, name... 이렇게 받으시는게 더 좋아보여요.
지금 해당 컴포넌트에서 다른 props를 받는것이 아니라서 객체로 받으실 필요가 없어보입니다~

// 추천하는 방식 const ExComponent = ({ images, name }) => { ... } // 아래의 경우 다른 props를 받기 때문에 객체로 묶어 받음 const ExComponent = ({obj, classname}) => { ... }

GANGYIKIM · 2025-05-12T08:06:30Z

src/components/ItemList.jsx

+                    alt={item.name} >
+                </img>
+                <p css={itemTitle}>{item.name}</p>
+                <p css={itemPrice}>{`${item.price}원`}</p>


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

Suggested change

<p css={itemPrice}>{`${item.price}원`}</p>

<p css={itemPrice}>{`${item.price.toLocaleString()}원`}</p>

GANGYIKIM · 2025-05-12T08:08:32Z

src/components/pages/Items.jsx

+    const handleLoad = async (order = orderBy) => {
+        const [best, all]= await Promise.all([
+            getItems({page:1, pageSize:4, orderBy: "favorite"}),
+            getItems({page:1, pageSize:10, orderBy: order}),
+        ]);
+        setBestItems(best.list);
+        setAllItems(all.list); 
+    }
+
+    useEffect(() => {
+        handleLoad(orderBy)
+    }, [orderBy])


❗️ 수정요청
베스트 아이템은 처음에 한번 불러온 후 다시 호출될 필요가 없습니다. 다만 지금 코드에서는 전체 상품을 재호출할때마다 다시 불러와지고 있으니 이를 수정하시면 좋겠습니다!

TopiaYu added 14 commits April 8, 2025 17:01

💎 리액트 시작

7e77755

Header, BestItem, AllItems.jsx 파일 추가

d71d578

헤더 완성, 루트에 색상파일 추가, 글꼴 추가

dda6c62

Link 태그 추가로 페이지 이동 가능

3ffe15a

중고마켓을 클릭하면 글자가 파란색으로 고정

f87be66

items api 추가

e8346cc

bestitem 완성

859a73b

전체상품 api 불러오기, 헤더부분 sticky로 변경

2c89d50

GlobalStyle.js 추가

07e31a1

ui 잡기 및 간단한 css 변경

156f149

최신순 좋아요순 구현

58ab480

반응형 구현

7227c15

pagination 폴더 생성

dd64bd4

상품 등록하기 link 추가

6ed49a3

TopiaYu self-assigned this May 8, 2025

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

TopiaYu changed the title ~~React 유동환 sprint5~~ [유동환] sprint5 May 8, 2025

TopiaYu added 3 commits May 9, 2025 11:24

@babel/plugin-syntax-dynamic-import 추가

8f0723c

Items 경로수정

1a66cd3

파일명 오류 수정

b858e6b

TopiaYu requested a review from GANGYIKIM May 9, 2025 02:49

GANGYIKIM approved these changes May 12, 2025

View reviewed changes

GANGYIKIM merged commit fab1fa9 into codeit-bootcamp-frontend:React-유동환 May 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[유동환] sprint5 #188

[유동환] sprint5 #188

Uh oh!

TopiaYu commented May 8, 2025

Uh oh!

GANGYIKIM left a comment

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<Route path="/" element={<Main />} />
	<Route index element={<Main />} />

		@@ -0,0 +1,10 @@
		export async function getItems({ page=1, pageSize=100, orderBy="recent"}) {


		/** @jsxImportSource @emotion/react */

		const ItemList = ({ item }) => {

	<p css={itemPrice}>{`${item.price}원`}</p>
	<p css={itemPrice}>{`${item.price.toLocaleString()}원`}</p>

[유동환] sprint5 #188

[유동환] sprint5 #188

Uh oh!

Conversation

TopiaYu commented May 8, 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