h0onnn/matissue

"세상의 모든 맛있는 이슈를 담다." 요리 레시피 공유 플랫폼 맛이슈

🍳 맛이슈 (MatIssue) : "세상의 모든 맛있는 이슈를 담다"

로고 클릭 시 맛이슈 홈페이지로 이동합니다 🚕 =3

🍎 프로젝트 주제 및 기획

발표 전체 PPT

🍊 팀원 소개

✔️ Front-End

• 장윤수 (FE 팀장)
  • 메인페이지, 헤더 푸터 레이아웃, 로그인 페이지, 회원가입 페이지, 아이디 비밀번호찾기 페이지, 관리자 페이지
• 이수현
  • 레시피 조회 페이지, 레시피 스크랩 페이지, 유저 페이지 (유저 레시피 / 팔로워 / 팔로잉)
  • (재료 체크리스트, 목차바 & 스크롤 진행바, 팔로우 기능 및 목록, 프로필 카드, 댓글, 좋아요, 공유, 스크랩, 웹 및 모바일 반응형)
• 이나현
  • 마이페이지 (유저프로필, 레시피 조회/삭제, 회원정보수정(프로필사진 업로드/ 비밀번호 변경 / 회원탈퇴), 모달창)
• 김동균
  • 레시피 등록 페이지, 레시피 수정 페이지, 레시피 이상형 월드컵 게임 (웹 및 모바일) 구현, 맛이슈 홍보 영상 제작
• 임정훈
  • 게시물 검색 페이지 (웹 및 모바일) 구현
  • (레시피 썸네일 컴포넌트, FilterBar 및 Tag, 정렬 버튼, 페이지네이션, 무한스크롤, 관련 API 연결, MBTI, Kakao API를 이용한 공유 기능)

✔️ Back-End

• 신유빈 (팀장)
• 송호준 (BE 팀장)

🍋 기술 스택

🥑 API 문서

• ERD
• Swagger
• Redoc

🫐 팀 컨벤션

✔️ 커밋 컨벤션

• Feat: 새로운 기능 추가
• Fix: 버그 수정
• Docs: 문서 변경
• Design: CSS 등 사용자 UI 디자인 변경
• Style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
• Refactor: 코드 리팩토링
• Test: 테스트 코드 추가, 리팩토링 테스트 코드 추가
• Chore: 빌드 작업, 패키지 매니저 수정
• Comment: 필요한 주석 추가 및 변경
• Rename: 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
• Remove: 파일을 삭제하는 작업만 수행한 경우
• !BREAKING CHANGE: 커다란 API 변경의 경우
• !HOTFIX: 급하게 치명적인 버그를 고쳐야 하는 경우

✔️ 컴포넌트 내 코드 작성 구조

import { useEffect, useState, useRef } from "react";
import route from "next/navigate"

// file-scope constant
const ONE = 1;
const MY_NAME = "YOONSU";

const Page = (props) => {
	const { a, b, c } = props

  // state
  const [state, setState] = useState();

	// constant
	const route = useRoute();
	const ref = useRef();

  // handler
  const buttonClickHandler = () => {
    console.log("click");
  };

  // useEffect
  useEffect(() => {
    console.log("useEffect");
  }, []);

  return <></>;
};
export default Page;

✔️ Git Branch 관리

master
├── dev-fe
│   ├── feature/user
│   │   │feature/postList
│   │   │ feature/main
│   │   │ feature/ViewPage
│___│___└── feature/my-page

feature/(기능명)으로 개인 작업 브랜치 생성, 기능구현 후 dev에 PR

✔️ 협업 툴

• Figma : 초반 기획시 빠른 레이아웃을 잡기 위해 사용
• Notion : 팀 페이지, 스크럼 정리, 문서 정리
• Gather : 팀원간 커뮤니케이션 및 온라인 스크럼 진행
• Gitlab : Code Repository
• Discord : 팀원간 커뮤니케이션을 위해 사용
• �Swagger : API 테스트 진행

🍆 배포

✔️ Front-End

• pm2를 이용한 서버 오픈 및 nginx를 활용한 배포

✔️ 서버 실행 방법

git clone {.....repository_name}.git
cd {repository_name}
npm install
npm run dev

✔️ .env 설정

NEXT_PUBLIC_KAKAO_API_KEY={OUR_KAKAO_KEY}
NEXT_PUBLIC_AWS_ACCESS_KEY_ID={AWS_KEY}
NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY={AWS_ACCESS_KEY}
NEXT_PUBLIC_AWS_BUCKET_NAME={AWS_NAME}

🏆 엘리스 SW 4기 2차 프로젝트 대상 수상