Portfolio

발표 페이지 별로 설명 잘 하셨습니다 👍

직접 쓰고 있는 서비스에서 착안해서 고안한 부분과 아이디어 모두 좋네요 잘 발전시켜보시면 좋을 것 같아요

회사, 커뮤니티등에서 인기 있는 서비스로 발전시킬 수 있을 것 같아요

일까지 작성

일하는 발식

PR 알림 채널과 소통 채널 관리에 대해서도 고민해보시면 좋을 것
소통이 활발해서 보기 좋음 및 리뷰나 머지 활발한 편 같음

라벨에 우선순위등을 구분지은 거 좋습니다 👍 →

일에 우선순위나 PR 우선순위를 더 명확히 할 수 있겠죠

PR 제목을 한글로 연관된 이슈 제목과 동일하게 가져가면 가독성이 더 좋지 않을까요?

PR에 스크린샷 첨부해서 설명을 잘 하고 계시지만, 테스트 서버로 동작을 직접 확인해볼 수 있게 구성해놓으시면 더 좋을 것 같습니다

문서화 개발만 하기에도 바쁘시겠지만 다른 사람이 들어와도 잘 컨텍스랑 배경을 알 수 있게 문서화 해놓는 것도 개발자에게 필요한 능력 중에 하나여서, 한 번 더 신경 써서 작성해보시면 좋을 것 같아요

배경 / 주요 기능들 각 기능별 걸릴 것 같은 시간 / 질문이나 논의하고 싶은 사항들

뱅크샐러드의 특별한 스펙, '테크 스펙' | 뱅크샐러드

개발자들이 개발을 시작할 때의 모습은 제각각입니다. 일단 코드부터 두드리고 보는 행동파 개발자도 있고, 눈앞에 보이는 노트 위에 간단한 구조를 그려 보는 개발자도 있죠. 뱅크샐러드에서는 모두 같은 행동을 합니다. 우리는 테크 스펙을 써요. 코드 짜기도 바쁜 우리는 문서까지 작성할 시간이 없습니다.

https://blog.banksalad.com/tech/we-work-by-tech-spec/

프로젝트

깃헙

디스커션이랑 투표 같은 부분 활용하신 점 좋네요, 히스토리에도 잘 남고
브랜치 룰 적용 좋습니다 👍
리드 미를 통해서 환경 세팅 및 배포사이트 , 관련 문서를 쉽게 접근 할 수 있도록 링크 걸어두기

추가 액션 깃헙 액션으로 CI / CD도 한 번 알아보기

소스레벨

주석


/*
@todo 

@description 

@deprecated

주석에도 jsdoc 참고해서 몇가지 쓸 수 있는 부분 분류해서 남겨놓으시면, 나중에 파악하는데 더 용이할 것 같네요

api

리소스 별로 잘 분리하신 것 같아요
axios create와 미들웨어를 잘 사용하셧네요 👍
재사용할 수 있는 부분이나 에러 핸들링은 사용하는 곳에서 같이 하게 두는 것이 어떨까 싶네요
api

어느 부분은 api 함수에서 캐치하고 어느 부분은 안되어 있고 그러는데 일관성 있게 조정하면 더 좋을 것 같습니다 콘솔 같은 디버깅 코드는 소스 코드 레벨내에서는 커밋으로 최대한 안 남기게 관리를 해보시는 습관들이시면 좋을 것 같아요

리액트에서 데이터 다루기 문서 한 번 읽어보시면 좋을 것 같아서 첨부합니다.

https://www.robinwieruch.de/react-hooks-fetch-data/

컴포넌트

시멘틱 태그도 신경써서 마크업 작업을 해주시면 좋을 것 같습니다

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

ex) MainFeedCard → article 태그 사용하셔도 좋을 것 같네요 , List라면 ul, li 등으로 구성해주면 좋을 것 같습니다.

버튼 version → 참고 variant를 보통 많이 쓰더라고요

color, variant를 나누는게 어떨까요? version에서 case가 너무 많이 생길 수 있을 것 같네요
disable, hover, focus,active 등도 적용해두시면 좋을 것 같네요

InputForm

version에 따라 컴포넌트를 분리해서 역할을 가져가는 것도 고려해보시면 좋을 것 같습니다

컴포넌트 공통 로직은 훅으로 분리해주는 것과 함꼐요
controlled component vs uncondtrolled components도 공부해보시면 좋을 것 같네요

기타

useRafState는 오타인거죠? → useRefState ?

lint나 propTypes warning 이슈들도 되도록이면 잡은체로 커밋되도록 노력해보세요

theme.js

figma ui theme를 볼 수 있는 링크가 주석으로 있으면 더 좋을 것 같네요

참고 색 배열로 맵핑하셨는데, color scale 백단위로 쓰게 된다면 객체로 맵핑하시는게 좋을 거에요

https://chakra-ui.com/docs/styled-system/theming/theme?scroll=true

opacity에 transparent가 → 투명한 의미라서 0.7이 살짝 어색하게 느껴지네요

hover 색상들은 sacle 색상을 추가해서 조정해서 쓰는 방향도 고려해보시면 좋을 것 같습니다.



const theme = {
  colors: {
    // 하늘색, 노란색, 무채색, 특정페이지 색
    black: '#000000',
    white: '#FFFFFF',
    skyblue: ['#7EC9FF', '#BFE4FF'],
    yellow: ['#FFDD85', '#FFF8E7'],
    red: '#FD3535',
    darkgray: ['#3F3F3F', '#4A4A4A', '#858585'],
    gray: ['#D9D9D9', '#ECECEC'],
    // 버튼 별 gradient
    praise: ['#7C89FF', '#95E6FF'],
    moved: ['#FFA0A0', '#FFF7B3'],
    warm: ['#FF93C0', '#FFC0C0'],
    // hover 색
    skyblueHover: '#4AB3FF',
    yellowHover: '#FFBE5C',
    // 특정페이지색 - 메달
    bronze: ['#E4B368', '#F9D59F'],
    silver: ['#BEBEBE', '#DCDCDC'],
  },
  spacing: {
    xsmall: '8px',
    small: '16px',
    medium: '24px',
    large: '32px',
    xlarge: '40px',
  },
  size: {
    mobile: '(max-width: 600px)',
    tablet: '(max-width: 900px)',
    desktop: '(min-width: 1200px)',
  },
  opacity: {
    tarnsparent: 0.7,
    visible: 1.0,
  },
  borderRadius: {
    edge: '5px',
    rounded: '30px',
    circle: '100%',
  },
};

카드 레이아웃 텍스트가 삐져나오는 부분 없게 수정해보시면 좋을 것 같습니다.

매인 피드 페이지 스크롤 할 떄 페이지 피드 리스트는 리렌더링이 되지 않도록 분리해보시면 좋을 것 같아요

컴포넌트 설계 관련 → 이번에 토스 slash 22에서 한 영상인데 참고해보시면 도움이 많이 될 것 같아 첨부해요

https://www.youtube.com/watch?v=fR8tsJ2r7Eg

짧은 시간안에 잘 하고 계세요 ~~

남은 시간 동안도 화이팅입니다 ~~

프로젝트 중간 점검(달리 멘토)