항해 6주차 팀과제 1 : React, Redux-Toolkit, Spring 등을 활용한 미니프로젝트 만들기

🎞출발 비디오 여행!

프로젝트 설명 : MZ 세대를 위한 추억 미디어 공유 플랫폼 목차

👨‍👧‍👧 팀원소개!

이름	파트
이재선(팀장)	BE
백나윤	BE
김병현	BE
조민지	FE
임효진	FE

프로젝트 소개

리액트 심화 및 리덕스 기본기를 바탕으로 한 미니프로젝트 만들기
제한 및 공통 사항 :

컴포넌트 및 UI는 자유로 한다.

ducks 패턴 활용한다.

Redux 등 심화 과정에 필요한 자료를 활용한다.

백엔드와의 협업

와이어프레임

버셀 배포 페이지

기술 스택

HTML / CSS in JS / JavaScript / React / Redux / Redux Toolkit / git / gitHub / spring

구현 기능

기능 1 : react- router-dom 통한 페이지 별 관리

Managing page by page through react-router-dom

Home화면, 보고싶은 미디어 화면, 미디어 카드 확인, 상세페이지 등 react-router-dom으로 관리(url params)
Home Screen, Media Screen, Media Card Check, Detailed Page, etc.
react router-dom Management (via url parmarms)
router에서 url 상세 관리
Manage details on the router
navigate로 페이지 이동
Add the ability to move pages to Navigate

기능 2 : 미디어 카드 CRUD

게시물인 카드의 생성, 읽기, 수정, 삭제 기능 모두 구현
Implement the features to create, read, modify, and delete cards that are posts
CRUD 모두 리덕스 툴킷 + thunk 활용(TodosSlice)
CRUD all leverages the redux toolkit + middleware(Thunk) (ContentSlice)
CRUD 모두 미들웨어 이용한 action Dispatch -> 리듀서 과정 비동기 처리
CRUD all uses middleware to process action Dispatch -> reducer asynchronously
토글 기능 활용한 수정 창 숨기기
Hide the correction window using the Toggle function

기능 3 : 댓글 CRUD

게시물의 댓글의 생성, 읽기, 수정, 삭제 기능 모두 구현
Implement the feature to create, read, modify, and delete comments in a post
CRUD 모두 리덕스 툴킷 + thunk 활용(commentsSlice)
CRUD all leverages the redundancy toolkit + thunk (commentsSlice)
CRUD 모두 미들웨어 이용한 action Dispatch -> 리듀서 과정 비동기 처리
CRUD all uses middleware to process action Dispatch -> reducer asynchronously
댓글은 필터링 통해 부여해준 게시물과 연관된 id로 걸른 후모든 게시물에서 같은 댓글이 보이지 않게함
Make sure the comments don't show the same comments in all posts after walking to an ID associated with the posts you were given through filtering
수정은 토글 식으로 관리
manage modify feature with togle type

컴포넌트와 나눈 이유

The reason why we devided components

Ducks 패턴 활용 통한 컴포넌트 나누기

Sharing components using Ducks pattern

1. Components

Comments.jsx : 댓글 관리
Comments.jsx: Comment management
List.jsx : 게시물 랜딩
List.jsx: load to landed cards list
Header.jsx & Layout.jsx : 홈페이지 전반적 레이아웃
Header.jsx & Layout.jsx: The overall layout of the website

2. Pages

Login.jsx : 회원 로그인
Login.jsx: Log in as a member
Signup.jsx : 회원 가입
Signup.jsx: Sign up
Home.jsx : 홈페이지
Home.jsx: Homepage
Detail.jsx : 카드별 상세정보
Detail.jsx: Details of each card
Addcard.jsx : 카드 추가 페이지
Addcard.jsx: Add a card

3. redux & Router & hooks & element

modules > todosSlice.js : todo의 Reducer 관리
modules > CommentsSlice.js : comment의 Reducer 관리
shared > Router.jsx : react-router-dom 방식에 따라 Home, 상세페이지 이동 위한 설정으로 패턴 관리
hooks > useInput.js : useInput이라는 커스텀훅을 이용한 todoList input하기.
element > button.js : 버튼 일원화 관리

kimByeoungHyun / HanghaeW6