Jihoo

diaryProject/Account/models.py

@@ -24,4 +24,4 @@ class Diary(models.Model):
     creator = models.ForeignKey(User, on_delete=models.CASCADE, related_name="creator")
 
     def __str__(self):
-        return self.creator.name
+        return self.creator.username

diaryProject/Account/templates/login.html

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'diaryApp/base.html' %}
 {% load static %}
 {% block style %}
     <link rel="stylesheet" type="text/css" href="{% static 'login.css' %}">

diaryProject/MyPage/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

diaryProject/MyPage/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class MypageConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'MyPage'

diaryProject/MyPage/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

diaryProject/MyPage/static/calendar.css

@@ -0,0 +1,92 @@
+* {
+    z-index: 10;
+}
+
+.calender {
+    position: relative;
+}
+
+.days {
+    display: flex;
+}
+
+.day {
+    padding-top: 8px;
+    padding-bottom: 3px;
+    width: calc(98%/7);
+    padding-left: 0.5px;
+    text-align: center;
+    transition: all .3s;
+    color: white;
+    font-weight: bold;
+}
+
+.dates {
+    display: flex;
+    width: 100%;
+    flex-flow: row wrap;
+}
+
+.date {
+    cursor: pointer;
+    padding: 9px 4px;
+    margin: 4px;
+    width: 30px;
+    text-align: center;
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 5px;
+    transition: all .3s;
+    font-weight: bold;
+}
+
+.go-today {
+    width: 80%;
+    border-left: 1px solid #333333;
+    border-right: 1px solid #333333;
+}
+
+.nav-btn {
+    width: 20px;
+    height: 20px;
+    border: none;
+    font-size: 16px; 
+    line-height: 15px;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.day:nth-child(7n+1), .date:nth-child(7n+1) {
+    color: #d13e3e;
+}
+
+.day:nth-child(7n), .date:nth-child(7n) {
+    color: #396ee2;
+}
+
+.today {
+    position: relative;
+    background-color: #fffc1c96;
+}
+
+.selected {
+    background-color: black;
+    color: #c0bebe !important;
+}
+
+.other {
+    color: rgb(168, 164, 164) !important;
+}
+
+.date_event {
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: red;
+    margin: auto;
+    border-radius: 100%;
+}
+
+.event-itm {
+    font-size: 0;
+}

diaryProject/MyPage/static/js/calendar.js

@@ -0,0 +1,110 @@
+let date = new Date();
+//Date 객체 생성 (밀리초 정수 값까지 담아둠)
+
+/* 캘린더 생성 함수 */
+const renderCalendar = () => {
+    const viewYear = date.getFullYear();
+    //현지시간 기준 연도
+    const viewMonth = date.getMonth();
+    //현지시간 기준 (월은 0부터 시작하는 것 주의!)
+
+    document.querySelector('.year').textContent = `${viewYear}`;
+    document.querySelector('.month').textContent = `${viewMonth + 1}`;
+
+    //파라미터 = year, month, date, hours, minutes, seconds, ms (year, month만 생략가능)
+    const prevLast = new Date(viewYear, viewMonth, 0);
+    const thisLast = new Date(viewYear, viewMonth + 1, 0);
+    //해당 월의 마지막 날짜
+
+    const PrevDate = prevLast.getDate();
+    console.log(PrevDate)
+    const PrevDay = prevLast.getDay();
+   //일요일 = 0
+
+    const ThisDate = thisLast.getDate();
+    const ThisDay = thisLast.getDay();
+
+    const prevDates = [];
+    const thisDates = [...Array(ThisDate + 1).keys()].slice(1);
+    // keys() 배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환
+    // slice(begin, end) 매개변수는 optional, 기본은 0, begin~end까지 얕은 복사본 (end제외)
+    const nextDates = [];
+
+    /* 기본 규격으로 이루어진 칸 중 지난달과 연결된 남은 칸 */
+
+    //if 조건문 = 지난달 마지막날이 '월요일'이 아니면 ) 
+    if (PrevDate !== 6){
+        for (let i=0; i < PrevDay + 1; i++){
+            prevDates.unshift(PrevDate - i)
+        }
+    }
+
+    /* 기본 규격으로 이루어진 칸 중 다음달과 연결된 칸 */
+    for (let i=1; i < 7 - ThisDay; i++){
+        nextDates.push(i);
+    }
+
+    const dates = prevDates.concat(thisDates, nextDates);
+    // 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열 반환 (남은 지난 달 날짜들 + 이번 달 날짜들 + 남은 다음 달 날짜들)
+
+    const firstDateIndex = dates.indexOf(1);
+    // '1'일이 시작되는 게 몇 번째인지 (지난 달 + 이번 달 + 다음 달) 합쳐둔 날짜 배열에서
+    // indexOf니까 제일 처음 나오는 '1'을 찾음 = 이번 달 기준의 '1'
+    const lastDateIndex = dates.lastIndexOf(ThisDate);
+    // 이번 달의 '31일 또는 30일' = 마지막날이 몇 번째인지
+    // lastIndexOf니까 지난 달의 마지막 날짜를 건너뛰고 이번 달의 마지막 날만 찾음
+
+
+
+    dates.forEach((date, i) => {
+        const condition = i >= firstDateIndex && i < lastDateIndex + 1 ?'this':'other';
+        //이번달이면 this, 아니면 other의 문자열을 채움
+        // date this 또는 date other이라는 클래스를 갖는 div태그를 생성 - 내용은 date
+        dates[i] = `<div class="date ${condition}">${date}</div>`;
+    });
+
+    // dates.forEach((date, i)=>{
+    //     const condition = i>= firstDateIndex && i < lastDateIndex + 1 ? 
+    //     'this':
+    //     'other';
+    //     dates[i] = `
+    //         <div class="date ${condition}">
+    //             <div class="date-itm">
+    //                 ${date}
+    //             <div>
+
+    //             <div class="date_event">
+    //                 <div class="event-itm">EVENT</div>
+    //             </div>
+    //         </div>
+    //     `;
+    // });
+
+
+    document.querySelector('.dates').innerHTML = dates.join('');
+    //배열의 모든 요소를 연결하여 하나의 문자열을 만듦, 매개변수 = seperator
+
+    const today = new Date();
+    if (viewMonth === today.getMonth() && viewYear === today.getFullYear()){
+        for (let date of document.querySelectorAll('.date-itm')){
+            if (+date.innerText === today.getDate()){
+                date.parentNode.classList.add('today')
+                break;
+            }
+        }
+    }
+};
+
+renderCalendar();
+const prevMonth = () => {
+    date.setMonth(date.getMonth() - 1);
+    renderCalendar();
+}
+const nextMonth = () => {
+    date.setMonth(date.getMonth() + 1);
+    renderCalendar();
+}
+const goToday = () => {
+    date = new Date();
+    renderCalendar();
+}

diaryProject/MyPage/static/js/reverse.js

@@ -0,0 +1,47 @@
+const touchedTab = document.querySelector('.touched-wrapper');
+const exitBtn = document.querySelector('touched-close');
+
+const selectDate = [];
+
+const dateFunc = () => {
+    const dates = document.querySelectorAll('.date');
+    const year = document.querySelector('.year');
+    const month = document.querySelector('.month');
+    dates.forEach((element)=>{
+        element.addEventListener('click', ()=>{
+            if(element.classList.contains('other') || element.classList('selected')){
+                dates.forEach((item)=>{ item.classList.remove('selected');});
+                element.classList.remove('selected');
+                selectDate.length = 0;
+            }else if(selectDate.length > 0){
+                dates.forEach((item)=>{item.classList.remove('selected');});
+                selectDate.push([year.innerHTML, month.innerHTML, element.innerHTML]);
+                touchedTab.classList.add('open');
+            }else {
+                element.classList.add('selected');
+                selectDate.push([year.innerHTML, month.innerHTML, element.innerHTML]);
+                touchedTab.classList.add('open');
+            }
+        });
+    });
+};
+
+/* 달력 초기화 함수 */
+const reset = () => {
+    selectDate.length = 0;
+    dateFunc();
+}
+
+window.onload = () => {
+    const navBtn = document.querySelectorAll('.nav-btn');
+    navBtn.forEach(info => {
+        if(info.classList.contains('month-prev')){
+            info.addEventListener('click', ()=>{prevMonth(); reset();})
+        }else if(info.classList.contains('go-today')){
+            info.addEventListener('click', ()=>{goToday(); reset();})
+        }else if(info.classList.contains('month-next')){
+            info.addEventListener('click', ()=>{nextMonth(); reset();})
+        }
+    });
+    reset();
+}