search

mobi-projects / nail-case-client

https://nail-case-client.vercel.app
Other
0 stars 0 forks source link

NTDateTime 의견좀 부탁드립니다. #28

Open snkchan opened 2 months ago

snkchan commented 2 months ago

image

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", )}

{children} ) }

### 다음과 같이 하나의 NTDateTime컴포넌트를 만들었는데 이렇게 관리하는 방식은 어떨까요?
```ts
common > nt-date-time > ----------
                                               |______  NTDateTIme
                                               |______ NTDate  // 배열로 정보를 받아서 NTDateTIme을 map을돌려서 보여준다
                                               |______ NTTIme // 배열로 정보를 받아서 NTDateTIme을 map을돌려서 보여준다

다음과 같은방식으로 컴포넌트를 관리하는것은 어떨까 생각하는데 의견좀 남겨주세요ㅜㅜ 혼자정하기가 애매하네요

keeprok commented 2 months ago

problem 1 .

의 경우 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가지 상황 나눴습니다

TransparentDeveloper commented 2 months ago

다중선택이 가능하도록 할지 말지를 외부에서 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 와 비슷한 것 같아요.

button-group