Merge pull request #433 from js43o/fix-mogaco-contents

[Fix] 모각코 상세 게시글 페이지 contents 줄바꿈 개선
boostcampwm2023 · Dec 12, 2023 · 86e5b49 · 86e5b49
2 parents 80f61e7 + 3ad0370
commit 86e5b49
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/app/frontend/src/components/Button/moreButton.css.ts b/app/frontend/src/components/Button/moreButton.css.ts
@@ -31,7 +31,7 @@ export const dropdown = style({
 export const dropdownButton = style([
   sansRegular16,
   {
-    padding: '1rem',
+    padding: '0.8rem',
     width: '100%',
     whiteSpace: 'nowrap',
 
@@ -57,7 +57,7 @@ export const dropdownItem = style({
 export const moreButton = style({
   display: 'flex',
   borderRadius: '50%',
-  padding: '1rem',
+  padding: '0.8rem',
 
   ':hover': {
     background: vars.color.grayscale50,

diff --git a/app/frontend/src/pages/MogacoDetail/index.css.ts b/app/frontend/src/pages/MogacoDetail/index.css.ts
@@ -1,7 +1,12 @@
 import { style } from '@vanilla-extract/css';
 
 import { vars } from '@/styles';
-import { sansBold16, sansBold24, sansRegular16 } from '@/styles/font.css';
+import {
+  sansBold16,
+  sansBold24,
+  sansRegular14,
+  sansRegular16,
+} from '@/styles/font.css';
 
 export const buttons = style({
   display: 'flex',
@@ -20,6 +25,13 @@ export const container = style([
   },
 ]);
 
+export const contents = style([
+  sansRegular14,
+  {
+    wordBreak: 'break-all',
+  },
+]);
+
 export const error = style([
   sansRegular16,
   {

diff --git a/app/frontend/src/pages/MogacoDetail/index.tsx b/app/frontend/src/pages/MogacoDetail/index.tsx
@@ -6,7 +6,6 @@ import { useQuery } from '@tanstack/react-query';
 import { ChattingSidebar, Divider, Error, Loading } from '@/components';
 import { queryKeys } from '@/queries';
 import { vars } from '@/styles';
-import { sansRegular14 } from '@/styles/font.css';
 
 import { DetailHeader } from './DetailHeader';
 import { DetailInfo } from './DetailInfo';
@@ -59,7 +58,7 @@ export function MogacoDetailPage() {
           latitude={mogacoData.latitude}
           longitude={mogacoData.longitude}
         />
-        <div className={sansRegular14}>{mogacoData.contents}</div>
+        <div className={styles.contents}>{mogacoData.contents}</div>
         <Divider />
       </div>
     </div>