팀 최종 프로젝트[booker] - 6일차(디테일한 부분 디자인 결정 회의 & 1주차 회고)

규갓 God Gyu·2024년 1월 11일

프로젝트

목록 보기

40/81

오전 회의 내용

로고

두가지 디자이너님이 제안을 해주셨고 컬러감 / 디자인 / 폰트 등 좀 더 다양한 시안을 요청함
ex) OO 부분을 안경 모양으로 건우님께 시안 요청
컬러 등 자세한건 내일 오전에 다시 회의

카테고리에 홈 유무??

지금은 카테고리를 4개만 넣어놨는데 홈 글씨를 넣을지 말지 고민하였고,
로고 클릭 시 홈으로 돌아가게 구현 확정

로그인 / 마이페이지 / 회원가입 / 로그아웃 렛츠고(?)

화면 우측 상단에 위에 적은 내용을 어떻게 노출 시킬지 고민하였는데,

로그인 전 -> 아바타
로그인 후 -> 아이콘(클릭시 마이페이지+로그아웃) / 닉네임
형식으로 구현하기로 정하였다

검색바

돋보기 아이콘 클릭하면 왼쪽에 하얀색 밑줄로 전개되는 검색바로 결정

타겟 연령층 : 2~30대(감각적이고 세련된 디자인으로 해당 연령층 저격)

추가적으로 구현해볼법한 페이지

독립서점 소개(지도 api를 통해) / e - book api 페이지 구현하기 위해 스케줄 짜보기
but 당장 무조건 하자는 것은 아니고 나중에 추가하는 느낌으로 가도 될듯하니 부담은 가지지 않아도 됨

사이트의 정체성

주 기능은 커뮤니티로 하되 책에 관한 모든것을 보여주는 사이트가 우리의 정체성

저녁 회의 내용

CSS

rem 사용하기
(font-size 62.5%로 사용하면 0.1rem=1px,1rem=10px)
폴더명 - 소문자 / 파일명 - 대문자로 통일
Type 선언해주는 내용 한 파일안에 정리 ( src -> types -> types.d.ts )
pr 이후 에러 처리 내역
처음 실행했을 때 404에러 -> 8080: Blog/Best 코드 사용 안해서 주석처리로 해결했으나 지예님 수정된 코드에선 사용하는 코드이므로 나중에 Pr 해주시면 pull 했을 때 해결될 에러임
리듀서 관련 오류 - 아무도 사용 안해서 에러 뜬거라 해결 완료
Index.html logo192.png 사용하지 않는데 코드만 존재해서 삭제 후 문제 해결 완료
styled 파일 폴더마다 넣기로 한 부분 -> 중복되는 스타일이 많을 시 좀 더 광역적인 부분에서 스타일 선언(상위 폴더에서)

1주차 회고

이번 주 한 일
(팀용)
- 기획 및 기획 개편
- 개발 환경 설정
- 오전 회의 시간 - 디자이너와 전반적인 디자인에 대한 회의 진행
- 오후 회의 시간 - 기능에 대한 내용 중점으로 회의 진행
- ui 결과물 = 메인/중고책판매/커뮤니티/설문조사/로그인/회원가입 등등 디자이너님과 큰 틀 구현(피그마 참고)
- 기능 결과물 =
1. 로그인/회원가입 수파베이스 통해 구현
2. 마이페이지&중고책 판매 페이지 초기 기능 구현
3. 커뮤니티 페이지 게시글 카테고리 별로 분류하여 페이지 구현
4. 설문조사 best seller api를 통해 질문지 & 답변에 따른 책 추천 구현
5. 책 소개 페이지 알라딘 api를 통해 mapping
- 타겟 연령층 = 주요 2~30대
이유 - 컴퓨터를 자주 사용하는 세대로서 깔끔한 디자인을 위해 많은 정보량을 노출시키지 않아도 ex)로그인 아바타 버튼 / 로고 홈버튼 사이트를 제대로 이해하고 활용할 수 있게 디자인적으로 제작했고, 책과 관련된 모든 컨텐츠를 담았기 때문에, 책에 관심있는 사람들은 물론, 책에 관심없는 사람도 관심을 가질 수 있게 페이지를 구현하였다.
- 디자인 컨셉 - 모던하고 깔끔한 느낌
- 팀 공통적으로 어려웠던 부분
<회의>
처음에는 주제 정하기, 주제에 대해 깊이 파고들기 등 생각할 부분이 너무 많아서 회의 시간이 너무 길었었는데, 초기 세팅을 한 이후에는 점차 다같이 정해야할 부분을 많이 정해놔서 지금은 적당한 하루 오전, 오후 회의시간을 갖추게 되었다.
회의 시간에 어떤 논점을 세울때 지금 현 시점에서 중요하지 않은 내용에 좀 많은 시간을 투자하는 경향이 있었는데, 그러다 회의가 늘어지고 지루해질법할 때마다 킹갓제너럴 부리더짱짱걸♡이 제제를 잘해주면서 올바른 길로 인도해주어서 회의를 깔끔하게 빠른 시간 내로 끝낼 수 있던 것 같다.
<백엔드>
실시간 채팅 기능 구현을 위해 백엔드 요소를 많이 끌어다 코드 구현을 하였는데, 프론트엔드 개발자들끼리 만드는 프로젝트에서 너무 많은 백엔드적인 요소가 담겨있는것 같아, 초기에 next.js 빼고 기능 구현을 하기로 하였지만, 진영 튜터님이 도움을 주시게 되면 next의 서버 클라이언트 컴포넌트를 활용하여 백엔드 코드를 집어넣을 수 있었었는데, 제천 튜터님의 조언을 따라 수파베이스에서 리얼타임을 통해 실시간 채팅기능이 가능하다는 판단을 듣고 많은 고민을 하다 next를 제외하고 백엔드 코드를 제외한 채 프로젝트를 진행하기로 결론지었다.
<디자이너님과의 협업>
초기 기획단계부터 같이 진행하신 디자이너님이 중도하차를 하시면서 새로운 디자이너님에게 초기 기획단계를 다시 설명드리다보니 살짝 프로젝트 진행이 휘청거릴뻔하였고, 기능 구현이 완성이 되지 않은 상태에서 디자인을 정하려고 하다보니, 머리 속에서만 상상하고 아이디어를 제시하는 방향으로 회의가 진행되다보니, 탁상공론의 느낌이 강하였다. 그래도 큰 틀을 정하면서 거기에 맞춰서 기능구현이 서서히 되어가다 보니, 매일 매일 회의를 통해서 우리 사이트의 디테일한 부분이 점점 확정이 되고 애매한 부분을 다 같이 머리를 맞대어서 디자인이 디벨롭되는 것 같아 다행이다.

(개인용)

천민규
필수기능 : 설문조사 페이지 구현(질문에 대한 버튼을 클릭하면 다른 컴포넌트로 이동하면서 필터된 책만 보여주는 식으로 진행)
어려웠던점 : 설문조사 api를 통해 구현하려 하였으나, 책 api를 가져와서 필터를 진행한 결과값이 추천 책이도록 만들라는 튜터님의 조언에 어떻게 만들어야할지 너무 막막하였다. 그러다 질문 컴포넌트, 결과값 출력 컴포넌트를 나눠서 진행했었고, 질문에 대한 답변 선택에 대한 결과값 출력 컴포넌트를 하나하나 다 만들어줘야겠다 생각했었고, 그렇게 되면 너무 많은 컴포넌트를 내가 혼자 만들게 되어서 프로젝트가 과부하 될 것 같은 느낌이 들었다. 그러다 채택한건 useParams였고, 질문에 대한 답변을 결과값 출력 컴포넌트에 params로 그대로 들고와서 거기에 해당되는 내용을 필터링에 담길 수 있게 조치하였다. 기획만 잘 되면 구현이 어렵지 않을 내용이였지만 기획 아이디어를 짜는게 쉽지 않았던 것 같다.
배운 것,깨달은 것 : 다 처음 만드는 작업이라 쉽진 않아도 아이디어만 잘 떠올리면 구현이 그렇게 어렵진 않을 수 있다는걸 깨달았고, 코드는 검색을 하든 주변에 조언을 구하든 짜는게 어렵다기 보다 어떻게 이게 구현이될지를 떠올려야한다는게 더 중요하다 느끼게 되었다.
박주원
필수기능 : CRUD&북커톡 게시판(카테고리 별) / 좋아요 기능

시병택
필수기능 : 로그인, 회원가입 (supabase기반) 기능 구현 완(추가 리팩토링 필요)

  추가기능: 1:1채팅(supabase realtime 기반) schema 로직은 구현 완.

   but reference 부족으로 구현에 에러사항 있음.

강나연
필수기능 : 중고거래 게시판, 마이페이지, 일반 게시판 댓글
추가기능 : 댓글+대댓글, 팔로우/좋아요 기능 구현 시 마이페이지에 적용, 채팅기능 구현 시 중고거래 게시판에 적용
김지예
필수기능 : 도서관련 api 서버배포 후 출력확인함!
추가기능: 1:1 채팅(socket.io) 백엔드서버를 연동하여 구현하였으나 프로젝트 취지와는 맞지 않아 supabase realtime으로 구현해보기로 함