Skip to content

Commit 4bc2895

Browse files
soheeGitsoheeGit
committed
250612
1 parent bf8cba8 commit 4bc2895

5 files changed

Lines changed: 222 additions & 0 deletions

File tree

‎programming/sunflower/docs/form.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const promptForm = document.querySelector('#promptForm');
2+
const promptText = document.querySelector('#promptText');
3+
4+
promptForm.addEventListener('submit', async (event) => {
5+
event.preventDefault();
6+
// alert('폼 제출!')
7+
const promptTextValue = promptText.value.trim();
8+
// alert(`입력된 프롬프트: ${promptTextValue}`);
9+
if (!promptTextValue) {
10+
alert('프롬프트를 입력해주세요.');
11+
return;
12+
}
13+
// 페치 시 폼 버튼 disabled
14+
const submitButton = document.querySelector('#promptForm button');
15+
submitButton.disabled = true;
16+
// 프롬프트 처리
17+
try {
18+
const baseUrl = 'https://annoying-sunbae.onrender.com'; // 이걸 바꾸면 됩니다
19+
const response = await fetch(`${baseUrl}/api/prompt`, {
20+
method: 'POST',
21+
// Fetch시 직렬화하세요...
22+
body: JSON.stringify({ text: promptTextValue }),
23+
headers: {
24+
'Content-Type': 'application/json'
25+
}
26+
});
27+
if (!response.ok) {
28+
alert('프롬프트 처리 중 오류가 발생했습니다.');
29+
return;
30+
}
31+
const result = await response.json();
32+
// alert(JSON.stringify(result));
33+
// 결과를 화면에 표시
34+
const promptDataId = document.querySelector('#promptDataId');
35+
const promptDataQuestion = document.querySelector('#promptDataQuestion');
36+
const promptDataAnswer = document.querySelector('#promptDataAnswer');
37+
promptDataId.textContent = result.id;
38+
promptDataQuestion.textContent = result.question;
39+
promptDataAnswer.textContent = result.answer;
40+
// 복사 관련
41+
const pageUrl = 'https://qus0in.github.io/sunflower';
42+
const shareLink = document.querySelector('#shareLink');
43+
shareLink.value = `${pageUrl}/history/?id=${result.id}`;
44+
const openLink = document.querySelector('#openLink');
45+
openLink.href = `${pageUrl}/history/?id=${result.id}`;
46+
const promptData = document.querySelector('#promptData');
47+
promptData.style.display = 'block';
48+
} finally {
49+
// 다 끝나면
50+
submitButton.disabled = false;
51+
}
52+
});

‎programming/sunflower/docs/history.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
document.addEventListener('DOMContentLoaded', async () => {
2+
const urlParams = new URLSearchParams(window.location.search);
3+
const promptId = urlParams.get('id');
4+
if (!promptId) {
5+
alert('프롬프트 ID가 제공되지 않았습니다.');
6+
return;
7+
}
8+
// QueryString(id) 처리
9+
const baseUrl = 'https://annoying-sunbae.onrender.com'; // 이걸 바꾸면 됩니다
10+
const response = await fetch(`${baseUrl}/api/prompt/${promptId}`, {
11+
method: 'GET',
12+
headers: {
13+
'Content-Type': 'application/json'
14+
}
15+
});
16+
if (!response.ok) {
17+
alert('프롬프트 기록을 가져오는 중 오류가 발생했습니다.');
18+
return;
19+
}
20+
const result = await response.json();
21+
// alert(JSON.stringify(result));
22+
// 결과를 화면에 표시
23+
const promptDataId = document.querySelector('#promptDataId');
24+
const promptDataQuestion = document.querySelector('#promptDataQuestion');
25+
const promptDataAnswer = document.querySelector('#promptDataAnswer');
26+
promptDataId.textContent = result.id;
27+
promptDataQuestion.textContent = result.question;
28+
promptDataAnswer.textContent = result.answer;
29+
// 복사 관련
30+
const pageUrl = 'https://qus0in.github.io/sunflower';
31+
const shareLink = document.querySelector('#shareLink');
32+
shareLink.value = `${pageUrl}/history/?id=${result.id}`;
33+
const promptData = document.querySelector('#promptData');
34+
promptData.style.display = 'block';
35+
});

‎programming/sunflower/docs/history/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<!-- <html lang="ko" xmlns:th="http://www.thymeleaf.org"> -->
3+
<html lang="ko">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>그거 잘됐다!</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"
11+
crossorigin="anonymous">
12+
<!-- <link rel="stylesheet" href="/style.css"> -->
13+
<link rel="stylesheet" href="../style.css">
14+
</head>
15+
<body class="bg-light">
16+
<div class="container py-5">
17+
<h1 class="mb-4">그거 잘 됐다! 원영적 사고 생성기</h1>
18+
<div id="promptData" class="card" style="display: none;">
19+
<div class="card-body">
20+
<h6 class="card-subtitle text-muted mb-3">
21+
ID: <span id="promptDataId">1</span>
22+
</h6>
23+
<p class="mb-2">
24+
<strong>질문:</strong> <span id="promptDataQuestion"></span>
25+
</p>
26+
<p>
27+
<strong>답변:</strong> <span id="promptDataAnswer"></span>
28+
</p>
29+
30+
<div class="mt-4">
31+
<label for="shareLink" class="form-label">공유 링크</label>
32+
<div class="input-group">
33+
<input type="text"
34+
id="shareLink"
35+
class="form-control"
36+
readonly
37+
value=""/>
38+
</div>
39+
<a href="../"
40+
class="btn btn-sm btn-primary mt-3">
41+
다시 질문하기
42+
</a>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
49+
integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
50+
crossorigin="anonymous"></script>
51+
<script src="../history.js"></script>
52+
</body>
53+
</html>

‎programming/sunflower/docs/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<!-- <html lang="ko" xmlns:th="http://www.thymeleaf.org"> -->
3+
<html lang="ko">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>그거 잘됐다!</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"
11+
crossorigin="anonymous">
12+
<!-- <link rel="stylesheet" href="/style.css"> -->
13+
<link rel="stylesheet" href="./style.css">
14+
</head>
15+
<body class="bg-light">
16+
<div class="container py-5">
17+
<h1 class="mb-4">그거 잘 됐다! 원영적 사고 생성기</h1>
18+
19+
<!-- <form th:action="@{/}" th:object="${promptForm}" method="post" class="mb-5"> -->
20+
<form method="post" class="mb-5" id="promptForm">
21+
<div class="input-group">
22+
<span class="input-group-text">텍스트</span>
23+
<!-- <input type="text"
24+
th:field="*{text}"
25+
class="form-control"
26+
placeholder="입력하세요"> -->
27+
<input type="text"
28+
class="form-control"
29+
placeholder="입력하세요"
30+
id="promptText">
31+
<button type="submit" class="btn btn-primary">생각 바꾸기</button>
32+
</div>
33+
</form>
34+
35+
<div id="promptData" class="card" style="display: none;">
36+
<div class="card-body">
37+
<h6 class="card-subtitle text-muted mb-3">
38+
ID: <span id="promptDataId">1</span>
39+
</h6>
40+
<p class="mb-2">
41+
<strong>질문:</strong> <span id="promptDataQuestion"></span>
42+
</p>
43+
<p>
44+
<strong>답변:</strong> <span id="promptDataAnswer"></span>
45+
</p>
46+
47+
<div class="mt-4">
48+
<label for="shareLink" class="form-label">공유 링크</label>
49+
<div class="input-group">
50+
<input type="text"
51+
id="shareLink"
52+
class="form-control"
53+
readonly
54+
value=""/>
55+
</div>
56+
<a href=""
57+
id="openLink"
58+
target="_blank"
59+
class="btn btn-sm btn-primary mt-3">
60+
새 창에서 열기
61+
</a>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
68+
integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
69+
crossorigin="anonymous"></script>
70+
<script src="./form.js"></script>
71+
</body>
72+
</html>

‎programming/sunflower/docs/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@font-face {
2+
font-family: 'omyu_pretty';
3+
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2') format('woff2');
4+
font-weight: normal;
5+
font-style: normal;
6+
}
7+
8+
body {
9+
font-family: "omyu_pretty", serif;
10+
}

0 commit comments

Comments
 (0)