원신 성향표3 [원신 X친소표 사이트 제작기] 5. 다중 체크 리스트픽 만들기 #React 다중 Check List 메뉴미리 체크리스트를 주고, 원하는 만큼 골라서 추가할 수 있는 리스트픽 컴포넌트가 필요합니다.트위터 활동은 동시에 다양하게 할 수 있기 때문에, 하나를 체크했다고 다른 체크가 풀리는 게 아니라, 다중으로 체크가 되어야 합니다. 지금부터 다중 체크리스트 컴포넌트를 제작하겠습니다. CheckList 컴포넌트 setXType(e)} />CheckList 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. CheckList 소스코드import { FormTextContainer, FormText, ChecklistText } from "@/styles/Texts";import { CheckboxInput, CheckboxLabel.. 2024. 12. 9. [원신 X친소표 사이트 제작기] 4. Dropdown 리스트픽 만들기 #React Dropdown 메뉴성별과 연령대 정보, 원신 서버 정보를 입력할 때,사전에 지정된 목록을 사용자가 쉽게 선택할 수 있도록 만들려고 합니다. 이때 유용한 디자인이 '드롭다운 메뉴'입니다.성별의 경우 '남자, 여자, 비공개'를 미리 개발자가 지정한 다음 드롭다운 메뉴로 제공하면, 사용자는 쉽게 목록에서 자신에게 해당되는 걸 선택하면 끝입니다. OneLineDropdown 컴포넌트 setGender(e.target.value)} /> setAge(e.target.value)} />OneLineDropdown 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. OneLineDropdown 소스코드import .. 2024. 12. 4. [원신 X친소표 사이트 제작기] 3. 한 줄/여러 줄 TextInput 만들기 #React 한 줄 TextInput 컴포넌트 만들기X의 닉네임과 ID, 원신의 최애캐와 UID 정보를 받기 위해 입력창이 필요합니다.여러 줄일 필요는 없고, 딱 한 줄의 TextInput 컴포넌트를 만들어보겠습니다. OneLineTextInput 컴포넌트// src/app/pages.js setNick(e.target.value)} /> setXId(e.target.value)} />OneLineTextInput 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. OneLineTextInput 소스코드import { TextInput } from "@/styles/Inputs";import { FormText, FormTex.. 2024. 11. 30. 이전 1 다음
