boostcampwm-2021 / web01-npe Goto Github PK

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

• Molcule
• Organisms
• Pages

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

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

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

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

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

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

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

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

단일검색결과 UI 리팩토링

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

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

1. 사이즈는 고정

2. Props

label:"javascript"
onClick: onClick

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

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

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

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

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

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

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

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

• 기타 코드 문제도 수정

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

• 멘토링 회의 반영

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

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

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

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

검색결과 리스트 리팩토링

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

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

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

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

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

CSS 글로벌 Palette 만들기

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

질문 프로필에 쓰일 ProfileWithInfo 추가

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

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

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

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

TEST

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

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

사이드바 구현

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

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

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

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

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

• title text
• sub text

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