[#32] 홈화면 디자인 수정 by halionaz · Pull Request #88 · DevKor-github/repicka-web

halionaz · 2025-07-18T07:58:42Z

❗ 연관 이슈

홈 구현구현 #32

📌 내용

홈화면 정상화
바뀐 디자인 + 이상게시글에 대한 대응을 완료했음 www
- 토큰 너무 많으면 +로 표시해주기
- 대여료, 보증금, 판매가 다 표시 가능하게 해주기
- 좋아요/댓글 영역이랑 토큰 영역이랑 순서 바꾸기 (피그마엔 섞여있는데 디자이너님들이 이걸로 통일해달래요)
- 너무 긴 텍스트에 대한 대응 (사실 실제로 돌려보면 아직 깨져있을꺼임, 가격 상한 정해뿌면 해결될꺼에요)

☑️ 체크 사항 & 논의 사항

FigDesEql?

- 토큰 너무 많으면 +로 표시해주기 - 대여료, 보증금, 판매가 알잘딱 표시 - interaction area랑 token 개수 area랑 위치 변경

Copilot

Pull Request Overview

This PR updates the home screen design to match new design specifications, including layout adjustments, price display improvements, and better handling of long content and multiple tags.

Modified ItemCard layout with new dimensions and spacing
Updated price display to show rental/sale information in a vertical layout with styled labels
Reordered footer elements and added overflow handling for tokens with a "+N" indicator for excess items

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/libs/constants/index.ts	Adds MAX_PRICE constant for price validation
src/features/home/components/ItemCard/style.css.ts	Updates styling with new dimensions, layout changes, and overflow handling
src/features/home/components/ItemCard/index.tsx	Refactors price display logic and footer element ordering
src/common/components/Token/style.css.ts	Adds flexShrink: 0 to prevent token shrinking
src/common/components/ItemTokenList/index.tsx	Adds showAll prop and "+N" overflow indicator functionality

src/common/components/ItemTokenList/index.tsx

src/features/home/components/ItemCard/index.tsx

Copilot · 2025-07-18T07:59:36Z

src/libs/constants/index.ts

@@ -0,0 +1 @@
+export const MAX_PRICE = 999999;


The magic number 999999 should be documented with a comment explaining its purpose and why this specific value was chosen.

아하근데쓸일이있을까모르겠네

이걸 찾네

jw0202058 · 2025-07-18T12:25:13Z

좋아요 근데 난 토큰이랑 interaction이랑 위치 그대로인 게 더 마음에 드는데... 디멘 해야겠죠 걍

halionaz · 2025-07-19T04:16:44Z

AB 테스트

태그가 뒤
태그가 앞

그러게 피그마 상으로는 뒷태그버전 예뻐보였는데 +로 표시해주니까 앞태그도 예쁘네
디멘터가 답은 아닙니다 건의 ㄱㄱ

jw0202058 · 2025-07-19T04:53:39Z

앞태그가 더 자연스러운 것 같어

…ority to size n quality tokens

netlify · 2025-07-23T06:04:44Z

✅ Deploy Preview for repicka ready!

Name	Link
🔨 Latest commit	`bcf213e`
🔍 Latest deploy log	https://app.netlify.com/projects/repicka/deploys/68810cdcccf5c0000816f86c
😎 Deploy Preview	https://deploy-preview-88--repicka.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

jw0202058 · 2025-07-23T10:50:12Z

[netlify] 얘는 또 뭐야?

halionaz · 2025-07-23T12:29:49Z

@jw0202058 우리의 데브 배포를 담당해줄 새로운 친구
앞으로 dev 진행상황 https://repicka.netlify.app/ 여기서 확인 가능함

jw0202058 · 2025-07-23T15:24:45Z

src/common/components/ItemTokenList/index.tsx

-      ))}
+      {showTags.map(type => {
+        // 기타는 표시 X
+        if (type === 'COLOR_OTHER' || type === 'PRODUCT_OTHER') return null;


이런 게 참 귀찮아

ㅇㅈ 코드가 더러워짐

jw0202058 · 2025-07-23T15:30:29Z

src/features/home/components/ItemCard/index.tsx

+            {isRental && (
+              <div className={s.PriceItem}>
+                <label>대여</label>
+                <p>{data.rentalFee.toLocaleString()}원</p>
+                <p>
+                  <label>보증금</label>
+                  {data.deposit.toLocaleString()}원
+                </p>
+              </div>
+            )}
+            {isSale && (
+              <div className={s.PriceItem}>
+                <label>판매</label>
+                <p>{data.salePrice.toLocaleString()}원</p>
+              </div>
+            )}


이 부분 컴포넌트 따로 빼서 쓰면 더 깔끔하지 안ㅎ을까 하는 생각을 하는데 ㅓㅇ떻게 생각하시나요

아주동의합니두

jw0202058 · 2025-07-23T15:33:52Z

src/common/components/ItemTokenList/index.tsx

+    ...(itemInfo.size ? [itemInfo.size] : []),
+    ...(itemInfo.quality ? [itemInfo.quality] : []),
+    ...(itemInfo.color ? [itemInfo.color] : []),
+    ...(itemInfo.tradeMethods || []),


여기 코드 겁나 궁금하다 설명해주면 좋겟다

... < 배열 풀어헤치는 js 문법

그래서 그냥 itemInfo가 가지고 있는 속성들이 다 각자 배열로 되어있는데 얘를 뜯어서 tags라는 배열에 탈탈 털어넣는 로직임

Props에서 옵셔널로 itemInfo 속성을 받고 있어서 각 속성이 undefined일 수도 있음

transactionTypes, productTypes, tradeMethods 이런 애들은 배열이어서 만약에 undefined면 ...[] 요렇게 해서 빈배열을 언박싱하는 식으로 사용 가능함 (tags에 아무것도 안들어감)

근데 문제는 color, quality, size는 단일 타입이어서 undeifined일때 기존처럼 써버리면 그냥 tags 배열에 undefined가 들어가버리게 됨
그러면 이제 아래 tsx 코드에서 type에 undefined가 들어가게 돼서 서비스 멸망..

그래서 위에 배열 타입들이랑 똑같이 쓰기 위해서
...(itemInfo.size ? [itemInfo.size] : []) 요런식으로 써서 size 값이 있으면 size를 한번 포장한 애를 언박싱해서 tags에 넣도록 동작하고,
undefined면 그냥 빈 상자를 언박싱해서 tags에 넣도록 동작하게 했삼

뭔말알?

음~ 아~ 친절한 설명 감사합니다

나아는사람강다니엘닮은이모급 설명이었는데 이해한거 맞아요?

어이없네 이해했어요 진짜로

jw0202058

LGTM 👍 (따라 하기)

jw0202058 · 2025-07-23T16:51:55Z

src/features/home/components/ItemCard/index.tsx

-              <p>{data.deposit.toLocaleString()}원</p>
-            </div>
+            {isRental && <PriceToken price={data.rentalFee} deposit={data.deposit} />}
+            {isSale && <PriceToken price={data.salePrice} />}


좋아요 아주 속이 다 시원해

fix(design): 디자인 수정수정

a893746

- 토큰 너무 많으면 +로 표시해주기 - 대여료, 보증금, 판매가 알잘딱 표시 - interaction area랑 token 개수 area랑 위치 변경

halionaz requested review from Copilot and jw0202058 July 18, 2025 07:58

halionaz self-assigned this Jul 18, 2025

Copilot AI reviewed Jul 18, 2025

View reviewed changes

fix(mod): thx copilot it's Fridaygit add . TCIF

14b23b0

halionaz added the 딴애들보다먼저봐주세요 먼저 처리해야 하는 PR label Jul 18, 2025

halionaz added 2 commits July 19, 2025 16:01

fix(mod): thx goeng - delete trasaction types tokens & add higher pri…

5670cf3

…ority to size n quality tokens

fix(design): 태그 위치 변경

e05722e

fix: 기타 태그는 표시하지 않기

f773277

jw0202058 reviewed Jul 23, 2025

View reviewed changes

fix(mod): thx goeng - price token 분리, 아이스하키 하키로 바꿔치기

bcf213e

halionaz requested a review from jw0202058 July 23, 2025 16:25

jw0202058 approved these changes Jul 23, 2025

View reviewed changes

jw0202058 reviewed Jul 23, 2025

View reviewed changes

halionaz merged commit 5110af6 into dev Jul 24, 2025
4 checks passed

halionaz deleted the fix/#32/home-page branch July 24, 2025 01:03

Conversation

halionaz commented Jul 18, 2025 • edited by jw0202058 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❗ 연관 이슈

📌 내용

☑️ 체크 사항 & 논의 사항

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jul 18, 2025

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!

jw0202058 commented Jul 18, 2025

Uh oh!

halionaz commented Jul 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

AB 테스트

Uh oh!

jw0202058 commented Jul 19, 2025

Uh oh!

netlify bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for repicka ready!

Uh oh!

jw0202058 commented Jul 23, 2025

Uh oh!

halionaz commented Jul 23, 2025

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!

jw0202058 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

halionaz commented Jul 18, 2025 •

edited by jw0202058

Loading

halionaz commented Jul 19, 2025 •

edited

Loading

netlify bot commented Jul 23, 2025 •

edited

Loading