Tailwind4 SearchBar 검색기능 만들기 📁 SearchBar 미리보기 SearchBar 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 Search bar 만들기 사용할때 실행할 백엔드 API prop으로 받아옴 search 버튼을 누르면 search 상태값 업데이트 . 전역적으로 관리 업데이트된 search 데이터를 가지고 prop으로 받은 API 실행 백엔드 search value값 param으로 받아서 데이터를 찾을때 search value값이 포함된 데이터만 가져오도록 설정 실제 구현한 코드 각 페이지에서 트윗 데이터를 가져오는 API가 다르기때문에 데이터를 가져오는 함수를 넘겨받아서 사용했다. 그리고 searchBar 디자인은 간단하게 tailwind에서 지원해주는 searchBar를 가져와 수정해서 사용했다. const.. 2024. 1. 23. 트위터 팔로우 기능 구현하기(React, CSS hover기능) 구현한 기능 following 클릭하면 follow 로 바꾸기 팔로우중일 경우, 버튼 위에 마우스를 올렸을때 다른 css주기 구현 과정 데이터베이스에 follow 테이블 생성 & user table과 관계 형성 follow 데이터를 저장하는 saveFollow API 코드 생성 데이터를 가져오는 getTweets파일 수정 ⇒ explore페이지의 people데이터를 가져올때, 데이터 중에서 현재 로그인한 currentUser가 팔로우한 유저의 데이터가 있으면 is_follow값을 true값으로 반환(기본값은 false) 팔로우 버튼 css 수정 백엔드 saveFollow 코드 현재 로그인한 사용자의 이메일 아이디를 통해 유저 id를 찾고 팔로우할 유저와 현재 로그인 유저 데이터를 follow model에.. 2024. 1. 22. tailwind css 컴포넌트 크기 조정하기, 자동 줄바꿈 ✅ 적용 목적 grid-cols-4 속성으로 인해 컴포넌트가 고정되어 있었고 이로 인해 사용자 입장에서 보기 불편할 것 같다는 피드백을 받았다. css가 grid-cols-4로 고정되어있어서 브라우저 크기를 줄이면 컴포넌트가 계속 작아졌다. 이러한 점을 개선하기 위해 브라우저가 줄어들면 한 줄에 하나의 컴포넌트만 위치하게 만들고 자동줄바꿈 속성을 넣기로 계획했다. ✅ 적용 방법 grid grid-cols-1 md:grid-cols-4 md 사이즈 까지는 한 줄에 4개씩 배치하고 md 사이즈보다 작아지면 한 줄에 하나씩 배치하는 css 속성을 적용했다. 그리고 각 게시물 개별 단위로는 max-w-2xl 속성을 주어서 게시물의 최대 너비를 제한하였다. ✅ 코드 {dataList.map((data: any) .. 2023. 7. 25. Tailwind CSS container 적용하기 ✅ 적용 목적 container를 사용하면 컨텐츠의 최대 너비를 제한할 수 있다. 즉 사용자가 사용하는 모니터의 크기와 상관없이 컨텐츠의 최대 너비가 제한되어 있어 예쁜 크기를 유지할 수 있으므로 사용하기로 했다. ✅ Container란? tailwind 공식 홈페이지에는 다음과 같이 container의 사용법을 나타내고 있다. Using the container The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying.. 2023. 7. 25. 이전 1 다음
