From 1f2927abec58fd582477b85858adbe9b1357fb6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=98=81=20Jiyoung=20LEE?=
 <skfnxh1021@naver.com>
Date: Fri, 27 Sep 2024 14:47:53 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20CommentInput=20ui=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20(#11)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commentInput/CommentInput.styled.js       | 17 +++-
 frontend/src/components/comments/Comments.jsx | 88 +++++++++++++++++++
 .../comments/comment/Comment.styled.js        |  4 +-
 .../src/components/common/icon/ArrowIcon.jsx  |  4 +-
 frontend/src/pages/GamePage/GamePage.jsx      | 14 +--
 .../src/pages/GamePage/GamePage.styled.js     |  7 ++
 6 files changed, 120 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/commentInput/CommentInput.styled.js b/frontend/src/components/commentInput/CommentInput.styled.js
index 31c77c6..102f39a 100644
--- a/frontend/src/components/commentInput/CommentInput.styled.js
+++ b/frontend/src/components/commentInput/CommentInput.styled.js
@@ -2,14 +2,17 @@ import styled from 'styled-components';
 
 export const InputContainer = styled.div`
   display: flex;
-  margin-top: 24rem;
+  bottom: 4rem;
   align-items: center;
-  width: 100%;
+  width: 32%;
+  position: fixed;
 `;
 
 export const TextInput = styled.input`
-  width: 81%;
+  position: fixed;
+  width: 32%;
   height: 5.2rem;
+  border: 0.2rem solid ${(props) => props.theme.colors.gray400};
   border-radius: 1rem;
   font-size: 1.6rem;
   font-family: 'Pretendard-medium';
@@ -18,13 +21,19 @@ export const TextInput = styled.input`
 `;
 
 export const ButtonClick = styled.button`
+  position: fixed;
   width: 5.2rem;
   height: 5.2rem;
-  margin-left: 2rem;
+  border: 0.2rem solid ${(props) => props.theme.colors.gray400};
+  margin-left: 52.6rem;
   border-radius: 1rem;
   background-color: ${(props) =>
     props.isActive ? props.theme.colors.black : props.theme.colors.gray350};
 
+  svg {
+    stroke: ${(props) => (props.isActive ? 'white' : props.theme.colors.black)};
+  }
+
   ${(props) =>
     props.isActive &&
     `&:hover {
diff --git a/frontend/src/components/comments/Comments.jsx b/frontend/src/components/comments/Comments.jsx
index 5cc7423..b69e779 100644
--- a/frontend/src/components/comments/Comments.jsx
+++ b/frontend/src/components/comments/Comments.jsx
@@ -37,6 +37,94 @@ export default function Comments() {
         like="13"
         comment="인싸를 만나서 나만 만나는 아싸로 만들래"
       />
+      <Comment
+        isBest={true}
+        isTrash={false}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
+      <Comment
+        isBest={false}
+        isTrash={false}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
+      <Comment
+        isBest={true}
+        isTrash={true}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
+      <Comment
+        isBest={true}
+        isTrash={true}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
+      <Comment
+        isBest={true}
+        isTrash={true}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
+      <Comment
+        isBest={true}
+        isTrash={true}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
+      <Comment
+        isBest={true}
+        isTrash={true}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
+      <Comment
+        isBest={true}
+        isTrash={true}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
+        id="1"
+        nickname="이지영"
+        time="2분 전"
+        like="13"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
+      />
     </>
   );
 }
diff --git a/frontend/src/components/comments/comment/Comment.styled.js b/frontend/src/components/comments/comment/Comment.styled.js
index 627ac02..1a93060 100644
--- a/frontend/src/components/comments/comment/Comment.styled.js
+++ b/frontend/src/components/comments/comment/Comment.styled.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const CommentContainer = styled.div`
-  width: 50%;
+  width: 100%;
   background-color: ${(props) =>
     props.isBest ? props.theme.colors.gray150 : props.theme.colors.gray100};
   border-right: 0.1rem solid ${(props) => props.theme.colors.gray200};
@@ -9,7 +9,7 @@ export const CommentContainer = styled.div`
 `;
 
 export const CommentContainer2 = styled.div`
-  width: 50%;
+  width: 100%;
   background-color: ${(props) =>
     props.isBest ? props.theme.colors.gray150 : props.theme.colors.gray100};
   border-left: 0.1rem solid ${(props) => props.theme.colors.gray200};
diff --git a/frontend/src/components/common/icon/ArrowIcon.jsx b/frontend/src/components/common/icon/ArrowIcon.jsx
index a64c214..92319ea 100644
--- a/frontend/src/components/common/icon/ArrowIcon.jsx
+++ b/frontend/src/components/common/icon/ArrowIcon.jsx
@@ -1,7 +1,7 @@
 const ArrowIcon = () => (
   <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 3L8 17" stroke="white" strokeWidth="2" strokeLinecap="round" />
-    <path d="M1 9L8 2L15 9" stroke="white" strokeWidth="2" strokeLinecap="round" />
+    <path d="M8 3L8 17" stroke="current" strokeWidth="2" strokeLinecap="round" />
+    <path d="M1 9L8 2L15 9" stroke="current" strokeWidth="2" strokeLinecap="round" />
   </svg>
 );
 
diff --git a/frontend/src/pages/GamePage/GamePage.jsx b/frontend/src/pages/GamePage/GamePage.jsx
index 1670c37..3a5819a 100644
--- a/frontend/src/pages/GamePage/GamePage.jsx
+++ b/frontend/src/pages/GamePage/GamePage.jsx
@@ -21,12 +21,14 @@ export default function GamePage() {
     <>
       <Choice game={gameData} />
       <S.Container>
-        <Comments />
-        <Comments />
-      </S.Container>
-      <S.Container>
-        <CommentInput />
-        <CommentInput />
+        <S.SmallContainer>
+          <CommentInput />
+          <Comments />
+        </S.SmallContainer>
+        <S.SmallContainer>
+          <CommentInput />
+          <Comments />
+        </S.SmallContainer>
       </S.Container>
     </>
   );
diff --git a/frontend/src/pages/GamePage/GamePage.styled.js b/frontend/src/pages/GamePage/GamePage.styled.js
index 45891ac..913cb2b 100644
--- a/frontend/src/pages/GamePage/GamePage.styled.js
+++ b/frontend/src/pages/GamePage/GamePage.styled.js
@@ -4,3 +4,10 @@ export const Container = styled.div`
   display: flex;
   width: 100%;
 `;
+
+export const SmallContainer = styled.div`
+  width: 100%;
+  /* height: 31rem; */
+  overflow: hidden;
+  /* border: 1px solid red; */
+`;