fix: console.log 제거, follow/create api 수정, Card 사용하는 곳에 이미지 추가

prgrms-fe-devcourse · Jun 22, 2022 · aa65ded · aa65ded · vercel · Jun 22, 2022
1 parent 56250ad
commit aa65ded
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 31 deletions.
diff --git a/src/api/follow.ts b/src/api/follow.ts
@@ -2,7 +2,7 @@ import axios from "@lib/axios";
 
 export const fetchPostFollowByUserId = (userId: string) =>
   axios.post("/follow/create", {
-    data: { userId },
+    userId,
   });
 
 export const fetchDeleteFollowByUserId = (id: string) =>

diff --git a/src/api/user.ts b/src/api/user.ts
@@ -8,7 +8,6 @@ export const fetchGetUserById = (userId: string) =>
   axios.get(`/users/${userId}`);
 
 export const fetchGetFollowUserList = async (followUserIdList: string[]) => {
-  console.log(followUserIdList);
   return await Promise.all(
     followUserIdList.map((followUserId) => fetchGetUserById(followUserId))
   );

diff --git a/src/components/domain/ChallengesPage/Challenges.tsx b/src/components/domain/ChallengesPage/Challenges.tsx
@@ -37,6 +37,7 @@ const Challenges = ({ posts }: ChallengesProps) => {
                 text={jsonObject.reward}
                 commentCount={challenge.comments.length}
                 cheerCount={challenge.likes.length}
+                avatarSrc={challenge.author.image}
               ></Card>
             </CardContainer>
           );

diff --git a/src/components/domain/ProfilePage/MyChallenges.tsx b/src/components/domain/ProfilePage/MyChallenges.tsx
@@ -57,14 +57,16 @@ const MyChallenges = ({ challenges }: UserChallengesProps) => {
         <Text>챌린지가 없어요!</Text>
       ) : (
         challenges.map((challenge) => {
+          console.log(challenge);
+
           const jsonString = challenge.title.replaceAll("'", '"');
           const jsonObject = JSON.parse(jsonString);
           return (
             <CardContainer
               key={challenge._id}
-              onClick={() =>
-                handleChallengeClick(challenge.channel._id, challenge._id)
-              }
+              onClick={() => {
+                handleChallengeClick(challenge.channel._id, challenge._id);
+              }}
             >
               <Card
                 type="challenge"

diff --git a/src/components/domain/ProfilePage/MySummary.tsx b/src/components/domain/ProfilePage/MySummary.tsx
@@ -1,11 +1,12 @@
 import { Button, Text } from "@chakra-ui/react";
 import styled from "@emotion/styled";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 interface UserSummaryProps {
   introduce: string;
   followerCount: number;
   followingCount: number;
+  id: string;
 }
 
 const IntroduceText = styled(Text)`
@@ -43,17 +44,24 @@ const MySummary = ({
   introduce,
   followerCount,
   followingCount,
+  id,
 }: UserSummaryProps) => {
+  const navigate = useNavigate();
+
+  const handleFollowingClick = () => {
+    navigate(`/follow/${id}`);
+  };
+
   return (
     <UserSummaryContainer>
       <IntroduceText textAlign="center">{introduce}</IntroduceText>
       <FollowContainer>
         <div>
-          <Text>{followerCount}</Text>
+          <Text onClick={handleFollowingClick}>{followerCount}</Text>
           <div>팔로워</div>
         </div>
         <div>
-          <Text>{followingCount}</Text>
+          <Text onClick={handleFollowingClick}>{followingCount}</Text>
           <div>팔로잉</div>
         </div>
       </FollowContainer>

diff --git a/src/components/domain/ProfilePage/OtherSummary.tsx b/src/components/domain/ProfilePage/OtherSummary.tsx
@@ -1,11 +1,13 @@
+import { fetchPostFollowByUserId } from "@api/follow";
 import { Button, Text } from "@chakra-ui/react";
 import styled from "@emotion/styled";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 interface UserSummaryProps {
   introduce: string;
   followerCount: number;
   followingCount: number;
+  id: string;
 }
 
 const IntroduceText = styled(Text)`
@@ -43,21 +45,30 @@ const OtherSummary = ({
   introduce,
   followerCount,
   followingCount,
+  id,
 }: UserSummaryProps) => {
+  const navigate = useNavigate();
+
+  const handleFollowingClick = () => {
+    navigate(`/follow/${id}`);
+  };
+
   const handleFollowClick = () => {
-    console.log("팔로우 클릭");
+    void (async () => {
+      await fetchPostFollowByUserId(id);
+    })();
   };
 
   return (
     <UserSummaryContainer>
       <IntroduceText textAlign="center">{introduce}</IntroduceText>
       <FollowContainer>
         <div>
-          <Text>{followerCount}</Text>
+          <Text onClick={handleFollowingClick}>{followerCount}</Text>
           <div>팔로워</div>
         </div>
         <div>
-          <Text>{followingCount}</Text>
+          <Text onClick={handleFollowingClick}>{followingCount}</Text>
           <div>팔로잉</div>
         </div>
       </FollowContainer>

diff --git a/src/pages/ChallengesPage.tsx b/src/pages/ChallengesPage.tsx
@@ -27,6 +27,7 @@ const ChallengesPage = () => {
       if (channelResult.data) {
         const channelId = channelResult.data._id;
         const challengesResult = await fetchGetPostListByChannel(channelId);
+        console.log(challengesResult.data);
         setChallenges(challengesResult.data);
       }
     })();

diff --git a/src/pages/EditProfilePage.tsx b/src/pages/EditProfilePage.tsx
@@ -74,10 +74,6 @@ const EditProfilePage = () => {
   const [newPassword, setNewPassword] = useState("");
   const navigate = useNavigate();
 
-  const onChangeProfileImageClick = () => {
-    // console.log("프로필이미지변경클릭");
-  };
-
   const onFullNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fullName = e.target.value;
     setNewFullName(fullName);

diff --git a/src/pages/FollowPage.tsx b/src/pages/FollowPage.tsx
@@ -1,8 +1,6 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { User } from "src/types";
 import PageTab from "@domain/FollowPage/FollowPageTab";
-import { useAtom } from "jotai";
-import userAtom from "@store/user";
 import useGetFollowUserList from "@hooks/quries/useGetFollowUserList";
 import { useEffect } from "react";
 import useGetUserById from "@hooks/quries/useGetUser";
@@ -12,41 +10,35 @@ const FollowPage = () => {
   //const [user] = useAtom(userAtom);
 
   const { userId } = useParams();
-  console.log(userId);
   const { data: userRes } = useGetUserById(userId);
 
   const [user, setUser] = useState<User>({} as User);
   const [followerList, setFollowerList] = useState<User[]>([]);
   const [followingList, setFollowingList] = useState<User[]>([]);
 
-  console.log(user);
   const followerIdList: string[] =
     user?.followers?.map((follow) => follow.follower) ?? [];
   const followingIdList: string[] =
     user?.following?.map((following) => following.user).filter((id) => id) ??
     [];
 
-  console.log(followerIdList);
   const { data: followerResList } = useGetFollowUserList(followerIdList);
   const { data: followingResList } = useGetFollowUserList(followingIdList);
 
   useEffect(() => {
     if (userRes) {
-      console.log(userRes);
       setUser(userRes.data);
     }
   }, [userRes]);
 
   useEffect(() => {
     if (followerResList) {
-      console.log(followerResList.map((res) => res.data));
       setFollowerList(followerResList.map((res) => res.data));
     }
   }, [userRes, followerResList]);
 
   useEffect(() => {
     if (followingResList) {
-      console.log(followingResList.map((res) => res.data));
       setFollowingList(followingResList.map((res) => res.data));
     }
   }, [userRes, followingResList]);

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -32,7 +32,6 @@ const HomePage = () => {
 
   useEffect(() => {
     if (res) {
-      console.log(res);
       setPostLists(res.map((r) => r.data));
     }
   }, [res]);
@@ -76,6 +75,7 @@ const HomePage = () => {
                   text={challenge.reward}
                   commentCount={post.comments.length}
                   cheerCount={post.likes.length}
+                  avatarSrc={post.author.image}
                   margin="16px 0"
                   onClick={() => {
                     onClickChallenge(post.channel._id, post._id);

diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
@@ -27,7 +27,7 @@ interface LoginResponse {
 }
 
 const LoginPage = () => {
-  usePageTitle("Shallange");
+  usePageTitle("Shallenge");
   const navigate = useNavigate();
   const toast = useToast();
   const [myUser, setMyUser] = useAtom(userAtom);

diff --git a/src/pages/MyProfilePage.tsx b/src/pages/MyProfilePage.tsx
@@ -3,7 +3,7 @@ import { useAtom } from "jotai";
 
 import UserAvatar from "@domain/ProfilePage/UserAvatar";
 import MyChallenges from "@domain/ProfilePage/MyChallenges";
-import UserSummary from "@domain/ProfilePage/MySummary";
+import MySummary from "@domain/ProfilePage/MySummary";
 import userAtom from "@store/user";
 import usePageTitle from "@hooks/usePageTitle";
 
@@ -22,10 +22,11 @@ const MyProfilePage = () => {
     <>
       <UserInfo>
         <UserAvatar image={myUser.image} name={myUser.fullName} />
-        <UserSummary
+        <MySummary
           introduce={myUser.coverImage}
           followerCount={myUser.followers.length}
           followingCount={myUser.following.length}
+          id={myUser._id}
         />
       </UserInfo>
       <MyChallenges challenges={myUser.posts} />

diff --git a/src/pages/OtherProfilePage.tsx b/src/pages/OtherProfilePage.tsx
@@ -29,8 +29,6 @@ const OtherProfilePage = () => {
     })();
   }, []);
 
-  console.log(user);
-
   return (
     user && (
       <>
@@ -40,6 +38,7 @@ const OtherProfilePage = () => {
             introduce={user.coverImage}
             followerCount={user.followers.length}
             followingCount={user.following.length}
+            id={user._id}
           />
         </UserInfo>
         <OtherChallenges challenges={user.posts} />

diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx
@@ -125,6 +125,9 @@ const style = css`
     border-collapse: collapse;
     border-spacing: 0;
   }
+  * {
+    font-family: "Spoqa Han Sans Neo", "sans-serif";
+  }
 `;
 
 const GlobalStyles = () => {