diff --git a/webapp/frontend/src/components/ListItem.js b/webapp/frontend/src/components/ListItem.js
index b6f1132defbdd77f16e6c67cfb6ff3395474287a..91e7a679837ac7f2affb15a9fc6101006282e5f3 100644
--- a/webapp/frontend/src/components/ListItem.js
+++ b/webapp/frontend/src/components/ListItem.js
@@ -7,6 +7,7 @@ const apiUrl = process.env.REACT_APP_API_URL;
 
 function ListItem( {crew, event, updateApplicants} ){
   const token = localStorage.getItem('authToken');
+  const userID = localStorage.getItem('userID');
 
   const [crewRegisterModal, setCrewRegisterModal] = useState(false);
   const [eventRegisterModal, setEventRegisterModal] = useState(false)
@@ -46,8 +47,30 @@ function ListItem( {crew, event, updateApplicants} ){
   const sportTypes = ["러닝", "클라이밍", "헬스"];
 
 
-  const handleCrewRegisterModal = () => {
+  const handleCrewRegisterModal = async (crewID) => {
     setCrewRegisterModal(true);
+    try {
+      console.log("get 실행", crew);
+      const response = await fetch(`${apiUrl}/api/crews/${crewID}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json', 
+          'x-auth-token': token,
+        },
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.log(errorData);
+        console.log(crewID);
+        alert(errorData);
+      } else{
+        const crewData = await response.json();
+        setCrewCapacity(crewData.currentMemberCount);
+      }
+    } catch (error) {
+      console.error(error);
+      alert(error);
+    }
   }
 
   const handleEventRegisterModal = () => {
@@ -73,7 +96,7 @@ function ListItem( {crew, event, updateApplicants} ){
 
   const handleCrewRegister = async (crewID) => {
 
-    try {
+    /*try {
       const response = await fetch(`${apiUrl}/api/crews/${crewID}`, {
         method: 'GET',
         headers: {
@@ -91,26 +114,32 @@ function ListItem( {crew, event, updateApplicants} ){
         setCrewCapacity(crewData.currentMemberCount);
       }
 
-      const postResponse = await fetch(`${apiUrl}/api/crews/${crewID}/members`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json', 
-          'x-auth-token': token,
-        },
-      });
-
-      if (postResponse.ok) {
-        console.log('크루 가입 성공:', postResponse);
-        updateApplicants(crewID, crewCapacity);
-        console.log(crew.id, crew.capacity);
-        alert('크루 가입이 완료되었습니다.');
-      } else {
-        const postErrorData = await postResponse.json();
-        alert('가입 실패:', postErrorData);
-      }
+      
     } catch (error) {
       console.error(error);
       alert(error);
+    }*/
+
+    const postResponse = await fetch(`${apiUrl}/api/crews/${crewID}/members`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json', 
+        'x-auth-token': token,
+      },
+      body: JSON.stringify({
+        'userID': userID,
+        'role': null
+      })
+    });
+
+    if (postResponse.ok) {
+      console.log('크루 가입 성공:', postResponse);
+      //updateApplicants(crewID, crewCapacity);
+      console.log(crew.id, crew.capacity);
+      alert('크루 가입이 완료되었습니다.');
+    } else {
+      const postErrorData = await postResponse.json();
+      alert('가입 실패:', postErrorData);
     }
   };
 
@@ -133,38 +162,43 @@ function ListItem( {crew, event, updateApplicants} ){
         setEventCapacity(eventData.currentMemberCount);
       }
 
-      const postResponse = await fetch(`${apiUrl}/events/${eventID}/members`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json', 
-          'x-auth-token': token,
-        },
-      });
-
-      if (postResponse.ok) {
-        console.log('모임 가입 성공:', postResponse);
-        updateApplicants(eventID, crewCapacity);
-        alert('모임 가입이 완료되었습니다.');
-      } else {
-        const postErrorData = await postResponse.json();
-        alert('가입 실패:', postErrorData);
-      }
+      
     } catch (error) {
       console.error(error);
       alert(error);
     }
+
+    const postResponse = await fetch(`${apiUrl}/events/${eventID}/members`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json', 
+        'x-auth-token': token,
+      },
+    });
+
+    if (postResponse.ok) {
+      console.log('모임 가입 성공:', postResponse);
+      //updateApplicants(eventID, crewCapacity);
+      alert('모임 가입이 완료되었습니다.');
+    } else {
+      const postErrorData = await postResponse.json();
+      alert('가입 실패:', postErrorData);
+    }
   };
   
 
   useEffect(() => {
+    console.log(crew);
     const fetchRegionData = async () => {
-      if (crew?.region) {
+      if (crew?.regionID) {
         try {
-          const response = await fetch(`${apiUrl}/api/regions/${crew.region}`);
+          const response = await fetch(`${apiUrl}/api/regions/${crew.regionID}`);
           const regionData = await response.json();
+          console.log(regionData.regionName);
 
           const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`);
           const parentRegionData = await parentResponse.json();
+          console.log(parentRegionData.regionName);
 
           setCrewRegionNames({
             regionName: regionData.regionName,
@@ -181,9 +215,9 @@ function ListItem( {crew, event, updateApplicants} ){
 
   useEffect(() => {
     const fetchRegionData = async () => {
-      if (event?.region) {
+      if (event?.regionID) {
         try {
-          const response = await fetch(`${apiUrl}/api/regions/${event.region}`);
+          const response = await fetch(`${apiUrl}/api/regions/${event.regionID}`);
           const regionData = await response.json();
 
           const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`);
@@ -208,7 +242,7 @@ function ListItem( {crew, event, updateApplicants} ){
       <div className="listingItem">
         <p className='title'>{crew.name}</p>
         <p className='location'>
-          <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{crewRegionNames.regionName} {crewRegionNames.parentRegionName}
+          <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{crewRegionNames.parentRegionName} {crewRegionNames.regionName}
         </p>
         <p className='type'>
           <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[crew.sportTypeId - 1]}
@@ -216,7 +250,7 @@ function ListItem( {crew, event, updateApplicants} ){
         <p className='people'>
           <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{crew.capacity}
         </p>
-        <button className='itemButton' onClick={handleCrewRegisterModal}>신청하기</button>
+        <button className='itemButton' onClick={()=>handleCrewRegisterModal(crew.crewID)}>신청하기</button>
 
         {crewRegisterModal && 
         <div className="modalContainer">
@@ -226,7 +260,7 @@ function ListItem( {crew, event, updateApplicants} ){
             <div className="crewName">{crew.name}</div>
             <div className="crewInfo">
               <div className="crewRegion">
-                지역 <span>{crewRegionNames.regionName} {crewRegionNames.parentRegionName}</span>
+                지역 <span>{crewRegionNames?.parentRegionName} {crewRegionNames?.regionName}</span>
               </div>
 
               <div className="crewType">
@@ -257,7 +291,7 @@ function ListItem( {crew, event, updateApplicants} ){
       <div className="listingItem">
         <p className='title'>{event.name}</p>
         <p className='location'>
-          <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{eventRegionNames.regionName} {eventRegionNames.parentRegionName}
+          <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{eventRegionNames.parentRegionName} {eventRegionNames.regionName}
         </p>
         <p className='type'>
           <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[event.sportTypeId - 1]}
@@ -265,7 +299,7 @@ function ListItem( {crew, event, updateApplicants} ){
         <p className='people'>
           <img  className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{event.capacity}
         </p>
-        <button className='itemButton' onClick={handleEventRegisterModal}>신청하기</button>
+        <button className='itemButton' onClick={()=>handleEventRegisterModal(event.evetID)}>신청하기</button>
 
         {eventRegisterModal && 
         <div className="modalContainer">
@@ -275,11 +309,11 @@ function ListItem( {crew, event, updateApplicants} ){
             <div className="eventName">{event.name}</div>
             <div className="eventInfo">
               <div className="eventRegion">
-                지역 <span>{eventRegionNames.regionName} {eventRegionNames.parentRegionName}</span>
+                지역 <span>{eventRegionNames.parentRegionName} {eventRegionNames.regionName}</span>
               </div>
 
               <div className="eventType">
-                종목 <span>{sportTypes[crew.sportTypeId - 1]}</span>
+                종목 <span>{sportTypes[event.sportTypeId - 1]}</span>
               </div>
 
               <div className="eventDate">
@@ -295,7 +329,7 @@ function ListItem( {crew, event, updateApplicants} ){
               </div>
             </div>
 
-            <button className="createRegisterButton" onClick={()=>handleEventRegister(event.id)}>참여하기</button>
+            <button className="createRegisterButton" onClick={()=>handleEventRegister(event.eventID)}>참여하기</button>
 
           </div>
         </div>
diff --git a/webapp/frontend/src/components/Mypage.js b/webapp/frontend/src/components/Mypage.js
index c8ae6f0c19ba0d0a0f5ed646ab5ab594a5a32153..5e8b5aa99f9d038960fef8ce465a3cc254195013 100644
--- a/webapp/frontend/src/components/Mypage.js
+++ b/webapp/frontend/src/components/Mypage.js
@@ -176,6 +176,7 @@ function Mypage() {
 
     //유저가 가입한 크루 데이터
     useEffect(() => {
+      console.log("유저가가입한크루어쩌구");
         if (user && user.userID) {
             fetch(`${apiUrl}/api/users/${userID}/crews?page=${crewpage}`,  {
                   method: 'GET',
@@ -195,6 +196,7 @@ function Mypage() {
                     
                     setCrews(crewsWithRegion);
                     setTotalCrewPages(Math.ceil(data.total / data.per_page)); // 총 페이지 수 설정
+                    console.log("fetchData", data, crewsWithRegion)
                 })
                 .catch((error) => console.error("크루 데이터를 가져오는 데 실패했습니다:", error));
         }
@@ -293,7 +295,7 @@ function Mypage() {
     <div className='profile'>
         <div className='myprofile'>
             <p>나의 프로필</p>
-            <img src={user.profileImage} alt="profileImg"></img> {/* 프로필 이미지 받아오기 */}
+            <img src={user.profile.profileImage} alt="profileImg"></img> {/* 프로필 이미지 받아오기 */}
         </div>
         <div className='details'>
             <div className='profileDetails'>
diff --git a/webapp/frontend/src/components/SignUp.js b/webapp/frontend/src/components/SignUp.js
index 0e58ed68aa45db8d9f04e06390c3ca1345ec8bcf..c251d31f96c656ba44cd9bb3720994d4793af353 100644
--- a/webapp/frontend/src/components/SignUp.js
+++ b/webapp/frontend/src/components/SignUp.js
@@ -59,13 +59,12 @@ function SignUp(){
       reader.onloadend = () => {
         setImagePreview(reader.result);  // 미리보기용 이미지
       };
+      reader.readAsDataURL(file); // 파일을 읽어 데이터 URL로 변환
     }
   };
 
   const handleImageUpload = async (e) => {
 
-    e.preventDefault();
-
     const formData = new FormData();
     formData.append('image', imageFile);
   
@@ -80,7 +79,7 @@ function SignUp(){
       if (response.ok) {
         // 업로드 성공시, 서버에서 반환된 이미지 URL을 받음
         const imageUrl = data.image_url;
-        return imageUrl
+        return imageUrl;
       } else {
         console.error(data.error);
         alert(data.error);
@@ -123,6 +122,8 @@ function SignUp(){
 
 const createUser = async (newUser) => {
 
+  console.log(newUser);
+
   try {
     const response = await fetch(`${apiUrl}/api/users`, {
       method: 'POST',
diff --git a/webapp/frontend/src/contexts/AuthContext.js b/webapp/frontend/src/contexts/AuthContext.js
index d19dbf5e44e80fab3ab7cc770a497ce4e6b46f99..366fa578a1dabfc6d5fee4cd698f4a7e2b26dc1a 100644
--- a/webapp/frontend/src/contexts/AuthContext.js
+++ b/webapp/frontend/src/contexts/AuthContext.js
@@ -3,17 +3,20 @@ import React, { createContext, useState, useEffect } from 'react';
 export const AuthContext = createContext();
 
 export const AuthProvider = ({ children }) => {
-  const [isLogIn, setIsLogIn] = useState(false);
+  const [isLogIn, setIsLogIn] = useState(() => {
+    // 로컬스토리지에 로그인 정보가 있으면 그 값을 사용하고, 없으면 false로 설정
+    return localStorage.getItem('isLogIn') === 'true';
+  });
 
-  /*useEffect(() => {
-    const token = localStorage.getItem('authToken');
-    if (token) {
-      setIsLogIn(true);
-    }
-  }, []);*/
+  const login = () => {
+    setIsLogIn(true);
+    localStorage.setItem('isLogIn', 'true');  // 로그인 상태를 로컬스토리지에 저장
+  };
 
-  const login = () => setIsLogIn(true);
-  const logout = () => setIsLogIn(false);
+  const logout = () => {
+    setIsLogIn(false);
+    localStorage.setItem('isLogIn', 'false');  // 로그아웃 상태를 로컬스토리지에 저장
+  };
 
   return (
     <AuthContext.Provider value={{ isLogIn, login, logout }}>