Skip to content
/ Recipick Public

요리 레시피를 업로드하여 공유하는 목적의 SNS <레시픽>입니다.

6 stars 3 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Bul-4-Jo/Recipick

BranchesTags

Repository files navigation

🥒 레시피를 알고싶다면 레시픽을 pick ! 🥕

[배포 URL]

recipick4186658

🍳 프로젝트 소개

[개요]

 레시픽은 요리 레시피를 업로드하여 공유하는 목적의 SNS입니다.
 서비스 사용자는 레시피 재료를 태그로 사용하여 비슷한 재료를 사용한 다른 사용자의 레시피를 참고할 수 있습니다.
 또한, 태그를 통해 자신이 직접 기른 채소와 과일 등 레시피 재료를 판매할 수 있습니다.
 이외에도 레시픽은 게시물 및 댓글 작성, 사용자 검색, 팔로우 기능을 제공합니다.

[링크]




👩‍👩‍👦‍👦 팀원 소개

강수정 손혜수 이윤구 이지운



🎯 역할분담

강수정

  • 전반적인 소스 코드 포맷 정리 및 불필요한 요소 삭제
  • 메인 프로필 페이지
    • 사용자가 포스팅한 게시물 불러오는 기능 구현
    • 사용자 게시물의 사진을 앨범형 / 리스트형으로 불러오는 기능 구현
    • 앨범형 사진 클릭시 게시물 상세 페이지로 이동하는 기능 구현
  • 프로필 수정 페이지
    • 기존 프로필 데이터 유지 기능 구현
    • 프로필 수정 유효성 검사
  • 채팅룸 페이지
    • 시멘틱한 마크업 및 반응형 스타일링 구현
  • 공통 컴포넌트
    • 상단 공통 헤더 컴포넌트 구현
    • 공용 게시물 컴포넌트(PostCard) 구현

손혜수

  • 팀 리딩
  • 전역으로 사용되는 기본 스타일 / 테마 세팅
  • 레시피 재료 태그에 따른 판매 중인 상품 필터링 기능 구현
  • 홈 피드 페이지
    • 무한 스크롤
    • 팔로워 유무에 따른 UI 구현
  • 게시글 업로드 페이지
    • 게시글 업로드 기능
    • textarea 리사이징
    • 이미지 여러 개 업로드 기능
  • 게시글 수정 페이지
    • 게시글 삭제 기능 구현
  • 팔로워 / 팔로잉 리스트 페이지 구현
    • 팔로우 / 언팔로우 기능 구현
  • 공통 컴포넌트
    • 하단 공통 탭 메뉴 컴포넌트 구현
    • 공용 유저 정보 컴포넌트 구현
    • 판매중인 상품 : 상품 업로드 / 상품 수정 페이지 / 상품 삭제 기능 구현

이윤구

  • 라우터를 활용한 유저 토큰 검증 기능
  • 프로젝트 eslint / prettier 세팅
  • 로그인, 로그아웃 기능 구현
  • 프로필 페이지 공유 버튼 기능 구현
  • splash 페이지
  • 회원가입 페이지
    • 회원가입 유효성 검사
  • 로그인 페이지
    • 로그인 유효성 검사
  • 404 페이지
  • 채팅 리스트 페이지
    • 팔로잉한 사용자 채팅리스트에 띄우는 기능 구현
  • 공통 컴포넌트
    • 공용 모달 컴포넌트 구현
    • 공용 얼럿 컴포넌트 구현

이지운

  • 라우터 설계

  • 레시픽 로고 및 배경 이미지 제작

  • 유저 검색 페이지

    • 검색 결과 구현

  • 게시글 상세 페이지

    • 여러 컴포넌트를 종합하여 사용자에 따른 기능 구현

  • 공통 컴포넌트

    • 버튼크기와 활성화에 따른 공용 버튼 컴포넌트 구현
    • 좋아요 / 좋아요 취소 기능 구현
    • 댓글 등록 / 댓글 삭제 기능 구현
    • 댓글 / 좋아요 수 증감 반영




📔 디렉터리 구조

📁public
  └─📄index.html
  |
📁src
  ├─📁API
  │   └─📄api
  |
  ├─📁Assets
  │   ├─📁Fonts
  │   ├─📁Icons
  │   └─📁Images
  |
  ├─📁Components
  │   ├─📁Comment
  │   ├─📁CommentItem
  │   ├─📁Common
  │   ├─📁FollowItem
  │   ├─📁LoginForm
  │   ├─📁PostEdit
  │   ├─📁Product
  │   ├─📁ProductEdit
  │   ├─📁ProfileEdit
  │   ├─📁Reactions
  │   ├─📁Search
  │   └─📄UserSearch.jsx
  |
  ├─📁Hooks
  |   ├─📄Hook.jsx
  |   └─📄useUploadFile.js
  |
  ├─📁Pages
  │   ├─📁Login
  │   ├─📁Main
  │   ├─📁NotFound
  │   ├─📁Post
  │   ├─📁Product
  │   ├─📁Signup
  │   └─📁Splash
  |
  ├─📁Routes
  |   ├─📄AuthRoute.jsx
  |   ├─📄NonAuthRoute.jsx
  |   └─📄Router.jsx
  |
  ├─📁Style
  |   ├─📄GlobalFonts.css
  |   ├─📄GlobalStyle.jsx
  |   └─📄GlobalTheme.js
  |
  ├─📄App.js
  ├─📄index.js
  ├─🎨font.css
  ├─🎨global.css
  └─🎨reset.css
📄.eslintrc
📄.prettierrc
📄package-lock.json
📄package.json
📄README.md



🖼 핵심 기능

1️⃣ 홈

로그인 회원가입
홈 피드 검색
채팅 404 페이지

2️⃣ 게시글

게시글 작성 게시글 수정 게시글 삭제
게시글 상세 및 댓글 댓글 삭제 댓글 신고
게시글 신고 좋아요, 좋아요 취소

3️⃣ 프로필

내 프로필 프로필 수정
팔로워, 팔로잉 타 유저 프로필 및 팔로우, 언팔로우

4️⃣ 판매 상품

상품 등록 상품 수정 상품 삭제



📍 불사조만의 뽀인트

1️⃣ 적극적인 깃허브 활용


이슈와 PR 템플릿 활용

용도별로 미리 만들어진 템플릿을 활용하여 작성자가 이슈를 손쉽게 구성하고 리뷰어가 추가적인 커뮤니케이션 없이 내용을 파악할 수 있도록 했습니다.



깃허브 이슈와 프로젝트로 일정 관리


Issue와 연동된 GitHub 프로젝트를 통해 일정을 관리함으로써 여러 서비스에 분산되지 않고 GitHub 내에서 프로젝트 관련 사항을 관리하여 작업 동선을 줄이고 코드에 집중할 수 있었습니다.



PR을 활용한 코드 리뷰

Git flow를 통한 branch 관리 전략으로 충돌을 최소화하는 협업이 가능했으며, push된 코드는 2명 이상의 코드리뷰를 통해 메인 branch에 merge함으로써 코드의 품질과 안정성을 동시에 확보할 수 있었습니다. 또한 작업 결과를 쉽게 알 수 있도록 확인 지침을 작성하거나 동영상이나 이미지 등을 적극적으로 활용하여 팀원 간 작업 내용 공유를 용이하게 했습니다.



디스코드 웹 훅

신속한 의사소통과 코드 관리를 위해 GitHub와 연동된 디스코드 웹 훅을 통해 PR, Issue 등의 변경을 관리했습니다. 해당 부트캠프 과정이 디스코드 내에서 주로 이루어졌기 때문에 디스코드에 상주하는 팀원들이 변경사항을 빠르게 확인하고 반영할 수 있었습니다.



2️⃣ 협업

대화하기

저희의 초점은 완성도 보다 협업의 경험에 두었습니다.

같이하기

코드 리뷰, 리팩토링, 공용 컴포넌트, 라이브 쉐어

각자가 맡은 파트를 구현 한 다음 하루동안 집중적으로 live share 를 통해 코드를 리뷰 및 개선하고 문제점을 해결했습니다.

해결하지 못하는 부분이 생기면 곧바로 공유하여 팀원 모두가 페어 프로그래밍을 통해 문제를 해결하는 등 원활한 커뮤니케이션을 위해 노력했습니다.




💥 트러블 슈팅

1️⃣ Portal

전반적으로 체계적인 레이아웃을 잡아주기 위해 Layout 컴포넌트를 만들고 <Header> <TabMenu> <Outlet>를 구성 하였습니다.
<Header> 와 <TabMenu> 안에 있는 디자인 컴포넌트들은 안에 갇히고 main 컴포넌트에서 처리되고 있는 data 와 Header에서 처리되는 data 또는 input value 를 서로 데이터 이동 시키기 위해서는 많은 props를 넘겨 받아와서 처리를 해주어야 하기 때문에 비효율적이라고 생각되어 React Portal을 사용하였습니다.

ReactDOM.createPortal(child, container)
  child = 랜더링 할 자식
  container = 랜더링할 장소 / 원하는 요소의 정보를 넣어줍니다

Layout 컴포넌트 Header의 Modal 버튼
Header 컴포넌트에서는 Modal / Alert 동작 및 검색 Input 동작을 하고있습니다.
Modal 컴포넌트


2️⃣ 로그인 시 api.js 에서 토큰 정보를 못 불러오는 이슈

  • 문제 상황

    • axios를 활용한 API 호출 소스 코드를 모아 api.js 파일에서 관리하고 있는 상황
    • 로그인 후 페이지 이동 시 로컬스토리지에 저장된 토큰 정보를 불러오지 못하는 문제 발생

  • 원인 추론

    • 로그인 페이지에서 이미 api.js 가 로드되어 getCookie('Token') 구문이 실행되었음
    • local storage가 비어있는 상태로 api 호출 함수가 실행되고 있는 것으로 보임

  • 해결 방법

    • axios에서 제공하는 기능인 HTTP 요청 / 응답을 가로채는 Interceptor를 활용

    • API 호출 시 local storage에 갱신된 토큰 값을 헤더에 담에 전송할 수 있도록 함



3️⃣ input 입력 시 해당 페이지의 컴포넌트가 깜빡거리는 이슈

<img src="https://user-images.githubusercontent.com/46313348/210576426-d408046f-ec4d-43f3-9910-855e7ca4a05b.png" width="60%" height="30%" alt="" />



💖 느낀점

🐣 수정

팀프로젝트에 익숙하지 않았지만, 디스코드를 통한 소통과 라이브 쉐어를 이용하여 혼자서 풀리지 않았던 코드에 대한 요청을 빨리 빨리 할 수 있어서 좋았습니다. 또한 2명 이상이 코드리뷰를 진행해야 pr승인이 되는 저희팀만의 방식이 팔로워입장에서 많은 것을 배워갈 수 있었습니다.

🐣 혜수

처음 해보는 팀 프로젝트라 어떻게 시작해야할 지 걱정이 많이 되었는데 좋은 팀원 분들을 만나서 프로젝트를 잘 진행할 수 있었습니다. 기능 구현 뿐만 아니라 협업 경험과 커뮤니케이션 능력 향상이 불사조의 목표였던만큼 혼자서는 알 수 없었던 많은 것을 느끼고 배울 수 있었던 귀중한 시간이었습니다🔥 특히 깃 이슈나 PR을 활용하여 업무 일정을 관리하고 문제가 생기면 팀원들과 함께 해결을 해나가는 과정에서 팀과 협업하고 소통하는 방법을 배울 수 있었습니다. 또한 게시글 등록, 수정 페이지를 구현하면서 컴포넌트 간 데이터를 넘겨주는 방법에 대해 고민하는 과정에서 공부가 많이 되었습니다.

🐣 윤구

제대로된 협업과 프로젝트는 처음이여서 걱정이 많았지만 프로젝트를 진행하면서 제가 얼마나 성장했고 현재위치를 알 수 있는 좋은 시간이였던것 같습니다.

🐣 지운

리액트를 배우는 중에는 계속 우주에 있었어서 프로젝트를 시작하기 전에 너무 자신이 없었는데 좋은 동료분들을 만난 덕에 즐겁게 협업하며 조금이나마 성장할 수 있었다고 생각합니다. 많이 깨지면서 저에게 부족한 점을 다시 한 번 깨닫는 시간이었다고 느낍니다.




🔥 앞으로의 도전과제

- 전역상태관리
- 아토믹 패턴 적용
- 트러블 슈팅 문서화
- 이미지 사이즈 최적화

About

요리 레시피를 업로드하여 공유하는 목적의 SNS <레시픽>입니다.

Resources

Readme
Activity
Custom properties

Stars

6 stars

Watchers

0 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages