• 기존의 package-lock 과 호환이 되지 않습니다.
• package-lock 최신 상태로 변경

event tracking 함수 camelCase 속성을 받아서 snake_case로 가공하는 절차를 추가하면 좋겠습니다.
event tracking 함수가 실제로 받는 속성을 사용할 때 그대로 넣어줘야해서 snake_case의 속성을 사용하게 됩니다.
그런데 eslint-triple-config/typescript는 camelCase를 권장하므로 매번 해당 규칙을 비활성화 해줘야합니다.

현재 리뷰 Placeholder 스타일 및 문구가 resourceType에 강하게 엮여있는 상태입니다. 그런데 이용하는 페이지 쪽에서 상황에 따라 자유롭게 커스터마이징 가능한 Placeholder를 사용해야 할 필요성이 있고, 이를 위한 구조를 설계해봐야 해요!

https://www.npmjs.com/package/@storybook/addon-docs

해당 플러그인을 쓰면 조금 더 강력하게 스토리북을 사용할 수 있습니다.

연관이슈 #263

히스토리: https://titicaca.slack.com/archives/C6DNCMXUL/p1567147456011000?thread_ts=1567145793.008300&cid=C6DNCMXUL

퍼블릭 웹에서 이미지 슬라이드 시에,
마지막 이미지가 딤드 처리되어서 나옴과 동시에
사용자에게 우상단에 있는 페이지 라벨을 안보이게 하거나 opacity를 주는 작업이 필요합니다.
현재 nuka-carousel로는 마땅한 이벤트를 걸 수 없어서,

현재 이미지 캐러셀을 @egjs/flicking로 전환한 뒤에 이 작업이 추가되어야 합니다.

• @egjs/flicking 전환
• 해당 기능 적용
• 마지막 슬라이드시에 더이상 슬라이드 이벤트가 안되도록 (디자이너 분께서 요청하셨는데, 가능한지 여부만 먼저 검토해주시면 될 것 같습니다.)

• https://titicaca.slack.com/archives/CEEPB4TDY/p1574930375471400
• https://github.com/titicacadev/triple-frontend/blob/master/packages/triple-document/src/triple-document.tsx#L198-L234

• 단순 스크롤만 적용된 이미지 캐로셀 사용시 좌/우 스크롤만 동작하여야할때 상/하 스크롤 바운싱이 적용되는 디바이스가 있어 확인이 필요합니다.
  • overflow-y: hidden 를 적용할 수 있는지 알아봅니다~

• Pricing
• PublicHeader
• AppBanner
• Footer
• RecommendedContents
• Modal
• ScrapButton

https://titicaca.slack.com/archives/CEEPB4TDY/p1568164474463000

modal 컴포넌트가 현재 고정된 z-index를 가지고 있습니다. 밑에 깔리는 overlay 레이어가 10, 모달 컴포넌트는 11인데 서비스에 쓰다 보면 서비스 내에서 운영하는 z-index와 충돌이 나서 의도에 맞지 않는 결과가 올 수 있기 때문에 modal 내 z-index 값을 직접 값을 핸들링 할 수 있어야 할 것 같습니다.

modal 컴포넌트의 z-index 값을 prop으로 하나만 받고 overlay값은 받은 값의 -1을 해서 쓰면 될 것 같습니다.

dev 스크립트가 2 * 패키지 수 + 1 개의 스크립트를 concurrently 실행하는데 패키지 수가 많아질수록 저 많은 프로세스들 때문에 로컬 시스템이 느려질 게 보이네요. https://github.com/paulmillr/chokidar 등의 파일시스템 watcher 라이브러리를 사용해서 필요한 것만 빌드하는 custom script를 작성하면 필요할 때만 빌드 스크립트를 돌려서 프로세스를 가볍게 만들어줄 수 있을 것 같습니다.

1.0.0 을 출시한 만큼 latest 가 되어야할것 같습니다.

배경

현재 DayPicker, RangePicker의 prop이 같아도 부모 컴포넌트가 렌더링될 때 같이 렌더링되면서 시간을 잡아먹습니다.

RoomFilterPopup에서 측정한 결과입니다. 달력을 펼친 채로 인원을 조정하면 달력은 다시 렌더링 될 필요가 없음에도 RoomFilterPopup이 다시 렌더링될 때마다 50ms 정도씩 걸립니다.
위의 예시에서 Calendar 컴포넌트에 memo를 걸어서 해결했으나 공통 모듈에 적용하는게 좋지 않을까 생각해서 이슈 생성합니다.

쟁점

1. memoization이 side-effect가 있을 수 있으니 퍼포먼스 이슈가 관측되는 지점에서 memoization 한다.
2. 날짜 일일히 렌더링하는게 비싼 연산이니 공통 모듈에서 자체적으로 memoization 한다.

의견 부탁드립니다!

기존의 { label, href }에 이미지와 부제가 추가된 { label, href, image, description } 형태의 link를 지원합니다.

articles-api에서 @tubeheesu 가 아래와 같은 구조로 구현해주었어요.

        {
          "type": "links",
          "value": {
            "display": "image",
            "links": [
              {
                "label": "패밀리 비치",
                "href": "/regions/e3803739-d1c4-441e-a3f7-5a057fa851c8/attractions/578445c7-cec3-45c1-854f-f1b5077620ce",
                "target": "default",
                "image": { ... },
                "description": "관광명소"
              },
              {
                "label": "계획 세워보자",
                "href": "/inlink?path=%2Farticles%2F12b6c041-53c6-41d3-a8da-0059d6274b14%3F_triple_no_navbar%26_triple_swipe_to_close",
                "target": "default",
                "image": { ... },
                },
                "description": null
              }
            ]
          }
        }

디자인은 저장 버튼 없는 POI 리스트형과 같습니다

https://formidable.com/blog/2019/upgrade-styled-components/

최근에 릴리즈된 @egjs/flicking 이 3.4.4 버전부터 window resize 시 오류가 발생합니다.

기존엔 @egjs/react-flicking 만을 deps 로 의존하고 있었는데, @egjs/react-flicking 에서 내부 의존하고 있는 @egjs/flicking 는 항상 최신 버전을 의존하고 있으므로, flicking 이 필요한 패키지들에서 @egjs/[email protected] 버전을 고정적으로 사용할 수 있도록 deps를 수정합니다.

NPM과 병렬로 GPR에 패키지를 업로드합니다.

1. HistoryContext 의 uriHash 초기값이 항상 null 입니다.
   • hash 가 붙어 있는 페이지를 reload 하면 uriHash 가 null 로 표시됩니다.
2. browser back/forward 와 같은 히스토리 이동시 uriHash 가 갱신되지 않습니다.
   • HIstoryContext 에서 제공하는 push, replace, back 을 제외한, 다른 방법으로 히스토리 이동시 uriHash 가 갱신되지 않습니다.

@titicacadev/frontend

• uriHash 관련 수정이 기존 프로젝트에 영향을 미칠 수 있어 minor 버전 업데이트가 필요합니다.

@appear 께서 호텔 작업중 발견해주셨습니다. 새 image-carousel의 이미지 카운터가 16/16으로 고정되는 현상이 있어요. 이미지 전체 개수를 Props나 API로 받아서 업데이트할 방안이 마련되어야 하겠습니다.

두 콘텍스트 Provider가 render할 때마다 새로운 value 객체가 전달됩니다. 그래서 useXXXContext 호출 값이 변경되었다고 간주하여, 해당 콘텍스트를 사용하는 컴포넌트를 불필요하게 렌더링하게 됩니다.
이를 방지하기 위해 value에 전달하는 레퍼런스가 불변해야하는데, 해당 Provider를 FuctionalComponent로 리팩토링하고 useMemo를 이용하는 방법이 가장 적합한 해결책으로 보입니다.

#235 를 해결하면서 다른 context의 문제점도 발견함.

https://github.com/titicacadev/triple-react-contexts

TripleDocumnet로 coupon을 가져오는 도중에 몇 가지 이슈가 있어 도움을 구하고자 합니다.

아래 파라미터들은 쿠폰 컴포넌트를 위해 필요한 요소들인데, 기존에 TripleDocument 를 일반적으로 사용하는 방법으로는 가져올 수가 없습니다.

<TripleDocument
        {...{
          onResourceClick,
          onResourceScrapedChange,
          onImageClick,
          onLinkClick,
          imageSourceComponent,
          resourceScraps,
        }}
      >
        {body}
</TripleDocument>

• 퍼블릭웹 액션 분기를 위한 isPublic → https://github.com/titicacadev/triple-frontend/pull/73로 해결
• 쿠폰함 이동을 위한 WEB_URL_BASE → TripleDocument 에서 props로 받는 방법
• 딥링크 생성을 위한 articleId → deepLink를 props로 받는 방법

@polysiya @inbeom @titicacadev/frontend 의 의견을 구합니다 🙇‍♂️

API Integration을 요구하는 컴포넌트가 등장했습니다. Docs 페이지에서 바로 호출 가능한 API가 준비되어야 테스팅 및 데모에 이들을 사용할 수 있겠네요.

PageContainer 라는 이름으로 isPublic일 때 -user-select: false 로 선택을 제한하는 처리를 반복해서 하고 있습니다. core-elements의 Container의 props를 추가해서 이벤트를 제거할 수 있으면 좋을 것 같아요.

triple-design-system에서 이루어지는 docs 배포를 triple-frontend에서 하는 것으로 대체합니다.

인터랙션 없는 페이지(ex. 어드민)에서 사용할 TripleDocument가 필요합니다.

점점 TripleDocument내의 각 element에서 외부와의 연결을 직접 처리하는 방향으로 나아가고 있으므로
이런 동작을 없앤 버전의 TripleDocument가 필요합니다.

슬랙 대화 참조: https://titicaca.slack.com/archives/CEEPB4TDY/p1568713518097100

우리의 소원은 통일!

관련이슈 : https://github.com/titicacadev/triple-air-web/blob/master/pages/search/airlines.tsx#L221

배경

• history-context의 push, replace, back 함수는 내부에서 next router 를 호출하고 있습니다.
• 만약 아래와 같이 실행하면, 비동기로 인해 back() 이 완료 되기전에 replace 가 호출될 수 있으며, 곧바로 back() 이 완료되면서, 실제 replace 가 일어나지 않는것으로 보일 수 있습니다.

const { back } = useHistoryContext()
const router = useRouter() // next/router

...

back()
router.replace('/take/me/to/church')

• 이 이슈를 해결하기 위해서 https://github.com/titicacadev/triple-air-web/blob/master/pages/search/airlines.tsx#L221 와 같이 workaround 했습니다.

기대동작

• push, replace, back 함수에서 next/router 의 반환값과 동일한 Promise 를 반환하여, 쓰는쪽에서 async/await 또는 then() 체인을 이용할 수 있게 하면 좋겠습니다.

const { back } = useHistoryContext()
const router = useRouter() // next/router

...

back().then(() => router.replace('/take/me/to/church'))

// or

async () => {
  await back();
  await router.replace('/take/me/to/church')
}

onTNAProductsFetch prop이 undefined일 수 있도록 정의되어있지만(https://github.com/titicacadev/triple-frontend/blob/master/packages/triple-document/src/tna.tsx#L68)
실제로 넘기지 않으면 https://github.com/titicacadev/triple-frontend/blob/master/packages/triple-document/src/tna.tsx#L84 에서 에러가 납니다.

디펜던시가 엮인 기능을 수정할 때마다(특히 docs) 전체 빌드가 필요한데, incremental build 혹은 실시간에 가까운 빠른 속도로 빌드할 수 있는 태스크를 제공하면 좋을 것 같습니다.

임베딩 영역에 포함하는 이미지 요소인 EmbeddedImage는 medium 의 고정 비율로만 사용하고 있습니다. https://github.com/titicacadev/triple-frontend/blob/master/packages/triple-document/src/triple-document.tsx#L234-L259

컨텐트를 구성할 때 이보다 다양한 비율의 이미지를 사용하고자 하는 니즈가 있어서, 이 제한을 풀어주면 좋을 것 같아요. 그런데 한 임베딩 영역에 속한 모든 이미지들은 같은 비율을 가져야 통일감 있는 디자인으로 컨텐트를 보여줄 수 있겠습니다. 다른 사례들과 같이 이런 제약에 대한 부분은 admin 페이지 쪽에서 맞춰주는걸로 해보아요.

typescript 환경에서 ListingFilter.FilterEntry 에 onClick prop 을 정의하려고 하면, definition 에는 정의되어 있지 않다는 메세지가 출력됩니다.

고정 비율로만 제공하고 있는 @titicaca/core-elements의 Image 컴포넌트에서 비율 유지하는 이미지를 사용하고 싶은 니즈가 있었습니다.

항공 뷰에서 출발일/도착일 선택 시 휴일 정보를 함께 보여주는 기능이 필요합니다. 현재 <DatePicker /> 컴포넌트는 disabledDays만 받고 있는데, 이 날짜들은 회색으로 표시되는 선택 불가능한 것들이어서 휴일처럼 렌더링되는 속성을 publicHolidays처럼 정의해서 받아야 할 것 같아요.

혹은 공휴일 API 호출을 date-picker 안에서 하는 것도 가능한 시나리오일 것 같습니다. 달력에 공휴일을 표시하는 걸 다른 뷰에도 적용하게 된다면 이 방향이 코드 중복을 최소화할 수 있는 쪽이겠어요.

Related: https://github.com/titicacadev/triple-air-web/issues/20

개발 과정에서 정식 버전 릴리즈 없이 새로운 기능 및 수정한 기능을 쉽게 테스트할 수 있도록 Canary release를 할 수 있도록 합니다. release-canary 태그로 트리거를 걸어줄 수 있을 것 같아요.

각 패키지 별로 e2e 테스팅에서 검증하고자 하는 바를 명확히 정의하고, 해당하는 문제가 없거나 적절한 문제를 풀고 있지 않는 테스트 케이스를 정리해보면 좋겠습니다. 그런 케이스는 unit test/functional test로 전환하는 게 바람직할 것 같습니다.

현재 OS 정보와, 트리플 앱 사용 여부만 노출하고 있는 UserAgentContext에서 트리플 앱의 버전을 알아야 하는 이슈가 있습니다. 일부 앱 URL 사용 시 프론트엔드 단계에서 앱 버전에 따른 분기 처리가 필요해집니다.

ad-banners 패키지가 항공 웹에서도 사용할 수 있게 되면 좋겠습니다. 지금은 콘텐츠, 호텔의 상세 페이지에서 사용하는 광고 배너 컴포넌트만 통합한 상태입니다. 그래서 각각의 배너를 세로로 정렬하는데요. 항공 웹은 가로로 배너를 배치하는 컴포넌트를 사용하고 있습니다.
두 가지 변경이 필요합니다.

• 플리킹을 이용해서 배너를 가로로 배치하는 모드 추가
• 항공 웹이 쓰는 광고 배너 API를 사용할 수 있는 인터페이스 추가

현재 Button 컴포넌트가 <a> 엘리먼트로만 생성이 가능해서 목적이나 행동이 의도와 다른 경우가 생깁니다.
as props를 추가해서 <button> 엘리먼트로 변경할 수 있게 하고 a일 경우엔 href props로 추가로 받아 onclick 이벤트 할당 없이 의도에 맞는 랜더링이 되도록 도우면 좋을 것 같습니다.

GCP Cloud Build에서 GitHub Actions로 CI 시스템을 변경합니다.

• 연관이슈 : https://github.com/titicacadev/triple-air-web/issues/25

위 스크린샷과 같은 형태를 지원할 수 있도록, 상단에서 내려오는 ActionSheet 옵션을 추가하면 좋겠습니다.

Action Item

• maxContentHeight: string prop 추가

  • ContentContainer 에 max-height: calc(100vh - 256px); 로 되어있는 값을 옵셔널하게 받아 높이값을 조절 할 수 있도록 되면 좋겠심다 by @appear

• borderRadius: number prop 추가
  • border-radius 를 필요로 하지 않는 케이스 존재 (기본값: '13')
• from: 'bototm' | 'top' prop 추가
  • 'top' 이면 위에서 아래로 내려오는 형태로 표시됩니다. (기본값: 'bottom')
• padding: CSS.MarginPadding prop 추가
  • padding 을 자유롭게 조정하려는 니즈 존재

쿠폰 발급과 유사한 케이스일 것 같은데, 주로 프로모션 페이지에서 자주 쓰이는 '보상 받기' 류 버튼의 상태를 제어할 수 있으면 좋을 것 같다는 제안을 @boxersb 가 해주셨습니다.

https://triple.guide/articles/a87d3f44-a9c3-4b0d-aac9-caaa17c41071

위 아티클에서도 노출 중인 '캘린더 응모하기' 버튼입니다. Coupon 엘리먼트처럼 reward 엘리먼트를 정의하면, 페이지 진입 시 eligibility API를 호출해서 버튼 상태를 제어할 수 있을 것 같아요.

매우 헷갈리는 네이밍이지만 coupons-api를 통해서 보상 관련 정보들을 매니징하고 있어요 https://github.com/titicacadev/triple-coupons-api/

#149

포함하면 좋을 내용:

• 개요
• CHANGELOG 반영 여부
• docs 반영 여부
• Breaking change 여부

항공 프론트엔드 PR 논의 중 가져옵니다. 참고: https://github.com/titicacadev/triple-air-web/pull/75#discussion_r346672643

항공편의 출국, 귀국과 같이 구간의 시작과 끝 부분에 달아줄 수 있는 레이블을 props로 제어할 수 있으면 좋을 것 같습니다. 아래와 같은 느낌?

<RangePicker
  from={from}
  to={to}
  fromLabel='출국'
  toLabel='귀국'
/>

fromLabel, toLabel 말고 labels 어레이로 받는 것도 괜찮을 것 같고요. 의견 부탁드려요!

어떤 페이지든 JS 애셋 로드가 안 되면 페이지 내의 인터랙션이 하나도 안 되는 현상에 부딪히게 됩니다. SSR은 잘 되어서 페이지 내용은 보이지만 기능이 하나도 동작하지 않는 상태인데요, 이런 상황에서 뒤로 가기나 새로 고침을 유도할 수 있는 장치를 마련해보면 좋겠습니다.

가장 쉽게 시도 가능한 건 Navbar의 뒤로 가기/닫기 버튼에 raw event handler를 붙여주는(& 클라이언트에 closeWindow 이벤트를 던지는) 건데요, JS 애셋 로드가 되면 이 핸들러를 override하도록 해야겠어요.

cc @polysiya

line-height 정상 케이스

• https://triple.guide/articles/eb27ce40-7f22-410e-b411-a78cc4571f6d?_triple_no_navbar&_triple_swipe_to_close

line-height 비정상 케이스

• https://triple.guide/articles/596c7c3f-ce85-455a-85bb-8a817f67e9b7?_triple_no_navbar&_triple_swipe_to_close

core-elements 패키지 안에 폼 관련 요소들이 포함되어 있는데, 원활한 컴포넌트 인터페이스 통일을 위해 패키지를 분리해보면 좋을 것 같습니다.

TODO

• 프로젝트 별 Input 스타일 리뷰
• 필요한 Input 종류 리뷰
• Single row에 병렬로 표현하는 필드의 레이아웃 구성 방식 논의

TF 내 컴포넌트에서 GlobalColorSet 내에 포함된 컬러값인대도 불구하고 #fff 와 같은 hex code를 사용한 코드가 있습니다. 한 번에 정리가 되면 좋을 것 같습니다.

#286 PR에서 불거진 이슈입니다.

데스크탑 사파리에서 Carousel 영역 안의 이미지를 플리킹할 때 이미지 드래깅 동작이 활성화되어 플리킹을 하지 못하고 있습니다.

Possible solutions:

• pointer-events 스타일: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• ondragstart 핸들러에서 preventDefault 호출: https://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-page