From 98a794b6ed1042e38bec42365388fca8a6609bc2 Mon Sep 17 00:00:00 2001 From: inyoung Date: Fri, 26 Jan 2024 23:07:12 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Package:=20react-textarea-autosize=20?= =?UTF-8?q?=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 69 +++++++++++++++++++ package.json | 1 + .../Seller/SellerChat/ChatBottomSection.tsx | 30 +++++++- .../Seller/SellerChat/ChatListSection.tsx | 15 ++-- 4 files changed, 107 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 95a2ff31..6af047a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@types/jest": "^29.5.11", "@types/node": "^20.10.6", "@types/react": "^18.2.46", + "@types/sockjs-client": "^1.5.4", + "@types/stompjs": "^2.3.9", "axios": "^1.6.2", "cra-template-typescript": "1.2.0", "react": "^18.2.0", @@ -21,6 +23,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", + "react-textarea-autosize": "^8.5.3", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "styled-components": "^6.1.0", @@ -4586,11 +4589,24 @@ "@types/node": "*" } }, + "node_modules/@types/sockjs-client": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.5.4.tgz", + "integrity": "sha512-zk+uFZeWyvJ5ZFkLIwoGA/DfJ+pYzcZ8eH4H/EILCm2OBZyHH6Hkdna1/UWL/CFruh5wj6ES7g75SvUB0VsH5w==" + }, "node_modules/@types/stack-utils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stompjs": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/@types/stompjs/-/stompjs-2.3.9.tgz", + "integrity": "sha512-fu/GgkRdxwyEJ+JeUsGhDxGwmZQi+xeNElradGQ4ehWiG2z/o89gsi5Y7Gv0KC6VK1v78Cjh8zj3VF+RvqCGSA==", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", @@ -15092,6 +15108,22 @@ } } }, + "node_modules/react-textarea-autosize": { + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", + "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "use-composed-ref": "^1.3.0", + "use-latest": "^1.2.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -17349,6 +17381,43 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-composed-ref": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", + "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-latest": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz", + "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==", + "dependencies": { + "use-isomorphic-layout-effect": "^1.1.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 315b67a8..0564b86b 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", + "react-textarea-autosize": "^8.5.3", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "styled-components": "^6.1.0", diff --git a/src/components/Seller/SellerChat/ChatBottomSection.tsx b/src/components/Seller/SellerChat/ChatBottomSection.tsx index 7d7baafb..0baf42b2 100644 --- a/src/components/Seller/SellerChat/ChatBottomSection.tsx +++ b/src/components/Seller/SellerChat/ChatBottomSection.tsx @@ -1,11 +1,16 @@ import { Button } from 'components/Common/Button'; import Input from 'components/Common/Input'; import { Space } from 'components/Common/Space'; -import React from 'react'; +import React, { useRef } from 'react'; import styled from 'styled-components'; -import { Grey3, Grey5 } from 'styles/color'; +import { Grey3, Grey5, Grey6 } from 'styles/color'; import { ReactComponent as SendIcon } from 'assets/icons/icon-send.svg'; function ChatBottomSection() { + const textRef: any = useRef(null); + const handleTextHeight = () => { + textRef.current.style.height = 'auto'; + textRef.current.style.height = textRef.current.scrollHeight + 'px'; + }; return ( @@ -25,7 +30,7 @@ function ChatBottomSection() { /> - + @@ -84,4 +89,23 @@ const MessageSection = styled.div` align-items: center; gap: 0.8rem; `; + +const MessageTextArea = styled.textarea` + width: 100%; + padding: 1.2rem 1.5rem; + outline: none; + border: none; + resize: none; + border-radius: 1.2rem; + background-color: ${Grey6}; + font-family: Pretendard; + font-size: 1.6rem; + font-style: normal; + font-weight: 400; + line-height: 110%; /* 1.76rem */ + &:focus { + border: none; + outline: none; + } +`; export default ChatBottomSection; diff --git a/src/components/Seller/SellerChat/ChatListSection.tsx b/src/components/Seller/SellerChat/ChatListSection.tsx index 886a0535..a0e426c2 100644 --- a/src/components/Seller/SellerChat/ChatListSection.tsx +++ b/src/components/Seller/SellerChat/ChatListSection.tsx @@ -1,9 +1,14 @@ -import React from 'react' +import React from 'react'; +import styled from 'styled-components'; +import { Grey6 } from 'styles/color'; function ChatListSection() { - return ( -
ChatListSection
- ) + return ChatListSection; } -export default ChatListSection \ No newline at end of file +const ChatListWrapper = styled.div` + background: ${Grey6}; + height: 100vh; +`; + +export default ChatListSection; From 7fd410e15812d9641a16ee1b629f5382f44c0434 Mon Sep 17 00:00:00 2001 From: inyoung Date: Fri, 26 Jan 2024 23:17:28 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20textarea=204=EC=A4=84=EA=B9=8C?= =?UTF-8?q?=EC=A7=80=20=EA=B0=9C=ED=96=89=EB=AC=B8=EC=9E=90=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=EB=8A=98=EC=96=B4=EB=82=98=EA=B2=8C=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20#94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Seller/SellerChat/ChatBottomSection.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Seller/SellerChat/ChatBottomSection.tsx b/src/components/Seller/SellerChat/ChatBottomSection.tsx index 0baf42b2..04709108 100644 --- a/src/components/Seller/SellerChat/ChatBottomSection.tsx +++ b/src/components/Seller/SellerChat/ChatBottomSection.tsx @@ -5,6 +5,8 @@ import React, { useRef } from 'react'; import styled from 'styled-components'; import { 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 = () => { @@ -30,7 +32,12 @@ function ChatBottomSection() { /> - + @@ -44,10 +51,10 @@ const ChatBottomWrapper = styled.div` @media (min-width: 768px) { width: 37.5rem; } - height: 25.7rem; border-radius: 2rem 2rem 0rem 0rem; background-color: white; box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1); + padding-bottom: 3.2rem; position: fixed; bottom: 0; display: flex; @@ -90,7 +97,7 @@ const MessageSection = styled.div` gap: 0.8rem; `; -const MessageTextArea = styled.textarea` +const MessageTextArea = styled(TextareaAutosize)` width: 100%; padding: 1.2rem 1.5rem; outline: none;