feat : CommentInput ui수정 (#11)

Ureca-miniproject2 · Sep 27, 2024 · 1f2927a · 1f2927a
1 parent b3979b9
commit 1f2927a
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 14 deletions.
diff --git 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
@@ -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
@@ -1,15 +1,15 @@
 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};
   padding: 2.5rem;
 `;
 
 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
@@ -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
@@ -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
@@ -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; */
+`;