Merge pull request #35 from 기능 구현 완료

Feat/schedule invitation 기능 구현 완료

Author: haruharuganda

src/components/mypage/ InvitationCard.jsx

@@ -1,29 +1,59 @@
 import React from "react";
-import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import {
+  refuseInvitation,
+  acceptInvitation,
+} from "../../redux/modules/InvitationSlice";
 
 const InvitationCard = ({ invit }) => {
   console.log("뭘까요?", invit);
+  console.log("뭘까요?2", invit.invitees[0].username);
+
+  const dispatch = useDispatch();
+
+  const onRefuseHanddler = (e) => {
+    e.stopPropagation();
+    const result = window.confirm("거절?");
+    if (result) {
+      return dispatch(refuseInvitation(invit.eventId));
+    }
+  };
+
+  const onAcceptHanddler = (e) => {
+    e.stopPropagation();
+    const result = window.confirm("수락?");
+    if (result) {
+      return dispatch(acceptInvitation(invit.eventId));
+    }
+  };
 
   return (
     <div>
-      <div className="rounded-[10px] mx-[20px] w-[335px] h-[184px] bg-gray-500">
-        <div className="flex gap-[50px] relative top-[16px] ">
-          <div className="flex ml-[23px]  gap-[20px]">
+      <div className="rounded-[10px] my-[10px] mx-[20px] w-[335px] h-[184px] bg-gray-500">
+        <div className="flex gap-[50px] relative top-[16px]">
+          <div className="flex ml-[23px] gap-[20px]">
             <span className="text-sm">{invit.date}</span>
             <span className="text-sm">{invit.time}</span>
           </div>
-          <span className="text-sm">from.{invit.invitees.username}</span>
+          {invit.invitees.map((invitees) => {
+            console.log("이름 맵", invitees);
+            return <span className="text-sm">from.{invitees.username}</span>;
+          })}
         </div>
-        <div className="ml-[23px] relative top-[20px]">
-          <div className="p-2 text-md">
-            일이삼사오육칠팔구십일이삼사오육칠팔구십
-          </div>
+        <div className="mx-[23px] relative top-[20px]">
+          <div className="h-[58px] truncate text-md">{invit.subject}</div>
         </div>
-        <div className="flex relative top-[44px] h-[57px] text-center items-center border-t-[1px] border-[#BBD7FF] border-solid">
-          <div className="flex items-center justify-center flex-1 h-full text-center text-md">
+        <div className="flex relative top-[50px] h-[57px] text-center items-center border-t-[1px] border-[#BBD7FF] border-solid">
+          <div
+            onClick={onRefuseHanddler}
+            className="flex items-center justify-center flex-1 h-full text-center text-md"
+          >
             거절
           </div>
-          <div className="flex text-center justify-center items-center flex-1 border-l-[1px] h-full border-[#BBD7FF] border-solid text-md">
+          <div
+            onClick={onAcceptHanddler}
+            className="flex text-center justify-center items-center flex-1 border-l-[1px] h-full border-[#BBD7FF] border-solid text-md"
+          >
             수락
           </div>
         </div>

src/components/mypage/Profile.jsx

@@ -25,7 +25,7 @@ const Profile = () => {
     <div>
       <div className="flex p-5 gap-[30px] justify-items-center">
         <div className="p-2  w-[86px] h-[86px]">
-          <img className="rounded-full" src={basicImg} />
+          <img className="rounded-full" src={profileImage} alr="이미지" />
         </div>
         <div className="inline-block pt-2">
           <div className="text-lg font-semibold leading-[21px]">

src/components/mypage/ScheduleInvitation.jsx

@@ -5,13 +5,13 @@ import { __getInvitation } from "../../redux/modules/InvitationSlice";
 import InvitationCard from "./ InvitationCard";
 
 const ScheduleInvitation = () => {
-  localStorage.setItem("nickname", "동퐈");
   const nickname = localStorage.getItem("nickname");
 
   const dispatch = useDispatch();
   const { isLoading, error, data } = useSelector(
     (state) => state.InvitationSlice
   );
+  console.log("무슨 스테이트?", data);
 
   useEffect(() => {
     dispatch(__getInvitation());

src/components/signup/SetProfileImg.jsx

@@ -5,6 +5,7 @@ import { SignupApi } from "../../api/Signup";
 import IsModal from "../modal/Modal";
 import axios from "axios";
 import { useNavigate } from "react-router";
+import { instance } from "../../shared/AxiosInstance";
 
 const SetProfileImg = () => {
   const navigate = useNavigate();
@@ -44,7 +45,7 @@ const SetProfileImg = () => {
     }
 
     if (singup === "emailLogin") {
-      const url = "http://hayangaeul.shop/auth/signup";
+      const url = "https://eb.jxxhxxx.shop/auth/signup";
       const data = {
         username: userInfo.username,
         nickname: userInfo.nickname,
@@ -53,7 +54,7 @@ const SetProfileImg = () => {
       };
       sginupAxios({ data, formData, url });
     } else {
-      const url = "http://hayangaeul.shop/social/signup";
+      const url = "https://eb.jxxhxxx.shop/social/signup";
       const data = {
         username: NameNickName.nickname,
         nickname: NameNickName.username,
@@ -125,7 +126,7 @@ const SetProfileImg = () => {
             <label htmlFor="profileImg">
               <div className=" h-[86px] w-[86px] justify-center mx-auto">
                 <img
-                  className="rounded-full h-full w-full"
+                  className="w-full h-full rounded-full"
                   src={image}
                   alt="프로필이미지"
                 />

src/redux/modules/InvitationSlice.jsx

@@ -22,7 +22,7 @@ const initialState = {
   isLoading: false,
   error: null,
 };
-
+//초대 스케줄 가져오기
 export const __getInvitation = createAsyncThunk(
   "getInvitation",
   async (payload, thunkAPI) => {
@@ -37,18 +37,58 @@ export const __getInvitation = createAsyncThunk(
     }
   }
 );
+//초대 스케줄 거절
+export const refuseInvitation = (payload) => {
+  return async function (dispatch) {
+    await instance
+      .post(`/events/${payload}/rejection`)
+      .then((res) => {
+        console.log("거절후", res);
+        dispatch(__getInvitation());
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+};
+//초대 스케줄 수락
+export const acceptInvitation = (payload) => {
+  return async function (dispatch) {
+    await instance
+      .post(`/events/${payload}/acceptance`)
+      .then((res) => {
+        console.log("수락후", res);
+        dispatch(__getInvitation());
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+};
 
 export const invitationSlice = createSlice({
   name: "invitation",
   initialState,
-  reducers: {},
+  reducers: {
+    // isLogin: (state, action) => {
+    //   console.log(action.payload);
+    //   state.isLogin = action.payload;
+    // },
+    // infoList: (state, action) => {
+    //   state.infoList = action.payload;
+    // },
+    // gethistorys: (state, action) => {
+    //   state.historyList = action.payload;
+    // },
+  },
   extraReducers: {
     [__getInvitation.pending]: (state) => {
       state.isLoading = true;
     },
     [__getInvitation.fulfilled]: (state, action) => {
       state.isLoading = false;
-      state.todos = action.payload;
+      state.data = action.payload.data;
+      console.log(state.datas);
     },
     [__getInvitation.rejected]: (state, action) => {
       state.isLoading = false;