�merge: log -> record 네이밍 변경 (#18)

�merge: log -> record 네이밍 변경 (#18)

Author: d0422

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

@@ -1,25 +1,24 @@
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import React, { ReactElement, useEffect, useMemo } from 'react';
 import { View } from 'react-native';
-import { AllRouteNavigation } from '@/types/navigation';
+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 {
-  navigation: AllRouteNavigation;
   title?: string;
   RightActionButton?: ReactElement;
   onBack?: () => void;
 }
 
 export default function Header({
   title,
-  navigation,
   RightActionButton,
   onBack,
 }: HeaderProps) {
   const { showHeader } = useHeaderState();
+  const navigation = useNavigation();
 
   const Right = useMemo(
     () => <View className="px-4">{RightActionButton}</View>,

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

@@ -0,0 +1,69 @@
+import {
+  Dimensions,
+  ImageBackground,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+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';
+
+interface CardProps {
+  id: number;
+  title: string;
+  location: KoreaLocationName;
+  date: string;
+  backgroundImage: string;
+}
+
+const { width } = Dimensions.get('window');
+export const LOG_PADDING_X = 16;
+export const CARD_GAP = 8;
+
+export default function RecordCard({
+  id,
+  title,
+  location,
+  date,
+  backgroundImage,
+}: CardProps) {
+  const navigation = useNavigation<MapsStackNavigation<'Maps/Record'>>();
+  return (
+    <TouchableOpacity
+      onPress={() =>
+        navigation.navigate('Maps/RecordDetail', {
+          recordId: id,
+          location,
+        })
+      }
+    >
+      <ImageBackground
+        source={{ uri: backgroundImage }}
+        className="h-[240px] rounded-lg overflow-hidden"
+        style={{
+          width: (width - 2 * LOG_PADDING_X - CARD_GAP) / 2,
+          height: 240,
+        }}
+      >
+        <View className="flex-1 justify-between px-3 py-1.5 bg-black/20">
+          <View className="flex items-end w-full">
+            <DotMenuIcon />
+          </View>
+          <View className="p-2.5 gap-2">
+            <Font.Bold type="body1" color="white">
+              {title}
+            </Font.Bold>
+            <Font.Light type="body1" color="white">
+              {location}
+            </Font.Light>
+            <Font.Light type="body1" color="white">
+              {date}
+            </Font.Light>
+          </View>
+        </View>
+      </ImageBackground>
+    </TouchableOpacity>
+  );
+}

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

@@ -1,10 +1,11 @@
 import { View } from 'react-native';
-import LogCard, { CARD_GAP } from './LogCard';
+import RecordCard, { CARD_GAP } from './RecordCard';
+import { KoreaLocationName } from '@/types/map';
 
 type MockCardData = {
   id: number;
   title: string;
-  location: string;
+  location: KoreaLocationName;
   date: string;
   backgroundImage: string;
 };
@@ -30,13 +31,13 @@ const MOCK_LOG_CARD: MockCardData[] = [
     id: 3,
     title: '이미지 구하기 귀찮다',
     date: '2024.08.04',
-    location: '제주도',
+    location: '제주특별자치도',
     backgroundImage:
       'https://img3.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202406/20/starfashion/20240620094035441whlh.jpg',
   },
 ];
 
-export default function LogCardList() {
+export default function RecordCardList() {
   return (
     <View
       className="mt-8 flex flex-row flex-wrap "
@@ -46,7 +47,8 @@ export default function LogCardList() {
     >
       {MOCK_LOG_CARD.map((data) => (
         <View key={data.title + data.backgroundImage}>
-          <LogCard
+          <RecordCard
+            id={data.id}
             title={data.title}
             date={data.date}
             location={data.location}

packages/react-native/src/components/maps/LogCardList.tsx renamed to packages/react-native/src/components/maps/RecordCardList.tsx

@@ -17,7 +17,6 @@ export default function SignupHeader({
 }: HeaderProps) {
   return (
     <Header
-      navigation={navigation}
       onBack={onBack}
       RightActionButton={
         <TouchableOpacity onPress={onCancel}>

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

@@ -89,7 +89,7 @@ export default function Maps({ navigation }: MapsMainProps) {
                 <TouchableOpacity
                   className="py-2"
                   onPress={() =>
-                    navigation.navigate('Maps/Log', { location: region })
+                    navigation.navigate('Maps/Record', { location: region })
                   }
                 >
                   <Font type="title1" color="black">

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

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
 
-export default function PostLog() {
+export default function PostRecord() {
   return <View />;
 }

packages/react-native/src/pages/Maps/ModifyLog.tsx renamed to packages/react-native/src/pages/Maps/ModifyRecord.tsx

@@ -4,43 +4,43 @@ 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/LogCard';
-import LogCardList from '@/components/maps/LogCardList';
+import { LOG_PADDING_X } from '@/components/maps/RecordCard';
+import RecordCardList from '@/components/maps/RecordCardList';
 import Header from '@/components/common/Header';
 
-interface LogProps {
-  navigation: MapsStackNavigation<'Maps/Log'>;
+interface RecordsProps {
+  navigation: MapsStackNavigation<'Maps/Record'>;
 }
 
-export default function Log({ navigation }: LogProps) {
+export default function Records({ navigation }: RecordsProps) {
   const sort = () => {
     // TODO: 실제 구현 필요(현재 UI없음)
   };
 
-  const route = useRoute<MapsRouteProps<'Maps/Log'>>();
+  const route = useRoute<MapsRouteProps<'Maps/Record'>>();
   return (
     <View>
-      <Header
-        navigation={navigation}
-        RightActionButton={
-          <TouchableOpacity onPress={sort} className="px-4">
-            <SortIcon />
-          </TouchableOpacity>
-        }
-        title={route.params.location}
-      />
       <BackGroundGradient>
+        <Header
+          RightActionButton={
+            <TouchableOpacity onPress={sort} className="px-4">
+              <SortIcon />
+            </TouchableOpacity>
+          }
+          title={route.params.location}
+        />
         <View
           className="relative flex-1 min-h-[100vh]"
           style={{
-            padding: LOG_PADDING_X,
+            paddingLeft: LOG_PADDING_X,
+            paddingRight: LOG_PADDING_X,
           }}
         >
-          <LogCardList />
+          <RecordCardList />
         </View>
       </BackGroundGradient>
       <FloatingPlusButton
-        onPress={() => navigation.navigate('Maps/PostLog')}
+        onPress={() => navigation.navigate('Maps/PostRecord')}
         bottom={16}
         right={16}
       />

packages/react-native/src/pages/Maps/PostLog.tsx renamed to packages/react-native/src/pages/Maps/PostRecord.tsx

@@ -1,17 +1,22 @@
 import { createStackNavigator } from '@react-navigation/stack';
 import { KoreaLocationName } from '@/types/map';
 import Maps from '@/pages/Maps/Maps';
-import Log from '@/pages/Maps/Log';
-import PostLog from '@/pages/Maps/PostLog';
-import ModifyLog from '@/pages/Maps/ModifyLog';
+import Records from '@/pages/Maps/Records';
+import PostRecord from '@/pages/Maps/PostRecord';
+import ModifyRecord from '@/pages/Maps/ModifyRecord';
+import RecordDetail from '@/pages/Maps/RecordDetail';
 
 export type MapsStackParamList = {
   'Maps/Main': undefined;
-  'Maps/Log': {
+  'Maps/Record': {
+    location: KoreaLocationName;
+  };
+  'Maps/PostRecord': undefined;
+  'Maps/ModifyRecord': undefined;
+  'Maps/RecordDetail': {
+    recordId: number;
     location: KoreaLocationName;
   };
-  'Maps/PostLog': undefined;
-  'Maps/ModifyLog': undefined;
 };
 
 const Stack = createStackNavigator<MapsStackParamList>();
@@ -24,9 +29,10 @@ export default function MapsStackNavigator() {
       }}
     >
       <Stack.Screen name="Maps/Main" component={Maps} />
-      <Stack.Screen name="Maps/Log" component={Log} />
-      <Stack.Screen name="Maps/PostLog" component={PostLog} />
-      <Stack.Screen name="Maps/ModifyLog" component={ModifyLog} />
+      <Stack.Screen name="Maps/Record" component={Records} />
+      <Stack.Screen name="Maps/PostRecord" component={PostRecord} />
+      <Stack.Screen name="Maps/ModifyRecord" component={ModifyRecord} />
+      <Stack.Screen name="Maps/RecordDetail" component={RecordDetail} />
     </Stack.Navigator>
   );
 }