๐งท ์ด์ ํฌ์คํธ
- [Bottom Sheet - 1] ์๋ชป๋ ์ถ์ํ https://presentkey.tistory.com/11
๐ฉ ์ต์ข ๊ฒฐ๊ณผ๋ฌผ
๐ฉ ์ปดํฌ๋ํธ ๊ตฌ์กฐ
- ํฉ์ฑ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด ํ๋ฉด ๊ตฌํ
์ด๋ฅผ ํตํด ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ์ฑ์ ๋์ด๋ ๊ฒ์ ๋ํ ๊ณต๋ถ๋ฅผ ํ ์ ์์๊ณ , ์ด์ ๊ฒ์๊ธ์ ๋ฌธ์ ์ ์ ํด๊ฒฐํ ์ ์์์ต๋๋ค.
- ์ถ์ํ๊ฐ ์๋ชป ๋์ด ๋ฐ์ํ ์ดํดํ ์ ์๋ ์ปดํฌ๋ํธ ๊ตฌ์กฐ์ ๋ก์ง๋ค ๊ทธ๋ฆฌ๊ณ ๋ฌด์ํ ๋ง์ props...
- button ์์ญ๊ณผ form ์์ญ์ด ๋ถ๋ฆฌ๋์ด ์๋์
- ์
์ถ๊ธ form์ ๊ฒฝ์ฐ input value๋ฅผ ๊ณต์ ํ๊ณ ์๋์
๐ฉ BottomSheet ์ปดํฌ๋ํธ
2~ 15๋ฒ์งธ ์ค์ BottomSheet ์ ๋๋ฉ์ด์ ๋ฐ ๋ธ๋ผ์ฐ์ resize ์ด๋ฒคํธ์ ๊ดํ ๋ก์ง์ ๋๋ค.
resize ์ด๋ฒคํธ์ throttle์ ์ ์ฉํด 700ms๋ง๋ค ๋ธ๋ผ์ฐ์ ์ฌ์ด์ฆ๋ฅผ ๋ณ๊ฒฝํ๋๋ก ํ์ต๋๋ค.
BottomSheetContext๋ ์ด๋ค Form์ด ๋ ๋๋ง ๋๋์ง ๊ฒฐ์ ํ๋ toggle ์ํ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
๐ฉ Recoil ์ฌ์ฉ
์ฒ์์๋ Context์์ height ์ํ๋ฅผ ๊ฐ์ง๊ณ Body ๋ถ๋ถ์ ๋์ด๋ฅผ ๊ณ์ฐํ์์ต๋๋ค. Context๋ฅผ ํตํด height ์ํ๋ฅผ ๊ณต์ ๋ฐ์ผ๋ ๋ฌธ์ ์ ์ด ์๊ฒผ์ต๋๋ค.
1. useEffect๋ฅผ ์ด์ฉํด toggle ์ํ๊ฐ ๋ฐ๋๋๋ง๋ค height์ ์ํ ์ ๋ฐ์ดํธ
2. ๋ฒํผ์ด ๊บผ์ง๋ ์ํ ์ ๋ฐ์ดํธ 1๋ฒ, ๋ฒํผ์ด ์ผ์ง๋ ์ํ ์ ๋ฐ์ดํธ 1๋ฒ -> ์ด 2๋ฒ์ ์ํ ๋ณํ ๋ฐ์
3. ๋ถ์์ฐ์ค๋ฌ์ด ์ ๋๋ฉ์ด์ ๋ฐ์
Recoil์ ํตํด height ์ํ๋ฅผ ๊ด๋ฆฌํ๋ฉด์ ๋ฑ 1๋ฒ์ ์ํ๋ณํ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์์ต๋๋ค.
Header ์ปดํฌ๋ํธ
children์ผ๋ก button์ ์กฐํฉํ์ฌ ๊ฐ ํ์ด์ง์ ๋ง๋ button์ ์์ฑํ ์ ์๋๋ก ํ์ต๋๋ค.
Body ์ปดํฌ๋ํธ
toggle ์ํ์๋ฐ๋ผ Body์ height ์ํ๋ฅผ ๋ณ๊ฒฝํ๊ณ ์์ต๋๋ค.
children์ผ๋ก ๊ฐ ํ์ด์ง์ ๋ง๋ Form์ ์กฐํฉํ ์ ์๋๋ก ํ์ต๋๋ค.
Form ์ปดํฌ๋ํธ