[Feature] 0127

src/components/Seller/SellerChat/ChatBottomSection.tsx

@@ -1,44 +1,60 @@
 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(false);
+  // 상담이 종료 요청했는지 여부
+  const [isEnd, setIsEnd] = useState(false);
+  const [text, setText] = useState('');
+
   return (
     <ChatBottomWrapper>
       <TopBarSection>
         <TopBar />
       </TopBarSection>
       <Space height="0.4rem" />
-      <GuideSection>
-        시작 전에도 메시지를 주고 받을 수 있어요. 시작 요청은 10분 간 유효하며,
-        셰어가 요청에 응한 후 30분간 상담이 진행되어요. 30분이 지나면 상담종료
-        버튼을 눌러 종료하세요.
-      </GuideSection>
-      <Space height="1.2rem" />
-      <ConsultStartButton
-        text="상담시작 요청하기"
-        width="calc(100% - 4rem)"
-        height="5.2rem"
-      />
-      <Space height="1.5rem" />
+      {isStart && (
+        <>
+          <GuideSection>
+            시작 전에도 메시지를 주고 받을 수 있어요. 시작 요청은 10분 간
+            유효하며, 셰어가 요청에 응한 후 30분간 상담이 진행되어요. 30분이
+            지나면 상담종료 버튼을 눌러 종료하세요.
+          </GuideSection>
+          <Space height="1.2rem" />
+          <ConsultStartButton
+            text={
+              isPostStart
+                ? '셰어가 시작 요청을 확인중이에요'
+                : '상담시작 요청하기'
+            }
+            isActive={!isPostStart}
+            width="calc(100% - 4rem)"
+            height="5.2rem"
+          />
+          <Space height="1.5rem" />
+        </>
+      )}
+
       <MessageSection>
         <MessageTextArea
+          value={text}
+          onChange={(e) => {
+            setText(e.target.value);
+          }}
           placeholder="메시지"
-          ref={textRef}
           rows={1}
           maxRows={4}
         />
-        <SendIcon />
+        <SendIconSVG fill={text.length > 0 ? Green : Grey3} />
       </MessageSection>
     </ChatBottomWrapper>
   );
@@ -97,6 +113,12 @@ const MessageSection = styled.div`
   gap: 0.8rem;
 `;
 
+const SendIconSVG = styled(SendIcon)`
+  cursor: pointer;
+  align-self: flex-end;
+  padding-bottom: 0.7rem;
+`;
+
 const MessageTextArea = styled(TextareaAutosize)`
   width: 100%;
   padding: 1.2rem 1.5rem;

src/components/Seller/SellerChat/ChatListSection.tsx

@@ -1,14 +1,60 @@
-import React from 'react'; 
+import { Space } from 'components/Common/Space';
+import React from 'react';
 import styled from 'styled-components';
-import { Grey6 } from 'styles/color';
+import { Grey6, LightGreen, White } from 'styles/color';
 
 function ChatListSection() {
-  return <ChatListWrapper>ChatListSection</ChatListWrapper>;
+  const chatList = [
+    '안녕하세요',
+    '너무 힘든 일이 었어서 이렇게 얘기할 수 있는 방법이 없어서 여기로 좀 상담 하고 싶어서요.',
+    '이성보다 감정이 깊으면 아닌걸 알면서도 계속 붙잡게 되고 힘들지만 만남을 이어가게 되겠죠. 생각 나는게 당연해요.',
+  ];
+  return (
+    <ChatListWrapper>
+      <ScrollContainer>
+        <ChatWhite>{chatList[0]}</ChatWhite>
+        <ChatWhite>{chatList[1]}</ChatWhite>
+        <ChatGreen>{chatList[0]}</ChatGreen>
+        <ChatWhite>{chatList[1]}</ChatWhite>
+        <ChatGreen>{chatList[2]}</ChatGreen>
+        <ChatGreen>{chatList[2]}</ChatGreen>
+        <ChatGreen>{chatList[2]}</ChatGreen>
+        <Space height="30rem" />
+      </ScrollContainer>
+    </ChatListWrapper>
+  );
 }
 
 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;

src/components/Seller/SellerConsult/SellerConsultSection.tsx

@@ -33,15 +33,16 @@ export const SellerConsultSection = () => {
   const fetchData = useCallback(async () => {
     const params = {
       filter: !isInclueCompleteConsult,
-      isCustomer: false,
       sortType: sortType === 0 ? 'latest' : 'unread',
     };
 
     let res: any;
     try {
       res = isLetterActive
         ? await getConselorLetters({ params })
-        : await getChatsMinder({ params });
+        : await getChatsMinder({
+            params,
+          });
       if (res.status === 200) {
         const data: ConsultInfoList = res.data;
         setConsultInfo(data);