merge: 논의 사항 합의 (#20)

Author: HBSPS

packages/react-native/src/components/common/Header.tsx

@@ -3,7 +3,6 @@ import React, { ReactElement, useEffect, useMemo } from 'react';
 import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import BackIcon from '@/assets/BackIcon';
-import { useHeaderState } from '@/stores/header';
 import { HEADER_STYLE } from '@/constants/HEADER_STYLE';
 
 interface HeaderProps {
@@ -17,7 +16,6 @@ export default function Header({
   RightActionButton,
   onBack,
 }: HeaderProps) {
-  const { showHeader } = useHeaderState();
   const navigation = useNavigation();
 
   const Right = useMemo(
@@ -42,8 +40,6 @@ export default function Header({
       return;
     }
 
-    showHeader();
-
     navigation.setOptions({
       ...HEADER_STYLE,
       headerShown: true,

packages/react-native/src/components/maps/RecordCard.tsx

@@ -7,8 +7,8 @@ import {
 import { Font } from 'design-system';
 import { useNavigation } from '@react-navigation/native';
 import DotMenuIcon from '@/assets/DotMenuIcon';
-import { MapsStackNavigation } from '@/types/navigation';
 import { KoreaLocationName } from '@/types/map';
+import { StackNavigation } from '@/types/navigation';
 
 interface CardProps {
   id: number;
@@ -29,7 +29,7 @@ export default function RecordCard({
   date,
   backgroundImage,
 }: CardProps) {
-  const navigation = useNavigation<MapsStackNavigation<'Maps/Record'>>();
+  const navigation = useNavigation<StackNavigation<'Maps/Record'>>();
   return (
     <TouchableOpacity
       onPress={() =>

packages/react-native/src/components/signup/common/Header.tsx

@@ -1,8 +1,6 @@
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import Cancel from '@/assets/CancelIcon';
 import Header from '@/components/common/Header';
-import { SignupStackNavigation } from '@/types/navigation';
-import { SignupStackParamList } from '@/routes/SignupStackNavigator';
 
 interface HeaderProps {
   onBack: () => void;

packages/react-native/src/layouts/BackGroundGradient.tsx

@@ -2,7 +2,6 @@ import { SafeAreaView, ScrollView } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useHeaderState } from '@/stores/header';
 
 export default function BackGroundGradient({
   children,
@@ -14,8 +13,6 @@ export default function BackGroundGradient({
   const headerHeight = useHeaderHeight();
   const insets = useSafeAreaInsets();
 
-  const { headerShown } = useHeaderState();
-
   return (
     <LinearGradient
       colors={['#FF1919', '#000000']}
@@ -34,7 +31,7 @@ export default function BackGroundGradient({
             showsVerticalScrollIndicator={false}
             className="flex-1"
             style={{
-              marginTop: headerShown ? headerHeight - insets.top : marginTop,
+              marginTop: headerHeight - insets.top + marginTop,
             }}
           >
             {children}

packages/react-native/src/pages/Detail.tsx

@@ -2,11 +2,12 @@ import { useRoute } from '@react-navigation/native';
 import { View } from 'react-native';
 import { Font } from 'design-system';
 import Carousel from 'react-native-reanimated-carousel';
-import { HomeRouteProps } from '@/types/navigation';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
 import { SpotData } from '@/types/spot';
 import Card from '@/components/common/Card';
 import WordBreak from '@/components/common/WordBreak';
+import Header from '@/components/common/Header';
+import { StackRouteProps } from '@/types/navigation';
 
 // FIXME: 추후 제거
 const mockData: SpotData[] = [
@@ -46,11 +47,12 @@ const mockDescription =
   '"너와 함께한 시간 모두 눈부셨다. 날이 좋아서, 날이 좋지 않아서, 날이 적당해서 모든 날이 좋았다."';
 
 export default function Detail() {
-  const route = useRoute<HomeRouteProps<'home/detail'>>();
+  const route = useRoute<StackRouteProps<'Home/Detail'>>();
   const { title } = route.params;
 
   return (
     <BackGroundGradient>
+      <Header />
       <View className="items-center">
         <Font.Bold type="mainTitle" color="white">
           {title}

packages/react-native/src/pages/Home.tsx

@@ -3,9 +3,9 @@ import { Button, Font } from 'design-system';
 import CardSlider from '@components/CardSlider';
 import SearchBar from '@components/common/SearchBar';
 import { SpotData } from '@/types/spot';
-import { HomeStackNavigation } from '@/types/navigation';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
 import useNicknameQuery from '@/apis/queries/useNicknameQuery';
+import { StackNavigation } from '@/types/navigation';
 
 const mockData: SpotData[] = [
   {
@@ -60,14 +60,14 @@ const mockData: SpotData[] = [
 ];
 
 interface HomeScreenProps {
-  navigation: HomeStackNavigation<'home/main'>;
+  navigation: StackNavigation<'Home/Main'>;
 }
 
 export default function Home({ navigation }: HomeScreenProps) {
   const { nickname } = useNicknameQuery();
 
   return (
-    <BackGroundGradient>
+    <BackGroundGradient marginTop={40}>
       <View className="flex flex-col gap-10 p-4">
         <View>
           <Font type="title1" color="white">
@@ -82,7 +82,7 @@ export default function Home({ navigation }: HomeScreenProps) {
           <SearchBar
             placeholder="드라마/영화 제목을 검색하세요."
             handleSearch={(title) =>
-              navigation.navigate('home/detail', { title })
+              navigation.navigate('Home/Detail', { title })
             }
           />
         </View>

packages/react-native/src/pages/Login/Login.tsx

@@ -2,11 +2,11 @@ import { SafeAreaView, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import SPOTLogo from '@assets/SPOTLogo';
 import { SocialLogin } from 'design-system';
-import { ScreenNavigationProp } from '@/types/navigation';
+import { StackNavigation } from '@/types/navigation';
 import { AppStorage } from '@/utils/storage';
 
 interface LoginPageProps {
-  navigation: ScreenNavigationProp<'Login'>;
+  navigation: StackNavigation<'Login'>;
 }
 
 export default function Login({ navigation }: LoginPageProps) {
@@ -18,7 +18,7 @@ export default function Login({ navigation }: LoginPageProps) {
       return navigation.navigate('Signup');
     }
 
-    return navigation.navigate('Main');
+    return navigation.reset({ routes: [{ name: 'Main' }] });
   };
 
   return (

packages/react-native/src/pages/Maps/Maps.tsx

@@ -10,10 +10,10 @@ import BottomSheet, {
 } from '@gorhom/bottom-sheet';
 import mapData from '@/assets/mapData';
 import { KoreaLocationName } from '@/types/map';
-import { MapsStackNavigation } from '@/types/navigation';
+import { StackNavigation } from '@/types/navigation';
 
 interface MapsMainProps {
-  navigation: MapsStackNavigation<'Maps/Main'>;
+  navigation: StackNavigation<'Maps/Main'>;
 }
 
 const { width, height } = Dimensions.get('window');

packages/react-native/src/pages/Maps/RecordDetail.tsx

@@ -5,16 +5,16 @@ import { Font } from 'design-system';
 import useRecordDetailQuery from '@/apis/queries/records/useRecordDetailQuery';
 import Header from '@/components/common/Header';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
-import { MapsRouteProps, MapsStackNavigation } from '@/types/navigation';
+import { StackNavigation, StackRouteProps } from '@/types/navigation';
 
 interface LogDetailProps {
-  navigation: MapsStackNavigation<'Maps/RecordDetail'>;
+  navigation: StackNavigation<'Maps/RecordDetail'>;
 }
 
 const { width: fullWidth } = Dimensions.get('window');
 
 export default function RecordDetail({ navigation }: LogDetailProps) {
-  const route = useRoute<MapsRouteProps<'Maps/RecordDetail'>>();
+  const route = useRoute<StackRouteProps<'Maps/RecordDetail'>>();
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const { recordDetail } = useRecordDetailQuery({

packages/react-native/src/pages/Maps/Records.tsx

@@ -3,21 +3,21 @@ import { useRoute } from '@react-navigation/native';
 import SortIcon from '@/assets/SortIcon';
 import FloatingPlusButton from '@/components/maps/FloatingPlusButton';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
-import { MapsRouteProps, MapsStackNavigation } from '@/types/navigation';
 import { LOG_PADDING_X } from '@/components/maps/RecordCard';
 import RecordCardList from '@/components/maps/RecordCardList';
 import Header from '@/components/common/Header';
+import { StackNavigation, StackRouteProps } from '@/types/navigation';
 
 interface RecordsProps {
-  navigation: MapsStackNavigation<'Maps/Record'>;
+  navigation: StackNavigation<'Maps/Record'>;
 }
 
 export default function Records({ navigation }: RecordsProps) {
   const sort = () => {
     // TODO: 실제 구현 필요(현재 UI없음)
   };
 
-  const route = useRoute<MapsRouteProps<'Maps/Record'>>();
+  const route = useRoute<StackRouteProps<'Maps/Record'>>();
   return (
     <View>
       <BackGroundGradient>