Feature/#54 fe1 templates

accounts/templates/accounts/login.html

@@ -0,0 +1,68 @@
+{% extends "base.html" %}
+{% load static %}
+{% load socialaccount %}
+{% block title %}
+로그인 - PLAN B
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="auth-wrap">
+  <div class="card auth-card">
+    <div class="page-title-sm">다시 오셨네요</div>
+    <div class="page-sub">계획을 이어서 확인해보세요</div>
+
+    {% if form.non_field_errors %}
+    <div class="form-error-box">
+      {{ form.non_field_errors|striptags }}
+    </div>
+    {% endif %}
+
+    <form method="post" novalidate>
+      {% csrf_token %}
+      {% if request.GET.next %}
+      <input type="hidden" name="next" value="{{ request.GET.next }}">
+      {% endif %}
+
+      <div class="form-group">
+        <label class="form-label" for="{{ form.username.id_for_label }}">
+          {{ form.username.label }}
+        </label>
+        {{ form.username }}
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="{{ form.password.id_for_label }}">
+          비밀번호
+        </label>
+        {{ form.password }}
+      </div>
+
+      <button type="submit" class="btn btn-brand btn-block">
+        로그인
+      </button>
+    </form>
+
+    <div class="auth-divider">
+      <span>또는</span>
+    </div>
+
+    <a href="{% provider_login_url 'google' process='login' %}"
+       class="btn btn-ghost btn-block social-btn">
+      구글로 로그인
+    </a>
+    <a href="{% provider_login_url 'naver' process='login' %}"
+       class="btn btn-ghost btn-block social-btn">
+      네이버로 로그인
+    </a>
+
+    <div class="auth-link">
+      계정이 없나요?
+      <a href="{% url 'accounts:signup' %}">회원가입</a>
+    </div>
+  </div>
+</div>
+{% endblock %}

accounts/templates/accounts/signup.html

@@ -0,0 +1,99 @@
+{% extends "base.html" %}
+{% load static %}
+{% load socialaccount %}
+{% block title %}
+회원가입 - PLAN B
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="auth-wrap">
+  <div class="card auth-card">
+    <div class="page-title-sm">PLAN B 시작하기</div>
+    <div class="page-sub">시험 계획을 함께 관리해요</div>
+
+    {% if form.non_field_errors %}
+    <div class="form-error-box">
+      {{ form.non_field_errors|striptags }}
+    </div>
+    {% endif %}
+
+    <form method="post" novalidate>
+      {% csrf_token %}
+
+      <div class="form-group">
+        <label class="form-label" for="{{ form.email.id_for_label }}">
+          이메일
+        </label>
+        {{ form.email }}
+        {% if form.email.errors %}
+        <div class="field-error">
+          {{ form.email.errors|striptags }}
+        </div>
+        {% endif %}
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="{{ form.nickname.id_for_label }}">
+          닉네임
+        </label>
+        {{ form.nickname }}
+        {% if form.nickname.errors %}
+        <div class="field-error">
+          {{ form.nickname.errors|striptags }}
+        </div>
+        {% endif %}
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="{{ form.password1.id_for_label }}">
+          비밀번호
+        </label>
+        {{ form.password1 }}
+        {% if form.password1.errors %}
+        <div class="field-error">
+          {{ form.password1.errors|striptags }}
+        </div>
+        {% endif %}
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="{{ form.password2.id_for_label }}">
+          비밀번호 확인
+        </label>
+        {{ form.password2 }}
+        {% if form.password2.errors %}
+        <div class="field-error">
+          {{ form.password2.errors|striptags }}
+        </div>
+        {% endif %}
+      </div>
+
+      <button type="submit" class="btn btn-brand btn-block">
+        회원가입
+      </button>
+    </form>
+
+    <div class="auth-divider">
+      <span>또는</span>
+    </div>
+
+    <a href="{% provider_login_url 'google' process='login' %}"
+       class="btn btn-ghost btn-block social-btn">
+      구글로 시작하기
+    </a>
+    <a href="{% provider_login_url 'naver' process='login' %}"
+       class="btn btn-ghost btn-block social-btn">
+      네이버로 시작하기
+    </a>
+
+    <div class="auth-link">
+      이미 계정이 있나요?
+      <a href="{% url 'accounts:login' %}">로그인</a>
+    </div>
+  </div>
+</div>
+{% endblock %}

exams/templates/exams/_topbar.html

@@ -0,0 +1,11 @@
+<div style="display:flex; align-items:center; justify-content:space-between; padding:18px 0 26px;">
+  <a href="{% url 'exams:period_list' %}" style="font-weight:800; font-size:15px; color:var(--neutral11); text-decoration:none; letter-spacing:.03em;">
+    PLAN B
+  </a>
+  <form method="post" action="{% url 'accounts:logout' %}" style="margin:0;">
+    {% csrf_token %}
+    <button type="submit" class="btn btn-ghost" style="height:34px; padding:0 14px; font-size:12px;">
+      {{ request.user.nickname|default:request.user.username }} · 로그아웃
+    </button>
+  </form>
+</div>

exams/templates/exams/available_time_form.html

@@ -0,0 +1,174 @@
+{% extends "base.html" %}
+{% load static exam_extras %}
+{% block title %}
+가용시간 입력 - PLAN B
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components.css' %}">
+{% endblock %}
+
+{% block content %}
+{% include "exams/_topbar.html" %}
+{% get_calendar_grid period.id as calendar_days %}
+
+<div class="container avail-wrap">
+  <div class="crumb-text">
+    <a href="{% url 'exams:period_detail' period.id %}">PLAN B</a>
+    &nbsp;›&nbsp; 가용시간 입력
+  </div>
+  <div class="page-title">
+    가용시간 입력하기
+  </div>
+  <div class="page-sub">
+    하루 전체에서 공부 가능한 시간을 날짜별로 입력해주세요
+  </div>
+
+  {% if formset.non_form_errors %}
+  <div class="form-error-box">
+    {{ formset.non_form_errors|striptags }}
+  </div>
+  {% endif %}
+
+  <form method="post" novalidate id="available-time-form">
+    {% csrf_token %}
+    {{ formset.management_form }}
+
+    <div class="formset-hidden">
+      {% for form in formset %}
+      <div data-formset-row="{{ forloop.counter0 }}">
+        {{ form.id }}
+        {{ form.date }}
+        {{ form.hours }}
+        {{ form.minutes }}
+      </div>
+      {% endfor %}
+    </div>
+
+    <div class="avail-body">
+      <div class="card avail-cal-col">
+        <div class="avail-cal-title">
+          {{ period.start_date|date:"n월 j일" }} -
+          {{ period.end_date|date:"n월 j일" }}
+        </div>
+
+        <div class="avail-cal-grid">
+          <div class="avail-weekday">월</div>
+          <div class="avail-weekday">화</div>
+          <div class="avail-weekday">수</div>
+          <div class="avail-weekday">목</div>
+          <div class="avail-weekday">금</div>
+          <div class="avail-weekday">토</div>
+          <div class="avail-weekday">일</div>
+
+          {% for day in calendar_days %}
+            {% if forloop.first %}
+              {% if day.is_exam_day %}
+              <button type="button" class="avail-day exam-day" disabled
+                      data-date="{{ day.date|date:'Y-m-d' }}"
+                      style="grid-column-start:{{ day.weekday }};">
+                {{ day.date|date:"j" }}
+              </button>
+              {% else %}
+              <button type="button"
+                      class="avail-day{% if day.has_value %} has-value{% endif %}"
+                      data-index="{{ day.formset_index }}"
+                      data-date="{{ day.date|date:'Y-m-d' }}"
+                      style="grid-column-start:{{ day.weekday }};">
+                {{ day.date|date:"j" }}
+              </button>
+              {% endif %}
+            {% else %}
+              {% if day.is_exam_day %}
+              <button type="button" class="avail-day exam-day" disabled
+                      data-date="{{ day.date|date:'Y-m-d' }}">
+                {{ day.date|date:"j" }}
+              </button>
+              {% else %}
+              <button type="button"
+                      class="avail-day{% if day.has_value %} has-value{% endif %}"
+                      data-index="{{ day.formset_index }}"
+                      data-date="{{ day.date|date:'Y-m-d' }}">
+                {{ day.date|date:"j" }}
+              </button>
+              {% endif %}
+            {% endif %}
+          {% endfor %}
+        </div>
+      </div>
+
+      <div class="card avail-side-col disabled" id="side-panel">
+        <div id="side-panel-date" class="avail-side-date">
+          날짜를 선택하세요
+        </div>
+        <div class="avail-side-caption">선택한 날짜</div>
+
+        <div class="field-label">전체 가용 시간</div>
+        <input type="number" min="0" step="10"
+               class="form-control num"
+               id="side-panel-minutes"
+               placeholder="240">
+        <div class="avail-side-hint">분 단위로 입력</div>
+
+        <button type="button"
+                class="btn btn-brand btn-block avail-save-btn"
+                id="side-panel-save">
+          저장
+        </button>
+      </div>
+    </div>
+
+    <button type="submit" class="btn btn-brand avail-next-btn">
+      다음
+    </button>
+  </form>
+</div>
+
+<script>
+(function () {
+  var sidePanel = document.getElementById('side-panel');
+  var dateLabel = document.getElementById('side-panel-date');
+  var minutesInput = document.getElementById('side-panel-minutes');
+  var saveBtn = document.getElementById('side-panel-save');
+  var currentDay = null;
+
+  function selectDay(dayBtn) {
+    document.querySelectorAll('.avail-day').forEach(function (d) {
+      d.classList.remove('sel');
+    });
+    dayBtn.classList.add('sel');
+    currentDay = dayBtn;
+    sidePanel.classList.remove('disabled');
+    dateLabel.textContent = dayBtn.dataset.date;
+
+    var row = document.querySelector(
+      '[data-formset-row="' + dayBtn.dataset.index + '"]'
+    );
+    var hoursInput = row.querySelector('input[name$="-hours"]');
+    var minInput = row.querySelector('input[name$="-minutes"]');
+    var total = (parseInt(hoursInput.value || 0, 10) * 60) +
+                parseInt(minInput.value || 0, 10);
+    minutesInput.value = total || '';
+  }
+
+  document.querySelectorAll('.avail-day:not(.exam-day)').forEach(
+    function (btn) {
+      btn.addEventListener('click', function () {
+        selectDay(btn);
+      });
+    }
+  );
+
+  saveBtn.addEventListener('click', function () {
+    if (!currentDay) return;
+    var total = parseInt(minutesInput.value || 0, 10);
+    var row = document.querySelector(
+      '[data-formset-row="' + currentDay.dataset.index + '"]'
+    );
+    row.querySelector('input[name$="-hours"]').value = Math.floor(total / 60);
+    row.querySelector('input[name$="-minutes"]').value = total % 60;
+    currentDay.classList.toggle('has-value', total > 0);
+  });
+})();
+</script>
+{% endblock %}