Codeit Sprint FE 6기 Part2 12Team

epigram

다른 사람들의 감정을 공유해 보세요

10팀 팀원

팀장 김용인	고한샘	이기주	이정윤	조예은

작업 내용

고한샘 : 프로젝트 전반적인 코드 참여

• 공용 컴포넌트 작업
  • comment 컴포넌트 100%
  • calendar 컴포넌트 50%
• 검색페이지, 랜딩페이지 100%
• 헤더 컴포넌트 100%
• 간편로그인 구현 30%
• 전체적인 리펙토링

목차

1. 프로젝트 소개

• 개발환경
• 시연영상

2. 프로젝트 구성

• User Flow
• 폴더 구조

3. 주요 기능

프로젝트 소개

다른 사람들과 감정을 공유해 보세요, 에피그램

나만 갖고 있기엔 아까운 글이 있지 않나요?
제작기간: 24.08.02 ~ 24.08.29

개발환경

• develop 브랜치를 메인으로 각 브랜치를 생성해서 작업하고 push하는 방법으로 작업
• 프로젝트, github 관련 내용과 질문들을 디스코드로 공유
• 프로젝트에 관련해서 지켜야할점 (git 컨벤션, 코드컨벤션 등) 공유

시연영상

메인 페이지

openmind_main.mp4

질문목록(List) 페이지

openmind_list.mp4

피드(Post) 페이지

openmind_feed.mp4

답변(Answer) 페이지

openmind_answer.mp4

404 페이지

openmind_404.mp4

프로젝트 구성

User Flow

폴더 구조

src
 ┣ api
 ┣ assets
 ┃ ┣ icons
 ┃ ┗ images
 ┣ components
 ┃ ┣ feed
 ┃ ┃ ┣ answer
 ┃ ┃ ┗ post
 ┃ ┗ list
 ┣ pages
 ┃ ┣ Answer.js
 ┃ ┣ List.js
 ┃ ┣ Main.js
 ┃ ┣ NotFound.js
 ┃ ┗ Post.js
 ┣ styles
 ┗ utils

주요 기능

예시 추후 반영예정

[ 메인페이지 ]

• 첫 렌더링시 사용자들을 불러와 state로 관리하고 사용자가 입력한 닉네임과 비교하여 닉네임 중복을 막았습니다.
• 또한 생성에 성공했을때 로컬스토리지에 userId값을 저장해 생성한 유저의 답변페이지로 넘어가는 기능을 리액트스러운 방법(navigate)으로 구현했습니다.

const [inputName, setInputName] = useState('');
const [enrolledLists, setErolledLists] = useState(false);

const postNewUser = () => {
  const isExist = enrolledLists.includes(inputName);
  if (inputName === '') {
    alert('이름을 입력해주세요!');
  } else if (isExist === true) {
    alert('이미 존재하는 이름입니다.');
  } else {
    fetchPostSubject();
  }
};

const linkToUser = (userId) => {
  if (userId !== '') {
    navigate(`/post/${userId}/answer`);
    localStorage.setItem('userId', `${userId}`);
  } else {
    alert('나의 페이지가 생성되지 않았어요.');
  }
};

const fetchPostSubject = async () => {
  try {
    const res = await postNewSubject(inputName);
    linkToUser(res.data.id); // id 페이지이동
  } catch (error) {
    console.log(error);
    alert('포스팅이 안되었어요.');
  }
};