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; */
+`;