[Feat/#23] Tab & TextBox & BottomSheet & FilterBottomSheet #34
Conversation
ocahs9
added
๐ fix
| @@ -31,6 +36,7 @@ const Chip = ({ label, icon = false, color = "blue", onClick }: CombinedChipProp | |||
| {label} | |||
| {icon && ( | |||
| <IcDelete | |||
| onClick={() => console.log("first")} | |||
There was a problem hiding this comment.
p2) ์ฌ๊ธฐ ํ์ธํด์ฃผ์ธ์!
There was a problem hiding this comment.
๋ฐ๋ก ๋ฐ์ํ์ต๋๋ค !
| const renderDropDownData = () => { | ||
| if (content) { | ||
| return content.map((data) => ( | ||
| //todo: ์นฉ์ผ๋ก ๋ณ๊ฒฝ, selected ์ํ์ผ ๋ ๋ชจ์ต๋ ๋ฐ์(selectedFilters ์ด์ฉ) |
There was a problem hiding this comment.
p3) ์ด TODO ๋ ์์ ์ ์ฉ ๋ ์ฌํญ์ผ๊น์?
There was a problem hiding this comment.
๋ต ๋ฐ์๋์์ต๋๋ค ! ์ถํ ์ง์ธ๊ฒ์ฉ
| useEffect(() => { | ||
| console.log(categoryData); | ||
| }, [categoryData]); |
There was a problem hiding this comment.
p2) useEffect ์ ์ฝ์ ๋ก๊ทธ ์ ์ด๋์ ๊ฑฐ ํ๋ฒ ํ์ธํด์ฃผ์ธ์!!!
There was a problem hiding this comment.
๋ต ํ์ธํ ๊ฒ์!
| (ids as number[]).map((id) => { | ||
| const categoryData = useFilterStore.getState().categoryData; | ||
| const keyMap: Record<keyof SelectedChips, CategoryType> = { | ||
| breedId: "kind", | ||
| diseaseIds: "disease", | ||
| symptomIds: "symptoms", | ||
| } as const; | ||
|
|
||
| const category = keyMap[key as keyof SelectedChips]; | ||
|
|
||
| // ์ค์ฒฉ ๋ฐ์ดํฐ ํ์ | ||
| const getNameById = (id: number, category: CategoryType): string | undefined => { | ||
| if (category === "kind") { | ||
| return categoryData.kind.find((item) => item.id === id)?.name; | ||
| } | ||
| if (category === "disease") { | ||
| return categoryData.disease.flatMap((group) => group.diseases).find((item) => item.id === id)?.name; | ||
| } | ||
| if (category === "symptoms") { | ||
| return categoryData.symptoms.flatMap((group) => group.symptoms).find((item) => item.id === id) | ||
| ?.name; | ||
| } | ||
| return undefined; | ||
| }; | ||
|
|
||
| const name = getNameById(id, category); | ||
|
|
||
| return ( | ||
| <Chip | ||
| key={`filter-${key}-${id}`} | ||
| label={name || "Unknown"} | ||
| icon={true} | ||
| onClick={() => toggleChips({ id, category: key as keyof SelectedChips })} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
p3) return ๋ ๋ ์น์ ์์ ๋ณ์ ์์ฑํ๋ ๊ฒ์ด ์ด์ง์ ์ฝ๋ ๊ฐ๋ ์ฑ, ๊ตฌ์กฐ ์ ๊ด์ฐฎ์์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ, ํน์ ์ด๋ ๊ฒ ๊ตฌํํ์ ์ด์ ๊ฐ ์์๊น์??
There was a problem hiding this comment.
๋ฐ์์ค๋ ๋ฐ์ดํฐ์ depth๊ฐ ๊น์ด์, ํ์
์ ๋ง๊ฒ ๋ณํํ๋ ๊ณผ์ ์์ ์ฝ๋๊ฐ ์กฐ๊ธ ์ง์ ๋ถํด์ง๊ณ ๊ธธ์ด์ก์ต๋๋ค ใ
ใ
์ถํ ๊ฐ์ ํ ์ ์์ผ๋ฉด ๊ฐ์ ํด๋ณผ๊ฒ์! ํน์ ์ข์ ๋ฐฉ๋ฒ ๋ ์ค๋ฅด๋ฉด ์ ์ ๋ถํ๋๋ฆฝ๋๋ค!
๐ฅ Related Issues
โ ์์ ๋ฆฌ์คํธ
๐ง ์์ ๋ด์ฉ
์ปค๋ฎค๋ํฐ ๊ฒ์๊ธ ์กฐํ, ๊ฒ์๊ธ ์์ฑ์์ ์ฌ์ฉํ๋ (+ ๋ง์ดํ์ด์ง์์๋ ์ฌ์ฉํ๋) ๋ฐํ ์ํธ ํํฐ๊ฐ ์ฃผ ์์ ๋ด์ฉ์ ๋๋ค!
์ต๋ํ ๋จ์ํ๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌ๋ฐ๊ฒ ํ๊ณ ์ถ์ด์ ๋ฆฌํฉํ ๋ง์ ์์ฌ๋ด๋ค๊ฐ ์คํ๋ ค ๋ณต์กํ ์ฝ๋๊ฐ ๋์ด๋ฒ๋ ธ๋ค์..
ํ์ฅ์ฑ์ด ๋ง์ด ๋จ์ด์ง๋ ๊ฒ ๊ฐ์๋ฐ, ์ถํ ์คํ๋ฆฐํธ (ํน์ ์ฑ์ผ ๋๋๊ณ ) ๋ ๋ฆฌํฉํ ๋งํ๋ ์๊ฐ์ ๊ฐ๋๋ก ํ๊ฒ ์ต๋๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋จ์ํฉ๋๋ค !
(์ฐธ๊ณ ๋ก, setOpen์ ์ธ์๊ฐ์ผ๋ก boolean์ ์ฃผ์ด ์กฐ์ ํ๋ ํจ์, toggleOpen์ ์ธ์ ์์ด ์คํ๋์ด open -> close, close -> open ์ผ๋ก ์ํ๋ฅผ ๋ฐ๊ฟ์ฃผ๋ ํจ์ ์ ๋๋ค.)
์ฌ์ฉ ๋ฐฉ๋ฒ์ด ์ ์ดํด๊ฐ ์๊ฐ๋ฉด, ์ธ์ ๋ ์ง ์ง๋ฌธ ์ฃผ์ธ์!
๐ฃ ๋ฆฌ๋ทฐ์ด์๊ฒ ์ด๋ ์ ๊ฐ์?
๏ฟฝapi ๋ก ๋ฐ์์ค๋ ๋ฐ์ดํฐ ํ์์ ๋ง์ถฐ ์์ ์ ์งํํ๋๋ฐ, ๊ทธ๋ฌ๋ค๋ณด๋ ํ์ ์ ์๊ฐ ๋ง์ด ๊ผฌ์๋ ๊ฒ๋ ์์ต๋๋ค.
์ด๊ฒ ๋๋ฌธ์ ์์ ์๊ฐ์ด ๋ง์ด ์์๋์์ต๋๋ค. ๋ํ, ๋์ค์ ์๋ก์ด ํ๋๊ฐ ์๊ฒผ์ ๋ ์ผ์ผํ ์ ๋ ฅํด์ฃผ์ด์ผํ๋ ๋ถํธํจ์ด ์๋๋ฐ ์ด๋ฅผ ํด๊ฒฐํ ์ ์๋ ์์ด๋์ด๊ฐ ๋ ์ค๋ฅด์๋ ๋ถ์ด ์๋ค๋ฉด ์๊ฒฌ ๋ถํ๋๋ฆฝ๋๋ค ~!
๐ธ ์คํฌ๋ฆฐ์ท / GIF / Link
์์์ผ๋ก ์ฒจ๋ถํ๊ฒ ์ต๋๋ค.
2025-01-15.6.17.32.1.mov