Feat: set different font-size in MiniProfile depending on pages

7-7-2 · Aug 29, 2024 · 2e6f950 · 2e6f950
1 parent 1c63698
commit 2e6f950
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/src/components/common/MiniProfile.tsx b/src/components/common/MiniProfile.tsx
@@ -1,12 +1,18 @@
 import ImgContainer from '@/components/common/ImgContainer';
 import { TEXT } from '@/constants/texts';
 import { MiniProfileProps } from '@/types/types';
-import { Column, Flex, FlexCenter, Justify } from '@/styles/layout';
-import { LineH18, Semibold } from '@/styles/styles';
+import { Between, Column, Flex, FlexCenter, Justify } from '@/styles/layout';
+import {
+  LineH18,
+  Semibold,
+  MiniUserTitle,
+  PostsUserContainer
+} from '@/styles/styles';
 import { styled } from 'styled-system/jsx';
 import { cx } from 'styled-system/css';
 import { useNavigateTo } from '@/hooks/useNavigateTo';
 import NoProfileImg from '@/components/common/NoProfileImg';
+import { useLocation } from 'react-router-dom';
 
 const MiniProfile = ({
   url,
@@ -17,6 +23,8 @@ const MiniProfile = ({
   mini = false
 }: MiniProfileProps) => {
   const toProfilePage = useNavigateTo(`/profile/${userId}`);
+  const { pathname } = useLocation();
+  const postsTitle = pathname.startsWith('/post');
   return (
     <>
       <Container className={Flex}>
@@ -37,8 +45,18 @@ const MiniProfile = ({
             />
           )}
         </div>
-        <div className={cx(Column, Justify)}>
-          <UserTitle className={cx(LineH18, Semibold)}>
+        <div
+          className={
+            post && postsTitle
+              ? cx(Column, Between, PostsUserContainer)
+              : cx(Column, Justify)
+          }>
+          <UserTitle
+            className={
+              post && postsTitle
+                ? cx(LineH18, Semibold)
+                : cx(LineH18, Semibold, MiniUserTitle)
+            }>
             <span onClick={toProfilePage}>{nickname}</span>
           </UserTitle>
           <UserCaffeine
@@ -56,9 +74,9 @@ const Container = styled.div`
   gap: 12px;
 `;
 const UserTitle = styled.div`
-  font-size: var(--font-sizes-sm);
   color: var(--colors-main-dark);
 `;
+
 const UserCaffeine = styled.div`
   font-size: var(--font-sizes-xs);
   color: var(--colors-mid-grey);

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -841,3 +841,11 @@ export const RadioBtnContainer = css`
   height: 16px;
   position: relative;
 `;
+
+export const MiniUserTitle = css`
+  font-size: var(--font-sizes-sm);
+`;
+
+export const PostsUserContainer = css`
+  padding: 3px 0;
+`;