-
Notifications
You must be signed in to change notification settings - Fork 2
/
home.html
144 lines (129 loc) · 4.84 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>아이폰 12 Pro 화면</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/home.css" />
<script src="./js/toPage.js"></script>
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
<script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js"
integrity="sha384-kYPsUbBPlktXsY6/oNHSUDZoTX6+YI51f63jCPEIPFP09ttByAdxd2mEjKuhdqn4"
crossorigin="anonymous"></script>
<script>
Kakao.init("4ee3afe28b0fadc41d033b1a042da756"); // 사용하려는 앱의 JavaScript 키 입력
</script>
</head>
<body>
<div class="content">
<h2 style="font-size: 20px">포스트잇 추가</h2>
<div class="image-button-container">
<button class="image-button">
<div class="add-btn" onclick="navigateToPage(1)">
<img src="images/+.png" alt="이미지 1" />
<p><strong>개념</strong></p>
</div>
</button>
<button class="image-button" onclick="navigateToPage(2)">
<div class="add-btn">
<img src="images/+.png" alt="이미지 1" />
<p><strong>퀴즈</strong></p>
</div>
</button>
<button class="image-button" onclick="navigateToPage(3)">
<div class="add-btn">
<img src="images/+.png" alt="이미지 1" />
<p><strong>오답</strong></p>
</div>
</button>
</div>
<div class="rounded-rectangle">
<button class="button" onclick="navigateToPage(4)">타이핑</button>
</div>
</div>
<div class="static-hamburger-icon" id="hamburger-icon">☰</div>
<div class="widget">
<button class="image-button" onclick="navigateToPage(5)">
<div class="add-btn">
<img src="images/home.png" alt="이미지 2" />
</div>
</button>
<button class="image-button" onclick="navigateToPage(6)">
<div class="add-btn">
<img src="images/개념.png" alt="이미지 2" />
</div>
</button>
<button class="image-button" onclick="navigateToPage(7)">
<div class="add-btn">
<img src="images/퀴즈.png" alt="이미지 3" />
</div>
</button>
<button class="image-button" onclick="navigateToPage(8)">
<div class="add-btn">
<img src="images/오답.png" alt="이미지 4" />
</div>
</button>
</div>
<div class="menu">
<ul>
<li id="kakao-profile">
<img id="profile-image" alt="프로필" />
<span id="nickname"></span>
</li>
<li style="margin-top: 20px">
<a href="http://localhost:3000/info.html">이용안내</a>
</li>
<li><a href="javascript:void(0)">버전정보</a></li>
<li><a href="javascript:void(0)">문의사항</a></li>
<!-- <button class="api-btn" onclick="kakaoLogout()">로그아웃</button> -->
</ul>
</div>
<script>
const menu = document.querySelector(".menu");
const hamburgerIcon = document.querySelector("#hamburger-icon");
hamburgerIcon.addEventListener("click", () => {
if (menu.style.left === "0px") {
menu.style.left = "-250px";
hamburgerIcon.classList.remove("menu-open");
} else {
menu.style.left = "0px";
hamburgerIcon.classList.add("menu-open");
}
// getUserInfo 함수 호출
getUserInfo();
});
// 예시로 fetch를 사용한 클라이언트 측 코드
async function getUserInfo() {
try {
const response = await fetch("http://localhost:3000/get-user-info", {
method: "GET",
credentials: "include",
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
// 서버에서 받은 데이터 출력
console.log("Received data:", data);
// 실제 사용할 데이터가 어디에 있는지 확인
const profileImage = data.profileImage;
const nickname = data.nickname;
console.log("Profile Image:", profileImage);
console.log("Nickname:", nickname);
const profileImageDOC = document.getElementById("profile-image");
const nicknameElement = document.getElementById("nickname");
// 프로필 이미지 및 닉네임 표시
profileImageDOC.src = profileImage;
nicknameElement.textContent = nickname + "님";
} catch (error) {
console.error("Error:", error);
}
}
</script>
</body>
</html>