코딩하는 김딸기
더자세한 세부사항 본문
이 코드는 React Native로 작성된 PathDetails 컴포넌트로, 특정 경로에 대한 교통수단 정보와 지도를 표시하는 기능을 담당합니다. 이 컴포넌트는 경로 정보, 택시 정보를 받아와 지도에 표시하고, 교통수단에 따라 필요한 정보를 화면에 표시하는 역할을 합니다. 코드의 주요 부분을 각 줄별로 자세히 해석해 드리겠습니다.
1. PathDetails 컴포넌트 정의
const PathDetails = () => {
const {selectedPath, selectedTaxi, isTaxi} = usePathContext();
const [expandedSections, setExpandedSections] = useState<boolean[]>([]);
- usePathContext()는 React의 Context API를 사용하여 상위 컴포넌트로부터 전달된 데이터를 가져옵니다. 이 데이터에는 selectedPath, selectedTaxi, isTaxi가 포함되어 있습니다.
- selectedPath: 선택된 경로 정보
- selectedTaxi: 선택된 택시 정보
- isTaxi: 택시를 이용할지 여부를 나타내는 값
- expandedSections는 교통수단별로 세부 정보를 펼칠지 여부를 관리하는 상태 변수입니다.
2. getStationIcon 함수 (아이콘을 반환)
// 역별 아이콘을 결정하는 함수 (아이콘 반환)
const getStationIcon = (tftype: number) => {
if (tftype === 1)
return <Icon name="directions-subway" size={20} color="#28cadc" />;
if (tftype === 2)
return <Icon name="directions-bus" size={20} color="#4CAF50" />;
if (tftype === 3)
return <Icon name="directions-walk" size={20} color="#fcbb41" />;
if (tftype === 4) return <Icon name="local-taxi" size={20} color="#000" />;
};
- 이 함수는 주어진 tftype에 따라 교통수단에 맞는 아이콘을 반환합니다.
- tftype === 1: 지하철 아이콘 (directions-subway)
- tftype === 2: 버스 아이콘 (directions-bus)
- tftype === 3: 도보 아이콘 (directions-walk)
- tftype === 4: 택시 아이콘 (local-taxi)
- 각 아이콘은 Icon 컴포넌트를 사용하여 크기와 색상을 지정합니다.
3. getTrafficColor 함수 (교통수단별 색상 반환)
// 교통수단에 맞는 색상 반환하는 함수
const getTrafficColor = (trafficType: number) => {
if (trafficType === 1) return '#28cadc'; // 지하철 색상
if (trafficType === 2) return '#4CAF50'; // 버스 색상
if (trafficType === 3) return '#fcbb41'; // 도보 색상
if (trafficType === 4) return '#000'; // 택시 색상
return '#000'; // 기본값
};
- 이 함수는 trafficType에 따라 교통수단에 맞는 색상을 반환합니다.
- trafficType === 1: 지하철 색상 #28cadc
- trafficType === 2: 버스 색상 #4CAF50
- trafficType === 3: 도보 색상 #fcbb41
- trafficType === 4: 택시 색상 #000
- 이 색상은 경로를 표시할 때 사용됩니다.
4. 컴포넌트의 return 부분
4.1 지도 표시 부분
return (
<View style={styles.container}>
{/* 지도 표시 부분 */}
<View style={styles.topSection}>
<MapView style={styles.map}>
{renderRoute()} {/* 경로 그리기 */}
</MapView>
</View>
- MapView는 지도를 표시하는 컴포넌트입니다. renderRoute() 함수는 경로를 지도에 그리는 역할을 합니다.
- styles.map은 지도 스타일을 지정하는 스타일 객체입니다.
4.2 하단 내용 표시 부분
{/* 하단 내용 */}
<View style={styles.bottomSection}>
<ScrollView contentContainerStyle={styles.scrollContainer}>
{isTaxi === '택시' && (
<View style={styles.itemContainer}>
{getStationIcon(4)}
<Text style={styles.taxiInfo}> 택시로 이동 </Text>
<Text style={styles.walkInfoTime}>
{formatBusTime2(selectedTaxi.taxi.summary.duration)}분
</Text>
</View>
)}
- isTaxi === '택시' 조건에 따라, 택시로 이동하는 경우에만 관련 정보를 표시합니다.
- getStationIcon(4)를 호출하여 택시 아이콘을 표시
- formatBusTime2(selectedTaxi.taxi.summary.duration)를 호출하여 택시 이동 시간을 분 단위로 포맷하여 표시
4.3 경로별 세부 정보 표시
{selectedPath?.info?.subPath?.map((subPath: any, index: number) => (
<View key={index} style={styles.stationContainer}>
{subPath?.trafficType === 3 ? (
<View style={styles.itemContainer}>
{getStationIcon(3)}
<Text style={styles.walkInfo}>
{' '}
도보 {subPath?.walkRoute?.totalDistance}m{' '}
</Text>
<Text style={styles.walkInfoTime}>
{formatBusTime(subPath?.walkRoute?.totalTime) || 0}분
</Text>
</View>
) : (
<>
<View style={styles.itemContainer}>
{getStationIcon(subPath?.trafficType)}
<Text style={styles.stationName}>
{' '}
{subPath?.startName} 승차 → {subPath?.endName} 하차
</Text>
</View>
<TouchableOpacity onPress={() => toggleExpand(index)}>
<Text style={styles.stationDetail}>
{subPath?.stations?.length}개 이동
</Text>
</TouchableOpacity>
{expandedSections[index] && (
<View style={styles.stationsList}>
{subPath?.stations?.map(
(station: any, stationIndex: number) => (
<Text key={stationIndex} style={styles.stationDetail}>
{station?.stationName}
</Text>
),
)}
</View>
)}
</>
)}
</View>
))}
</ScrollView>
- selectedPath.info.subPath를 순회하여 각 교통수단에 대한 정보를 표시합니다.
- trafficType === 3: 도보인 경우, 도보 정보를 표시 (subPath?.walkRoute?.totalDistance와 subPath?.walkRoute?.totalTime을 사용)
- 그 외의 경우, 교통수단의 시작역과 끝역을 표시합니다.
- expandedSections[index]가 true일 경우, 해당 경로의 세부 정보를 펼쳐서 보여줍니다 (toggleExpand(index) 함수로 토글).
종합
이 컴포넌트는 사용자가 선택한 경로와 택시 정보를 기반으로 교통수단을 지도와 함께 표시합니다. 교통수단에 따라 아이콘과 색상을 다르게 표시하며, 도보와 대중교통에 대한 세부 정보를 펼치거나 접을 수 있는 기능을 제공합니다.
4o mini