Git Product home page Git Product logo

gift's Introduction

GIFT - 지프트

🥇 개요

GIPHY 리액트 클론 프로젝트입니다.

GIPHY의 성능 최적화와 웹 접근성을 준수를 통하여 사용자 경험을 향상시키는 것을 목표로 합니다.🎯


📍 기존 서비스의 문제점

  1. light house 검사 결과 낮은 점수 (Perfomance, Accessibilty)
  2. 불편한 키보드 접근성
  3. 시멘틱하지 않은 HTML 태그의 사용
  4. 적응형 웹으로 device 최적화 되어있지 않음
  5. 일관적이지 않은 UX flow
  6. 불필요한 리렌더링

🪄 개선방향

  1. light house 검사 결과를 평균 80점으로 향상
  2. 원활한 키보드 접근성 제공
  3. 시멘틱한 HTML 태그를 사용
  4. 반응형 웹 구현을 통한 device 최적화
  5. PC와 Mobile에서 일관적인 UX flow 제공
  6. 불필요한 리렌더링 개선

🚀 프로젝트 사용기술

  • React
  • Redux(RTK)
  • React-Router(v6)
  • TypeScript
  • styled-components library
  • Storybook
  • Webpack, Babel

🌟 사용한 API


📆 프로젝트 기간

  • 22.01.06 ~ 22.01.28

📝 프로젝트 설계 기록

  • GIFT wiki에서 확인 할 수 있습니다.

🎓 Team

박바름 박준규 임소형
@congaweb @jkpark104 @sosoYim

gift's People

Contributors

sosoyim avatar jkpark104 avatar congaweb avatar

Stargazers

3jun avatar avatar Hyeyeon Seo avatar Clifford Choi avatar Taewoong Jung avatar B avatar

Forkers

congaweb sosoyim jkpark104 frontend-2nd yamoo9

gift's Issues

Create Search Result

Todo

  • 검색어 및 결과로 나오는 GIF 갯수 띄워주기 (cancel)
  • 유사 추천어 태그로 표시
    • Create tag component
  • 채널 검색 결과
  • GIPHY Clips 카테고리 결과
    • 값을 주지 않아서 취소
  • GIFs 혹은 Stickers 결과 토글로 보기
    • #51
    • Create toggle component
  • 검색 결과가 없을 경우 안내 문구 띄워주기

Assignee

  • None

ETC

  • Opinions & Problems

Create Video Component

Todo

  • 동적으로 크기가 정해지는 비디오 컴포넌트 만들기
  • api의 타입에 따라 src가 바뀌는 비디오 컴포넌트 만들기

Assignee

ETC

  • Opinions & Problems

기획 수립

  • 주제 선정
  • 사이트 분석
  • 기획 문서 작성
  • 일정 수립
  • 발표 준비

Create Tag list component

Todo

  • styled-component 만들기
  • 타입 설정
  • 구조 잡기
  • 더보기 버튼 추가
  • 더보기 버튼 클릭 시 전체 메뉴 펼쳐지게 하기

ETC

  • Opinions & Problems

Create Loading Spinner component

Todo

  • 접근성을 위해 index.html에 스피너를 위한 영역 설정하기
  • Loading Spinner 구조 잡기
  • 스타일 입히기
  • 타입 설정하기
  • 애니메이션 적용하기
  • Loading시 동작하게 만들기

ETC

  • Opinions & Problems

전체 일정 수립

Todo

  • Daily scrum 규칙 정하기
  • Milestone에 Sprint 설정 하기
  • Sprint 2 세부 일정 수립
  • Sprint 3 세부 일정 수립
  • Sprint 4 세부 일정 수립

Assignee

ETC

  • Opinions & Problems

Implement FormInput component

Todo

  • FormInput 은 label과 input 요소를 감싸는 div 로 구성되어 있다.
  • id, label 은 필수 props다.
  • visibleLabel props 로 label을 보이게 하거나 안보이게할 수 있다.
  • label이 안 보일 경우 보조기기에는 보이도록 해야한다. => A11yHidden 컴퍼넌트
  • children 으로 텍스트 props를 받아 placeholder에 표시되도록 한다.
  • restProps로 div(최상위 요소)에 적용시킬 props를 모아 받는다.
  • inputProps로 input 요소에 적용시킬 props를 모아 받는다.

ETC

  • Opinions & Problems

Test SvgIcon component

Todo

  • Describe this component in Storybook doc
  • Test with storybook with every props

Assignee

  • None

Create Carousel storybook

Todo

  • 캐러셀 컴포넌트 스토리북 파일 만들기
  • 접근성 이슈 해결 (aria-hidden 요소에 포커스 가능한 요소가 포함되지 않도록 보장합니다.)

Assignee

ETC

  • Opinions & Problems

기획문서: 요구사항 정의서

  • 요구사항 정의서
    • 비즈니스 요구사항 : 서비스의 목적, 타겟 등
    • 기술 요구사항 : 페이지별 혹은 컴퍼넌트별 상세 요구사항
    • 공통 요구사항 : 이미지 최적화 목표 수치, 웹접근성 개선 목표치 (탭 이용, 보조기기 접근 가능 스피너 등)

Global style 컴포넌트 제작

Todo

  • Normalize를 활용하여 global style 컴포넌트 제작
  • color 변환 util 컴포넌트 제작
  • color set 컴포넌트 제작

Description

  • normalize 및 공통 스타일 적용한 스타일 컴포넌트 제작
  • hex 코드를 rgb(a)로 변환해주는 util 함수 제작
  • color set을 저장한 컴포넌트 제작

ETC

  • Opinions & Problems

Implement SearchInput component

Todo

  • 검색바 구현
  • 리액트로 이벤트 제어(Controlled component)
  • 버튼의 크기는 고정되며 인풋 창의 넓이가 뷰에 따라 늘어난다.

ETC

  • Opinions & Problems

good first component 제작

Todo

  • types
  • styled-component
  • React component
  • Storybook

Assignee

ETC

  • good first component는 컴포넌트 제작 시 기준이 됩니다.
  • 컴포넌트 제작 시 주의사항이 있다면 댓글로 남겨주세요.
  • Storybook docs에 명세를 같이 명시해주세요.

Implement SearchBar animation

Todo

  • Placeholder 위치에 문장들이 세로 캐러셀 처럼 동작한다.
  • 하나의 문장이 올라가면 다음 문장이 placeholder 위치에 있다.
  • 마지막 문장이 위치하면 첫번째 문장으로 바꿔치기 한다.

ETC

  • Opinions & Problems

Utils module 제작

Todo

  • style module 제작

Assignee

  • None

ETC

  • 새로운 util module 필요 할 때 마다 새로운 이슈 생성 후, 본 이슈에 댓글로 해당 이슈 넘버를 달아줍니다.

Implement Logo component

Todo

  • Logo 는 모든 변형 형태로 표현 가능해야 한다.
  • 애니메이션이 제공되어야 한다.

ETC

  • Opinions & Problems
    • SVG 애니메이션 구현에 어려움이 있다.
      • react framer-motion 라이브러리를 적용시켜보자.

Need to use % to SvgIcon width and height

Problems

  • SvgIcon 의 width, height 속성 사용 시 px 이외의 단위를 사용할 수 없다.

Expected Error & Solution

  • 기존에 number 만 허용하던 타입을 number | string으로 수정

Create Card Container

Todo

  • Trending 컨테이너 구현
  • Artists 컨테이너 구현
  • Clips 컨테이너 구현

Assignee

ETC

  • Opinions & Problems

Create Title Component

Todo

  • 메인 섹션 타이틀 컴포넌트
  • 디테일 페이지 내 서브 타이틀 컴포넌트

Description

  • 각 타이틀 컴포넌트를 잘게 쪼개는 대신 하나로 만들게요!

ETC

  • Opinions & Problems

Create SvgIcon component

Todo

  • Adapte SVG Sprite technique
  • Define types which includes svg id
  • Icon components needs those props : type, width, height, fill
  • exported icons : favorite, favorite-added, link, sound-on, sound-off, ??

Assignee

  • None

ETC

  • Should we seperate every types from component file ?
  • Do we need more props for SvgIcon component ? Please comment here !

Create Card Info Detail

Todo

  • #32
  • 채널 정보 설명 용 컴포넌트 #103
  • GIF 상단 이미지 제목 컴포넌트 #113
  • GIF 이미지 컴포넌트#113
  • Favorite, Share, Embed 버튼 컴포넌트#113
  • Follow on 영역 컴포넌트 #103
  • #60
  • #66

Description

  • 디테일 페이지에 들어가는 컴포넌트를 컨트롤 하기 위한 이슈입니다.

ETC

  • Opinions & Problems

Implement A11yHidden component

Todo

  • 컴퍼넌트는 화면에 시각적으로 감춰져야 한다.
  • 보조기기에서는 잡힐 수 있어야 한다.(랜더트리에 존재해야 한다.)
  • focusable한 요소라면 포커스 되었을 때 모습이 보여야 한다.

ETC

  • Opinions & Problems

Create Header components

Todo

  • #72
    • Logo #40 #71
    • GNB #41
    • SearchBar #33
    • Upload/Create 버튼 : Header의 styled-component
    • Create UserContainer component : Header의 styled-component
      • Create UserIcon component
      • Create USerName component
    • Create MenuDropdown component : 2차 개선 프로젝트시 진행
  • SearchBar과 상호작용
  • #127
  • 키보드 접근성 개선: 운영체제 형식으로 하기

Assignee

ETC

  • Opinions & Problems
  • 컴포넌트 z-index 덮어지지 않게 조심하기 (Giphy 사이트에선 창이 작아질 때 검색바 아래로 드롭다운이 펼쳐짐)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.