Event 버튼에 관한 내용(User 포함)

[9utty]

// Event.ts 슬라이스에 관한 코드
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { hashtagType } from "App";

export interface UserType {
  id: number;
  profileImage: string;
  title: string;
}

export interface MapType {
  tradeName: string;
  location: string;
  longitude: number;
  latitude: number;
}

export interface HashtagType {
  hashtagId: number;
  hashtagName: string;
}

export interface EventDto {
  eventTitle: string;
  eventDescription: string;
  eventOpenTalkLink: string;
  eventHashtag: HashtagType;
  eventImages: string[];
  host: UserType;
  eventMAp: MapType;
  eventParticipant: number;
}

interface InitialState {
  eventId: number;
  event: EventDto[];
}
const initialState: InitialState = {
  eventId: 0,
  event: [],
};

export const EventSlice = createSlice({
  name: "event",
  initialState: initialState,
  reducers: {
    addEvent: (state, action: PayloadAction<EventDto>) => {
      state.event.push(action.payload);
    },
    addEventId: (state, action: PayloadAction<number>) => {
      state.eventId = action.payload;
    },
    deleteEvent: (state) => {
      state.event.pop();
      state.eventId = 0;
    },
  },
});

// EventScreen.ts
import React, { useState, useRef, useEffect } from "react";
import {
  View,
  ScrollView,
  Image,
  Dimensions,
  Text,
  TouchableOpacity,
} from "react-native";
import { EventHeader } from "./components/EventHeader";
import MapView, { PROVIDER_GOOGLE, Marker } from "react-native-maps";
import {
  widthPercentageToDP as wpSize,
  heightPercentageToDP as hpSize,
} from "react-native-responsive-screen";
import { useFocusEffect } from "@react-navigation/native";
import { useAppDispatch } from "../../redux/RootStore";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/RootReducer";

const wp = wpSize("100%");
const hp = hpSize("100%");

export const EventScreen: React.FC = () => {
  const [state, setState] = useState(0);
  const dispatch = useAppDispatch();
  const event = useSelector((state: RootState) => state.event.event);

  useFocusEffect(
    React.useCallback(() => {
      // 여기서 GET 요청을 하기 위한 eventId 필요
      return () => {};
    }, [])
  );
  return (
    <View style={{ flex: 1 }}>
      <EventHeader showBackButton={true} />
      <ScrollView
        style={{
          backgroundColor: "white",
        }}
      >
        <View
          style={{
            paddingVertical: hp * 0.05,
            paddingHorizontal: wp * 0.05,
          }}
        >
          <ImageSlide />
          <View
            style={{
              marginTop: 10,
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text style={{ fontSize: 25, fontWeight: "bold" }}>메인 주제</Text>
            <MapView
              provider={PROVIDER_GOOGLE}
              style={{ width: wp * 0.9, height: wp * 0.9 * 0.75 }} // MapView component의 style prop을 변경함으로써 맵의 크기를 변경할 수 있습니다.
              region={{
                // region prop은 맵이 보여지는 부분(latitude, longitude)을 지정합니다.
                latitude: 37.489112052, // latitude of the center of the map view
                longitude: 127.06600648, // longitude of the center of the map view
                latitudeDelta: 0.015, // specifies the delta that determines the zoom level of the map
                longitudeDelta: 0.0121, // specifies the delta that determines the zoom level of the map
              }}
              followsUserLocation={true}
              zoomEnabled={true} // 이 부분을 추가하면 지도의 확대/축소 기능이 활성화됩니다.
              zoomControlEnabled={true} // 이 부분을 추가하면 지도의 확대/축소 컨트롤이 활성화됩니다.
            >
              <Marker
                coordinate={{ latitude: 37.489112052, longitude: 127.06600648 }} // 핀의 위치를 지정합니다.
                title="현재 주제" // 핀 위에 표시될 제목을 지정합니다.
                description="Marker Description" // 핀 위에 표시될 설명을 지정합니다.
              />
            </MapView>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

위에 코드를 보면 useFocusEffect로 이벤트 페이지 렌더링하기 전에 데이터를 초기화 할 수 있음 이때, EventScreen에 들어오게 되는 경우는 EventButton을 눌렀다고 가정하고, 그러면 그 EventButton의 eventId를

dispatch(EventSlice.action.addEventId(eventId);

이렇게 작업해줘야함... 그래야 안에서 렌더하기 전에 API 서버에 eventId로 GET 요청할 수 있음

[9utty]

@obvoso @Hello-IAN

[Hello-IAN]

확인했습니다~ 프로필 상에서 이벤트 클릭시 네비게이트전에 디스패치 하는 쪽으로 작업하겠습니다.

[9utty]

@Hello-IAN 내용 수정됬습니다. eventSlice가 아닌 UISlice에 SelectEventId에 디스패치 해야합니다 ㅠ

[obvoso]

확인했습니다

[Hello-IAN]

확인했습니당~