Skip to content

chore: logo header padding, Home 스타일 변경 #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 25, 2024
Merged

chore: logo header padding, Home 스타일 변경 #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec72310
chore: type이 logo인경우 높이 조정하여 패딩 적용
d0422 Sep 25, 2024
ad16619
feat: TitleComponent로 Home Header 스타일 변경
d0422 Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions packages/react-native/src/components/common/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,31 @@ interface HeaderProps {
RightActionButton?: ReactElement;
onBack?: () => void;
type?: 'logo' | 'default';
TitleComponent?: ReactElement;
hideLeft?: boolean;
}

export default function Header({
title = '',
RightActionButton,
onBack,
type = 'default',
TitleComponent,
hideLeft,
}: HeaderProps) {
const navigation = useNavigation();

const getHeight = () => {
if (type === 'logo') {
return 80;
}
if (TitleComponent) {
return 100;
}

return undefined;
};

const Right = useMemo(
() => <View className="px-4">{RightActionButton}</View>,
[RightActionButton],
Expand Down Expand Up @@ -52,8 +67,11 @@ export default function Header({
...HEADER_STYLE,
headerShown: true,
headerRight: () => Right,
headerLeft: () => Left,
title,
headerLeft: hideLeft ? null : () => Left,
headerStyle: {
height: getHeight(),
},
title: TitleComponent || title,
});
}, [title, RightActionButton, onBack]);

Expand Down
12 changes: 10 additions & 2 deletions packages/react-native/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import CardSlider from '@/components/common/CardSlider';
import Header from '@/components/common/Header';
import withSuspense from '@/components/HOC/withSuspense';
import useHomeSpotQuery from '@/apis/queries/useHomeSpotQuery';
import SPOTLogo from '@/assets/SPOTLogo';

interface HomeScreenProps {
navigation: StackNavigation<'Home/Main'>;
Expand All @@ -20,8 +21,15 @@ export default withSuspense(function Home({ navigation }: HomeScreenProps) {

return (
<BackGroundGradient>
<Header type="logo" />
<View className="flex flex-col gap-10 p-4">
<Header
hideLeft
TitleComponent={
<View className="justify-center items-center">
<SPOTLogo height={45} width={110} />
</View>
}
/>
<View className="flex flex-col gap-10 px-4">
<View>
<Font type="title1" color="white">
안녕하세요, {profile?.nickname}님{'\n'}오늘은 어디로 가 볼까요?
Expand Down
Loading