🍚 프로젝트 밥친구

1인가구비율 33.4%(21’), 2050년 예상 1인 가구 ‘39.6%’ 시대!

혼자 밥을 먹자니 심심하고,
눈 딱 감고 들어간 가게는 1인분 주문불가!
그렇다고 장을 봐 해 먹자니 버리는 재료가 너무 많다!

그래서 만들었습니다!
같이 밥먹을 친구를 구하고,
장 보고 나눌 동네 친구를 찾을 수 있는 플랫폼, #밥친구

1. 서비스 기획

메인 프로젝트는 내가 서비스를 기획하고 홍보해 팀원들을 모았다. 서비스의 취지에 공감을 한 상태에서 팀원이 모였다는 것은 우리가 같이 앞으로 나아가는 데에 있어서 큰 장점이었던 것 같다. 내가 기획을 할 떄 가장 크게 고려했던 것은 두 가지였다.

• 현실적으로 우리가 구현 가능한 수준의 프로젝트인가?
• 상용화가 된다고 했을 때, 소비자들이 필요성을 느낄 서비스인가?

그러다 보니 당근마켓이나 에브리타임에서 같이 밥 먹을 사람을 모으는 글이 올라오는 것이 생각났다. 그리고 자취할 때 장 볼 때 마다 돈이 아깝다는 생각을 했던 나의 모습이 떠올랐다. 그래서 밥친구는 '내가 지정한 위치를 기반으로 한 같이 밥 먹을 사람과 장을 보고 나눌 사람을 찾을 수 있는 서비스가 있으면 어떨까?' 라는 아이디어에서 시작하게 되었다.

서비스 핵심 포인트

1. 밥 먹기, 장 보기 메뉴
   • 원하는 만남에 따라 글을 골라 볼 수 있게 했다.
2. 조용히 밥만 먹어요 Mode ON/OFF
   • 나의 상황에 따라, 그날 기분에 따라 제어 가능한 상태 토글
3. 사용자 매너 점수
   • 낯선 사람을 만나는 만큼 서로에게 신뢰도를 줄 수 있는 매너 별점 기능

추가 예정 기능
4. 쪽지 또는 채팅 기능
- 게시판 외에도 사용자들끼리 소통할 수 있게 하자!
5. 광고 배너
- 수익구조도 챙길 것!

2. 담당 영역 및 기능

기획, 와이어프레임, 디자인

🔖 와이어프레임 피그마 URL
🔖 디자인 피그마 URL

게시판 전체

1. 게시판 CRUD
ㄴ Board 페이지
ㄴ PostBoard 페이지 - 게시글 등록, 텍스트 에디터, 이미지 처리
ㄴ BoardDetail 페이지 - 모임 신청, 코멘트 CRUD, 게시글 삭제
ㄴ EditBoard 페이지 - 게시글 수정

2. 사용자 별점 기능

3. 공통/레이아웃 컴포넌트
ㄴ Header
ㄴ AlertPopup
ㄴ TagCheckbox
ㄴ InputRadio

3. 잘한 점

1) 여러 곳에서 반복적으로 쓰이는 요소를 컴포넌트화 한 것

• 게시글 작성, 수정 페이지 특성상 라디오 버튼, 태그 버튼이 반복되어 사용되었고, 다른 페이지에서도 공통적으로 쓰여 재사용 가능한 컴포넌트로 만들었다. 이 때 필요한 value를 체크하는 함수도 공통으로 사용 가능하게 util 함수로 관리했다.

2) 게시판 필터 요청 URI 파라미터를 상태로 관리한 것

• 게시판에서 필터 기능은 크게 카테고리, 검색 키워드, 성별/음식 태그, 페이지 네가지 파라미터를 이용해 요청을 보내는 방식으로 구현했다. 매 요청마다 함수를 만들기엔 코드가 너무 길어지고, 중복되는 코드가 많았다. 그래서 파라미터를 상태로 관리하고 상태에서 변화가 일어나면 새로운 currentApi를 만들어 요청을 보내게 끔 코드를 작성했다.

const [currentApi, setCurrentApi] = useState<string>('');
const [filterInfo, setFilterInfo] = useState<IFilterInfo>({
    page: 1,
    category: '',
    genderTag: null,
    foodTag: null,
  });
useEffect(() => {
    const getBoardList = () => {
      axios
        .get(`/board/search?page=${filterInfo.page}${currentApi}`)
        .then((res) => {
           console.log(res);
           ...
        })
        .catch((err) => {
           console.log(err);
           ...
        });
    };
    getBoardList();
  }, [filterInfo, currentApi]);

4. Pre-Project에 비해 개선된 점

1. API 관련해서 백엔드와 적극적인 소통

• 가장 많은 요청이 이루어지고, 많은 데이터가 필요한 게시판을 담당한 만큼 명료한 소통이 필요했다. 이 정보가 여기서 왜 필요한지, 어떤 정보가 빠져도 되는지를 소통했고, 변경사항을 백엔드 분들이 바로바로 API 명세서에 반영해 서버랑 연결했을 때 큰 어려움 없이 기능을 구현할 수 있었다.

2. 문서 기록 및 갱신

• 백엔드, 프론트 모두 문서 기록에 힘을 썼다. 작게는 회의록부터, 사용자 요구사항 정의서, 화면정의서 등을 프론트에서 작성을 했고, 수정사항이 있을 시, 바로 반영 및 백엔드에도 공유했다.

5. 아쉬웠던 점

1. 구두로만 진행했던 진행 상황 공유 및 상황 진단

• 매일 회의를 2번 진행했지만 구두로만 공유했다. 프론트 끼리라도 화면을 공유해서 서로 확인을 했다면 막히는 부분을 같이 해결하고 역할을 재분담해 막판에 덜 고생하지 않았을까라는 생각을 했다.

2. 사용자에게 제공되어야하는 정보 부족

• 충분하다고 생각했던 정보들이 다른 팀원들의 프로젝트를 보니 중요한 정보가 빠졌구나라는 생각을 했다. 앞으로 고도화를 진행하며 만남 시간, 모임 장소 추가 등을 진행할 예정이다.

6. 만났던 어려움

마지막까지 우리를 고생시켰던 쿠키.. 토큰은 쿠키에 저장하고 expiredTime을 체크해 리프레시 토큰으로 엑세스 토큰을 받는 로직으로 JWT를 구현하니, 토큰이 중복해서 생기는 문제가 있었다. 에러가 떠서 게시글이 불러와지지 않고 사용자 정보가 제대로 안 뜨는 등 굉장히 크리티컬한 이슈였다. 결국 데모데이 새벽에 axios.interceptor와 localStorage를 이용해 401 Unauthorized 에러를 받으면 토큰을 재발급하는 것으로 로직을 바꿔 보다 안정적인 상태로 데모데이에서 서비스를 선보일 수 있었다. 데모데이도 끝났으니 왜 쿠키로 작업했을 때 토큰이 중복으로 발급이 됐는지 찾아봐야겠다!

프로젝트를 마치며

안 힘들었다고 하면 거짓말이다. 그래도 담당했던 기획와 디자인에서 좋은 평가를 받아 뿌듯한 마음이 훨씬 크다. 아직 끝난 게 아니다..! 리팩토링과 고도화가 남았다.. 이제 시간적 여유가 생긴만큼 작업하다 마주한 문제 또는 배운 점을 기록하면서 진행을 해야겠다!