FEAT 여러가지 스타일링 (#develop)

Author: createhb21

services/ahhachul.com/src/components/common/comment/error/ErrorCommentList.styled.tsx

@@ -17,7 +17,7 @@ export const Desc = styled.div`
     gap: 4px;
 
     & > p {
-      ${theme.fonts.titleMedium};
+      ${theme.fonts.bodyMedium};
       color: ${theme.colors.gray[80]};
     }
   `}

services/ahhachul.com/src/components/domain/community/postDetail/error/CommunityErrorPage.component.tsx

@@ -10,15 +10,15 @@ interface CommunityErrorPageProps {
 }
 
 const CommunityErrorPage = ({ error, reset }: CommunityErrorPageProps) => {
-  const { replace } = useFlow();
+  const { pop } = useFlow();
 
   const isDeletedPost = error.response?.status === 404;
 
   return isDeletedPost ? (
     <S.Container>
       <S.Title>삭제된 게시글입니다.</S.Title>
-      <S.RetryButton type="button" onClick={() => replace('HomePage', {}, { animate: false })}>
-        홈으로 이동하기
+      <S.RetryButton type="button" onClick={() => pop()}>
+        목록으로 이동하기
       </S.RetryButton>
     </S.Container>
   ) : (

services/ahhachul.com/src/components/domain/community/postDetail/error/CommunityErrorPage.styled.tsx

@@ -11,14 +11,16 @@ export const Container = styled.div`
 
 export const Title = styled.p`
   text-align: center;
-  font-size: 20px;
-  font-weight: 700;
+  ${({ theme }) => css`
+    ${theme.fonts.labelMedium};
+  `}
 `;
 
 export const Description = styled.p`
   text-align: center;
   ${({ theme }) => css`
-    ${theme.fonts.labelMedium};
+    ${theme.fonts.bodyMedium};
+    color: ${theme.colors.gray[80]};
   `}
 `;
 

services/ahhachul.com/src/components/domain/complaint/postDetail/error/ComplaintErrorPage.styled.tsx

@@ -11,14 +11,16 @@ export const Container = styled.div`
 
 export const Title = styled.p`
   text-align: center;
-  font-size: 20px;
-  font-weight: 700;
+  ${({ theme }) => css`
+    ${theme.fonts.labelMedium};
+  `}
 `;
 
 export const Description = styled.p`
   text-align: center;
   ${({ theme }) => css`
-    ${theme.fonts.labelMedium};
+    ${theme.fonts.bodyMedium};
+    color: ${theme.colors.gray[80]};
   `}
 `;
 

services/ahhachul.com/src/components/domain/lostFound/postDetail/error/LostFoundErrorPage.styled.tsx

@@ -11,14 +11,16 @@ export const Container = styled.div`
 
 export const Title = styled.p`
   text-align: center;
-  font-size: 20px;
-  font-weight: 700;
+  ${({ theme }) => css`
+    ${theme.fonts.labelMedium};
+  `}
 `;
 
 export const Description = styled.p`
   text-align: center;
   ${({ theme }) => css`
-    ${theme.fonts.labelMedium};
+    ${theme.fonts.bodyMedium};
+    color: ${theme.colors.gray[80]};
   `}
 `;
 

services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.component.tsx

@@ -94,7 +94,7 @@ const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
           </S.CompleteWrapper>
         )}
 
-        <S.ContentContainer>
+        <S.ContentContainer isFromLost112={post.isFromLost112}>
           {post.isFromLost112 || !isLexicalContent(post.content) ? (
             <S.TextContent>{formatLost112Content(post.content)}</S.TextContent>
           ) : (

services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.styled.tsx

@@ -92,8 +92,10 @@ export const CompleteText = styled.span`
   `}
 `;
 
-export const ContentContainer = styled.div`
-  padding: 24px 20px 0;
+export const ContentContainer = styled.div<{ isFromLost112: boolean }>`
+  ${({ isFromLost112 }) => css`
+    padding: ${isFromLost112 ? '0 20px' : '24px 20px 0'};
+  `}
 `;
 
 export const TextContent = styled.div`