Merge pull request #1105 from peer-42seoul/revert-1099-1049-107-desig…

…n-default-font-size Revert "[1.0.7 / DESIGN] 폰트 크기 조정"
peer-42seoul · Mar 11, 2024 · ba9fc6c · ba9fc6c
2 parents 3ab833d + d178fc1
commit ba9fc6c
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 75 deletions.
diff --git a/src/app/recruit/[id]/panel/RecruitContentText.tsx b/src/app/recruit/[id]/panel/RecruitContentText.tsx
@@ -20,12 +20,12 @@ const RecruitContentText = ({
       >
         {icon}
       </Stack>
-      <Typography color={'text.strong'} variant="Body2Emphasis">
+      <Typography color={'text.strong'} variant="CaptionEmphasis">
         {label}
       </Typography>
     </Stack>
     {content && (
-      <Typography variant={'Body1'} color={'text.alternative'}>
+      <Typography variant={'Body2'} color={'text.alternative'}>
         {content}
       </Typography>
     )}

diff --git a/src/app/showcase/detail/[id]/panel/CommentContainer.tsx b/src/app/showcase/detail/[id]/panel/CommentContainer.tsx
@@ -75,6 +75,7 @@ const Comment = ({ data, postId }: CommentProps) => {
       <Stack sx={style.commentListContainer}>
         <Box>
           <Box sx={style.commenterInfo}>
+            {/* TODO : OthersProfile 컴포넌트로 감싸기 */}
             <OthersProfile
               userId={data.authorId.toString()}
               name={data.authorNickname}
@@ -85,14 +86,14 @@ const Comment = ({ data, postId }: CommentProps) => {
                 sx={style.avatarStyle}
               />
             </OthersProfile>
-            <Typography variant="Body2" color={'text.alternative'}>
+            <Typography variant="Caption" color={'text.alternative'}>
               {data.authorNickname}
             </Typography>
           </Box>
-          <Typography variant="Body1" color={'text.normal'}>
+          <Typography variant="Body2" color={'text.normal'}>
             {data.content}
           </Typography>
-          <Typography variant="Caption" color={'text.assistive'}>
+          <Typography variant="Tag" color={'text.assistive'}>
             {data.createAt
               .split('T')[0]
               .replace(/-/g, '월 ')

diff --git a/src/app/showcase/panel/common/LinksViewer.tsx b/src/app/showcase/panel/common/LinksViewer.tsx
@@ -43,7 +43,7 @@ const LinksViewer = ({ links }: IlinksProps) => {
               key={crypto.randomUUID()}
               component="a"
               color={'text.normal'}
-              variant="Body1"
+              variant="Body2"
               href={convertLink(link.link)}
               target="_blank"
               rel="noreferrer"

diff --git a/src/app/showcase/panel/common/StartEndDateViewer.tsx b/src/app/showcase/panel/common/StartEndDateViewer.tsx
@@ -21,7 +21,7 @@ const StartEndDateViewer = ({ start, end }: Idate) => {
           message="시작일"
           color="text.alternative"
         />
-        <Typography variant={'Body1'} sx={{ color: 'text.normal' }}>
+        <Typography variant={'Body2'} sx={{ color: 'text.normal' }}>
           {start.split('T')[0]} (모집글 게시일)
         </Typography>
       </Stack>
@@ -31,7 +31,7 @@ const StartEndDateViewer = ({ start, end }: Idate) => {
           message="종료일"
           color="text.alternative"
         />
-        <Typography variant={'Body1'} sx={{ color: 'text.normal' }}>
+        <Typography variant={'Body2'} sx={{ color: 'text.normal' }}>
           {end.split('T')[0]} (진행 완료일)
         </Typography>
       </Stack>

diff --git a/src/app/showcase/panel/common/TeamMembers.tsx b/src/app/showcase/panel/common/TeamMembers.tsx
@@ -40,16 +40,15 @@ const MemberInformation = ({ member }: { member: IMember }) => {
         />
       )}
 
-      <Typography variant={'Body1'} sx={{ color: 'text.normal' }}>
+      <Typography variant={'Body2'} sx={{ color: 'text.normal' }}>
         {/* /탈퇴한 유저의 경우 image = null, nickname = 탈퇴한 유저, role = null */}
         {member.nickname ?? '탈퇴한 유저'}
       </Typography>
-      {/* NOTE : member 데이터에 isLeader라는 데이터가 없어 보임. */}
-      {/* {member.isLeader && (
+      {member.isLeader && (
         <Typography variant={'Body2'} sx={{ color: 'purple.strong' }}>
           리더
         </Typography>
-      )} */}
+      )}
       <Typography variant={'CaptionEmphasis'} sx={{ color: 'purple.strong' }}>
         {member.role}
       </Typography>

diff --git a/src/components/LabelWithIcon.tsx b/src/components/LabelWithIcon.tsx
@@ -18,7 +18,7 @@ const LabelWithIcon = ({
       sx={{ width: '100%', height: '1.5rem' }}
     >
       {svgIcon}
-      <Typography variant={'Body2Emphasis'} color={color}>
+      <Typography variant={'CaptionEmphasis'} color={color}>
         {message}
       </Typography>
     </Stack>

diff --git a/src/components/board/CommentPanel.tsx b/src/components/board/CommentPanel.tsx
@@ -181,7 +181,7 @@ export const CommentItem = ({
             sx={{ flex: '1 0 0' }}
           >
             <CuAvatar sx={style.Avatar} src={comment.authorImage} />
-            <Typography color={'text.alternative'} variant={'Body2'}>
+            <Typography color={'text.alternative'} variant={'Caption'}>
               {comment.authorNickname}
             </Typography>
           </Stack>
@@ -221,8 +221,8 @@ export const CommentItem = ({
           </form>
         ) : (
           <Box sx={{ paddingRight: '2.5rem', wordBreak: 'break-all' }}>
-            <Typography variant={'Body1'}>{comment.content}</Typography>
-            <Typography variant={'Caption'} color={'text.assistive'}>
+            <Typography variant={'Body2'}>{comment.content}</Typography>
+            <Typography variant={'Tag'} color={'text.assistive'}>
               {dayjs(UTCtoLocalTime(comment.createAt)).format(
                 'YYYY년 MM월 DD일 hh:mm A',
               )}

diff --git a/src/components/board/DetailPanel.tsx b/src/components/board/DetailPanel.tsx
@@ -84,9 +84,7 @@ export const DetailContentCotainer = ({
   return (
     <Stack sx={isPc ? style.DetailContent : undefined} spacing={'2rem'}>
       <Stack direction={'row'} justifyContent={'space-between'}>
-        <Typography variant={'Body1Emphasis'}>
-          {isPc ? containerTitle : ''}
-        </Typography>
+        <Typography>{isPc ? containerTitle : ''}</Typography>
         {author && (
           <CuButton
             message={'수정'}
@@ -129,15 +127,15 @@ export const StatusMessage = ({
 
 const ContentTitle = ({ title }: { title: string }) => {
   return (
-    <Typography color={'text.strong'} variant={'Body2Emphasis'}>
+    <Typography color={'text.strong'} variant={'CaptionEmphasis'}>
       {title}
     </Typography>
   )
 }
 
 const Content = ({ content }: { content: string }) => {
   return (
-    <Typography color={'text.alternative'} variant={'Body1'}>
+    <Typography color={'text.alternative'} variant={'Body2'}>
       {content}
     </Typography>
   )

diff --git a/styles/global.css b/styles/global.css
@@ -1,6 +1,7 @@
 /* pretendard variable 폰트 */
 @import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
 
+
 html,
 body {
   width: 100%;
@@ -45,57 +46,3 @@ body * {
 .no-scroll::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera */
 }
-
-/* 토스트 에디터 기본 스타일링 */
-.toastui-editor-contents {
-  /* 값 참조 : https://mui.com/material-ui/customization/default-theme/?expand-path=$.typography */
-  h1 {
-    /* mui typography h3 */
-    font-weight: 400 !important;
-    font-size: 3rem !important;
-    line-height: 1.167 !important;
-    letter-spacing: 0em !important;
-  }
-  h2 {
-    /* mui typography h4 */
-    font-weight: 400 !important;
-    font-size: 2.125rem !important;
-    line-height: 1.235 !important;
-    letter-spacing: 0.00735em !important;
-  }
-  h3 {
-    /* mui typography h5 */
-    font-weight: 400 !important;
-    font-size: 1.5rem !important;
-    line-height: 1.334 !important;
-    letter-spacing: 0em !important;
-  }
-  h4 {
-    /* mui typography h6 */
-    font-weight: 400 !important;
-    font-size: 1.25rem !important;
-    line-height: 1.6 !important;
-    letter-spacing: 0.0075em !important;
-  }
-  h5 {
-    /* mui typography subtitle1 */
-    font-weight: 400 !important;
-    font-size: 1rem !important;
-    line-height: 1.75 !important;
-    letter-spacing: 0.00938em !important;
-  }
-  h6 {
-    /* mui typography subtitle2 */
-    font-weight: 500 !important;
-    font-size: 0.875rem !important;
-    line-height: 1.57 !important;
-    letter-spacing: 0.00714em !important;
-  }
-  p {
-    /* mui typography body2  */
-    font-weight: 400 !important;
-    font-size: 0.875rem !important;
-    line-height: 1.43 !important;
-    letter-spacing: 0.01071em !important;
-  }
-}