README.md

목차

1. 서비스 소개
2. 팀원 소개
3. 기능 소개
4. 상세 담당 업무
5. 개발 일정
6. 개발 환경 및 기술 스택
7. 프로젝트 폴더 구조
8. 협업 능력
9. 소감

🍚서비스 소개

‘해머거’는 밥을 해서 먹으라는 ‘해 먹어’를 귀엽게 발음했습니다. 무엇을 먹을지 고민하는 사람들을 위해 그 음식의 레시피를 알려주고, 음식을 추천도 해주며 먹은 음식을 올리며 소통하는 사이트 입니다. 무엇을 먹을지 고민 하는 시간을 줄여주고 북마크 해 놓은 음식을 직접 해보고 후기를 남기며 음식을 해서 먹는 즐거움을 줍니다.

🍚 해머거 바로가기

👨‍👩‍👧‍👦팀원 소개

FE 이소정	FE 박지성	FE 서진희
팀장	디자인 마스터	노션 마스터
📝 프로젝트 기록

💡기능 소개

메인 페이지

헤더	메인	푸터

로그인

로그인	테스트 로그인

회원가입

회원가입	약관동의	정보입력

오늘뭐먹지?

목록	검색	무한스크롤

해머거 레시피

목록	검색	페이지네이션

상세	후기 작성	후기 삭제

북마크 등록	카카오톡 공유

나만의 레시피

목록	검색

상세	등록

기타

에러	로딩

💻상세 담당 업무

👧🏻 이소정(팀장)

• 🌟 메인 페이지 🏃🏻‍♀️‍➡️ 자세한 내용 보러가기

  • 오늘의 추천 레시피 메뉴
  • 인기 해머거 레시피 메뉴
  • 최근 나만의 레시피 메뉴
  • 레시피 검색
  • 최근 본 레시피 🏃🏻‍♀️‍➡️ 자세한 내용 보러가기

• 🌟 오늘 뭐먹지?

  • 날씨/요일별 추천 레시피 목록 (무한 스크롤)

• 🌟 해머거 레시피

  • 목록

    • 갤러리형 게시판
    • 카테고리, 검색 기능
    • 페이지네이션

  • 상세 🏃🏻‍♀️‍➡️ 자세한 내용 보러가기

    • 조리식품의 레시피 데이터(이름, 사진, 재료, 단계별 레시피) 노출
    • 후기 등록/수정/삭제 🏃🏻‍♀️‍➡️ 자세한 내용 보러가기
    • 북마크 추가/삭제
    • 카카오톡 공유하기

• 🌟 공통 컴포넌트

  • 레이아웃(헤더 ,푸터)
  • 버튼
  • 로딩 페이지
  • 에러 페이지
  • 첨부파일 이미지 미리보기
  • 모달 🏃🏻‍♀️‍➡️ 자세한 내용 보러가기
  • 페이지네이션 🏃🏻‍♀️‍➡️ 자세한 내용 보러가기

🧒🏻 박지성

• 🌟 나만의 레시피 게시판(커뮤니티)

  • 게시판 목록

    • 갤러리형 게시판
    • 검색 기능

  • 게시물 등록

    • 메인 이미지, 이름, 재료 설명

  • 게시물 상세

    • 메인 이미지, 이름, 재료(한 번에 보여주기), 작성자

👩🏻 서진희

• 🌟 회원가입

  • 이메일 중복 확인
  • 비밀번호, 비밀번호 확인
  • 닉네임, 생년월일, 프로필 이미지
  • 개인 정보 활용 동의

• 🌟 로그인

  • 이메일, 비밀번호 로그인
  • 이메일 저장 버튼 (로컬 스토리지에 저장)
  • 로그인 완료시 이전 페이지로 이동
  • 테스트 로그인
  • 로그아웃
  • 카카오 로그인/회원가입

• 🌟 로그인 유지

  • 로그인 시 2시간이 지나면 자동으로 토큰 갱신하여 로그인 유지

• 🌟 마이페이지

  • 회원 정보 수정하기
  • 북마크 목록 불러오기

📅개발 일정

2024. 03. 28 ~ 2024. 04. 24

기간	내용
03. 28 - 04 .07	기획
04. 03 - 04 .10	UI 디자인
04. 10 - 04. 25	마크업 및 기능 개발
04. 23 - 04. 24	QA 기간
04. 30 - 06. 12	리팩토링 기간

🔨개발 환경 및 기술 스택

Tools

Git	Github	Discord	Notion

Front-end

Html	CSS	React	React- Router	esLint	Prettier	React- Query	Zustand

개발 환경

구분	종류
FrontEnd	React, Axios, CSS module, Zustand, React-Query
BackEnd	open market API, 식품의약품안전처 조리식품의 레시피 API, 날씨 API

라이브러리 사용 이유

종류	이유
React	재사용 가능한 컴포넌트 사용하기 위해 사용
Zustand	단순한 상태 관리와 용이한 유지 보수를 위해 사용
Axios	HTTP 통신 로직을 쉽게 관리하기 위해 사용
CSS Module	스타일 관리의 복잡성을 줄이고 유지 보수성을 향상 시키기 위해 사용
React Query	서버 동기화를 간편하게 사용하고 무한 스크롤 구동을 위해 사용

📂프로젝트 폴더 구조

해머거

├── App.css
├── App.jsx
├── assets
│   └── lottie
│       ├── error.json
│       ├── loading.json
│       └── noData.json
├── components
│   ├── Button
│   │   ├── Button.jsx
│   │   └── Button.module.css
│   ├── Loading
│   │   └── Loading.jsx
│   ├── Modal
│   │   ├── Modal.jsx
│   │   └── Modal.module.css
│   ├── Mypage
│   │   ├── MypageMenu.jsx
│   │   └── MypageMenu.module.css
│   ├── NoData
│   │   └── NoData.jsx
│   ├── Pagination
│   │   ├── Pagination.jsx
│   │   └── Pagination.module.css
│   ├── Recipe
│   │   ├── Detail
│   │   │   ├── Banner
│   │   │   │   ├── Banner.jsx
│   │   │   │   └── Banner.module.css
│   │   │   ├── Bookmark
│   │   │   │   ├── Bookmark.jsx
│   │   │   │   └── Bookmark.module.css
│   │   │   ├── Content
│   │   │   │   ├── Content.jsx
│   │   │   │   └── Content.module.css
│   │   │   ├── Ingredient
│   │   │   │   ├── Ingredient.jsx
│   │   │   │   └── Ingredient.module.css
│   │   │   ├── Reply
│   │   │   │   ├── List.jsx
│   │   │   │   ├── List.module.css
│   │   │   │   ├── Register.jsx
│   │   │   │   ├── Register.module.css
│   │   │   │   ├── Reply.jsx
│   │   │   │   └── Reply.module.css
│   │   │   ├── Share
│   │   │   │   ├── Share.jsx
│   │   │   │   └── Share.module.css
│   │   │   ├── Sidebar
│   │   │   │   ├── Sidebar.jsx
│   │   │   │   └── Sidebar.module.css
│   │   │   ├── Step
│   │   │   │   ├── Step.jsx
│   │   │   │   └── Step.module.css
│   │   │   └── SubTitle
│   │   │       ├── SubTitle.jsx
│   │   │       └── SubTitle.module.css
│   │   └── List
│   │       ├── List.jsx
│   │       └── List.module.css
│   ├── Search
│   │   ├── Search.jsx
│   │   ├── Search.module.css
│   │   ├── Type.jsx
│   │   └── Type.module.css
│   ├── Signup
│   │   ├── SignupSteps.jsx
│   │   └── SignupSteps.module.css
│   ├── Title
│   │   ├── Title.jsx
│   │   └── Title.module.css
│   ├── layout
│   │   ├── Footer.jsx
│   │   ├── Footer.module.css
│   │   ├── Header.jsx
│   │   ├── Header.module.css
│   │   ├── index.jsx
│   │   └── index.module.css
│   ├── login
│   │   ├── LoginLayout.jsx
│   │   └── LoginLayout.module.css
│   └── socialLogin
│       └── SocialKakao.jsx
├── hooks
│   └── useCustomAxios.mjs
├── main.jsx
├── pages
│   ├── ErrorPage.jsx
│   ├── ErrorPage.module.css
│   ├── Home.jsx
│   ├── Home.module.css
│   ├── auth
│   │   └── Kakao.jsx
│   ├── myRecipe
│   │   ├── MyRecipeDetail.jsx
│   │   ├── MyRecipeDetail.module.css
│   │   ├── MyRecipeList.jsx
│   │   ├── MyRecipeList.module.css
│   │   ├── MyRecipeRegister.jsx
│   │   └── MyRecipeRegister.module.css
│   ├── mypage
│   │   ├── BookMark.jsx
│   │   ├── BookMark.module.css
│   │   ├── EditProfile.jsx
│   │   ├── MyPage.jsx
│   │   └── MyPage.module.css
│   ├── recipe
│   │   ├── RecipeDetail.jsx
│   │   ├── RecipeDetail.module.css
│   │   └── RecipeList.jsx
│   ├── todayRecipe
│   │   ├── TodayRecipeList.jsx
│   │   └── TodayRecipeList.module.css
│   └── user
│       ├── Login.jsx
│       ├── Signup.jsx
│       ├── Signup.module.css
│       ├── SignupStepOne.jsx
│       ├── SignupStepThree.jsx
│       ├── SignupStepTwo.jsx
│       └── SignupStepTwo.module.css
├── routes.jsx
├── utils
│   ├── kakaoInit.mjs
│   └── uploadImage.mjs
└── zustand
  ├── modalStore.mjs
  ├── recentlyViewStore.mjs
  └── userStore.mjs

🙏🏻협업능력

Notion

회의록 작성, 개발 방향 등 정보 참고 노션 기능을 사용하여 매일 아침과 저녁에 스크럼 회의를 했습니다. 각자의 작업 현황과 어려웠던 점 등을 공유하는 시간을 가졌습니다.

Discord

화면 공유, 음성 채널로 회의 및 원활한 커뮤니케이션 팀원들과 화면 공유 기능을 통해 문제 파악 및 해결을 했습니다.

FIGMA

디자인 적인 수정사항 파악 팀원들과 피그마로 와이어 프레임 구성하고, 실시간으로 회의하며 작업 현황을 파악하며 수월하게 작업을 했습니다.

GitHub

깃허브 팀프로젝트 기능으로 개발버전 관리 팀 저장소를 포크해서 개인 저장소에서 작업하고 팀프로젝트 dev에 PR을 보내 머지하는 방식으로 작업하여 메인버전에 실수로 머지 할수 있는 경우를 줄여 안정적으로 작업할수 있었습니다.

💬소감

🍚 이소정

첫번째 팀 프로젝트로, 팀장으로 부족한 점이 많았지만 많이 성장할 수 있는 좋은 기회였습니다. 팀원들과의 많은 의논과 여러 컨벤션을 정하고 지키며 경험한 협업은 코드를 재사용하고 효율적으로 작성하는데 중요한 것임을 깨달을 수 있었습니다. 짧은 시간동안 기능을 구현하며 예상치 못한 오류를 많이 마주했지만 그만큼 제대로 코드를 이해하고 능동적으로 작성할 수 있었습니다. 프로젝트 기간동안 고생한 팀원들에게 감사드립니다.

🍚 박지성

디자인 담당으로 참여한 이번 협업을 통해 작업을 해보기 전에는 짮은 시간으로 구현이 가능할거 같다 생각한 것들이 실제로 작업을 하며 생각했던것 보다 많은시간을 필요로 했던 부분이 많았습니다. 그러다보니 시간을 효율적으로 쓰는 방법을 중점적으로 생각하며 프로젝트에 임하였고, 또한 협업시 팀원과 소통하는 것이 얼마나 중요한지에 대해 느낄수 있었습니다 끝까지 포기하지 않고 함께해준 팀원분들 정말 감사합니다

🍚 서진희

프로젝트를 마무리하면서 지난 시간을 돌이켜보면 그동안 제대로 알지 못한 github, API 서버 통신 등을 더 자세히 알게 된 시간이었습니다. 이런 기술뿐만 아니라 팀원들과 협업하며 소통하고 문제를 해결해 나가는 것에 대해서, 어렵지만 즐거웠던 시간이었다고 느꼈습니다. 그리고 팀원들을 잘 이끌어 주신 팀장님 덕분에 프로젝트가 잘 마무리될 수 있었습니다. 많이 배울 수 있었던 첫 프로젝트였습니다. 감사합니다.