-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Box Select 컴포넌트 #21
Conversation
<label | ||
className={`flex h-76 w-full items-start gap-8 rounded-lg ${selectStatus ? 'bg-var-gray-900 text-var-white' : 'bg-var-gray-50 text-var-black'} md:h-70 lg:h-70 px-8 py-[6px] transition-colors duration-200 ease-in-out md:px-16 md:py-12 lg:px-16 lg:py-12`} | ||
> | ||
<input | ||
id='checkbox' | ||
type='checkbox' | ||
className="h-24 w-24 appearance-none rounded-md bg-[url('/icons/checkbox-default.svg')] bg-center bg-no-repeat checked:bg-[url('/icons/checkbox-active.svg')] checked:bg-center checked:bg-no-repeat" | ||
onChange={handleCheckboxChange} | ||
/> | ||
<div className='flex flex-col'> | ||
<div className='text-[14px] font-bold md:text-[16px] lg:text-[16px]'> | ||
{title} | ||
</div> | ||
<div className='text-[12px] font-medium'>{subTitle}</div> | ||
</div> | ||
</label> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- label 를 상위 태그로 두면서 전체를 클릭하여도 input이 선택되도록 하였습니다.
- selectStatus에 따라 체크박스에 해당하는 이미지가 변하도록 하였습니다.
- transition을 넣으면서 부드러운 전환을 할 수 있게 했습니다.
src/app/page.tsx
Outdated
@@ -1,3 +1,5 @@ | |||
import BoxSelect from './components/BoxSelect/BoxSelect'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수정사항 함께 없애도록 하겠습니다. 🥲
} | ||
|
||
const BoxSelect = ({ title = '', subTitle = '' }: BoxSelectProps) => { | ||
const [selectStatus, setSelectStatus] = useState<boolean>(false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
나중에 부모 컴포넌트에서 set함수를 받아서 관리할 것 같아서 이 부분은 추후에 변경이 필요해보입니다.
🎸 기타
티켓 번호 착각해서 수정해서 다시 PR 올리겠습니다.