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="인싸를 만나서 나만 만나는 아싸로 만들래" /> + + + + + + + + ); } 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 = () => ( - - + + ); 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() { <> - - - - - - + + + + + + + + ); 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; */ +`;