Merge pull request codeit-13-3team#61 from codeit-13-3team/feature/profile

Feature/profile

Author: TAEINJEONG

src/api/user.ts

@@ -1,11 +1,16 @@
 import axiosInstance from './axiosInstance';
-import { GetFolloweeListResponse, GetUserRankingResponse } from '../types/user';
+import { GetFolloweeListResponse, GetMeResponse, GetUserRankingResponse } from '../types/user';
 
 export const getUserRanking = async () => {
   const response = await axiosInstance.get<GetUserRankingResponse[]>('/users/ranking');
   return response.data;
 };
 
+export const getUserProfile = async (): Promise<GetMeResponse> => {
+  const response = await axiosInstance.get<GetMeResponse>('/users/me');
+  return response.data;
+};
+
 export const getFollowersList = async (userId: number) => {
   const response = await axiosInstance.get<GetFolloweeListResponse>(`/users/${userId}/followers`);
   return response.data;

src/components/Profile.tsx

@@ -0,0 +1,87 @@
+import { GetMeResponse } from '@/types/user';
+import Image from 'next/image';
+
+interface ProfileProp {
+  profileData: GetMeResponse;
+  isMyProfile?: boolean;
+  editProfile?: () => void;
+  logout?: () => void;
+  onClickFollowBtn?: () => void;
+}
+
+function Profile({ profileData, isMyProfile=false, editProfile, logout, onClickFollowBtn }: ProfileProp) {
+  return (
+    <div className="mb-[60px] px-[20px] py-[30px] w-full h-auto rounded-[8px] bg-[#252530] md:px-[30px] lg:w-[340px] lg:mb-0">
+      <div className="w-full h-auto flex flex-col items-center gap-[30px] lg:gap-[40px]">
+        <div className="w-[120px] h-[120px] relative rounded-full lg:w-[180px] lg:h-[180px]">
+          {profileData?.image ? (
+            <Image src={profileData.image} alt="유저 이미지" fill />
+          ) : (
+            <Image src="/img/profileimage/img=profile1.png" alt="유저 이미지" fill />
+          )}
+        </div>
+        <div className="w-full flex flex-col gap-[10px] lg:gap-[20px]">
+          <span className="text-center text-[20px] font-semibold text-[#F1F1F5] lg:text-[24px]">
+            {profileData?.nickname}
+          </span>
+          <p className="text-[14px] font-normal text-[#6E6E82] lg:text-[16px]">
+            {profileData?.description}
+          </p>
+        </div>
+        <div className="w-full px-[51px] flex justify-between relative md:px-[108px] lg:px-[58px]">
+          <div className="flex flex-col items-center gap-[10px]">
+            <span className="text-[18px] font-semibold text-[#F1F1F5] lg:text-[20px]">
+              {profileData?.followersCount}
+            </span>
+            <span className="text-[14px] font-normal text-[#9FA6B2] lg:text-[16px]">팔로워</span>
+          </div>
+          <div className="absolute left-1/2 top-0 w-px h-full bg-[#353542]"></div>
+          <div className="flex flex-col items-center gap-[10px]">
+            <span className="text-[18px] font-semibold text-[#F1F1F5] lg:text-[20px]">
+              {profileData?.followeesCount}
+            </span>
+            <span className="text-[14px] font-normal text-[#9FA6B2] lg:text-[16px]">팔로잉</span>
+          </div>
+        </div>
+        {isMyProfile ? (
+          profileData.isFollowing ? (
+            <div
+              className="w-full h-[50px] flex justify-center items-center rounded-lg border border-gray-100 text-gray-100 text-[16px] font-semibold hover:cursor-pointer
+            md:h-[55px] lg:h-[65px] lg:text-[18px]"
+            onClick={onClickFollowBtn}
+            >
+              팔로우 취소
+            </div>
+          ) : (
+            <div
+              className="w-full h-[50px] flex justify-center items-center rounded-lg bg-main-blue text-gray-50 text-[16px] font-semibold hover:cursor-pointer
+            md:h-[55px] lg:h-[65px] lg:text-[18px]"
+            onClick={onClickFollowBtn}
+            >
+              팔로우
+            </div>
+          )
+        ) : (
+          <div className="w-full flex flex-col gap-[10px] md:gap-[15px] lg:gap-[20px]">
+            <div
+              className="w-full h-[50px] flex justify-center items-center rounded-lg bg-main-blue text-gray-50 text-[16px] font-semibold hover:cursor-pointer
+            md:h-[55px] lg:h-[65px] lg:text-[18px]"
+            onClick={editProfile}
+            >
+              프로필 편집
+            </div>
+            <div
+              className="w-full h-[50px] flex justify-center items-center rounded-lg border border-gray-100 text-gray-100 text-[16px] font-semibold hover:cursor-pointer
+            md:h-[55px] lg:h-[65px] lg:text-[18px]"
+            onClick={logout}
+            >
+              로그아웃
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Profile;