YourMoriMig Project Set-up

 

🎀 CSS 참고 사이트

• BootStrap
• Ant-design : React 기반 컴포넌트
• Material UI : React 기반 컴포넌트
• https://jungeol.github.io/2020/02/26/React-UI-Framework-비교/

 

🔗 프로젝트 환경 설정 & 의존성 설치

• create-react-app  # 보일러 플레이트
• npm i redux react-redux   # 리덕스
• npm i react-redux @reduxjs/toolkit  # 리덕스 툴킷
• npm i --save-dev redux-devtools-extension  # 리덕스 개발자 도구(빌드 시 플러그인 미포함)
• npm i react-router  # 리액트 라우터
• npm i axios  # axios
• npm install @mui/material @mui/styled-engine-sc styled-components  # Material UI
• npm install @fontsource/roboto  # Roboto Font
• npm install @mui/icons-material  # Icons
• npm install @emotion/styled @emotion/css  # Emotion(Material UI)
•  # Firebase
• Repository 생성 및 VS code - Github 연동

 

🗒 페이지 목록

• Home
• About Us
• Notice / Board - List (recyclable)
• Notice / Board - Content (recyclable)
• Notice / Board -  Write (recyclable)
• Notice / Board - Reply (recyclable)
• Gallery - List
• Gallery - Content
• Gallery - Write
• Login
• Member - Join
• Member - Update
• Member - Delete 

 

📫 API 목록

API	DOMAIN	PATH	HTTP METHOD
공지 등록	Notice	/notice	POST
공지 1건 조회	Notice	/notice/{noticeId}	GET
공지 목록 조회	Notice	/notice	GET
공지 수정	Notice	/notice/{noticeId}	PUT
공지 삭제	Notice	/notice/{noticeId}	DELETE
갤러리 글 작성	Gallery	/gallery	POST
갤러리 상세 조회	Gallery	/gallery/{galleryId}	GET
갤러리 목록 조회	Gallery	/gallery	GET
갤러리 수정	Gallery	/gallery/{galleryId}	PUT
갤러리 삭제	Gallery	/gallery/{galleryId}	DELETE
게시글 등록	Board	/board	POST
게시글 1건 조회	Board	/board/{boardId}	GET
게시글 목록 조회	Board	/board	GET
게시글 수정	Board	/board/{boardId}	PUT
게시글 삭제	Board	/board/{boardId}	DELETE
회원 가입	Member	/member	POST
로그인	Member	/member/login	POST
로그아웃	Member	/member/logout	POST
회원 정보 수정	Member	/member/{memberId}	PUT
회원 탈퇴	Member	/member/{memberId}	DELETE
아이디 중복 체크	Member	/member/{id}	GET
댓글 작성	Reply	/reply	POST
댓글 목록 조회	Reply	/reply/{replyId}	GET
댓글 수정	Reply	/reply/{replyId}	PUT
댓글 삭제	Reply	/reply/{replyId}	DELTE

 

🗂 컴포넌트 목록

• 레이아웃 : Header(⭐️상단 내비게이션 바, 메뉴 내비게이션 바), Footer, 배너
• 공통 : ⭐️모달, 표
• 데이터 등록 : ⭐️폼
• 데이터 목록 조회 : 리스트(Home, Notice, Board, Reply), 갤러리 리스트, 검색바, ⭐️페이지네이션
• 데이터 상세 조회 : 이미지 뷰어, Heading, Text, Etc.