wa_ter_ve

메인페이지에서 만들어 놓은 사이드바 UI를 가져와 사용하려고 했으나, 사이드바의 ✈️(mainModal),❤️(bookmarkModal) 버튼을 누르면 메인페이지의 지도 기반으로 모달이 작동되어야 함.따라서 기존대로 페이지 이동없이 사이드바 기능을 적용하면 문제가 생김.또한, 사이드바 코드가 다른 페이지에서도 쓰이려면, toggleMainModal, toggleBookmarkModal 사용 불가능 👉 버튼 누를 때 URL을 메인페이지로 이동시키면서, 쿼리나 경로를 통해 어떤 모달 열지 알려주는 방식으로 해결해보기 / → 메인페이지 기본/?modal=main → 메인페이지 + 장소 검색 모달 열기/?modal=bookmark → 메인페이지 + 찜 모달 열기/?modal=notification → 메인페이..

lucide-react icons 설치➡️ https://lucide.dev/$ npm install lucide-react jsx 파일에 import 해서 사용.import { '사용할 아이콘' } from "lucide-react"; 토글 1개 → 2개...const [isModalOpen, setIsModalOpen] = useState(false);... setIsModalOpen(false)} />⬇️⬇️⬇️...const [isMainModalOpen, setIsMainModalOpen] = useState(false);const [isBookmarkModalOpen, setIsBookmarkModalOpen] = useState(false);... setIsMainModalOpen(fal..

🚩 ‘활동 기록’ 글자 아래 점선과의 간격 늘리기→ mt 조절 해봤지만, 적용이 안 됨.지금은 border가 h2 자체에 있어서 글자와 선 사이에 여백이 안 생기게 되어 있음🚀 해결 방안pb(padding-bottom) 를 조절해 주면 됨! 🚩 프로필 부분이랑 활동기록 부분 사이에 여백을 조금 더 늘리기 ✅ 방법 1: pl-10 → 더 큰 값으로활동기록 부분쪽 여백을 늘리고 싶으면:↓pl-16 = 4rem = 64px(원래는 2.5rem = 40px이었음 ✅ 방법 2: 프로필 섹션에 오른쪽 마진 추가↓mr-6 = 1.5rem = 24pxleft-5와 함께 쓰면 더 자연스럽게 간격 조절 가능 max-w-screen-xl: 화면의 최대 너비 설정 (화면이 너무 좁아지면 main 콘텐츠가 더 이상 줄..

📌 카카오맵 API 불러오기리액트 카카오맵 패키지 설치$ npm install react-kakao-maps-sd public > index.html카카오 api 스크립트 추가 다운 받은 패키지 import 코드 추가jsx에서 사용법// MainMap.jsximport { Map, MapMarker } from "react-kakao-maps-sdk";// Mainpage.jsximport MainMap from "../components/MainMap";...... 🔐 YOUR_APP_KEY 부분 ← 카카오 개발자 콘솔에서 발급 받은 JavaScript 키로 변경https://developers.kakao.com/카카오 계정 로그인내 어플리케이션 추가 → 생성한 앱 상단에 앱 키 탭 클릭 → Jav..

📌Tailwind CSS 기본 문법 정리 기본 레이아웃 클래스flex : Flexbox 컨테이너화items-center : 세로축 중앙 정렬justify-center : 가로축 중앙 정렬min-h-screen : 높이를 화면 전체(100vh)로 설정w-full : 너비 100%max-w-md : 최대 너비 제한 (md = 28rem = 448px)mx-auto : 좌우 마진을 auto로 → 가운데 정렬할 때 자주 사용p-10 : padding 2.5rem (40px)🧱Margin (바깥 여백)m : 네 방향 모두 마진mt, mb, ml, mr : 위, 아래, 왼쪽, 오른쪽 마진mx : 좌우 마진my : 상하 마진mt-0margin-top: 0pxmt-2margin-top: 0.5rem (8px)mb-..

📌 리액트 바이트 프로젝트 생성$ npm create vite@latest capstonepj --template react→ react → javascipt 옵션 선택 🤔 css 선택 기준 기준 Tailwind CSS Styled Components 빠른 UI 구현✅ 매우 빠름❌ 클래스 관리 필요반응형 디자인✅ 간편 (sm, md, lg 등)❌ 미디어쿼리 직접 작성동적 스타일링❌ 클래스 조합이 필요✅ props로 쉽게 조절 가능스타일 재사용✅ 컴포넌트 조합으로 가능✅ styled-components 활용CSS 코드 관리❌ 클래스가 길어질 수 있음✅ JS 내에서 깔끔하게 관리✔️ 빠르고 간편한 UI 개발을 위해 Tailwind CSS를 사용하다가,필요한 디자인이 요구되면 Styled Compo..