KDT0_ParkSungHoo 아즈카반 죄수 관리 시스템

.firebase/hosting.cHVibGlj.cache

@@ -0,0 +1,30 @@
+favicon-128.png,1691936220200,67629448fa7c36e2fe8911b7df03f5dcd12be0f1b54e53befedb36b28b49ff00
+favicon-16.png,1691936293331,a0b1a6b027b36c0c55c89ac193a3339ef2156a1ec910b14d89ab149fe17604d9
+favicon-32.png,1691936282171,a0b1a6b027b36c0c55c89ac193a3339ef2156a1ec910b14d89ab149fe17604d9
+favicon-48.png,1691936263208,2bb06d186c1e640f0811d83796e4039fadf131896f00ae2bf6c6d5a916e907bc
+favicon-64.png,1691936240212,2d47c3070c082da5297fe006dd5faabdbf12d7322809388fb076b981b5f71823
+components/imprisonRelease.js,1692303405978,de639fe010bef3b70a0150591b045aabc0584f74d4a3a5d981ff515e1dcfed0e
+components/prisonerDetailModal.js,1692305957383,ad4fdd060153b633a28e41e7448ffe213f996747d1199ce635db89933e240d6a
+components/search.js,1692186949949,7d730dbdebe09dc9d6ea3fd1b11be78a5f89e4cd2c725addb58612e873e7bb92
+css/history.css,1692339223730,8a2dfb7f6cc93908bd13607c11d55d6239305af01bf2b6aa0eb8b5bed9059993
+css/main.css,1692334307734,94602f1f0fc2f0541f70b82520710eddf682d000a8672dd2da3f3c73154bec35
+css/roles.css,1692341855561,02a2c7039734a5b8fa8b47509a4bd74f788ab176736eefb552e1557e365c372e
+icon/cursor50-brown-pointer.png,1691908396972,3a883d99636330b0f37f3e0b9acacec58e0e2fa3c0bd8e2c78f0eaa7a359ed1d
+icon/cursor50-brown.png,1691907018610,611eb3e8455d5d2b2533fbf3fd9f6abb5b4160f8e2ce5f0f738a18927e3adba3
+icon/cursor50-white-pointer.png,1691908202046,47191e5faf1a5d58cb327240104749481691fc06d51b28b932fdb07ed54fbd60
+icon/cursor50-white.png,1691906457506,5209d54f500aebb35217719d4a0409015eacd7b4fd0b1d426b91bb4986021748
+icon/favicon.png,1691934871892,f1287f200fc3720e48393fe064ff99d1a52d46ed80477ca02bbb14ff0a52d9d9
+icon/logo-icon.png,1691860684347,7e46a2d03f70eb85cd4a590d0e5bb64c38adbf4c5f0ee77bcf4fcd68193a7ce8
+image/auror wizard.webp,1691999450124,4b4aa7e2a9e880dc695b6adb4c241676506fe3962c3ea988bf24aa8c4c1dde9b
+image/dementor.jpg,1692000486891,0d92c62a5c434f058d6e61e49eaf8e162e655446d1e894603ee3ae6a1f6972eb
+image/historyBg.png,1691984471452,91ce033d6a605f2610e212f9e5489bab17a8b2e86039326f1c7aa6993a0728e6
+image/loginBg.jpg,1691725399840,87f840b426619e426f77b6de1c64959d56b3a2d94e7b5b39adbdb76ba47f3d19
+image/modalBox.png,1691920205431,37b2e333f16c3ed1e89fb501fafc7a9eb9fd5b63fb7c8cb18fa70628a854f055
+image/prisonDirector-vector.png,1692002389633,94924424193125d1c08ce3a1f7fd4baebbdabd31863fa8717df1ce2f308c2124
+videos/loginBg-15s.mp4,1692280118684,90a7530f200fd7f691e91ea518522625861e0c7b634d5d78592a13530d09b046
+videos/mainBg-10s.mp4,1692280377358,0eef36bf9b64ae074a27b7ced7cd429913305b843ec59e0fa3e42c28c45055ea
+history.html,1692343989364,5f35d2f40e4586fd5c93ee977dc2fea03f134cb7ecef5f36e020ab020fc84371
+index.html,1692346160208,4480679328f32b1a7985066b61fc2a8e2f62ed320fae70c2c589a87abea08a30
+roles.html,1692343989364,e0141b89ad1365c86932807cd3143fbd4836f495afe5214df182ef3458c895c9
+css/login.css,1692346232193,5d98ae1038bb90554cf88fd6304e5fd388d790ff7bd3d52f26f7c3561eff2079
+main.html,1692343989364,36cbc680950380464837408838b856be33c8435483bf8bb1c3cd824401be98c6

.gitignore

@@ -0,0 +1,3 @@
+.env
+firebase.json
+nodemodulse/

README.md

@@ -1,49 +1,185 @@
+# 　　　　　　　　　  🪄AZKABAN🦉
 
-# :camera: 직원 사진 관리 서비스
-
-직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요.
-
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-## [과제 수행 및 제출 방법]
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
-6. Pull Request 링크를 LMS로도 제출해 주셔야 합니다.
-7. main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-8. Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-9. Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-10. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-## [필수 요구사항]
-- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
-- 프로필 페이지를 개발하세요.
-- 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
-- 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
-- 사진을 등록, 수정, 삭제가 가능해야 합니다.
-- 유저 플로우를 제작하여 리드미에 추가하세요.
-* CSS
-  * 애니메이션 구현
-  * 상대수치 사용(rem, em)
-* JavaScript
-  * DOM event 조작
-
-## [선택 요구사항]
-- 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
-- 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
-- 직원을 등록, 수정, 삭제가 가능하게 해보세요.
-- 직원 검색 기능을 추가해 보세요.
-- infinity scroll 기능을 추가해 보세요.
-- 사진을 편집할 수 있는 기능을 추가해 보세요.
-- LocalStorage 사용
-
-## [화면 예시]
-![Untitled (1)](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/5dda6755-2501-4af4-bc3e-b63a353c44c2)
-
-![Untitled (2)](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/6c1805f1-2b00-453e-a729-2b483612726d)
-
-## [흐름]
-![Untitled](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/e2934c05-26f6-4ef6-88d4-beed76aa007a)
 
+## 👇서비스 링크👇
+![AZKABAN](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FutWEd%2FbtsrB6zs8w2%2FEIXj6tQQLvBzAGR0fENZOK%2Fimg.png "와 디멘터! 아즈카반 아시는구나~")<br>
+**ID : aaa <br>**
+**PW : bbb**<br>
+(전체화면은 F11키를 누르시면 됩니다.)
+<br>
+<br>
 
+## 👻아즈카반
+아즈카반은 해리포터 시리즈에서 등장한 마법사들의 감옥으로 영국 북해 어딘가에 있다고 전해집니다.<br>
+아즈카반은 원래부터 감옥은 아니었고, 오래전에 어둠의 마법사인 에크리즈디스가 갈던 탑입니다.<br>
+그를 디멘터라는 종족이 따르게 되면서 아즈카반은 디멘터로 가득 차게 됩니다.<br>
+그리고 그가 죽고 난 후 감옥으로 사용하게 된 지금까지도 디멘터가 간수로서 죄수를 괴롭히고 있습니다.
+<br>
+<br>
+
+## ⚙️사용한 스택
+<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white"> <img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white"> <img src="https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black"> <br>
+<img alt="Static Badge" src="https://img.shields.io/badge/NPM-%23CB3837?style=for-the-badge&logo=npm">
+<img alt="Static Badge" src="https://img.shields.io/badge/Firebase-%23FFCA28?style=for-the-badge&logo=firebase&logoColor=white"><img alt="Static Badge" src="https://img.shields.io/badge/git-%2373398D?style=for-the-badge&logo=git&logoColor=white">
+<br>
+<br>
+
+## 👤유저플로우
+![유저플로우](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrygDQ%2FbtsrB67szxI%2FqeB5qpaZushQWLxKao7Vh1%2Fimg.png)
+<details>
+<summary>로그인</summary>
+
+정해진 ID와 PW로만 로그인 가능합니다.<br>
+
+이후에 DB를 이용해 로그인을 구현해보겠습니다.<br>
+
+![로그인](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/120024673/da42dd5b-d6ea-4901-b6b3-d32f1ea521ea)
+
+
+</details>
+
+<details>
+<summary>검색</summary>
+
+이름으로 검색을 할 수 있습니다.<br>
+
+![검색](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/120024673/d7de34bc-a201-4026-8f9d-eba27e85f136)
+
+
+</details>
+
+<details>
+<summary>업데이트</summary>
+
+외부에서 데이터를 변경하고 다시 새로고침하면 최신의 데이터로 업데이트가 가능합니다.<br>
+
+![업데이트](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/120024673/60c58075-562c-46a2-a698-df2a4d993798)
+
+
+</details>
+
+<details>
+<summary>추가</summary>
+
+새로운 데이터를 DB와 sotrage에 저장합니다.<br>
+
+![추가](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/120024673/6a3404db-2637-4c9f-b738-042462bb4e02)
+
+
+
+</details>
+
+<details>
+<summary>변경</summary>
+
+이름, 등급, 이미지를 변경할 수 있습니다.<br>
+
+![변경](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/120024673/0f257bb2-7f44-4f26-9664-ef2af5f93cff)
+
+
+</details>
+
+<details>
+<summary>삭제</summary>
+
+UX적인 부분을 고려해서 삭제 시 한번 더 물어보는 단계를 추가해보겠습니다.<br>
+
+![삭제](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/120024673/56f0a043-1c9c-4249-bd68-c2435d64cba0)
+
+
+</details>
+<br>
+<br>
+
+## MPA vs SPA
+- MPA는 여러개의 독립페이지로 구성된 앱을 말합니다. 멀티~
+- SPA는 하나의 단일 페이지로 구성된 앱을 말하고요. 싱글~<br>
+
+MPA는 하나의 페이지씩 불러와서 초기 로딩은 빠르지만 이후 페이지를 이동할 때 마다 렌더링하고, 쿠키나 세션으로 현재 페이지의 상태를 유지해야 합니다.<br>
+SPA는 그 반대로 처음부터 다 불러오기 때문에 초기 로딩이 느릴 수 있으나, 페이지간 이동이 빠릅니다.<br>
+이렇게 알아본 뒤 저는 MPA와 SPA도 사용해보려고 했으나,<br>
+SPA는 발만 담군 정도로 메인 화면에서 모달로 CRUD만 사용해보았습니다.<br>
+MPA는 각 로그인 화면 부터 유저플로우에서 보이는 모습 그대로 각 화면을을 각기 다른 페이지로 작성해 사용했습니다.
+<br>
+<br>
+
+## 📼video tag (용량 문제 해결방안)
+비디오 태그를 활용해 웹을 디자인 하는 경우를 종종 확인할 수 있었습니다.<br>
+[라인](https://linepluscorp.com/)이나 [야놀자](https://yanolja.in/)에서도 사용하고 있습니다.<br>
+저는 아직 UI에 대해서 잘 알지 못하지만,<br>
+개발자이기전에 한 유저로서 동영상을 통해 서비스의 이미지, 혹은 정보를 직관적을 전달하는 방식을 경험하고 홀려버렸습니다...<br>
+그렇게 홀린듯 비디오 태그를 사용하고 보니.. 문제가 생겼습니다.<br>
+프로젝트 용량이 400mb에 가까워졌습니다.ㅋㅋㅋ<br>
+그래서 파이어베이스 스토리지에 올린 뒤 계속 네트워킹을 통해 참조할지<br>
+그대로 프로젝트에 담아서 진행할지 나름 열심히 고민하고 찾아봤습니다.<br>
+하지만 제일 좋은 방법은 역시 파일의 용량을 줄이는것입니다.<br>
+그래서 세가지 방법을 찾았습니다.
+1. [비메오 사용하기](https://vimeo.com/)<br>
+   우리는 주로 유튜브의 링크나 로컬 스토리지를 통해 비디오 태그에 참조를 불러오는데요.<br>
+   유튜브는 이런 참조링크를 iframe으로 제한해둬서 사용성이 매우 낮습니다.<br>
+   하지만 비메오는 비디오 태그에도 사용할수 있습니다.<br>
+   다만 가장 큰 단점은 유료 입니다...
+2. gif 사용하기<br>
+   잘 아시다시피 mp4나 webm와 같은 영상의 데이터를 압축해서 만들어지느 파일확장자입니다.<br>
+   간단히 사용하는 색을 제한하거나 중복요소를 파악하고 제거하여 데이터를 줄이기 때문에 문서?같은 비교적 정적인 내용만 괜찮고<br>
+   우리의 현란한 동영상은 화질이 매우 깨지게 됩니다. 그게 아니라면 압축한 의미가 없을 정도의 데이터 크기를 가지고 있게 됩니다.<br>
+   따라서 gif도 단점이 어느정도 있습니다.
+3. 영상 길이 줄이고 무한 반복돌리고 만족하기<br>
+   간단하게 나의 욕심과 현실의 타협점을 찾는 것이 포인트 입니다.<br>
+   그래서 저는 타협을 선택했읍니다.
+4. 그 외 iframe<br>
+   우리가 원하는 배경 역할을 못합니다.
+<br>
+<br>
+
+## 반응형 vs 적응형
+이번 프로젝트를 진행하기 전에 멘토님께서 반응형과 적응형에 대해 짤막하게 개념을 일러주셨습니다.<br>
+그래서 추가로 찾아본 결과 반응형과 적응형의 차이를 알 수 있었습니다.
+- 반응형<br>
+  어떤 화면이 주어져도, 혹은 디바이스가 주어져도 웹에서 그 화면에 맞게 알아서 레이아웃이 변형되어 적용되는 것을 말합니다.
+- 적응형<br>
+  정해진 화면과 디바이스에 맞춰서 각각의 정적의 레이아웃을 적용하는 것을 말합니다.
+  (320, 480, 760, 960, 1200, 1600px)<br>
+
+얼핏보아도 반응형이 더 지속성이 좋아보이면서 유지보수에 드는 힘이 적어보입니다.<br>
+다만 처음 디자인을 할 때 고려할 점이 많고, 동적인 콘텐츠를 불러올때 성능저하가 올 수 있습니다.<br>
+하지만 어떤 것이든 단점과 장점이 있고,<br>
+진행하고 있는 프로젝트에 맞게 사용하는게 중요합니다.<br>
+그래서 저는 구현할 기능이 많지 않아서 이번 프로젝트에서 반응형 디자인을 사용했고,<br>
+최대한 미디어쿼리를 사용하지 않고 디자인을 해보았습니다.<br>
+<br>
+
+## 🔥Firebase vs AWS
+파이어베이스와 AWS는 아직도 잘 다루지 못합니다ㅠㅠ<br>
+하지만 두 서비스 모두 비슷한 기능들을 제공합니다.<br>
+데이터베이스<br>
+스토리지<br>
+인증<br>
+애널리틱스<br>
+등등 몇가지 기능들을 제공하고, 아직 프로젝트가 크지 않아서 서비스의 차이점을 잘 모르겠습니다.
+AWS가 요금, 프로젝트에 적용할 수 있는 리소스 가공력? 파이어베이스는 직관성과 유지보수의 기능면에서 서로 방향이 다른 것 같았습니다.<br>
+기업에서는 자체 서버를 두고 개발을 한다고 들었습니다.<br>
+앞으로 서버와 관련된 공부를 추가로 해봐야겠습니다.
+<br>
+<br>
+
+## 🧐느낀점
+- 지난 클론코딩 과제에 이어서 자바스크립트를 깊이있게 다루는 연습을 했습니다.
+- 배우는 것이 늘어날수록 그리고 욕심이 늘수록 코드도 비대해지는 것을 느껴습니다.
+- 하나의 파츠, 기능, 모듈로서 작동할 수 있도록 클래스의 중요성을 느꼈습니다.
+- 순수함수는 보던 것과는 다르게 단순하기만 한 것이 아니라 구조와 계획을 잘 짜야 가능하다는 것을 느꼈습니다.
+- 공식문서를 보면서 공부해보는게 처음이 아닌데도 파이어베이스에 익숙해지는데 오래걸렸습니다.
+- 이번에는 라이브러리를 사용해보거나 번들링을 욕심내서 사용해봤어야 했는데.. 컨셉에 너무 신경을 많이썼습니다.
+- 앞으로 혼자서도 프로젝트를 완성시킬 수 있을 거 같아서 의욕이 더 생겼습니다.
+- 프로젝트를 진행하면서 무료로 풀린 레퍼런스를 많이 사용하기도 했지만, 저작권에 저촉될만한 자료도 많이 사용 했습니다...이부분에 대해서 앞으로 경각심을 가지고 반성해야겠다고 느꼈습니다.
+- 한국어폰트를 못구해서 불가피하게 영어로만 작성하게됐는데, 프로젝트하면서 고려할 점이 너무 많았습니다.
+- 그리고 만약 폰트를 지정하지 않으면 각 디바이스마다 혹은 OS마다 지원하는 폰트의 크기가 달라서 원하는 레이아웃이 깨질 수 있다는 것을 알았습니다.(android에서는 괜찮은데..IOS에서 깨집니다.)
+<br>
+
+## 📜리팩토링 계획
+- [ ] 번들링 해보기
+- [ ] 로그인 권한 적용해보기
+- [ ] 라이브러리 써보기
+- [ ] JS코드 모듈화 시도해보기
+- [ ] 유효성 검사해보기
+<br>

firebase.json

@@ -0,0 +1,27 @@
+{
+  "hosting": {
+    "public": "public",
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "headers": [
+      {
+        "source": "/**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      }
+    ]
+  }
+}