-
- {isClickEdit ? (
-
-
-
-
- {year}.{month}.{day}
-
-
-
-
-
-
+
+
+ {isEdit ? (
+
setContent(e.target.value)}
+ />
) : (
-
-
-
{comment.content}
-
- {year}.{month}.{day}
-
-
-
-
-
-
-
+
{comment.content}
)}
+
+ {year}.{month}.{day}
+
-
// 1
- //
- //
- //
{comment.content}
- //
- // {year}.{month}.{day}
- //
- //
- //
- //
- //
- //
- // )};
+ {user?.data.id === comment.author.id ? (
+
+ {isEdit ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+ ) : null}
+
);
};
-
export default CommentElement;
diff --git a/src/components/Comments/index.jsx b/src/components/Comments/index.jsx
index aca7515..68cc298 100644
--- a/src/components/Comments/index.jsx
+++ b/src/components/Comments/index.jsx
@@ -2,108 +2,98 @@ import { createElement, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import comment from "../../data/comment";
import CommentElement from "./CommentElement";
+import { getComments } from "../../apis/api";
+import { createComment } from "../../apis/api";
-const Comment = ({ commentt }) => {
- // TODO 1: 가짜 comments 불러와서 관리해야겟즤
- const { postId } = useParams();
-
- const [comments, setComments] = useState();
+const Comment = ({ postId }) => {
+ // TODO 1: 가짜 comments 불러와서 관리해야겟즤
+ // const { postId } = useParams();
+ const [commentList, setCommentList] = useState([]); // 처음에는 빈 리스트로 설정
+ const [newContent, setNewContent] = useState("");
+
+ //추가
useEffect(() => {
- const comments = comment.filter((comment)=> comment.post == postId);
- setComments(comments);
- }, [postId]);
+ const getCommentsAPI = async () => {
+ const comments = await getComments(postId);
+ setCommentList(comments);
+ };
+ getCommentsAPI();
+ }, [postId]);
+;
- // TODO 2: comment추가하는 input 관리해줘야겟지
- const [isSubmitted, setIsSubmitted] = useState(false);
- const [commentInputValue, setCommentInputValue] = useState("");
-
- useEffect(() =>{
- const commentInputValue = formData.content;
- setCommentInputValue(commentInputValue);
- // commentelement로 만들어줘야겠지? -> 이게 아닌가벼?
- // 그럼 이걸 그냥 밑에 올리는. 그런...
- },[commentInputValue]);
+ // TODO 2: comment추가하는 input 관리해줘야겟지
+ const [isSubmitted, setIsSubmitted] = useState(false);
+ const [commentInputValue, setCommentInputValue] = useState("");
+
+ useEffect(() => {
+ const commentInputValue = formData.content;
+ setCommentInputValue(commentInputValue);
+ }, [commentInputValue]);
- // TODO 3: comment Form 제출됐을때 실행되는 함수 만들어줘
+ // TODO 3: comment Form 제출됐을때 실행되는 함수 만들어줘
- const time = new Date();
- const [created_at, setCreated_at] = useState(time.toJSON());
- // ✅ submit 될 때의 시간을 넣고 싶은데 어떻게 하지??!?
+ const time = new Date();
+ const [created_at, setCreated_at] = useState(time.toJSON());
- const [formData, setFormData] = useState({
- id: comment.length + 1, // 이건 data/comment에 접근을 못해서 제대로 된 index가 나올 수 없을 듯...
- content: "",
- created_at: created_at,
- post: postId, // 사실 여기에는 postId가 들어가는 명세로 되어있어요
- author: {id: 2, username: "user2"}
- });
+ const [formData, setFormData] = useState({
+ id: comment.length + 1, // 이건 data/comment에 접근을 못해서 제대로 된 index가 나올 수 없을 듯...
+ content: "",
+ created_at: created_at,
+ post: postId, // 사실 여기에는 postId가 들어가는 명세로 되어있어요
+ author: { id: 2, username: "user2" },
+ });
- const handleFormData = (e) => {
+ const handleFormData = (e) => {
const { id, value } = e.target;
setFormData({ ...formData, [id]: value });
- console.log(formData);
+ console.log(formData);
};
- const handleCommentSubmit = (e) => {
- e.preventDefault();
- comments.push(formData);
- console.log(formData.content);
- setFormData((nowFormData) => ({
- ...nowFormData,
- content: ""
- }))
- // console.log("input", commentInputValue);
- console.log(comments);
- // alert(`"${formData.content}" 댓글이 작성 완료되었습니다잉`);
- // comments.push(formData);
+ const handleCommentSubmit = (e) => {
+ e.preventDefault();
+ createComment({ post: postId, content: newContent });
+ setNewContent("");
};
-// TODO 4: commet Delete 하는 함수 만들어죠
- const deleteComment = (comment) => {
- console.log(comment.content);
- const deletedComments = comments.filter((c) => c.content !== comment.content)
- setComments(deletedComments);
- console.log(deletedComments);
- };
+ // TODO 4: commet Delete 하는 함수 만들어죠
+ // const handleCommentDelete = () => {
+ // // deleteComment(comment.id);
+ // console.log("delete");
+ // };
- const editComment = (comment) => {
- // console.log("comment:", comment);
- // console.log("comment.id:", comment.id);
- // console.log("감히 제가.. comments에 접근해봅니다", comments[comment.id-1]);
- console.log(comment.value);
- const editedComment = comments[comment.id-1].content = comment.value;
- // console.log(editedComment);
- };
-
- return (
-
+ return (
+
Comments
- {/* // commentElement */}
- {/* //
가 comment마다 반복시켜야즤 */}
-
- {comments && comments.map((comment)=> (
-
- ))}
-
-
- );
+
+
+ );
};
-export default Comment;
\ No newline at end of file
+export default Comment;
diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
index 9743d2c..a6b485d 100644
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@@ -181,6 +181,7 @@ export const PostForm = ({ onSubmit, tags, formData, setFormData }) => {
tags: formData.tags.filter((t) => t !== tag),
});
};
+
return (
);
};
diff --git a/src/components/Posts/index.jsx b/src/components/Posts/index.jsx
index f8449b6..a0fccfa 100644
--- a/src/components/Posts/index.jsx
+++ b/src/components/Posts/index.jsx
@@ -1,9 +1,11 @@
import { Link } from "react-router-dom";
+import { likePost } from "../../apis/api";
export const SmallPost = ({ post }) => {
const onClickLike = () => {
console.log("나도 좋아!");
// add api call for liking post here
+ likePost(post.id);
};
return (
@@ -32,13 +34,14 @@ export const SmallPost = ({ post }) => {
export const BigPost = ({ post }) => {
const onClickLike = () => {
console.log("나도 좋아!");
+ likePost(post.id);
// add api call for liking post here
};
return (
-
{post.title}
+
{post.title}
{post.author.username}
{post.content}
@@ -55,4 +58,4 @@ export const BigPost = ({ post }) => {
);
-};
\ No newline at end of file
+};
diff --git a/src/index.css b/src/index.css
index 5b2de4d..bffa0ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,6 +25,14 @@
@apply border-2 border-white w-full px-6 py-3 rounded-2xl text-white bg-transparent placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent;
}
+.infoinput {
+ @apply w-4/5 px-6 py-3 bg-transparent focus:outline-none;
+}
+
+.infobutton {
+ @apply border-none p-2 border-r-4 font-semibold rounded-xl h-10 bg-[#FAC454] hover:bg-orange-400 hover:text-gray-900 text-gray-100;
+ /* transition duration-150 ease-out hover:ease-in */
+}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
diff --git a/src/routes/HomePage.jsx b/src/routes/HomePage.jsx
index aa78d04..0896e1c 100644
--- a/src/routes/HomePage.jsx
+++ b/src/routes/HomePage.jsx
@@ -2,12 +2,34 @@ import { useEffect, useState } from "react";
import { SmallPost } from "../components/Posts";
import posts from "../data/posts";
import { Link } from "react-router-dom";
+import { getPosts, getUser } from "../apis/api";
+import { getTags } from "../apis/api";
+import { getCookie } from "../utils/cookie";
const HomePage = () => {
const [tags, setTags] = useState([]);
const [searchTags, setSearchTags] = useState([]);
const [searchValue, setSearchValue] = useState("");
- const [postList, setPostList] = useState(posts);
+ const [postList, setPostList] = useState([]);
+
+ useEffect(() => {
+ const getPostsAPI = async () => {
+ const posts = await getPosts();
+ setPostList(posts);
+ };
+ getPostsAPI();
+
+ const getTagsAPI = async () => {
+ const tags = await getTags();
+ const tagContents = tags.map((tag) => {
+ return tag.content;
+ });
+ setTags(tagContents);
+ setSearchTags(tagContents);
+ };
+ getTagsAPI();
+ }, []);
+
useEffect(() => {
const tagList = posts.reduce((acc, post) => {
@@ -27,25 +49,13 @@ const HomePage = () => {
};
const handleTagFilter = (e) => {
- const tagText = e.target.innerText;
- console.log(tagText);
- const filteredTagText = tagText.replace("#", "");
- console.log(filteredTagText);
- setSearchValue(filteredTagText);
-
- if (filteredTagText === searchValue) {
- console.log("다시");
+ const { innerText } = e.target;
+ if (searchValue === innerText.substring(1)) {
setSearchValue("");
- setPostList(posts);
- return;
+ } else {
+ const activeTag = innerText.substring(1);
+ setSearchValue(activeTag);
}
-
- console.log("postList", postList);
- console.log("posts", posts);
- const filteredPosts = posts.filter((post) =>
- post.tags.some((tag) => tag.content === filteredTagText)
- );
- setPostList(filteredPosts);
};
return (
@@ -76,15 +86,23 @@ const HomePage = () => {
- {postList.map((post) => (
-
- ))}
-
-
-
- Post
-
+ {postList
+ .filter((post) =>
+ searchValue
+ ? post.tags.find((tag) => tag.content === searchValue)
+ : post
+ )
+ .map((post) => (
+
+ ))}
+ {getCookie("access_token") ? (
+
+
+ Post
+
+
+ ) : null}