Stelligence

"함께 만들어나가는 지식의 별자리"
지식을 별처럼 연결해 탐색하는 사용자 참여형 지식 공유 플랫폼

프로젝트 소개

구름톤 트레이닝 풀스택 2회차 카카오X구름 기업 연계
프로젝트 기간: 2023.12.29 ~ 2024.02.22

🔗 링크

• 배포 주소
  
• 소개 영상
  
• 팀 노션 📝

😎 팀원 소개

Pictures
Name	정나리	이다희	문지원
Role	그래프 뷰 개발 검색 기능 개발 토론 기능 개발(목록,상세페이지) 글 역사 페이지 개발 신고 기능 개발 은하수 여행자 가이드 개발 팀: Github Actions, AWS EC2 활용 CI/CD 적용	투표 개발(목록, 상세페이지) 로그인 개발 북마크, 배지, 알림 기능 개발 팀: Github Actions, AWS EC2 활용 CI/CD 적용	글 작성 페이지 개발 글 상세조회 페이지 개발 글 수정요청 페이지 개발 팀: Github Actions, AWS EC2 활용 CI/CD 적용
GitHub

개발 환경 및 기술 스택

Environment

config

development

communication

아키텍처

팀 컨벤션

커밋 컨벤션

type	설명
✨ feat	새로운 기능
🐞 fix	버그 수정
🛠️ refactor	기능을 추가하지 않은 코드 변화, 리팩토링
🎀 style	CSS 수정
💾 build	빌드 시스템이나 외부 의존성에 영향을 주는 변화
📄 docs	문서 변화
🧪 test	테스트
✍️ chore	빌드 업무 수정, 패키지 매니저 수정(gitignore 수정 등)
⚙️ setting	개발 환경 세팅
🌐 deploy	배포

코드리뷰 컨벤션 Pn

• 뱅크샐러드의 Pn 규칙 도입
• 도입 이유: 리뷰어가 코멘트의 강조하고 싶은 정도를 표현해서 리뷰 의도를 보다 명확하게 전달하여 온라인 코드리뷰의 한계를 극복하기 위함

lint 컨벤션 (airbnb)

주요 페이지 및 기능

유저

로그인	마이페이지

• 로그인
  • 카카오, 네이버, 구글 소셜로그인을 제공합니다.
  • 3개의 계정을 혼동하지 않고 사용자가 이전에 로그인했던 수단을 확인할 수 있도록 마지막 로그인 수단에 표시해줍니다.
• 마이페이지
  • 사용자가 로그인한 계정의 유저 정보를 확인할 수 있고, 닉네임을 변경할 수 있습니다.
  • 북마크 목록과 획득한 배지 목록을 확인할 수 있습니다. 북마크한 글을 확인하고 삭제하거나, 배지에 마우스를 올려 배지 설명을 확인하는 등의 상세 기능을 제공합니다.
  • 더 이상 계정을 사용하지 않는다면 회원 탈퇴를 할 수 있습니다.

메인

그래프 뷰	검색

• 그래프 뷰
  • 작성된 별들을 그래프 뷰로 볼 수 있습니다.
  • 상위 계층 태그로 연결된 별들은 그룹을 이루게 되며, 그래프 뷰와 애니메이션을 통해 그 그룹을 확인할 수 있습니다.
• 검색
  • 작성된 별들을 찾을 때 검색 기능을 이용할 수 있습니다.
  • 별 검색 시 드롭다운으로 검색 결과를 미리 볼 수 있습니다.
  • 별이 검색되면 해당 별은 확대 및 반짝이게 되어 편리하게 찾을 수 있습니다.

글

글 작성 페이지	글 조회 페이지

• 글 작성 페이지

  • 새로운 글을 작성할 수 있습니다.
  • 상위 계층 태그 기능을 이용해 연관된 글을 검색하고 연결할 수 있습니다. 연결된 글은 메인페이지에서 그래프뷰를 통해 그룹으로 표현됩니다.
  • 이미지 추가, 마크다운 문법 등을 활용하여 글을 작성할 수 있습니다.
  • 언급 링크 기능을 이용해 글 내부에서도 다른 글을 연결할 수 있습니다.

• 글 조회 페이지

  • 작성된 글을 조회할 수 있습니다.
  • 수정요청을 통해 글에 기여하면 하단의 ‘최초작성자/기여자’에 사용자의 닉네임이 표시됩니다.
  • 글의 상태에 따라 ‘수정요청(편집)/투표/토론/수정대기’의 이름을 가진 버튼이 생성되며, 해당 과정에 대한 페이지로 넘어갈 수 있습니다.

수정요청

수정 요청 정보	수정 요청안

• 수정요청 작성 페이지
  • 작성된 글에 대한 수정 요청을 할 수 있습니다.
  • 수정 요청안의 제목과 수정 이유를 작성해 다른 사용자들에게 수정내용을 설명할 수 있습니다.
  • 수정 요청안을 작성하여 글에 대한 수정을 할 수 있습니다.
  • 제목, 상위계층태그의 변경이 가능합니다.
  • 글의 내용을 문단 기준으로 추가, 편집, 삭제를 통해 편집할 수 있습니다.

투표

투표 목록	투표 상세정보	투표하기

• 투표 목록을 진행 여부에 따라 확인할 수 있습니다. 진행완료 목록에서는 상태별(미반영/반영완료/토론) 필터 기능을 제공합니다.
• 투표 상세페이지에서 투표할 수정요청의 상세 정보를 확인하고 해당 수정요청을 반영할 지 사용자가 직접 투표할 수 있습니다.

토론

토론 목록	토론 상세정보	토론하기

• 토론 목록을 10개씩 페이지 단위로 확인할 수 있습니다. 토론은 진행중/완료에 따라 탭으로 구분 가능하며, 최신순/최신댓글순을 선택할 수 있는 정렬 기능을 제공합니다.
• 토론 상세페이지에서는 토론할 수정요청의 상세 정보를 슬라이더로 손쉽게 확인 가능합니다. 또한 해당 페이지는 반응형으로 제공되어 모바일에서도 편리하게 볼 수 있습니다.
• 토론하기에서는 활발한 토론을 위한 댓글 태그 기능이 지원됩니다. 이는 댓글창에 #을 입력하거나, 해당 댓글의 번호를 클릭하여 활용 가능합니다.
• 토론에 참여한 사용자는 토론이 종료되면 해당 토론을 기반으로 새로운 수정 요청을 보낼 수 있습니다.

부가기능

지난 수정요청 페이지	역사 페이지

배지 및 알림	신고	은하수 여행가이드

• 지난 수정 요청 페이지
  • 이전에 어떤 수정요청이 들어왔었는지 글마다 반영 여부별로 확인할 수 있습니다.
• 역사 페이지
  • 해당 글의 지난 버전들에 대해 완성된 글의 형태로 볼 수 있습니다.
• 배지 및 알림
  • 작성한 글, 수정요청이나 배지 획득에 대해 알림을 받을 수 있습니다. 해당 알림을 클릭하면 관련된 글로 이동합니다. 이미 확인한 알림을 개별/일괄 삭제할 수 있습니다.
    • 수정요청 반영 시, 토론 시, 반려 시, 댓글 등록 시, 토론 종료시, 배지 획득 시 알림 확인 가능
• 신고
  • 작성한 글 및 댓글이 부적절할 경우 신고 기능을 활용할 수 있습니다.
  • 신고 기능은 카테고리를 선택 가능하며, 추가로 상세한 내용을 기입할 수 있습니다.
• 은하수 여행가이드
  • 사용자 편의를 위해 존재하는 은하수 여행가이드입니다.
  • Stelligence의 사용 방법에 대해 알려주는 탭과 사용자에게 피드백을 받는 탭으로 나뉘어 있습니다.

시작 가이드

📣 시작 전 node, yarn, nvm이 설치되어 있는지 확인해주세요! 모두 설치되어 있어야 실행 가능합니다 :)

// 저장소 클론
git clone https://github.com/Eagle-Strike-7/stelligence-frontend.git

// 프로젝트 노드 버전(v20.10.0)으로 설정 및 사용
nvm install
nvm use

// yarn 버전 설정 및 패키지 설치
yarn set version 4.0.2
yarn install

// 실행
// 1. 개발모드로 바로 실행할 때
yarn dev

// 2. 빌드 후 실행할 떄
yarn build
yarn start