♻️ Refactor: 프로필 정보 및 팔로워/팔로우 컴포넌트화

src/components/Profile/ProfileCard/ProfileCard.jsx

@@ -0,0 +1,164 @@
+import useState from 'react';
+import styled from "styled-components";
+import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import Button from '../../common/Button/Button';
+import ProfileFollow from './ProfileFollow';
+import { userInfoAtom } from '../../../atoms/UserAtom';
+import { isDarkModeState } from '../../../atoms/StylesAtom';
+import { postFollow, deleteFollow } from '../../../api/follow';
+import basicProfile from '../../../assets/images/basic-profile-l.svg';
+import basicDarkProfile from '../../../assets/images/basic-profile-l-dark.svg';
+
+const ProfileCard = ({ userProfile, myProfile }) => {
+  const navigate = useNavigate();
+  const userInfo = useRecoilValue(userInfoAtom);
+  const account = userInfo.account;
+  const isDarkMode = useRecoilValue(isDarkModeState);
+  const [profile, setProfile] = useState(userProfile);
+  const numberRegex = /^https:\/\/api\.mandarin\.weniv\.co\.kr\/[/\w.]*$/;
+
+  const handleFollow = async (e) => {
+    const followResult = await postFollow(profile.accountname);
+    setProfile(followResult.profile);
+  };
+
+  const handleUnFollow = async (e) => {
+    const followResult = await deleteFollow(profile.accountname);
+    setProfile(followResult.profile);
+  };
+
+  const handleBtnClick = () => {
+    navigate(`/post/upload`);
+  };
+
+  /* 프로필 수정 페이지로 이동 */
+  const goToProfileEdit = () => {
+    if (profile.accountname === account) {
+      navigate(`/profile/${profile.accountname}/editProfile`);
+    }
+  };
+
+  return (
+    <Container>
+      <ProfileSection>
+        <ProfileFollow follow="Follower" userProfile={profile} />
+        <Image
+          src={
+            numberRegex.test(userProfile.image)
+              ? userProfile.image
+              : isDarkMode
+                ? basicDarkProfile
+                : basicProfile
+          }
+          alt="유저 이미지"
+        />
+      <ProfileFollow follow="Follower" userProfile={profile} />
+      </ProfileSection>
+      <UserSection>
+        <UserName>{userProfile.username}</UserName>
+        <AccountName>@ {userProfile.accountname}</AccountName>
+        <Introduction>{userProfile.intro}</Introduction>
+      </UserSection>
+      <ButtonSection>
+        {!myProfile ? (
+          <Button
+            size="M"
+            text={profile.isfollow ? '언팔로우' : '팔로우'}
+            handleClick={profile.isfollow ? handleUnFollow : handleFollow}
+            isClicked={profile.isfollow}
+            isDarkMode={isDarkMode}
+          />
+        ) : (
+          <>
+            <Button
+              size="M"
+              text="러닝 등록"
+              isClicked={true}
+              isDarkMode={isDarkMode}
+              handleClick={handleBtnClick}
+            />
+            <Button
+              size="M"
+              text="프로필 수정"
+              isClicked={true}
+              isDarkMode={isDarkMode}
+              handleClick={goToProfileEdit}
+            />
+          </>
+        )}
+      </ButtonSection>
+      <PostSection>
+        <Text>{userProfile.username}</Text>가 올린 글
+      </PostSection>
+    </Container>
+  )
+};
+
+export default ProfileCard;
+
+const Container = styled.div`
+background-color: ${({theme}) => theme.colors.backgroundColor};
+text-align: center;
+`;
+
+const ProfileSection = styled.section`
+display: flex;
+justify-content: space-around;
+align-items: center;
+padding: 1.6rem;
+margin-top: 1.4rem;
+`;
+
+const Image = styled.img`
+  width: 11rem;
+  height: 11rem;
+  border-radius: 50%;
+  object-fit: cover;
+`
+
+const UserSection = styled.ul`
+  text-align: center;
+`;
+
+const UserName = styled.li`
+  color: ${({ theme }) => theme.colors.blackText};
+  font-size: ${({ theme }) => theme.fontSize.large};
+  font-weight: bold;
+`;
+
+const AccountName = styled.li`
+  margin-top: 0.6rem;
+  color: ${({ theme }) => theme.colors.textColor};
+  font-size: 1.2rem;
+`;
+
+const Introduction = styled.li`
+  margin-top: 1.6rem;
+  color: ${({ theme }) => theme.colors.textColor};
+  font-size: ${({ theme }) => theme.fontSize.medium};
+`;
+
+const ButtonSection = styled.section`
+  display: flex;
+  justify-content: center;
+  margin-top: 2.4rem;
+  margin-bottom: 2.6rem;
+  gap: 1rem;
+`;
+
+const PostSection = styled.section`
+  height: 3.4rem;
+  padding-top: 1.1rem;
+  color: ${({ theme }) => theme.colors.textColor};
+  background-color: ${({theme}) => theme.colors.uploadBoxColor};
+  border: 0.01rem solid rgba(217, 217, 217, 0.5);
+  border-bottom: none;
+  font-size: ${({ theme }) => theme.fontSize.xsmall};
+  font-weight: 400;
+  text-align: center;
+`;
+
+const Text = styled.strong`
+  color: ${({theme}) => theme.colors.mainColor};
+`

src/components/Profile/ProfileCard/ProfileFollow.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const FollowCount = ({ follow, userProfile }) => {
+  return (
+    <Container>
+      {/* 추후 button -> Link로 변경 각각 해당 하는 페이지로 이동*/}
+      {follow === 'Follower' ? (
+        <Link to={`/profile/${userProfile.accountname}/follower`}>
+          <FollowerCount>{userProfile.followerCount}</FollowerCount>
+          <Text>follwers</Text>
+        </Link>
+      ) : (
+        // http://localhost:3000/sudo_charlie/follower
+        <Link to={`/profile/${userProfile.accountname}/follow`}>
+          <FollowingCount>{userProfile.followingCount}</FollowingCount>
+          <Text>following</Text>
+        </Link>
+      )}
+    </Container>
+  );
+};
+
+export default FollowCount;
+
+
+export const Container = styled.div`
+`
+
+export const FollowerCount = styled.div`
+  font-weight: bold;
+  color: ${({ theme }) => theme.colors.blackText};
+  font-size: ${({ theme }) => theme.fontSize.large};
+`;
+export const FollowingCount = styled.div`
+  font-weight: bold;
+  color: ${({ theme }) => theme.colors.textColor};
+  font-size: ${({ theme }) => theme.fontSize.xlarge};
+`;
+export const Text = styled.div`
+  font-size: ${({ theme }) => theme.fontSize.medium};
+  color: ${({ theme }) => theme.colors.textColor};
+  margin-top: 0.6rem;
+`