모바일 웹 개발 일지

devPomme·2022년 1월 6일
0

coala-mobile

목록 보기
1/1

Tech Stack

Typescript
Next.js
SASS
Redux

2021/11

  • 프로젝트 오픈 및 개발 환경 세팅
  • 디렉토리 구조 세팅

2021/12

개발환경

  • yarn berry 사용

디자인

  • 메인 페이지
  • 로그인 페이지/회원가입/아이디∙비밀번호 찾기 페이지
  • 데이터존/커뮤니티 페이지(게시판, 커스텀 테이블 컴포넌트)
  • 사이드바
  • 검색 페이지 및 검색 결과 페이지
  • FAQ 게시물 리스트 컴포넌트 (react-collapse사용)
  • 커스텀 체크박스 컴포넌트
  • 페이지네이션 컴포넌트

2022/01

디자인

  • Datepicker 컴포넌트 커스터마이징
  • 드랍다운 컴포넌트 커스터마이징
  • 커뮤니티 페이지(게시물 상세 페이지)
  • 고객센터 페이지 레이아웃

배포

  • Jenkins (팀장님짱👍)

디버깅&에러 캐치

To do

  • 레이아웃 리팩토링(nextjs-page-transition 사용해보기)
  • 기능 구현

In Progress

디자인

내정보 페이지

뉴스/언론 페이지

데이터존 테이블 수정

에디터 툴바 커스터마이징

기능 구현

테스트

Pending

  • 페이지 트랜지션 (캐러셀+라우팅)
    next-page-transition 또는 react-transition-group
    네이버 모바일 웹 참고 필요

  • 스크롤 최상단 컴포넌트(페이지가 아닌 경우에는 window.scrollY을 사용할 수 없는 이슈 (useRef?)

  • 커스텀 인풋그룹 컴포넌트

  • 커스텀 드랍다운 컴포넌트(select 태그 대신 리액트 컴포넌트로 커스터마이징)

  • React-Table에 Expandable Collpase 적용

Done

- 캐러셀 적용시 특정 자식 태그만 스크롤 잠금

해결방법
  1. Framer-Motion-Carousel 대신 React-Slick 사용
  2. 자식 태그의 onTouchMove 이벤트에 stopPropagation 적용
<div className="disclosure list" onTouchMove={(e) => e.stopPropagation()}>
  <CoinSmryCard />
  <CoinSmryCard />
  <CoinSmryCard />
  <CoinSmryCard />
  </div>

CSS 디자인

전역 CSS 적용

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  /*   전역으로 설정하면 안됨*/
  /*   overflow-x: hidden;*/
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  position: relative;
  bottom: -0.125rem;
}

img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}
* {
  box-sizing: border-box;
}

다크모드 설정/해제 기능(next-theme)

:root {
  --background: white;
}

:root[data-theme='dark'] {
  background-color: #1f222c;
  color: #ffffff;
}
profile
헌신하고 확장하는 삶

1개의 댓글

comment-user-thumbnail
2022년 1월 14일

babel-plugin-inline-react-svg
TypeError: Cannot read property 'uid' of undefined

I am getting the same error how did you resolve it

답글 달기