💄 정보가 확인되지 않는 채팅 참여자를 위한 스타일 추가

boostcampwm2023 · Dec 10, 2023 · 5235841 · 5235841
1 parent 9e974da
commit 5235841
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx
@@ -74,8 +74,8 @@ export function ChatList({
         return chatItem.messageType === 'talk' ? (
           <MemorizedTalkItem
             key={chatItem.date.toString()}
-            nickname={participantInfo?.nickname || ''}
-            profilePicture={participantInfo?.profilePicture || ''}
+            nickname={participantInfo?.nickname}
+            profilePicture={participantInfo?.profilePicture}
             contents={chatItem.contents}
             date={chatItem.date}
             isMine={chatItem.user === userId}

diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/TalkItem.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/TalkItem.tsx
@@ -7,8 +7,8 @@ import { UserChip } from '@/components';
 import * as styles from './ChatItem.css';
 
 type TalkItemProps = {
-  nickname: string;
-  profilePicture: string;
+  nickname?: string;
+  profilePicture?: string;
   contents: string;
   date: Date;
   isMine: boolean;

diff --git a/app/frontend/src/components/UserChip/index.css.ts b/app/frontend/src/components/UserChip/index.css.ts
@@ -35,3 +35,7 @@ export const profileImage = style({
   borderRadius: '50%',
   overflow: 'hidden',
 });
+
+export const unknown = style({
+  color: vars.color.grayscale200,
+});
diff --git a/app/frontend/src/components/UserChip/index.tsx b/app/frontend/src/components/UserChip/index.tsx
@@ -4,7 +4,7 @@ import { vars } from '@/styles';
 import * as styles from './index.css';
 
 type UserChipProps = {
-  username: string;
+  username?: string;
   profileSrc?: string;
 };
 
@@ -22,7 +22,9 @@ export function UserChip({ username, profileSrc }: UserChipProps) {
           <Profile width={24} height={24} fill={vars.color.morakGreen} />
         )}
       </div>
-      <span className={styles.nickname}>{username}</span>
+      <span className={`${styles.nickname} ${!username && styles.unknown}`}>
+        {username || '(알 수 없음)'}
+      </span>
     </div>
   );
 }