리액트 숙련 주차 뉴스피드 팀 프로젝트에서 내 작업물을 올리고 공유하는 사이트를 만들었어요
백엔드는 supabase를 이용했어요

🔗 Story Book : https://bloodfolio-system.vercel.app
🔗 프로젝트 컨벤션 정리 : #1

이예린	유태윤	전태영	이승빈	추유선
디자인 시스템 컴포넌트 Auth 구현 및 총괄	작성폼 (에디터) 초기 세팅 마이페이지 등	상세페이지 (댓글 입력, 수정, 삭제)	메인페이지	Auth 마이페이지

• 각자 맡은 역할을 다한 뒤에도, 다른 팀원의 작업을 도와주면서 완성했어요 🌟
  
  

• 2024.06.01 ~ 2024.06.07
  
  

• 활발하게 진행 상황을 공유하기 위해 zep과 slack을 사용했어요
• 전체적인 팀 프로젝트의 진행상황을 확인하기 위해 gitgub project를 사용했어요
• backlog를 남기고 수시로 진행상황을 팔로우업해요
  
  
• 코드리뷰하는 문화를 지향해요
• pr에 1명 이상의 approve가 있어야 develop에 merge를 할 수 있도록 설정했어요
  
  

스토리북을 사용하여 UI 컴포넌트를 문서화하고 빠르고 효율적으로 작업하기 위해 사용했어요

상태 관리를 위한 Redux Toolkit과 Thunk를 사용했어요

Supabase를 백엔드로 사용하여 실시간 데이터베이스를 사용했어요

Toast UI Editor를 사용하여 작성폼을 구현했어요

React Router를 사용하여 SPA의 라우팅을 관리했어요

CSS-in-JS 라이브러리인 Styled Components를 사용하여 컴포넌트 스타일링을 했어요

SVG 파일을 React 컴포넌트로 변환하여 사용할 수 있는 SVGR을 사용했어요. 이를 통해 SVG 아이콘을 더 쉽게 관리하고 사용할 수 있어요

• 나의 작업물을 올릴 수 있어요
  
• 다른 사람의 작업물을 보고 영감을 얻을 수 있어요
  
• 나의 작업물의 링크를 복사하여 내 이력서에 넣을 수 있어요
  
• 다른 사람의 작업물이 마음에 든다면 핀을 해서 다시 볼 수 있어요
  
• 사이트에서 이용할 내 프로필을 변경할 수 있어요
  
• 회원 가입하고 나의 프로필을 꾸밀 수 있어요
  

• 최신 순으로 정렬된 다른 사람의 글을 구경할 수 있어요
• 마음에 드는 글이 있다면 저장할 수 있어요
  
  

• 이메일을 통해 로그인과 회원가입을 할 수 있어요
• 비밀번호 입력 중 까먹으면 언제든지 눈을 켜고 다시 볼 수 있어요
• 서버 통신 중 에러가 발생하면 redux에 상태를 저장하여 오류 메세지를 노출해요
  
  

• @toast-ui/react-editor 라이브러리를 이용하여 에디터로 이미지와 글을 자유롭게 작성할 수 있어요
  
  

• 상세페이지 url을 공유할 수 있어요
• 내가 작성한 글에서 게시글을 수정하고 삭제할 수 있어요
• 서버에서 데이터를 불러올 때 자연스럽게 노출되도록 loader를 적용했어요
  
  

• 내가 작성한 게시물을 볼 수 있고, 다른 사람의 글을 즐겨찾기 할 수 있어요
  
  

• 내 프로필 이미지와 정보들을 수정할 수 있어요
• supabase를 이용해 storage에 이미지를 저장하고 불러와요
  
  

• 댓글을 작성하여 서로 작품에 대한 커뮤니케이션을 할 수 있어요
  
  

• 수정 버튼을 눌렀을 때, 모달을 통해 댓글을 수정하고 삭제할 수 있어요