트리플 프론트엔드 공용 컴포넌트 및 라이브러리입니다.
Triple Frontend Storybook에서 컴포넌트 문서와 예시를 볼 수 있습니다.
CONTRIBUTING.md를 참고해주세요.
Monorepo for Triple Frontend Components and Libraries
Home Page: https://storybook.triple-corp.com
License: MIT License
트리플 프론트엔드 공용 컴포넌트 및 라이브러리입니다.
Triple Frontend Storybook에서 컴포넌트 문서와 예시를 볼 수 있습니다.
CONTRIBUTING.md를 참고해주세요.
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
퍼블릭 웹에서 이미지 슬라이드 시에,
마지막 이미지가 딤드 처리되어서 나옴과 동시에
사용자에게 우상단에 있는 페이지 라벨을 안보이게 하거나 opacity를 주는 작업이 필요합니다.
현재 nuka-carousel로는 마땅한 이벤트를 걸 수 없어서,
현재 이미지 캐러셀을 @egjs/flicking
로 전환한 뒤에 이 작업이 추가되어야 합니다.
@egjs/flicking
전환overflow-y: hidden
를 적용할 수 있는지 알아봅니다~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를 걸어서 해결했으나 공통 모듈에 적용하는게 좋지 않을까 생각해서 이슈 생성합니다.
의견 부탁드립니다!
기존의 { 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
}
]
}
}
최근에 릴리즈된 @egjs/flicking 이 3.4.4 버전부터 window resize 시 오류가 발생합니다.
기존엔 @egjs/react-flicking
만을 deps 로 의존하고 있었는데, @egjs/react-flicking
에서 내부 의존하고 있는 @egjs/flicking
는 항상 최신 버전을 의존하고 있으므로, flicking 이 필요한 패키지들에서 @egjs/[email protected]
버전을 고정적으로 사용할 수 있도록 deps를 수정합니다.
NPM과 병렬로 GPR에 패키지를 업로드합니다.
@titicacadev/frontend
- uriHash 관련 수정이 기존 프로젝트에 영향을 미칠 수 있어 minor 버전 업데이트가 필요합니다.
@appear 께서 호텔 작업중 발견해주셨습니다. 새 image-carousel의 이미지 카운터가 16/16으로 고정되는 현상이 있어요. 이미지 전체 개수를 Props나 API로 받아서 업데이트할 방안이 마련되어야 하겠습니다.
triple-frontend/packages/react-contexts/src/my-reviews-context.tsx
Lines 124 to 131 in 13145af
triple-frontend/packages/react-contexts/src/images-context.tsx
Lines 126 to 133 in 13145af
두 콘텍스트 Provider가 render할 때마다 새로운 value 객체가 전달됩니다. 그래서 useXXXContext 호출 값이 변경되었다고 간주하여, 해당 콘텍스트를 사용하는 컴포넌트를 불필요하게 렌더링하게 됩니다.
이를 방지하기 위해 value에 전달하는 레퍼런스가 불변해야하는데, 해당 Provider를 FuctionalComponent로 리팩토링하고 useMemo를 이용하는 방법이 가장 적합한 해결책으로 보입니다.
#235 를 해결하면서 다른 context의 문제점도 발견함.
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로 받는 방법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
const { back } = useHistoryContext()
const router = useRouter() // next/router
...
back()
router.replace('/take/me/to/church')
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 페이지 쪽에서 맞춰주는걸로 해보아요.
고정 비율로만 제공하고 있는 @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
패키지가 항공 웹에서도 사용할 수 있게 되면 좋겠습니다. 지금은 콘텐츠, 호텔의 상세 페이지에서 사용하는 광고 배너 컴포넌트만 통합한 상태입니다. 그래서 각각의 배너를 세로로 정렬하는데요. 항공 웹은 가로로 배너를 배치하는 컴포넌트를 사용하고 있습니다.
두 가지 변경이 필요합니다.
현재 Button 컴포넌트가 <a>
엘리먼트로만 생성이 가능해서 목적이나 행동이 의도와 다른 경우가 생깁니다.
as props를 추가해서 <button>
엘리먼트로 변경할 수 있게 하고 a일 경우엔 href
props로 추가로 받아 onclick 이벤트 할당 없이 의도에 맞는 랜더링이 되도록 도우면 좋을 것 같습니다.
GCP Cloud Build에서 GitHub Actions로 CI 시스템을 변경합니다.
위 스크린샷과 같은 형태를 지원할 수 있도록, 상단에서 내려오는 ActionSheet 옵션을 추가하면 좋겠습니다.
maxContentHeight: string
prop 추가
ContentContainer 에
max-height: calc(100vh - 256px);
로 되어있는 값을 옵셔널하게 받아 높이값을 조절 할 수 있도록 되면 좋겠심다 by @appear
borderRadius: number
prop 추가
border-radius
를 필요로 하지 않는 케이스 존재 (기본값: '13')from: 'bototm' | 'top'
prop 추가
'bottom'
)padding: CSS.MarginPadding
prop 추가
쿠폰 발급과 유사한 케이스일 것 같은데, 주로 프로모션 페이지에서 자주 쓰이는 '보상 받기' 류 버튼의 상태를 제어할 수 있으면 좋을 것 같다는 제안을 @boxersb 가 해주셨습니다.
https://triple.guide/articles/a87d3f44-a9c3-4b0d-aac9-caaa17c41071
위 아티클에서도 노출 중인 '캘린더 응모하기' 버튼입니다. Coupon 엘리먼트처럼 reward 엘리먼트를 정의하면, 페이지 진입 시 eligibility API를 호출해서 버튼 상태를 제어할 수 있을 것 같아요.
매우 헷갈리는 네이밍이지만 coupons-api를 통해서 보상 관련 정보들을 매니징하고 있어요 https://github.com/titicacadev/triple-coupons-api/
포함하면 좋을 내용:
항공 프론트엔드 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
core-elements 패키지 안에 폼 관련 요소들이 포함되어 있는데, 원활한 컴포넌트 인터페이스 통일을 위해 패키지를 분리해보면 좋을 것 같습니다.
TF 내 컴포넌트에서 GlobalColorSet 내에 포함된 컬러값인대도 불구하고 #fff
와 같은 hex code를 사용한 코드가 있습니다. 한 번에 정리가 되면 좋을 것 같습니다.
#286 PR에서 불거진 이슈입니다.
데스크탑 사파리에서 Carousel 영역 안의 이미지를 플리킹할 때 이미지 드래깅 동작이 활성화되어 플리킹을 하지 못하고 있습니다.
Possible solutions:
pointer-events
스타일: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-eventsondragstart
핸들러에서 preventDefault
호출: https://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-pageA declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.