haerhee/msgs-for-my-idol-2

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

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

< 목차 >

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

• 팀원소개

# 개인 프로젝트 소개

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

# 시작가이드

• Installation

# 와이어프레임

• 프로젝트 기능

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

프로젝트 팀 소개

팀원 소개

---

남해리
Enfj, Infp
@r03181231
FrontEnd

목표

---

- 포기하지 말자 !

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

- 끝까지 완성하자 !

프로젝트 "오늘만 한다"

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

개발 기간 : 2024. 02.18 ~ 2024.02.21 (4일)

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

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

🚦 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-2.git
$ cd msgs-for-my-idol-2
$ yarn install
$ yarn start

프로젝트 구성 및 기능

권장 요구 사항 및 필수 구현 사항

• (1) 프로젝트 셋업
• (2) “redux-thunk” 브랜치 생성 및 이동
• (3) Router 셋업
• (4) Redux를 Redux-Toolkit 으로 리팩터링
• [x]] (5) 로그인 화면 UI 작업
• (6) 로그인 화면 API 연결
• (7) Layout 컴포넌트 작성
• (8) 홈 화면 UI 수정
• (9) json-server 셋업
• (10) 홈 화면 API 연결
• (11) 상세 화면 UI 및 API 연결
• (12) 프로필 화면 UI
• (13) 프로필 화면 API 연결
• (14) 13단계까지 모두 완료하셨다면 선택구현사항들에 도전해 보시면 되겠습니다!
  

선택 구현 사항

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

2. 파일 구조

---

브랜치 이름 : redux

msgs-for-my-idol-2's Issues

[Feat] - thunk에서 반환된 data가 fulfiled에 payload로 가지 않는 버그 해결

📕 Issue Feature
thunk의 data가 fulfiled에 payload로 가지 않는 버그 해결

🧾Todo

• thunk에서 반환된 data가 fulfiled에 payload로 가지 않는 버그 해결

추측 : 오타나 action이름이 잘못 됐을 것
원인 :

1. extraReducers의 이름이 extraReducer라고 되어있어서 extraReducers의 기능이
   처음에 제대로 동작하지 않음

2. __getletterCards의 초기 이름인 __getletterCard라는 이름이 vscord 어딘가에서 충돌.
   해당 충돌구간은 vscord에서도 감지가 안 됐음
   해결 : thunk의 함수이름을 __getletterCards로 바꾸고 재구성 및 extraReducers도 재구성.

export const __getletterCards = createAsyncThunk(
  "letter/getLetters",
  async (_, thunkAPI) => {
   
  }
);

[Fix] - 로그인, 로그아웃 버그 처리

📕 Issue Feature
로그인, 로그아웃 버그 처리

🧾Todo

• 로그인, 로그아웃 버그 처리

피드백 - 박가현 튜터

안녕하세요, 해리님!
과제 구현하시느라 정말 고생 많으셨습니다 :)

체크리스트

체크 기준: 100% 구현 완료

잘 구현된 부분

• redux thunk, redux-toolkit의 사용 방법을 이해하고 적절하게 사용하였습니다.

아쉬운 부분

• 인증/인가 페이지에서 토큰이 없을 경우에 작동해야하는 function이 실행 시점이 명확하지가 않습니다. 페이지 접근할 때 작동해야하는 로직이니 useEffect 안에 넣어주세요.
  https://github.com/r03181231/msgs-for-my-idol-2/blob/87a8fd5fdb9675d9dc9e4e3a9e2afe0f7c73ffd4/src/component/layout/Layout.jsx#L22-L25
• 새로고침하면 global state가 초기화 되는데 초기화 된 global state를 localStorage에 set하게 되어 새로고침을 하면 userInfo가 정상적으로 작동하지 않고 있습니다. 이 부분에 대한 사이드 이펙트(수정,삭제 버튼 노출 여부, 수정 기능, 프로필 조회 및 수정 기능 등)로 일어나고 있는 오작동이 많아 제일 먼저 수정해주시면 좋을 것 같습니다.
  https://github.com/r03181231/msgs-for-my-idol-2/blob/87a8fd5fdb9675d9dc9e4e3a9e2afe0f7c73ffd4/src/component/layout/Layout.jsx#L13
  https://github.com/r03181231/msgs-for-my-idol-2/blob/87a8fd5fdb9675d9dc9e4e3a9e2afe0f7c73ffd4/src/component/layout/Layout.jsx#L32-L34

[Feat] - 본인이 작성한 게시물에만 수정, 삭제 버튼이 노출되게 하기

📕 Issue Feature
본인이 작성한 게시물에만 수정, 삭제 버튼이 노출되게 하기

🧾Todo

• 본인이 작성한 게시물에만 수정, 삭제 버튼이 노출되게 하기

[Feat] - URL별 instance생성 및 로컬스토리지 재사용 함수 설정

📕 Issue Feature
로컬스토리지 재사용 함수 설정

🧾Todo

• common/localStorage.js
• URL별 API생성

// localStorage.getItem
export const getLocal = (name) => {
  const storageItems = JSON.parse(localStorage.getItem(name));
  return storageItems;
};

// localStorage.setItem
export const setLocal = (name, data) => {
  const storageItems = localStorage.setItem(name, JSON.stringify(data));
  return storageItems;
};

[Init&Feat] - redux-thunk 초기화 및 로그인, 프로필 세팅

📕 Issue Feature
redux-thunk 초기화 및 로그인 세팅

🧾Todo

• redux-thunk 초기화
• 로그인 세팅
• 프로필 세팅

[Feat] 프로필 구성

[Feat] - 프로필 - 이미지 등록, 닉네임 편집 완성

📕 Issue Feature
이미지 등록, 닉네임 편집 프로필 완성

🧾Todo

• 이미지 등록
• 닉네임 편집 프로필 완성

[Feat] - letterSlice, authSlice 설정

📕 Issue Feature
modules/ letterSlice.js
,modules/ authSlice 설정

🧾Todo

• letterSlice, authSlice 설정

[Feat] - 로그인 마무리 및 에러처리

📕 Issue Feature
로그인 마무리 및 에러처리

🧾Todo

• 로그인 마무리
• 로그인 에러처리