💯

최종 점검 멘토님 피드백

또 미리 전달 못 드렸네요 🙏 * 10000

📌 이슈

로그인 버튼

간혹 구글 Oauth 버튼이 안 뜰때가 있네요

로그인 이후에도 홈에서 로그인 버튼이 살아 있는데 어색하게 느껴집니다. → 프로필버튼으로 변경되면 좋을 것 같아요 → 이건 모바일에서 볼 때만 이러네요 … 웹에서는 잘 되네요

제목이 없는 상품들이 꽤 있네요

특히 최근 상품들이 이런 부분이 많아서 한 번 수정해주시면 좋을 것 같아요.
남은시간, 이미 경매가 종료된 상품입니다. 텍스트가 어색하게 줄 바꿈 안되도록 수정해주시면 좋을 것 같아요

notion image

📌 UX + 추가 기능 고려해볼만한 부분

리스트에서 찜하기를 누르고 싶은 니즈가 있을 것 같아요

이슈나 UX 적으로 추가 고려사항 → 지인 친구들한테 써보게 해서 받아보는 것도 좋습니다.
실제 처음 접하는 사용자들이 접했을때 불편한 부분이 없는지 파악해보기

내 물건을 찜할 수 있는 부분은 의도한 건지 궁금해요

헤더가 사진에 따라서는 잘 안 보일 수 있을 것 같아요. 아예 따로 배경 처리를 해서 구분시켜주는 방식도 있을 것 같아요.

notion image

물건작성 페이지 상품내용 작성이 조금 짤리는 느낌이 있는데 아래쪽 여백을 조금 두시면 좋을 것 같습니다. + 완료 버튼이 헤더에 안 있고 바텀에 있어서 자연스럽게 상세 내용을 작성하고 완료 버튼을 누르기 쉽게 가져가는 방향도 고려해보시면 좋을 것 같습니다.

이미지 업로드시 사이즈 및 갯수제한 같은 부분이 있는지도 어떻게 설정하면 좋을지도 고려해보면 좋을 것 같아요

notion image

메시지랑 알림 아이콘도 keyColor 배경이면 더 톤이 자연스러울 것 같습니다.

notion image

회원탈퇴는 한 번 더 모달로 알림 줘도 될 것 같네요 실수로 눌러서 되면 크리티컬 할 수 있으니 → 확인 절차

다른 검색 앱들이랑 한 번 비교해봐도 좋을 것 같아요.

검색키워드 검색결과 몇 개 이런 부분 안내해주는데가 많은데 고려해보셔도 좋을 것 같습니다

notion image

📌 코드

유틸 함수에 같은 성질에 format 등 Index.ts 를 두어서 export하는 방식을 고려해봐도 좋을 것 같네요

주석은 조금 더 자세하면 좋을 것 같아요 간혹 오후 1:22 분이 왜 들어가 있는 건지 하는 사람도 있을 것 같습니다.

notion image

참고

https://jsdoc.app/ ← 주석 달 때 참고하면 좋을 문서
https://www.typescriptlang.org/docs/handbook/modules.html#re-exports
https://basarat.gitbook.io/typescript/main-1/barrel

CI/ CD PR 리뷰 시스템 등 시스템적인 부분도 자랑하시면 좋을 것 같아요. 리뷰어 자동 매칭이랑 PR template등 활용 잘 하신게 많아 보이네요

태그 활용 잘 하셨네요 그런데 왜 0.1 → 0.3으로 올라갔나요

api

resourse별로 구분 잘 되게 폴더 구조 잘 정리하신 것 같습니다. apis/api 개인적으로는 apis/api depth 없이 바로 ex) api/heart 로 가져가도 될 것 같네요
get 처럼 제네릭으로 responseType 정의해줄 수 있는 부분은 정의해주시면 좋을 것 같네요

이렇게 TODO 남기는 습관 좋습니다.

하지만 TODO 로 남는경우가 많아서 이런 부분은 Task 도구나 issue에도 백로그로 같이 남겨놓으면 좋을 것 같아요.

불필요한 주석이나 린트 이슈들을 한 번 체크해주세요 - 이런 부분은 빠르게 정리할 수 있는 부분인데 코드에 남아 있으면 평소에 신경을 덜 쓴다는 느낌을 주게 되요. → 다른 사람이 볼 때

notion image

보통 esle if 보다 if문으로만 처리하는게 코드가 더 간결해보이더라고요 (+ 참고 링크)

5 ways to refactor if/else statements in JS functions

In this blog post I will present 5 ways to declutter your code getting rid of unnecessary if-else statements. I will talk about: You know that feeling when you're working with inconsistent API and your code breaks because some values are undefined?

5 ways to refactor if/else statements in JS functions

https://dev.to/sylwiavargas/5-ways-to-refactor-if-else-statements-in-js-functions-208e

5 ways to refactor if/else statements in JS functions

컴포넌트 분리 재사용성 고려해서 빼보기

다이나믹 Import를 활용해서 필요할 때만 불러올 수 있는 모듈들을 분리시켜보시는게 어떨까요?

notion image

notion image

참고문서

📌 기술 정리문서

next.js 에 어떤 api나 특징들을 활용해봤는지 이점, 어려운 점

react 18

suspense 활용해보시면 좋을 것 같습니다

Video preview

react-query

왜 이 기술을 택했는지 next, react, react-query

이런 부분도 한 번 정리해서 남겨보시면 좋을 것 같습니다. 단순히 트렌드이고, 장점이나 경험해보고 싶어서여서라는 이유도 좋습니다. → 실제로 그래서 어떤 부분이 좋았는지를 한 번 기록해보세요

📌 추가로 도입해보셨으면 하는 것들 관련

스토리북(컴포넌트 문서화에 용이) + 유닛테스트

e2e 테스트

sentry 랑 연결 vercel 사용하고 있는데 바로 연결시킬 수 있는 도구들 있을 텐데 적용해보셔도 좋을 것 같습니다


example 
@param
@return


import { authInstance } from 'apis/utils/authInstance';
import { NotificationsResponseType } from 'types/notification';

const notificationAPI = {
  getNotifications: ({ offset }: { offset: number }) =>
    authInstance.get<NotificationsResponseType>(
      `/notifications?offset=${offset}&limit=10`
    ),
  putCheckNotification: ({ notificationId }: { notificationId: number }) => {
    authInstance.put(`/notifications/${notificationId}`);
  },
};

export default notificationAPI;


//TODO: Input 안에 IconButton클릭 시에도 채팅이 입력되도록 구현


if (pathName === '/products') {
      router.push('/');
    } else if (router.pathname === '/user/[userId]/chat/[chatRoomId]') {
      const userId = router.query.userId;
      router.push(`/user/${userId}/chat`);
    } else if (router.pathname === '/user/[userId]/chat') {
      router.push('/');
    } else {
      router.back();
    }


<FormControl
            flexGrow="1"
            display="flex"
            flexDirection="column"
            height="20%"
            isInvalid={(errors.images as string)?.length > 0 ? true : false}
          >
            <AddProductImageUpload
              name="images"
              productImageArray={productImageArray}
              setProductImageArray={setProductImageArray}
              handleChange={handleChange}
            />
            <FormErrorMessage paddingLeft="19px">
              {errors.images as string}
            </FormErrorMessage>
          </FormControl>
          <FormControl
            flexGrow="1"
            display="flex"
            flexDirection="column"
            height="20%"
            isInvalid={(errors.title as string)?.length > 0 ? true : false}
          >
            <AddProductTitle inputTitle="title" onChange={handleChange} />
            <FormErrorMessage paddingLeft="19px">
              {errors.title as string}
            </FormErrorMessage>
          </FormControl>

중복되는 UI는 component로 따로 분리하는게 좋을 것 같네요.