diff --git a/pages/login/join.tsx b/pages/login/join.tsx
index 97ca1081..afb1ca7c 100644
--- a/pages/login/join.tsx
+++ b/pages/login/join.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import LoginJoinContainer from "../../src/login/loginJoin/LoginJoinContainer";
+import LoginJoinContainer from "../../src/container/loginPage/loginJoin/LoginJoinContainer";
 
 const LoginJoin = () => {
   return <LoginJoinContainer />;
diff --git a/pages/login/kakao.tsx b/pages/login/kakao.tsx
index bb1395ab..89f3ac2a 100644
--- a/pages/login/kakao.tsx
+++ b/pages/login/kakao.tsx
@@ -3,7 +3,7 @@ import axios from "axios";
 import { useRouter } from "next/router";
 import { useRecoilState } from "recoil";
 import { signUpDataState } from "../../src/recoil/login/signUpState";
-import Wrapper from "../../src/login/components/Wrapper";
+import Wrapper from "../../src/container/loginPage/components/Wrapper";
 
 const Kakao = () => {
   const router = useRouter();
diff --git a/pages/login/main.tsx b/pages/login/main.tsx
index 1689a899..b94a4516 100644
--- a/pages/login/main.tsx
+++ b/pages/login/main.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import LoginMainContainer from "../../src/login/loginMain/LoginMainContainer";
+import LoginMainContainer from "../../src/container/loginPage/loginMain/LoginMainContainer";
 
 const LoginMain = () => {
   return <LoginMainContainer />;
diff --git a/pages/login/pick.tsx b/pages/login/pick.tsx
index 1de49470..08a2becd 100644
--- a/pages/login/pick.tsx
+++ b/pages/login/pick.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import LoginPickContainer from "../../src/login/loginPick/LoginPickContainer";
+import LoginPickContainer from "../../src/container/loginPage/loginPick/LoginPickContainer";
 import { useRouter } from "next/router";
 import { useRecoilState } from "recoil";
 import { signUpDataState } from "../../src/recoil/login/signUpState";
@@ -10,7 +10,7 @@ const LoginPick = () => {
 
   useEffect(() => {
     console.log(signUpData);
-  }, []);
+  }, [signUpData]);
   return <LoginPickContainer />;
 };
 
diff --git a/src/login/components/Title.tsx b/src/container/loginPage/components/Title.tsx
similarity index 100%
rename from src/login/components/Title.tsx
rename to src/container/loginPage/components/Title.tsx
diff --git a/src/login/components/Wrapper.tsx b/src/container/loginPage/components/Wrapper.tsx
similarity index 100%
rename from src/login/components/Wrapper.tsx
rename to src/container/loginPage/components/Wrapper.tsx
diff --git a/src/login/loginJoin/JoinContents.tsx b/src/container/loginPage/loginJoin/JoinContents.tsx
similarity index 86%
rename from src/login/loginJoin/JoinContents.tsx
rename to src/container/loginPage/loginJoin/JoinContents.tsx
index 5390a269..9dc620e7 100644
--- a/src/login/loginJoin/JoinContents.tsx
+++ b/src/container/loginPage/loginJoin/JoinContents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import Input from "../../components/Input";
-import Tag from "../../components/Tag";
+import Input from "../../../components/Input";
+import Tag from "../../../components/Tag";
 import styled from "styled-components";
 
 function JoinContents() {
@@ -13,8 +13,9 @@ function JoinContents() {
       <TagButtonWrapper>
         <Tag
           title="회원가입"
-          width="500px"
-          height="60px"
+          width="100%"
+          height="100%"
+          fontSize="100%"
           inversion={true}
           clickAble={true}
           onClickHandler={() => {}}
diff --git a/src/login/loginJoin/LoginJoinContainer.tsx b/src/container/loginPage/loginJoin/LoginJoinContainer.tsx
similarity index 100%
rename from src/login/loginJoin/LoginJoinContainer.tsx
rename to src/container/loginPage/loginJoin/LoginJoinContainer.tsx
diff --git a/src/login/loginMain/Horizon.tsx b/src/container/loginPage/loginMain/Horizon.tsx
similarity index 100%
rename from src/login/loginMain/Horizon.tsx
rename to src/container/loginPage/loginMain/Horizon.tsx
diff --git a/src/login/loginMain/LoginMainContainer.tsx b/src/container/loginPage/loginMain/LoginMainContainer.tsx
similarity index 95%
rename from src/login/loginMain/LoginMainContainer.tsx
rename to src/container/loginPage/loginMain/LoginMainContainer.tsx
index 5a86d505..9a8ff618 100644
--- a/src/login/loginMain/LoginMainContainer.tsx
+++ b/src/container/loginPage/loginMain/LoginMainContainer.tsx
@@ -2,10 +2,10 @@ import React, { ReactNode } from "react";
 import styled from "styled-components";
 import LoginBackground from "../../../public/svg/loginPage/loginBackground.svg";
 import Title from "../components/Title";
-import Input from "../../components/Input";
+import Input from "../../../components/Input";
 import Navigaiton from "./Navigtion";
 import Horizon from "./Horizon";
-import Tag from "../../components/Tag";
+import Tag from "../../../components/Tag";
 import SocialLogin from "./SocialLogin";
 import Wrapper from "../components/Wrapper";
 
diff --git a/src/login/loginMain/Navigtion.tsx b/src/container/loginPage/loginMain/Navigtion.tsx
similarity index 100%
rename from src/login/loginMain/Navigtion.tsx
rename to src/container/loginPage/loginMain/Navigtion.tsx
diff --git a/src/login/loginMain/SocialLogin.tsx b/src/container/loginPage/loginMain/SocialLogin.tsx
similarity index 92%
rename from src/login/loginMain/SocialLogin.tsx
rename to src/container/loginPage/loginMain/SocialLogin.tsx
index 2100c2d5..1eca7401 100644
--- a/src/login/loginMain/SocialLogin.tsx
+++ b/src/container/loginPage/loginMain/SocialLogin.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useEffect } from "react";
 import styled from "styled-components";
-import GoogleLogo from "../../../public/svg/loginPage/googleLogo.svg";
-import KakaoLogo from "../../../public/svg/loginPage/kakaoLogo.svg";
+import GoogleLogo from "../../../../public/svg/loginPage/googleLogo.svg";
+import KakaoLogo from "../../../../public/svg/loginPage/kakaoLogo.svg";
 
 function SocialLogin() {
   const Rest_api_key = process.env.NEXT_PUBLIC_REST_API_KEY; //REST API KEY
diff --git a/src/login/loginPick/ContentsTitle.tsx b/src/container/loginPage/loginPick/ContentsTitle.tsx
similarity index 100%
rename from src/login/loginPick/ContentsTitle.tsx
rename to src/container/loginPage/loginPick/ContentsTitle.tsx
diff --git a/src/login/loginPick/Explain.tsx b/src/container/loginPage/loginPick/Explain.tsx
similarity index 100%
rename from src/login/loginPick/Explain.tsx
rename to src/container/loginPage/loginPick/Explain.tsx
diff --git a/src/login/loginPick/LoginPickContainer.tsx b/src/container/loginPage/loginPick/LoginPickContainer.tsx
similarity index 100%
rename from src/login/loginPick/LoginPickContainer.tsx
rename to src/container/loginPage/loginPick/LoginPickContainer.tsx
diff --git a/src/login/loginPick/PickContents.tsx b/src/container/loginPage/loginPick/PickContents.tsx
similarity index 89%
rename from src/login/loginPick/PickContents.tsx
rename to src/container/loginPage/loginPick/PickContents.tsx
index 3f7a19bf..2d0e4a36 100644
--- a/src/login/loginPick/PickContents.tsx
+++ b/src/container/loginPage/loginPick/PickContents.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import styled from "styled-components";
 import ContentsTitle from "./ContentsTitle";
-import OwnerImage from "../../../public/svg/loginPage/owner.svg";
-import UserImage from "../../../public/svg/loginPage/user.svg";
+import OwnerImage from "../../../../public/svg/loginPage/owner.svg";
+import UserImage from "../../../../public/svg/loginPage/user.svg";
 import Explain from "./Explain";
-import Tag from "../../components/Tag";
+import Tag from "../../../components/Tag";
 import { useRouter } from "next/router";
 import { useRecoilState } from "recoil";
-import { signUpDataState } from "../../recoil/login/signUpState";
+import { signUpDataState } from "../../../recoil/login/signUpState";
 
 function PickContents({ role }: { role: "owner" | "user" }) {
   const router = useRouter();