From 76f9206793ae0fea131f8d1e2ab536b1a0ded585 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 13:08:55 +0900 Subject: [PATCH 01/25] =?UTF-8?q?feat:=20PageHeader.scss=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/header/PageHeader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui/header/PageHeader.scss b/src/shared/ui/header/PageHeader.scss index 8213212..4481b9d 100644 --- a/src/shared/ui/header/PageHeader.scss +++ b/src/shared/ui/header/PageHeader.scss @@ -1,5 +1,5 @@ .page-header { - width: 320px; + width: 100%; height: 44px; display: flex; align-items: center; From 3efc682296f34eaaf320db086e0d176432b0a7da Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 14:16:46 +0900 Subject: [PATCH 02/25] =?UTF-8?q?feat:=20useGetUser=20hook=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/consts/keys.ts | 1 + src/widgets/profile-user/api/index.ts | 1 + src/widgets/profile-user/api/useGetUser.ts | 30 ++++++++++++++++++++++ 3 files changed, 32 insertions(+) create mode 100644 src/widgets/profile-user/api/index.ts create mode 100644 src/widgets/profile-user/api/useGetUser.ts diff --git a/src/shared/react-query/consts/keys.ts b/src/shared/react-query/consts/keys.ts index 4054825..ea3fc87 100644 --- a/src/shared/react-query/consts/keys.ts +++ b/src/shared/react-query/consts/keys.ts @@ -1,3 +1,4 @@ export const QUERY_KEYS = Object.freeze({ feeds: 'feeds', + users: 'users', }); diff --git a/src/widgets/profile-user/api/index.ts b/src/widgets/profile-user/api/index.ts new file mode 100644 index 0000000..d184899 --- /dev/null +++ b/src/widgets/profile-user/api/index.ts @@ -0,0 +1 @@ +export { useGetUser } from './useGetUser'; diff --git a/src/widgets/profile-user/api/useGetUser.ts b/src/widgets/profile-user/api/useGetUser.ts new file mode 100644 index 0000000..10091dc --- /dev/null +++ b/src/widgets/profile-user/api/useGetUser.ts @@ -0,0 +1,30 @@ +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 { + 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), + enabled: !!userId, + }); + + return { + data, + isLoading, + isError, + refetchUser, + }; +}; From 6d20865c3b29ed0f9a35f296de3c1303b918e354 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 14:17:20 +0900 Subject: [PATCH 03/25] =?UTF-8?q?feat:=20ProfileUser=20useGetUser=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/profile-user/ui/ProfileUser.scss | 10 ++- src/widgets/profile-user/ui/ProfileUser.tsx | 92 +++++++++++++------- 2 files changed, 71 insertions(+), 31 deletions(-) diff --git a/src/widgets/profile-user/ui/ProfileUser.scss b/src/widgets/profile-user/ui/ProfileUser.scss index 8509d0e..e0dafcc 100644 --- a/src/widgets/profile-user/ui/ProfileUser.scss +++ b/src/widgets/profile-user/ui/ProfileUser.scss @@ -52,13 +52,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 { diff --git a/src/widgets/profile-user/ui/ProfileUser.tsx b/src/widgets/profile-user/ui/ProfileUser.tsx index 565cc00..75523ff 100644 --- a/src/widgets/profile-user/ui/ProfileUser.tsx +++ b/src/widgets/profile-user/ui/ProfileUser.tsx @@ -1,40 +1,72 @@ -import { Icon } from '@/shared/ui'; +import { Icon, NetworkError, PageHeader } from '@/shared/ui'; + +import { useGetUser } from '../api'; -import './ProfileUser.scss'; import { ProfileCount } from './ProfileCount'; +import { SkeletonProfileUser } from './SkeletonProfileUser'; +import './ProfileUser.scss'; + +interface ProfileUserProps { + userId: number; + isOwner: boolean; +} + +export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => { + const { data, isLoading, isError, refetchUser } = useGetUser(userId); -export const ProfileUser = () => { - const profileImage = 'https://avatars.githubusercontent.com/u/101088491?v=4'; + if (isLoading) { + return ; + } + + if (isError && !data) { + return ; + } + + if (!data) { + return
데이터 없어용
; + } + + const { profileImage, name, feedCount, followerCount, followingCount } = + data.data.user; return ( -
-
-
- {profileImage ? ( - {`붕어빵 + <> + +
+
+
+ {profileImage ? ( + {`${name} + ) : ( +
+ +
+ )} + {isOwner && ( + + )} +
+

{name}

+ {isOwner ? ( + ) : ( -
- -
+ )} - -
-

붕어빵

- -
-
- -
- -
- +
+
+ +
+ +
+ +
- + ); }; From d4621ef4d6b803e7c4f5635e953d0a0213e6eb93 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 14:17:59 +0900 Subject: [PATCH 04/25] =?UTF-8?q?feat:=20user.ts=20Fetch=20interface=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/consts/types/user.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/shared/consts/types/user.ts b/src/shared/consts/types/user.ts index 62c8962..a65277e 100644 --- a/src/shared/consts/types/user.ts +++ b/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; + }; +} From eac07d44d6b25f632bd6d3ee14acf686af625110 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 14:18:46 +0900 Subject: [PATCH 05/25] =?UTF-8?q?feat:=20profileImage=20Link=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/profile/Profile.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/shared/ui/profile/Profile.tsx b/src/shared/ui/profile/Profile.tsx index f97ff5e..b9a8ad0 100644 --- a/src/shared/ui/profile/Profile.tsx +++ b/src/shared/ui/profile/Profile.tsx @@ -7,16 +7,18 @@ interface ProfileProps { profileImage: string; name: string; content: string; + linkedUserId?: number; } -/** - * @todo 임시로 구현된 Link, 추후 적절한 user로 이동하도록 수정 - */ - -export const Profile = ({ profileImage, name, content }: ProfileProps) => { +export const Profile = ({ + profileImage, + name, + content, + linkedUserId, +}: ProfileProps) => { return (
- + {profileImage ? ( Date: Fri, 24 May 2024 14:20:28 +0900 Subject: [PATCH 06/25] =?UTF-8?q?feat:=20Feed=20=EB=82=B4=20Profile=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20props=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/feed-main-list/ui/Feed.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/widgets/feed-main-list/ui/Feed.tsx b/src/widgets/feed-main-list/ui/Feed.tsx index 43e6eea..6cb4c78 100644 --- a/src/widgets/feed-main-list/ui/Feed.tsx +++ b/src/widgets/feed-main-list/ui/Feed.tsx @@ -29,6 +29,7 @@ export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => { profileImage={user.profileImage} name={user.name} content={calculateElapsedTime(updatedAt)} + linkedUserId={user.id} /> From 0e4beb4436ce599ff3108b3bda39496a7b5ad6e8 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 14:20:59 +0900 Subject: [PATCH 07/25] =?UTF-8?q?feat:=20types/index.ts=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/consts/types/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/shared/consts/types/index.ts b/src/shared/consts/types/index.ts index c3b5bb5..784d6ec 100644 --- a/src/shared/consts/types/index.ts +++ b/src/shared/consts/types/index.ts @@ -1,5 +1,4 @@ export type * from './feed'; export type { Comment } from './comment'; export type { Like } from './like'; -export type { User, RelationshipStatus } from './user'; -export type { ProfileFeed } from './profileFeed'; +export type * from './user'; From 36ce49dc5cfe51b80a5a0577145aa382568e96e5 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 14:21:23 +0900 Subject: [PATCH 08/25] =?UTF-8?q?feat:=20ProfileMainPage=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/profile/ui/ProfileMainPage.tsx | 27 +++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/pages/profile/ui/ProfileMainPage.tsx b/src/pages/profile/ui/ProfileMainPage.tsx index fd15128..010a9bc 100644 --- a/src/pages/profile/ui/ProfileMainPage.tsx +++ b/src/pages/profile/ui/ProfileMainPage.tsx @@ -1,12 +1,33 @@ +import { useEffect } from 'react'; +import { useParams } from 'react-router-dom'; + import { ProfileFeedList } from '@/widgets/profile-feed-list'; -import { ProfileHeader } from '@/widgets/profile-header'; import { ProfileUser } from '@/widgets/profile-user'; +/** + * @todo userPK값 가져와서 본인인지 판별하도록 수정 + */ + export const ProfileMainPage = () => { + const { userId } = useParams<{ userId: string }>(); + const formattedUserId = Number(userId); + + useEffect(() => { + window.scrollTo(0, 0); + }, []); + + if (formattedUserId === 1) { + return ( +
+ + +
+ ); + } + return (
- - +
); From 3cb4e2640f69541884b598535de3d87b9c3a062b Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Fri, 24 May 2024 14:22:39 +0900 Subject: [PATCH 09/25] =?UTF-8?q?feat:=20Router=20index=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/routers/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/routers/index.tsx b/src/app/routers/index.tsx index 467ec46..80215d9 100644 --- a/src/app/routers/index.tsx +++ b/src/app/routers/index.tsx @@ -16,7 +16,7 @@ const root: RouteObject[] = [ element: , children: [ { index: true, element: }, - { path: 'user', element: }, + { path: 'users/:userId', element: }, ], }, ]; From 5019432e92c3ef26d9015c9a8d7fd4436b72371e Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Fri, 24 May 2024 15:35:19 +0900 Subject: [PATCH 10/25] =?UTF-8?q?fix:=20ProfileUser=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/profile-user/ui/ProfileUser.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/widgets/profile-user/ui/ProfileUser.tsx b/src/widgets/profile-user/ui/ProfileUser.tsx index 75523ff..8440e93 100644 --- a/src/widgets/profile-user/ui/ProfileUser.tsx +++ b/src/widgets/profile-user/ui/ProfileUser.tsx @@ -3,7 +3,6 @@ import { Icon, NetworkError, PageHeader } from '@/shared/ui'; import { useGetUser } from '../api'; import { ProfileCount } from './ProfileCount'; -import { SkeletonProfileUser } from './SkeletonProfileUser'; import './ProfileUser.scss'; interface ProfileUserProps { @@ -15,7 +14,7 @@ export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => { const { data, isLoading, isError, refetchUser } = useGetUser(userId); if (isLoading) { - return ; + return
스켈레톤 들어갈곳
; } if (isError && !data) { From 6289ee5c0565057d458008439a3b4dbeaf99c6f4 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Sun, 26 May 2024 19:47:28 +0900 Subject: [PATCH 11/25] =?UTF-8?q?fix:=20shared/consts/types/index.ts=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 잘못된 태스크 분리로 인해 잘못 삭제한 export ProfileFeed 복구 --- src/shared/consts/types/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/consts/types/index.ts b/src/shared/consts/types/index.ts index 784d6ec..caeeafd 100644 --- a/src/shared/consts/types/index.ts +++ b/src/shared/consts/types/index.ts @@ -2,3 +2,4 @@ export type * from './feed'; export type { Comment } from './comment'; export type { Like } from './like'; export type * from './user'; +export type { ProfileFeed } from './profileFeed'; From 19cbeecfb374fb3e2fbee06be1afbfc95eb046b3 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Sun, 26 May 2024 20:24:13 +0900 Subject: [PATCH 12/25] =?UTF-8?q?feat:=20ProfileMainPage=20useEffect=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/profile/ui/ProfileMainPage.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/profile/ui/ProfileMainPage.tsx b/src/pages/profile/ui/ProfileMainPage.tsx index 010a9bc..9a9d6bc 100644 --- a/src/pages/profile/ui/ProfileMainPage.tsx +++ b/src/pages/profile/ui/ProfileMainPage.tsx @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { ProfileFeedList } from '@/widgets/profile-feed-list'; @@ -12,10 +11,6 @@ export const ProfileMainPage = () => { const { userId } = useParams<{ userId: string }>(); const formattedUserId = Number(userId); - useEffect(() => { - window.scrollTo(0, 0); - }, []); - if (formattedUserId === 1) { return (
From 3a9cef7350a7c7afa2d6c15c77e1ba29ca130e97 Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Sun, 26 May 2024 20:39:29 +0900 Subject: [PATCH 13/25] =?UTF-8?q?feat:=20ProfileUser=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/profile-user/ui/ProfileUser.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/widgets/profile-user/ui/ProfileUser.tsx b/src/widgets/profile-user/ui/ProfileUser.tsx index 8440e93..76e38d5 100644 --- a/src/widgets/profile-user/ui/ProfileUser.tsx +++ b/src/widgets/profile-user/ui/ProfileUser.tsx @@ -17,14 +17,10 @@ export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => { return
스켈레톤 들어갈곳
; } - if (isError && !data) { + if (isError || !data) { return ; } - if (!data) { - return
데이터 없어용
; - } - const { profileImage, name, feedCount, followerCount, followingCount } = data.data.user; From 9ffbabf5d7c4679623c739560f2fe89fd60aa98f Mon Sep 17 00:00:00 2001 From: Legitgoons Date: Sun, 26 May 2024 22:43:22 +0900 Subject: [PATCH 14/25] =?UTF-8?q?feat:=20ProfileUser=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../profile-user/assets/profile-change-icon.svg | 12 ++++++++++++ src/widgets/profile-user/ui/ProfileUser.tsx | 3 ++- 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/widgets/profile-user/assets/profile-change-icon.svg diff --git a/src/widgets/profile-user/assets/profile-change-icon.svg b/src/widgets/profile-user/assets/profile-change-icon.svg new file mode 100644 index 0000000..906d0ba --- /dev/null +++ b/src/widgets/profile-user/assets/profile-change-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/widgets/profile-user/ui/ProfileUser.tsx b/src/widgets/profile-user/ui/ProfileUser.tsx index 76e38d5..6655575 100644 --- a/src/widgets/profile-user/ui/ProfileUser.tsx +++ b/src/widgets/profile-user/ui/ProfileUser.tsx @@ -1,6 +1,7 @@ import { Icon, NetworkError, PageHeader } from '@/shared/ui'; import { useGetUser } from '../api'; +import ProfileChangeIcon from '../assets/profile-change-icon.svg?react'; import { ProfileCount } from './ProfileCount'; import './ProfileUser.scss'; @@ -43,7 +44,7 @@ export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => { )} {isOwner && ( )}
From 21d195f9cc96215f8a743a313811fe33bad26f6d Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 16:11:58 +0900 Subject: [PATCH 15/25] =?UTF-8?q?feat:=20ProfileUserImage=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../profile-user/ui/ProfileUserImage.scss | 34 +++++++++++++++++ .../profile-user/ui/ProfileUserImage.tsx | 37 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 src/widgets/profile-user/ui/ProfileUserImage.scss create mode 100644 src/widgets/profile-user/ui/ProfileUserImage.tsx diff --git a/src/widgets/profile-user/ui/ProfileUserImage.scss b/src/widgets/profile-user/ui/ProfileUserImage.scss new file mode 100644 index 0000000..e688302 --- /dev/null +++ b/src/widgets/profile-user/ui/ProfileUserImage.scss @@ -0,0 +1,34 @@ +.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; + } +} diff --git a/src/widgets/profile-user/ui/ProfileUserImage.tsx b/src/widgets/profile-user/ui/ProfileUserImage.tsx new file mode 100644 index 0000000..84f0365 --- /dev/null +++ b/src/widgets/profile-user/ui/ProfileUserImage.tsx @@ -0,0 +1,37 @@ +import { Icon } from '@/shared/ui'; + +import ProfileChangeIcon from '../assets/profile-change-icon.svg?react'; +import './ProfileUserImage.scss'; + +interface ProfileUserImageProps { + profileImage: string; + name: string; + isOwner: boolean; +} + +export const ProfileUserImage = ({ + profileImage, + name, + isOwner, +}: ProfileUserImageProps) => { + return ( +
+ {profileImage ? ( + {`${name} + ) : ( +
+ +
+ )} + {isOwner && ( + + )} +
+ ); +}; From 4594567a7a9177533f7ed362c6061608c2275abc Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 16:12:51 +0900 Subject: [PATCH 16/25] =?UTF-8?q?feat:=20ProfileUser=EC=97=90=EC=84=9C=20P?= =?UTF-8?q?rofileUserImage=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/profile-user/ui/ProfileUser.scss | 35 -------------------- src/widgets/profile-user/ui/ProfileUser.tsx | 27 ++++----------- 2 files changed, 7 insertions(+), 55 deletions(-) diff --git a/src/widgets/profile-user/ui/ProfileUser.scss b/src/widgets/profile-user/ui/ProfileUser.scss index e0dafcc..5a711ac 100644 --- a/src/widgets/profile-user/ui/ProfileUser.scss +++ b/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; diff --git a/src/widgets/profile-user/ui/ProfileUser.tsx b/src/widgets/profile-user/ui/ProfileUser.tsx index 6655575..6835105 100644 --- a/src/widgets/profile-user/ui/ProfileUser.tsx +++ b/src/widgets/profile-user/ui/ProfileUser.tsx @@ -1,10 +1,10 @@ -import { Icon, NetworkError, PageHeader } from '@/shared/ui'; +import { NetworkError, PageHeader } from '@/shared/ui'; import { useGetUser } from '../api'; -import ProfileChangeIcon from '../assets/profile-change-icon.svg?react'; import { ProfileCount } from './ProfileCount'; import './ProfileUser.scss'; +import { ProfileUserImage } from './ProfileUserImage'; interface ProfileUserProps { userId: number; @@ -30,24 +30,11 @@ export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => {
-
- {profileImage ? ( - {`${name} - ) : ( -
- -
- )} - {isOwner && ( - - )} -
+

{name}

{isOwner ? ( From 4efb10c4e0c34834fa34f9412a0e53a6c2397637 Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 16:13:36 +0900 Subject: [PATCH 17/25] =?UTF-8?q?refactor:=20ProfileMainPage=20=EB=B6=84?= =?UTF-8?q?=EA=B8=B0=EC=B2=98=EB=A6=AC=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/profile/ui/ProfileMainPage.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/pages/profile/ui/ProfileMainPage.tsx b/src/pages/profile/ui/ProfileMainPage.tsx index 9a9d6bc..8d5e79c 100644 --- a/src/pages/profile/ui/ProfileMainPage.tsx +++ b/src/pages/profile/ui/ProfileMainPage.tsx @@ -11,18 +11,11 @@ export const ProfileMainPage = () => { const { userId } = useParams<{ userId: string }>(); const formattedUserId = Number(userId); - if (formattedUserId === 1) { - return ( -
- - -
- ); - } + const owner = formattedUserId === 1 ? true : false; return (
- +
); From 85124160f159279cc63c171c170f82f37e4ecd9d Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:49:12 +0900 Subject: [PATCH 18/25] =?UTF-8?q?feat:=20shared/ProfileImage=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/profile/ProfileImage.scss | 23 +++++++++++++++++++++++ src/shared/ui/profile/ProfileImage.tsx | 22 ++++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 src/shared/ui/profile/ProfileImage.scss create mode 100644 src/shared/ui/profile/ProfileImage.tsx diff --git a/src/shared/ui/profile/ProfileImage.scss b/src/shared/ui/profile/ProfileImage.scss new file mode 100644 index 0000000..9439685 --- /dev/null +++ b/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; + } +} diff --git a/src/shared/ui/profile/ProfileImage.tsx b/src/shared/ui/profile/ProfileImage.tsx new file mode 100644 index 0000000..828155a --- /dev/null +++ b/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 ? ( + {`${name} + ) : ( +
+ +
+ ); +}; +export default ProfileImage; From b70eef20692ab161b60f7df8797ed83ea48d9030 Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:50:30 +0900 Subject: [PATCH 19/25] =?UTF-8?q?feat:=20shared/Profile=20ProfileImage?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=8F=20isLink=20prop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/profile/Profile.scss | 24 ------------------------ src/shared/ui/profile/Profile.tsx | 28 ++++++++++++---------------- 2 files changed, 12 insertions(+), 40 deletions(-) diff --git a/src/shared/ui/profile/Profile.scss b/src/shared/ui/profile/Profile.scss index 2e110ab..b49cdfc 100644 --- a/src/shared/ui/profile/Profile.scss +++ b/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; diff --git a/src/shared/ui/profile/Profile.tsx b/src/shared/ui/profile/Profile.tsx index b9a8ad0..57264a3 100644 --- a/src/shared/ui/profile/Profile.tsx +++ b/src/shared/ui/profile/Profile.tsx @@ -1,36 +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; - linkedUserId?: number; + userId: number; + isLink: boolean; } export const Profile = ({ profileImage, name, content, - linkedUserId, + userId, + isLink, }: ProfileProps) => { return (
- - {profileImage ? ( - {`${name} - ) : ( -
- -
- )} - + {isLink ? ( + + + + ) : ( + + )}
{name}

{content}

From eb8b9442b060eefdae4e0cd0e20041f5e846c14b Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:51:06 +0900 Subject: [PATCH 20/25] =?UTF-8?q?feat:=20Feed=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20isLink=20prop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/feed-main-list/ui/Feed.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/widgets/feed-main-list/ui/Feed.tsx b/src/widgets/feed-main-list/ui/Feed.tsx index 6cb4c78..8c82b80 100644 --- a/src/widgets/feed-main-list/ui/Feed.tsx +++ b/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,7 +32,8 @@ export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => { profileImage={user.profileImage} name={user.name} content={calculateElapsedTime(updatedAt)} - linkedUserId={user.id} + userId={user.id} + isLink={isLink} /> From 4531af24adc9a7879e5e2a80d86e32629f8eaad8 Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:52:03 +0900 Subject: [PATCH 21/25] =?UTF-8?q?feat:=20FeedMainList=20=EB=82=B4=EB=B6=80?= =?UTF-8?q?=20Feed=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20isLin?= =?UTF-8?q?k=20prop=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/feed-main-list/ui/FeedMainList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx index f716db9..08e88f7 100644 --- a/src/widgets/feed-main-list/ui/FeedMainList.tsx +++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx @@ -39,7 +39,7 @@ export const FeedMainList = () => { return hiddenType ? ( ) : ( - + ); }); })} From f5cbb5da67da4cef45388008eab044cdb504518a Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:52:24 +0900 Subject: [PATCH 22/25] =?UTF-8?q?feat:=20ProfileFeedList=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=20Feed=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EC=97=90=20isLink=20prop=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/profile-feed-list/ui/ProfileFeedList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/profile-feed-list/ui/ProfileFeedList.tsx b/src/widgets/profile-feed-list/ui/ProfileFeedList.tsx index eed3991..8ae1fe7 100644 --- a/src/widgets/profile-feed-list/ui/ProfileFeedList.tsx +++ b/src/widgets/profile-feed-list/ui/ProfileFeedList.tsx @@ -60,7 +60,7 @@ export const ProfileFeedList = () => {

내 게시글

{dummyFeeds.map((dummyFeed) => (
- +
))}
From f98f6bf383a8d1c6808fa323aab2086f53f19330 Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:53:21 +0900 Subject: [PATCH 23/25] =?UTF-8?q?feat:=20ProfileUserImage=20=EB=82=B4=20No?= =?UTF-8?q?ProfileIcon=20SVG=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../profile-user/assets/no-profile-icon.svg | 17 +++++++++++++++++ .../profile-user/ui/ProfileUserImage.scss | 5 +++-- .../profile-user/ui/ProfileUserImage.tsx | 5 ++--- 3 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 src/widgets/profile-user/assets/no-profile-icon.svg diff --git a/src/widgets/profile-user/assets/no-profile-icon.svg b/src/widgets/profile-user/assets/no-profile-icon.svg new file mode 100644 index 0000000..89594f9 --- /dev/null +++ b/src/widgets/profile-user/assets/no-profile-icon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/widgets/profile-user/ui/ProfileUserImage.scss b/src/widgets/profile-user/ui/ProfileUserImage.scss index e688302..e86dc87 100644 --- a/src/widgets/profile-user/ui/ProfileUserImage.scss +++ b/src/widgets/profile-user/ui/ProfileUserImage.scss @@ -25,9 +25,10 @@ } .profile-change-btn { + z-index: 10; position: absolute; - bottom: 4px; - right: -8px; + top: 47px; + left: 62px; width: 24px; height: 24px; } diff --git a/src/widgets/profile-user/ui/ProfileUserImage.tsx b/src/widgets/profile-user/ui/ProfileUserImage.tsx index 84f0365..37cc630 100644 --- a/src/widgets/profile-user/ui/ProfileUserImage.tsx +++ b/src/widgets/profile-user/ui/ProfileUserImage.tsx @@ -1,5 +1,4 @@ -import { Icon } from '@/shared/ui'; - +import NoProfileIcon from '../assets/no-profile-icon.svg?react'; import ProfileChangeIcon from '../assets/profile-change-icon.svg?react'; import './ProfileUserImage.scss'; @@ -24,7 +23,7 @@ export const ProfileUserImage = ({ /> ) : (
- +
)} {isOwner && ( From 6a734f9c7880aaa0651a99412391e19e0cb710ea Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:54:23 +0900 Subject: [PATCH 24/25] =?UTF-8?q?feat:=20useGetUser=20enalbed=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 자신의 PK값은 iOS에서 가져오고, 상대 user의 경우에는 Link로 이동하면서 props로 받기에 필요 없음 --- src/widgets/profile-user/api/useGetUser.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/widgets/profile-user/api/useGetUser.ts b/src/widgets/profile-user/api/useGetUser.ts index 10091dc..825e1ef 100644 --- a/src/widgets/profile-user/api/useGetUser.ts +++ b/src/widgets/profile-user/api/useGetUser.ts @@ -18,7 +18,6 @@ export const useGetUser = (userId: number) => { } = useQuery({ queryKey: [QUERY_KEYS.users, userId], queryFn: () => fetchUser(userId), - enabled: !!userId, }); return { From fe4a12c2c610270cd0d3c9f62158e17240050018 Mon Sep 17 00:00:00 2001 From: Uichan Lee Date: Wed, 29 May 2024 18:56:06 +0900 Subject: [PATCH 25/25] =?UTF-8?q?feat:=20ProfileMainPage=20=EB=82=B4=20Pro?= =?UTF-8?q?fileFeedList=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit api 구현 후 연결 예정 --- src/pages/profile/ui/ProfileMainPage.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/profile/ui/ProfileMainPage.tsx b/src/pages/profile/ui/ProfileMainPage.tsx index 8d5e79c..f2d9b7d 100644 --- a/src/pages/profile/ui/ProfileMainPage.tsx +++ b/src/pages/profile/ui/ProfileMainPage.tsx @@ -1,10 +1,10 @@ import { useParams } from 'react-router-dom'; -import { ProfileFeedList } from '@/widgets/profile-feed-list'; import { ProfileUser } from '@/widgets/profile-user'; /** - * @todo userPK값 가져와서 본인인지 판별하도록 수정 + * @todo userPK값 가져와서 판별하도록 구현 + * @todo ProfileFeed Api 구현 후, ProfileFeedList 컴포넌트 연결 */ export const ProfileMainPage = () => { @@ -16,7 +16,6 @@ export const ProfileMainPage = () => { return (
-
); };