Merge pull request #129 from gnims-project/dev

Upload/Main Merge #100

Author: AngelaChaejung

src/components/Schedule/ScheduleDetail.jsx

@@ -46,12 +46,16 @@ const ScheduleDetail = () => {
            `}
           >
             <div className="flex flex-row-reverse ">
-              <img
-                className={`h-[20px] ${isHidden} row cursor-pointer`}
-                src={kebab}
-                alt="케밥메뉴"
+              <div
+                className="w-[40px] mr-[-30px] right-0"
                 onClick={showModalHandler}
-              />
+              >
+                <img
+                  className={`h-[20px] ${isHidden} row cursor-pointer`}
+                  src={kebab}
+                  alt="케밥메뉴"
+                />
+              </div>
             </div>
             <div className="flex space-x-3 text-[18px]  font-light ">
               <div>{schedule.date}</div> <div> {time}</div>

src/components/button/LoginButton.jsx

@@ -7,14 +7,18 @@ const SearchCards = ({ userInfo }) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [isFollowed, setIsFollowed] = useState(userInfo.isFollowed === true);
-  console.log(isFollowed);
 
   const [btnColor, setBtnColor] = useState(
     userInfo.isFollowed === true ? null : "#002C51"
   );
 
   const handleClick = (e) => {
-    dispatch(__postFollowState(userInfo.userId));
+    dispatch(
+      __postFollowState({
+        id: userInfo.userId,
+        state: "following",
+      })
+    );
     setIsFollowed(!isFollowed);
     if (isFollowed) setBtnColor("#002C51");
     else setBtnColor(null);

src/components/follow/SearchCards.jsx

@@ -14,17 +14,14 @@ const UserSearch = () => {
   const onUserSearch = (event) => {
     setLoading(true);
     const { value } = event.target;
-    console.log("test");
     Settime(() => 1000);
-    handlePrice(value);
+    handleSearch(value);
   };
 
-  const handlePrice = debounce(async (payload) => {
+  const handleSearch = debounce(async (payload) => {
     try {
-      console.log(payload);
       const response = await UserApi.userSearch(payload);
       const userInfo = response.data;
-      console.log(userInfo);
       setUser(() => userInfo);
       setLoading(false);
     } catch (e) {
@@ -33,7 +30,7 @@ const UserSearch = () => {
   }, time);
 
   useEffect(() => {
-    handlePrice();
+    handleSearch();
   }, []);
 
   return (
@@ -51,7 +48,7 @@ const UserSearch = () => {
             className=" cursor-pointer"
             onClick={() => {
               Settime(() => 0);
-              handlePrice(userSearchName.current.value);
+              handleSearch(userSearchName.current.value);
             }}
           >
             <img

src/components/follow/UserSearch.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import IsModal from "../modal/Modal";
 import kakaologo from "../../img/kakao_login_medium_narrow.png";
 import { KAKAO_AUTH_URL } from "../../shared/OAuth";
-import LoginButton from "../button/LoginButton";
+import KakaoLogin from "./KakaoLogin";
 import "../style/login.css";
 import { __emailLogin } from "../../redux/modules/LoginSlice";
 import { useDispatch, useSelector } from "react-redux";
@@ -153,7 +153,7 @@ const EmailLogin = () => {
           <form className="mt-[-40px]">
             <div className=" grid grid-row-3 gap-[10px]">
               <div className="">
-                <div className="grid  grid-row-2">
+                <div className="grid grid-row-2">
                   <Label htmlFor="userEmail">이메일</Label>
                   <LoginSignupInputBox
                     type="email"
@@ -234,7 +234,7 @@ const EmailLogin = () => {
               </p>
             </div>
             <div className="text-center">
-              <LoginButton onEvent={onClickKakaoLongin} img={kakaologo} />
+              <KakaoLogin onEvent={onClickKakaoLongin} img={kakaologo} />
               <p className="mt-[20px] text-[#12396F] font-[400] text-[14px]">
                 카카오
               </p>

src/components/login/EmailLogin.jsx

@@ -1,17 +1,18 @@
 import React from "react";
-import kakaologo from "../../img/kakao_login_medium_narrow.png";
-import { KAKAO_AUTH_URL } from "../../shared/OAuth";
 
-const KakaoLogin = () => {
-  //버튼을 눌렀을때 인가 코드를 받아기 위한 주소로 넘어감
-  const onClickKakaoLongin = () => {
-    window.location.href = KAKAO_AUTH_URL;
-  };
+const LoginButton = ({ onEvent, img }) => {
   return (
-    <div onClick={onClickKakaoLongin}>
-      <img src={kakaologo} alt="카카오로그인"></img>
+    <div
+      className="h-[60px] w-[60px] justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
+      onClick={onEvent}
+    >
+      <img
+        className="h-full w-full rounded-full"
+        src={img}
+        alt="로그인버튼들"
+      />
     </div>
   );
 };
 
-export default KakaoLogin;
+export default LoginButton;

src/components/login/KakaoLogin.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import LoadingPage from "../../page/LoadingPage";
 import { __kakaologin } from "../../redux/modules/LoginSlice";
 
 //인가코드를 백으로 전달하기 위한 페이지
@@ -15,7 +16,11 @@ const KakaoLoginLoding = () => {
   useEffect(() => {
     dispatch(__kakaologin(code));
   });
-  return <div>카카오 로딩 페이지</div>;
+  return (
+    <div>
+      <LoadingPage />
+    </div>
+  );
 };
 
 export default KakaoLoginLoding;

src/components/login/KakaoLoginLoding.jsx

@@ -13,7 +13,8 @@ const FollowingModal = ({ setFollowingListOpen }) => {
     sessionStorage.setItem("selectedJoinerNames", filteredSelectedNames);
     setFollowingListOpen(false);
   };
-  const followingList = useSelector((state) => state.FollowSlice.followingList);
+
+  const following = useSelector((state) => state.FollowSlice.following);
   useEffect(() => {
     dispatch(__getFollowing());
   }, [dispatch]);
@@ -28,7 +29,7 @@ const FollowingModal = ({ setFollowingListOpen }) => {
         <div className="text-black pt-8 items-center w-[300px] h-[560px] text-center rounded-[16px] mt-[60px] z-20 bg-white ">
           참여자 선택
           <div className="overflow-auto h-[400px] mt-[25px]">
-            {followingList.map((following) => {
+            {following.followingList?.map((following) => {
               return (
                 <JoinerList
                   key={following.followId}

src/components/modal/FollowingModal.jsx

@@ -13,7 +13,6 @@ const PastEvents = () => {
   const profileImg = sessionStorage.getItem("profileImage");
 
   useEffect(() => {
-    console.log("실행");
     dispatch(__getPastSchedlue());
   }, []);
 

src/components/mypage/PastEvents.jsx

@@ -13,10 +13,10 @@ const Profile = () => {
 
   //팔로잉과 팔로워 수를 가져오는 스테이트
   const followerCounter = useSelector(
-    (state) => state.FollowSlice.followerCount
+    (state) => state.FollowSlice.follower.followerCount
   );
   const followingCounter = useSelector(
-    (state) => state.FollowSlice.followingCount
+    (state) => state.FollowSlice.following.followingCount
   );
   //로컬 스토리지에 있는 데이터를 가져오는 코드
   const nickname = sessionStorage.getItem("nickname");
@@ -126,7 +126,7 @@ const Profile = () => {
         <div
           onClick={() => {
             sessionStorage.clear();
-            navigate("/main");
+            navigate("/login");
           }}
           className="flex gap-[130px] mt-[22px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px] cursor-pointer"
         >

src/components/mypage/Profile.jsx

@@ -46,12 +46,16 @@ const ScheduleDetail = () => {
            `}
           >
             <div className="flex flex-row-reverse ">
-              <img
-                className={`h-[20px] ${isHidden} row cursor-pointer`}
-                src={kebab}
-                alt="케밥메뉴"
+              <div
+                className="w-[40px] mr-[-30px] right-0"
                 onClick={showModalHandler}
-              />
+              >
+                <img
+                  className={`h-[20px] ${isHidden} row cursor-pointer`}
+                  src={kebab}
+                  alt="케밥메뉴"
+                />
+              </div>
             </div>
             <div className="flex space-x-3 text-[18px]  font-light ">
               <div>{schedule.date}</div> <div> {time}</div>

src/components/schedule/ScheduleDetail.jsx

@@ -46,7 +46,7 @@ export const __getFollowing = createAsyncThunk(
 export const __postFollowState = createAsyncThunk(
   "getFollowState",
   async (payload, thunkAPI) => {
-    console.log("팔로우 스테이트", payload.state);
+    console.log("팔로우 스테이트", payload);
     try {
       const data = await instance.post(`/friendship/followings/${payload.id}`);
       if (payload.state === "follower") {

src/redux/modules/FollowSlice.jsx

@@ -59,7 +59,7 @@ export const __kakaologin = createAsyncThunk(
             const nickname = res.data.data.nickname;
             const userId = res.data.data.userId;
             console.log(nickname);
-            sessionStorage.setItem("token", accessToken);
+            sessionStorage.setItem("accessToken", accessToken);
             sessionStorage.setItem("nickname", nickname);
             sessionStorage.setItem("userId", userId);