Skip to content

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

Notifications You must be signed in to change notification settings

H0onnn/MatIssue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 

Repository files navigation

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

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

🍎 프로젝트 주제 및 기획

슬라이드1 슬라이드7 슬라이드8 슬라이드9 슬라이드10 슬라이드11 슬라이드12

🍊 팀원 소개

슬라이드4 슬라이드5

✔️ Front-End

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

✔️ Back-End

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

🍋 기술 스택

슬라이드14

🥑 API 문서

🫐 팀 컨벤션

슬라이드16 슬라이드17

✔️ 커밋 컨벤션

  • 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차 프로젝트 대상 수상

logo

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages