diff --git a/app/koi-client/src/config/color.ts b/app/koi-client/src/config/color.ts
index ec62e643..919fca42 100644
--- a/app/koi-client/src/config/color.ts
+++ b/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';
diff --git a/app/koi-client/src/page/@party@[partyId]/component/Stock/component/Introduce.tsx b/app/koi-client/src/page/@party@[partyId]/component/Stock/component/Introduce.tsx
index 16384392..6d58dc1e 100644
--- a/app/koi-client/src/page/@party@[partyId]/component/Stock/component/Introduce.tsx
+++ b/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) {
π« νλ‘νμΉ΄λ μμ±
(
@@ -86,24 +94,28 @@ export default function Introduce({ HeaderComponent = <>>, stockId }: Props) {
)}
/>
-
-
+
+
+ {
+ setUser({
+ stockId,
+ userId,
+ userInfo: {
+ ...user.userInfo,
+ introduction,
+ },
+ });
+ }}
+ >
+ μ μ₯νκΈ°
+
+
);
@@ -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;
+`;
diff --git a/app/koi-client/src/page/@party@[partyId]/component/Stock/component/IntroduceResult.tsx b/app/koi-client/src/page/@party@[partyId]/component/Stock/component/IntroduceResult.tsx
index c0a6b5fb..95d27672 100644
--- a/app/koi-client/src/page/@party@[partyId]/component/Stock/component/IntroduceResult.tsx
+++ b/app/koi-client/src/page/@party@[partyId]/component/Stock/component/IntroduceResult.tsx
@@ -41,22 +41,59 @@ export default function IntroduceResult({ HeaderComponent = <>>, stockId }: Pr
π νλ‘ν μΆλ¦¬νκΈ°
(
{item.emoji}>}
- title={{item.text}}
+ title={
+ {item.text}
+ }
/>
)}
/>
-
+
+ π λΉμ κ³Ό μ΄λ¦μ΄ λΉμ·ν΄μ!
{userList?.[prevIndex]?.userInfo.introduction}
-
+
+ π λΉμ κ³Ό λΉμ·ν κ΄μ¬μ¬λ₯Ό κ°μ§κ³ μμ΄μ!
{userList?.[nextIndex]?.userInfo.introduction}
@@ -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;
+`;