2022 KURLY HACK FESTA 회고록 ( 디자인 및 개발 : 본선 )

✅ 개발스택

• Frontend : Javascript, Next.js, Styled-components

• Backend : Django, Python, MySQL, AWSS3

• Desgin : Figma, Zeplin, Illustrator, Photoshop

📄 페이지

컬리의 레시피게시판, 유저레시피 게시판, 후기 게시판, 팁 정보게시판, 베스트 게시판
추가기능 : 유저 레벨제도

📙 기능 소개

✔️ 컬리의 레시피게시판, 유저레시피 게시판, 팁게시판

- 컬리의 레시피는 마켓컬리에서 추천하는 레시피 공유, 유저레시피는 유저 상호간 레시피 공유 및 추천 기능
- 팁 게시판은 유저 상호간 살림이나 자취 팁 공유 기능 구현 
- 게시글 작성시 템플릿을 적용하여 디자인의 통일성과 유저 편의성 구현
- 레시피의 재료를 마켓컬리 상품과 연동할 수 있는 기능 구현
- 해시태그기능 구현으로 검색 최적화 및 연관 레시피 추천 기능 구현
- 유저들 끼리 소통할 수 있는 댓글/대댓글 기능구현, 라벨 기능도입으로 댓글별 기능분리(일반/칭찬/질문)
- 추천 및 조회수가 일정 기준을 넘어서면 베스트 게시판으로 이동 기능 구현
- 레시피 게시판은 상세페이지에서 작성자의 다른 레시피 추천/연동 기능 구현
- 팁 게시판은 팁으로 사용한 제품에 대한 제품 연동 기능 구현

✔️ 후기 게시판

- 레시피를 활용해 만든 후기 또는 기존레시피의 응용 제작 후기 등 기능을 담당
- 후기로 사용한 레시피 연동 기능 구현
- 레시피 활용시 변경된 재료 연동 기능 구현

✔️ 베스트 레시피

- 일정시간 기준 충족시 회원 레시피에서 베스트 레시피로 실시간 이동 기능

✔️ 유저 레벨제도

- 각 레벨별 해택으로 참여도를 높이고 레벨에 따라 게시글에 대한 신뢰도 파악기능
- 게시글 양, 댓글양 등을 토대로 점수반영 기능, 점수에 따라 레벨상승 기능
- 레벨별 뱃지 변동 기능

🎨디자인

디자인은 피그마를 통해서 진행하였고 완료한 디자인을 제플린으로 Export해서 margin 값, 색상, width,height 값을 프론트엔드에서 손쉽게 파악할 수 있도록 했다.

로고작업은 일러스트와 포토샵을 통해서 작업했다.

💜메인 페이지

💜컬리의 레시피

💜회원 레시피

💜BEST

💜회원 상세 페이지

💜레시피 상세 페이지

💜레시피 작성 페이지

오랜만에 디자인을 하면서, 학교에서 배웠던 내용들이 새록새록 떠올라서 나름 재미있었다. 팀원분들 께서도 원하는 디자인이 있거나 구현이 어려운 부분이 있으면 옆에서 작업하면서 바로바로 알려주셔서 유의하며 디자인 할 수 있어서 좋았고, 사용자입장에서 어떤 부분이 불편할지도 작업하며 틈틈히 지적해주셔서 부족하지만 짧은시간 대비 만족스러운 디자인이 나온 것 같다.

✨ Trello

비록 짧은 기간이었지만 트렐로를 통해 회의 내용과 각자 진행사항을 공유하였다.

✍️ 나의역할

📌 레시피 상세 페이지

레시피 상세페이지를 구현 했는데, 단락별로 프로필, 재료, 마켓컬리 구매 제품, 요리순서, 댓글, 연관레시피추천 순으로 컴포넌트를 나누어 진행하였고 마켓컬리 상품과 연관레시피 추천 부분에 사용된 캐러셀은 리랙트 슬릭 라이브러리를 통해 구현하였다.

                    <CommentTextBox>
                      <Left>
                        {tag ? <Lavel2>질문</Lavel2> : <Lavel>댓글</Lavel>}
                        <UserId>{user_name}</UserId>
                      </Left>
                      <Date>
                        {(created_at + 3240 * 10000)
                          .toString()
                          .replace('T', ' ')
                          .replace(/\..*/, '')}
                      </Date>
                    </CommentTextBox>
                  </CommentTop>
                  <CommentAndDeleteBox>
                    <CommentContent>{content}</CommentContent>
                    {localStorage.getItem('token') ? (
                      <DeleteBtn
                        src="/images/DeleteGray.png"
                        onClick={() => DeleteComment()}
                      />
                    ) : (
                      ''
                    )}

상세페이지를 진행하면서 댓글 파트에서 가장 시간을 많이 보냈던 기억이 있다.
체크박스를 통해서 일반댓글과 질문댓글을 구분할 수 있도록 라벨링처리를 해주었는데, 질문 체크박스를 체크하고 작성을 하면 체크된 부분의 true/false 값을 state에 담아서 백엔드에 POST로 보내주는 방식으로 구현을 했고, 댓글 삭제와 대댓글 포스트 및 삭제도 구현했다.

     </CommentIconBox>
                  {id === commentId && talk === true ? (
                    <SubComment
                      subCommentDataList={subCommentDataList}
                      commentId={commentId}
                      posts={posts}
                    />
                  ) : (
                    ''
                  )}

가장 어려웠던 부분은 대댓글을 구현하는 부분이었는데 처음에는 댓글과 대댓글이 모두 담긴 데이터를 받아와서 프론트 단에서 필터와 for문으로 처리하는 방식으로 코드를 구성했었다. for문을 두번이나 돌려서 하다보니 효율적이지 못한 하드코딩을 하고 있는 것 같아서 다른 방식으로 진행하였다. 그래서 백엔드 분과 함께 고민해 본 결과 댓글과 대댓글을 따로 받아서 가공된 데이터를 프론트에서 처리하는 방법으로 진행하기로 했다. 대댓글에 대한 GET요청은 dependency array안에 댓글 아이콘에 대한 state 값을 넣어줘서 대댓글 아이콘을 클릭해 대댓글 창이 열릴 때 마다 요청을 받아 올 수 있도록 진행하였다. 하지만 이런식으로 데이터를 두번에 나눠서 받아오다 보니까 대댓글의 수를 댓글 컴포넌트에서 받아올 수 없었다.

리덕스를 통해 전역으로 상태를 관리해서 대댓글 데이터를 댓글 부분에서 받아오는 방법으로 총 대댓글 수를 구현 했으면 좋지 않았을까 하는 아쉬움이 남는다.

📌 회원 상세 페이지

회원 상세페이지는 유저 정보와 작성 레시피, 작성 후기로 컴포넌트를 나눠서 구현했고 작성 레시피와 작성 후기는 다른 엔드포인트에서 각각의 데이터를 받아왔다. 카테고리를 선택함에 따라 원하는 데이터를 사용자에게 보여질 수 있도록 했다.

🥦 해커톤을 마치며

학교 다니면서 공모전은 나가 봤지만 기획자, 디자이너, 개발자가 한팀이 되어 하나의 서비스를 개발하는 해커톤은 처음 경험 해보기 때문에 처음에는 막막했다. 하지만 이런 경험을 또 언제 해보나 하는 감사한 마음으로 주어진 시간 만큼은 최선을 다해 나와 팀원들이 가진 역량을 최대한 끌어올려보자라는 목표를 가지고 열심히 했던 것 같다.

주제를 선정하기 전에 브레인 스토밍을 통해 각자의 의견들을 모아서 아이디어를 여러개 선정했고
다른 팀들과의 차별화 포인트를 위해 마켓컬리 사용을 하는 주변 지인들에게 인터뷰 및 설문지로 자료수집을 했다. 확실히 자료수집을 거치고 나니 부족했던 부분들이 하나 둘 채워져갔고 차별화 포인트에 대해서 좁혀나갈 수 있었다. 그 다음엔 가상사용자를 설정하기 위해 퍼소나를 정했고 그 퍼소나를 통해 우리가 만들고자하는, 서비스의 사용하기 전과 후의 사용자 행동 범위, 만족도, 플로우, 터치포인트 등을 시각적으로 표현하고 구체화 하는데 도움이 되었다. 플로우 차트와 인포메이션 아키텍쳐를 구성하면서 마켓컬리 커뮤니티 웹의 전반적인 기능과 구성들을 고민할 수 있었다.

서비스 기획을 마치고 참가신청을 했고, 본선진출이라는 감사한 결과를 얻게 되었다. 본선진출을 했기 때문에 기쁘기도 했지만 우리가 상상하고 기획했던 마켓컬리 커뮤니티 서비스를 실제로 개발할 수 있다고 생각하니 정말정말 설레였다. 진출 소식을 듣자마자 피그마를 바로켜고 2일정도 디자인을 영차영차 만들어 냈고 그 만들어진 디자인을 피그마와 제플린으로 팀원들과 공유해서 바로 개발할 수 있도록 하였다. 시간이 촉박했지만 그래도 그 시간안에 우리가 할 수 있는 걸 하자 최선을 다하자는 마음으로 정신없이 개발하고 수정하고 오류해결하고 회의하고 약 5일정도를 그렇게 보낸것 같다.

그렇게 정신없이 해커톤을 마치고 단기간에 다량의 업무들을 하면서 팀원들과 날도 새고 같이 제출전까지 기도하면서 기다렸던 기억들이 새록새록 떠오른다. 과거는 미화가 된다는데 그 당시에는 정말 힘들고 지쳤지만, 우리가 시작부터 끝까지 모든것을 담당해 하나의 작품을 만들어 냈다는 것이 뿌듯했고 앞으로의 개발인생에 크게 기억될 것 같았다. 해커톤을 같이 하자고 했을 때 부터 아무런 의심없이 열정적으로 임해주고 각자가 맡은일에 책임의식을 가지고 끝까지 고생하며 열심히 해준 팀원들에게 정말 감사하다고 전하고 싶다. 운이 좋게 좋은 팀원들을 만나서 기대 이상의 결과와 멋진 팀워크를 경험 했던 게 계속 기억에 남을 것 같다. THANK YOU 보리꼬리💜

🎬 시현영상