Timeboxing서비스 구축
출퇴근길에 현재 4개 회사를 운영하고 있는 일론 머스크가 어떻게 시간을 효율적으로 사용해서 집중력 있게 업무를 처리하고 시간관리를 하는가에 대한 영상을 봤습니다.
timeboxing이란??
저 역시 노트에 날마다 해야할일을 마구잡이로 적은 뒤, 그날 처리한 일을 하나씩 지우긴 했습니다만 뭔가 시스템적으로 이런 부분이 있었으면 좋겠다고 생각하여 ghatgpt와 함께 해당 서비스를 구축해 보기로 마음을 먹고 바로 시작하였습니다
다음은 어떻게 질의응답과정을 시작했고 어떻게 초안을 만들었는지에 대한 내용입니다
아래와 같이 마음먹고 생각한 서비스를 10분 만에 만들었습니다
여기에 추가로 userfriendly 하게 ui를 구성하고 database저장하고 이를 기반으로 사용자 간에 누가 더 시간을 효율적으로 사용하였는지에 대한 비교까지 할 수 있게 재밌는 서비스를 만들어 가려고 합니다
결과물
-ask to gpt-
timeboxing webservice를 만들려고 해 화면을 두 개로 나눠서 왼쪽 위에는 가장 중요한 오늘의 업무 세 개를 기입하고, 그 밑에는 생각나는 업무를 마구잡이로 적을 수 있도록 하는 화면을 구성하고, 오른쪽화면에는 time slot을 구성해서 시간별로 업무처리 할 수 있는 스케줄표를 쓸 수 있도록 하고 싶어 html, css, js 파일을 만들어 주세요
해당 html을 bootstrap이나 mui를 이용해서 멋있게 꾸며줘, 그리고 기입한 업무들을 database에 저장할 수 있는 javascript도 구성해 주세요
---- 답변 코드---
<!DOCTYPE html>
<html>
<head>
<title>Timeboxing 웹 서비스</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#container {
display: flex;
flex-direction: row;
width: 800px;
height: 500px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#left-pane {
flex: 1;
padding: 20px;
background-color: #f2f2f2;
border-right: 1px solid #ddd;
}
#left-pane h2 {
margin-top: 0;
}
#tasks {
margin-bottom: 20px;
}
#right-pane {
flex: 2;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
td input {
width: 100%;
border: none;
}
td input[type="time"] {
text-align: center;
}
td input[type="text"] {
text-align: left;
}
td textarea {
width: 100%;
height: 100%;
border: none;
}
#saveSchedule {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="left-pane">
<h2>오늘의 업무</h2>
<div id="tasks">
<table>
<tr>
<th>시간</th>
<th>업무</th>
</tr>
<tr>
<td><input type="time"></td>
<td><input type="text" placeholder="업무 1"></td>
</tr>
<tr>
<td><input type="time"></td>
<td><input type="text" placeholder="업무 2"></td>
</tr>
<tr>
<td><input type="time"></td>
<td><input type="text" placeholder="업무 3"></td>
</tr>
</table>
</div>
<h2>생각나는 업무</h2>
<textarea rows="6" cols="25" placeholder="업무를 적어주세요"></textarea>
<div id="saveSchedule">
<button class="btn btn-primary">저장</button>
</div>
</div>
<div id="right-pane">
<table>
<tr>
<th>시간</th>
<th>업무</th>
</tr>
<tr>
<td>09:00</td>
<td></td>
</tr>
<tr>
<td>10:00</td>
<td></td>
</tr>
<tr>
<td>11:00</td>
<td></td>
</tr>
<!-- 나머지 시간 슬롯을 추가로 작성하세요 -->
</table>
</div>
</div>
<script>
// 저장 버튼 클릭 시 스케줄 저장
var saveButton = document.querySelector('#saveSchedule button');
saveButton.addEventListener('click', function() {
var scheduleTable = document.getElementById('right-pane').querySelector('table');
var timeInputs = document.querySelectorAll('#left-pane table input[type="time"]');
var taskInputs = document.querySelectorAll('#left-pane table input[type="text"]');
var additionalTasks = document.querySelector('#left-pane textarea');
// 스케줄 표의 각 행을 돌면서 시간과 업무를 입력합니다.
for (var i = 0; i < timeInputs.length; i++) {
var time = timeInputs[i].value;
var task = taskInputs[i].value;
var scheduleRow = scheduleTable.rows[i + 1];
scheduleRow.cells[1].textContent = task;
}
// 생각나는 업무를 스케줄 표의 마지막 열에 입력합니다.
var lastRow = scheduleTable.rows[scheduleTable.rows.length - 1];
lastRow.cells[1].textContent = additionalTasks.value;
alert('스케줄이 저장되었습니다.');
});
</script>
</body>
</html>
댓글