트친소6 [원신 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. [원신 X친소표 사이트 제작기] 2. 이미지를 불러오기/미리보기 구현 #React 프로필(바이오) 이미지 표시 기능어떤 SNS든지 각 계정마다 프사가 존재하고, X역시 마찬가지입니다.X친소표를 만든다면 프사(바이오)역시 꼭 들어가야 하기에, 이미지를 받아올 수 있는 기능이 필요합니다. Bio 컴포넌트// src/app/page.jsconst [bio, setBio] = useState(null);우선 Home 컴포넌트(Next.js app router 기준)에, 프사 이미지를 담을 bio state를 생성합니다.초기값은 null로 지정합니다. 그리고 Bio 이미지를 받아오고, 미리보기 이미지를 출력할 컴포넌트를 제작합니다.// src/components/Bio.jsimport { FormText } from "@/styles/Texts";import { useState, .. 2024. 11. 28. [원신 X친소표 사이트 제작기] 1. 제작한 이유와 반응 살펴보기 X(트위터)의 트친소/X친소 문화X가 SNS 중 음지 중의 음지로 불리긴 하지만, 그래도 덕질 친구를 사귀기에는 이만한 곳이 별로 없기도 합니다.인스타나 다른 SNS에 비해 익명성이 강해서, 더욱 덕질을 공유하기도 좋고, 자유로운 검색기능을 통해 팔로워도 모으기 쉬운 구조입니다. 이를 이용해서, X친소/트친소 문화가 있습니다.비슷한 장르를 덕질하는 친구들을 모으는 문화로, 미리 'X친소표/트친소표'에 자신의 덕질이나 트위터 성향을 작성한 후, 나랑 친구가 되고 싶은 사람은 이 표를 보고 다가오라는 문화입니다. 원신은 서브컬쳐계의 엄청난 강자인 만큼, X친소표의 종류도 많고, 이용하는 사람도 정말 많습니다. 하지만 이 표의 단점이 있습니다.1. '이미지 파일을 다운받아서 직접 수정해야 한다.'이미지 .. 2024. 11. 27. 원신 트친소 생성기 제작 및 이용방법 원신 트친소 (X친소) 표 자동제작기자동으로 위의 트친소표를 제작해주는 생성기 사이트를 제작했습니다.지금부터 사용법을 설명하겠습니다. 공식 사이트 링크링크 : https://genshin-twitchinso-autogen.vercel.app/ Next.js로 제작한 후, vercel로 호스팅을 했습니다.바이러스 없습니다. 사용법 - 정보 입력하기안내에 따라, 각종 정보들을 입력합니다.프로팔 사진과 최애캐 사진은 1:1 비율의 사진을 넣는 것을 권장드립니다. 배경 사진도 직접 넣을 수 있고, 트친소 표 안의 폰트 색상도 직접 지정할 수 있습니다.색상코드를 찾아서 입력하시거나, 색상 팔레트로 원하는 색을 찾을 수 있습니다. 사용법 - 이미지 다운로드 (아이폰 오류 해결법) 모든 설정이 완.. 2024. 10. 19. 이전 1 다음
