diff --git a/client/.eslintrc.json b/client/.eslintrc.json
index d9c08bc..655620b 100644
--- a/client/.eslintrc.json
+++ b/client/.eslintrc.json
@@ -22,6 +22,8 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "react/jsx-props-no-spreading" : 0,
+    "react/jsx-no-useless-fragment" : 0,
     "no-shadow" : 0,
     "no-return-assign" : 0,
     "consistent-return" : 0,
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 9f20baa..a4316b5 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -13,6 +13,7 @@ export const App: React.FC = () => {
     <>
       <Routes>
         <Route path="/" element={<MainPage />} />
+        <Route path="/main" element={<MainPage />} />
         <Route path="/sub/*" element={<Page />} />
         {/* <Route path="/ChatRoom" element={<ChatRoom />} /> */}
         {/* <Route path="*" element={<Navigate to="/" replace />} /> */}
diff --git a/client/src/Component/Atom/LocationDropDown.tsx b/client/src/Component/Atom/LocationDropDown.tsx
index b1d5d0a..ca4eb66 100644
--- a/client/src/Component/Atom/LocationDropDown.tsx
+++ b/client/src/Component/Atom/LocationDropDown.tsx
@@ -13,20 +13,28 @@ const InfoStyle = css`
   margin-left: 7px;
 `;
 
-export default function LocationDropDown({ setLocSelected, id }: { setLocSelected: (value: string) => void; id: string }) {
+export default function LocationDropDown({ locSelected, handleLocationSelected, id }: { locSelected: string; handleLocationSelected: (e: React.ChangeEvent<HTMLSelectElement>) => void; id: string }) {
   return (
-    <select css={InfoStyle} onChange={(e) => setLocSelected(e.target.value)}>
+    <select css={InfoStyle} onChange={handleLocationSelected} value={locSelected}>
       <option selected value={id} disabled>
         거주지를 선택해주세요.
       </option>
-      <option value="서울">서울</option>
-      <option value="경기">경기</option>
-      <option value="인천">인천</option>
-      <option value="대구">대구</option>
-      <option value="대전">대전</option>
-      <option value="광주">광주</option>
-      <option value="부산">부산</option>
-      <option value="울산">울산</option>
+      {locationList.map(({ id, value }) => (
+        <option key={id} value={value}>
+          {value}
+        </option>
+      ))}
     </select>
   );
 }
+
+const locationList = [
+  { id: "서울", value: "서울" },
+  { id: "경기", value: "경기" },
+  { id: "인천", value: "인천" },
+  { id: "대구", value: "대구" },
+  { id: "대전", value: "대전" },
+  { id: "광주", value: "광주" },
+  { id: "부산", value: "부산" },
+  { id: "울산", value: "울산" },
+];
diff --git a/client/src/Component/Atom/ProfileImage.tsx b/client/src/Component/Atom/ProfileImage.tsx
index 2feb10a..46a42d3 100644
--- a/client/src/Component/Atom/ProfileImage.tsx
+++ b/client/src/Component/Atom/ProfileImage.tsx
@@ -1,12 +1,14 @@
+import React from "react";
 import { css } from "@emotion/react";
 import { ProfileImageType } from "@Util/type";
 import { URL } from "@Util/URL";
+
 const defaultImage = "/Asset/meetingImage.png";
 export const ProfileImage: React.FC<ProfileImageType> = ({ type, onClick, ref, children, image }) => {
   const src = String(image).includes("/uploads") ? URL + String(image ?? defaultImage) : image ?? defaultImage;
   return (
     <div ref={ref}>
-      <img alt="ProfileImage" css={profileImageStyle({ type })} src={String(src)} onClick={onClick} />
+      <img alt="ProfileImage" aria-hidden="true" css={profileImageStyle({ type })} src={String(src)} onClick={onClick} />
       {children}
     </div>
   );
diff --git a/client/src/Component/Core/InfoImage/InfoImage.hook.tsx b/client/src/Component/Core/InfoImage/InfoImage.hook.tsx
new file mode 100644
index 0000000..a97698c
--- /dev/null
+++ b/client/src/Component/Core/InfoImage/InfoImage.hook.tsx
@@ -0,0 +1,56 @@
+import { teamState } from "@Recoil/TeamData";
+import { userState } from "@Recoil/UserData";
+import { postImage } from "@Util/data";
+import { useEffect, useRef, useState } from "react";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
+export const useHandleImageEdit = (checkPathName: boolean) => {
+  const { id, gid } = useRecoilValue(userState);
+  const setUserInfo = useSetRecoilState(userState);
+  const setTeamInfo = useSetRecoilState(teamState);
+
+  const handleImageEdit = (imageFile: Blob) => async () => {
+    const targetId = checkPathName ? id : String(gid);
+    const handler = checkPathName ? setUserInfo : setTeamInfo;
+    const url = await postImage(imageFile, targetId);
+
+    handler((prev: any) => ({
+      ...prev,
+      image: url,
+    }));
+  };
+
+  return handleImageEdit;
+};
+
+const initBlob = new Blob();
+const reader = new FileReader();
+const defaultImage = "/Asset/meetingImage.png";
+
+export const useHandleImage = (checkPathName: boolean) => {
+  const [imageFile, setImageFile] = useState<Blob>(initBlob);
+  const { image: userImage } = useRecoilValue(userState);
+  const { image: teamImage } = useRecoilValue(teamState);
+  const [profileImage, setProfileImage] = useState<string | ArrayBuffer | null>((checkPathName ? userImage : teamImage) ?? defaultImage);
+
+  const changeImage = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) return;
+    setImageFile(e.target.files[0]);
+  };
+
+  useEffect(() => {
+    if (imageFile === initBlob) return;
+    reader.onloadend = () => {
+      setProfileImage(reader.result);
+    };
+    reader.readAsDataURL(imageFile);
+  }, [imageFile]);
+
+  return { imageFile, profileImage, changeImage };
+};
+
+export const useHandleImageClick = () => {
+  const imageRef = useRef<HTMLInputElement | null>(null);
+  const handleClickImage = () => (imageRef.current as HTMLInputElement).click();
+  return { imageRef, handleClickImage };
+};
diff --git a/client/src/Component/Core/InfoImage/InfoImage.tsx b/client/src/Component/Core/InfoImage/InfoImage.tsx
new file mode 100644
index 0000000..2c10df2
--- /dev/null
+++ b/client/src/Component/Core/InfoImage/InfoImage.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { css } from "@emotion/react";
+import { ProfileImage } from "@Atom/ProfileImage";
+import { Button } from "@Atom/Button";
+import { useGetParams } from "@Hook/useGetParams";
+import { useHandleImage, useHandleImageClick, useHandleImageEdit } from "./InfoImage.hook";
+
+export const InfoImage: React.FC = () => {
+  const checkPathName = useGetParams("myInfo");
+  const { imageRef, handleClickImage } = useHandleImageClick();
+  const { imageFile, profileImage, changeImage } = useHandleImage(checkPathName);
+  const handleImageEdit = () => useHandleImageEdit(checkPathName)(imageFile);
+
+  return (
+    <div css={TeamInfoImageContainerStyle}>
+      <ProfileImage type="Big" image={profileImage} onClick={handleClickImage}>
+        <Button size="Small" onClick={handleImageEdit}>
+          Edit
+        </Button>
+      </ProfileImage>
+      <input ref={imageRef} onChange={changeImage} css={imageInputStyle} type="file" accept="image/*" />
+    </div>
+  );
+};
+
+const TeamInfoImageContainerStyle = css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const imageInputStyle = css`
+  display: none;
+`;
diff --git a/client/src/Component/Core/index.tsx b/client/src/Component/Core/index.tsx
index cfc8de9..0e632d1 100644
--- a/client/src/Component/Core/index.tsx
+++ b/client/src/Component/Core/index.tsx
@@ -8,3 +8,4 @@ export * from "./Modal";
 export * from "./MyPageSideBar";
 export * from "./NavBar/Navbar";
 export * from "./Header/Header";
+export * from "./InfoImage/InfoImage";
diff --git a/client/src/Component/Hoc/InfoImageContainer.tsx b/client/src/Component/Hoc/InfoImageContainer.tsx
deleted file mode 100644
index 2c600ab..0000000
--- a/client/src/Component/Hoc/InfoImageContainer.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { ChangeEvent, ChangeEventHandler, useEffect, useRef, useState } from "react";
-import { css } from "@emotion/react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
-import { ProfileImage } from "@Atom/ProfileImage";
-import { Button } from "@Atom/Button";
-import { postImage } from "@Util/data";
-import { userState } from "@Recoil/UserData";
-import { teamState } from "@Recoil/TeamData";
-
-const defaultImage = "/Asset/meetingImage.png";
-const TeamInfoImageContainerStyle = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const imageInputStyle = css`
-  display: none;
-`;
-export const InfoImageContainer: React.FC = () => {
-  const { id, gid } = useRecoilValue(userState);
-  const setUserInfo = useSetRecoilState(userState);
-  const setTeamInfo = useSetRecoilState(teamState);
-
-  let image: string | null;
-
-  const initBlob = new Blob();
-  const imageInputTag = useRef<HTMLInputElement | null>(null);
-  const [profileImage, setProfileImage] = useState<string | ArrayBuffer | null>(null);
-  const [imageFile, setImageFile] = useState<Blob>(initBlob);
-  const { image: userImage } = useRecoilValue(userState);
-  const { image: teamImage } = useRecoilValue(teamState);
-
-  useEffect(() => {
-    image = window.location.href.includes("myinfo") ? userImage : teamImage;
-    setProfileImage(image ?? defaultImage);
-  }, [userImage, teamImage]);
-
-  const clickImageTag = () => {
-    (imageInputTag.current as HTMLInputElement).click();
-  };
-
-  const changeImage: ChangeEventHandler<HTMLInputElement> = (event: ChangeEvent<HTMLInputElement>) => {
-    if (!event.target.files) return;
-    setImageFile(event.target.files[0]);
-  };
-
-  const handleImageEdit = async () => {
-    let targetId;
-    let handler;
-
-    if (window.location.href.includes("myinfo")) {
-      targetId = id;
-      handler = setUserInfo;
-    } else {
-      targetId = String(gid);
-      handler = setTeamInfo;
-    }
-
-    const url = await postImage(imageFile, targetId);
-
-    handler((prev: any) => ({
-      ...prev,
-      image: url,
-    }));
-  };
-
-  useEffect(() => {
-    if (imageFile === initBlob) return;
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setProfileImage(reader.result);
-    };
-    reader.readAsDataURL(imageFile);
-  }, [imageFile]);
-
-  return (
-    <div css={TeamInfoImageContainerStyle}>
-      <ProfileImage type="Big" image={profileImage} onClick={clickImageTag}>
-        <Button size="Small" onClick={handleImageEdit}>
-          Edit
-        </Button>
-      </ProfileImage>
-      <input ref={imageInputTag} onChange={changeImage} css={imageInputStyle} type="file" accept="image/*" />
-    </div>
-  );
-};
diff --git a/client/src/Component/Hoc/LoginUserRouter.tsx b/client/src/Component/Hoc/LoginUserRouter.tsx
new file mode 100644
index 0000000..7c289cc
--- /dev/null
+++ b/client/src/Component/Hoc/LoginUserRouter.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { checkLogin, passToLoginPage } from "@Util/.";
+import { ChildrenType } from "@Util/type";
+
+export const LoginUserRouter = ({ children }: ChildrenType) => {
+  // if (!checkLogin()) {
+  //   passToLoginPage();
+  //   return null;
+  // }
+  return <>{children}</>;
+};
diff --git a/client/src/Component/Hoc/index.tsx b/client/src/Component/Hoc/index.tsx
index 3acd098..42d6de4 100644
--- a/client/src/Component/Hoc/index.tsx
+++ b/client/src/Component/Hoc/index.tsx
@@ -1,5 +1,4 @@
 export * from "./InfoContainer";
-export * from "./InfoImageContainer";
 export * from "./ProfileImageContainer";
 export * from "./TeamButtonContainer";
 export * from "./UserContainer";
diff --git a/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx b/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx
index d3306e5..3f1a3b9 100644
--- a/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx
+++ b/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx
@@ -1,27 +1,23 @@
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { Button } from "@Atom/.";
 import useDropDownCloseEvent from "@Hook/useDropDownCloseEvent";
 import { TeamButtonContainer } from "@Hoc/.";
-import InviteModal from "../../Template/Modal/InviteModal";
+import InviteModal from "@Template/Modal/InviteModal";
+import { useToggleHook } from "@Hook/useToggleHook";
 
 type props = { clickUpdateButton: React.MouseEventHandler; clickExitButton: React.MouseEventHandler };
 export const TeamSettingButtonContainer = ({ clickUpdateButton, clickExitButton }: props) => {
-  const [inviteModalState, setInviteModalState] = useState(false);
+  const [inviteModalState, handleToggleInvite, handleFalseInvite] = useToggleHook();
   const modalRef = useRef<HTMLInputElement>(null);
-  useDropDownCloseEvent(modalRef, () => setInviteModalState(false));
+  useDropDownCloseEvent(modalRef, handleFalseInvite);
 
   return (
     <TeamButtonContainer>
       <div ref={modalRef}>
-        <Button
-          size="Medium"
-          onClick={() => {
-            setInviteModalState((prev) => !prev);
-          }}
-        >
+        <Button size="Medium" onClick={handleToggleInvite}>
           초대하기
         </Button>
-        {inviteModalState && <InviteModal setInviteModalState={setInviteModalState} />}
+        {inviteModalState && <InviteModal handleFalseInvite={handleFalseInvite} />}
       </div>
       <Button size="Medium" onClick={clickUpdateButton}>
         수정하기
diff --git a/client/src/Component/Organism/Info/TeamInfo.tsx b/client/src/Component/Organism/Info/TeamInfo.tsx
index b53eead..cbb30ee 100644
--- a/client/src/Component/Organism/Info/TeamInfo.tsx
+++ b/client/src/Component/Organism/Info/TeamInfo.tsx
@@ -1,7 +1,7 @@
 import React, { RefObject } from "react";
 import { css } from "@emotion/react";
+import { InfoImage } from "@Core/.";
 import { TeamInfoContainer } from "./TeamInfoContianer";
-import { InfoImageContainer } from "@Hoc/.";
 
 const TeamInfoContainerStyle = css`
   display: flex;
@@ -13,12 +13,12 @@ const TeamInfoContainerStyle = css`
   align-items: center;
 `;
 
-type props = { teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; setLocSelected: (value: string) => void };
-export const TeamInfo = ({ teamNameRef, teamInfoRef, setLocSelected }: props) => {
+type props = { locSelected: string; teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; handleLocationSelected: (e: React.ChangeEvent<HTMLSelectElement>) => void };
+export const TeamInfo = (props: props) => {
   return (
     <div css={TeamInfoContainerStyle}>
-      <InfoImageContainer />
-      <TeamInfoContainer setLocSelected={setLocSelected} teamNameRef={teamNameRef} teamInfoRef={teamInfoRef} />
+      <InfoImage />
+      <TeamInfoContainer {...props} />
     </div>
   );
 };
diff --git a/client/src/Component/Organism/Info/TeamInfoContianer.tsx b/client/src/Component/Organism/Info/TeamInfoContianer.tsx
index 6969a40..26cb225 100644
--- a/client/src/Component/Organism/Info/TeamInfoContianer.tsx
+++ b/client/src/Component/Organism/Info/TeamInfoContianer.tsx
@@ -11,17 +11,17 @@ const LabelStyle = css`
   width: 90%;
 `;
 
-type props = { teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; setLocSelected: (value: string) => void };
-export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, setLocSelected }: props) => {
-  const { id, info } = useRecoilValue(teamState);
+type props = { locSelected: string; teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; handleLocationSelected: (e: React.ChangeEvent<HTMLSelectElement>) => void };
 
+export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, locSelected, handleLocationSelected }: props) => {
+  const { id, info } = useRecoilValue(teamState);
   return (
     <InfoContainer>
       <InputLabel label="팀명" placeholder={id} refProps={teamNameRef} />
       <InputLabel label="소개" placeholder={info} refProps={teamInfoRef} />
       <div id="location">
         <p css={LabelStyle}>지역</p>
-        <LocationDropDown setLocSelected={setLocSelected} id={id} />
+        <LocationDropDown locSelected={locSelected} handleLocationSelected={handleLocationSelected} id={id} />
       </div>
     </InfoContainer>
   );
diff --git a/client/src/Component/Page/CowDogPage/CowDogPage.tsx b/client/src/Component/Page/CowDogPage/CowDogPage.tsx
index ab5148b..04e2b41 100644
--- a/client/src/Component/Page/CowDogPage/CowDogPage.tsx
+++ b/client/src/Component/Page/CowDogPage/CowDogPage.tsx
@@ -13,7 +13,6 @@ const ListContainer = css`
 `;
 
 export const CowDogPage: React.FC = () => {
-  // if (!checkLogin()) passToLoginPage();
   const searchParams = new URLSearchParams(useLocation().search);
   const person = Number(searchParams.get("person"));
 
diff --git a/client/src/Component/Page/Page/Page.tsx b/client/src/Component/Page/Page/Page.tsx
index 098009f..402bfa2 100644
--- a/client/src/Component/Page/Page/Page.tsx
+++ b/client/src/Component/Page/Page/Page.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Route, Routes } from "react-router";
 import { Header } from "@Core/.";
+import { LoginUserRouter } from "@Hoc/LoginUserRouter";
 import { ChatListPage, CowDogPage, LogInPage, MyPage, RegisterPage, RequestPage, TeamSettingPage } from "..";
 
 export const Page: React.FC = () => {
@@ -10,8 +11,22 @@ export const Page: React.FC = () => {
       <Routes>
         <Route path="/Login" element={<LogInPage />} />
         <Route path="/Register" element={<RegisterPage />} />
-        <Route path="/CowDogPage" element={<CowDogPage />} />
-        {/* <Route path="/sub/teamSetting" element={<TeamSettingPage />} /> */}
+        <Route
+          path="/CowDogPage"
+          element={
+            <LoginUserRouter>
+              <CowDogPage />
+            </LoginUserRouter>
+          }
+        />
+        <Route
+          path="/teamSetting"
+          element={
+            <LoginUserRouter>
+              <TeamSettingPage />
+            </LoginUserRouter>
+          }
+        />
         {/* <Route path="/sub/mypage" element={<MyPage />} /> */}
         {/* <Route path="/sub/chatList" element={<ChatListPage />} /> */}
         {/* <Route path="/sub/Request" element={<RequestPage />} /> */}
diff --git a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx b/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx
deleted file mode 100644
index 1ee9829..0000000
--- a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { MouseEventHandler, useRef, useState } from "react";
-import { css } from "@emotion/react";
-import { useSetRecoilState } from "recoil";
-import { createTeam, getFetch } from "@Util/data";
-import { errorState } from "@Recoil/Atom";
-import { checkLogin, passToLoginPage } from "@Util/.";
-import { TeamInfo } from "@Organism/.";
-import { TeamCreateButtonContainer } from "@Molecules/.";
-import { TEAM_INFO_URL } from "@Util/URL";
-import { userState } from "@Recoil/UserData";
-import { teamState } from "@Recoil/TeamData";
-
-const TeamCreatePageStyle = css`
-  position: relative;
-  display: flex;
-  margin: 2vh auto auto auto;
-  width: 50vw;
-  height: 70vh;
-  flex-direction: column;
-`;
-
-export const TeamCreatePage: React.FC = () => {
-  if (!checkLogin()) passToLoginPage();
-
-  const teamNameRef = useRef<HTMLInputElement>(null);
-  const teamInfoRef = useRef<HTMLInputElement>(null);
-  const [locSelected, setLocSelected] = useState<string>("");
-
-  const setUserInfo = useSetRecoilState(userState);
-  const setErrorValue = useSetRecoilState(errorState);
-  const setTeamInfo = useSetRecoilState(teamState);
-
-  const clickCreateButton: MouseEventHandler = async () => {
-    if (!teamNameRef.current || !teamInfoRef.current) return;
-
-    const teamName = teamNameRef.current.value;
-    const teamInfo = teamInfoRef.current.value;
-    const location = locSelected;
-
-    if (teamName === "") {
-      setErrorValue({ errorStr: "팀 이름을 입력해 주세요", timeOut: 1000 });
-      return;
-    }
-
-    if (location === "") {
-      setErrorValue({ errorStr: "지역을 선택해 주세요", timeOut: 1000 });
-      return;
-    }
-
-    const gid = await createTeam({ teamName, teamInfo, location });
-    if (gid === "error") {
-      setErrorValue({ errorStr: "팀 생성에 실패했습니다", timeOut: 1000 });
-      return;
-    }
-    const teamData = await getFetch({ url: TEAM_INFO_URL, query: "" });
-    setTeamInfo(teamData);
-    setUserInfo((prev) => {
-      return { ...prev, gid };
-    });
-  };
-
-  return (
-    <div css={TeamCreatePageStyle}>
-      <TeamInfo setLocSelected={setLocSelected} teamNameRef={teamNameRef} teamInfoRef={teamInfoRef} />
-      <TeamCreateButtonContainer clickCreateButton={clickCreateButton} />
-    </div>
-  );
-};
-
-export default TeamCreatePage;
diff --git a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx
index 3ecb24f..dd9e8a0 100644
--- a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx
+++ b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx
@@ -1,16 +1,11 @@
 /* eslint-disable no-console */
 import React from "react";
 import { useRecoilValue } from "recoil";
-import { TeamSettingTemplate } from "@Template/TeamSettingTemplate";
-import TeamCreatePage from "../TeamCreatepage/TeamCreatePage";
 import { userState } from "@Recoil/UserData";
-import { checkLogin, passToLoginPage } from "../../../Util";
+import { TeamCreateTemplate, TeamSettingTemplate } from "@Template/.";
 
 export const TeamSettingPage: React.FC = () => {
   const { gid } = useRecoilValue(userState);
-  if (!checkLogin()) {
-    passToLoginPage();
-  }
-
-  return <>{gid && gid !== 0 ? <TeamSettingTemplate /> : <TeamCreatePage />}</>;
+  if (gid && gid !== 0) return <TeamSettingTemplate />;
+  return <TeamCreateTemplate />;
 };
diff --git a/client/src/Component/Page/index.tsx b/client/src/Component/Page/index.tsx
index c863fa9..14bcb1b 100644
--- a/client/src/Component/Page/index.tsx
+++ b/client/src/Component/Page/index.tsx
@@ -7,5 +7,4 @@ export * from "./MyPage/MyPage";
 export * from "./Page/Page";
 export * from "./RegisterPage/RegisterPage";
 export * from "./RequestPage/RequestPage";
-export * from "./TeamCreatepage/TeamCreatePage";
 export * from "./TeamSettingPage/TeamSettingPage";
diff --git a/client/src/Component/Template/Modal/InviteModal.tsx b/client/src/Component/Template/Modal/InviteModal.tsx
index f314e2f..6213a70 100644
--- a/client/src/Component/Template/Modal/InviteModal.tsx
+++ b/client/src/Component/Template/Modal/InviteModal.tsx
@@ -25,33 +25,26 @@ const inviteModalStyle = css`
   background-color: #fff;
 `;
 
-export default function InviteModal({ setInviteModalState }: { setInviteModalState: Function }) {
+export default function InviteModal({ handleFalseInvite }: { handleFalseInvite: Function }) {
   const userIdRef = useRef<HTMLInputElement>(null);
   const setTeamInfo = useSetRecoilState(teamState);
   const setErrorValue = useSetRecoilState(errorState);
 
   const clickInvite: MouseEventHandler = async () => {
-    if (!userIdRef.current) {
-      return;
+    try {
+      const inviteUserId = validationUserId({ userIdRef });
+      inviteTeam({ userId: inviteUserId })
+        .then(({ data }) => {
+          setTeamInfo((prev: TeamInfoType) => ({
+            ...prev,
+            member: [...(prev.member ?? []), data],
+          }));
+          handleFalseInvite();
+        })
+        .catch((e) => setErrorValue({ errorStr: "초대 실패했습니다", timeOut: 1000 }));
+    } catch (e) {
+      setErrorValue({ errorStr: e as string, timeOut: 1000 });
     }
-    const inviteUserId = userIdRef.current.value;
-    if (inviteUserId === "") {
-      setErrorValue({ errorStr: "초대할 아이디를 입력해 주세요", timeOut: 1000 });
-      return;
-    }
-    const result = await inviteTeam({ userId: inviteUserId });
-    if (result === "error") {
-      setErrorValue({ errorStr: "초대 실패했습니다", timeOut: 1000 });
-      return;
-    }
-    setTeamInfo((prev: TeamInfoType) => {
-      const teamMember = prev.member ?? [];
-      return {
-        ...prev,
-        member: [...teamMember, result],
-      };
-    });
-    setInviteModalState(false);
   };
   return (
     <div css={inviteModalStyle}>
@@ -62,3 +55,9 @@ export default function InviteModal({ setInviteModalState }: { setInviteModalSta
     </div>
   );
 }
+
+const validationUserId = ({ userIdRef }: { userIdRef: React.RefObject<HTMLInputElement> }) => {
+  if (!userIdRef.current) throw new Error("시스템 에러");
+  if (userIdRef.current.value === "") throw new Error("초대할 아이디를 입력해 주세요");
+  return userIdRef.current.value;
+};
diff --git a/client/src/Component/Template/MyPageMain/MyInfo.tsx b/client/src/Component/Template/MyPageMain/MyInfo.tsx
index f809379..6e838b0 100644
--- a/client/src/Component/Template/MyPageMain/MyInfo.tsx
+++ b/client/src/Component/Template/MyPageMain/MyInfo.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import { InfoImageContainer } from "@Hoc/.";
+import { InfoImage } from "@Core/.";
 import { MyInfoContainer } from "@Organism/.";
 
 const MyInfoStyle = css`
@@ -13,7 +13,7 @@ export const MyInfo = () => {
   return (
     <div css={MyInfoStyle}>
       <MyInfoContainer />
-      <InfoImageContainer />
+      <InfoImage />
     </div>
   );
 };
diff --git a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx
new file mode 100644
index 0000000..61c6f9f
--- /dev/null
+++ b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx
@@ -0,0 +1,48 @@
+import { createTeam, getFetch } from "@Util/data";
+import { PersonInfoType, TeamInfoType } from "@Util/type";
+import { TEAM_INFO_URL } from "@Util/URL";
+import { useState } from "react";
+
+type useLocationSelectHookType = () => [string, (e: React.ChangeEvent<HTMLSelectElement>) => void, () => void];
+export const useLocationSelectHook: useLocationSelectHookType = () => {
+  const [locSelected, setLocSelected] = useState<string>("");
+  const handleLocationSelected = (e: React.ChangeEvent<HTMLSelectElement>) => setLocSelected(e.target.value);
+  const handleLocationInit = () => setLocSelected("");
+  return [locSelected, handleLocationSelected, handleLocationInit];
+};
+
+type returnType = { teamName: string; teamInfo: string; location: string };
+type validationArgsType = { teamNameRef: React.RefObject<HTMLInputElement>; teamInfoRef: React.RefObject<HTMLInputElement>; locSelected: string };
+type validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }: validationArgsType) => returnType | undefined;
+export const validationRefData: validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }) => {
+  if (!teamNameRef.current || !teamInfoRef.current) throw new Error("시스템 에러");
+
+  const teamName = teamNameRef.current.value;
+  const teamInfo = teamInfoRef.current.value;
+  const location = locSelected;
+
+  if (teamName === "") throw new Error("팀 이름을 입력해주세요");
+  if (location === "") throw new Error("지역을 선택해 주세요");
+  return { teamName, teamInfo, location };
+};
+
+type postCreateTeamFuncType = ({ teamName, teamInfo, location }: returnType) => Promise<{ gid: number; teamData: TeamInfoType } | undefined>;
+export const postCreateTeam: postCreateTeamFuncType = async ({ teamName, teamInfo, location }) => {
+  const [gid, teamData] = await Promise.all([createTeam({ teamName, teamInfo, location }), getFetch({ url: TEAM_INFO_URL, query: "" })]);
+  if (gid === "error") throw new Error("팀 생성에 실패했습니다");
+  return { gid, teamData };
+};
+
+type teamUpdateDataValidationArgsType = validationArgsType & {
+  teamInfoState: TeamInfoType;
+  userInfoState: PersonInfoType;
+};
+export const teamUpdateDataValidation = ({ teamNameRef, teamInfoRef, locSelected, teamInfoState, userInfoState }: teamUpdateDataValidationArgsType) => {
+  if (!teamNameRef.current && !teamInfoRef.current && !locSelected && !teamInfoState.id) throw new Error("시스템 에러");
+  if (teamInfoState.leader !== userInfoState.id) throw new Error("팀 리더가 아닙니다");
+  return {
+    teamName: teamNameRef?.current?.value || teamInfoState.id,
+    teamInfo: teamInfoRef?.current?.value || teamInfoState.info,
+    location: locSelected ?? teamInfoState.location,
+  };
+};
diff --git a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx
new file mode 100644
index 0000000..a369208
--- /dev/null
+++ b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx
@@ -0,0 +1,47 @@
+import React, { MouseEventHandler, useRef } from "react";
+import { css } from "@emotion/react";
+import { useSetRecoilState } from "recoil";
+import { errorState } from "@Recoil/Atom";
+import { TeamInfo } from "@Organism/.";
+import { TeamCreateButtonContainer } from "@Molecules/.";
+import { userState } from "@Recoil/UserData";
+import { teamState } from "@Recoil/TeamData";
+import { postCreateTeam, useLocationSelectHook, validationRefData } from "./TeamCreateTemplate.hook";
+
+const TeamCreatePageStyle = css`
+  position: relative;
+  display: flex;
+  margin: 2vh auto auto auto;
+  width: 50vw;
+  height: 70vh;
+  flex-direction: column;
+`;
+
+export const TeamCreateTemplate: React.FC = () => {
+  const [locSelected, handleLocationSelected] = useLocationSelectHook();
+  const teamNameRef = useRef<HTMLInputElement>(null);
+  const teamInfoRef = useRef<HTMLInputElement>(null);
+
+  const setUserInfo = useSetRecoilState(userState);
+  const setTeamInfo = useSetRecoilState(teamState);
+  const setErrorValue = useSetRecoilState(errorState);
+
+  const clickCreateButton: MouseEventHandler = async () => {
+    try {
+      const value = validationRefData({ teamNameRef, teamInfoRef, locSelected });
+      const res = await postCreateTeam(value as Exclude<typeof value, undefined>);
+      const { gid, teamData } = res as Exclude<typeof res, undefined>;
+      setTeamInfo(teamData);
+      setUserInfo((prev) => ({ ...prev, gid }));
+    } catch (e) {
+      setErrorValue({ errorStr: e as string, timeOut: 1000 });
+    }
+  };
+
+  return (
+    <div css={TeamCreatePageStyle}>
+      <TeamInfo locSelected={locSelected} handleLocationSelected={handleLocationSelected} teamNameRef={teamNameRef} teamInfoRef={teamInfoRef} />
+      <TeamCreateButtonContainer clickCreateButton={clickCreateButton} />
+    </div>
+  );
+};
diff --git a/client/src/Component/Template/TeamSettingTemplate.tsx b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx
similarity index 56%
rename from client/src/Component/Template/TeamSettingTemplate.tsx
rename to client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx
index 21c5f24..3bc0351 100644
--- a/client/src/Component/Template/TeamSettingTemplate.tsx
+++ b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx
@@ -7,7 +7,9 @@ import { TeamSettingButtonContainer } from "@Molecules/.";
 import { TeamInfo } from "@Organism/.";
 import { teamState } from "@Recoil/TeamData";
 import { userState } from "@Recoil/UserData";
-import { ProfileList } from "./Profile/ProfileList";
+import { useMovePage } from "@Hook/useMovePage";
+import { ProfileList } from "../Profile/ProfileList";
+import { teamUpdateDataValidation, useLocationSelectHook } from "./TeamCreateTemplate.hook";
 
 const TeamSettingTemPlateStyle = css`
   display: flex;
@@ -19,52 +21,41 @@ const TeamSettingTemPlateStyle = css`
 `;
 
 export const TeamSettingTemplate: React.FC = () => {
+  const [locSelected, handleLocationSelected, handleLocationInit] = useLocationSelectHook();
+  const [goMain] = useMovePage("/main");
+
   const [teamInfoState, setTeamInfoState] = useRecoilState(teamState);
   const userInfoState = useRecoilValue(userState);
-  const [locSelected, setLocSelected] = useState<string>("");
   const teamNameRef = useRef<HTMLInputElement>(null);
   const teamInfoRef = useRef<HTMLInputElement>(null);
   const profileRef = useRef<HTMLDivElement[]>([]);
   const setErrorValue = useSetRecoilState(errorState);
+
   const resetInput = () => {
     if (!teamNameRef.current || !teamInfoRef.current || !locSelected) return;
     teamNameRef.current.value = "";
     teamInfoRef.current.value = "";
-    setLocSelected("");
-  };
-  const clickExitButton: MouseEventHandler = async () => {
-    const result = await exitTeam();
-    if (result === "error") {
-      setErrorValue({ errorStr: "팀 탈출에 실패했습니다.", timeOut: 1000 });
-    }
-    window.location.replace("/main");
+    handleLocationInit();
   };
-  const clickUpdateButton: MouseEventHandler = async () => {
-    if (!teamNameRef.current && !teamInfoRef.current && !locSelected && !teamInfoState.id) return;
 
-    if (teamInfoState.leader !== userInfoState.id) {
-      setErrorValue({ errorStr: "팀 리더가 아닙니다", timeOut: 1000 });
-      return;
-    }
+  const clickExitButton: MouseEventHandler = () =>
+    exitTeam()
+      .then((res) => goMain())
+      .catch((e) => setErrorValue({ errorStr: e as string, timeOut: 1000 }));
 
-    const result = await changeTeamInfo({
-      teamName: teamNameRef?.current?.value || teamInfoState.id,
-      teamInfo: teamInfoRef?.current?.value || teamInfoState.info,
-      location: locSelected ?? teamInfoState.location,
-    });
-    if (result === "error") {
-      setErrorValue({ errorStr: "팀 정보 수정에 실패했습니다.", timeOut: 1000 });
-      return;
+  const clickUpdateButton: MouseEventHandler = async () => {
+    try {
+      const value = teamUpdateDataValidation({ teamNameRef, teamInfoRef, locSelected, teamInfoState, userInfoState });
+      const res = await changeTeamInfo(value);
+      setTeamInfoState((prev) => ({ ...prev, ...res }));
+      resetInput();
+    } catch (e) {
+      setErrorValue({ errorStr: e as string, timeOut: 1000 });
     }
-    setTeamInfoState((prev) => {
-      return { ...prev, ...result };
-    });
-    resetInput();
   };
-
   return (
     <div css={TeamSettingTemPlateStyle}>
-      <TeamInfo setLocSelected={setLocSelected} teamNameRef={teamNameRef} teamInfoRef={teamInfoRef} />
+      <TeamInfo locSelected={locSelected} handleLocationSelected={handleLocationSelected} teamNameRef={teamNameRef} teamInfoRef={teamInfoRef} />
       <ProfileList handleProfileListContainer={() => {}} datas={teamInfoState?.member} person={1} profileRef={profileRef} />
       <TeamSettingButtonContainer clickUpdateButton={clickUpdateButton} clickExitButton={clickExitButton} />
     </div>
diff --git a/client/src/Component/Template/index.tsx b/client/src/Component/Template/index.tsx
new file mode 100644
index 0000000..f915871
--- /dev/null
+++ b/client/src/Component/Template/index.tsx
@@ -0,0 +1,2 @@
+export * from "./TeamSetting/TeamCreateTemplate";
+export * from "./TeamSetting/TeamSettingTemplate";
diff --git a/client/src/Hook/useGetParams.tsx b/client/src/Hook/useGetParams.tsx
new file mode 100644
index 0000000..3381671
--- /dev/null
+++ b/client/src/Hook/useGetParams.tsx
@@ -0,0 +1,7 @@
+import { useLocation } from "react-router-dom";
+
+export const useGetParams = (search: string) => {
+  const { pathname } = useLocation();
+  const checkPathName = pathname.includes(search);
+  return checkPathName;
+};
diff --git a/client/src/util/data.ts b/client/src/util/data.ts
index 8ad48ab..b67e6a0 100644
--- a/client/src/util/data.ts
+++ b/client/src/util/data.ts
@@ -1,13 +1,11 @@
-/* eslint-disable no-console */
-/* eslint-disable no-debugger */
-import axios from "axios";
+import axios, { AxiosResponse } from "axios";
 import { TEAM_EXIT_API_URL, ACCEPT_API_URL, CHAT_MESSAGES_API_URL, DENY_API_URL, LOGIN_API_URL, LOGOUT_API_URL, POST_CHAT_API_URL, POST_IMAGE_API_URL, PROFILE_API_URL, REGISTER_API_URL, REQUEST_API_URL, TEAM_CREATE_API_URL, TEAM_INVITE_API_URL, TEAM_UPDATE_API_URL, USER_INFO_API_URL, POST_CHAT_READ_API_URL, CHECK_ID_VALIDATION_URL } from "./URL";
-import { ChangeTeamInfoType, loginInfo, PostTeamType, registerInfo } from "./type";
+import { ChangeTeamInfoType, loginInfo, PersonInfoType, PostTeamType, registerInfo } from "./type";
 import { fromImageToForm } from ".";
 
 export const changeTeamInfo = async ({ teamName, teamInfo, location }: ChangeTeamInfoType) => {
   try {
-    const { data } = await axios.post(
+    const res = await axios.post(
       TEAM_UPDATE_API_URL,
       {
         name: teamName,
@@ -16,19 +14,13 @@ export const changeTeamInfo = async ({ teamName, teamInfo, location }: ChangeTea
       },
       { withCredentials: true }
     );
-    return data;
-  } catch (error) {
-    return "error";
+    return res;
+  } catch (e) {
+    throw new Error("팀 정보 수정에 실패했습니다.");
   }
 };
 
-export const exitTeam = async () => {
-  try {
-    return await axios.post(TEAM_EXIT_API_URL, {}, { withCredentials: true });
-  } catch (error) {
-    return "error";
-  }
-};
+export const exitTeam = () => axios.post(TEAM_EXIT_API_URL, {}, { withCredentials: true });
 
 export const createTeam = async ({ teamName, teamInfo, location }: PostTeamType) => {
   try {
@@ -50,20 +42,14 @@ export const createTeam = async ({ teamName, teamInfo, location }: PostTeamType)
   }
 };
 
-export const inviteTeam = async ({ userId }: { userId: string }) => {
-  try {
-    const { data } = await axios.post(
-      TEAM_INVITE_API_URL,
-      {
-        userId,
-      },
-      { withCredentials: true }
-    );
-    return data;
-  } catch (error) {
-    return "error";
-  }
-};
+export const inviteTeam = ({ userId }: { userId: string }): Promise<AxiosResponse<PersonInfoType>> =>
+  axios.post(
+    TEAM_INVITE_API_URL,
+    {
+      userId,
+    },
+    { withCredentials: true }
+  );
 
 export const postLogin = async ({ id, pw }: loginInfo) => {
   try {
diff --git a/client/src/util/type.ts b/client/src/util/type.ts
index 6511f60..da3eca0 100644
--- a/client/src/util/type.ts
+++ b/client/src/util/type.ts
@@ -11,7 +11,7 @@ export type ImageDivType = {
 };
 
 export type ChildrenType = {
-  children?: JSX.Element | JSX.Element[];
+  children?: React.ReactNode;
 };
 
 export type InputLabelType = {