Merge pull request #61 from team-pofo/feature/#55/projectLike

Feature/#55/project like

src/components/Navigation/Navigation.tsx

@@ -50,6 +50,7 @@ const Navigation: React.FC = () => {
         const refreshResponse = await reIssue();
         console.log(refreshResponse);
         const newAccessToken = refreshResponse.data.accessToken;
+        console.log(newAccessToken);
 
         if (newAccessToken) {
           setAccessToken(newAccessToken);

src/components/Project/Project.tsx

@@ -10,6 +10,8 @@ import { IProject, IProjectProps } from "@/lib/interface/iProject";
 import { useAuthStore } from "@/stores/authStore";
 
 import { FaHeart, FaShare, FaEdit } from "react-icons/fa";
+import { likeProject } from "@/services/likeProject";
+import { deleteProject } from "@/services/deleteProject";
 
 function ProjectTittle({ project }: IProjectProps) {
   return <Styles.ProjectDetailTitle>{project.title}</Styles.ProjectDetailTitle>;
@@ -46,34 +48,51 @@ function ProjectIntroduction({ project }: IProjectProps) {
 
 function ProjectLikeShare({ project }: IProjectProps) {
   const { user } = useAuthStore();
+  const { isLoggedIn, accessToken } = useAuthStore();
+
+  const [projectLikes, setProjectLikes] = useState(project.likes);
+  const [userLikesProject, setUserLikesProject] = useState(true); // Todo: 사용자가 프로젝틍체 좋아요를 눌렀는지
 
   return (
-    <div>
-      <div
-        style={{
-          marginTop: "20px",
-          display: "inline-flex",
-          justifyContent: "center",
-          alignItems: "center",
-          border: "solid 2px black",
-          borderRadius: "20px",
-          padding: "5px 15px 5px 15px",
-          gap: "15px",
-        }}
-      >
+    <Styles.BtnsContainer>
+      <Styles.BtnContainer>
         <button>
-          <FaHeart style={{ width: "26px", height: "26px" }} />
+          <FaHeart
+            style={{ width: "26px", height: "26px" }}
+            onClick={async () => {
+              if (isLoggedIn === false || accessToken === null) {
+                alert("로그인이 필요합니다");
+              } else {
+                if (userLikesProject) {
+                  setUserLikesProject(false);
+                  setProjectLikes(projectLikes + 1);
+                  await likeProject(project.id, accessToken);
+                } else {
+                  setUserLikesProject(true);
+                  setProjectLikes(projectLikes - 1);
+                  await deleteProject(project.id, accessToken);
+                }
+              }
+            }}
+          />
         </button>
+        <p>{projectLikes}</p>
+      </Styles.BtnContainer>
+      <Styles.BtnContainer>
         <button>
           <FaShare style={{ width: "26px", height: "26px" }} />
         </button>
-        {user?.email === project.authorName ? (
+        <p>공유</p>
+      </Styles.BtnContainer>
+      {user?.username === project.authorName ? (
+        <Styles.BtnContainer>
           <Link style={{ width: "100%" }} href={`/project/edit/${project.id}`}>
             <FaEdit style={{ width: "26px", height: "26px" }} />
           </Link>
-        ) : null}
-      </div>
-    </div>
+          <p>수정</p>
+        </Styles.BtnContainer>
+      ) : null}
+    </Styles.BtnsContainer>
   );
 }
 

src/components/Project/styles.ts

@@ -125,3 +125,21 @@ export const TypeCard = styled.div`
     font-size: 30px;
   }
 `;
+
+export const BtnsContainer = styled.div`
+  margin-top: 20px;
+  display: inline-flex;
+  border: solid 2px black;
+  border-radius: 20px;
+  padding: 5px 15px 0px 15px;
+  gap: 15px;
+`;
+
+export const BtnContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  padding: 5px;
+`;

src/components/ProjectCard/ProjectCard.tsx

@@ -24,7 +24,8 @@ const ProjectCard = forwardRef<HTMLDivElement, IProjectCardProps>(
       router.push(`/${e.currentTarget.textContent}/projects`);
     };
 
-    const { id, title, imageUrls, bio, authorName } = projectCard.projectCard;
+    const { id, title, imageUrls, bio, likes, authorName } =
+      projectCard.projectCard;
 
     return (
       <Link style={{ width: "100%" }} href={`/project/${id}`}>
@@ -54,7 +55,7 @@ const ProjectCard = forwardRef<HTMLDivElement, IProjectCardProps>(
                   height={24}
                 />
               </S.LikeButton>
-              <S.LikeCount>{100} likes</S.LikeCount>
+              <S.LikeCount>{likes} likes</S.LikeCount>
             </S.LikeSection>
           </S.Content>
         </S.Card>

src/lib/interface/iProjectCard.ts

@@ -1,12 +1,11 @@
 export interface IProjectCard {
-  // likes: number;
-  // author: string;
   //   __typename: string;
 
   id: string;
   title: string;
   imageUrls: string[];
   bio: string;
+  likes: number;
   authorName: string;
 }
 

src/services/deleteProject.ts

@@ -0,0 +1,26 @@
+import axios from "axios";
+
+const version = "/v1";
+
+export const deleteProject = async (id: number, token: string) => {
+  const BASE_URL = "/api"; // rewrite하기 위해 localhost의 api로 보내는 것
+
+  const apiClient = axios.create({
+    baseURL: BASE_URL,
+  });
+
+  const headers = {
+    Authorization: `Bearer ${token}`,
+  };
+
+  try {
+    const response = await apiClient.delete(`${version}/like/${id}`, {
+      headers: headers,
+    });
+
+    return response;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};

src/services/gql/getProjectDetailById.ts

@@ -13,6 +13,7 @@ export const GET_PROJECT_BY_ID = gql`
       categories
       stacks
       authorName
+      likes
     }
   }
 `;

src/services/gql/searchProject.ts

@@ -22,6 +22,7 @@ export const SEARCH_PROJECT = gql`
       count
       hasNext
       projects {
+        authorName
         id
         title
         imageUrls

src/services/likeProject.ts

@@ -0,0 +1,31 @@
+import axios from "axios";
+
+const version = "/v1";
+
+export const likeProject = async (id: number, token: string) => {
+  const BASE_URL = "/api"; // rewrite하기 위해 localhost의 api로 보내는 것
+
+  const apiClient = axios.create({
+    baseURL: BASE_URL,
+  });
+
+  const headers = {
+    Authorization: `Bearer ${token}`,
+  };
+
+  try {
+    const response = await apiClient.post(
+      `${version}/like/${id}`,
+      {},
+      {
+        headers: headers,
+      },
+    );
+    console.log(response);
+
+    return response;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};