From 1b0f2744db40a8f5013a22cd9ca55d32bc87ff5f Mon Sep 17 00:00:00 2001 From: b1nnnnid Date: Tue, 27 Aug 2024 22:33:21 +0900 Subject: [PATCH 1/4] create post --- css/css.css | 2 + css/media.css | 39 +++++++ css/style.css | 281 ++++++++++++++++++++++++++++++++++++++++++++++++++ edit.html | 46 +++++++++ list.html | 75 ++++++++++++++ script.js | 79 ++++++++++++++ view.html | 57 ++++++++++ write.html | 46 +++++++++ 8 files changed, 625 insertions(+) create mode 100644 css/css.css create mode 100644 css/media.css create mode 100644 css/style.css create mode 100644 edit.html create mode 100644 list.html create mode 100644 script.js create mode 100644 view.html create mode 100644 write.html diff --git a/css/css.css b/css/css.css new file mode 100644 index 0000000..47c4c7b --- /dev/null +++ b/css/css.css @@ -0,0 +1,2 @@ +@import url(style.css ); +@import url(media.css ); diff --git a/css/media.css b/css/media.css new file mode 100644 index 0000000..d2e93e3 --- /dev/null +++ b/css/media.css @@ -0,0 +1,39 @@ +@media (max-width: 1000px){ + .board_wrap{ + width: 100%; + min-width: 320px; + padding: 0 30px; + box-sizing: border-box; + } + + .board_list .num, + .board_list .writer, + .board_list .count{ + display: none; + } + .board_list .date{ + width: 40%; + } + + .board_list .title{ + text-indent: 10px; + } + + .board_list .top .title{ + text-indent: 0; + } + + .board_page a{ + width: 26px; + height: 26px; + } + + .board_page a.bt{ + padding-top: 7px; + } + + .board_page a.num{ + padding-top: 6px; + } + +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..24e43d3 --- /dev/null +++ b/css/style.css @@ -0,0 +1,281 @@ + *{ + margin:0; + padding:0; + } + + html{ + font-size: 10px; + } + + ul,li{ + list-style: none; + } + + a{ + text-decoration: none; + color: inherit; + } + + .board_wrap{ + width: 1000px; + margin: 100px auto; + } + + .board_title{ + margin-bottom: 30px; + } + + .board_title strong{ + font-size: 3rem; + } + + .board_title p{ + margin-top: 5px; + font-size: 1.4rem; + } + + .bt_wrap{ + margin-top: 30px; + font-size:0; + text-align: center; + } + + .bt_wrap a{ + display: inline-block; + min-width: 80px; + margin-left: 10px; + padding: 10px; + border: 1px solid #000; + border-radius: 2px; + font-size: 1.4rem; + } + + .bt_wrap a:first-child{ + margin-left: 0; + } + + .bt_wrap a.on{ + background: #000; + color: #fff; + } + + .board_list{ + width: 100%; + border-top: 2px solid #000; + } + + .board_list > div{ + border-bottom: 1px solid #ddd; + font-size: 0; + } + + .board_list > div.top{ + border-color: 1px solid #999; + } + + .board_list > div:last-child{ + border-bottom: 1px solid #000; + } + + .board_list > div > div{ + display: inline-block; + padding: 15px 0; + text-align: center; + font-size: 1.4rem; + } + + .board_list > div.top >div{ + font-weight: 600; + } + + .board_list .num{ + width: 10%; + } + + .board_list .title{ + width: 60%; + text-align: left; + } + + .board_list .top .title{ + text-align: center; + } + + .board_list .writer{ + width: 10%; + } + + .board_list .date{ + width: 10%; + } + + .board_list .count{ + width: 10%; + } + + .board_page{ + margin-top: 30px; + text-align: center; + font-size: 0; + } + + .board_page a{ + display: inline-block; + width: 32px; + height: 32px; + box-sizing: border-box; + border: 1px solid #ddd; + border-left: 0; + vertical-align: middle; + line-height: 100%; + } + + .board_page a.bt{ + padding-top: 9px; + font-size: 1.2rem; + letter-spacing: -1px; + } + + .board_page a.num{ + padding-top: 8px; + font-size: 1.4rem; + } + + .board_page a.num.on{ + border-color: #000; + background: #000; + color: #fff; + } + + .board_page a:first-child{ + border-left: 1px solid #ddd; + } + + .board_view{ + width: 100%; + border-top: 2px solid #000; + } + + .board_view .title{ + padding: 20px 15px; + border-bottom: 1px solid #ddd; + font-size: 2rem; + } + + .board_view .info{ + padding: 15px; + border-bottom: 1px solid #999; + font-size: 0; + } + + .board_view .info dl{ + position: relative; + display: inline-block; + padding: 0 20px; + } + + .board_view .info dl:first-child{ + padding-left: 0; + } + +.board_view .info dl::before{ + content: ""; + position: absolute; + top: 1; + left: 0; + display: block; + width: 1px; + height: 13px; + background: #ddd; +} + +.board_view .info dl:first-child::before{ + display: none; +} + + .board_view .info dl dt, + .board_view .info dl dd{ + display: inline-block; + font-size: 1.4rem; + } + + .board_view .info dl dd{ + margin-left: 10px; + color: #777; + } + + .board_view .cont{ + padding: 15px; + border-bottom: 1px solid #000; + line-height: 160%; + font-size: 1.4rem; + } + + .board_write{ + border-top: 2px solid #000; + } + + .board_write .title, + .board_write .info{ + padding: 15px; + } + + .board_write .info{ + border-top: 1px dashed #ddd; + border-bottom: 1px solid #000; + font-size: 0; + } + +.board_write .title dl{ + font-size: 0; +} + + .board_write .info dl{ + display: inline-block; + width: 50%; + vertical-align: middle; + } + +.board_write .title dt, +.board_write .title dd, +.board_write .info dt, +.board_write .info dd{ + display: inline-block; + vertical-align: middle; + font-size: 1.4rem; +} + +.board_write .title dt, +.board_write .info dt{ + width: 100px; +} + +.board_write .title dd{ + width: calc(100%-100px); +} + +.board_write .title input[type="text"], +.board_write .info input[type="text"], +.board_write .info input[type="password"]{ + padding: 10px; + box-sizing: border-box; +} + + +.board_write .title input[type="text"]{ + width: 80%; +} + + .board_write .cont{ + border-bottom: 1px solid #000; + } + + .board_write .cont textarea{ + display: block; + width: 100%; + height: 300px; + padding: 15px; + box-sizing: border-box; + border: 0; + resize: vertical; + } \ No newline at end of file diff --git a/edit.html b/edit.html new file mode 100644 index 0000000..a365cdb --- /dev/null +++ b/edit.html @@ -0,0 +1,46 @@ + + + + + + 게시글 수정 + + + +
+
+ 게시글 수정 +

게시글을 수정하세요.

+
+
+
+
+
+
+
제목
+
+
+
+
+
작성자
+
+
+
+
비밀번호
+
+
+
+
+ +
+
+
+ + 취소 +
+ +
+
+ + + diff --git a/list.html b/list.html new file mode 100644 index 0000000..108b950 --- /dev/null +++ b/list.html @@ -0,0 +1,75 @@ + + + + + + 게시글 + + + +
+
+ 게시글 +

게시글 목록을 확인할 수 있습니다.

+
+
+
+
+
번호
+
제목
+
글쓴이
+
작성일
+
조회
+
+
+
5
+
글 제목이 들어갑니다.
+
유수빈
+
2033.8.21
+
39
+
+
+
4
+
글 제목이 들어갑니다.
+
유수빈
+
2033.8.21
+
39
+
+
3
+
글 제목이 들어갑니다.
+
유수빈
+
2033.8.21
+
39
+
+
2
+
글 제목이 들어갑니다.
+
유수빈
+
2033.8.21
+
39
+
+
1
+
글 제목이 들어갑니다.
+
유수빈
+
2033.8.21
+
39
+
+
+
+ << + + 1 + 2 + 3 + 4 + 5 + + >> +
+
+ 등록 + +
+
+
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..030a7f1 --- /dev/null +++ b/script.js @@ -0,0 +1,79 @@ +document.addEventListener("DOMContentLoaded", function() { + const postForm = document.getElementById('postForm'); + + if (postForm) { + postForm.addEventListener('submit', function(event) { + event.preventDefault(); + + const title = document.getElementById('title').value; + const author = document.getElementById('author').value; + const password = document.getElementById('password').value; + const content = document.getElementById('content').value; + + if (!title || !author || !password || !content) { + alert("모든 필드를 입력하세요."); + return; + } + + const posts = JSON.parse(localStorage.getItem('posts')) || []; + const newPost = { + id: posts.length ? posts[posts.length - 1].id + 1 : 1, + title, + author, + password, + content, + date: new Date().toISOString().split('T')[0], + views: 0 + }; + + posts.push(newPost); + localStorage.setItem('posts', JSON.stringify(posts)); + alert("게시글이 등록되었습니다."); + window.location.href = 'list.html'; + }); + } +}); + + +document.addEventListener("DOMContentLoaded", function() { + const editForm = document.getElementById('editForm'); + const urlParams = new URLSearchParams(window.location.search); + const postId = parseInt(urlParams.get('id'), 10); + + if (editForm) { + const posts = JSON.parse(localStorage.getItem('posts')) || []; + const post = posts.find(p => p.id === postId); + + if (post) { + document.getElementById('title').value = post.title; + document.getElementById('author').value = post.author; + document.getElementById('password').value = post.password; + document.getElementById('content').value = post.content; + } + + editForm.addEventListener('submit', function(event) { + event.preventDefault(); + + const title = document.getElementById('title').value; + const author = document.getElementById('author').value; + const password = document.getElementById('password').value; + const content = document.getElementById('content').value; + + if (!title || !author || !password || !content) { + alert("모든 필드를 입력하세요."); + return; + } + + const index = posts.findIndex(p => p.id === postId); + if (index > -1) { + posts[index] = { ...posts[index], title, author, password, content }; + localStorage.setItem('posts', JSON.stringify(posts)); + alert("게시글이 수정되었습니다."); + window.location.href = 'list.html'; + } else { + alert("게시글을 찾을 수 없습니다."); + } + }); + } +}); + diff --git a/view.html b/view.html new file mode 100644 index 0000000..d2a619d --- /dev/null +++ b/view.html @@ -0,0 +1,57 @@ + + + + + + 게시글 + + + +
+
+ 게시글 +

게시글 목록을 확인할 수 있습니다.

+
+
+
+
+ 글의 제목이 들어갑니다. +
+
+
+
번호
+
1
+
+
+
작성자
+
유수빈
+
+
+
작성일
+
2033.8.21
+
+
+
조회
+
39
+
+
+
+ +
+
+ 글의 내용이 들어갑니다.
+ 글의 내용이 들어갑니다.
+ 글의 내용이 들어갑니다.
+ 글의 내용이 들어갑니다.
+ 글의 내용이 들어갑니다.
+ 글의 내용이 들어갑니다. +
+
+
+ 목록 + 수정 +
+
+
+ + \ No newline at end of file diff --git a/write.html b/write.html new file mode 100644 index 0000000..a1e7f68 --- /dev/null +++ b/write.html @@ -0,0 +1,46 @@ + + + + + + 게시글 작성 + + + +
+
+ 게시글 작성 +

게시글을 작성하세요.

+
+
+
+
+
+
+
제목
+
+
+
+
+
작성자
+
+
+
+
비밀번호
+
+
+
+
+ +
+
+
+ + 취소 +
+ +
+
+ + + From b1a64c18710e3680fa70445ba41e26cb945f3871 Mon Sep 17 00:00:00 2001 From: b1nnnnid Date: Wed, 28 Aug 2024 17:03:56 +0900 Subject: [PATCH 2/4] create post --- edit.html | 46 +++++++++++++++++-- list.html | 126 +++++++++++++++++++++++++++++++++-------------------- view.html | 85 ++++++++++++++++++++++++++---------- write.html | 3 +- 4 files changed, 186 insertions(+), 74 deletions(-) diff --git a/edit.html b/edit.html index a365cdb..a381a74 100644 --- a/edit.html +++ b/edit.html @@ -38,9 +38,47 @@ 취소
- -
+ + - - + + + + diff --git a/list.html b/list.html index 108b950..2685bb0 100644 --- a/list.html +++ b/list.html @@ -3,15 +3,26 @@ - 게시글 + 게시글 목록
- 게시글 -

게시글 목록을 확인할 수 있습니다.

+ 게시글 목록 +

게시글 목록을 확인할 수 있습니다.

+ + +
+ + + +
+
@@ -20,56 +31,77 @@
글쓴이
작성일
조회
+
-
-
5
-
글 제목이 들어갑니다.
-
유수빈
-
2033.8.21
-
39
-
-
-
4
-
글 제목이 들어갑니다.
-
유수빈
-
2033.8.21
-
39
-
-
3
-
글 제목이 들어갑니다.
-
유수빈
-
2033.8.21
-
39
-
-
2
-
글 제목이 들어갑니다.
-
유수빈
-
2033.8.21
-
39
-
-
1
-
글 제목이 들어갑니다.
-
유수빈
-
2033.8.21
-
39
+
+
-
- << - - 1 - 2 - 3 - 4 - 5 - - >> -
등록 -
+ + - \ No newline at end of file + diff --git a/view.html b/view.html index d2a619d..34c9264 100644 --- a/view.html +++ b/view.html @@ -9,49 +9,90 @@
- 게시글 -

게시글 목록을 확인할 수 있습니다.

+ 게시글 +

게시글의 내용을 확인할 수 있습니다.

-
- 글의 제목이 들어갑니다. -
+
글의 제목이 들어갑니다.
번호
-
1
+
1
작성자
-
유수빈
+
유수빈
작성일
-
2033.8.21
+
2033.8.21
조회
-
39
+
39
-
- -
-
- 글의 내용이 들어갑니다.
- 글의 내용이 들어갑니다.
- 글의 내용이 들어갑니다.
- 글의 내용이 들어갑니다.
- 글의 내용이 들어갑니다.
- 글의 내용이 들어갑니다. -
+
글의 내용이 들어갑니다.
목록 - 수정 + +
+ + - \ No newline at end of file + diff --git a/write.html b/write.html index a1e7f68..1b2ec3f 100644 --- a/write.html +++ b/write.html @@ -1,3 +1,4 @@ +write.html @@ -43,4 +44,4 @@
- + \ No newline at end of file From 44168ab03815ad85b97a6a96a61b34a15439c412 Mon Sep 17 00:00:00 2001 From: b1nnnnid Date: Fri, 30 Aug 2024 18:14:37 +0900 Subject: [PATCH 3/4] create post --- edit.html | 95 +++++++++++++++++++++++++++++------- list.html | 45 ++++++++++++++--- view.html | 140 ++++++++++++++++++++++++++++------------------------- write.html | 109 +++++++++++++++++++++++++++++++++++------ 4 files changed, 285 insertions(+), 104 deletions(-) diff --git a/edit.html b/edit.html index a381a74..8970b59 100644 --- a/edit.html +++ b/edit.html @@ -33,6 +33,31 @@
+
+
+
기록일자
+
+
+
+
장소
+
+
+
+
태그
+
+
+
+
이미지
+
+
+
+
공개 여부
+
+ + +
+
+
@@ -42,43 +67,79 @@
- - + \ No newline at end of file diff --git a/list.html b/list.html index 2685bb0..687dcfd 100644 --- a/list.html +++ b/list.html @@ -16,10 +16,17 @@
+ +
@@ -83,22 +90,44 @@ } }; - // 검색 기능 + // 검색 및 필터링 기능 document.getElementById('searchBtn').addEventListener('click', function() { const searchText = document.getElementById('searchInput').value.toLowerCase(); - const filteredPosts = posts.filter(post => post.title.toLowerCase().includes(searchText)); + const tagSearchText = document.getElementById('tagSearchInput').value.toLowerCase(); + const visibilityFilter = document.getElementById('visibilitySelect').value; + + let filteredPosts = posts; + + if (searchText) { + filteredPosts = filteredPosts.filter(post => post.title.toLowerCase().includes(searchText)); + } + + if (tagSearchText) { + filteredPosts = filteredPosts.filter(post => post.tags.some(tag => tag.toLowerCase().includes(tagSearchText))); + } + + if (visibilityFilter === 'public') { + filteredPosts = filteredPosts.filter(post => post.visibility === 'public'); + } else if (visibilityFilter === 'private') { + filteredPosts = filteredPosts.filter(post => post.visibility === 'private'); + } + renderPosts(filteredPosts); }); // 정렬 기능 document.getElementById('sortSelect').addEventListener('change', function() { const sortValue = this.value; - const sortedPosts = [...posts]; // 원본 배열을 수정하지 않도록 복사본 사용 - if (sortValue === "views") { - sortedPosts.sort((a, b) => b.views - a.views); - } else if (sortValue === "date") { + let sortedPosts = [...posts]; // 원본 배열을 수정하지 않도록 복사본 사용 + + if (sortValue === "likes") { + sortedPosts.sort((a, b) => b.likes - a.likes); + } else if (sortValue === "comments") { + sortedPosts.sort((a, b) => (b.comments || 0) - (a.comments || 0)); + } else if (sortValue === "latest") { sortedPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); } + renderPosts(sortedPosts); }); }); diff --git a/view.html b/view.html index 34c9264..a377e77 100644 --- a/view.html +++ b/view.html @@ -3,95 +3,105 @@ - 게시글 + 게시글 보기 +
- 게시글 -

게시글의 내용을 확인할 수 있습니다.

+ 게시글 보기
-
글의 제목이 들어갑니다.
-
-
-
번호
-
1
-
-
-
작성자
-
유수빈
-
-
-
작성일
-
2033.8.21
-
-
-
조회
-
39
-
+

+

작성자:

+

작성일:

+

기록일:

+

장소:

+

조회수:

+

공감:

+

태그:

+

공개 여부:

+
+ +
+ + + 목록
-
글의 내용이 들어갑니다.
-
-
- 목록 - -
diff --git a/write.html b/write.html index 1b2ec3f..08b0a52 100644 --- a/write.html +++ b/write.html @@ -1,47 +1,128 @@ -write.html - 게시글 작성 + 게시글 등록 +
- 게시글 작성 -

게시글을 작성하세요.

+ 게시글 등록 +

새 게시글을 등록하세요.

-
+
제목
-
+
작성자
-
+
비밀번호
-
+
- + +
+
+
+
기록일자
+
+
+
+
장소
+
+
+
+
태그
+
+
+
+
이미지
+
+
+
+
공개 여부
+
+ + +
+
취소
- -
+
+
- - - \ No newline at end of file +
+ + + From f08ee048525e6e04e9737ee32f1f2c46e97bf49d Mon Sep 17 00:00:00 2001 From: b1nnnnid Date: Sat, 31 Aug 2024 11:33:48 +0900 Subject: [PATCH 4/4] create post --- list.html | 115 ++++++++++++++++++++++++++++++++++++++---------------- view.html | 96 +++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 170 insertions(+), 41 deletions(-) diff --git a/list.html b/list.html index 687dcfd..483e34e 100644 --- a/list.html +++ b/list.html @@ -5,6 +5,34 @@ 게시글 목록 +
@@ -41,7 +69,7 @@
- +
@@ -51,18 +79,24 @@
diff --git a/view.html b/view.html index a377e77..e771a0b 100644 --- a/view.html +++ b/view.html @@ -15,6 +15,20 @@ font-size: 14px; font-weight: bold; } + .comments-section { + margin-top: 20px; + } + .comment { + border-top: 1px solid #ddd; + padding: 10px 0; + } + .comment-author { + font-weight: bold; + } + .comment-date { + font-size: 12px; + color: gray; + } @@ -31,6 +45,7 @@

장소:

조회수:

공감:

+

댓글 수: 0

태그:

공개 여부:

@@ -40,6 +55,17 @@

목록 + + +
+

댓글

+
+
+ + + +
+
@@ -49,8 +75,11 @@

const urlParams = new URLSearchParams(window.location.search); const postId = parseInt(urlParams.get('id'), 10); const posts = JSON.parse(localStorage.getItem('posts')) || []; + const comments = JSON.parse(localStorage.getItem('comments')) || []; const post = posts.find(post => post.id === postId); + const postComments = comments.filter(comment => comment.postId === postId); + // 게시글 정보 표시 if (post) { document.getElementById('postTitle').textContent = post.title; document.getElementById('postAuthor').textContent = post.author; @@ -60,9 +89,10 @@

document.getElementById('postContent').textContent = post.content; document.getElementById('postViews').textContent = post.views; document.getElementById('postLikes').textContent = post.likes; - - // 태그와 공개 여부 표시 - document.getElementById('postTags').textContent = post.tags.join(', '); + document.getElementById('postCommentsCount').textContent = postComments.length; + + // 태그를 # 형태로 표시 + document.getElementById('postTags').textContent = post.tags.map(tag => `#${tag}`).join(' '); document.getElementById('postVisibility').textContent = post.visibility === 'public' ? '공개' : '비공개'; if (post.image) { @@ -71,6 +101,14 @@

postImage.style.display = 'block'; } + // 조회수 증가 + post.views++; + localStorage.setItem('posts', JSON.stringify(posts)); + document.getElementById('postViews').textContent = post.views; + + renderComments(postComments); + + // 수정 버튼 이벤트 리스너 document.getElementById('editBtn').addEventListener('click', () => { const inputPassword = prompt('비밀번호를 입력하세요:'); if (inputPassword === post.password) { @@ -80,6 +118,7 @@

} }); + // 삭제 버튼 이벤트 리스너 document.getElementById('deleteBtn').addEventListener('click', () => { const inputPassword = prompt('비밀번호를 입력하세요:'); if (inputPassword === post.password) { @@ -94,14 +133,55 @@

alert('비밀번호가 일치하지 않습니다.'); } }); - - // 조회수 증가 - post.views++; - localStorage.setItem('posts', JSON.stringify(posts)); - document.getElementById('postViews').textContent = post.views; } else { alert('게시글을 찾을 수 없습니다.'); } + + // 댓글 렌더링 함수 + function renderComments(comments) { + const commentsList = document.getElementById('commentsList'); + commentsList.innerHTML = ""; + + if (comments.length === 0) { + commentsList.innerHTML = "

댓글이 없습니다.

"; + } else { + comments.forEach(comment => { + const commentDiv = document.createElement('div'); + commentDiv.className = "comment"; + commentDiv.innerHTML = ` +

${comment.author} ${comment.date}

+

${comment.content}

+ `; + commentsList.appendChild(commentDiv); + }); + } + + // 댓글 수 갱신 + document.getElementById('postCommentsCount').textContent = comments.length; + } + + // 댓글 작성 폼 제출 이벤트 + document.getElementById('commentForm').addEventListener('submit', (e) => { + e.preventDefault(); + + const commentAuthor = document.getElementById('commentAuthor').value; + const commentContent = document.getElementById('commentContent').value; + const newComment = { + id: comments.length ? comments[comments.length - 1].id + 1 : 1, + postId, + author: commentAuthor, + content: commentContent, + date: new Date().toLocaleString() + }; + + comments.push(newComment); + localStorage.setItem('comments', JSON.stringify(comments)); + renderComments(comments.filter(comment => comment.postId === postId)); + + // 댓글 입력 후 초기화 + document.getElementById('commentAuthor').value = ''; + document.getElementById('commentContent').value = ''; + }); });