haerhee/msgs-for-my-idol

내가 응원하고 싶은 연예인에게 전하는 메세지를 남기는 사이트

개인 프로젝트 "내 연예인을 위한 MSGs"

< 목차 >

# 개인 프로젝트 팀 "내 연예인을 위한 MSGs

• 팀원소개

# 개인 프로젝트 소개

• 개발 기간, 프로젝트 명&소개&목표

# 시작가이드

• Installation

# 와이어프레임

• 프로젝트 기능

  • 필수 요구 사항
  • 선택 사항
  • 파일 구조

프로젝트 팀 소개

팀원 소개

---

남해리
Enfj, Infp
@r03181231
FrontEnd

목표

---

- 포기하지 말자 !

- 피할 수 없으면 돌아가자 !

- 끝까지 완성하자 !

프로젝트 "오늘만 한다"

프로젝트 명 : MSG ( 내 연예인을 위한 Messages)

개발 기간 : 2024. 01.30 ~ 2024.02.03 (5일)

프로젝트 소개 : 내가 응원하고 싶은 연예인에게 전하는 메세지를 남기는 사이트

프로젝트 목표 : 좋아하는 다수의 연예인에게 각각 응원메세지를 남길 수 있는 서비스

🚦 Project Rules

개발 환경

• editor : Visual Studio Code
• environment : git, github
• development : Javascript, react18.2.0, CSS3, HTML5

Code Convention

• JSX파일 이름 : 파스칼케이스

• JSX파일 내 상위 함수의 변수 : 파스칼 케이스 (ex. export const Pascal = () => {} export Default)

• style 파일 이름 : 파스칼케이스

• 변수 : 카멜케이스

• 클래스명 : 대쉬(-)

• 시멘틱태그로 영역 구별 (ex. header, main, section, footer)

• branch 이름 : props-drilling, context(contextAPI만 이용), redux(redux만 이용)

• issue 이름 : [타입] - 설명 ( ex. [Feat] - search 기능 구현 )

개인 작업하기

• 기능 개발을 위해 작성한 이슈 번호를 사용하여 branch를 생성합니다. (ex. (git branch 사용법 참고))

• 작업 전에 develop branch를 반드시 pull하고 시작합니다. (git pull origin develop)

• commit은 컨벤션을 지켜 메세지를 적습니다.

• push은 해당 작업 branch에 합니다.

• pull request도 컨벤션을 지켜 생성합니다.

• 팀원들의 코드리뷰를 받았으면 merge 합니다.

• 꼭! 브랜치를 헷갈리지 않도록 합시다. 이슈번호 확인!

Commit Convention

commit type

• Feat : 기능 구현
• Chore: 기능 변경 없는 코드 변경 사항
• Del : 코드 삭제
• Fix : 버그 수정
• Docs : 문서 수정
• Style : UI 추가 및 수정
• Refactor: 코드 리팩토링
• Test : 테스트 코드, 리팩토링 코드 추가
• Setting: 프로젝트 세팅

commit message

• 모든 커밋 메세지 뒤에는 이슈번호를 태깅합니다.
• 커밋 메세지 영어로
• 모든 커밋 메세지는 { [타입/#이슈번호] 메세지 } 로 작성합니다.
• ex) [Feat/#1] add splash screen

시작 가이드

Installation

$ git clone https://github.com/r03181231/msgs-for-my-idol.git
$ cd msgs-for-my-idol
$ yarn install
$ yarn start

프로젝트 구성 및 기능

권장 요구 사항

• (1) 프로젝트 셋업

  • CRA boilerplate 로 프로젝트 생성
  • pages/ , components/ , shared/ , assets/ 폴더 작성 및 필요 컴포넌트 사전 작성
  • styled-components, react-router-dom 설치
  • title 변경 (index.html)
  • jsconfig.json (src 폴더 기준 절대경로 설정)
  • 제출된 깃헙에는 props-drilling, context, redux 라는 이름의 각각의 브랜치명이 있어야 합니다.
  • props-drilling 브랜치에서는 context나 redux 없이 useState만으로 상태관리해서 코드를 작성합니다.
  • props-drilling 으로 코드를 모두 작성 및 커밋을 완료했으면 context 브랜치로 생성 및 이동합니다.
  • context 브랜치에서는 props-drilling으로 작업한 코드에서 react context API를 사용하여 전역상태를 이용한 코드로 리팩터링합니다.
  • context 브랜치에서 리팩터링 및 커밋을 완료했으면 redux 브랜치 생성 및 이동합니다.
  • redux 브랜치에서는 context api로 전역상태를 관리한 코드를 모두 redux 라이브러리를 이용한 코드로 리팩터링합니다.
  
  

필수 구현 사항

• 팬레터 CRUD 구현 (작성, 조회, 수정, 삭제)
• 아티스트별 게시물 조회 기능 구현 (Home - Read)
• 원하는 아티스트에게 팬레터 등록 구현 (Home - Create)
• 팬레터 상세 화면 구현 (Detail - Read)
• 상세화면에서 팬레터 내용 수정 구현 (Detail - Update)
• 상세화면에서 팬레터 삭제 구현 (Detail - Delete)

필수 요구 사항! 아래 내용을 꼭 지켜면서 구현해 주세요!

• styled-components 를 이용하여 스타일링

  • 인라인 스타일링이나 일반 css 파일을 이용한 스타일링 방식 지양 (이번 과제 한정)
  • 모든 태그를 styled-components 화 할 필요는 없으나 스타일링이 들어가는 경우는 styled-components 화 할 것

• 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정

• styled-components에 props를 넘김으로 인한 조건부 스타일링 적용

  • 아티스트 선택탭에 적용해 보세요

• 팬레터 등록 시 id는 uuid 라이브러리를 이용

  https://www.npmjs.com/package//uuid

선택 구현 사항

• 모달 구현
  • window.alert 이나 window.conform 대신 직접 구현한 모달을 적용해 봅시다.
• 만능 버튼 구현(공통 컴포넌트 버튼)
  • 하나의 버튼 컴포넌트를 홈화면과 상세화면 모두에서 적용할 수 있도록 해봅시다.
  • props 로 버튼 크기나 버튼 텍스트 등을 받아봅시다.
• 새로고침해도 UI 유지
  • 로컬스토리지를 이용해 봅시다.
• 검색 기능 구현
  • query string을 적용해 봅시다. (ex. http://localhost:3000?search=에스파)
  • react-router-dom의 useSearchParams를 이용해 보세요.

브랜치 구조

• Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치

2. 파일 구조

---

브랜치 이름 : props-drilling(정식명칭: prop-drilling)

---

브랜치 이름 : context

---

브랜치 이름 : redux

msgs-for-my-idol's Issues

[Feat] - 상세페이지

📕 Issue Feature
상세페이지 연결

🧾Todo

• 상세페이지 연결
• 작업사항

[Feat] - 팬레터 조회

📕 Issue Feature
팬레터 조회

🧾Todo

• 팬레터 조회
• 작업사항

[Feat] 프로젝트 초기화 및 설정

📕 Issue Feature
프로젝트 초기화 및 설정

🧾Todo

• 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정 => GlobalStyle
• styled-components, react-router-dom 설치

피드백 - 박가현 튜터

안녕하세요, 해리님!
과제 구현하느라 고생 많으셨습니다. :)
기능 구현 뿐만 아니라 readme까지 정성스럽게 작성해주셔서 추후 프로젝트 복기할 때나 포트폴리오 작성할 때 크게 도움이 될 것 같습니다.
커스텀 훅을 만드시고 적용할 때 고생 많이 하신 것으로 알고 있는데, 구현에 성공하시고 적용까지 깔끔하게 하신 부분에 대해서 크게 칭찬드립니다!

Props Drilling

<잘 구현된 부분>

• 필수 기능이 정상적으로 작동합니다.
• state를 상위 컴포넌트에 선언하여 컴포넌트 구조를 효율적으로 짜여졌고, props를 적절하게 전달하고 있습니다.
  https://github.com/r03181231/msgs-for-my-idol/blob/eba77f19b88ce1428138f4c9fb7c7ded386bfd97/src/shared/Router.jsx#L8-L27
• 커스텀 훅을 직접 구현하고, 적용하여 컴포넌트 재사용성을 높였습니다.
  https://github.com/r03181231/msgs-for-my-idol/blob/d77853cf290150f82f7c68ec166949bfdeec6dc9/src/component/main/addform/formAdd/FormAdd.jsx#L19-L26

<아쉬운 부분>

• styled~.jsx가 없는 컴포넌트도 폴더화를 하셔서 오히려 폴더, 파일 구조 가독성이 떨어집니다. 필요한 부분만 폴더로 묶으면 훨씬 가독성이 좋아질 것 같습니다.
• Form과 Detail에 스타일이 거의 없는 부분이 아쉽습니다. 시간상 빠듯했다는 것을 알지만, 프로젝트 스케줄링을 할 때 css 작업, 퍼블리싱에 대한 시간도 꼭 고려를 해주는 것이 좋습니다.

Context API

<잘 구현된 부분>

• 필수 기능이 정상적으로 작동합니다.
• Context API의 사용 방법을 이해하고 적절하게 사용하였습니다.
  https://github.com/r03181231/msgs-for-my-idol/blob/b5f6addde5fff8b98a165ecda9ed8a52da479a4c/src/App.jsx#L49-L51

Redux

<잘 구현된 부분>

• 필수 기능이 정상적으로 작동합니다.
• Redux의 개념과 사용방법을 이해하고 적절하게 사용하였습니다.

<아쉬운 부분>

• filter과 같은 global state를 가공하는 비즈니스 로직을 redux reducer의 return문 앞에 작성하면 global state의 재사용성을 높일 수 있습니다.

[Feat] - cardList 구성

📕 Issue Feature
cardList 구성

🧾Todo

• cardList 구성
• 작업사항

[Feat] - 수정, 삭제 기능 및 해당 유효성 구현

📕 Issue Feature
수정, 삭제 구현

🧾Todo

• 수정, 삭제 구현
• 유효성 구현

[Fix] - 휴먼에러 중첩객체 해결

📕 Issue Feature
휴먼에러 중첩객체

🧾Todo

• 휴먼에러 중첩객체
• [ ]

[Feat] - props-drilling 이전 상태 복구

📕 Issue Feature
전체 파일 변수, 데이터 위치 수정
🧾Todo

• 전체 파일 변수 수정
• 데이터 위치 수정

[Feat] - 리덕스 상태 개선 완료 -이후 메인 스타일링 하기

📕 Issue Feature
리덕스 상태 개선 완료

🧾Todo

• context흔적 지우고 리덕스 방법으로 상태 관리 교체
• 리덕스 코드 정리

[Feat] - ContextAPI로 state 관리 개선

📕 Issue Feature
App.js에 모아서 전역적으로 사용

🧾Todo

• createContext 사용
• useContext 사용
• Provider 사용

[Feat] - 리덕스 상태관리 개선

📕 Issue Feature
리덕스 설정

🧾Todo

• 리덕스 설치 및 설정
• 초기 작업