'use client'

import Link from 'next/link'
import { useEffect } from 'react'
import '@/styles/publishpage.scss'

export default function PublishPage() {
  useEffect(() => {
    const pageLength = document.querySelectorAll('.coding_stat_web').length

    const setCodingProcess = () => {
      let codingEndedWeb = 0

      document.querySelectorAll('.coding_stat_web').forEach((element) => {
        const codingStatWeb = element.textContent
        if (codingStatWeb === '완료') {
          codingEndedWeb += 1
          element.classList.add('final')
        }
      })

      const perCompleteWeb = parseInt((codingEndedWeb / pageLength) * 100)
      document.querySelector('.coding_summary_web').textContent = `진행률 [ ${codingEndedWeb} page / ${pageLength} page] ${perCompleteWeb}% 완료`
    }

    setCodingProcess()

    document.querySelectorAll('a').forEach((anchor) => {
      anchor.setAttribute('target', '_blank')
    })
  }, [])

  return (
    <>
      <div id="g_header">
        <h1>QCast Japanese</h1>
      </div>
      <div id="g_body">
        <div className="contents">
          <h3>Flie List</h3>
          <p className="guide_summary"></p>
          <ul className="mt-9">
            <li className="coding_summary_web"></li>
          </ul>
          <table className="guide_table">
            <colgroup>
              <col style={{ width: '15%' }} />
              <col style={{ width: '25%' }} />
              <col />
              <col style={{ width: '10%' }} />
              <col style={{ width: '10%' }} />
              <col style={{ width: '15%' }} />
            </colgroup>
            <thead>
              <tr>
                <th>구분</th>
                <th>Depth</th>
                <th>파일명</th>
                <th>퍼블리싱</th>
                <th>마크업 날짜</th>
                <th>비고</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="t-center">
                  <strong>공통</strong>
                </td>
                <td>
                  <strong className="title">Input 설정 모음</strong>
                </td>
                <td>
                  <Link href="/inputwrap" target="_blank">
                    inputwrap
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-09-05</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>셀렉트</strong>
                </td>
                <td>
                  <strong className="title">react-select</strong>
                </td>
                <td>
                  <Link href="/reactselect" target="_blank">
                    reactselect
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-09-05</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>React-Select</strong>
                </td>
                <td>
                  <strong className="title"></strong>
                </td>
                <td>
                  <Link href="/reactselect" target="_blank">
                    React-Select
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-17</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>그리드</strong>
                </td>
                <td>
                  <strong className="title"></strong>
                </td>
                <td>
                  <Link href="/grid" target="_blank">
                    Grid
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td></td>
                <td className="t-center">2024-09-05</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>CanvasPage</strong>
                </td>
                <td>
                  <strong className="title">
                    견적서 페이지 6탭 팝업 추가 및 퍼블 완 <br />
                    발전시뮬레이션 페이지 7탭 퍼블 완
                  </strong>
                </td>
                <td>
                  <Link href="/canvas" target="_blank">
                    CanvasPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>
                  <ul className='mb10'>
                    <li>2024-10-28</li>
                    <li>*canvas-setting pop 수정</li>
                    <li>*이미지 크기조절 pop 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-10-29</li>
                    <li>*견적서 하단 테이블 변경</li>
                    <li>*배치면 초기 설정 pop 이미지파일 업로드 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-10-30</li>
                    <li>*지붕형상설정 pop 변별로 설정 탭 하단 한쪽 흐름 input 추가</li>
                    <li>*견적서 img 업로드 버튼 수정</li>
                    <li>*면형상 배치 pop 수정</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-10-31</li>
                    <li>*그리드 이동, 보조선 이동, 보조선 복사 pop 수정</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-11-04</li>
                    <li>*배치면 초기설정 pop 이미지 불러오기 영역 수정</li>
                    <li>*견적서 견적 특이사항 영역 닫힘 열림 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-11-05</li>
                    <li>*면 흐름 설정 pop 수정</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-11-07</li>
                    <li>*실측치 설정 pop 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-11-12</li>
                    <li>*캔버스 메뉴 이미지 불러오기 버튼 추가</li>
                    <li>*이미지 불러오기 팝업 추가</li>
                    <li>*배치면 초기설정 이미지 불러오기 삭제</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-11-19</li>
                    <li>*견적 복사 팝업 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-11-26</li>
                    <li>*보조선 작성 팝업 보조선 절삭 버튼 추가</li>
                    <li>*지붕모듈 기본설정 팝업 변경</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-12-03</li>
                    <li>*견적서 메뉴 상단버튼 추가</li>
                    <li>*견적서 파일 목록 복구버튼 추가</li>
                    <li>*견적서 체크박스 목록 html 변환</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-12-04</li>
                    <li>*지붕기본모듈, 육지붕기본모듈 나침반 마크업 변경</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-12-09</li>
                    <li>*동선이동∙형 올림 내림 팝업 각 탭 첫번째 인풋제거</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-12-11</li>
                    <li>*배치면 초기설정 팝업 마지막 설정 버튼 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2024-12-17</li>
                    <li>*배치면 초기설정 팝업 W,L input box 변환</li>
                    <li>*지붕면할당 팝업 W,L input box 변환</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-01-03</li>
                    <li>*지붕면 할당 팝업 y스크롤 생성</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-01-07</li>
                    <li>*배치면 경사 설정 메뉴 제거</li>
                    <li>*지붕면 할당 경사 input 추가</li>
                    <li>*회로 및 가대설정 팝업 전체 마크업 수정</li>
                    <li>*지붕형상 수동 설정 팝업 케라바 경사 input 제거</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-01-08</li>
                    <li>*견적서 견적특이사항 영역 수정</li>
                    <li>*견적서 제품정보 select영역 길이 수정</li>
                  </ul>
                  <ul>
                    <li>2025-01-09</li>
                    <li>*회로 및 가대설정 팝업 승압 설정 영역 수정</li>
                  </ul>
                </td>
                <td className="t-center">2024-10-28</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>MainPage</strong>
                </td>
                <td>
                  <strong className="title">메인</strong>
                </td>
                <td>
                  <Link href="/main" target="_blank">
                    MainPage
                  </Link>
                </td>
                <td className="coding_stat_web">
                  <span>비밀번호 변경 팝업 추가</span>
                </td>
                <td className='red al-c'>
                  <ul className='mb10'>
                    <li>2025-01-06</li>
                    <li>*메인페이지 자료다운로드 more 버튼 추가</li>
                  </ul>
                  <ul>
                    <li>2025-01-07</li>
                    <li>*메인페이지 각 영역 데이터 없는 경우 추가</li>
                  </ul>
                </td>
                <td className="t-center">2024-10-10</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>MyProFilePage</strong>
                </td>
                <td>
                  <strong className="title">내정보 조회 팝업</strong>
                </td>
                <td>
                  <Link href="/myprofile" target="_blank">
                    MyProFile
                  </Link>
                </td>
                <td className="coding_stat_web">
                  <span></span>
                </td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-11</td>
              </tr>
              <tr>
                <td className="t-center" rowSpan={3}>
                  <strong>LoginPage</strong>
                </td>
                <td>
                  <strong className="title">로그인</strong>
                </td>
                <td>
                  <Link href="/login" target="_blank">
                    LoginPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-09-23</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">회원가입</strong>
                </td>
                <td>
                  <Link href="/login/signup" target="_blank">
                    SignUpPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-10</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">회원가입 완료</strong>
                </td>
                <td>
                  <Link href="/login/signupcomplete" target="_blank">
                    SignUpCompletePage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-10</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>신규물건 등록</strong>
                </td>
                <td>
                  <strong className="title">신규물건 등록</strong>
                </td>
                <td>
                  <Link href="/management/newproduct" target="_blank">
                    NewProductPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-11</td>
              </tr>
              <tr>
                <td className="t-center" rowSpan={2}>
                  <strong>물품 및 도면 관리</strong>
                </td>
                <td>
                  <strong className="title">물건목록</strong>
                </td>
                <td>
                  <Link href="/management/productstate" target="_blank">
                    ProductStatePage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>
                  <ul className='mb10'>
                    <li>2024-10-30</li>
                    <li>*물건목록 검색 영역 수정</li>
                  </ul>
                  <ul>
                    <li>2025-01-07</li>
                    <li>*물건목록 검색 영역 수정</li>
                  </ul>
                </td>
                <td className="t-center">2024-09-24</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">물건정보</strong>
                </td>
                <td>
                  <Link href="/management/productinfo" target="_blank">
                    ProductInfoPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>
                  <ul>
                    <li>2025-01-06</li>
                    <li>*제목 영역 버튼 리스트 추가</li>
                  </ul>
                </td>
                <td className="t-center">2024-10-11</td>
              </tr>
              <tr>
                <td className="t-center" rowSpan={3}>
                  <strong>커뮤니티</strong>
                </td>
                <td>
                  <strong className="title">공지사항</strong>
                </td>
                <td>
                  <Link href="/community/notice" target="_blank">
                    NoticePage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>2024-10-24</td>
                <td className="t-center">2024-10-14</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">FAQ</strong>
                </td>
                <td>
                  <Link href="/community/FAQ" target="_blank">
                    FAQPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>2024-10-24</td>
                <td className="t-center">2024-10-14</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">자료 다운로드</strong>
                </td>
                <td>
                  <Link href="/community/filedown" target="_blank">
                    FileDownPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-14</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>로딩페이지</strong>
                </td>
                <td>
                </td>
                <td>
                  <Link href="/spinner" target="_blank">
                    LoadingPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>
                  <ul>
                    <li>2024-11-28</li>
                    <li>*로딩페이지 추가</li>
                  </ul>
                </td>
                <td className="t-center">2024-11-28</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}