Open snkchan opened 2 months ago
의 경우 page -handle 부분에서 관리하면 구분 할수있지않나요 ?? 공용에서는 include로 index를 배열로 포함시키는 부분만있으면 page 부분에서 버튼을 선택할때 선택된부분을담을때 [index] 이렇게 하고 include로 뒷부분을 받을 것인지 아니면 [1]이엿다면. [3]으로 대채하면 되지않을까요?? duplicateCheck : 중복체크(구글검색ㅋㅋ)
const handleSelected = (idx: number) => {
if (duplicateCheck) {
setSelected((prev) =>
prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx]
);
} else {
setSelected([idx]);
}
};
글이 난잡할것같아서 코드로 2가지 상황 나눴습니다
어위와같이 하면 나눌필요는없어보입니다 사실 저렇게 나누는것이 공용 컴포넌트를 사용하는부분에 맞지않는다고 하면 저 handle부분을 따로 빼서 사용해도 될것같네요? 상태를 page에 주는방식을 생각하다보니
다중선택이 가능하도록 할지 말지를 외부에서 callback 으로 선택할 수 있도록 하면 되지 않을까요?
저는 다음처럼 사용할 수 있기를 기대합니다.!
// NTDateTime 사용부 (기대...)
import NTDateTime from "~~~~~~"
export default function SomePage(){
const [selectDateArr, setSelectedDateArr] = useState<string[]>([])
// 👇 다중 선택이 필요할 경우,
const onClickMultiDate = (item: string) => {
setSelectedDateArr( (prev)=>
if(prev.includes(item)){ // 👈 이미 선택된 요소라면 배열에서 삭제
const _prev = prev.filter((prevOne) => prevOne != item)
return _prev
}
const _prev = [...prev]. // 👈 여기서부턴, 배열에 추가
_prev.push(item)
return _prev
)
}
// 👇 다중 선택이 필요없을 경우,
const onClickDateOne = (item: string) => setSelectedDateArr([item])
return (
< NTDateTime
type="date" // chan 님 설계대로라면, "date", "time" 이렇게 받게 될 거 같은데 맞을까요??
selected={selectDateArr} // 선택된 요소를 표시하기 위해, 그 목록을 넘겨줘야 합니다.
// callback={onClickMultiDate} // 선택한 여러 요소를 관리할 경우, `onClickMultiDate` 를 넘깁니다.
// callback={onClickDateOne} // 선택된 하나의 요소만 관리할 경우, `onClickDateOne` 를 넘깁니다.
/>
)
}
컴포넌트 내부에서는 너무 복잡하게 고민하지 않고, 애매한 부분은 외부로 떠넘기는 게 어떨까요? 😁 복잡한 구현을 포함할 수록, 공용컴포넌트로써 일반성을 잃게 되니까요..
내부에서 관리하는 상태(useState) 도 없애는 게, 더 일반화 시키는 방법일 것 같습니다.
컴포넌트 이름을 바꾸면, 더 범용성 있게 사용할 수 있을 거 같아요. 기존에서 시간, 날짜를 전부 커버하도록 설계를 확장했다면, 조금 더 나가보면 어떨까요?
어떤 string 배열에도 대응할 수 있도록 한다면, 시간과 날짜 선택 뿐 아니라 더 다양한 용도로 재사용할 수 있을 것 같습니다. 컴포넌트 명을 수정하고, 외부에서 string 배열을 props 로 받도록 하면 가능할 것 같습니다. 🫠
찾아보니까, button-group 이라는 ui 와 비슷한 것 같아요.
문제점
<NTDate> ``<NTTime>
이렇게 만들라고 figma에 명시되어있습니다.<NTDateTime>
컴포넌트로 한번에 만들어도되지 않을까? 라는생각에 컴포넌트를 만들었는데요 문제점이있습니다.Problem 1
Date는 중복허용되도록 클릭할 수 있고, Time은 중복허용이안됩니다.
Problem 2
import { useState } from "react"
import { cn } from "@/config/tailwind"
type NTDateTimePT = { children: string }
export default function NTDateTime({ children }: NTDateTimePT) { const [isClicked, setIsClicked] = useState(false) return ( <button onClick={() => setIsClicked((prev) => !prev)} className={cn( "flex h-fit w-fit cursor-pointer items-center justify-center rounded-[8px] px-[14px] py-[10px]", isClicked ? "bg-PB90 text-White" : "bg-Gray10 text-Gray40", )}
다음과 같은방식으로 컴포넌트를 관리하는것은 어떨까 생각하는데 의견좀 남겨주세요ㅜㅜ 혼자정하기가 애매하네요