팀06 FE 최종 피드백

프로젝트 최종 점검

👍 Good

• 메인 페이지에 들어왔을 때, 이 서비스에 대한 설명을 전해 듣지 않고도 어떤 역할을 하는 서비스인지 명확히 알 수 있었습니다.

• 아직 완벽하지는 않지만 반응형 처리 잘해주시려고 노력하신 부분이 느껴집니다.

•  mainColor 도 블루 색상으로 통일감을 줘서 웹사이트가 굉장히 깔끔해보여요. 로고도 세상 귀엽네요.

📈 개선 필요

• 상세 페이지에서 메인 페이지로 들어올 때, 로딩이 오래 걸립니다. (3초는 항상 걸리는 것 같아요.) Perfomance 탭으로 분석해서 속도 개선이 되면 좋겠습니다.

• 메인 페이지에서 가장 많은 스터디가 개설된 책 섹션이나 가장 최근 스터디가 만들어진 책 섹션을 통해 클릭한 책인데, 스터디가 없습니다 라고 뜨는 경우가 많습니다. 데이터가 정확하지 않아보여 확인이 필요해보입니다.

• 카카오 로그인을 시도하니 500 에러가 떨어집니다.
• 그래서 스터디 개설 기능을 확인해보지 못했어요.

• 메인 페이지의 검색 창에서 책을 검색 했을 때, 자동 완성 되면 더 좋을 것 같아요.

• 로그인과 닫기 버튼이 처음 보는 모달 모양인 것 같아요. 일반적으로, 유저에게 강조하고 싶은 버튼(로그인)은 오른쪽 + 컬러 O, 강조하고 싶지 않은 버튼(닫기)는 왼쪽 + 컬러X 로 많이 넣어요. 닫기 버튼은 별도로 넣지 않고 우측 상단에 X 로 많이 넣기도 해요.

• 검색 페이지에서 특정 책을 클릭하면 아래와 같은 에러가 발생합니다.

개발

• initial State
• -1 로 초기화 하기 보다는 명확히 <null | number>로 잡아주시는게 좋아요.

const [studyId, setStudyId] = useState(-1);

• useUserContext.ts 가 hooks 디렉토리의 하위에 들어가 있는데, 저는 context 의 값을 가져오는 함수와 useInView 등의 일반 훅과 다르다고 생각합니다. useUserContext 를 UserContextProvider.tsx 안에 넣고 export 하면 관련 있는 코드끼리 모두 모아질 수 있어 응집도가 높아져서요.
• useUserActionContext 도 마찬가지입니다!

• components > Comment > Comment 컴포넌트
• CommentProps 안에 commentProps 라는 key 가 한겹 더 늘어가 있는게 어색해요. comment : { id, … } 로도 충분해요.
• 불필요한 state 만들지 않기
• currentValue 와 editValue 가 거의 같은 동작을 하는 것 처럼 보이는데 하나로 줄일 수 있을지 고려해주세요.

• components > StudyState > StudyState.tsx
• studyState 가 없을 때 아무 것도 렌더링 하지 않는다면, return 문 전에 `if (!studeState) return null 처리를 해주고, 메인 return 문은 <S.StudyState>~ 만 남는게 깔끔합니다.

• features 라는 폴더가 있는데 어떤 구분으로 나눠진건지 명확히 느껴지지 않아요. 컴포넌트 + Business Logic 이 포함된 코드들로 보이는데, 이런 폴더 구분 보다는 각 feature 가 어떤 페이지에서 쓰이는지 한 눈에 보이는게 프로젝트 전체의 가독성에 더 좋아요.

• useWindowSize Hook 잘 만드셨네요. 👍 서버사이드 에서는 window 가 undefined 여서 이런 처리가 꼭 필요하죠. 다만 지금은 windowSize 를 그대로 return 해주고 있어서 사용하는 쪽에서 width > 900 && <컴포넌트 /> width > 1240 && <컴포넌트 /> 이런 코드들이 필요한데요. 여러 컴포넌트에서 필요하기 때문에 조건을 반복해서 사용하게 됩니다. Hook 내부에서 const isDesktop = width > 1240, const isMobile = width > x… 와 같은 처리를 해주고, isMobile 과 isDesktop 을 리턴해주면 breakPoint 를 좀 더 자연스럽게 다룰 수 있어요.

• features > StudyOpen > StudyOpen.tsx
• 컴포넌트의 길이가 약 500 줄인데, 저는 300줄이 넘어가면 컴포넌트를 분리해야 하는 신호라고 생각합니다. handleOpenClick 도 함수 하나가 120줄로 너무 많은 일을 하고 있어요.