'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 className='mb10'>
                    <li>2025-01-09</li>
                    <li>*회로 및 가대설정 팝업 승압 설정 영역 수정</li>
                    <li>*회로 및 가대설정 팝업 자동 설정 영역 수정</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-01-10</li>
                    <li>*지붕모듈선택 팝업 메뉴 2번 수정</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-01-17</li>
                    <li>*면형상 배치 팝업에 handle가능 공통 modal-foot 추가</li>
                  </ul> */}
                  {/* <ul className='mb10'>
                    <li>2025-01-20</li>
                    <li>*지붕모듈 설정 팝업 title, 회로 및 가대설정 팝업title, 해당 메뉴 명칭 변경</li>
                    <li>*배치면 그리기 팝업 버튼명 변경경</li>
                    <li>*지붕형상 설정 각 input title 명칭 간격 조정</li>
                    <li>
                      *팝업당 '설정' 텍스트 제거 리스트<br/>
                      &#40;지붕형상 수동 설정, 배치면 그리기, 외벽선 작성, 오브젝트 배치, 동선이동 형 올림 내림, 지붕형상 설정, 지붕모듈 설정, 보조선 작성, 처마∙케라바 변경, 외벽선 편집 및 오프셋, 각 변 속성 변경, 실측치 설정	&#41;
                    </li>
                    <li>*패널 배치 집계 수정</li>
                    <li>*Qselect 컴포넌트 수정 및 배치면 초기설정 selelct disabled 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-02-04</li>
                    <li>*지붕면 할당 팝업 클래스 및 css수정</li>
                    <li>*기본모듈선택 팝업 요청 수정</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-02-13</li>
                    <li>*배치면 초기설정 지붕 각도 설정 수정</li>
                    <li>*팝업 공통 양 사이드바 추가</li>
                    <li>*회로설정 팝업 승압설정 영역 수정</li>
                  </ul> */}
                  {/* <ul className='mb10'>
                    <li>2025-02-19</li>
                    <li>*배치면 선 속성 설정 팝업 버튼 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-02-27</li>
                    <li>*오브젝트 배치 팝업 명칭 및 숫자 변경, 이미지 변경</li>
                    <li>*지붕재 추가 상단 타이틀 제거 버튼 추가</li>
                    <li>*면형상 배치 1번 이미지 교체</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-03-13</li>
                    <li>* popup spinner 추가</li>
                  </ul> */}
                  {/* <ul className='mb10'>
                    <li>2025-03-14</li>
                    <li>* 회로설정 팝업 마지막 셀렉트 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-03-18</li>
                    <li>* 지붕모듈 팝업 및 육지붕 모듈 팝업 수정</li>
                    <li>* 캔버스 메뉴 앞 데이터 명 추가</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-03-19</li>
                    <li>* 육지붕 모듈 팝업 2페이지 수정</li>
                  </ul> */}
                  {/* <ul className='mb10'>
                    <li>2025-05-07</li>
                    <li>* 지붕 모듈 팝업 2페이지 상하좌우 입력 추가</li>
                    <li>* 지붕 모듈 팝업 3페이지 버튼</li>
                  </ul>
                  <ul className='mb10'>
                    <li>2025-05-08</li>
                    <li>* 지붕 모듈 팝업 3페이지 테이블 수정</li>
                  </ul> */}
                  {/* <ul className='mb10'>
                    <li>2025-05-23</li>
                    <li>* OuterLineWall.jsx파일 문구 추가</li>
                  </ul> */}
                  {/* <ul className='mb10'>
                    <li>2025-05-26</li>
                    <li>* 동선이동 팝업 UI변경 및 수정</li>
                  </ul> */}
                  <ul className='mb10'>
                    <li>2025-05-30</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 className='mb10'>
                    <li>2025-01-07</li>
                    <li>*메인페이지 각 영역 데이터 없는 경우 추가</li>
                  </ul>
                  <ul>
                    <li>2025-01-20</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'>
                  <ul>
                    <li>2025-04-21</li>
                    <li>* 로그인 상단 텍스트 변경</li>
                  </ul>
                </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'>
                  <ul>
                    <li>*예시 로딩바 추가</li>
                  </ul>
                </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={4}>
                  <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'>
                  <ul>
                    <li>2025-02-11</li>
                    <li>* 갱신일자 추가</li>
                  </ul>
                </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'>
                  <ul>
                    <li>2025-02-11</li>
                    <li>* 갱신일자 추가</li>
                  </ul>
                </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>
                  <strong className="title">1:1 문의</strong>
                </td>
                <td>
                  <Link href="/community/oneononeinquiry" target="_blank">
                    OneOnOneInquiryPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>
                  <ul>
                    <li>2025-05-16</li>
                    <li>* 문의 등록 팝업 select 추가</li>
                  </ul>
                </td>
                <td className="t-center">2025-04-21</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}