boostcampwm-2021 / web01-npe

나와봐! 내가 알려줄께: 개발자들을 위한 실시간 QA 서비스

NPE - NullPointerException

⚡개발자들을 위한 실시간 질문/답변 커뮤니티⚡

팀원소개

안승재 🕸	장다윗 🕸	조승희 🕸	황우진 🕸
@getState	@david02324	@sa02045	@hwangwoojin
저희 10분만 쉬었다 할까요..?	네 알겠습니다~	그렇게 하면 될 것 같아요	작업한거 노션 링크좀 올려주세요

프로젝트 소개

실시간으로 내 코드의 문제에 대해 답을 알고 싶나요? 일반적인 답변이 아닌 실시간으로 코드를 수정하고 음성으로 설명하며 도움을 받아보세요!

NPE 는 개발자들을 위한 질문/답변 위주의 커뮤니티 입니다. 기본적인 디자인은 Stackoverflow를 참고했으며, 해당 커뮤니티에 기능에 더해서 실시간 답변 기능을 추가하였습니다.

아는 내용을 많이 공유해서 지식을 함께 나누고 높은 등급을 달성해보세요!

프로젝트 핵심 기능

• 개발자들이 질문이나 답변을 할 수 있는 커뮤니티 기능을 제공합니다.
• 유저의 활동을 분석한 랭크/등급 기능을 제공합니다.
• 실시간으로 답변할 수 있는 여러가지 기능들을 제공합니다.
  • 화상,음성, 채팅, 실시간 코드 편집기
  • WebRtc, sockiet.io , 실시간 편집 : socket 기반 라이브러리

위키

🚩 기술 스택 🚩

🥨 ERD 🥨

🖼 와이어프레임 🖼

😎 그라운드 룰 😎

🎋 브랜칭 전략 🎋

☝️ 요구사항 ☝️

📄 기획서 📄

web01-npe's Issues

[FE] [Refactor] Atom 버튼 아이콘 없이 가능하도록 변경

• 기존의 버튼 아이콘 없이 사용 가능하도록 변경
• width, height 길이 지정가능하도록 설정

[FE/BE] [Refactor] 전체 프로젝트 구조 리팩토링

• 멘토링 회의 반영

[FE] [Fix] 폰트 수정

폰트 불러올 때 발생하는 이슈 픽스

• 폰트를 모듈로 가져오기
• Global Body 로 폰트 적용
• font-family 에 sans-serif 명시

[FE] [Feature] Organism 사이드바

사이드바 구현

1. 태그검색창
2. 라이브 스트리밍 여부 on off
3. 태그 리스트

[FE/BE] [Feature] Atom 사이드바 태그 버튼

• 사이드바에서 사용되는 태그 버튼

[FE] [Feature] MainPage 구현

• 헤더, 사이드바, 질문 리스트 통합

[FE] [Refactor]Organism-단일검색결과UI

단일검색결과 UI 리팩토링

[FE] [Fix] svg 이미지 불러오지 못하는 문제

• 외부 url/png 이미지는 불러올 수 있지만 svg 파일만 불러오지 못하는 이슈가 존재합니다.

[FE] [Feature] Molecules-ProfileWithInfo 컴포넌트 추가

질문 프로필에 쓰일 ProfileWithInfo 추가

[FE] [Refactor] 컴포넌트 수정

수정된 Atom 에 맞게 컴포넌트 수정하기

• Molcule
• Organisms
• Pages

[FE] [Feature] Organism 단일 검색 결과

• 내용은 자유 (개발할 내용, 참고할 점 등)
• 라벨 꼭 달아주세요! 없으면 만들어서!

[FE] [Feature] 검색바, 제목 텍스트 아토믹 컴포넌트 만들기

• 내용은 자유 (개발할 내용, 참고할 점 등)
• 라벨 꼭 달아주세요! 없으면 만들어서!

[FE] [Feature] Molcules-QuestionTitle

기존의 SearchResult Organism을 더 쪼개서 Molecule로 분해했습니다

[FE] [Refactor] next.js 컴포넌트 타입 통일하기

• React.FC, FunctionComponent, NextPage 등 다양한 타입 통일하기

[FE] [Feature] Molecule 프로필 드롭다운

• 내용은 자유 (개발할 내용, 참고할 점 등)
• 라벨 꼭 달아주세요! 없으면 만들어서!

[FE] [Feature] 프로필 관련 버튼을 링크(a 태그)로 변경

• 기타 코드 문제도 수정

[FE] [Feature] Atomic 질문검색결과 태그

질문검색결과에 달릴 태그 Atomic 컴포넌트 구현

1. 사이즈는 고정

2. Props

label:"javascript"
onClick: onClick

[FE] [Feature] Molecule 헤더 프로필

• 이미지&유저 아이디 포함된 버튼 molecule

[BE] [Refactor] Any 제거 및 type-graphql framework 적용

• backend 코드에서 사용된 any 타입을 최디한 제거

[FE] [Feature] Atomic-IconWithNumber

views, comments에 쓰일 아이콘 + 숫자 Atomic 구현

[FE] [Feature] 원형 이미지 아토믹 컴포넌트 만들기

프로필 이미지 등을 위한 원형 이미지 아톰

[FE] [Remove] SearchBar Atomic Component

검색Input 아토믹 분리로인한 검색바 아토믹 삭제

[FE] [Feature] 슬라이드 체크박스 아톰 컴포넌트 만들기

• 슬라이드 애니메이션 포함
• 체크박스의 컬러 props로 설정 가능하도록 구현
• 스토리북으로 예시 컴포넌트 작성

[FE] [Feature] Atom 인디케이터(초록&회색)

• 실시간 답변 기능이 on, off 되었는지 확인할 수 있는 인디케이터

[FE] [Feature] 헤더 구현하기

모든 페이지에 사용할 헤더 구현하기

[FE] [Feature] 그래프 아토믹 컴포넌트 만들기

• 내용은 자유 (개발할 내용, 참고할 점 등)
• 라벨 꼭 달아주세요! 없으면 만들어서!

[BE] [Feature] Mutation 구현 마무리

• 현재 질문글 작성 Mutation까지만 구현되어있음
• 질문글에 관한 모든 Mutation 구현하는것이 목표
• 기타 리팩토링 등도 진행

[FE] [Setting] GraphQL 설정

1. Apollo Client 설정
2. 쿼리 - API 폴더 구조

[FE] [Refactor] Template 검색 결과 리스트

검색결과 리스트 리팩토링

[BE] [Fix] Query Tag 검색 구현 및 Mutation

• Tag 다중 검색 구현하기
• Mutation 나머지 (Update, Delete) 구현
• ~ 주말

[FE] [Refactor] Atoms 리팩토링

Atom 안에는 Atom X
Props로 사이즈를 받지않기
메시지 형태로 Atom안에 정해진 사이즈 지정

[FE] [Feature] 버튼 아톰 컴포넌트 만들기

• 버튼 styled 컴포넌트 만들기
• hover 등의 액션 달기
• 스토리북에 예시 컴포넌트 작성하기

[FE] [Fix] Rename 프로필-드롭다운 stories

button.stories.tsx -> ProfileDropdown.stories.tsx

[FE] [Feature] Template 단일검색결과 리스트UI

• 내용은 자유 (개발할 내용, 참고할 점 등)
• 라벨 꼭 달아주세요! 없으면 만들어서!

[FE] [Refactor] exporting importing as index.ts

• 내용은 자유 (개발할 내용, 참고할 점 등)
• 라벨 꼭 달아주세요! 없으면 만들어서!

[FE] [Feature] Molecule 프로필 요약

[FE] [Refactor] Image 컴포넌트 리팩토링

• custom loader 를 사용하는 이미지 아톰 컴포넌트 생성

[FE] [Refactor] CSS 글로벌 Palette 만들기

CSS 글로벌 Palette 만들기

• Color variable 글로벌
• box border 크기
• boxshadow

[BE] [Feat] GraphQL Query 마무리하기

• GrahpQL Query(Read) 부분을 완료하는것이 목표
• 시간이 된다면 Mutation(C/U/D) 도 구현

TEST

TEST

[BE] [Feature] 백엔드 기초 구조 잡기

• Express + Typescript + TypeORM + graphQL 기반 백엔드 프로젝트
• DB는 Mysql을 사용합니다.

[FE] [Refactor] 일부 Atom 스토리북 테스트 이름 수정

• Atom 컴포넌트들 중 일부 이름을 text -> Atoms/text 와 같은 형태로 수정

[FE] [Feature] Molecule 사이드바 태그 검색창

• 사이드바의 태그 검색창 구현
• 검색창의 텍스트가 변경될 시 해당 관련된 태그를 드롭다운으로 나타내야함

[FE] [Feature] 텍스트 아토믹 컴포넌트 만들기

텍스트 태그를 위한 기본적인 아톰

• title text
• sub text

[FE] [Feature] 로그인 페이지 UI 구현

[BE] [Refactor] Tag 검색 기능 JOIN을 통해 최적화

• 현재 Tag검색 기능은 매우 비효율적인 코드로 이루어져 있다 (여러번 DB 호출)
• 이를 JOIN을 활용한 방식으로 변경해서 DB 호출을 최소화 하는것이 목표

[FE] [Fix] 멘토링 회의 피드백 적용

• 함수 props 타입 Function -> voidFunction
• 네이밍 핸들러 = onXXXX, 불리언 = isXXXXX로 변경

[BE] [Feature] 백엔드 Mutation 쿼리 구현

• Query(Read 관련) 마무리
• Mutation(Create, Update, Delete) 관련 쿼리 작성 시작

[FE] [Refactor] Molcules 리팩토링

[FE/BE] [Refactor] Atom Input 분리 → Input + Icon Btn

• 내용은 자유 (개발할 내용, 참고할 점 등)
• 라벨 꼭 달아주세요! 없으면 만들어서!