[SF Diving] 5일차 - Main page에서 필요한 3개의 popup page layout 완성

Seungho Ha·2020년 8월 25일
1

SF Diving

목록 보기
6/6
post-thumbnail

시작하며...

어쩌다 보니, 재택 근무를 하고 있음에도 불구하고 평소보다 더 바빠지고 있다... 업무량이 문제가 아니라, 내 집중력의 문제이기는 하지만... 새로운 업무(성능 test)를 배워야 하기도 해서 결국 내일부터 개인 project를 개발할 여유가 없어질 수도 있겠다...라는 생각이 들기 시작했다.
내일 걱정은 내일 모레...하기로 하고, 일단 오늘은 오늘 해야 할 일을 하기로 했다:)

Main page - My Equipments Popup page

우선, 어제 완성했던 main page의 my equipments page에서 'Register New Equipment' button을 click했을 때 생성되는 popup page부터 구현하기로 했다.

1. head source
1) 기본적으로 필요한 내용을 구성
2) <!-- CSS --> 부분에 원하는 popup page layout을 구현
3) <!-- Functions --> 부분에 popup page의 기능 구현 -> 아직 개발하지 않음

2-1. CSS source
2-2. CSS source
1) wrap: page 전체를 감싸는 div
2) search: 장비의 category를 검색하는 div
3) sub-title: 검색된 장비를 출력하는 div의 title
4) searchDetails: 검색된 장비의 목록을 감싸는 div
5) box-container: 검색된 장비 card를 감싸는 div
6) card: 검색된 장비 각각의 사진/정보를 감싸는 div
7) selected: 검색된 장비 중 추가하기 위해 선택된 card의 border 값을 바꾸기 위한 class
8) card-img-top: 검색된 장비 중 사진의 외형 제한
9) selectBtn: 검색된 장비 중 원하는 장비를 선택하는 select button
10) inputDate: 장비를 구매한 날짜를 선택하는 div
11) purchaseDate: 장비를 구매한 날짜의 id

3. JS source
1) #purchaseDate에 default value를 현재 날짜로 설정하기 위한 code
2) saveBtn(): popup page에서 선택한 장비의 정보와 구매 날짜를 DB에 저장하는 function
3) selectBtn(): 검색된 장비 중 하나의 장비를 선택하는 function
%참고% 아직 3-1)만 개발되었고, 나머지 function은 개발 전이다.

4. body source
1) 화면 구성을 확인하기 위해, 'box-container' class 하위에 'card' class를 hard coding해서 data를 추가한 상태
-> 이후에는 default로 빈 화면이 출력되고, 검색한 장비만 출력되도록 수정
2) 'search' class에서 text를 input하고 'searchBtn' class button을 click할 경우, 해당 category에 해당하는 장비들을 DB에서 불러와서 'box-container' class에 출력할 예정
3) 'card' class에서 select button으로 선택되는 장비는 'selected' class를 add하는 방식으로 동작하도록 구현할 예정
4) 'selected' class가 add된 'card' class의 장비 정보와 'inputDate' class에서 선택한 'purchaseDate' value는 'saveBtn' class button을 click할 경우, main page로 전달되도록 구현할 예정

5. Main page - My Equipments Popup page

Main page - My Certifications Popup page

위에서 완성한 main page의 my equipments popup page를 거의 그대로 사용하여 main page의 my certifications page에서 'Register New Certification' button을 click했을 때 생성되는 popup page를 구현하였다.

기본적인 기능은 모두 동일해서, 자세한 div/class/id 등에 대한 설명은 생략하기로 한다(절대 귀찮아서 그런 것이 아니다!)...
1. head source
2-1. CSS source
2-2. CSS source
3. JS source
4. body source
5. Main page - My Certifications Popup page

Main page - DivePoints Popup page

내일부터 개인 project 개발을 할 시간을 낼 수 있을지 알 수가 없어서, 내일 개발하려고 계획했던 main page 중 dive log를 기록하는 page에서 popup page의 layout만 미리 구현하기로 했다...
나름 필요한 모든 popup page의 layout을 한 번에 완성한 것이라, 깔끔해보이기도 하고...
조금 급하게 개발한 면이 없지는 않지만, 그래도 결과는 아래와 같이 정리할 수 있다.

1. head source
1) 기본적으로 필요한 내용을 구성
2) <!-- CSS --> 부분에 원하는 popup page layout을 구현
3) <!-- Functions --> 부분에 popup page의 기능 구현 -> 아직 개발하지 않음

2. CSS source
1) wrap: page 전체를 감싸는 div
2) divingPosition: main page에서 map 위의 한 point를 click했을 때 선택한 point의 좌표(위도, 경도) 값을 가져와서 그 값을 출력하는 div
3) sub-title: dive log의 세부 사항을 입력하는 div의 title
4) divingDetails: dive log의 세부 사항을 감싸는 div
5) divingLog: dive log의 세부 사항을 원하는 table style로 출력하기 위한 table tag의 class
6) saveLog: point의 좌표와 입력한 dive log의 세부 사항을 DB에 저장하는 button class

3. JS source
1) #diveDate에 default value를 현재 날짜로 설정하기 위한 code
2) saveBtn(): popup page에서 선택한 장비의 정보와 구매 날짜를 DB에 저장하는 function

4-1. body source
4-2. body source
1) 'diveingPosition' div의 table에서 td tag의 값은 현재 text가 hard coding되어 있지만, 이후 main page의 map에서 지정한 좌표 값을 mapping해야 함
2) 'Diving No.'는 dive 횟수를 입력하는 부분으로, 'number' type으로 숫자를 입력
3) 'Diving Name'은 dive point의 명칭을 입력하는 부분으로, 'text' type으로 입력
4) 'Diving Date'은 dive한 날짜를 입력하는 부분으로, 'date' type으로 날짜를 입력 -> JS로 default 값을 현재 날짜로 설정한 상태
5) 'Diving Time In'과 'Diving Time Out'은 dive 시작 시간과 종료 시간을 입력하는 부분으로, 'time' type으로 시간을 입력
6) 'Buddy Diver'는 동료 diver의 이름을 입력하는 부분으로, 'text' type으로 입력
7) 'Safety Stop'은 안전 정지를 한 시간과 깊이를 입력하는 부분으로, 'number' type으로 2개의 값을 입력
8) 'Comments'는 dive에 대한 개인의 comment를 남기는 부분으로, 'text' type으로 입력하며, 입력하는 부분의 크기를 여유롭게 확장함
9) 'saveBtn' class button을 click하면, popup page에서 선택한 장비의 정보와 구매 날짜를 DB에 저장하고 popup page가 닫힘

5. Main page - DivePoints Popup page

추가로 알아봐야 할 부분

Page layout만 작성하는 것은 이제 적응이 다 된 것인지, 작성한 page들이 전부 비슷해서 복붙을 많이 해서 그런 것인지, 그렇게 어렵지 않게 할 수 있게 된 것 같다... 하지만 이미 모든 page의 언어를 한글이 아닌 영문을 선택했기 때문에, page의 일관성을 위해 모든 것을 영문으로 해야 하는데... 문제가 생겼다...
문제는 바로 'input' tag에서 type을 'date' 혹은 'time'으로 선택할 경우, 값을 선택할 때 생성되는 default 값(지금은 js로 현재 날짜로 설정하면서 화면에서 보이지는 않지만)과 calendar에서 출력되는 '년/월/일' 및 '오전/오후' 부분이 한글로 setting되어 영문으로 전환되지 않는다는 것이다...

1. html lang value 설정
2. 'date' type 부분 화면 출력
3. 'time' type 부분 화면 출력

일단 확인한 바에 의하면, 가장 상위에서 선언하는 html tag의 'lang' value를 'en'으로 설정해도 변화가 없다는 정도이다...
물론, 전혀 문제가 되지 않는 부분이라고 생각할 수도 있겠지만... 완벽주의자는 그저 울 뿐이다...;ㅁ;
만약 정말로 영문으로 전환하지 못하면... 지금 작성되어 있는 모든 page를 한글로 다시 바꿔서라도 일관성을 맞춰야... 아니 제발 그런 일이 발생하지는 않기를...;ㅁ;

마치며...

회사 업무에서 개발하는 것은 뭐랄까... 새로운 것을 하나 하나 배울 수 있고, 주어진 업무를 하나 하나 해결할 때마다 성취감도 느껴서 좋기는 하지만... 못하면 안된다는 부담감도 있고(크고), 잘 해서 다른 사람들에게 좋은 이미지를 만들어야 한다는 부담감도 있고(크고)... 그러다보니 개발하는 것이 마냥 즐겁지만은 않은 것 같은데, 개인 project는 그런 부담감 하나 없이 할 수 있어서 오히려 더 재미있는 것 같다... 뭐 물론, 개인 project에서 난 왜 이 간단한 것도 구현하지 못하는지 자괴감이 들기는 하지만...
그런데 내일부터 업무가 바빠져서 개인 project 개발을 진행하지 못할 수 있다...는 사실이 정말 마음이 아프지만... 그래도 영원히 stop은 아니니까, 급한 업무 해결하고 나중에 여유가 생기면 다시 진행해야지:)

profile
Bachelor of Mechanical Engineering -> Master of Mechanical Engineering (Intelligent Systems and Robotics Laboratory) -> IT Developer -> Next...?

0개의 댓글