전체적인 기능구현을 잘 하신것 같습니다.
리액트라는 부분에 포커싱을 두고 개발이 진행되었는데, 그렇다면 리액트에 대한 전문적인 자료도 같이 볼 수있는 공간도 있으면 좋을것 같다는 생각이 드네요. 사용자들의 피드백만으로는 문제의 대한 답변이 정확하지 않을 수 있으니까요.
현 단계에서 디자인측면에서의 아쉬운부분은 당연할 수도 있지만, 조금 더 완성도있는 디자인을 구현할 수도 있었을것 같아요.
아래는 제가 확인해보면서 생각나는 부분을 적어보았습니다.
1. 로그아웃 버튼의 위치가 다른 메뉴의 글자들과 라인위치가 맞지 않아요.
2. 현재 위치한 메뉴가 무엇인지 알 수 있으면 좋을 것 같아요.
3. Lv1 ~ 3 까지의 표시가 있고, 눌렀을때 나오는 리스트가 달라지는데 기준을 잘 모르겠어요.
마우스를 올렸을때나 혹은 어떠한 방식을통해 설명이 필요해 보입니다.
4. 이름변경이라고 적혀있는데, 실제로는 이메일이 나와요.
5. 좋아요의 아이콘표시에 대해서
내가 좋아요를 누르지 않았을 경우 하트의 내부는 비어있는 형태가 되어야 합니다. 지금처럼 검정색으로 꽉차있으면 직관적이지 않아요.
코드리뷰
Header와 같은 공통 레이아웃에 대한 처리부분 -> 공통 레이아웃을 통해서 처리할 수 있는 부분에 대해서 각 페이지 컴포넌트마다 구현이 되어있습니다, 이부분은 충분히 문제가 될 수 있는 부분으로, layout으로 처리가 되어야 합니다 :)
Div1,Div2와 같은 이름은 제거해주세요.
Alert는 버튼아닌가요?? alert컴포넌트 라기보다는 버튼이라고 봐야 하지 않을까요??
const Alert = () => { Swal.fire({ title: '완료', text: '답변이 제출되었습니다', imageUrl: ImgPath, imageHeight: 100, imageWidth: 100, }) return <button onClick={() => Alert()}>Click</button> }
- 버튼 컴포넌트 관련 버튼의 컴포넌트의 props에 width, height, fontSize, fontWeight 등의 다양한 props가 들어가 있는것 같습니다. 실제 버튼으로 나올 style에 대한 경우의 수가 두자리수가 되지는 않을 거라고 생각됩니다. 그렇기때문에, 특정 형태에 따른 style을 내부적으로 지정해두고 사용하는것이 더 좋은 컴포넌트가 될 것 같아요.