vibsin9322/jaryo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Web-based file management system (자료실)

Browse Source 
- Complete CRUD functionality for file records
- Hybrid Supabase cloud database + localStorage support
- User authentication and authorization
- File upload with cloud storage
- Search, filtering, and categorization features
- Responsive design with offline capabilities

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
vibsin9322
2025-08-19 12:51:49 +09:00
commit ac506321e8
7 changed files with 2314 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
index.html Normal file
View File

@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자료실 - CRUD 시스템</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
</head>
<body>
<div class="container">
<header>
<h1>📚 자료실 관리 시스템</h1>
<p>파일과 문서를 효율적으로 관리하세요</p>
<div id="authSection" class="auth-section">
<div id="authButtons" class="auth-buttons">
<button id="loginBtn" class="auth-btn">🔑 로그인</button>
<button id="signupBtn" class="auth-btn">👤 회원가입</button>
</div>
<div id="userInfo" class="user-info" style="display: none;">
<span id="userEmail"></span>
<span id="syncStatus" class="sync-status online">🟢 온라인</span>
<button id="logoutBtn" class="auth-btn">🚪 로그아웃</button>
</div>
</div>
</header>
<div class="search-section">
<input type="text" id="searchInput" placeholder="제목, 설명, 카테고리로 검색...">
<select id="categoryFilter">
<option value="">전체 카테고리</option>
<option value="문서">문서</option>
<option value="이미지">이미지</option>
<option value="동영상">동영상</option>
<option value="프레젠테이션">프레젠테이션</option>
<option value="기타">기타</option>
</select>
<button id="searchBtn">🔍 검색</button>
</div>
<div class="form-section">
<h2>📁 새 자료 추가</h2>
<form id="fileForm">
<div class="form-group">
<label for="fileTitle">제목 *</label>
<input type="text" id="fileTitle" required>
</div>
<div class="form-group">
<label for="fileDescription">설명</label>
<textarea id="fileDescription" rows="3"></textarea>
</div>
<div class="form-group">
<label for="fileCategory">카테고리 *</label>
<select id="fileCategory" required>
<option value="">카테고리 선택</option>
<option value="문서">문서</option>
<option value="이미지">이미지</option>
<option value="동영상">동영상</option>
<option value="프레젠테이션">프레젠테이션</option>
<option value="기타">기타</option>
</select>
</div>
<div class="form-group">
<label for="fileUpload">파일 첨부</label>
<input type="file" id="fileUpload" multiple>
<small>여러 파일을 선택할 수 있습니다</small>
</div>
<div class="form-group">
<label for="fileTags">태그</label>
<input type="text" id="fileTags" placeholder="쉼표로 구분하여 입력 (예: 중요, 업무, 프로젝트)">
</div>
<div class="form-buttons">
<button type="submit" id="submitBtn">📤 추가</button>
<button type="button" id="cancelBtn">❌ 취소</button>
</div>
</form>
</div>
<div class="list-section">
<div class="list-header">
<h2>📋 자료 목록</h2>
<div class="sort-options">
<select id="sortBy">
<option value="date">최신순</option>
<option value="title">제목순</option>
<option value="category">카테고리순</option>
</select>
</div>
</div>
<div id="fileList" class="file-list">
<div class="empty-state">
<p>📂 등록된 자료가 없습니다. 새 자료를 추가해보세요!</p>
</div>
</div>
</div>
</div>
<!-- 인증 모달 -->
<div id="authModal" class="modal">
<div class="modal-content">
<h2 id="authModalTitle">🔑 로그인</h2>
<form id="authForm">
<div class="form-group">
<label for="authEmail">이메일 *</label>
<input type="email" id="authEmail" required>
</div>
<div class="form-group">
<label for="authPassword">비밀번호 *</label>
<input type="password" id="authPassword" required>
</div>
<div class="form-group" id="confirmPasswordGroup" style="display: none;">
<label for="authConfirmPassword">비밀번호 확인 *</label>
<input type="password" id="authConfirmPassword">
</div>
<div class="form-buttons">
<button type="submit" id="authSubmitBtn">🔑 로그인</button>
<button type="button" id="authCancelBtn">❌ 취소</button>
</div>
<div class="auth-switch">
<p id="authSwitchText">계정이 없으신가요? <a href="#" id="authSwitchLink">회원가입하기</a></p>
</div>
</form>
<div id="authLoading" class="loading" style="display: none;">
<p>처리 중...</p>
</div>
</div>
</div>
<!-- 수정 모달 -->
<div id="editModal" class="modal">
<div class="modal-content">
<h2>✏️ 자료 수정</h2>
<form id="editForm">
<div class="form-group">
<label for="editTitle">제목 *</label>
<input type="text" id="editTitle" required>
</div>
<div class="form-group">
<label for="editDescription">설명</label>
<textarea id="editDescription" rows="3"></textarea>
</div>
<div class="form-group">
<label for="editCategory">카테고리 *</label>
<select id="editCategory" required>
<option value="문서">문서</option>
<option value="이미지">이미지</option>
<option value="동영상">동영상</option>
<option value="프레젠테이션">프레젠테이션</option>
<option value="기타">기타</option>
</select>
</div>
<div class="form-group">
<label for="editTags">태그</label>
<input type="text" id="editTags" placeholder="쉼표로 구분하여 입력">
</div>
<div class="form-buttons">
<button type="submit">💾 저장</button>
<button type="button" id="closeModal">❌ 취소</button>
</div>
</form>
</div>
</div>
<script src="supabase-config.js"></script>
<script src="script.js"></script>
</body>
</html>