Merge pull request #206 from DevKor-github/feat/#202/chat-pick

feat: 채팅방에 pick 버튼 추가

Author: jw0202058

src/features/chatRoom/components/ChatRoomLayout/ChatRoomHeader/index.tsx

@@ -2,29 +2,45 @@ import { useNavigate } from 'react-router';
 import * as s from './style.css';
 import SchoolVerifiedTag from '@/common/components/SchoolVerifiedTag';
 import { UserProfileImage } from '@/common/components/UserProfileImage';
-import type { ChatRoomInterface } from '@/features/chatRoom/types';
+import type { ChatRoomInterface, CurrentAppointmentInterface } from '@/features/chatRoom/types';
+import RepickaLogo from '@/libs/assets/RepickaLogo';
 
 export interface Props {
-  data: ChatRoomInterface;
+  chatRoomData: ChatRoomInterface;
+  appointmentData: CurrentAppointmentInterface;
 }
 
-const ChatRoomHeader = ({ data }: Props) => {
+const ChatRoomHeader = ({ appointmentData, chatRoomData }: Props) => {
   const navigate = useNavigate();
   const goBack = () => navigate(-1);
 
-  const nickname = data.opponentNickname;
-  const isOpponentKorean = data.isOpponentKorean;
+  const nickname = chatRoomData.opponentNickname;
+  const isOpponentKorean = chatRoomData.isOpponentKorean;
+  const profileImg = chatRoomData.opponentProfileImageUrl;
+  const isPicked = appointmentData.isPresent;
+
+  const onClick = () => {
+    if (isPicked) navigate(`/pick-detail/${appointmentData.appointment.appointmentId}`);
+  };
 
   return (
-    <header className={s.Container}>
-      <button className={`mgc_left_fill ${s.BackBtn}`} onClick={goBack}></button>
-      <div className={s.UserInfo}>
-        <UserProfileImage nickname={data.opponentNickname} src={data.opponentProfileImageUrl} />
-        <div className={s.Verifiy}>
-          {isOpponentKorean && <SchoolVerifiedTag />}
-          <span>{nickname}</span>
+    <header className={s.Wrapper}>
+      <div className={s.Container}>
+        <button className={`mgc_left_fill ${s.BackBtn}`} onClick={goBack}></button>
+        <div className={s.UserInfo}>
+          <UserProfileImage nickname={nickname} src={profileImg} />
+          <div className={s.Verifiy}>
+            {isOpponentKorean && <SchoolVerifiedTag />}
+            <span>{nickname}</span>
+          </div>
         </div>
       </div>
+      <button className={s.Pick({ isPicked })} onClick={onClick}>
+        <div className={s.Logo({ isPicked })}>
+          <RepickaLogo />
+        </div>
+        PICK
+      </button>
     </header>
   );
 };

src/features/chatRoom/components/ChatRoomLayout/ChatRoomHeader/style.css.ts

@@ -1,4 +1,11 @@
-import { css } from '@styled-system/css';
+import { css, cva } from '@styled-system/css';
+
+export const Wrapper = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingRight: '1rem',
+});
 
 export const Container = css({
   display: 'flex',
@@ -10,6 +17,51 @@ export const Container = css({
   flexShrink: 0,
 });
 
+export const Pick = cva({
+  base: {
+    display: 'flex',
+    p: '0.5rem',
+    alignItems: 'center',
+    gap: '0.375rem',
+    borderRadius: '6.25rem',
+    bg: 'systemGray5',
+
+    fontFamily: 'Pretendard',
+    fontSize: '0.75rem',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 'normal',
+    letterSpacing: '-0.03rem',
+  },
+  variants: {
+    isPicked: {
+      true: {
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'systemGray4',
+        color: 'main',
+      },
+      false: {
+        color: '20',
+      },
+    },
+  },
+});
+
+export const Logo = cva({
+  base: {
+    width: '1rem',
+    aspectRatio: '1/1',
+  },
+  variants: {
+    isPicked: {
+      false: {
+        opacity: 0.2,
+      },
+    },
+  },
+});
+
 export const UserInfo = css({
   display: 'flex',
   gap: '0.875rem',

src/pages/ChatRoomPage/index.tsx

@@ -23,7 +23,7 @@ const ChatRoomPage = () => {
   return (
     <SafeArea>
       <div className={s.entireLayout}>
-        <ChatRoomHeader data={chatRoomInfo.chatRoom} />
+        <ChatRoomHeader appointmentData={chatRoomInfo.currentAppointment} chatRoomData={chatRoomInfo.chatRoom} />
         <ItemInfo data={chatRoomInfo.item} />
         <ChatRoomContent data={chatRoomInfo.chatRoom} />
         <ChatRoomFooter data={chatRoomInfo.chatRoom} />