본문 바로가기
[ 프로젝트 ]/빨간 망토

메인 프로젝트 - 지역 동네 기반 심부름 커뮤니티 🔴빨간 망토🔴

by 디디 ( DD ) 2023. 6. 6.

 

 

⭐ 배포 주소 : http://codestates-redhood.s3-website.ap-northeast-2.amazonaws.com

 

Red Hood

 

codestates-redhood.s3-website.ap-northeast-2.amazonaws.com

 

 

📝 깃허브 리포지토리 : https://github.com/codestates-seb/seb43_main_031

 

GitHub - codestates-seb/seb43_main_031

Contribute to codestates-seb/seb43_main_031 development by creating an account on GitHub.

github.com

 

 

 

  약 한 달간의 메인 프로젝트가 마무리되었다. 생각지 못했던 어려움을 많이 겪었고, 그만큼 많이 배울 수 있었던 프로젝트였다. 먼저, 팀 단위로 아무것도 없는 기획 단계부터 개발을 시작해 본 건 이번이 처음이었다. 다양한 의견이 나왔고, 기한 안에 실현 가능한 수준을 고려하여 '심부름 커뮤니티'를 만들기로 했다. 기능 자체는 바로 전에 만들었던 스택 오버플로우와 크게 다르지 않아 부족했던 부분을 함께 공부하며 진행하기 좋은 주제라는 생각이 들었다. 키워드가 심부름인 만큼 지역 기반의 커뮤니티를 만들면 좋겠다는 추가 의견이 나왔고, '빨간 망토'라는 귀여운 이름도 금방 정해졌다. 

 

 

  아, 디자이너가 따로 없는 상황이라 프론트팀에서 화면 구성을 하게 되었는데, 생각보다 서비스와 어울리면서 깔끔하고 통일감 있는 디자인이라는 게 쉽지가 않았다. 다 같이 테마 컬러를 정하고, 피그마를 이용해 레이아웃을 짰다. 로고도 무료로 이용할 수 있는 이미지를 찾아보다가 영 없어서 내가 직접 그렸다. 걱정했는데 대체적으로 UI에 대한 반응이 좋아 다행이었다. 

 

 

  그리고 이번에 크게 느낀 게 하나 있는데, 내가 자바스크립트 기본이나 리액트 훅 등을 제대로 알고 사용하는 게 아니라는 것이었다. 프로젝트가 끝나고 부트 캠프를 수료하면 타입 스크립트랑 Next js를 공부하려고 했는데, 아무래도 기초를 다지는데 더 시간을 써야 할 것 같다. 이 문제는 나뿐만 아니라 다른 팀원분들도 함께 겪은 문제였는데, 그렇다 보니 예상치 못한 문제 상황이 많이 발생해서 중간쯤부터는 계획에 차질이 생기기 시작했다. 일의 진척도를 계속 확인해가며 중요도에 따라 해야 할 일을 정했어야 했는데, 아무래도 커뮤니케이션이 조금 부족했었던 것 같다. 상황을 인지한 중반 이후부터는 문제가 발생하면 혼자 끙끙거리기보단 함께 모여 상황을 공유하고 고민했다. 내 눈에는 안 보이는 게 다른 분들 눈엔 보이기도 했고, 다른 분들 눈에는 안 보이는 게 내 눈엔 보이기도 했다. 멘토링을 맡아주셨던 멘토 분도 정말 성심성의껏 도와주셨고, 백엔드 분들과도 과하다 싶을 만큼 커뮤니케이션을 하며 그렇게 무사히 프로젝트를 마무리할 수 있었다. 함께 공통의 목표를 가지고 이루어 낸다는 게 남다른 성취감과 뿌듯함을 주는 것 같다는 생각이 들었다. 

 

 

 

 

피드백 받았던 것 중 앞으로 같이 리팩토링 및 개선해 볼 만한 사항들

 

- 한 명이 여러 번 심부름을 신청할 수 있는데, 이 부분은 막는 것이 맞을 것 같다. 

- 마이페이지에서 회원 정보를 수정할 때, 프로필 사진 변경 부분과 비밀번호 변경 부분이 나뉘는 것이 좋을 것 같다. 

- OAuth, 좋아요, 내 심부름 히스토리 등 준비 중인 기능이 마저 구현되면 좋을 것 같다.   

 

 

 

 

내가 맡았던 페이지 관련 포스팅

 

- 게시글 작성 페이지 관련 글 : https://ddppp.tistory.com/145

 

웹에디터 이미지 업로드 훅 커스텀하기 (TOAST UI, 클라우디너리)

게시글 작성 페이지를 맡아 작업하던 중 이미지 업로드와 관련한 문제가 생겼다. 유저의 자유로운 사용성을 위해 웹에디터를 적용하기로 했는데, 이미지 파일을 직접 올리는 경우 base64 형식으

ddppp.tistory.com

 

- 마이페이지 관련 글 : https://ddppp.tistory.com/144

 

모달/탭 UI 구현하기

(컴포넌트 구조) 마이페이지 ↓ ↓ 모달 탭 ◆ 모달 (Modal) // 먼저, 부모 컴포넌트인 에 modal상태를 추가한다. const [modal, setModal] = useState(false); // 모달 창을 끌 때 필요한 (모달 컴포넌트에 내려 줄)

ddppp.tistory.com

 

- 채팅 페이지 관련 글 : https://ddppp.tistory.com/148

 

HTTP 단방향 통신으로 실시간 채팅 기능 구현하기

프로젝트 마감일이 일주일 좀 넘게 남았을 때, 채팅 페이지를 만들기 시작했다. 주제가 지역 기반 심부름 커뮤니티인 만큼 심부름 의뢰인과 심부름 수행인 사이에 공개적이지 않은 의사소통 공

ddppp.tistory.com

 

 

 

댓글