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; +`;