Conversation
yujinimda
added
생성 (feat)
|
에러 원인: CI에서 pnpm install --frozen-lockfile 를 썼는데, 러너의 pnpm 버전과 lockfile 버전이 안 맞아서 lockfile을 “호환 안 됨”으로 무시 → “없다”고 보고 실패한 거예요. 빠른 해결 2가지 중 하나만 택하세요(추천 순서대로): |
| @@ -0,0 +1,32 @@ | |||
| { | |||
| "env": { | |||
There was a problem hiding this comment.
에러 원인: CI에서 pnpm install --frozen-lockfile 를 썼는데, 러너의 pnpm 버전과 lockfile 버전이 안 맞아서 lockfile을 “호환 안 됨”으로 무시 → “없다”고 보고 실패한 거예요.
빠른 해결 2가지 중 하나만 택하세요(추천 순서대로):
There was a problem hiding this comment.
✅ 방법 1: pnpm 버전을 lockfile에 맞추기(권장)
워크플로에서 pnpm을 8로 고정(대부분의 기존 lockfile은 v6 형식 = pnpm v8 세대).
- uses: pnpm/action-setup@v4
with:
version: 8
그대로 pnpm install --frozen-lockfile 유지하면 통과합니다.
🟡 방법 2: frozen 해제(임시)
재현성은 떨어지지만 수정 최소화:
- run: pnpm install --no-frozen-lockfile
| interface TitleProps { | ||
| children: ReactNode; | ||
| size: string; | ||
| whight: string; |
| import s from './Title.module.css'; | ||
| interface TitleProps { | ||
| children: ReactNode; | ||
| size: string; |
There was a problem hiding this comment.
size, weight를 string으로 받으면 오타가 런타임까지 새어나가서 ts장점이 사라짐
유니온으로 받기
| whight: string; | ||
| } | ||
| const Title = ({ children, size, whight }: TitleProps) => { | ||
| return <strong className={`${s[size]} ${s[whight]}`}>{children}</strong>; |
There was a problem hiding this comment.
s[size], s[weight]가 CSS 모듈에 없는 거면 undefined가 className에 섞임 → clsx나 filter(Boolean)로 방지할수있어요!
| <> | ||
| <Header /> | ||
| <main className={s.main}> | ||
| <Outlet /> |
|
|
||
| createRoot(document.getElementById('root')!).render( | ||
| <StrictMode> | ||
| <BrowserRouter> |
| return ( | ||
| <div className="productWrap"> | ||
| <BestProductList /> | ||
| <GeneralProductList /> |
There was a problem hiding this comment.
여기서 필터부분 모듈한번 더 쪼개는거 어떤가요?
멘토님께 물어보고 올께요
| setLoading(true); | ||
| axios | ||
| .get( | ||
| `https://panda-market-api.vercel.app/products?page=${page}&pageSize=${size}&orderBy=${order}`, |
There was a problem hiding this comment.
공통 api폴더를 만들어서 axios 인스턴스랑 list api를 따로 분리하는건 어떨까요?
There was a problem hiding this comment.
axios인스턴스에 interceptors까지 추가로 넣으면 매번 error코드를 적지 않아도 됩니다 그냥 받아올수있써요!
There was a problem hiding this comment.
URL 조합은 params 옵션으로 쓰는게 안전하다고 해요
-> 유진꺼 예시 const { data } = await axiosApi.get("/products", {
params: {page, pageSize, orderBy, ...(keyword && {keyword})}
})
| import axios from 'axios'; | ||
| import { useState, useEffect } from 'react'; | ||
|
|
||
| interface ProductProps { |
There was a problem hiding this comment.
공통으로 쓰는 Props는 따로 공통 ts폴더를 만들어서 거기서 관리하는거 어떨까용?
There was a problem hiding this comment.
그리고 ProductProps는 필수 필드여서 옵셔널 안넣어도 될꺼같아요!
| interface useProductsPrams { | ||
| page?: number; | ||
| size?: number; | ||
| order?: string; |
| .finally(() => { | ||
| setLoading(false); | ||
| }); | ||
| }, [page, size]); |
| }); | ||
| }, [page, size]); | ||
|
|
||
| return { products, loading }; |
| order: 'favorite', | ||
| }); | ||
| console.log(products); | ||
| if (loading) return <div>Loading...</div>; |
| import s from './GeneralProductList.module.css'; | ||
|
|
||
| const GeneralProductList = () => { | ||
| const { products, loading } = useProducts({ page: 1, size: 10 }); |
2 participants
📌 PR 개요
🔍 관련 이슈
🔧 변경 유형
해당하는 항목에 체크해주세요.
✨ 변경 사항
ex/api/login) 추가📝 PR 제목 규칙
PR 제목은 커밋 컨벤션을 따라야 합니다.
ex) feat: 롤링페이퍼 작성 기능 추가 (#15)
✅ 체크리스트
📸 스크린샷 (선택)
🤝 기타 참고 사항