Merge pull request #11 from chhw130/dev

feat : chatting Input 레이아웃 배치
potenday-project · Dec 13, 2023 · 5884cdc · 5884cdc
2 parents 8e3b3cb + 434cff9
commit 5884cdc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/component/card/ChattingRoom.tsx b/component/card/ChattingRoom.tsx
@@ -15,7 +15,19 @@ const ChattingRoom = () => {
         borderRadius={"12px 12px 0 0"}
         position={"absolute"}
         bottom={"0"}
-        overflow={"scroll"}
+        overflow={"hidden"}
+        overflowY={"scroll"}
+        css={{
+          "&::-webkit-scrollbar": {
+            width: "4px",
+          },
+          "&::-webkit-scrollbar-track": {
+            width: "6px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            borderRadius: "24px",
+          },
+        }}
         flexDir={"column"}
       >
         <VStack
@@ -46,6 +58,7 @@ const ChattingRoom = () => {
           alignItems={"flex-start"}
           spacing={"16px"}
           marginTop={"10px"}
+          paddingBottom={"80px"}
         >
           <ChattingMsgCard>반갑습니다 00님</ChattingMsgCard>
           <ChattingMsgCard>
@@ -57,6 +70,15 @@ const ChattingRoom = () => {
             </Text>
           </ChattingMsgCard>
 
+          <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard>
+          <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard>
+          <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard>
           <UserChattingMsgCard>
             아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
           </UserChattingMsgCard>

diff --git a/component/input/ChattingInput.tsx b/component/input/ChattingInput.tsx
@@ -6,10 +6,11 @@ const ChattingInput = () => {
   return (
     <>
       <Flex
-        position={"absolute"}
-        bottom={"10px"}
+        position={"fixed"}
+        bottom={"0px"}
+        bgColor={"white"}
         w={"100%"}
-        padding={"0 22px"}
+        padding={"10px 22px"}
         justifyContent={"space-between"}
         alignItems={"center"}
       >