Origin/profile

css/styleProfile.css

@@ -1,5 +1,7 @@
 * {
   background: #eae7de;
+
+  font-family: 'IBM Plex Sans KR', sans-serif;
 }
 
 a {
@@ -12,15 +14,15 @@ a {
   padding: 0 5% 0 5%;
 }
 
-#image {
+#profileImageForm {
   border: 1px solid #051619;
 
   padding: 1.5rem 2rem;
 
   margin-bottom: 1.5rem;
 }
 
-#image > img {
+#profileImageForm > img {
   width: 250px;
   height: 250px;
 
@@ -29,6 +31,12 @@ a {
   margin-bottom: 1rem;
 }
 
+#profileBtn {
+  margin-top: 1rem;
+
+  background-color: whitesmoke;
+}
+
 .boxs {
   border: 1px solid #051619;
   margin-bottom: -1px;
@@ -41,11 +49,11 @@ a {
 }
 
 .boxs > h2 {
-  flex-basis: 15%;
+  flex-basis: 20%;
 }
 
 .boxs > div {
-  flex-basis: 85%;
+  flex-basis: 80%;
 }
 
 .textFieldInput {
@@ -57,33 +65,6 @@ a {
   margin-bottom: 10px;
 }
 
-.filebox > label {
-  display: inline-block;
-  padding: .5em .75em;
-  color: black;
-  font-size: inherit;
-  line-height: normal;
-  vertical-align: middle;
-  background-color: #fdfdfd;
-  cursor: pointer;
-  border: 1px solid black;
-  border-bottom-color: black;
-  border-radius: .25em;
-}
-
-/* 파일 필드 숨기기 */
-.filebox input[type="file"] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip:rect(0,0,0,0);
-  border: 0;
-}
-
 #intro {
-  font-size: 1.5rem;
   line-height: 150%;
 }

index.html

@@ -12,6 +12,8 @@
         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
         rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@500&display=swap" rel="stylesheet">
+
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

js/main.js

@@ -1,35 +1,39 @@
 import { handleAuth, onToggle, logout } from "./pages/login.js";
 import { socialLogin } from "./pages/login.js";
 import { handleLocation, goToProfile } from "./router.js";
-// import { authService } from "./firebase.js";
-import { openEditBoxName, closeEditBoxName, changeName, openEditBoxBlog, 
-    closeEditBoxBlog, changeBlog, openEditBoxBirth, closeEditBoxBirth, 
-    changeBirth, openEditBoxText, closeEditBoxText, changeText} from "./pages/profile.js";
+import { authService } from "./firebase.js";
+import { openEditBoxName, closeEditBoxName, openEditBoxBlog, 
+    closeEditBoxBlog, openEditBoxBirth, closeEditBoxBirth, 
+    openEditBoxText, closeEditBoxText, changeProfile, onFileChange} from "./pages/profile_img.js";
+import { saveName, saveBlog, saveBirth, saveText, getBirth } from "./pages/profile_text.js";
+
+//생략 : changeName, changeBlog, changeBirth, changeText
 
 // url 바뀌면 handleLocation 실행하여 화면 변경
 window.addEventListener("hashchange", handleLocation);
 
 // 첫 랜딩 또는 새로고침 시 handleLocation 실행하여 화면 변경
 document.addEventListener("DOMContentLoaded", function () {
     // Firebase 연결상태를 감시
-    // authService.onAuthStateChanged((user) => {
+    authService.onAuthStateChanged((user) => {
         // Firebase 연결되면 화면 표시
         // handleLocation() : 화면을 띄우는 역할
+        console.log(user);
         handleLocation();
-        // const hash = window.location.hash;
-        // if (user) {
-        //     // 로그인 상태이므로 항상 팬명록 화면으로 이동
-        //     if (hash === "") {
-        //         // 로그인 상태에서는 로그인 화면으로 되돌아갈 수 없게 설정
-        //         window.location.replace("#home");
-        //     }
-        // } else {
-        //     // 로그아웃 상태이므로 로그인 화면으로 강제 이동
-        //     if (hash !== "") {
-        //         window.location.replace("");
-        //     }
-        // }
-    // });
+        const hash = window.location.hash;
+        if (user) {
+            // 로그인 상태이므로 항상 팬명록 화면으로 이동
+            if (hash === "") {
+                // 로그인 상태에서는 로그인 화면으로 되돌아갈 수 없게 설정
+                window.location.replace("#home");
+            }
+        } else {
+            // 로그아웃 상태이므로 로그인 화면으로 강제 이동
+            if (hash !== "") {
+                window.location.replace("");
+            }
+        }
+    });
 });
 // type=module, 모듈객체는 지역적으로 밖에 사용 불가. 따라서 윈도우객체에 할당함으로써 전역적으로 사용 가능해짐
 // onclick, onchange, onsubmit 이벤트 핸들러 리스트
@@ -38,8 +42,6 @@ window.handleAuth = handleAuth;
 window.goToProfile = goToProfile;
 window.socialLogin = socialLogin;
 window.logout = logout;
-// window.onFileChange = onFileChange;
-// window.changeProfile = changeProfile;
 // window.save_comment = save_comment;
 // window.update_comment = update_comment;
 // window.onEditing = onEditing;
@@ -48,13 +50,22 @@ window.logout = logout;
 //////////////////프로필////////////////////
 window.openEditBoxName = openEditBoxName;
 window.closeEditBoxName = closeEditBoxName;
-window.changeName = changeName;
+// window.changeName = changeName;
 window.openEditBoxBlog = openEditBoxBlog;
 window.closeEditBoxBlog = closeEditBoxBlog;
-window.changeBlog = changeBlog;
+// window.changeBlog = changeBlog;
 window.openEditBoxBirth = openEditBoxBirth;
 window.closeEditBoxBirth = closeEditBoxBirth;
-window.changeBirth = changeBirth;
+// window.changeBirth = changeBirth;
 window.openEditBoxText = openEditBoxText;
 window.closeEditBoxText = closeEditBoxText;
-window.changeText = changeText;
+// window.changeText = changeText;
+
+window.onFileChange = onFileChange;
+window.changeProfile = changeProfile;
+
+window.saveName = saveName;
+window.saveBlog = saveBlog;
+window.saveBirth = saveBirth;
+window.saveText = saveText;
+window.getBirth = getBirth;