Skip to content

Conversation

hyobiin9
Copy link
Collaborator

@hyobiin9 hyobiin9 commented Dec 21, 2024

Sprint 10 요구사항

기본

  • Github에 위클리 미션 PR을 만들어 주세요.

  • React.js 혹은 Next.js를 사용해 진행합니다.

  • (풀스택) 설계한 백엔드 코드에 맞게 프론트엔드 코드를 변경해 주세요.

프론트엔드 구현 요구사항

중고마켓 페이지

  • 디폴트 이미지로 처리한 이미지를 실제 Product Get API에서 가져온 이미지로 변경해 주세요.
  • 좋아요 순 정렬 기능을 붙여주세요.
  • 베스트 상품 기능을 추가해 주세요. 베스트 상품은 가장 많이 좋아요를 받은 순으로 PC 기준 최대 4개까지 조회 가능합니다.

상품 등록하기 페이지

  • 상품 이미지 등록 기능을 구현합니다. 파일을 선택해 이미지를 업로드하고, preview를 볼 수 있도록 구현합니다. 이미지는 최대 3개까지만 등록 가능하도록 구현해 주세요.
  • 동일하게 상품 이미지 수정 기능도 추가합니다.
  • 상품 등록 성공 시 중고마켓 페이지로 이동해 주세요.

심화

상태코드 (웹 API 관련)

  • 프론트엔드에서는 서버 응답의 상태코드에 따라 적절한 사용자 피드백을 제공합니다.

인증

  • 토큰 기반 방식을 사용할 경우, 만료된 액세스 토큰을 새로 발급하는 리프레시 토큰 발급 기능을 구현합니다.(jwt sliding session 적용)

OAuth를 활용한 인증

  • 구글 OAuth를 사용하여 회원가입 및 로그인 기능을 구현합니다.

(생략 가능) 자유게시판 게시물 등록

  • 프론트엔드를 Next.js로 Migration 했을 경우에만 진행해 주세요.
  • 게시물 등록 시 이미지 등록 기능을 구현합니다. 파일을 선택해 이미지를 업로드하고, preview를 볼 수 있도록 구현합니다. 이미지는 최대 3개까지만 등록 가능하도록 구현해 주세요.
  • 게시물 등록 시 필요한 필드(제목, 내용 등)의 유효성 검증하는 미들웨어를 구현합니다.

Sprint 11 요구사항

기본

  • Github에 위클리 미션 PR을 만들어 주세요.

  • React 및 Express를 사용해 진행합니다.

  • TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.

  • any 타입의 사용은 최소화해 주세요.

  • 복잡한 객체 구조나 배열 구조를 가진 변수에 인터페이스 또는 타입 별칭을 사용하세요.

  • Union, Intersection, Generics 등 고급 타입을 적극적으로 사용해 주세요.

  • 타입 별칭 또는 유틸리티 타입을 사용해 타입 복잡성을 줄여주세요.

  • 타입스크립트 컴파일러가 에러 없이 정상적으로 작동해야 합니다.

프론트엔드

  • 기존 React(혹은 Next) 프로젝트를 타입스크립트 프로젝트로 마이그레이션 해주세요.
  • TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.

멘토에게

  • 게시글이나 댓글에 보이는 토글은 모든 사용자에게 보이도록 했으며, 기능은 없습니다.
  • 게시글 등록 페이지는 ui만 구현했으며, api 연결이나 빈칸 여부 확인하여 에러메세지 띄우는 기능은 없습니다.

@hyobiin9 hyobiin9 self-assigned this Dec 21, 2024
@hyobiin9 hyobiin9 requested a review from MCprotein December 21, 2024 13:46
.vercel

# typescript
*.tsbuildinfo

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 이게 뭐에요??

return response.data;
} catch (error: any) {
console.error("Error posting product comment:", error.message || error);
throw new Error("post product comment failed");

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 만약 클라이언트 에러라면 사용자가 어떤 것을 잘못했는지 알아야될거같은데, 이렇게 고정값을 에러로 내보내도 괜챃을까요?

const response = await getRequest("/products", { params });
return response.data;
} catch (error) {
throw new Error("get product failed");

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 이런부분 전부 마찬가지입니다
차라리 잠시후에 다시 시도하라거나, 관리자에게 문의하라는 메세지를 띄우는게 더 나을거같습니다

Comment on lines +77 to +81
images: File[],
tags: string[],
price: string,
description: string,
name: string

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 이런거는 객체를 넘기게 하는게 더 나을거같아요
description이 Null 이고 name 은 null이 아닐수도 있잖아요

Comment on lines +14 to +20
if (isAxiosError(error)) {
console.error("Axios Error:", {
message: error.message,
status: error.response?.status,
data: error.response?.data,
});
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 이건 디버깅용 코드 안없앤거죠?

if (!text.trim()) return;

try {
await fetchProductCommentWrite(String(productId), text);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 productId 타입을 변환하느 ㄴ이유가 무엇인가요? 서버와 클라이언트에서 다루는 데이터가 같은데 타입이 다른건가요?

src={close}
alt="close"
onClick={() =>
setTagsArray(tagsArray.filter((_, i) => i !== index))

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 순서가 보장되나요?

const [productData, setProductData] = useState<ProductData | null>(null);
const [bestProductData, setBestProductData] = useState([]);
const [dropdownOption, setDropdownOption] = useState("recent");
const [selectedOption, setSelectedOption] = useState("최신순");

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 useState에 generic 사용가능한거같은데 "최신순" 같이 하드코딩 하는거보다 타입 넣어주는게 어때요?

Comment on lines +7 to +30
export async function getRequest(url: string, params: object = {}) {
const config: CustomAxiosRequestConfig = params;
return instance.get(url, config);
}

export async function postRequest(
url: string,
body: object = {},
config?: any
) {
return instance.post(url, body, config);
}

export async function patchRequest(
url: string,
body: object = {},
config?: any
) {
return instance.patch(url, body, config);
}

export async function deleteRequest(url: string, config?: any) {
return instance.delete(url, config);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 인터셉터로 에러핸들링 하는게 좋아보여요
config는 아마 axios에서 제공하는 타입이 있을거에요

@@ -0,0 +1,3 @@
DELETE https://panda-market-api.vercel.app/products/482/favorite
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NTUwLCJzY29wZSI6ImFjY2VzcyIsImlhdCI6MTczNDcyMTc0NSwiZXhwIjoxNzM0NzIzNTQ1LCJpc3MiOiJzcC1wYW5kYS1tYXJrZXQifQ.hJYZe6ncrBdYh5iy02g8MQpF58hap9ghzdLbMVY0sQI

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyobiin9 원래 이런거 업로드하면 안되는거 알죠?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants