[#161] 상세정보 반응형으로 수정 (#162)

* style: 공지사항/펀시스템 상세정보 반응형으로 변경 * style: 댓글 입력 반응형으로 수정
DaITssu · Jan 2, 2024 · 06fc5ce · 06fc5ce
1 parent d945950
commit 06fc5ce
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/common/Comment/CommentInput/CommentInput.styles.ts b/src/components/common/Comment/CommentInput/CommentInput.styles.ts
@@ -4,34 +4,38 @@ import styled from '@emotion/styled';
 
 export const MyCommentBox = styled.div`
   margin: auto;
-  width: 358px;
   height: 45px;
+  width: 90%;
 `;
 
 export const CommentFlexBox = styled.div`
   position: fixed;
   top: 90%;
   display: flex;
-  width: 358px;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  padding: 0 12px;
 `;
 
 export const MyLeftBox = styled.div`
   margin-right: auto;
+  width: 100%;
 `;
 
 export const MyRightBox = styled.div`
-  margin-left: auto;
+  margin-left: 10px;
 `;
 
 export const MyCommentLabel = styled.label`
   input {
     background-color: ${COLORS.grayscale.Gray4};
-    width: 293px;
     height: 45px;
     border-radius: 10px;
     border: none;
     padding-left: 10px;
     outline: none;
+    width: 100%;
   }
   input::placeholder {
     color: ${COLORS.grayscale.Gray1};

diff --git a/src/components/notice/info/NoticeInfo.style.ts b/src/components/notice/info/NoticeInfo.style.ts
@@ -3,7 +3,7 @@ import { COLORS } from '@/styles/constants/colors';
 import { TEXT_STYLES } from '@/styles/constants/textStyles';
 
 export const Container = styled.div`
-  width: 390px;
+  width: 100%;
   height: 100vh;
   background-color: ${COLORS.grayscale.white};
   hr {
@@ -113,6 +113,7 @@ export const ContentBox = styled.div`
   margin-top: 20px;
   margin-bottom: 40px;
   ${TEXT_STYLES.BodyR16};
+  word-break: break-all;
 `;
 
 export const FileBox = styled.div`