frontendschool5 / final-20-bebemarket Goto Github PK

📑 구현할 기능의 개요

API 요청 함수 구현

📝 기능의 상세 내용

• 회원가입
• 이메일 검증 (이메일 중복 검사)
• 계정 검증 (계정ID 중복 검사)
• 한 개의 이미지(프로필 or 상품 1개 업로드)
• 로그인 ( 이메일 로그인)
• 팔로잉 게시글 목록(피드)

📌참고 사항

기타 참고 사항을 적어주세요

📑 구현할 기능의 개요

uploadProduct API 기능 추가

📝 기능의 상세 내용

• uploadProduct 이미지 - uploadImageAPI 연결
• uploadProduct 상품 등록(profile:accountname이동) - addProductAPI 연결

📑 버그 요약

• 발생한 버그에 대한 간략한 요약을 적어주세요.

📝 재현 과정

• 발생한 버그를 재현하기 위해 필요한 과정을 순차적으로 작성해주세요.

1. ~ 페이지 접속
2. ~ 버튼 클릭
3. ~ 정보 입력

😀 올바른 동작

• 프로젝트가 버그가 없을 때 어떻게 동작해야 하는지 설명해주세요.

📷 스크린샷 및 로그

• 버그를 보여주는 스크린샷이나 에러 로그를 첨부해주세요.

📌 참고사항

• 버그와 관련된 참고 사항이 있으면 기록해주세요.

📑 구현할 기능의 개요

Splash 페이지 구현

📝 기능의 상세 내용

• splash 페이지 구현

📌참고 사항

📑 구현할 기능의 개요

uploadPost 이미지를 추가하고 텍스트를 넣는 기본기능을 구현하였습니다.

📝 기능의 상세 내용

• 이미지 선택하면 미리보여주기
• 이미지 삭제
• 마크업
• axios 이용해서 데이터 보내기

📌참고 사항

기타 참고 사항을 적어주세요

📑 구현할 기능의 개요

Modal 마크업 구현 및 topNav 코드 수정

📝 기능의 상세 내용

• Modal 마크업 구현
• topNav 코드 수정

📑 구현할 기능의 개요

�SocialLogin 페이지, 스타일 구현하였습니다.

📝 기능의 상세 내용

• 상세 내용1
• 상세 내용2
• 상세 내용3

📌참고 사항

화이트 심볼 이미지 파일이 업로드 되어있지 않아서 일단 회색 심볼 이미지 이용하였습니다.

📑 구현할 기능의 개요

PostComment 컴포넌트 마크업 구현

📝 기능의 상세 내용

• PostComment 컴포넌트 마크업 구현

📑 구현할 기능의 개요

리코일을 통해 전역으로 변수 관리 및 recoilPersist()를 통한 atoms 로컬에 저장

📝 기능의 상세 내용

• index.js 랜더링 요소들 태그로 감싸 주기
• userTokenState : 로그인에 성공할 때, 로컬에 저장되는 토큰
• isLogin : 로그인에 성공할때, 로컬에 저장되는 토큰
• accountNameState : 회원가입에 성공할 때, 로컬에 저장되는 토큰

📌참고 사항

사용 예시

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const { persistAtom } = recoilPersist();

export const userTokenState = atom({
  key: 'userTokenState',
  default: '',
  effects_UNSTABLE: [persistAtom],
});

📑 구현할 기능의 개요

로그인 컴포넌트 마크업 스타일 수정 / 기능 구현

📝 기능의 상세 내용

• 공용 컴포넌트인 Input을 사용하기 위해 로그인 컴포넌트 전체 마크업 스타일 수정
• API 추가
• 이메일, 비밀번호 유효성 검사
• 로그인 버튼 활성화
• API 연결
• localStorage - 토큰 저장

📑 구현할 기능의 개요

삭제하는지 다시 물어보는 confirm 모달 구현

📑 구현할 기능의 개요

게시물에서 댓글을 입력하고 게시할 수 있는 컴포넌트의 스타일 구현

공용 컴포넌트 로그인 스타일 구현

📑 구현할 기능의 개요

팔로우,팔로잉 리스트 기능 추가

📝 기능의 상세 내용

• 유저 정보 컴포넌트 - api 연결 컴포넌트 + accountName, userToken - 팔로우 리스트 페이지

📑 구현할 기능의 개요

버튼 스타일 컴포넌트 구현하였습니다.

📑 구현할 기능의 개요

UserFollow, UserSearch 레이아웃 구현

📑 구현할 기능의 개요

공용컴포넌트 topNav 구현

📝 기능의 상세 내용

• topNav 5개 구현
• tabMenu 구현

📌참고 사항

📑 구현할 기능의 개요

스타일 구현 및 기능 구현

📝 기능의 상세 내용

• 이메일과 비밀번호를 입력받습니다.
• 이메일 유효성 검사 함수를 구현합니다.
• 이메일 중복 검사 함수를 구현합니다.
• 비밀번호 유효성 검사 함수를 구현합니다.
• 회원가입 버튼 활성화
  이메일 유효성 검사, 이메일 중복 검사, 그리고 비밀번호 유성 검사 결과 모두 true일 경우에만 활성화 되도록 한다.

📌참고 사항

navigate 함수의 인자로 경로와 이동 시 전달할 상태 객체를 받는다.
navigate('/join/profile', { state: { email, password } });
페이지 이동 시 이메일과 비밀번호를 상태 객체(state)에 포함시켜 다음 화면으로 전달합니다. 이렇게 전달한 상태 데이터는 다음 페이지의 컴포넌트에서 사용할 수 있습니다.

📑 버그 요약

• git clone 받고 npm i 를 통해 node_modules를 설치하려 하는데, 에러가 발생하였습니다.

📝 재현 과정

1. git clone 레포주소 를 통해 폴더에 파일 받기
2. 터미널에 npm i 입력
3. 에러 발생

😀 올바른 동작

• node_modules의 설치가 완료되어야 합니다.

📷 스크린샷 및 로그

📌 참고사항

• 이 오류는 프로젝트에서 [email protected]가 설치되어 있으나 styled-reset이 필요로 하는 peer dependency 버전 (">=4.0.0 || >=5.0.0")와 일치하지 않기 때문에 발생하였습니다.

📋 해결한 방법

• 적절한 styled-components 버전으로 다운그레이드

npm uninstall styled-components
npm install styled-components@5.3.3

📑 버그 요약

• TabMenu 아이콘 색상이 url pathname따라 색깔을넣어주거나 기본색상이 뜨게 했는데, 홈 부분이 계속 색상이 입혀지는 문제가 발생함.

📝 기타 사항

📑 구현할 기능의 개요

프로젝트 환경 세팅

📝 기능의 상세 내용

• CRA를 통해 리액트 설치
• styled-components 설치
• recoil 설치
• 협업을 위한 eslint / prettier 설정
• 폴더구조 설정
• 공용 icon과 image 추가
• GlobalStyled 추가

📌참고 사항

📑 구현할 기능의 개요

props를 받아서 기존의 input 컴포넌트들을 구현할 수 있는 하나의 공용 InputBox 컴포넌트 구현

📝 기능의 상세 내용

• 기존의 EmailInput 과 PasswordInput 컴포넌트 삭제
• 전달 받을 props 요소들 설정
• 스타일 구현

📑 구현할 기능의 개요

src/pages 폴더 업데이트 이전에 만들어서 commit한 profile page 파일이
추후에 push할 파일과 중복이 돼서 파일 삭제하였습니다

📝 기능의 상세 내용

📌참고 사항

�아직 commit만 하고 pr은 보내지 않은 상태입니다.
내용 수정 후 pr 보낼 예정입니다.

📑 구현할 기능의 개요

리코일 적용

📝 기능의 상세 내용

• 로그인 성공시 atom인 userTokenState 에 토큰값 저장
• 로그인 성공시 atom인 isLoginState 에 로그인상태값 저장
• 로그인 성공시 atom인 accountNameState 에 계정ID 저장

📌참고 사항

import {
  userTokenState,
  isLoginState,
  accountNameState,
} from '../../atoms/Atoms';
import { useSetRecoilState } 

const setUserToken = useSetRecoilState(userTokenState); // 로그인 성공시 토큰 저장
const setIsLoginState = useSetRecoilState(isLoginState); // 로그인 상태 관리
const setAccountNameData = useSetRecoilState(accountNameState); // 로그인 성공시 계정ID 저장

📑 구현할 기능의 개요
home/product 레이아웃 구현

📑 구현할 기능의 개요

�Profile 페이지 프레임 초안입니다.

📝 기능의 상세 내용

• 상세 내용1
• 상세 내용2
• 상세 내용3

📌참고 사항

기타 참고 사항을 적어주세요

📑 구현할 기능의 개요

로그인하면 이동하는 홈피드 페이지입니다.

📝 기능의 상세 내용

• 팔로우한 유저의 게시물이 없을땐 검색버튼을 보여주게 만들었습니다.
• 팔로우한 유저의 게시물이 있을 경우, 게시물을 4개 보여줍니다.
• 스크롤이 특정 하단 부분에 닿으면 추가적으로 4개의 게시물을 불러와줍니다.

📑 구현할 기능의 개요

사용자 페이지 구현하면서 새로운 브랜치 생성했습니다.

📝 기능의 상세 내용

• 상세 내용1
• 상세 내용2
• 상세 내용3

📌참고 사항

기타 참고 사항을 적어주세요

📑 구현할 기능의 개요

기능의 개요를 간략하게 설명해 주세요.

📝 기능의 상세 내용

• 상세 내용1
• 상세 내용2
• 상세 내용3

📌참고 사항

기타 참고 사항을 적어주세요

📑 구현할 기능의 개요

마이프로필 페이지에서 프로필 수정 버튼 누르면 실행되는 프로필 수정 페이지 구현하였습니다.

📝 기능의 상세 내용

• input의 값이 모두 채워지면 저장 버튼이 활성화 됩니다.

📌참고 사항

📑 구현할 기능의 개요

이메일 Input 박스 스타일 및 기능 구현

📝 기능의 상세 내용

• 이메일 컴포넌트
• input 박스에 포커스되면 border-bottom의 색상을 --main-color 인 #55BDB3 으로 변경
• input 박스에서 포커스 아웃되면 이메일 유효성 검사가 실행되고, false라면 에러메시지 출력
• 에러메시지 출력된 상태에서 input의 값을 모두 지우면 에러메시지 사라지게 만들기
• 에러메시지가 출력된 상태에서, 다시 올바른 형태의 이메일로 바꾸면 에러메시지 사라지게 만들기
• 패스워드 컴포넌트
• 6자리 이상 입력하지 않으면 에러메시지 보이게 만들기
• input 박스에서 포커스 아웃되면 패스워드 유효성 검사가 실행되고, false라면 에러메시지 출력
• 에러메시지 출력된 상태에서 input의 값을 모두 지우면 에러메시지 사라지게 만들기
• 에러메시지가 출력된 상태에서, 다시 올바른 형태의 패스워드로 바꾸면 에러메시지 사라지게 만들기

📑 구현할 기능의 개요

모든 페이지들의 라우팅을 한 파일에서 처리했습니다.

📑 구현할 기능의 개요

Search 페이지 마크업 구현

📝 기능의 상세 내용

• Search 페이지 마크업 구현
• TabMenu 코드 수정 -> path 에 따라 아이콘색깔 변경해주기

📑 구현할 기능의 개요

상품 삭제 및 수정, 웹사이트 방문하기

📝 기능의 상세 내용

• 상품 삭제
• 상품 수정
• 상품 누르면 웹사이트 방문하기 기능

📑 구현할 기능의 개요

채팅목록과 채팅방 마크업

📝 기능의 상세 내용

• 채팅목록
• 현재 대화가 진행중인 채팅 목록이 표시됩니다.
• 읽지 않은 메시지가 있는 채팅방의 경우 프로필 사진 좌측 상단에 작은 원으로 표시됩니다.
• 채팅방
• 채팅 입력창에 텍스트가 입력되면 전송 버튼이 활성화됩니다.
• 이미지 파일을 선택하면 전송 버튼이 활성화됩니다.
• 채팅방 상단 우측 버튼을 클릭하면 모달창이 화면 하단에 나타납니다.

📑 구현할 기능의 개요

PostDetail 페이지 구현

📝 기능의 상세 내용

• PostDetail 페이지 마크업
• PostDetail 기능 구현
• 게시물 삭제
• 게시물 수정
• 댓글 달기
• 댓글 삭제

📑 구현할 기능의 개요

홈 페이지 기능 구현

📝 기능의 상세 내용

• 팔로잉한 유저들의 게시물들이 있다면 보여줍니다.
• 스크롤이 밑으로 내려가면 추가적으로 게시물 데이터를 받아와서 보여줍니다.

📑 버그 요약

• 발생한 버그에 대한 간략한 요약을 적어주세요.

📝 재현 과정

• 발생한 버그를 재현하기 위해 필요한 과정을 순차적으로 작성해주세요.

1. ~ 페이지 접속
2. ~ 버튼 클릭
3. ~ 정보 입력

😀 올바른 동작

• 프로젝트가 버그가 없을 때 어떻게 동작해야 하는지 설명해주세요.

📷 스크린샷 및 로그

• 버그를 보여주는 스크린샷이나 에러 로그를 첨부해주세요.

📌 참고사항

• 버그와 관련된 참고 사항이 있으면 기록해주세요.

📑 구현할 기능의 개요

components/common/home 안에 HomePost 컴포넌트 코드 수정

📝 기능의 상세 내용

• 버튼누르면 PostModal이랑 연결하기

📌참고 사항

📑 구현할 기능의 개요

react-router-dom을 활용한 페이지 라우팅 처리

📝 기능의 상세 내용

• 모든 페이지 라우팅 처리

📌참고 사항

📑 구현할 기능의 개요

JoinProfile 페이지 스타일 및 기능 구현

📝 기능의 상세 내용

• 스타일 구현
• username 유효성 검사 구현
• userId 유효성 검사 구현
• userId 중복 검사 (계정 검증 API)
• 버튼 활성화
  username과 userId의 유효성 검사 결과가 모두 true일때만 활성화
• 이미지 업로드 함수 구현
• 회원가입 함수 구현

📌참고 사항

기타 참고 사항을 적어주세요

📑 구현할 기능의 개요

�Social Login 페이지에 Login 페이지 라우팅 연결하였습니다

📝 기능의 상세 내용

• '이메일로 로그인' 버튼 누르면 Login 페이지로 이동

📌참고 사항

기타 참고 사항을 적어주세요

📑 구현할 기능의 개요

UploadProduct 마크업 및 유효성검사 기능 추가

📝 기능의 상세 내용

• UploadProduct 공통컴포넌트를 활용한 마크업
• 공통 컴포넌트를 활용한 유효성 검사 및 버튼 활성화

📌참고 사항

기타 참고 사항을 적어주세요

📑 버그 요약

• 발생한 버그에 대한 간략한 요약을 적어주세요.

📝 재현 과정

• 발생한 버그를 재현하기 위해 필요한 과정을 순차적으로 작성해주세요.

1. ~ 페이지 접속
2. ~ 버튼 클릭
3. ~ 정보 입력

😀 올바른 동작

• 프로젝트가 버그가 없을 때 어떻게 동작해야 하는지 설명해주세요.

📷 스크린샷 및 로그

• 버그를 보여주는 스크린샷이나 에러 로그를 첨부해주세요.

📌 참고사항

• 버그와 관련된 참고 사항이 있으면 기록해주세요.

📑요약

TopUploadNav 코드 props전달받으면 버튼배경색 바뀌도록 수정

📌 참고사항

📑 구현할 기능의 개요

404페이지 구현

📝 기능의 상세 내용

• 404페이지 구현

📑 구현할 기능의 개요

EditPost 페이지 구현

📝 기능의 상세 내용

• EditPost 페이지 구현

📑 구현할 기능의 개요

탭 버튼을 누르면 이미지가 --main-color로 채워진 이미지로 바뀌고, description의 색상도 --main-colr로 바뀝니다.

📝 기능의 상세 내용

• 여러 페이지에서 재사용이 가능한 탭 메뉴 네브바 컴포넌트를 만듭니다.
• 두번 눌러야 탬버튼에 변화가 생기는 버그 해결

📌참고 사항

콘솔에 location 객체를 출력하면 아래와 같이 나옵니다.

아래와 같이 단순히 탭 버튼을 눌렀을 때, activeTab의 값을 변경해주게 코드를 작성하면,

const [activeTab, setActiveTab] = useState(0);
<li
          onClick={() => {
            setActiveTab(0);
            navigate('/home');
          }}
        >
          <S.Img src={activeTab === 0 ? coloredHomeIcon : homeIcon} />
          <S.P active={activeTab === 0}>홈</S.P>
        </li>

탭버튼을 누르고 다른 페이지로 이동하며 재랜더링이 일어날 떄, 현재의 activeTab 상태가 업데이트되지 않았기 때문에, 두 번 클릭해야 올바른 이미지 및 p태그 변경이 발생하게 됩니다.
이를 해결하기 위해서는 TabMenu 컴포넌트를 useEffect 훅을 사용하여 현재 라우터 위치에 따라 activeTab 상태를 변경하도록 수정해야합니다.

const location = useLocation();

useEffect(() => {
    if (location.pathname === '/home') {
      setActiveTab(0);
    } else if (location.pathname === '/chat') {
      setActiveTab(1);
    } else if (location.pathname === `/profile/${myAccountname}`) {
      setActiveTab(2);
    }
  }, [location.pathname]);

📑 버그 요약

• 기존 코드는 회원가입시 프로필이미지를 설정할때
  createObjectURL(e.target.file[0]) 을 사용하였기 때문에
  프로필 이미지를 blob이라는 url로 생성하셨는데
  이 blob은 로컬스토리지에 저장하지않으면 사라져서
  나중에 프로필 정보를 불러올때 프로필 이미지가 사라지는 현상이 발생

uploadImageAPI 를 이용하여 우선 서버에 이미지를 저장한후, 이미지가 담겨진 이미지url 을 가져옴
uploadImageAPI(image).then((img) => { //(img)에는 이미지url
setImage(img);
});