✨ 프로필 UI 구현 (#77)

* feat: feed footer 수정

UI 변경으로 likeCount와 commnetCount의 위치 및 font를 수정했습니다.

* refactor: FollowButton 개선

* feat: profile-change icon sprite 추가

* feat: ProfileUser 구현

* feat: ProfileCount 구현

* feat: ProfileUser public Api 추가

* feat: Feed 컴포넌트 추출

* feat: ProfileFeedList 구현

* feat: ProfileFeedList Public Api 추가

* feat: ProfileHeader 구현

* feat: ProfileHeader Public Api 추가

* feat: ProfileMainPage 구현

* feat: ProfileMainPage Public Api 추가

* feat: routers index에 ProfileMainPage 추가

* feat: PageHeader 수정

* feat: ProfileFeedList.scss 수정

* feat: profile 임시 링크 추가

* feat: FollowButton 수정

* feat: PageHeader 수정

* feat: ProfileUser.scss 수정

* feat: router index.tsx 수정

* feat: ProfileHeader.scss 수정

* feat: Feed.scss 수정

* feat: ProfileFeedList.scss 수정

* feat: ProfileHeader widgets로 이동

* feat: router index.ts 수정

* feat: ProfileFeedList 컴포넌트 수정

section 태그를 div 태그로 변경

Closes #PW-344

src/app/routers/index.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter, RouteObject } from 'react-router-dom';
 
 import { FeedMainPage } from '@/pages/feed-main';
+import { ProfileMainPage } from '@/pages/profile';
 
 import { IPhoneLayout } from '../layout';
 
@@ -13,7 +14,10 @@ const root: RouteObject[] = [
   {
     path: '/',
     element: <IPhoneLayout />,
-    children: [{ index: true, element: <FeedMainPage /> }],
+    children: [
+      { index: true, element: <FeedMainPage /> },
+      { path: 'user', element: <ProfileMainPage /> },
+    ],
   },
 ];
 

src/pages/profile/index.ts

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

src/pages/profile/ui/ProfileMainPage.tsx

@@ -0,0 +1,13 @@
+import { ProfileFeedList } from '@/widgets/profile-feed-list';
+import { ProfileHeader } from '@/widgets/profile-header';
+import { ProfileUser } from '@/widgets/profile-user';
+
+export const ProfileMainPage = () => {
+  return (
+    <main>
+      <ProfileHeader name='2weeksone' />
+      <ProfileUser />
+      <ProfileFeedList />
+    </main>
+  );
+};

src/shared/ui/button/ConfirmModalButton.tsx

@@ -4,6 +4,7 @@ import './ConfirmModalButton.scss';
 type ConfirmModalButtonStyle = 'confirm' | 'cancle';
 
 interface ConfirmModalButtonProps extends ButtonProps {
+  children: React.ReactNode;
   styleClass: ConfirmModalButtonStyle;
 }
 

src/shared/ui/button/FollowButton.scss

@@ -9,7 +9,8 @@
   background-color: $gray5;
   @include followButton();
 }
-.follow-unfollow {
+
+.unfollow {
   color: white;
   background-color: $mint3;
   @include followButton();

src/shared/ui/button/FollowButton.tsx

@@ -2,19 +2,16 @@ import './FollowButton.scss';
 import { ButtonProps } from './types';
 
 interface FollowButtonProps extends ButtonProps {
-  isUnfollow: boolean;
+  isFollow: boolean;
 }
 
-export const FollowButton = ({
-  onClick,
-  isUnfollow,
-  children,
-}: FollowButtonProps) => {
-  const sytleClass = isUnfollow ? 'follow' : 'follow-unfollow';
+export const FollowButton = ({ onClick, isFollow }: FollowButtonProps) => {
+  const sytleClass = isFollow ? 'follow' : 'unfollow';
+  const content = isFollow ? '팔로잉' : '팔로우';
 
   return (
     <button onClick={onClick} type='button' className={`${sytleClass} b2semi`}>
-      {children}
+      {content}
     </button>
   );
 };

src/shared/ui/button/types.ts

@@ -1,4 +1,3 @@
 export interface ButtonProps {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
 }

src/shared/ui/header/PageHeader.tsx

@@ -11,11 +11,11 @@ interface PageHeaderProps {
 
 export const PageHeader = ({ prevPageLink, page }: PageHeaderProps) => {
   return (
-    <div className='page-header'>
+    <header className='page-header'>
       <Link to={prevPageLink}>
         <Icon name='back' width='44' height='44' />
       </Link>
-      <p className='page'>{page}</p>
-    </div>
+      <p className='page h4md'>{page}</p>
+    </header>
   );
 };

src/shared/ui/icon/consts/sprite.ts

@@ -16,4 +16,5 @@ export type IconName =
   | 'checkbox-square_on'
   | 'checkbox-square_off'
   | 'check_mint'
-  | 'siren';
+  | 'siren'
+  | 'profile-change';

src/shared/ui/profile/Profile.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import { Icon } from '..';
 import './Profile.scss';
 
@@ -7,20 +9,26 @@ interface ProfileProps {
   content: string;
 }
 
+/**
+ * @todo 임시로 구현된 Link, 추후 적절한 user로 이동하도록 수정
+ */
+
 export const Profile = ({ profileImage, name, content }: ProfileProps) => {
   return (
     <div className='profile'>
-      {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 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>
       <div className='name-section'>
         <h5 className='name b1semi'>{name}</h5>
         <p className='content b3md'>{content}</p>

src/widgets/feed-main-list/index.ts

@@ -1 +1 @@
-export { FeedMainList } from './ui';
+export { FeedMainList, Feed } from './ui';

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

@@ -25,28 +25,9 @@
       }
     }
 
-    .feed-count-container {
-      display: flex;
-      align-items: center;
-
-      padding-left: 20px;
-
-      .count-divider {
-        width: 2px;
-        height: 2px;
-
-        margin: 0 4px;
-        background-color: $gray4;
-      }
-
-      .count-text {
-        color: $gray4;
-      }
-    }
-
     .feed-footer {
       margin-top: 8px;
-      padding: 0 15px 0 20px;
+      padding: 0 15px 3px 15px;
 
       display: flex;
       justify-content: space-between;
@@ -55,6 +36,17 @@
       .footer-left {
         display: flex;
         gap: 12px;
+
+        .footer-count {
+          display: flex;
+          align-items: center;
+
+          .count-text {
+            padding-left: 4px;
+            text-align: left;
+            color: $gray6;
+          }
+        }
       }
 
       .icon-btn {

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

@@ -37,17 +37,18 @@ export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
           <p className='feed-text b1reg'>{content}</p>
           <Carousel images={images} />
         </div>
-        <div className='feed-count-container'>
-          <p className='count-text b3md'>좋아요 {likeCount}</p>
-          <span className='count-divider' />
-          <p className='count-text b3md'>댓글 {commentCount}</p>
-        </div>
         <footer className='feed-footer'>
           <div className='footer-left'>
-            <LikeButton feedId={id} isLiked={isLiked} />
-            <button className='icon icon-btn'>
-              <Icon name='chat' width='20' height='20' />
-            </button>
+            <span className='footer-count'>
+              <LikeButton feedId={id} isLiked={isLiked} />
+              <p className='count-text b2md'>{likeCount}</p>
+            </span>
+            <span className='footer-count'>
+              <button className='icon icon-btn'>
+                <Icon name='chat' width='20' height='20' />
+              </button>
+              <p className='count-text b2md'>{commentCount}</p>
+            </span>
             <button className='icon icon-btn'>
               <Icon name='share' width='20' height='20' />
             </button>

src/widgets/feed-main-list/ui/index.ts

@@ -1 +1,2 @@
 export { FeedMainList } from './FeedMainList';
+export { Feed } from './Feed';

src/widgets/profile-feed-list/index.ts

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

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

@@ -0,0 +1,20 @@
+.profile-feed-list-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  padding: 20px 20px 17px 20px;
+
+  .feed-list-title {
+    align-self: flex-start;
+    margin-top: 20px;
+  }
+
+  .profile-feed {
+    width: 100%;
+    border: 1px solid $gray1;
+    border-radius: 10px;
+    padding: 20px 1px;
+  }
+}

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

@@ -0,0 +1,68 @@
+import { Feed as FeedProps } from '@/shared/consts';
+import { Feed } from '@/widgets/feed-main-list';
+
+import './ProfileFeedList.scss';
+
+const dummyFeeds: FeedProps[] = [
+  {
+    id: 1,
+    user: {
+      id: 1,
+      name: '김붕어빵',
+      profileImage: '',
+    },
+    createdAt: '1분 전',
+    updatedAt: '1분 전',
+    content: 'ㅎㅇ',
+    images: [],
+    likeCount: 30,
+    commentCount: 30,
+    isLiked: true,
+    isBookmarked: false,
+  },
+  {
+    id: 2,
+    user: {
+      id: 1,
+      name: '김붕어빵',
+      profileImage: '',
+    },
+    createdAt: '1분 전',
+    updatedAt: '1분 전',
+    content: 'ㅎㅇ',
+    images: [],
+    likeCount: 300,
+    commentCount: 340,
+    isLiked: true,
+    isBookmarked: false,
+  },
+  {
+    id: 3,
+    user: {
+      id: 1,
+      name: '김붕어빵',
+      profileImage: '',
+    },
+    createdAt: '1분 전',
+    updatedAt: '1분 전',
+    content: 'ㅎㅇ',
+    images: [],
+    likeCount: 1,
+    commentCount: 2,
+    isLiked: false,
+    isBookmarked: false,
+  },
+];
+
+export const ProfileFeedList = () => {
+  return (
+    <section className='profile-feed-list-wrapper'>
+      <h3 className='feed-list-title b1md'>내 게시글</h3>
+      {dummyFeeds.map((dummyFeed) => (
+        <div className='profile-feed' key={dummyFeed.id}>
+          <Feed feed={dummyFeed} />
+        </div>
+      ))}
+    </section>
+  );
+};

src/widgets/profile-feed-list/ui/index.ts

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

src/widgets/profile-header/index.ts

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

src/widgets/profile-header/ui/ProfileHeader.scss

@@ -0,0 +1,15 @@
+.profile-header {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: white;
+  margin-top: 3.45px;
+  padding-left: 3px;
+
+  .name {
+    text-align: center;
+  }
+}

src/widgets/profile-header/ui/ProfileHeader.tsx

@@ -0,0 +1,13 @@
+import './ProfileHeader.scss';
+
+interface ProfileHeaderProps {
+  name: string;
+}
+
+export const ProfileHeader = ({ name }: ProfileHeaderProps) => {
+  return (
+    <header className='profile-header'>
+      <p className='name h4md'>{name}</p>
+    </header>
+  );
+};

src/widgets/profile-header/ui/index.ts

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

src/widgets/profile-user/index.ts

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

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

@@ -0,0 +1,14 @@
+.profile-count {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+
+  gap: 5px;
+  .count-number {
+    color: $gray7;
+  }
+  .count-text {
+    color: $gray4;
+  }
+}