fix: title max length

crossplatformkorea · Dec 28, 2024 · bfc7c5a · bfc7c5a
1 parent 451dbea
commit bfc7c5a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/app/(home)/post/[id]/index.tsx b/app/(home)/post/[id]/index.tsx
@@ -33,6 +33,7 @@ import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../../src/components/uis/FallbackComponent';
 import useSupabase from '../../../../src/hooks/useSupabase';
 import {Hr, Icon, Typography, useCPK} from 'cpk-ui';
+import {TITLE_MAX_LENGTH} from '../../../../src/utils/constants';
 
 const Container = styled.View`
   background-color: ${({theme}) => theme.bg.basic};
@@ -355,7 +356,10 @@ export default function PostDetails(): JSX.Element {
     <ErrorBoundary FallbackComponent={FallbackComponent}>
       <Stack.Screen
         options={{
-          title: (post?.title || t('common.post')).substring(0, 29),
+          title:
+            (post?.title || t('common.post')).length > TITLE_MAX_LENGTH
+              ? `${(post?.title || t('common.post')).substring(0, TITLE_MAX_LENGTH)}...`
+              : post?.title || t('common.post'),
           headerRight: () =>
             authId ? (
               <View

diff --git a/app/(home)/post/[id]/update.tsx b/app/(home)/post/[id]/update.tsx
@@ -22,7 +22,10 @@ import NotFound from '../../../../src/components/uis/NotFound';
 import {useState} from 'react';
 import {ImagePickerAsset} from 'expo-image-picker';
 import MultiUploadImageInput from '../../../../src/components/uis/MultiUploadImageInput';
-import {MAX_IMAGES_UPLOAD_LENGTH} from '../../../../src/utils/constants';
+import {
+  MAX_IMAGES_UPLOAD_LENGTH,
+  TITLE_MAX_LENGTH,
+} from '../../../../src/utils/constants';
 import CustomScrollView from '../../../../src/components/uis/CustomScrollView';
 import {filterUploadableAssets} from '../../../../src/utils/common';
 import {RectButton} from 'react-native-gesture-handler';
@@ -302,7 +305,10 @@ export default function PostUpdate(): JSX.Element {
     <ErrorBoundary FallbackComponent={FallbackComponent}>
       <Stack.Screen
         options={{
-          title: post?.title || t('common.post'),
+          title:
+            (post?.title || t('common.post')).length > TITLE_MAX_LENGTH
+              ? `${(post?.title || t('common.post')).substring(0, TITLE_MAX_LENGTH)}...`
+              : post?.title || t('common.post'),
           headerRight: () =>
             Platform.OS === 'web' ? (
               <Pressable

diff --git a/src/components/uis/PostListItem.tsx b/src/components/uis/PostListItem.tsx
@@ -66,6 +66,8 @@ export default function PostListItem({
               >
                 <Typography.Body2
                   style={css`
+                    flex: 1;
+                    padding-right: 8px;
                     font-family: Pretendard-Bold;
                   `}
                 >

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import {DoobooGithubStats, Stats} from '../types/github-stats';
 
 export const LIST_CNT = 10;
@@ -15,6 +16,7 @@ export const HEADER_HEIGHT = 56;
 export const MAX_IMAGES_UPLOAD_LENGTH = 5;
 export const MAX_WIDTH = 1000;
 export const EMAIL_ADDRESS = '[email protected]';
+export const TITLE_MAX_LENGTH = Platform.OS === 'web' ? 52 : 29;
 
 export const initStats: Stats = {
   name: '',