Codeit-Sprint FE 1기 - Part2 Project

💌 Open-Mind

질문과 답변을 통해 마음을 열고 대화 나누는 소통 플랫폼인 '오픈마인드'를 개발하였습니다.

🕰️ 개발 기간

23.11.03 - 23.11.17

💫 팀원 소개

박소현	안유진	남민섭	강나현	고민혁

📍 담당 기능

• 기능 구현 설명 및 시연, 문제 해결법에 대한 자세한 설명은 📝Notion 페이지에서 확인하실 수 있습니다.

👩🏻‍💻박소현

• 페이지 : 질문 피드(post) 페이지
• 공통 : 레아아웃 설정, Post Card 컴포넌트, Tag 컴포넌트
• 기능
  • swagger 전체 API 연동
  • 질문 목록 불러오기, 무한스크롤, 피드 개수 Dropdown 기능, 스켈레톤 UI 적용
  • Observer API custom hook 분리

👩🏻‍💻안유진

• 페이지 : 랜딩 페이지, 404 페이지
• 공통 : GlobalStyle 설정, 메타태그 설정, 테마 및 BGM 토글버튼 컴포넌트
• 기능
  • 로그인 기능(로컬스토리지 사용)
  • 라우팅 설정, 리다이렉션 설정, SNS 공유 기능
  • 다크모드/라이트 모드, BGM 기능

🧑‍💻남민섭

• 페이지 : 질문 목록(list) 페이지
• 공통 : List Card 컴포넌트
• 기능
  • 질문 리스트 불러오기, 페이지네이션 기능
  • 최신순/이름순 정렬 Dropdown 기능
  • 사용자에 따른 답변페이지 이동 기능(로컬 스토리지 사용)
  • 질문 목록 카드 리스트 반응형 적용

👩🏻‍💻강나현

• 페이지 : 질문 피드(post) 페이지, 답변(answer) 페이지
• 공통 : Popover 모달, 질문 작성 모달 컴포넌트, Kebab menu 컴포넌트
• 기능
  • 포스트 페이지 질문 작성 기능
  • 답변 페이지 답변 삭제, 질문 삭제, 답변 거절 기능
  • 포스트 페이지 좋아요/싫어요 기능
  • 답변 페이지 유튜브 임베드 기능

🧑‍💻고민혁

• 페이지 : 답변(answer) 페이지
• 공통 : Answer 카드 컴포넌트
• 기능
  • 답변페이지 불러오기, 답변페이지에서 리스트페이지로 이동하기 적용
  • 답변 생성, 수정, 전체 삭제 기능
  • Time diff utils 공통 로직 적용

📔 Table of Contents

• About the Project
  • User Flow
  • Team Rules
  • Tech Stack
  • Features
• Getting Started
• Screenshots

🌟 About the Project

🗺️ User Flow

🔮 Team Rules

• Team Formatting Rules 상세보기
• Team Rules 상세보기

👾 Tech Stack

Frontend 기술 스택

• React (v18.2.0)
• Styled-components

라이브러리

• react-Router (라우팅)
• react-helmet (페이지별 SEO)
• kakao-map-api (카카오 링크 공유기능)
• react-player (동영상 플레이어)
• prettier (코드 포멧)

배포

• Vercel

🎯 Features

• 로그인
• 질문 생성, 조회, 삭제
• 답변 생성, 조회, 수정, 삭제
• 질문 목록 조회, 페이지네이션
• SNS 공유 기능, 링크 복사 기능
• 다크 모드 테마
• BGM 기능
• 유튜브 임베드 기능

🧰 Getting Started

$ git clone https://github.com/Team2-Project-OpenMind/OpenMind_Team2.git

$ npm install

$ npm start

# http://localhost:3000 접속

🌐 배포주소 https://open-mind-team2.vercel.app/

👀 Screenshots

✨ 랜딩(Main)페이지

✨ 질문목록(List) 페이지

✨ 개별피드(Post) 페이지

✨ 답변작성(Answer) 페이지