feat: Improve UI/UX for the icebreaking page

app/koi-client/src/config/color.ts

@@ -9,3 +9,4 @@ export const colorDown = '#60A5FA';
 export const pastelGreen = '#BEF264';
 export const pastelViolet = '#c983ff';
 export const green = '#16A34A';
+export const BottomButtonBlue = '#007AFF';

app/koi-client/src/page/@party@[partyId]/component/Stock/component/Introduce.tsx

@@ -1,12 +1,13 @@
-import styled from '@emotion/styled';
-import { Button, Input, List } from 'antd';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useDebounce } from '@toss/react';
+import { List } from 'antd';
 import { useAtomValue } from 'jotai';
 import { useState } from 'react';
-import { useDebounce } from '@toss/react';
-import { useDisableScrollView } from '../../../hook/useDisableScrollView';
+import * as COLOR from '../../../../../config/color';
 import { Query } from '../../../../../hook';
 import { UserStore } from '../../../../../store';
+import { useDisableScrollView } from '../../../hook/useDisableScrollView';
 
 const rules = [
   {
@@ -74,7 +75,14 @@ export default function Introduce({ HeaderComponent = <></>, stockId }: Props) {
       <BodyContainer>
         <h2>💫 프로필카드 작성</h2>
         <List
-          css={css({ backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: '16px', width: '100%' })}
+          css={css({
+            '& .ant-list-item': {
+              borderBottom: '1px solid rgba(96, 96, 96, 0.5)',
+            },
+            backgroundColor: 'rgba(217,217,217,0.2)',
+            borderRadius: '16px',
+            width: '100%',
+          })}
           dataSource={rules}
           size="large"
           renderItem={(item) => (
@@ -86,24 +94,28 @@ export default function Introduce({ HeaderComponent = <></>, stockId }: Props) {
             </List.Item>
           )}
         />
-        <Input.TextArea rows={3} value={introduction} onChange={handleIntroductionChange} />
-        <Button
-          type="primary"
-          size="large"
-          block
-          onClick={async () => {
-            setUser({
-              stockId,
-              userId,
-              userInfo: {
-                ...user.userInfo,
-                introduction,
-              },
-            });
-          }}
-        >
-          저장하기
-        </Button>
+        <IntroduceArea
+          rows={3}
+          value={introduction}
+          onChange={handleIntroductionChange}
+          placeholder="프로필카드를 작성해보세요."
+        />
+        <StickyBottom>
+          <SaveButton
+            onClick={async () => {
+              setUser({
+                stockId,
+                userId,
+                userInfo: {
+                  ...user.userInfo,
+                  introduction,
+                },
+              });
+            }}
+          >
+            저장하기
+          </SaveButton>
+        </StickyBottom>
       </BodyContainer>
     </Container>
   );
@@ -116,6 +128,7 @@ const Container = styled.div`
   height: 100%;
   padding: 16px;
   box-sizing: border-box;
+  position: relative;
 `;
 
 const BodyContainer = styled.div`
@@ -127,3 +140,50 @@ const BodyContainer = styled.div`
   height: 100%;
   gap: 16px;
 `;
+
+const IntroduceArea = styled.textarea`
+  width: 100%;
+  height: 100px;
+  padding: 16px;
+  border-radius: 16px;
+  background-color: rgba(217, 217, 217, 0.2);
+  color: #ffffff;
+  font-size: 12px;
+  resize: none;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  border: 1px solid #616161;
+  font-family: 'DungGeunMo';
+`;
+
+const StickyBottom = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #252836;
+  border-top: 1px solid #374151;
+  padding: 20px;
+  box-sizing: border-box;
+`;
+
+const SaveButton = styled.button`
+  background-color: ${COLOR.BottomButtonBlue};
+  width: 100%;
+  font-family: 'DungGeunMo';
+  padding: 16px;
+  height: 56px;
+  border-radius: 4px;
+  color: white;
+  font-size: 14px;
+  border: none;
+  &:hover > span {
+    color: white;
+  }
+  &:disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+  cursor: pointer;
+`;

app/koi-client/src/page/@party@[partyId]/component/Stock/component/IntroduceResult.tsx

@@ -41,22 +41,59 @@ export default function IntroduceResult({ HeaderComponent = <></>, stockId }: Pr
       <BodyContainer>
         <h2>🔍 프로필 추리하기</h2>
         <List
-          css={css({ backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: '16px', width: '100%' })}
+          css={css({
+            backgroundColor: 'rgba(217,217,217,0.2)',
+            border: '1px solid rgba(96, 96, 96, 0.5)',
+            borderRadius: '8px',
+            width: '100%',
+          })}
           dataSource={rules}
           size="large"
           renderItem={(item) => (
             <List.Item>
               <List.Item.Meta
                 avatar={<>{item.emoji}</>}
-                title={<span css={css({ color: '#ffffff', wordBreak: 'keep-all' })}>{item.text}</span>}
+                title={
+                  <span css={css({ color: '#ffffff', fontSize: '16px', wordBreak: 'keep-all' })}>{item.text}</span>
+                }
               />
             </List.Item>
           )}
         />
-        <Card title="첫번째 프로필" css={css({ overflowWrap: 'break-word', width: '100%' })}>
+        <Card
+          title="🙋🏻‍ 첫번째 프로필"
+          css={css({
+            '& .ant-card-head': {
+              borderBottom: '1px solid rgba(96, 96, 96, 0.5)',
+              color: '#ffffff',
+            },
+            backgroundColor: 'rgba(217,217,217,0.2)',
+            border: '1px solid rgba(96, 96, 96, 0.5)',
+            color: '#ffffff',
+            minHeight: '230px',
+            overflowWrap: 'break-word',
+            width: '100%',
+          })}
+        >
+          <MatchingReason>📌 당신과 이름이 비슷해요!</MatchingReason>
           {userList?.[prevIndex]?.userInfo.introduction}
         </Card>
-        <Card title="두번째 프로필" css={css({ overflowWrap: 'break-word', width: '100%' })}>
+        <Card
+          title="🙋🏻‍ 두번째 프로필"
+          css={css({
+            '& .ant-card-head': {
+              borderBottom: '1px solid rgba(96, 96, 96, 0.5)',
+              color: '#ffffff',
+            },
+            backgroundColor: 'rgba(217,217,217,0.2)',
+            border: '1px solid rgba(96, 96, 96, 0.5)',
+            color: '#ffffff',
+            minHeight: '230px',
+            overflowWrap: 'break-word',
+            width: '100%',
+          })}
+        >
+          <MatchingReason>📌 당신과 비슷한 관심사를 가지고 있어요!</MatchingReason>
           {userList?.[nextIndex]?.userInfo.introduction}
         </Card>
       </BodyContainer>
@@ -76,9 +113,17 @@ const Container = styled.div`
 const BodyContainer = styled.div`
   display: flex;
   flex-direction: column;
-  /* justify-content: center; */
   align-items: center;
   width: 100%;
   height: 100%;
   gap: 16px;
 `;
+
+const MatchingReason = styled.p`
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffcc00;
+  margin-bottom: 8px;
+  margin-top: 0;
+`;