✨ Profile User Api (#79)

* feat: PageHeader.scss 수정

* feat: useGetUser hook 구현

* feat: ProfileUser useGetUser 사용

* feat: user.ts Fetch interface 구현

* feat: profileImage Link 경로 수정

* feat: Feed 내 Profile 경로 props 추가

* feat: types/index.ts 수정

* feat: ProfileMainPage 수정

* feat: Router index 수정

* fix: ProfileUser 컴포넌트 수정

* fix: shared/consts/types/index.ts 수정

잘못된 태스크 분리로 인해 잘못 삭제한 export ProfileFeed 복구

* feat: ProfileMainPage useEffect 삭제

* feat: ProfileUser 수정

* feat: ProfileUser 컴포넌트 icon 추가

* feat: ProfileUserImage 컴포넌트 구현

* feat: ProfileUser에서 ProfileUserImage 컴포넌트 분리 적용

* refactor: ProfileMainPage 분기처리 리팩토링

* feat: shared/ProfileImage 컴포넌트 구현

* feat: shared/Profile ProfileImage컴포넌트 적용 및 isLink prop 추가

* feat: Feed 컴포넌트 isLink prop 추가

* feat: FeedMainList 내부 Feed 컴포넌트에 isLink prop 설정

* feat: ProfileFeedList 내부 Feed 컴포넌트에 isLink prop 설정

* feat: ProfileUserImage 내 NoProfileIcon SVG 추가

* feat: useGetUser enalbed 삭제

자신의 PK값은 iOS에서 가져오고, 상대 user의 경우에는 Link로 이동하면서 props로 받기에 필요 없음

* feat: ProfileMainPage 내 ProfileFeedList 제거

api 구현 후 연결 예정

Closes #PW-346

src/app/routers/index.tsx

@@ -16,7 +16,7 @@ const root: RouteObject[] = [
     element: <IPhoneLayout />,
     children: [
       { index: true, element: <FeedMainPage /> },
-      { path: 'user', element: <ProfileMainPage /> },
+      { path: 'users/:userId', element: <ProfileMainPage /> },
     ],
   },
 ];

src/pages/profile/ui/ProfileMainPage.tsx

@@ -1,13 +1,21 @@
-import { ProfileFeedList } from '@/widgets/profile-feed-list';
-import { ProfileHeader } from '@/widgets/profile-header';
+import { useParams } from 'react-router-dom';
+
 import { ProfileUser } from '@/widgets/profile-user';
 
+/**
+ * @todo userPK값 가져와서 판별하도록 구현
+ * @todo ProfileFeed Api 구현 후, ProfileFeedList 컴포넌트 연결
+ */
+
 export const ProfileMainPage = () => {
+  const { userId } = useParams<{ userId: string }>();
+  const formattedUserId = Number(userId);
+
+  const owner = formattedUserId === 1 ? true : false;
+
   return (
     <main>
-      <ProfileHeader name='2weeksone' />
-      <ProfileUser />
-      <ProfileFeedList />
+      <ProfileUser userId={formattedUserId} isOwner={owner} />
     </main>
   );
 };

src/shared/consts/types/index.ts

@@ -1,5 +1,5 @@
 export type * from './feed';
 export type { Comment } from './comment';
 export type { Like } from './like';
-export type { User, RelationshipStatus } from './user';
+export type * from './user';
 export type { ProfileFeed } from './profileFeed';

src/shared/consts/types/user.ts

@@ -10,4 +10,28 @@ export interface User {
   followerCount: number;
 }
 
+export interface FetchUser {
+  code: string;
+  data: {
+    user: {
+      id: number;
+      profileImage: string;
+      name: string;
+      content: string;
+      locked: boolean;
+
+      feedCount: number;
+      followingCount: number;
+      followerCount: number;
+    };
+  };
+}
+
 export type RelationshipStatus = 'self' | 'following' | 'none' | 'pending';
+
+export interface FetchRelationshipStatus {
+  code: string;
+  data: {
+    relationshipStatus: RelationshipStatus;
+  };
+}

src/shared/react-query/consts/keys.ts

@@ -1,3 +1,4 @@
 export const QUERY_KEYS = Object.freeze({
   feeds: 'feeds',
+  users: 'users',
 });

src/shared/ui/header/PageHeader.scss

@@ -1,5 +1,5 @@
 .page-header {
-  width: 320px;
+  width: 100%;
   height: 44px;
   display: flex;
   align-items: center;

src/shared/ui/profile/Profile.scss

@@ -5,30 +5,6 @@
   border: none;
   background-color: white;
 
-  .profile-image {
-    width: 32px;
-    height: 32px;
-
-    border-radius: 50%;
-    overflow: hidden;
-  }
-
-  .no-proile-background {
-    position: relative;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    overflow: hidden;
-
-    background: $gray3;
-
-    svg {
-      z-index: 1;
-      position: absolute;
-      bottom: 0;
-    }
-  }
-
   .name-section {
     margin-left: 8px;
 

src/shared/ui/profile/Profile.tsx

@@ -1,34 +1,32 @@
 import { Link } from 'react-router-dom';
 
-import { Icon } from '..';
+import ProfileImage from './ProfileImage';
 import './Profile.scss';
 
 interface ProfileProps {
   profileImage: string;
   name: string;
   content: string;
+  userId: number;
+  isLink: boolean;
 }
 
-/**
- * @todo 임시로 구현된 Link, 추후 적절한 user로 이동하도록 수정
- */
-
-export const Profile = ({ profileImage, name, content }: ProfileProps) => {
+export const Profile = ({
+  profileImage,
+  name,
+  content,
+  userId,
+  isLink,
+}: ProfileProps) => {
   return (
     <div className='profile'>
-      <Link to={'/user'}>
-        {profileImage ? (
-          <img
-            className='profile-image'
-            src={profileImage}
-            alt={`${name} profile image`}
-          />
-        ) : (
-          <div className='no-proile-background'>
-            <Icon name='no-profile' width='32' height='32' />
-          </div>
-        )}
-      </Link>
+      {isLink ? (
+        <Link to={`/users/${userId}`}>
+          <ProfileImage profileImage={profileImage} name={name} />
+        </Link>
+      ) : (
+        <ProfileImage profileImage={profileImage} name={name} />
+      )}
       <div className='name-section'>
         <h5 className='name b1semi'>{name}</h5>
         <p className='content b3md'>{content}</p>

src/shared/ui/profile/ProfileImage.scss

@@ -0,0 +1,23 @@
+.profile-image {
+  width: 32px;
+  height: 32px;
+
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.no-proile-background {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  background: $gray3;
+
+  svg {
+    z-index: 1;
+    position: absolute;
+    bottom: 0;
+  }
+}

src/shared/ui/profile/ProfileImage.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '..';
+import './ProfileImage.scss';
+
+interface ProfileImageProps {
+  profileImage: string;
+  name: string;
+}
+
+const ProfileImage = ({ profileImage, name }: ProfileImageProps) => {
+  return profileImage ? (
+    <img
+      className='profile-image'
+      src={profileImage}
+      alt={`${name} profile image`}
+    />
+  ) : (
+    <div className='no-proile-background'>
+      <Icon name='no-profile' width='32' height='32' />
+    </div>
+  );
+};
+export default ProfileImage;

src/widgets/feed-main-list/ui/Feed.tsx

@@ -8,7 +8,10 @@ import { FeedKebabButton } from '@/widgets/feed-kebab';
 
 import './Feed.scss';
 
-export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
+export const Feed: React.FC<{ isLink: boolean; feed: FeedProps }> = ({
+  feed,
+  isLink,
+}) => {
   const {
     id,
     user,
@@ -29,6 +32,8 @@ export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
             profileImage={user.profileImage}
             name={user.name}
             content={calculateElapsedTime(updatedAt)}
+            userId={user.id}
+            isLink={isLink}
           />
 
           <FeedKebabButton feedId={id} />

src/widgets/feed-main-list/ui/FeedMainList.tsx

@@ -39,7 +39,7 @@ export const FeedMainList = () => {
             return hiddenType ? (
               <HiddenFeed key={feed.id} feedId={feed.id} type={hiddenType} />
             ) : (
-              <Feed key={feed.id} feed={feed} />
+              <Feed key={feed.id} feed={feed} isLink />
             );
           });
         })}

src/widgets/profile-feed-list/ui/ProfileFeedList.tsx

@@ -60,7 +60,7 @@ export const ProfileFeedList = () => {
       <h3 className='feed-list-title b1md'>내 게시글</h3>
       {dummyFeeds.map((dummyFeed) => (
         <div className='profile-feed' key={dummyFeed.id}>
-          <Feed feed={dummyFeed} />
+          <Feed feed={dummyFeed} isLink={false} />
         </div>
       ))}
     </section>

src/widgets/profile-user/api/index.ts

@@ -0,0 +1 @@
+export { useGetUser } from './useGetUser';

src/widgets/profile-user/api/useGetUser.ts

@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { axiosInstance } from '@/shared/axios';
+import { FetchUser } from '@/shared/consts';
+import { QUERY_KEYS } from '@/shared/react-query';
+
+async function fetchUser(userId: number): Promise<FetchUser> {
+  const { data } = await axiosInstance.get(`/users/${userId}`);
+  return data;
+}
+
+export const useGetUser = (userId: number) => {
+  const {
+    data,
+    isLoading,
+    isError,
+    refetch: refetchUser,
+  } = useQuery({
+    queryKey: [QUERY_KEYS.users, userId],
+    queryFn: () => fetchUser(userId),
+  });
+
+  return {
+    data,
+    isLoading,
+    isError,
+    refetchUser,
+  };
+};

src/widgets/profile-user/ui/ProfileUser.scss

@@ -6,41 +6,6 @@
   align-items: center;
   box-shadow: 0px 20px 34.5px 0px #dddddd40;
 
-  .profile-image-box {
-    position: relative;
-
-    .profile-image {
-      width: 81px;
-      height: 81px;
-      border-radius: 50%;
-      overflow: hidden;
-      padding-bottom: 5px;
-    }
-
-    .no-proile-background {
-      position: relative;
-      width: 81px;
-      height: 81px;
-      border-radius: 50%;
-      overflow: hidden;
-      background: $gray3;
-
-      svg {
-        z-index: 1;
-        position: absolute;
-        bottom: 0;
-      }
-    }
-
-    .profile-change-btn {
-      position: absolute;
-      bottom: 4px;
-      right: -8px;
-      width: 24px;
-      height: 24px;
-    }
-  }
-
   .profile-top-container {
     height: 148px;
     display: flex;
@@ -52,13 +17,21 @@
       text-align: center;
     }
 
-    .user-follow-btn {
+    .nickname-change-btn {
       width: 67px;
       height: 26px;
       border-radius: 5px;
       color: white;
       background-color: $mint3;
     }
+
+    .user-follow-btn {
+      width: 46px;
+      height: 26px;
+      border-radius: 5px;
+      color: white;
+      background-color: $mint3;
+    }
   }
 
   .profile-count-container {