1 Team - HackMD

# 1 Team ## UI Kit 만들기 - 스토리북 기반 [UI 컴포넌트 구축하기](https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/build/) ## 각자 선정한 주제 - 다혜 : checkbox => [checkbox-example](https://codepen.io/aaroniker/pen/ZEpEvdz) [my-checkbox-example](https://codepen.io/devohda/pen/PoQQmPE) - 정훈 : button => [ex1](https://codepen.io/aaroniker/pen/eYOVrNa) - 도호 : [3d carousel](https://www.framer.com/examples/3d-carousel/) - 재욱 : tabbar [ex1](https://codepen.io/abxlfazl/pen/VwKzaEm) [ex2](https://codepen.io/aaroniker/pen/rNMmZvq) ## 진행 방법 - 주제는 내일(5/19)까지 정하기 ## 그라운드 룰 1. 2~3시간 충분한 고민 후 어떤 걸 찾아봤는지, 어떤 점이 안 되는지 공유하기! ## 일정 - 개발환경 구축 : 금요일까지 (05/20) - 중간 발표 전 모임 : 일요일 (05/22) 22:40 ~ 1시간 이내 - 중간 발표 전 정리를 위한 모임 - 현재까지 진행 상황 - 중간 발표 : 다음주 월요일 (05/23) - 선정한 주제 - UI Kit 만들기 - 진행 상황 - 다혜 - 스토리북 사용법 공부중 - framer motion을 사용하여 check box 구현중 - 도호 - framer motion 공부 - 간단한 chip event 구현하다가 실패 - 정훈 - button에 bus가 움직이는 animation 구현중 - 재욱 - 2가지 종류의 tabbar 구현중 - framer-motion을 사용한 svg animation 구현중 - 시연 - stitches(styling library)에 대해서 간단하게 설명 (재욱님) - 앞으로 진행 방향 - storybook에 UI를 올리고 관심가는 다른 사람의 주제를 구현해볼 예정 - 이는 코드 리뷰의 질을 높이기 위해서 - Q&A - 최종 발표 준비 : 05/26 목요일 10시 ## 개발환경 및 프로젝트 정보 - CRA TS 템플릿으로 프로젝트 생성 - 설치한 package - framer-motion - storybook - stitches - 스토리북은 예제들 포함되있습니다 - 절대경로 설정 - 프로젝트 전체 스타일링을 위한 globalstyle, theme 적용 - **stitches import 주의 사항** theme 적용으로 stitches에서 제공하는 styled, globalStyle, css 같은 것들은 /style/theme 파일에서 import해서 사용해야 합니다 기본적으로 styled는 'import { styled } from "@stitches/react";으로 불러와서 사용했지만 theme를 사용하기때문에 import { styled } from "style/theme";에서 불러와야 theme에 적용된 변수들을 사용할 수 있습니다 - [theme 관련 사용법](https://stitches.dev/docs/tokens) 문서의 Property Mapping 쪽을 보면 theme 객체에서 선언한 keyname, 아마 token이라고 부르는 것 같습니다, 작성한 token이 어떤 CSS 속성에서 변수처럼 사용가능한지 확인 할 수 있습니다 - [framer + stitches 사용법 참고](https://codesandbox.io/s/mzt34) - 프로젝트 실행`npm run start or yarn start` - 스토리북 실행 `npm run storybook` ## 참조 사이트 - [Online Tutorials](https://youtu.be/pKuvi9t4D4Y) - [인터렉티브, 아이콘 단위 컴포넌트, aaroniker](https://codepen.io/aaroniker) - [약간의 애니메이션으로 확연히 다른 UI, abxlfazl](https://codepen.io/abxlfazl) - [dribbble, 드리블, 디자인 포트폴리오 플랫폼](https://dribbble.com/) - [Codrops, 인터렉티브 Demo, Source](https://tympanus.net/codrops/category/playground/) - [mui](https://mui.com/material-ui/react-autocomplete/) - [움직이는 framer](https://codesandbox.io/s/framer-motion-morphsvg-example-dp7to?from-embed=&file=/src/App.tsx) ## 5/23 회의 - 시간차 애니메이션 : key값이 같으면 동일 애니메이션이라고 판단 (delay children) - story book : tsx - repo와 branch 구성 - 도호님께서 readme 올리면서 공통 프로젝트 구조 올려주실 예정 ## 최종 발표 - 발표 구성을 통일 - 주제 : 스토리북 컴포넌트들 만들기 - 진행 과정 - 분담 - 회의, 코드 리뷰 - 환경 설정 - 라이브러리 사용기 - 스토리북 - stitches - 각자 만든 코드 설명 - 코드 구조 - 스타일링 - 애니메이션 - framer motion 적용한 부분 - Q&A - 각자 본인이 만든 것 발표 - 일요일까지 pr + github id - 도호 : Do-ho - 다혜 : devohda - 재욱 : wooogi123 - 정훈 : chjjh0 ## 최종 발표용 정리 <details> <summary>이재욱</summary> <h5>주제 : Tabbar</h5> <details> <summary>코드 구조</summary> ``` Tabbars |-- Type1 |-- IconBase.tsx |-- Icons.tsx |-- TabbarBase.tsx |-- TabbarIndicator.tsx |-- TabbarItem.tsx |-- Tabbars.stories.tsx |-- Type1.tsx |-- colors.ts |-- index.ts |-- Type2 |-- IconButtonBase.tsx |-- IconButtons.tsx |-- TabbarBase.tsx |-- TabbarIndicator.tsx |-- Tabbars.stories.tsx |-- Type2.tsx |-- index.ts |-- utils.ts |-- index.ts ``` </details> <details> <summary>Animation + framer-motion</summary> <section> <h5>Type1</h5> <p> <span> TabbarIndicator, TabbarItem, IconBase 컴포넌트들에서 애니메이션을 적용함 </span> <br> <span> TabbarIndicator 컴포넌트의 props을 통해 position x의 값을 받고, 해당 값을 framer-motion animate props으로 전달해 애니메이션을 적용. 또한 spring type을 사용해 indicator가 끝에서 살짝 튕기는 부분도 적용 </span> <br> <span> TabbarItem 컴포넌트의 props을 통해 isActive, activeBgColor를 받아 Item이 선택되 isActive 값이 true가 될 때 activeBgColor를 적용시키는 애니메이션을 추가.<br> 구현하려는 원본 코드는 해당 부분을 pseudo element에 적용 및 css transition을 사용해 구현되어 있는데, framer-motion상에서 pseudo element에 애니메이션을 적용시킬 방법을 찾지 못해 css transition을 사용해 구현 </span> <br> <span> IconBase 컴포넌트의 props으로 isActive 값을 받아 해당 값이 true일 때 framer-motion의 keyframes을 사용해 애니메이션을 적용. array-dashoffset을 400 -> 0으로 변경하도록 처리해 path가 각각 그려지는 애니메이션을 적용 </span> </p> </section> <section> <h5>Type2</h5> <p> <span> TabbarIndicator, IconButtonBase 컴포넌트들에서 애니메이션을 적용함 </span> <br> <span> TabbarIndicator 컴포넌트의 props을 통해 position x의 값을 받고, 해당 값을 framer-motion animate props으로 전달해 애니메이션을 적용. 애니메이션이 순차적으로 flow를 그리고 있어, useAnimation hooks과 async - await 구문을 사용해 절차적인 flow 코드를 적용함. indicator가 튀어오르는 애니메이션은 framer-motion path component의 svg morph 기능을 사용해서, d props을 변경하는 방식으로 적용 원이 위로 올라가는 애니메이션은 keyframes을 사용해 y position, opacity 값이 변경되도록 적용 </span> <br> <span> IconButtonBase 컴포넌트의 props으로 isAnimation, outlinePath, filledPath를 받고, 애니메이션이 끝날 경우를 파악하기 위한 onAnimationComplete handler를 재정의 Tab이 선택될 때 Icon이 차오르는 animation은 두개의 svg를 겹쳐놓고 clip-path를 조절하는 방식으로 구현되어 있어, outlinePath, filledPath 두개를 받아 Icon을 그리도록 작업 useMotionValue hooks을 사용해서 해당 값의 animate를 컨트롤 하고, useMotionTemplate을 활용해 해당 값이 px로 변환되도록 작업 해당 animation MotionValue를 css 변수로 관리하기 위해 IconButtonBase 컴포넌트의 style props으로 적용 IconButtonBase 컴포넌트는 active 될 떄 차오르고, deactive 될 때 비는 애니메이션이 존재하는데, 이를 적용하기 위해 startActiveAnimation, startDeactiveAnimation 두개로 animation flow를 분리해 적용 </span> <br> <span> IconBase 컴포넌트의 props으로 isActive 값을 받아 해당 값이 true일 때 framer-motion의 keyframes을 사용해 애니메이션을 적용. array-dashoffset을 400 -> 0으로 변경하도록 처리해 path가 각각 그려지는 애니메이션을 적용 </span> </p> </section> </details> </details> ### 김도호 주제 : 3D Carousel - 코드구조 ``` ThreeDCarousel |-- ThreeDCarousel.stories.tsx |-- ThreeDCarousel.tsx Chip |-- Chip.stories.tsx |-- Chip.tsx ``` - 회고 - **Framer Motion + Stitches 공부 시작** - Framer Motion의 공식 문서 예제를 따라해보면서 라이브러리를 익힘 - Stitches는 Near-Zero Runtime이라고 소개하고 있으며 실제로 Emotion과 같은 Styled-Component와 비교했을 때 성능이 좋습니다. - 방식은 DOM injection (head나 body에 style 태그 추가 후 style node를 추가하는 방식)이 아닌 CSSStyleSheet insertRule를 이용해 CSSOM에 직접 삽입하는 기술을 이용합니다. - emotion은 button hover 시 tooltip을 렌더링 하는 과정에서 css를 다시 parsing 함 - 결국 stitches js는 css parsing으로 인해 blocking 되는 시간을 최대한 줄임 - 초기 렌더링 - Stitches : 1.72ms - Emotion: 2.61ms - Styled-Components: 3.58ms - Css prop Update - Stitches : 1.06ms - Emotion: 2.15ms - Styled-Components: 2.47ms - **Chip** - 만들다가 backgroundPosition이 변하지 않는 것을 확인했습니다. - Framer motion을 쓰는 이유가 뭘까 생각해보면 CSS적인 부분을 구현하기 위함이 아니라 JS로 애니메이션을 표현하기 위함의 영역이 아닐까 생각하였습니다. (합리화) - [이런 이야기도...!](https://stackoverflow.com/questions/66420227/how-to-animate-background-image-in-framer-motion) - **ThreeDCarousel** - 자동 회전까지는 성공했으나 Container의 ref를 적용할 수 없어 정확한 offsetWidth를 구할 수 없었음 - 그래서 size가 7, 9를 제외한 다른 부분이 이상하게 도는 것을 발견 - 우선... 숫자적인 부분이므로 구현하지 않았습니다. - 직접 눌러서 회전시키자 - 수동으로 회전 시키기 위해서는 애초에 설계가 useMotionValue를 통해 가운데 숫자를 정해두고 회전을 시켜야했음 - 이걸 구현하려다가 알게 되었습니다... - (시간의 제약으로 구현하지 못했습니다.) ### 오다혜 주제 : check box [my-checkbox-example](https://codepen.io/devohda/pen/PoQQmPE) - 코드 구조 ``` Checkbox |-- Checkbox.tsx |-- Checkbox.stories.tsx ``` - 활동 1. stitches + react 로 체크박스 만들기 2. framer motion 을 사용하여 애니메이션 만들기 3. storybook으로 보여주기(진행중) - 핵심 기능 - 눌렀을 때 체크 표시가 애니메이션으로 이루어짐 (useCycle 사용) - svg 체크표시의 변화(stroke dashoffset, stroke dasharray) - 후기 - 예제가 scss로 이루어져 있었는데 scss를 사용해본 적이 없어서 문법 해석이 어려워서 처음 구조 잡는 것이 어려웠습니다. 또한 ts도 처음 써봐서 익숙하지 않아 생각했던 것보다 구현을 많이 못한 것이 아쉽습니다. - gsap으로 이루어진 코드를 해석하고 framer motion으로 바꾸는 과정을 진행하고 있습니다. 사실 진행하면서 gsap이나 framer motion 과 같은 라이브러리 사용법 보다도 1차적으로 css를 활용한 애니메이션 효과에 대해 속성값이나 적용했을 때 어떻게 바뀌는지 잘 몰라서 구현이 어려웠던 것 같습니다. ### 최정훈 주제 : 버튼 애니메이션 - 코드구조 ``` Buttons |-- Buttons.tsx |-- Truck.tsx |-- Box.tsx |-- Lines.tsx ``` - 주요특징 - 애니메이션 요소들은 모두 SVG가 아닌 CSS로 작성 - 순차적인 애니메이션 실행을 위해 useAnimation 활용 - 요소별로 다른 variants를 적용하여 개별 애니메이션 제어

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.