Project/Exhibitscape (7) 썸네일형 리스트형 [Exhibitscape] 글쓰기 페이지 구현 (2) - 이미지 첨부 1. 기본 게시판 내용 입력 (글제목,글내용,카테고리)2. 카카오 Map API를 이용한 지도 구현3. 이미지 첨부하기 기능 ( +이미지 미리보기 ) function readURL(input){ if(input.files && input.files[0]){ var reader = new FileReader(); reader.onload= function(e){ document.getElementById('preview').src=e.target.result; }; reader.readAsDataURL(input.files[0]); }else{ document.getElementById('preview').src=""; }} 사실 서비스에 있어야 할 것 같지만...@Value.. [Exhibitscape] 글쓰기 페이지 구현 (1) - 지도 API 활용 1. 기본 게시판 내용 입력 (글제목,글내용,카테고리)2. 카카오 Map API를 이용한 지도 구현3. 이미지 첨부하기 기능 ( +이미지 미리보기 ) 지도 API는 카카오에서 아주 친절하게 잘 설명을 해주고 있다.!다만 내가 더 추가 하고 싶었던 부분 아래 이미지와 같이 키워드 검색후 태그까지 거는 것!그리고 태그를 건 위치(위도,경도)와 이름명을 같이 DB로 넘겨주어야 했다. // 마커를 생성하고 지도 위에 마커를 표시하는 함수function addMarker(position, idx, title, place) { var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마.. [Exhibitscape] 상세 페이지 구현 - 댓글 기능 / 카카오맵 API 1. 게시글 기본 정보 불러오기 (글제목, 이미지, 글 내용) 2. 좋아요 동적 화면 구현 (리스트에서 구현한 것과 거의 흡사) 3. 지도 Map 불러오기 ( 위도, 경도, 장소명 DB에서 불러오기)> 카카오맵에서 제공하는 API 활용//지도 생성하기 // 현재 페이지의 comId 값 가져오기 var mapElement = document.getElementById('map'); var comId = mapElement.getAttribute('data-com-id'); // 서버로부터 데이터 가져오기 fetch('/exhibitscape/map-data?comId=' + comId) .then(response => response.json()) .then.. [Exhibitscape] 리스트 페이지 구현 (3) -좋아요 목표 :동적방식으로 사용자가 비어 있는 하트를 클릭했을 경우,새로고침 없이 빨간 하트로 바뀌면서 카운트가 올라갈 수 있도록 구현 1. 로그인 사용자와 비로그인 사용자 구분하여 목록 좋아요 상태 구분> 비로그인 사용자는 무조건 emptyheart.png 보여줌 로그인 사용자 같은 경우에는 comLike에서 check값을 확인하여 일치할 경우 redheart.png 반환 //좋아요function toggleLike(comId) {$.ajax({ url: '/exhibitscape/community/' + comId + '/like', type: 'POST', success: function(response) { // 좋아요 상태 업데이트 .. [Exhibitscape] 리스트 페이지 구현 (2) -카테고리 전체 전시 소식 전시장 주변 정보 전시 질문 기타//카테고리 버튼 클릭 이벤트 핸들러function filterByCategory(button) { var category = $(button).data('category'); // 현재 URL 가져오기 var currentUrl = new URL(window.location.toString()); // 새로운 URLSearchParams 객체 생성 //currentUrl.search -> ?category=전시 소식 var searchParams = new URLSearchParams(currentUrl.search); // category 파라미터 수정 if (category === '전체') { searchPa.. [Exhibitscape] 리스트 페이지 구현 (1) - 비로그인시 alert창 1. 카테고리 기능 구현2. 게시글 정보 (카테고리, 제목, 글내용) - 글내용과 같은 경우에는 일정이상 길이가 넘을 경우 · · · 으로 나오게 처리 3. 글 작성자 아이디 / 글 작성 날짜 / 댓글 수 / 좋아요 개수와 좋아요 기능 구현4. 글쓰기 페이지 이동 하이퍼링크 로그인 하지 않았을 때, 좋아요와 글쓰기 버튼을 눌렀을 경우 다음과 같은 창이 뜨도록 구현 이와 같이 로그인 정보가 없을 경우 showLoginAlert();로 이동하게끔 설정function showLoginAlert() { var result = confirm("로그인 하셔야 이용할 수 있습니다. 로그인 페이지로 이동하시겠습니까?"); if (result) { window.location.hr.. [Exhibitscape] ERD 작성하기 이번 Exhibitscape에서 맡은 부분은 Community 게시판이다.타겟 기능으로는 "기본 게시판 CRUD,댓글,좋아요,카테고리,맵 API 활용,이미지 첨부기능"으로 잡았다 따라서 테이블은 크게 기본 게시판, 댓글, 좋아요로 기능을 나누어서 테이블을 작성했다. 기본적으로 PK로 커뮤니티 게시글 ID인comId를 잡고memberId를 외래키로 잡아서 member테이블과 조인하였다.나머지는 기본적인 게시글에 필요한 컬럼들. ----밑은 내가 구현하고 싶었던 기능 관련 컬럼들이다---이미지에 필요한 컬럼comImgSname(이미지명 랜덤으로 변환 후 저장명), comImgPath(이미지 저장 경로명)각 게시글이 가지는 좋아요 관련 컬럼liked(각 리스트에서 사용자가 하트 눌렀을 시에 ui로 반응줄 수 .. 이전 1 다음
