🛠️ 유저 이름 / 닉네임 분리 (#91)

* feat: User interface에 username 추가 * feat: feed에서 username 사용하도록 수정 * feat: Profile에서 username 사용하도록 수정 Closes #91
CollaBu · Jun 5, 2024 · 915f9ed · 915f9ed
1 parent 9c5d149
commit 915f9ed
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 39 deletions.
diff --git a/src/app/mocks/consts/likeUser.ts b/src/app/mocks/consts/likeUser.ts
@@ -7,49 +7,54 @@ interface Users {
 export const likeUsers: Users = {
   1: {
     id: 2,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: '',
     name: '이의찬',
-    content: 'Legitgoons',
+    username: 'Legitgoons',
+    content: '취업하고싶당',
     locked: false,
     feedCount: 124,
     followingCount: 2,
     followerCount: 5341,
   },
   2: {
     id: 3,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: '',
     name: '양재서',
-    content: 'psychology50',
+    username: 'psychology50',
+    content: 'IMPM',
     locked: true,
     feedCount: 6,
     followingCount: 35,
     followerCount: 423,
   },
   3: {
     id: 5,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '신얀',
-    content: 'yanni13',
+    username: 'yanni13',
+    content: 'imiOSDev',
     locked: true,
     feedCount: 51,
     followingCount: 7897,
     followerCount: 7890,
   },
   4: {
     id: 4,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '이수민',
-    content: 'SSXXMM22',
+    username: 'SSXXMM22',
+    content: 'imdesigner',
     locked: true,
     feedCount: 24,
     followingCount: 42,
     followerCount: 53251,
   },
   5: {
     id: 7,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '안성윤',
-    content: 'asn6878',
+    username: 'asn6878',
+    content: 'imbackend',
     locked: true,
     feedCount: 87,
     followingCount: 67,

diff --git a/src/app/mocks/consts/user.ts b/src/app/mocks/consts/user.ts
@@ -9,7 +9,8 @@ export const users: Users = {
     id: 1,
     profileImage: '',
     name: '강병준',
-    content: 'bangdori',
+    username: 'bangdori',
+    content: '스타트업으로 갑니당',
     locked: false,
     feedCount: 100,
     followingCount: 347,
@@ -19,7 +20,8 @@ export const users: Users = {
     id: 2,
     profileImage: '',
     name: '이의찬',
-    content: 'Legitgoons',
+    username: 'Legitgoons',
+    content: '취업하고싶당',
     locked: false,
     feedCount: 124,
     followingCount: 2,
@@ -29,7 +31,8 @@ export const users: Users = {
     id: 3,
     profileImage: '',
     name: '양재서',
-    content: 'psychology50',
+    username: '오늘도밤샘',
+    content: 'IMPM',
     locked: true,
     feedCount: 6,
     followingCount: 35,
@@ -39,7 +42,8 @@ export const users: Users = {
     id: 4,
     profileImage: 'https://picsum.photos/32/32',
     name: '이수민',
-    content: 'SSXXMM22',
+    username: 'SSXXMM22',
+    content: 'imdesigner',
     locked: true,
     feedCount: 24,
     followingCount: 42,
@@ -49,7 +53,8 @@ export const users: Users = {
     id: 5,
     profileImage: 'https://picsum.photos/32/32',
     name: '신얀',
-    content: 'yanni13',
+    username: 'yanni13',
+    content: 'imiOSDev',
     locked: true,
     feedCount: 51,
     followingCount: 7897,
@@ -59,7 +64,8 @@ export const users: Users = {
     id: 6,
     profileImage: 'https://picsum.photos/32/32',
     name: '이주원',
-    content: '2weeksone',
+    username: '2weeksone',
+    content: 'imdesignertoo',
     locked: false,
     feedCount: 97,
     followingCount: 98,
@@ -69,7 +75,8 @@ export const users: Users = {
     id: 7,
     profileImage: 'https://picsum.photos/32/32',
     name: '안성윤',
-    content: 'asn6878',
+    username: 'asn6878',
+    content: 'imbackend',
     locked: true,
     feedCount: 87,
     followingCount: 67,
@@ -79,7 +86,8 @@ export const users: Users = {
     id: 8,
     profileImage: 'https://picsum.photos/32/32',
     name: '이진우',
-    content: 'jinlee1703',
+    username: '네이버맨',
+    content: 'imbackendtoo',
     locked: false,
     feedCount: 32,
     followingCount: 24,
@@ -89,7 +97,8 @@ export const users: Users = {
     id: 9,
     profileImage: 'https://picsum.photos/32/32',
     name: '최희진',
-    content: 'heejinnn',
+    username: '부자가될거야',
+    content: 'iLoveNewjeans',
     locked: false,
     feedCount: 66,
     followingCount: 1,

diff --git a/src/shared/consts/types/feed.ts b/src/shared/consts/types/feed.ts
@@ -18,7 +18,7 @@ export interface FetchFeeds {
 
 export interface Feed {
   id: number;
-  user: Pick<User, 'id' | 'profileImage' | 'name'>;
+  user: Pick<User, 'id' | 'profileImage' | 'username'>;
 
   content: string;
   images: Image[];

diff --git a/src/shared/consts/types/user.ts b/src/shared/consts/types/user.ts
@@ -2,6 +2,7 @@ export interface User {
   id: number;
   profileImage: string;
   name: string;
+  username: string;
   content: string;
   locked: boolean;
 
@@ -13,17 +14,7 @@ export interface User {
 export interface FetchUser {
   code: string;
   data: {
-    user: {
-      id: number;
-      profileImage: string;
-      name: string;
-      content: string;
-      locked: boolean;
-
-      feedCount: number;
-      followingCount: number;
-      followerCount: number;
-    };
+    user: User;
   };
 }
 

diff --git a/src/widgets/feed-main-list/ui/Feed.tsx b/src/widgets/feed-main-list/ui/Feed.tsx
@@ -30,7 +30,7 @@ export const Feed: React.FC<{ isLink: boolean; feed: FeedProps }> = ({
         <header className='feed-header'>
           <Profile
             profileImage={user.profileImage}
-            name={user.name}
+            name={user.username}
             content={calculateElapsedTime(updatedAt)}
             userId={user.id}
             isLink={isLink}

diff --git a/src/widgets/profile-feed-list/ui/ProfileFeedList.tsx b/src/widgets/profile-feed-list/ui/ProfileFeedList.tsx
@@ -8,7 +8,7 @@ const dummyFeeds: FeedProps[] = [
     id: 1,
     user: {
       id: 1,
-      name: '김붕어빵',
+      username: '김붕어빵',
       profileImage: '',
     },
     createdAt: '1분 전',
@@ -24,7 +24,7 @@ const dummyFeeds: FeedProps[] = [
     id: 2,
     user: {
       id: 1,
-      name: '김붕어빵',
+      username: '김붕어빵',
       profileImage: '',
     },
     createdAt: '1분 전',
@@ -40,7 +40,7 @@ const dummyFeeds: FeedProps[] = [
     id: 3,
     user: {
       id: 1,
-      name: '김붕어빵',
+      username: '김붕어빵',
       profileImage: '',
     },
     createdAt: '1분 전',

diff --git a/src/widgets/profile-user/ui/ProfileUser.tsx b/src/widgets/profile-user/ui/ProfileUser.tsx
@@ -28,8 +28,14 @@ export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => {
     return <NetworkError refetch={refetchUser} />;
   }
 
-  const { profileImage, name, feedCount, followerCount, followingCount } =
-    data.data.user;
+  const {
+    profileImage,
+    name,
+    username,
+    feedCount,
+    followerCount,
+    followingCount,
+  } = data.data.user;
 
   return (
     <>
@@ -38,10 +44,10 @@ export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => {
         <section className='profile-top-container'>
           <ProfileUserImage
             profileImage={profileImage}
-            name={name}
+            name={username}
             isOwner={isOwner}
           />
-          <h3 className='user-name h3semi'>{name}</h3>
+          <h3 className='user-name h3semi'>{username}</h3>
           {isOwner ? (
             <button className='nickname-change-btn b2md'>닉네임 수정</button>
           ) : (