From 242a83c31f83116c1ed0aca2f5a18ebd058bb395 Mon Sep 17 00:00:00 2001 From: inyoung Date: Sat, 27 Jan 2024 00:02:36 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Feat:=20icon-send=20SVG=20current=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20#93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/icon-send.svg | 2 +- .../Seller/SellerChat/ChatBottomSection.tsx | 31 +++++++++++++------ 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/assets/icons/icon-send.svg b/src/assets/icons/icon-send.svg index 98ebd3b1..38984478 100644 --- a/src/assets/icons/icon-send.svg +++ b/src/assets/icons/icon-send.svg @@ -1,5 +1,5 @@ - + diff --git a/src/components/Seller/SellerChat/ChatBottomSection.tsx b/src/components/Seller/SellerChat/ChatBottomSection.tsx index 04709108..c6c67c3f 100644 --- a/src/components/Seller/SellerChat/ChatBottomSection.tsx +++ b/src/components/Seller/SellerChat/ChatBottomSection.tsx @@ -1,18 +1,19 @@ import { Button } from 'components/Common/Button'; import Input from 'components/Common/Input'; import { Space } from 'components/Common/Space'; -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import styled from 'styled-components'; -import { Grey3, Grey5, Grey6 } from 'styles/color'; +import { Green, Grey3, Grey5, Grey6 } from 'styles/color'; import { ReactComponent as SendIcon } from 'assets/icons/icon-send.svg'; import TextareaAutosize from 'react-textarea-autosize'; function ChatBottomSection() { - const textRef: any = useRef(null); - const handleTextHeight = () => { - textRef.current.style.height = 'auto'; - textRef.current.style.height = textRef.current.scrollHeight + 'px'; - }; + // 상담 시작 요청했는지여부 + const [isPostStart, setIsPostStart] = useState(true); + // 상담이 시작되었는지 (셰어가 시작 요청을 확인했는지) + const [isStart, setIsStart] = useState(true); + const [text, setText] = useState(''); + return ( @@ -26,19 +27,25 @@ function ChatBottomSection() { { + setText(e.target.value); + }} placeholder="메시지" - ref={textRef} rows={1} maxRows={4} /> - + 0 ? Green : Grey3} /> ); @@ -97,6 +104,10 @@ const MessageSection = styled.div` gap: 0.8rem; `; +const SendIconSVG = styled(SendIcon)` + cursor: pointer; +`; + const MessageTextArea = styled(TextareaAutosize)` width: 100%; padding: 1.2rem 1.5rem; From a90f49f0da00d0e3bd89b937811f9fc8cace0aba Mon Sep 17 00:00:00 2001 From: inyoung Date: Sat, 27 Jan 2024 00:50:41 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Feat:=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=BB=A8=ED=85=8C=EC=9D=B4?= =?UTF-8?q?=EB=84=88=20=EC=A0=9C=EC=9E=91=20#93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Seller/SellerChat/ChatBottomSection.tsx | 39 ++++++++------ .../Seller/SellerChat/ChatListSection.tsx | 54 +++++++++++++++++-- 2 files changed, 73 insertions(+), 20 deletions(-) diff --git a/src/components/Seller/SellerChat/ChatBottomSection.tsx b/src/components/Seller/SellerChat/ChatBottomSection.tsx index c6c67c3f..707f5f5f 100644 --- a/src/components/Seller/SellerChat/ChatBottomSection.tsx +++ b/src/components/Seller/SellerChat/ChatBottomSection.tsx @@ -11,7 +11,7 @@ function ChatBottomSection() { // 상담 시작 요청했는지여부 const [isPostStart, setIsPostStart] = useState(true); // 상담이 시작되었는지 (셰어가 시작 요청을 확인했는지) - const [isStart, setIsStart] = useState(true); + const [isStart, setIsStart] = useState(false); const [text, setText] = useState(''); return ( @@ -20,21 +20,28 @@ function ChatBottomSection() { - - 시작 전에도 메시지를 주고 받을 수 있어요. 시작 요청은 10분 간 유효하며, - 셰어가 요청에 응한 후 30분간 상담이 진행되어요. 30분이 지나면 상담종료 - 버튼을 눌러 종료하세요. - - - - + {isStart && ( + <> + + 시작 전에도 메시지를 주고 받을 수 있어요. 시작 요청은 10분 간 + 유효하며, 셰어가 요청에 응한 후 30분간 상담이 진행되어요. 30분이 + 지나면 상담종료 버튼을 눌러 종료하세요. + + + + + + )} + ChatListSection; + const chatList = [ + '안녕하세요', + '너무 힘든 일이 었어서 이렇게 얘기할 수 있는 방법이 없어서 여기로 좀 상담 하고 싶어서요.', + '이성보다 감정이 깊으면 아닌걸 알면서도 계속 붙잡게 되고 힘들지만 만남을 이어가게 되겠죠. 생각 나는게 당연해요.', + ]; + return ( + + + {chatList[0]} + {chatList[1]} + {chatList[0]} + {chatList[1]} + {chatList[2]} + {chatList[2]} + {chatList[2]} + + + + ); } const ChatListWrapper = styled.div` background: ${Grey6}; - height: 100vh; + padding: 0.8rem 2rem; + height: calc(100vh - 10rem); + overflow: scroll; +`; + +const ScrollContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; +`; + +const ChatWhite = styled.div` + background-color: ${White}; + padding: 1.2rem; + max-width: 27.5rem; + font-family: Pretendard; + align-self: flex-start; + font-size: 1.6rem; + font-style: normal; + font-weight: 400; + line-height: 150%; + border-radius: 0rem 1rem 1rem 1rem; +`; + +const ChatGreen = styled(ChatWhite)` + background-color: #c2f3f0; + align-self: flex-end; + border-radius: 1rem 0rem 1rem 1rem; `; export default ChatListSection; From 9e3a85635576922e03c8cff46390d2030cc263d8 Mon Sep 17 00:00:00 2001 From: inyoung Date: Sat, 27 Jan 2024 00:56:28 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Feat:=20=EC=B1=84=ED=8C=85=20UI=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EC=99=84=EC=84=B1=20#93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Seller/SellerChat/ChatBottomSection.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Seller/SellerChat/ChatBottomSection.tsx b/src/components/Seller/SellerChat/ChatBottomSection.tsx index 707f5f5f..3782932c 100644 --- a/src/components/Seller/SellerChat/ChatBottomSection.tsx +++ b/src/components/Seller/SellerChat/ChatBottomSection.tsx @@ -12,6 +12,8 @@ function ChatBottomSection() { const [isPostStart, setIsPostStart] = useState(true); // 상담이 시작되었는지 (셰어가 시작 요청을 확인했는지) const [isStart, setIsStart] = useState(false); + // 상담이 종료 요청했는지 여부 + const [isEnd, setIsEnd] = useState(false); const [text, setText] = useState(''); return ( @@ -113,6 +115,8 @@ const MessageSection = styled.div` const SendIconSVG = styled(SendIcon)` cursor: pointer; + align-self: flex-end; + padding-bottom: 0.7rem; `; const MessageTextArea = styled(TextareaAutosize)` From d718801dbeb715fbbee92823bee884a6175b4fe3 Mon Sep 17 00:00:00 2001 From: inyoung Date: Sat, 27 Jan 2024 10:57:51 +0900 Subject: [PATCH 4/4] Fix: api url revise --- src/components/Seller/SellerChat/ChatBottomSection.tsx | 2 +- src/components/Seller/SellerConsult/SellerConsultSection.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Seller/SellerChat/ChatBottomSection.tsx b/src/components/Seller/SellerChat/ChatBottomSection.tsx index 3782932c..b45fd495 100644 --- a/src/components/Seller/SellerChat/ChatBottomSection.tsx +++ b/src/components/Seller/SellerChat/ChatBottomSection.tsx @@ -15,7 +15,7 @@ function ChatBottomSection() { // 상담이 종료 요청했는지 여부 const [isEnd, setIsEnd] = useState(false); const [text, setText] = useState(''); - + return ( diff --git a/src/components/Seller/SellerConsult/SellerConsultSection.tsx b/src/components/Seller/SellerConsult/SellerConsultSection.tsx index 9d5ef16c..dd558f46 100644 --- a/src/components/Seller/SellerConsult/SellerConsultSection.tsx +++ b/src/components/Seller/SellerConsult/SellerConsultSection.tsx @@ -33,7 +33,6 @@ export const SellerConsultSection = () => { const fetchData = useCallback(async () => { const params = { filter: !isInclueCompleteConsult, - isCustomer: false, sortType: sortType === 0 ? 'latest' : 'unread', }; @@ -41,7 +40,9 @@ export const SellerConsultSection = () => { try { res = isLetterActive ? await getConselorLetters({ params }) - : await getChatsMinder({ params }); + : await getChatsMinder({ + params, + }); if (res.status === 200) { const data: ConsultInfoList = res.data; setConsultInfo(data);