diff --git a/.gitignore b/.gitignore index 878447ead..ab07be55d 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,4 @@ apps/fo/.next/**/* pnpm-lock.yaml settings.json .npmrc +.cursor \ No newline at end of file diff --git a/apps/cm/app/api/auth/logout/route.ts b/apps/cm/app/api/auth/logout/route.ts index ba8e23374..fdcc9df7c 100644 --- a/apps/cm/app/api/auth/logout/route.ts +++ b/apps/cm/app/api/auth/logout/route.ts @@ -15,4 +15,3 @@ export async function POST() { cookieStore.delete(CLAIM_NAME); return NextResponse.json({ message: "Logged out" }, { status: 200 }); } - diff --git a/apps/cm/src/entities/auth/lib/token-manager.ts b/apps/cm/src/entities/auth/lib/token-manager.ts index 21ed00218..8fcf21984 100644 --- a/apps/cm/src/entities/auth/lib/token-manager.ts +++ b/apps/cm/src/entities/auth/lib/token-manager.ts @@ -1,4 +1,4 @@ -import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config"; +import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, REFRESH_TOKEN } from "@/shared/config"; import { getCookie, setCookie, removeCookie } from "@/shared/lib"; export class TokenManager { @@ -76,6 +76,8 @@ export class TokenManager { this.removeToken(CLAIM_NAME); this.removeToken(AUTH_USER_ID); + this.removeToken(REFRESH_TOKEN); + this.removeToken(ACCESS_TOKEN); } } diff --git a/apps/cm/src/pages/dashboard/ui/mypost-list.tsx b/apps/cm/src/pages/dashboard/ui/mypost-list.tsx index ec5f97d48..2c15b7d7d 100644 --- a/apps/cm/src/pages/dashboard/ui/mypost-list.tsx +++ b/apps/cm/src/pages/dashboard/ui/mypost-list.tsx @@ -3,7 +3,7 @@ import { useRouter } from "next/navigation"; import { useQuery } from "@tanstack/react-query"; import { getCoreRowModel } from "@tanstack/react-table"; -import { PostApi, type MyPost } from "@/entities/post"; +import { PostApi, type MyPost, type NoticePost } from "@/entities/post"; import { ENDPOINT } from "@/shared/config"; import { useDataTable } from "@/shared/lib"; import { @@ -23,15 +23,21 @@ const MyPostList: React.FC = () => { }), }); + const handleMyPostRowClick = (row: MyPost) => { + router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`); + }; + const { tableComponent: myPostTableComponent } = useDataTable({ query: myPostQuery, tableOptions: { - columns: myPostTableColumns, - getCoreRowModel: getCoreRowModel(), + columns: myPostTableColumns, + getCoreRowModel: getCoreRowModel(), }, dataTableOptions: { - variant: "line", + variant: "line", + onRowClick: handleMyPostRowClick }, + }); return ( diff --git a/apps/cm/src/pages/dashboard/ui/notice-list.tsx b/apps/cm/src/pages/dashboard/ui/notice-list.tsx index 86e21a4a3..502973225 100644 --- a/apps/cm/src/pages/dashboard/ui/notice-list.tsx +++ b/apps/cm/src/pages/dashboard/ui/notice-list.tsx @@ -26,7 +26,7 @@ const NoticeList: React.FC = () => { }); const handleNoticePostRowClick = (row: NoticePost) => { - router.push(`/bbs/bbsnotice/${row.bbsId}/${row.pstNo}`); + router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`); }; const handleMoreClick = () => { @@ -40,12 +40,12 @@ const NoticeList: React.FC = () => { const { tableComponent: noticePostTableComponent } = useDataTable({ query: noticePostQuery, tableOptions: { - columns: noticePostTableColumns, - getCoreRowModel: getCoreRowModel(), + columns: noticePostTableColumns, + getCoreRowModel: getCoreRowModel(), }, dataTableOptions: { - variant: "line", - onRowClick: handleNoticePostRowClick, + variant: "line", + onRowClick: handleNoticePostRowClick, }, }); diff --git a/apps/cs/docs/표준단어정의서.md b/apps/cs/docs/표준단어정의서.md new file mode 100644 index 000000000..6950eb84b --- /dev/null +++ b/apps/cs/docs/표준단어정의서.md @@ -0,0 +1,831 @@ +# 표준단어정의서 + +AI 이해용으로 정리된 표준단어명, 영문약어명, 영문명 목록입니다. + +| 표준단어명 | 표준단어 영문약어명 | 표준단어 영문명 | +|-----------|-------------------|----------------| +| BOD | BOD | Biochemical Oxygen Demand | +| C/N비 | CNR | Carbon-Nitrogen Ratio | +| COD | COD | Chemical Oxygen Demand | +| F/M비 | FMR | Food-Microorganism Ratio | +| GISD | GISDATA | Geographic Information System Data | +| HTML | HTML | Hypertext Markup Language | +| ID | ID | Id | +| IP | IP | Internet Protocol | +| KEY | KEY | Key | +| ND | ND | Not Detected | +| NON | NON | Non | +| NTU | NTU | Nephelometry Turbidity Unit | +| OPT | OPT | Opt | +| PAC | PAC | Polyaluminium Chloride | +| PH | PH | Hydrogen Exponent | +| PKI | PKI | Public Key Infrastructure | +| POOL | POOL | Pool | +| SS | SS | Suspended Solids (Ss) | +| TCE | TCE | Trichloroethane | +| TM | TM | Transverse Mercator | +| T-N | TN | Total Nitrogen | +| TOC | TOC | Total Organic Carbon | +| T-P | TP | Total Phosphorus | +| URL | URL | Uniform Resource Locator | +| 가구 | HSHD | Household | +| 가능 | PSBL | Possible | +| 가동 | OPR | Operation | +| 가산 | ADTN | Addition | +| 가성소다 | NAOH | Caustic Soda(Nach) | +| 가축분뇨 | ANMA | Animal Manure | +| 값 | VAL | Value | +| 강도 | IN | Intensity | +| 강우 | RAIN | Rain | +| 개방 | OPN | Opening | +| 개별 | INDIV | Individual | +| 개보수비 | RPAFEE | Repair Fee | +| 개설 | ESTBL | Establishment | +| 개시 | STRT | Start | +| 개정 | RVSN | Revision | +| 개조 | REMDEL | Remodeling | +| 개체 | INDVD | Individual | +| 개체군 | POPU | Population | +| 개폐 | RORGN | Reorganization | +| 갱신 | UPDT | Update | +| 건물 | BLDG | Building | +| 건설 | CONC | Construction | +| 건수 | NOCS | The Number Of Cases | +| 건조 | DRY | Dry | +| 검사 | INSP | Inspection | +| 검사서 | EXRPT | Examination Report | +| 검정 | RCGN | Recognition | +| 검증 | VRFC | Verification | +| 검출 | DETECT | Detection | +| 검토 | RVW | Review | +| 격자 | LATTC | Lattice | +| 결과 | RSLT | Result | +| 결의 | DCIS | Decision | +| 결정 | DCSN | Decision | +| 경계 | BNDRY | Boundary | +| 경과 | PROC | Process | +| 경도 | LOT | Longitude | +| 경보 | ALARM | Alarm | +| 경사판 | ICNTPT | Inclination plate | +| 계 | SUM | Summation | +| 계량기 | MRNR | Measuring Instrument | +| 계량기분리 | METRSPRT | Meter Separation | +| 계면 | SGLV | Sludge Level | +| 계산식 | FMUL | Formula | +| 계약 | CTRT | Contract | +| 계약기간 | CNTRPD | Contract Period | +| 계절 | SEASON | Season | +| 계획 | PLAN | Plan | +| 고도처리 | AWTR | Advanced Water Treatment | +| 고시 | ANCMNT | Announcement | +| 고액분리 | SLSPRT | Solid-Liquid Separation | +| 고형물체류시간 | SRT | Solid Retention Time | +| 공간데이터 | SPCEDATA | Space Data | +| 공공 | PUBLIC | Public | +| 공급 | SPLY | Supply | +| 공기 | AIR | Air | +| 공기여과 | ARFT | Air Filter | +| 공문 | ODOC | Official Documnet | +| 공법 | MSRC | Method Of Construction | +| 공사 | CSTRN | Construction | +| 공사비 | CONSTEXPN | Construction Expenses | +| 공업지역 | MNFTR_ARA | Manufacturing Area | +| 공용면적 | CMAR | Common Area | +| 공통 | CMMN | Commonness | +| 관 | PP | Pipe | +| 관계 | REL | Relation | +| 관련 | RLTN | Relation | +| 관로 | PPLINE | Pipe Line | +| 관리 | MNG | Management | +| 관리기관 | MGC | Management Agency | +| 관리자 | MNGR | Manager | +| 관찰 | WTCH | Watch | +| 관측 | OBSR | Observation | +| 관측소 | OBSRVT | Observatory | +| 교반기 | AGITOR | Agirator | +| 교정 | CRRC | Correction | +| 구간 | SCTN | Section | +| 구동 | DRIVE | Drive | +| 구분 | SE | Section | +| 구성 | CMPSG | Composing | +| 구역 | ZONE | Zone | +| 구조 | STRCT | Structure | +| 권역 | DSTR | District | +| 권한 | AUTH | Authority | +| 규격 | STNDRD | Standard | +| 규모 | SCAL | Scale | +| 규제 | REGL | Regulation | +| 균등 | EQLTY | Equality | +| 금액 | AMT | Amount | +| 급수 | WSP | Water Supply | +| 기간 | WHL | While | +| 기관 | INST | Institution | +| 기록 | RECD | Recording | +| 기록부 | REGI | Register | +| 기밀 | SCRET | Secret | +| 기법 | TECQU | Techniques | +| 기본 | BSIC | Basics | +| 기본정보 | BASINF | Bassinfo | +| 기본키 | PK | Primary Key | +| 기상 | WETHER | Weather | +| 기안 | DRFTG | Drafting | +| 기재 | WRIT | Write | +| 기점 | CDPNT | Cardinal Point | +| 기존 | LGCY | Legacy | +| 기준 | CRTR | Criteria | +| 기타 | ETC | Etc | +| 기한 | TERM | Term | +| 기후 | CLMT | Climate | +| 긴급 | EMRG | Emergency | +| 날개벽 | WW | Wing Wall | +| 날씨 | WETHR | Weather | +| 날짜 | DATE | DATE | +| 남조류 | BLAL | Blue-Green Algae | +| 납 | PB | Plumbum | +| 내려받기 | DWLD | Download | +| 내부반송 | ITNRCC | Internal Recycl | +| 내용 | CN | Content | +| 내용연수 | SVLF | Service Life | +| 냄새 | SMELL | Smell | +| 년 | YY | Year | +| 년간 | FAYR | For A Year | +| 노즐 | NZL | Nozzle | +| 노출 | EXPSR | Exposure | +| 농도 | DNSTY | Density | +| 농축 | TKN | Thickened | +| 누적 | ACML | Accumulate | +| 누출 | LKG | Leakage | +| 눈 | SNW | Snow | +| 단가 | UNPRC | Unit Price | +| 단기 | SRTPD | Short Period | +| 단순 | SIMPL | Simplicity | +| 단위 | UNIT | Unit | +| 대구역 | LZONE | Large Zone | +| 대분류 | LCLAS | Large Classification | +| 대장 | REGSTR | Register | +| 대장균 | COLI | Coliform, Fecal Coliform | +| 대장균군 | COLIB | Coliform Bacteria | +| 대지면적 | SIAR | Site Area | +| 대체 | RPLC | Replace | +| 덮개 | COVR | Cover | +| 데이타 | DAT | Data | +| 도구 | UNT | Unit | +| 도래 | ADVNT | Advent | +| 도로 | ROAD | Road | +| 도로명 | RN | Road Name | +| 도시 | CTY | City | +| 도엽 | MAPDMC | Map Demarcation | +| 도표 | CHART | Chart | +| 독성 | TOXCTY | Toxicity | +| 동의 | AGRE | Agreement | +| 동절기 | WSESN | The Winter Season | +| 등급 | GRD | Grade | +| 등기 | RG | Registered | +| 등록 | REG | Registration | +| 디바이스 | DVICE | Device | +| 디코딩 | DCD | Decoding | +| 레이어 | LYR | Layer | +| 로그인 | LGN | Login | +| 로우 | ROW | Row | +| 마감 | DDLN | Deadline | +| 마이크로필터 | MCRFT | Micro Filter | +| 막 | MBRN | Membrane | +| 만족도 | STFDG | Satisfaction Degree | +| 맑음 | CLAR | Clear | +| 매각 | SAL | Sale | +| 맨홀 | MH | Manhole | +| 맵 | MAP | Map | +| 메인 | MAIN | Main | +| 메일 | EMAIL | Email | +| 메탄올 | MTN | Methanol(CH3OH) | +| 명 | NM | Name | +| 모니터링 | MTRG | Monitoring | +| 모델 | MODL | Model | +| 모델링 | MODLNG | Modeling | +| 모래 | SAND | Sand | +| 목 | MOK | Mok | +| 무산소 | ANX | Anoxic | +| 무산소조 | ANX_TANK | Anoxic Tank | +| 무인센서 | MNLSENSR | Manless Sensor | +| 문서 | DCMT | Document | +| 물 | WTR | Water | +| 미급수 | NONWTRSPL | Non Water Supply | +| 미생물 | BLGC | Biological | +| 미세먼지 | PM | Particulate Matter | +| 미세목 | MCRB | Micro Bar | +| 민간위탁 | ETSVN | Entrustment To Civilian | +| 민감 | SST | Sensitive | +| 민원 | CVLCPT | Civil Complaint | +| 바이러스 | VIRS | Virus | +| 반기 | HT | Half Term | +| 반류수 | SIDSWT | Side Stream Water | +| 반송 | SNDBK | Send Back | +| 반송수 | RCCWT | Recycled Water | +| 반송슬러지 | RTNSLG | Return Sludge | +| 반영 | RFLT | Reflection | +| 반응조 | RETNK | Reactant Tank | +| 반출 | EXPRT | Export | +| 반토 | ALUM | Alumina | +| 반환 | GVBK | Giving Back | +| 받이 | INL | Inlet | +| 발생 | OCRN | Occurrence | +| 발전 | PWGNRT | Power Generation | +| 발주기관 | ORNT | Order Institution | +| 방류 | DCWTR | Discharge Water Stock Etc | +| 방류구 | DSCHG | Discharge | +| 방류수 | EFLEC | Effluence | +| 방문 | VST | Visit | +| 방문자 | VSTR | Visitor | +| 방법 | MTHD | Method | +| 방사 | RLSE | Release | +| 배관 | PLINE | Pipeline | +| 배분 | DSTRB | Distirbution | +| 배설물 | EXCRTN | Excretion | +| 배수 | DRNG | Drainage | +| 배수구역 | DRANGZN | Drainage Zone | +| 배출 | EXHST | Exhaust | +| 배출가스 | EMGA | Emission Gases | +| 배출구 | VENT | Vent | +| 배출시설 | DHGP | Discharge Equipment | +| 배출시험 | EXHTST | Exhaust Test | +| 배출자 | DCHGR | Discharge Person | +| 밸브 | VALVE | Valve | +| 번호 | NO | Number | +| 법 | LAW | Law | +| 법적 | LGL | Legal | +| 법정 | STTY | Statutory | +| 법정동 | STDG | Statutory Dong(Administrative District) | +| 법정리 | STLI | Statutory Li(Administrative District) | +| 변경 | CHG | Change | +| 변동 | FLCTN | Fluctuation | +| 변속기 | TRMIS | Transmission | +| 보고 | RPT | Report | +| 보고서 | RPOT | Report | +| 보관 | STORG | Storage | +| 보수 | MEND | Mend | +| 보유 | HOLD | Hold | +| 보정 | RVSION | Revision | +| 보조 | ASSISC | Assistance | +| 보조금 | SBSIDY | Subsidy | +| 복개 | COVE | Cover | +| 복토 | CWTH | Covering With Soil | +| 본류 | MI_RV | Main River | +| 본번 | MNO | Main Number | +| 부검 | ATPSY | Autopsy | +| 부과 | LEVY | Levy | +| 부과금 | LVYAMT | Levy Amount | +| 부기 | BUKIP | Bookkeeping | +| 부담금 | ALOTM | Allotment | +| 부번 | SNO | Sub Number | +| 부산물 | BYPRD | By-Product | +| 부서 | DEPT | Department | +| 부숙화 | DECPZ | Decomposed ~Ize | +| 부적합 | IMPPRTY | Impropriety | +| 부착 | ASN | Adhesion | +| 부품 | CMPNT | Components | +| 부하량 | LOADQTY | Load Quantity | +| 분과 | DIVSN | Division | +| 분뇨 | ENSO | Excreta, Night Soil | +| 분류 | CL | Classification | +| 분류군 | TAXON | Taxon | +| 분리막 | SPRTMBR | Separation Membrane | +| 분배 | DTRBT | Distribution | +| 분배조 | DTRBT_TANK | Distribution Tank | +| 분야 | RLM | Realm | +| 분원성 | FECL | Fecal | +| 분원성대장균군 | FCOLI | Fecal Coliform | +| 분원성연쇄상구균 | FCSTRCCI | Fecal Streptococci | +| 분할 | PRTIN | Partition | +| 비밀번호 | PSWD | Password | +| 비상 | EMGNY | Emergency | +| 비정상 | ABNRM | Abnormality | +| 사양 | SPECS | Specification | +| 사업비 | WCT | Working Cost | +| 사업장 | BPLC | Business Place | +| 사여과지 | SAND_ FILTR | Sand Filter | +| 사용 | USE | Use | +| 사용가능 | USABLE | Usable | +| 사용권 | RIOUS | Right Of Using | +| 사용량 | USG | USAGE | +| 사용자 | USER | User | +| 사위 | FDG | Four Directions Girth | +| 사유 | RESN | Reason | +| 사이클 | CYCLE | Cycle | +| 사이트 | SITE | Site | +| 사진 | PHOT | Photograph | +| 사항 | MATTR | Matter | +| 사후 | AFTFAT | After Fact | +| 삭제 | DEL | Deletion | +| 산기관 | DFS | Diffuser | +| 산업 | INDUST | Industrial | +| 산화환원전위 | ORP | Oxidation Reduction Potential | +| 살모넬라 | SLMN | Salmonella | +| 삼원촉매장치 | TWCTLC | Three Way Catalytic Converter | +| 상세 | DTL | Details | +| 상세주소 | DADDR | Detailed Address | +| 상수 | WT | Water | +| 상업지역 | CMCL_ARA | Commercial Area | +| 상태 | STUS | Status | +| 상품 | GDS | Goods | +| 상향류 | UFW | Upflow | +| 상호 | CONM | Company Name | +| 색도 | CRMTY | Chromaticity | +| 생략 | OMS | Omission | +| 생물 | LVB | Living Being | +| 생물반응조 | BIRAT | Bioreactor | +| 생물서식처 | ORGNHBT | Organism Habitat | +| 생물종 | BISP | Biological Species | +| 생성 | CRT | Creation | +| 생슬러지 | RSLG | Raw Sludge | +| 생태 | ECLGY | Ecology | +| 생태독성 | ECTOX | ecotoxicity | +| 서류 | PAPE | Papers | +| 서명 | SIGN | Signing | +| 서버 | SRVR | Server | +| 서비스 | SRVC | Service | +| 설계 | DESGN | Design | +| 설계용량 | DESGN_CPCT | Design Capacity | +| 설립 | FNDN | Foundation | +| 설정 | STNG | Setting | +| 설치 | INSTL | Installation | +| 성격 | CHTR | Character | +| 성공 | SCS | Success | +| 성능 | PRFMNC | Performance | +| 성능검사 | EFTST | Efficiency Test | +| 성적서 | SCRRP | Score Report | +| 세균 | BCLS | Bacillus | +| 세목 | FB | Fine bar | +| 세부 | DETAIL | Detail | +| 세정 | WS | Washing | +| 세정제 | CNML | Cleaning Material | +| 소 | SML | Small | +| 소독 | DSNF | Disinfection | +| 소독제 | DSINF | Disinfectant | +| 소분류 | SCLAS | Small Classification | +| 소수점 | DCPT | Decimal Point | +| 소요 | REQ | Required | +| 소유 | OWN | Own | +| 소유역 | SBASIN | Sub Basin | +| 소재지 | PLAC | Place Of Location | +| 소포 | ATFM | Antifoaming | +| 소포수 | FBW | Foam Breaking Water | +| 소포제 | ANAG | Antifoaming Agent | +| 송부 | SENDNG | Sending | +| 송신 | SNDM | Send Message | +| 송풍기 | BLW | Blower | +| 수 | CNT | Count | +| 수거 | TKAWY | Take Away | +| 수계 | WWBH | Watershed, Water Basin, Hydrosphere | +| 수동 | HOPR | Hand Operation | +| 수리학적 체류시간 | HRT | Hydraulic Retention Time | +| 수문 | Gate | Gate | +| 수산화나트륨 | SOHY | Sodium Hydroxide | +| 수소이온 | HION | Hydrogen Ion | +| 수신 | RCPTN | Reception | +| 수용가 | RCPTR | Receptor | +| 수위 | WAL | Water Level | +| 수정 | MDFCN | Modification | +| 수정자 | MDFR | Modifier | +| 수제 | SPRDIKE | Superdike | +| 수조 | Tank | Tank | +| 수질 | QTWT | Quality Of Water | +| 수질개선 | WTRQLIMP | Water Quality Improvement | +| 수질기준 | WQST | Water Quality Standards | +| 수질배출정보 | WTDI | Water Discharge Information | +| 수집 | CLCT | Collection | +| 순환 | CCL | Cycling | +| 쉬겔라 | SHIGLA | Shigella | +| 스컴 | SCM | Scum | +| 스크린 | SCR | Screen | +| 슬러지 | SLG | Sludge | +| 슬러지 밀도지수 | SDI | sludge density index | +| 슬러지 용량 지표 | SVI | Sludge Volume Index | +| 습지 | WTLN | Wetland | +| 승인 | APRV | Approval | +| 승인권 | APPRVRGT | Right Of Approval | +| 시각 | TIME | Time | +| 시간 | HR | Hour | +| 시군구 | SGG | Si/Gun/Gu | +| 시나리오 | SCEN | Scenario | +| 시도 | CTPV | Cities And Provinces | +| 시료 | SMPL | Sample | +| 시설 | FCLT | Facility | +| 시설면적 | FCAR | Facility Area | +| 시설물 | FCLTS | Facilities | +| 시스템 | SYS | System | +| 시안 | CYN | Cyaan | +| 시운전 | TSTRN | Test Run | +| 시작 | BGNG | Beginning | +| 시점 | PTM | Point Time | +| 시행 | ENFC | Enforcement | +| 시험 | TEST | Test | +| 신고 | DCLR | Declaration | +| 신고자 | DCL | Declarer | +| 신규 | NEW | New | +| 신기술 | NTCH | New Technology | +| 신뢰 | CNFDNC | Confidence | +| 신뢰성 | CRDIBLTY | Credibility | +| 실시 | OPRT | Operation | +| 실적 | ACRS | Actual Result | +| 실행 | EXCN | Execution | +| 심사 | SRNG | Screening | +| 심의 | DLBR | Deliberation | +| 아황산환원혐기성포자형성균 | SFSRA | Spore Forming Sulfite Reducing Anaerobes | +| 안정화 | STBLZT | Stabilization | +| 암롤박스(컨테이너) | ARTCT | Arm roll type container | +| 암모니아성질소 | NHN | Ammonia Nitrogen | +| 압력 | PRESSR | Pressure | +| 압송 | PUMPNG | Pumping | +| 압축 | CMPRS | Compress | +| 액비 | LQFERTLZ | Liquid Fertilizer | +| 액상 | LIQD | Liquid | +| 약 | GENTLE | Gentle | +| 약품 | CMC | Chemical | +| 약품비 | MEDFEE | Medicine Fee | +| 약품사용 | USMD | Use Medicines | +| 업로드 | UPLD | Upload | +| 업무 | DTY | Duty | +| 없음 | NOT | Nothing | +| 에너지 | ENR | Energy | +| 에틸벤젠 | ETBNZN | Ethylbenzene | +| 여과 | FILTR | Filteration | +| 여과수 | FTWT | Filtered Water | +| 여과재 | FTMTRL | Filter Material | +| 여과형 | FILTRFOM | Filter Form | +| 여부 | YN | Yes or No | +| 여시니아균 | YERSNA | Yersinia | +| 역률 | PWRER_FCT | Power Factor | +| 역세척 | BWS | Back Wash | +| 연결 | CONN | Connection | +| 연계 | LINK | Link | +| 연도 | YR | Year | +| 연락 | CNTC | Contact | +| 연령 | AGE | Age | +| 연료화 | FUELZ | Fuelize | +| 연월 | YM | Year and Month | +| 염소 | CLRN | Chlorine | +| 염소소독 | CHDI | Chlorine Disinfection | +| 염소이온 | CLION | Chlorine Ion | +| 염화제이철 | IRCLD | Iron(III) Chloride | +| 예보 | FRCST | Forecast | +| 예비 | PRPT | Preparation | +| 예산 | BGT | Budget | +| 예상 | EXPCT | Expectation | +| 예약 | RSVT | Reservation | +| 예외 | EXCPT | Exception | +| 예정 | PRNG | Prearrangement | +| 예찰 | PRDICT | Prediction | +| 오류 | ERR | Error | +| 오수받이 | HUS_INL | House Inlet | +| 오염물질 | CNTMN | Contaminant | +| 오염원 | POLUSRC | Pollution Source | +| 오존 | OZN | Ozone | +| 오프로드 | OFFRD | Off Road | +| 옥살산 | OXACID | Oxalic Acid | +| 와류 | VORTEX | Vortex | +| 와류형 | VORTXFOM | Vortex From | +| 완결 | COMPLT | Completion | +| 완료 | CMPTN | Completion | +| 완전 | PRFECT | Perfection | +| 요건 | REQSIT | Requisite | +| 요막액 | ALLNTFLD | Allantoic Fluid | +| 요청 | DMND | Demand | +| 용량 | CPCT | Capacity | +| 용역 | SERVC | Service | +| 용존산소 | DO | Dissolved Oxygen | +| 용해 | DSLV | Dissolving | +| 우량 | EXLT | Excellent | +| 우수 | ST | Storm | +| 우수받이 | STRT_INL | Street Inlet | +| 우수토구 | STM_OVFL_MUT | Storm Overflow Mouth | +| 우회 | BP | BY PASS | +| 운반 | CNVY | Conveyance | +| 운영 | OPER | Operation | +| 운영비 | OPEXP | Operation Expense | +| 운행 | OPRAT | Operation | +| 원격 | RMRT | Rmrt | +| 원격감시체계 | TMS | Tele Monitoring System | +| 원료 | MTRAL | Material | +| 원수 | ORGWT | Origin'S Water | +| 원인자 | ORGPR | The Origin Person | +| 월 | MM | Month | +| 위도 | LAT | Latitude | +| 위반 | CNTR | Contravene | +| 위촉 | ENTRST | Entrusting | +| 위치 | LOC | Location | +| 위탁 | CNSG | Consign | +| 위탁자 | CONSGNR | Consignor | +| 유기인 | ORGP | Organic Phosphorus | +| 유량 | FLUX | Flux | +| 유량조정조 | EQLZT__TANK | Equalization Tank | +| 유입 | INFlOW | Inflow | +| 유입수 | INFWTR | Influent Water | +| 유주 | SWARMG | Swarming | +| 유지 | MNTNC | Maintenance | +| 유지용수공급 | MWRS | Maintenance Water Requirement Supply | +| 유체 | FLUID | Fluid | +| 유출 | EFFLUX | Efflux | +| 유충 | LAVL | Larval | +| 유형 | TY | Type | +| 유효 | VLD | Validity | +| 음용 | DKPS | For Drinking Purpose | +| 읍면동 | EMD | Eup/Myun/Dong | +| 응답 | RSPNS | Response | +| 응집제 | COAG | Cohesive Agents | +| 이관 | TRNSF | Transfer | +| 이동 | MVMN | Movement | +| 이력 | HST | History | +| 이메일 | EML | Email | +| 이상 | ABOVE | Above | +| 이송 | TRSF | Transfer | +| 이의 | OBJC | Objection | +| 이차 | SCDR | Secondary | +| 이차침전지 | SCDR_SDMT_TANK | Secondary Sedimaentation | +| 이행 | MIG | Migratation | +| 인건비 | PEXP | Personnel Expenses{Expenditure] | +| 인계 | HNDVR | Handover | +| 인계서 | HDOVDC | Handover Document | +| 인구 | POPL | Population | +| 인산 | PHACID | Phosphoric Acid | +| 인산염인 | POP | phosphate | +| 인양기 | LFT | Lifter | +| 인원수 | NOPE | The Number of Persons | +| 인증 | CERT | Certification | +| 인처리 | PPRCS | Phosphorus Process | +| 인허가 | APVL | Approval | +| 일 | DY | Day | +| 일련번호 | SN | Serial Number | +| 일반 | GNRL | General | +| 일별 | DALY | Daily | +| 일시 | DT | Date and Time | +| 일자 | YMD | YEAR Month Day | +| 일지 | DIARY | Diary | +| 일차 | PRM | Primary | +| 일차침전지 | PST_SDMT_TANK | Primary Sedimentation Tank | +| 일평균 | DYRG | Day Average | +| 임시 | TMPR | Temporary | +| 임의 | RNDM | Random | +| 입고 | WRHS | Warehousing | +| 입력 | INPT | Input | +| 잉여 | SPS | Surplus | +| 잉여슬러지 | EC_SLG | Excess Sludge | +| 자 | MAN | Man | +| 자갈 | GRAVEL | Gravel | +| 자료 | DATA | Data | +| 자리 | DIGIT | Digit | +| 자립화 | SLFRLI | Self Reliance | +| 자연형 | NATRLFOM | Natural Form | +| 자외선 | URLI | Ultraviolet Rays, Light | +| 자재 | MTRIL | Material | +| 자체 | ITSL | Itself | +| 작성 | WRT | Writing | +| 작업 | JOB | Job | +| 잠금 | LOCK | Lock | +| 장기 | LNGTR | Long Term | +| 장소 | PLCE | Place | +| 장착 | MNTNG | Mounting | +| 재 | RE | Re | +| 재이용 | REUSE | Reuse | +| 재이용수 | | Reuse Water | +| 재활용 | RUSE | Reuse | +| 저감 | REDUC | Reduction | +| 저류조 | DTT_TANK | Detention Tank | +| 저온 | LOWTMP | Low Temperature | +| 저장 | STRG | Storage | +| 저장소 | STORGE | Storage | +| 적발 | DSCL | Disclose | +| 적산 | ADD | Addition | +| 적용 | APLCN | Application | +| 적합 | STBLT | Suitability | +| 전기 | ELCTY | Electricity | +| 전기료 | ELFEE | Electricity Fee | +| 전력 | PWRER | Power | +| 전문 | SPCY | Specially | +| 전산 | CMPUTT | Computation | +| 전송 | TRSM | Transmission | +| 전압 | VLTGE | Voltage | +| 전용 | EXUSE | Exclusive Use | +| 전원 | SELCT | Source Of Electricity | +| 전처리 | PRETR | Pretreatment | +| 점검 | CHCK | Check | +| 접속 | CNTN | Connection | +| 정밀 | PRCIS | Precision | +| 정보 | INFO | Information | +| 정산 | CLCLN | Calculation | +| 정상 | NRMLT | Normality | +| 정수장 | WPPW | Water Purification Plant, Waterworks | +| 정제 | REFINE | Refining | +| 정지 | STP | Stop | +| 제거 | RMV | Removal | +| 제수변 | SL_VALVE | Sluice Valve | +| 제작 | MNFCT | Manufacture | +| 제조사 | MKR | Maker | +| 제출 | SBMSN | Submission | +| 제한 | LIMT | Limitation | +| 조류 | ALG | Algae | +| 조목 | CSB | Coarse Bar | +| 조사 | EXMN | Examination | +| 조성 | MAKE | Make | +| 조정 | EQLT | Equalization | +| 조치 | ACTN | Action | +| 조회 | INQ | Inquiry | +| 존재 | EXST | Existence | +| 종결 | TRMN | Termination | +| 종균제 | MICBA | Microbial Agent | +| 종료 | END | End | +| 종류 | KND | Kind | +| 종목 | IEM | Item | +| 종별 | ASORT | Assortment | +| 종사자 | ENFSN | Enfilade Person | +| 종점 | TMNL | Terminal | +| 좌표 | COOR | Coordinate | +| 주간 | WIK | Week | +| 주변 | CFR | Circumference | +| 주소 | ADDR | Address | +| 주입 | IJTN | Injection | +| 주파수 | FQNC | Frequency | +| 준공 | CMCN | Completion Of Construction | +| 중권역 | MDSTRC | Medium District | +| 중복 | DPCN | Duplication | +| 중분류 | MLSFC | Middle Classification | +| 중온 | MESPH | Mesophilic | +| 중첩 | RETRTN | Reiteration | +| 중화설비 | NUTEQP | Neutralization Equipment | +| 중화제 | CNTAG | Counteragent | +| 증가 | INCRS | Increase | +| 지도점검표사본 | CITBMR | Copy of Instruction Checklist | +| 지방자치단체 | LGOV | Local Governments | +| 지번 | LOTNO | Lot Number | +| 지상 | GRND | Ground | +| 지역 | ARA | Area | +| 지질 | NTRFS | Nature Of Soil | +| 지질도 | GEOMAP | Geological Map | +| 지하 | UDGD | Underground | +| 지하수 | GROU | Groundwater | +| 지형 | TPGRPH | Topography | +| 진공 | VCM | Vacuum | +| 진단 | DGNSS | Diagnosis | +| 진동 | VIBRAT | Vibration | +| 진행 | PRGRE | Progress | +| 질산 | NIACID | Nitric Acid. | +| 질산성질소 | NO3N | Nitrate Nitrogen | +| 집계 | TOT | Total | +| 집계구 | SUMDST | Summation District | +| 집행 | IMPL | Implementation | +| 찌꺼기 | LEES | Lees | +| 차아염소산 | NAOCL | Hypochlorous Acid | +| 차집 | ITCT | Intercepting | +| 착공 | BGNCST | Begin Construction | +| 채수 | SAMWT | Sampling Of Water | +| 채수기 | WTRSMPLR | Water Sampler | +| 채수병 | WTRBOTL | Water Bottle | +| 처리 | PRCS | Process | +| 처리비 | PSSFEE | Process Fee | +| 처리수 | TRT_WT | Treated Water | +| 처리수조 | TRT_WT_TANK | Treated Water Tank | +| 처리시설 | TRTMTFCLT | Treatment Facility | +| 처리자 | PRCR | Processor | +| 처분 | DSPS | Disposition | +| 철염 | FESLT | Ferric Salt | +| 첨부 | ATCH | Attachment | +| 첨부파일 | ATFI | Attachment File | +| 초과 | EXCS | Excess | +| 초기화 | INITL | Initialization | +| 촉매 | CTLY | Catalyst | +| 총계 | TSM | Summation | +| 총대장균군 | TCOLFGRP | Total Coliform Group | +| 총량 | TQT | Total Quantity | +| 총면적 | GFA | Gross Floor Area | +| 총사업비 | TPCO | Total Project Cost | +| 총인구 | TPOPLTN | Total Population | +| 총인처리시설 | TPFCT | Total Phosphorus facility | +| 최근 | RCNT | Recent | +| 최대값 | MAXV | Maximum Value | +| 최소값 | MINV | Minimum Value | +| 최적 | BMTB | Being The Most Suitable | +| 최종 | LAST | Last | +| 최초 | FRST | First | +| 추출 | EXTR | Extraction | +| 추출정보 | EXTRINFO | Extraction Information | +| 축 | AXS | Axis | +| 출력 | OTPT | Output | +| 출발 | LVE | Leave | +| 충전기 | CHRGR | Charger | +| 취득 | ACQS | Acquisition | +| 취소 | RTRCN | Retraction | +| 측정 | MSUR | Measurement | +| 측정기 | MSRR | Measurement Instrument | +| 측정소 | MSRSTN | Measurement Station | +| 침사지 | GTCB | Grit Chamber | +| 침전 | SDMT | Sediment | +| 침전지 | SDMT_TANK | sedimentation tank | +| 컨베이어 | CVY | Conveyor | +| 컬럼 | COL | Column | +| 코드 | CD | Code | +| 크기 | SZ | Size | +| 크실렌 | XYLEN | Xylene | +| 탄화 | CARB | Carbonization | +| 탈거 | CRYOFF | Carry Off | +| 탈리액 | SPNT | Supernatant | +| 탈수 | DWTR | Dewatering | +| 탈수기 | DEHYM | Dehydration Machine | +| 탈질 | DNTFCT | Denitrificatio | +| 탈취 | DODRZ | Deodorization | +| 탈취기 | DEODRZ | Deodorizer | +| 탈취제 | DEODR | Deodorant | +| 탈황제 | DSLFA | Desulfurizing Agent | +| 터널형 | YUNLTP | Tunnel Type | +| 테이블 | TBL | Table | +| 토구 | OTFL | Outfall | +| 토지 | LAD | Land | +| 토지면적 | LDAR | Land Area | +| 통계 | STATS | Statistics | +| 통보 | NTFCTN | Notification | +| 통신 | COMM | Communication | +| 통지 | AVTSMT | Avertissement | +| 통합 | UNTY | Unity | +| 특성 | CHRT | Character | +| 특수 | SPECL | Special | +| 특정유해물질 | SHCH | Specified Hazardous Chemicals | +| 파일 | FILE | File | +| 판정 | JGMT | Judgement | +| 펌프 | PUMP | Pump | +| 펌프장 | PUMP_STT | Pump Station | +| 페놀 | PHNL | Phenol | +| 평가 | EVL | Evaluation | +| 폐기 | DSCD | Discard | +| 폐기물 | WSTE | Waste | +| 폐쇄 | CLSG | Closing | +| 폐수 | WAWA | Waste Water | +| 폐수처리 | WSWT | Wastewater Treatment | +| 폐열 | WASTHET | Waste Heat | +| 포기 | ARTN | Aeration | +| 포트 | PORT | Port | +| 폭기조 | ARTN_TANK | Aeration Tank | +| 폴리머 | PLYMR | Polymer | +| 폴리철 | FRRCSU | Ferric Sulfate | +| 표고 | AL | Altitude | +| 표기 | MARK | Mark | +| 표시 | INDCT | Indication | +| 표준 | STD | Standard | +| 표출 | EPRSS | Expression | +| 플래그 | FLAG | Flag | +| 필드 | FILD | Field | +| 필수 | ESNTL | Essential | +| 필증 | CERFIN | Certificate Of Finishing | +| 필터 | FLTER | Filter | +| 하수 | SWGE | Sewage | +| 하수도 | DRNGSYS | Drainage System | +| 하수미처리 | SEWGUNTTM | Un Sewage Treatment | +| 하수처리 | SEWGTRTM | Sewage Treatment | +| 하수처리수 | STWTR | Sewage Treatment Water | +| 하위 | LOWR | Lower | +| 하향류 | DWFW | Downflow | +| 할인 | DSCNT | Discount | +| 함수율 | MISTR_CTNT | Moisture content | +| 합계 | SMM | Summation | +| 해당 | RLVT | Relevant | +| 해석 | INTRPRTT | Interpretation | +| 해양투기 | OCDU | Ocean Dumping | +| 행망 | ADMNW | Administration Network | +| 행정 | ADMN | Administration | +| 행정구역 | ADMI | Administrative District | +| 행정동 | DONG | Dong (Administrative District) | +| 허가 | PRMSN | Permission | +| 허용 | PERM | Permission | +| 현상 | PHNMN | Phenomenon | +| 혐기 | AARB | Anaerobic | +| 혐기조 | AARB_TANK | Anaerobic tank | +| 협잡물 | CCMT | Concomitant | +| 형태 | SHAP | Shape | +| 호기 | ARB | Aerobic | +| 호기조 | ARB_TANK | Aerobic Tank | +| 호소수 | LMSHWT | Lake And Marsh Water | +| 호수 | LKE | Lake | +| 호안 | RVTMNT | Revetment | +| 호이스트 | HIST | Hoist | +| 혼합 | CMPN | Compound | +| 혼합액현탁고형물 | MLSS | Mixed liquor suspended solids | +| 혼화지 | MXG_TNAK | Mixing tank | +| 홈페이지 | HMPG | Homepage | +| 홍수 | FLOOD | Flood | +| 확인 | IDNTY | Identify | +| 확인서 | CNFRMN | Confirmation | +| 확인자 | IDFR | Identifier | +| 확장자 | EXTN | Extension | +| 확정 | CFMTN | Confirmation | +| 환경 | ENVR | Environment | +| 환경기초시설 | ENINF | Environmental Infrastructure | +| 환원 | RSTORE | Restoration | +| 활성탄 | AC | Activated Carbon | +| 활성화 | PRMT | Promote/Facilitate | +| 활용 | PRUS | Practical Use | +| 황산 | ECCBT | Encyclopaedia Britannica (H2So4) | +| 회사 | CO | Company | +| 회수 | RTRVL | Retrieval | +| 회신 | RPLY | Reply | +| 효율 | EFC | Efficiency | +| 효율성 | EFFCTV | Effectiveness | +| 휴대 | MBL | Mobile | +| 흡수정 | EXTTW | Extraction Well | +| 흡착 | ADST | Adsorption | diff --git a/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx b/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx index 859af4058..c49d75530 100644 --- a/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx +++ b/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { keepPreviousData, useQuery, @@ -75,7 +75,7 @@ function AddAdminDialog() { }); const query = useQuery({ - queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination, "normal-user"], + queryKey: [ENDPOINT.USER_SERVICE.USERS, "findPageUser", pagination], queryFn: () => UserApi.findPageUser({ ...userSearchQuery, @@ -181,6 +181,21 @@ function AddAdminDialog() { query.refetch(); }; + useEffect(() => { + if (!open) { + setRowSelection({}); + setSelectedGroupId(""); + setUserSearchQuery({ + keywordType: "userName", + keyword: "", + }); + setPagination({ pageIndex: 0, pageSize: 10 }); + queryClient.removeQueries({ + queryKey: [ENDPOINT.USER_SERVICE.USERS, "findPageUser"], + }); + } + }, [open]); + return ( diff --git a/apps/cs/src/pages/board-statistics/api/board-statistics-service.ts b/apps/cs/src/pages/board-statistics/api/board-statistics-service.ts index 03291223c..9380132e8 100644 --- a/apps/cs/src/pages/board-statistics/api/board-statistics-service.ts +++ b/apps/cs/src/pages/board-statistics/api/board-statistics-service.ts @@ -1,53 +1,22 @@ -// import { client } from "@/shared/api"; -// import { ENDPOINT } from "@/shared/config"; +import { client } from "@/shared/api"; +import { ENDPOINT } from "@/shared/config"; import { type BoardStatisticsParams, type BoardStatistics, type BoardStatisticsService, } from "../model/board-statistics-interface"; -// 임시 모의 데이터 -const mockBoardStatisticsData: BoardStatistics = { - totalPosts: 2456, - totalComments: 156, - averageRating: 4.2, - totalViews: 45678, - dayList: [ - { date: "1월", posts: 10, comments: 5, views: 800 }, - { date: "2월", posts: 15, comments: 8, views: 1200 }, - { date: "3월", posts: 12, comments: 10, views: 1000 }, - { date: "4월", posts: 18, comments: 15, views: 1500 }, - { date: "5월", posts: 22, comments: 20, views: 1800 }, - { date: "6월", posts: 20, comments: 18, views: 1600 }, - { date: "7월", posts: 25, comments: 22, views: 2000 }, - ], - boardList: [ - { boardType: "notice", boardName: "공지사항", count: 45 }, - { boardType: "faq", boardName: "FAQ", count: 120 }, - { boardType: "qna", boardName: "Q&A", count: 180 }, - { boardType: "free", boardName: "자유게시판", count: 95 }, - ], - statusList: [ - { status: "completed", statusName: "답변완료", count: 75 }, - { status: "waiting", statusName: "답변대기", count: 25 }, - ], -}; - class BoardStatisticsApiService implements BoardStatisticsService { async getBoardStatistics( params: BoardStatisticsParams, ): Promise { - console.log("params: ", params); try { // 실제 API 연동 시 아래 코드 사용 - // const response = await client.get( - // `${ENDPOINT.CMS_SERVICE.BOARD_STATISTICS}`, - // { params }, - // ); - // return response.data; - - // 임시 모의 데이터 반환 - return Promise.resolve(mockBoardStatisticsData); + const response = await client.get( + `${ENDPOINT.BOARD_SERVICE.STATISTICS}`, + { params }, + ); + return response.data; } catch (error) { console.error("게시판 통계 데이터 조회 실패:", error); throw error; diff --git a/apps/cs/src/pages/board-statistics/model/board-statistics-interface.ts b/apps/cs/src/pages/board-statistics/model/board-statistics-interface.ts index 1f113475f..3d7a97c87 100644 --- a/apps/cs/src/pages/board-statistics/model/board-statistics-interface.ts +++ b/apps/cs/src/pages/board-statistics/model/board-statistics-interface.ts @@ -12,32 +12,36 @@ export interface BoardStatisticsParams extends PageableParams { } export interface BoardStatistics { - totalPosts: number; - totalComments: number; - averageRating: number; - totalViews: number; - dayList: DayStatistics[]; - boardList: BoardTypeStatistics[]; - statusList: StatusStatistics[]; + bbsTotalDto: BbsTotalDto; // 게시판 전체 통계 + pstAnsList: PstAnswerStatistics[]; // 게시물 답변 상태별 통계 목록 + bbsDailyList: BbsDailyStatistics[]; // 게시판 일별 통계 목록 + bbsPstCntList: BbsPostCountStatistics[]; // 게시판별 게시물 건수 통계 목록 } -interface DayStatistics { - date: string; - posts: number; - comments: number; - views: number; +interface BbsTotalDto { + pstInqCnt: number; // 게시물 조회 건수 + pstEvlAvg: number; // 게시물 평가 평균 + pstTotCnt: number; // 게시물 총 건수 + pstAnsWaitCnt: number; // 게시물 답변 대기 건수 } -interface BoardTypeStatistics { - boardType: string; - boardName: string; - count: number; +interface PstAnswerStatistics { + answerNm: string; // 답변 명 + answerYn: string; // 답변 여부 (Y/N) + ansCnt: number; // 답변 건수 } -interface StatusStatistics { - status: string; - statusName: string; - count: number; +interface BbsDailyStatistics { + dayYmd: string; // 일자 (YYYY-MM-DD) + pstInqCnt: number; // 게시물 조회 건수 + pstCmntCnt: number; // 게시물 댓글 건수 + pstNewCnt: number; // 게시물 신규 건수 +} + +interface BbsPostCountStatistics { + bbsId: number; // 게시판 ID + bbsNm: string; // 게시판 명 + pstCnt: number; // 게시물 건수 } export interface BoardStatisticsService { diff --git a/apps/cs/src/pages/board-statistics/model/chart-data.ts b/apps/cs/src/pages/board-statistics/model/chart-data.ts index 2a9b6671f..487d70976 100644 --- a/apps/cs/src/pages/board-statistics/model/chart-data.ts +++ b/apps/cs/src/pages/board-statistics/model/chart-data.ts @@ -11,20 +11,20 @@ export const chartData = { } => { return { data: { - labels: data.dayList.map((item) => item.date), + labels: data.bbsDailyList.map((item) => item.dayYmd), datasets: [ { type: "line", label: "신규게시물", - data: data.dayList.map((item) => item.posts), + data: data.bbsDailyList.map((item) => item.pstNewCnt), borderColor: getCssVariableValue("--chart-1"), backgroundColor: "rgba(59, 130, 246, 0.1)", tension: 0.4, }, { type: "line", - label: "답변대기", - data: data.dayList.map((item) => item.comments), + label: "댓글수", + data: data.bbsDailyList.map((item) => item.pstCmntCnt), borderColor: getCssVariableValue("--chart-2"), backgroundColor: "rgba(236, 72, 153, 0.1)", tension: 0.4, @@ -32,11 +32,10 @@ export const chartData = { { type: "line", label: "조회수", - data: data.dayList.map((item) => item.views), + data: data.bbsDailyList.map((item) => item.pstInqCnt), borderColor: getCssVariableValue("--chart-3"), backgroundColor: "rgba(168, 85, 247, 0.1)", tension: 0.4, - hidden: true, }, ], }, @@ -67,13 +66,13 @@ export const chartData = { } => { return { data: { - labels: data.boardList.map((item) => item.boardName), + labels: data.bbsPstCntList.map((item) => item.bbsNm), datasets: [ { type: "bar", label: "게시판별 분포", - data: data.boardList.map((item) => item.count), - backgroundColor: data.boardList.map((_, index) => + data: data.bbsPstCntList.map((item) => item.pstCnt), + backgroundColor: data.bbsPstCntList.map((_, index) => getCssVariableValue(`--chart-${(index % 5) + 1}`), ), }, @@ -106,12 +105,12 @@ export const chartData = { } => { return { data: { - labels: data.statusList.map((item) => item.statusName), + labels: data.pstAnsList.map((item) => item.answerNm), datasets: [ { type: "doughnut", - data: data.statusList.map((item) => item.count), - backgroundColor: data.statusList.map((_, index) => + data: data.pstAnsList.map((item) => item.ansCnt), + backgroundColor: data.pstAnsList.map((_, index) => getCssVariableValue(`--chart-${(index % 5) + 1}`), ), }, diff --git a/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx b/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx index 13dcbe812..716c390ab 100644 --- a/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx +++ b/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx @@ -26,7 +26,7 @@ import { SelectValue, } from "@common/components"; import { SiteSelect } from "@/entities/site"; -// import { ENDPOINT } from "@/shared/config"; +import { ENDPOINT } from "@/shared/config"; import { NoData } from "@/shared/ui/no-data"; import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker"; import { BoardStatisticsApi } from "../api/board-statistics-service"; @@ -66,7 +66,7 @@ function BoardStatisticsPage() { }); const { data: boardStatisticsData } = useQuery({ - queryKey: ["board-statistics", searchParams], + queryKey: [ENDPOINT.BOARD_SERVICE.STATISTICS, searchParams], queryFn: () => BoardStatisticsApi.getBoardStatistics({ ...searchParams, @@ -176,7 +176,8 @@ function BoardStatisticsPage() {

총 게시물

- {boardStatisticsData?.totalPosts.toLocaleString() || 0} + {boardStatisticsData?.bbsTotalDto?.pstTotCnt?.toLocaleString() || + 0}
답변대기
- {boardStatisticsData?.totalComments.toLocaleString() || 0} + {boardStatisticsData?.bbsTotalDto?.pstAnsWaitCnt?.toLocaleString() || + 0}
평균평점
- {boardStatisticsData?.averageRating.toFixed(1) || 0} + {boardStatisticsData?.bbsTotalDto?.pstEvlAvg?.toFixed(1) || 0}
총 조회수
- {boardStatisticsData?.totalViews.toLocaleString() || 0} + {boardStatisticsData?.bbsTotalDto?.pstInqCnt?.toLocaleString() || + 0}
일별 게시물 현황
- {boardStatisticsData?.dayList?.length ? ( + {boardStatisticsData?.bbsDailyList?.length ? ( ) : ( @@ -329,7 +332,7 @@ function BoardStatisticsPage() {

답변상태

- {boardStatisticsData?.statusList?.length ? ( + {boardStatisticsData?.pstAnsList?.length ? ( ) : ( @@ -342,7 +345,7 @@ function BoardStatisticsPage() {

게시판별 분포

- {boardStatisticsData?.boardList?.length ? ( + {boardStatisticsData?.bbsPstCntList?.length ? ( ) : ( diff --git a/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx index d21f5b60a..3179303dd 100644 --- a/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx +++ b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx @@ -1,4 +1,4 @@ -import { memo } from "react"; +import { memo, useEffect } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useQuery, useQueryClient } from "@tanstack/react-query"; @@ -140,6 +140,10 @@ const LwpoCodeManagementDialog = memo( } }; + useEffect(() => { + if (!open) form.reset(); + }, [open]); + return ( {children} diff --git a/apps/cs/src/pages/code/ui/upcode-dialog.tsx b/apps/cs/src/pages/code/ui/upcode-dialog.tsx index fafb7429f..6774bd17e 100644 --- a/apps/cs/src/pages/code/ui/upcode-dialog.tsx +++ b/apps/cs/src/pages/code/ui/upcode-dialog.tsx @@ -1,4 +1,4 @@ -import { memo } from "react"; +import { memo, useEffect } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useQuery } from "@tanstack/react-query"; @@ -96,6 +96,10 @@ const UpCodeManagementDialog = memo( if (await confirm(confirmMessage)) callback(data); }; + useEffect(() => { + if (!open) form.reset(); + }, [open]); + return ( {children} diff --git a/apps/cs/src/pages/dashboard/api/dashboard-service.ts b/apps/cs/src/pages/dashboard/api/dashboard-service.ts index 94bf807a1..998215864 100644 --- a/apps/cs/src/pages/dashboard/api/dashboard-service.ts +++ b/apps/cs/src/pages/dashboard/api/dashboard-service.ts @@ -1,6 +1,13 @@ import { client } from "@/shared/api"; import { ENDPOINT } from "@/shared/config"; -import type { Dashboard, DashboardService } from "../model/dashboard-interface"; +import type { + Dashboard, + DashboardService, + NoticeUser, + Schedule, + ScheduleQueryParams, +} from "../model/dashboard-interface"; +import type { PageableList } from "@/shared/model"; export class DashboardApiService implements DashboardService { public async getDashboard(): Promise { @@ -9,6 +16,25 @@ export class DashboardApiService implements DashboardService { ); return response.data; } + + public async getNoticeUserList( + recvUnqId: string, + ): Promise> { + const response = await client.get>( + `${ENDPOINT.CMS_SERVICE.NOTICE_USER}/${recvUnqId}/list`, + ); + return response.data; + } + + public async getScheduleList( + params?: ScheduleQueryParams, + ): Promise { + const response = await client.get( + ENDPOINT.CMS_SERVICE.SCHEDULES, + { params }, + ); + return response.data; + } } export const DashboardApi = new DashboardApiService(); diff --git a/apps/cs/src/pages/dashboard/model/dashboard-interface.ts b/apps/cs/src/pages/dashboard/model/dashboard-interface.ts index 9e038eef7..e2a01173d 100644 --- a/apps/cs/src/pages/dashboard/model/dashboard-interface.ts +++ b/apps/cs/src/pages/dashboard/model/dashboard-interface.ts @@ -1,3 +1,5 @@ +import type { PageableList } from "@/shared/model"; + export interface SiteStatisticsContent { siteId: string; siteNm: string; @@ -27,6 +29,42 @@ export interface Dashboard { menuAccessList: MenuStatisticsContent[]; } +export interface NoticeUser { + notiId: number; + recvUnqId: string; + senderUnqId: string; + notiType: string; + notiTtl: string; + notReadYn: string; + regDt: string; +} + +export interface Schedule { + schdlBgngDt: string; + schdlEndDt: string; + actualDate: string; + schdlSn: number; + siteId: string; + schdlTtl: string; + schdlSeCd: string; + schdlCn: string; + reptYn: string; + commSchdlYn: string; + atflCd: string | null; +} + +export interface ScheduleQueryParams { + siteId?: string; + schdlTtl?: string; + schdlSeCd?: string; + schdlBgngYmd?: string; + schdlEndYmd?: string; + reptYn?: string; + commSchdlYn?: string; +} + export interface DashboardService { getDashboard(): Promise; + getNoticeUserList(recvUnqId: string): Promise>; + getScheduleList(params?: ScheduleQueryParams): Promise; } diff --git a/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx b/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx index 65fd0030a..d787a6ab7 100644 --- a/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx +++ b/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx @@ -1,5 +1,6 @@ "use client"; +import dayjs from "dayjs"; import { useRouter } from "next/navigation"; import { useQuery } from "@tanstack/react-query"; import { getCoreRowModel } from "@tanstack/react-table"; @@ -17,8 +18,8 @@ import { } from "chart.js"; import { Bar, Line } from "react-chartjs-2"; import { PostApi, type RecentPost } from "@/entities/post"; -import { ENDPOINT } from "@/shared/config"; -import { useDataTable } from "@/shared/lib"; +import { AUTH_USER_ID, ENDPOINT, SITE_ID } from "@/shared/config"; +import { getCookie, useDataTable } from "@/shared/lib"; import { DashboardApi } from "../api/dashboard-service"; import { chartData } from "../model/chart-data"; import { @@ -39,12 +40,44 @@ ChartJS.register( ); function DashboardPage() { + const userId = getCookie(AUTH_USER_ID) ?? ""; + const router = useRouter(); + const { data } = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.DASHBOARD], queryFn: () => DashboardApi.getDashboard(), }); + const { data: noticeUserList } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.NOTICE_USER], + queryFn: () => DashboardApi.getNoticeUserList(userId), + enabled: !!userId, + select: (data) => { + // 오늘 ~ 한 달 전 사이의 일정 + const today = dayjs().endOf("day"); + const monthAgo = dayjs().subtract(1, "month").startOf("day"); + return data.content?.filter((item) => { + const regDt = dayjs(item.regDt); + return ( + (regDt.isSame(monthAgo) || regDt.isAfter(monthAgo)) && + (regDt.isSame(today) || regDt.isBefore(today)) + ); + }); + }, + }); + + const { data: scheduleList } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.SCHEDULES], + queryFn: () => + DashboardApi.getScheduleList({ + siteId: SITE_ID, + schdlBgngYmd: dayjs().format("YYYY-MM-DD"), + schdlEndYmd: dayjs().add(1, "month").format("YYYY-MM-DD"), + commSchdlYn: "Y", + }), + }); + const noticePostQuery = useQuery({ queryKey: [ENDPOINT.BOARD_SERVICE.POSTS], queryFn: () => @@ -323,22 +356,15 @@ function DashboardPage() {
-
- 신규 사용자 가입 - {(1).toLocaleString()}분 전 -
-
- 메뉴 수정 요청 - {(5).toLocaleString()}분 전 -
-
- 게시물 신고 - {(10).toLocaleString()}분 전 -
-
- 컨텐츠 승인 요청 - {(15).toLocaleString()}분 전 -
+ {noticeUserList?.map((item) => ( +
+ {item.notiTtl} + {dayjs(item.regDt).fromNow()} +
+ ))}
@@ -349,24 +375,44 @@ function DashboardPage() {
-
- - {(3).toLocaleString()}월 정기 시스템 점검 - - 내일 -
-
- 서버 업데이트 예정 - {(3).toLocaleString()}일 후 -
-
- 백업 스케줄 - {(5).toLocaleString()}일 후 -
-
- 정기 보안 점검 - {(7).toLocaleString()}일 후 -
+ {scheduleList && scheduleList.length > 0 ? ( + scheduleList.map((schedule, index) => { + const today = dayjs(); + const scheduleDate = dayjs(schedule.actualDate); + const daysUntil = scheduleDate.diff(today, "day"); + + let timeText = ""; + if (daysUntil === 0) { + timeText = "오늘"; + } else if (daysUntil === 1) { + timeText = "내일"; + } else if (daysUntil > 1) { + timeText = `${daysUntil}일 후`; + } else { + timeText = scheduleDate.format("YYYY-MM-DD"); + } + + return ( +
+ + {schedule.schdlTtl} + + {timeText} +
+ ); + }) + ) : ( +
+ 예정된 일정이 없습니다. +
+ )}
diff --git a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx index 38c6597fc..cde3cf641 100644 --- a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx +++ b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx @@ -1,4 +1,4 @@ -import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useQuery } from "@tanstack/react-query"; @@ -48,25 +48,14 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) { keywordType: "", siteId: "", }); - - const handleReset = () => { - if (inputRef.current) inputRef.current.value = ""; - setKeywordType(""); - setSiteId(""); - setSearchParams({ - keyword: "", - keywordType: "", - siteId: "", - }); - }; - const query = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId, searchParams], - queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ - groupId, - ...searchParams - }), + queryFn: () => + MenuAuthorityApi.getGroupMenuAuthorityList({ + groupId, + ...searchParams, + }), enabled: open && !!groupId, }); @@ -117,6 +106,21 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) { }); }; + const handleReset = () => { + if (inputRef.current) inputRef.current.value = ""; + setSiteId(""); + setKeywordType(""); + setSearchParams({ + keyword: "", + keywordType: "", + siteId: "", + }); + }; + + useEffect(() => { + if (!open) handleReset(); + }, [open]); + return ( diff --git a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx index 0459ba804..b3e6f3fe5 100644 --- a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx +++ b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx @@ -1,4 +1,4 @@ -import { useState, memo } from "react"; +import { useState, memo, useEffect } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useQuery } from "@tanstack/react-query"; @@ -90,6 +90,10 @@ const ManagementAuthorityDialog = memo( } }; + useEffect(() => { + if (!open) form.reset(); + }, [open]); + return ( diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx index 5377f6a7b..e327fb88e 100644 --- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx +++ b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx @@ -1,4 +1,4 @@ -import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table"; import { @@ -113,6 +113,10 @@ function MappingRoleDialog({ }, }); + useEffect(() => { + if (!open) handleReset(); + }, [open]); + return ( diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts index ce6f61381..db8eda72c 100644 --- a/apps/cs/src/shared/config/api.ts +++ b/apps/cs/src/shared/config/api.ts @@ -56,6 +56,7 @@ export const ENDPOINT = { APILOG: "/cms-service/api/v1/api-logs", SITE_AUTHORITY: "/cms-service/api/v1/site-authrt", CONNECTION_LOG: "/cms-service/api/v1/cntnlog", + NOTICE_USER: "/cms-service/api/v1/noti/user", }, BOARD_SERVICE: { BBS: "/board-service/api/v1/bbs", @@ -63,6 +64,7 @@ export const ENDPOINT = { POSTS: "/board-service/api/v1/posts", POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts", POST_EVALUATION: "/board-service/api/v1/pstEvl", + STATISTICS: "/board-service/api/v1/stat/bbs", }, }; diff --git a/apps/dm/app/(landing)/reuse/_components/CaseTabsCarousel.tsx b/apps/dm/app/(landing)/reuse/_components/CaseTabsCarousel.tsx new file mode 100644 index 000000000..44f790366 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/CaseTabsCarousel.tsx @@ -0,0 +1,540 @@ +"use client"; + +import React, { + useCallback, + useEffect, + useLayoutEffect, + useMemo, + useRef, + useState, +} from "react"; + +/** + * CaseTabsCarousel.tsx (FINAL OPTIMIZED) + * - 탭별 데이터 + * - 카드 perPage(1/2/3) 반응형 + * - 카드 perPage개 = 1그룹, 좌/우 클릭 시 1그룹 단위 이동 + * - 3그룹 가상화(prev/cur/next)로 DOM 최소화 + * - px 기반 트랙 이동 + "측정 박스 분리"로 좌/우 비침 방지 + * - stale state 제거(방향/인덱스 ref 관리)로 슬라이드 안정성 강화 + * - BUGFIX 1) onTransitionEnd 버블링 방지 (target===currentTarget, transform만 처리) + * - BUGFIX 2) 슬라이드 중(busy) clipWidth 변화로 트랙 스냅(-W) 덮어쓰지 않게 분리 + */ + +type TabKey = "rain" | "reuse" | "sewage" | "global"; + +type CaseItem = { + id: string; + title: string; + desc: string; + imageSrc: string; + href?: string; +}; + +const TABS: { key: TabKey; label: string }[] = [ + { key: "rain", label: "빗물 재이용 사례" }, + { key: "reuse", label: "중수 재이용 사례" }, + { key: "sewage", label: "하수 재이용 사례" }, + { key: "global", label: "해외 재이용 사례" }, +]; + +// 실제 데이터로 교체해서 쓰세요(구조 유지) +const MOCK: Record = { + rain: [ + { + id: "rain-0", + title: "경기도 수원시 빗물이용과 중수도", + desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기…", + imageSrc: "/images/landing/rain_01.png", + href: "/reuse/business/rain/suwon", + }, + // { + // id: "rain-2", + // title: "경기도 수원시 빗물이용과 중수도", + // desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기…", + // imageSrc: "/images/landing/rain_01.png", + // href: "#", + // }, + ], + reuse: Array.from({ length: 6 }).map((_, i) => ({ + id: `reuse-${i}`, + title: `중수 재이용 사례 ${i + 1}`, + desc: "설명 문구가 들어갑니다. (최대 2~3줄) …", + imageSrc: "/images/landing/sample_case.png", + href: "#", + })), + sewage: [ + { + id: "sewage-1", + title: "경기도 파주시 하수 재이용", + desc: "운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에...", + imageSrc: "/images/landing/sewage_01.png", + href: "/reuse/business/sewage/paju", + }, + { + id: "sewage-2", + title: "충남보령 하수재이용", + desc: "보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업...", + imageSrc: "/images/landing/sewage_02.png", + href: "/reuse/business/sewage/bolyeong", + }, + { + id: "sewage-3", + title: "여수시 하수처리수 재이용", + desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로...", + imageSrc: "/images/landing/sewage_03.png", + href: "/reuse/business/sewage/yeosu", + }, + { + id: "sewage-4", + title: "청주시 하수 재이용 시설", + desc: "청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO)...", + imageSrc: "/images/landing/sewage_04.png", + href: "/reuse/business/sewage/cheongju", + }, + { + id: "sewage-5", + title: "수원시 황구지천 하천유지용수", + desc: "황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로...", + imageSrc: "/images/landing/sewage_05.png", + href: "/reuse/business/sewage/hwanggu", + }, + { + id: "sewage-6", + title: "구리시 도로자동청소시스템", + desc: "고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용...", + imageSrc: "/images/landing/sewage_06.png", + href: "/reuse/business/sewage/guri", + }, + ...Array.from({ length: 6 }).map((_, i) => ({ + id: `sewage-x-${i}`, + title: `하수 재이용 사례 ${i + 4}`, + desc: "설명 문구가 들어갑니다. (최대 2~3줄) …", + imageSrc: "/images/landing/sample_case.png", + href: "#", + })), + ], + global: Array.from({ length: 6 }).map((_, i) => ({ + id: `global-${i}`, + title: `해외 재이용 사례 ${i + 1}`, + desc: "설명 문구가 들어갑니다. (최대 2~3줄) …", + imageSrc: "/images/landing/sample_case.png", + href: "#", + })), +}; + +/* ---------------- utils ---------------- */ +function chunk(arr: T[], size: number) { + const res: T[][] = []; + if (size <= 0) return res; + for (let i = 0; i < arr.length; i += size) res.push(arr.slice(i, i + size)); + return res; +} +function mod(n: number, m: number) { + return ((n % m) + m) % m; +} +function usePrefersReducedMotion() { + const [reduced, setReduced] = useState(false); + useEffect(() => { + const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); + const onChange = () => setReduced(mq.matches); + onChange(); + mq.addEventListener?.("change", onChange); + return () => mq.removeEventListener?.("change", onChange); + }, []); + return reduced; +} + +/** + * wrapRef: perPage 계산용 + * clipRef: "패딩 없는 측정 박스" 폭(px) 계산용 + */ +function useCarouselMeasure() { + const wrapRef = useRef(null); + const clipRef = useRef(null); + + const [perPage, setPerPage] = useState(3); + const [clipWidth, setClipWidth] = useState(0); + + // perPage: container width로 반응형 결정 (rAF로 디바운스) + useEffect(() => { + const el = wrapRef.current; + if (!el) return; + + let raf = 0; + + const calc = () => { + const w = el.clientWidth; + if (w < 640) setPerPage(1); + else if (w < 1024) setPerPage(2); + else setPerPage(3); + }; + + const ro = new ResizeObserver(() => { + cancelAnimationFrame(raf); + raf = requestAnimationFrame(calc); + }); + + calc(); + ro.observe(el); + return () => { + cancelAnimationFrame(raf); + ro.disconnect(); + }; + }, []); + + // clipWidth: 패딩 없는 박스에서 width를 정확히 측정 (sub-pixel 반올림) + useEffect(() => { + const el = clipRef.current; + if (!el) return; + + let raf = 0; + + const calc = () => { + const w = Math.round(el.getBoundingClientRect().width); + setClipWidth(w); + }; + + const ro = new ResizeObserver(() => { + cancelAnimationFrame(raf); + raf = requestAnimationFrame(calc); + }); + + calc(); + ro.observe(el); + return () => { + cancelAnimationFrame(raf); + ro.disconnect(); + }; + }, []); + + return { wrapRef, clipRef, perPage, clipWidth }; +} + +/* ---------------- component ---------------- */ +export default function CaseTabsCarousel() { + const [active, setActive] = useState("rain"); + + // 탭별 마지막 그룹 인덱스 기억 + const tabIndexRef = useRef>({ + rain: 0, + reuse: 0, + sewage: 0, + global: 0, + }); + + const reducedMotion = usePrefersReducedMotion(); + const { wrapRef, clipRef, perPage, clipWidth } = useCarouselMeasure(); + + const items = useMemo(() => MOCK[active] ?? [], [active]); + const groups = useMemo(() => chunk(items, perPage), [items, perPage]); + const groupCount = groups.length; + + const [cur, setCur] = useState(0); + const curRef = useRef(0); + + // px 기반 트랙 + const [trackPx, setTrackPx] = useState(0); + const [anim, setAnim] = useState(false); + const [busy, setBusy] = useState(false); + + // 방향 ref (onTransitionEnd에서 trackPx 비교하지 않음) + const dirRef = useRef<-1 | 1 | 0>(0); + + // cur 최신값 유지 + useEffect(() => { + curRef.current = cur; + }, [cur]); + + /** + * 리셋 로직 분리: + * - 탭/perPage/groupCount 바뀔 때만 "인덱스/상태" 리셋 + * - clipWidth 변화는 별도 effect에서 "busy 아닐 때만" 중앙(-W)로 배치 + */ + useLayoutEffect(() => { + const saved = tabIndexRef.current[active] ?? 0; + const nextCur = groupCount ? mod(saved, groupCount) : 0; + + dirRef.current = 0; + setCur(nextCur); + setBusy(false); + setAnim(false); + }, [active, perPage, groupCount]); + + // clipWidth 변화로 트랙 위치를 잡되, 슬라이드 중(busy)엔 덮어쓰지 않음 + useLayoutEffect(() => { + if (busy) return; + if (clipWidth > 0) setTrackPx(-clipWidth); + else setTrackPx(0); + }, [clipWidth, busy]); + + // 3그룹 가상화 + const viewGroups = useMemo(() => { + if (!groupCount) return [[], [], []] as CaseItem[][]; + return [ + groups[mod(cur - 1, groupCount)] ?? [], + groups[mod(cur, groupCount)] ?? [], + groups[mod(cur + 1, groupCount)] ?? [], + ]; + }, [groups, cur, groupCount]); + + const canSlide = groupCount > 1 && clipWidth > 0; + + const go = useCallback( + (dir: -1 | 1) => { + if (!canSlide) return; + if (busy) return; + + dirRef.current = dir; + + setBusy(true); + setAnim(!reducedMotion); + + // 중앙(-W) 기준: prev=0, next=-2W + setTrackPx(dir === 1 ? -2 * clipWidth : 0); + + // reduced motion이면 즉시 확정 + if (reducedMotion) { + const nextCur = mod(curRef.current + dir, groupCount); + tabIndexRef.current[active] = nextCur; + + setCur(nextCur); + setAnim(false); + setTrackPx(-clipWidth); + setBusy(false); + dirRef.current = 0; + } + }, + [active, busy, canSlide, clipWidth, groupCount, reducedMotion] + ); + + // BUGFIX 1) 자식 transitionend 버블링 방지 + transform만 처리 + const onTransitionEnd = useCallback( + (e: React.TransitionEvent) => { + // 자식 transitionend 버블링 방지 + if (e.target !== e.currentTarget) return; + if (e.propertyName !== "transform") return; + + if (!busy || reducedMotion) return; + + const dir = dirRef.current; + if (dir !== 1 && dir !== -1) return; + + const nextCur = mod(curRef.current + dir, groupCount); + tabIndexRef.current[active] = nextCur; + + // 1) 먼저 transition을 끄고(중요) + setAnim(false); + + // 2) cur를 회전 + 트랙을 즉시 중앙(-W)로 스냅 + // (이 순간은 "무조건 애니메이션 없이" 처리되어야 함) + setCur(nextCur); + setTrackPx(-clipWidth); + + // 3) 다음 프레임(2번 rAF)에서 다시 애니메이션 켜고 busy 해제 + requestAnimationFrame(() => { + requestAnimationFrame(() => { + setAnim(!reducedMotion); + setBusy(false); + dirRef.current = 0; + }); + }); + }, + [active, busy, clipWidth, groupCount, reducedMotion] +); + + const goDot = useCallback( + (idx: number) => { + if (!groupCount) return; + if (busy) return; + + const target = mod(idx, groupCount); + tabIndexRef.current[active] = target; + + dirRef.current = 0; + setCur(target); + setAnim(false); + if (clipWidth > 0) setTrackPx(-clipWidth); + }, + [active, busy, clipWidth, groupCount] + ); + + const trackStyle: React.CSSProperties = useMemo( + () => ({ + transform: `translate3d(${trackPx}px, 0, 0)`, + transition: anim ? "transform 700ms cubic-bezier(.22,.61,.36,1)" : "none", + willChange: busy ? "transform" : undefined, + }), + [trackPx, anim, busy] + ); + + return ( +
+ {/* 탭 바 */} +
+
+
+ {TABS.map((t) => { + const isActive = t.key === active; + + return ( + + ); + })} +
+
+
+ + {/* 슬라이더 */} +
+
+ {/* 좌우 버튼 */} + + + + + {/* 중요: clip(가림)과 measure(측정) 분리 */} +
+
+ {/* 측정은 패딩 없는 박스에서 */} +
+ {/* track */} +
+ {viewGroups.map((group, gi) => ( +
+ {/* 그룹 내부: perPage 컬럼 */} +
+ {(group ?? []).map((c) => ( + + ))} +
+
+ ))} +
+
+
+
+ + {/* 도트 */} +
+ {Array.from({ length: Math.max(groupCount, 1) }).map((_, i) => ( +
+
+
+
+ ); +} diff --git a/apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx b/apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx new file mode 100644 index 000000000..6c50d5a5c --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx @@ -0,0 +1,167 @@ +// apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx +"use client"; + +import { useEffect, useMemo, useRef, useState } from "react"; + +type Slide = { src: string; alt?: string }; + +type Props = { + slides: Slide[]; + className?: string; + maxWidthClassName?: string; // 예: "max-w-[760px]" +}; + +export default function CaseImageSlider({ + slides, + className = "", + maxWidthClassName = "max-w-[760px]", +}: Props) { + const safeSlides = useMemo(() => slides.filter(Boolean), [slides]); + const [idx, setIdx] = useState(0); + const [dragging, setDragging] = useState(false); + + const startX = useRef(0); + const deltaX = useRef(0); + + const total = safeSlides.length; + const canSlide = total > 1; + + const go = (dir: number) => { + if (!canSlide) return; + setIdx((prev) => { + const next = prev + dir; + if (next < 0) return total - 1; + if (next >= total) return 0; + return next; + }); + }; + + // ← → 키보드 지원(선택) + useEffect(() => { + const onKey = (e: KeyboardEvent) => { + if (!canSlide) return; + if (e.key === "ArrowLeft") go(-1); + if (e.key === "ArrowRight") go(1); + }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [canSlide, total]); + + // 드래그(마우스/터치)로 넘기기 + const onPointerDown = (e: React.PointerEvent) => { + if (!canSlide) return; + setDragging(true); + startX.current = e.clientX; + deltaX.current = 0; + (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); + }; + + const onPointerMove = (e: React.PointerEvent) => { + if (!dragging) return; + deltaX.current = e.clientX - startX.current; + }; + + const onPointerUp = () => { + if (!dragging) return; + setDragging(false); + + const threshold = 60; // 넘김 감도 + if (deltaX.current > threshold) go(-1); + else if (deltaX.current < -threshold) go(1); + + deltaX.current = 0; + }; + + if (!total) return null; + + return ( +
+
+
+ {/* 좌측 버튼 */} + + + + {/* 우측 버튼 */} + + + + {/* 뷰포트 */} +
+
+ {safeSlides.map((s, i) => ( +
+ {s.alt +
+ ))} +
+
+
+ + {/* 도트 */} + {canSlide && ( +
+ {safeSlides.map((_, i) => { + const active = i === idx; + return ( +
+ )} +
+
+ ); +} diff --git a/apps/dm/app/(landing)/reuse/_components/Lnb.tsx b/apps/dm/app/(landing)/reuse/_components/Lnb.tsx new file mode 100644 index 000000000..c7d834844 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/Lnb.tsx @@ -0,0 +1,171 @@ +// apps/dm/app/(landing)/reuse/_components/Lnb.tsx +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { useMemo, useState } from "react"; + +export type LnbItem = { + label: string; + href?: string; // href 없는 부모(2뎁스 컨테이너)도 허용 + children?: LnbItem[]; +}; + +function isExactActive(pathname: string, href?: string) { + if (!href) return false; + return pathname === href; +} + +export default function Lnb({ title, items }: { title: string; items: LnbItem[] }) { + const pathname = usePathname(); + + // ✅ 현재 경로가 속한 2depth 그룹을 기본 open + const defaultOpenLabel = useMemo(() => { + const found = items.find((it) => it.children?.some((c) => isExactActive(pathname, c.href))); + return found?.label ?? null; + }, [items, pathname]); + + // ✅ 아코디언: 한 번에 하나만 열리도록 openLabel 1개만 관리 + const [openLabel, setOpenLabel] = useState(defaultOpenLabel); + + return ( + + ); +} diff --git a/apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx b/apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx new file mode 100644 index 000000000..4ddc08812 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx @@ -0,0 +1,51 @@ +// apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx +"use client"; + +import Link from "next/link"; +import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; + +export default function LoginStatus() { + const router = useRouter(); + const [userName, setUserName] = useState(null); + + useEffect(() => { + // 예시: 로그인 시 저장한 값 + const name = localStorage.getItem("userName"); + setUserName(name); + }, []); + + const handleLogout = () => { + localStorage.removeItem("accessToken"); + localStorage.removeItem("userName"); + router.refresh(); // 헤더 상태 갱신 + }; + + // 🔹 로그인 전 + if (!userName) { + return ( + + 로그인 + → + + ); + } + + // 🔹 로그인 후 + return ( +
+ + {userName}님 환영합니다. + + +
+ ); +} diff --git a/apps/dm/app/(landing)/reuse/_components/SideIndicator.tsx b/apps/dm/app/(landing)/reuse/_components/SideIndicator.tsx new file mode 100644 index 000000000..8f4cea164 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/SideIndicator.tsx @@ -0,0 +1,99 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import styles from "../reuse.module.css"; + +export interface SideIndicatorItem { + id: string; + label: string; // 상단/공용 라벨 + sideLabel?: string; // 사이드 인디게이터 전용 라벨(옵션) +} + +export default function SideIndicator({ + items, + activeId, +}: { + items: SideIndicatorItem[]; + activeId: string; +}) { + const [manualActiveId, setManualActiveId] = useState(null); + const clearTimerRef = useRef(null); + + const currentId = (manualActiveId ?? activeId ?? "main") || "main"; + + // ✅ manualActiveId가 observer(activeId)와 불일치하기 시작하면 즉시 해제 (stuck 방지) + useEffect(() => { + if (!manualActiveId) return; + if (activeId && activeId !== manualActiveId) setManualActiveId(null); + }, [activeId, manualActiveId]); + + // ✅ fallback: 스무스 스크롤 시간이 길어도 manual이 오래 남지 않게 타임아웃 해제 + useEffect(() => { + return () => { + if (clearTimerRef.current) window.clearTimeout(clearTimerRef.current); + }; + }, []); + + const scrollTo = (id: string) => { + setManualActiveId(id); + + // 기존 타이머 제거 후 새로 설정 + if (clearTimerRef.current) window.clearTimeout(clearTimerRef.current); + clearTimerRef.current = window.setTimeout(() => { + setManualActiveId(null); + }, 1600); + + if (id === "main") { + window.scrollTo({ top: 0, behavior: "smooth" }); + return; + } + + document.getElementById(id)?.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + }; + + return ( + + ); +} diff --git a/apps/dm/app/(landing)/reuse/_components/SubPageHeader.tsx b/apps/dm/app/(landing)/reuse/_components/SubPageHeader.tsx new file mode 100644 index 000000000..fc3bade23 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/SubPageHeader.tsx @@ -0,0 +1,64 @@ +"use client"; + +import Link from "next/link"; + +export type Crumb = { label: string; href?: string }; + +type Props = { + title: string; + crumbs: Crumb[]; + note?: string; + underlineWidthClass?: string; + className?: string; + wrapClassName?: string; + hideFooterLine?: boolean; + hideGuideText?: boolean; +}; + +export default function SubPageHeader({ + title, + crumbs, + note = "* 는 필수 값입니다.", + underlineWidthClass = "w-40", + className = "", + wrapClassName = "", + hideFooterLine = false, + hideGuideText = false, +}: Props) { + return ( +
+
+
+ {/* 좌측 타이틀 */} +
+

{title}

+
+
+ + {/* 우측 브레드크럼 */} + +
+ {/* 하단 라인 + 안내문 */} + {!hideGuideText && ( +
+ * + {note.replace("*", "")} +
+ )} +
+
+ ); +} diff --git a/apps/dm/app/(landing)/reuse/_components/TopNav.tsx b/apps/dm/app/(landing)/reuse/_components/TopNav.tsx new file mode 100644 index 000000000..078d5e0d4 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/TopNav.tsx @@ -0,0 +1,465 @@ +// apps/dm/app/(landing)/reuse/_components/TopNav.tsx +"use client"; + +import Link from "next/link"; +import { useEffect, useId, useState } from "react"; +import { useRouter } from "next/navigation"; + +const NAV_ITEMS = [ + { href: "/reuse/intro/law", label: "물 재이용 소개" }, + { href: "/reuse/cases/rain", label: "물 재이용 현황" }, + { href: "/reuse/business/rain/suwon", label: "물 재이용 사례" }, + { href: "/reuse/apply/place", label: "수요신청" }, +]; + +// ✅ 필요 시 실제 “수요처등록” 페이지로 경로만 교체하세요. +const REGISTER_HREF = "/reuse/apply/place"; + +// ✅ 로그인 정보 저장 키(원하는대로 변경 가능) +const LS_TOKEN_KEY = "reuse_accessToken"; +const LS_USER_KEY = "reuse_userName"; + +type LoginModalProps = { + open: boolean; + onClose: () => void; + onSuccess?: (payload: { userName: string; accessToken?: string }) => void; +}; + +type FieldKey = "bizNo" | "workerNo" | "pw"; + +function isBizNoValid(v: string) { + // 예: 123-45-67890 + return /^\d{3}-\d{2}-\d{5}$/.test(v); +} + +function inputCls(opts: { hasError?: boolean; disabled?: boolean }) { + const base = + "w-full h-[48px] rounded-[4px] border px-5 text-[18px] outline-none"; + if (opts.disabled) return `${base} border-gray-200 bg-gray-50 text-gray-400`; + if (opts.hasError) + return `${base} border-red-500 focus:border-red-500 ring-1 ring-red-400`; + return `${base} border-gray-300 focus:border-sky-400`; +} + +function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) { + const titleId = useId(); + const router = useRouter(); + + const [bizNo, setBizNo] = useState(""); + const [workerNo, setWorkerNo] = useState(""); + const [noWorker, setNoWorker] = useState(false); + const [pw, setPw] = useState(""); + + // ✅ 유효성/서버 에러 표시용 + const [errors, setErrors] = useState>>({}); + const [touched, setTouched] = useState>>({}); + const [submitting, setSubmitting] = useState(false); + + useEffect(() => { + if (!open) return; + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") onClose(); + }; + window.addEventListener("keydown", onKeyDown); + + // 스크롤 잠금 + const prev = document.body.style.overflow; + document.body.style.overflow = "hidden"; + + // 모달 오픈 시 에러/터치 초기화 + setErrors({}); + setTouched({}); + + return () => { + window.removeEventListener("keydown", onKeyDown); + document.body.style.overflow = prev; + }; + }, [open, onClose]); + + useEffect(() => { + if (noWorker) { + setWorkerNo(""); + setErrors((p) => { + const { workerNo: _w, ...rest } = p; + return rest; + }); + } + }, [noWorker]); + + if (!open) return null; + + const validate = () => { + const next: Partial> = {}; + + const b = bizNo.trim(); + const w = workerNo.trim(); + const p = pw.trim(); + + if (!b) next.bizNo = "사업자등록번호를 입력해주세요."; + else if (!isBizNoValid(b)) + next.bizNo = "사업자등록번호 형식이 올바르지 않습니다. (예: 123-45-67890)"; + + if (!noWorker && !w) next.workerNo = "종사자등록번호를 입력해주세요."; + + if (!p) next.pw = "비밀번호를 입력해주세요."; + + setErrors(next); + return next; + }; + + const markTouched = (key: FieldKey) => + setTouched((p) => ({ ...p, [key]: true })); + + const markAllTouched = () => + setTouched({ bizNo: true, workerNo: true, pw: true }); + + const submit = async (e: React.FormEvent) => { + e.preventDefault(); + markAllTouched(); + + const v = validate(); + if (Object.keys(v).length) return; + + try { + setSubmitting(true); + + // ✅ TODO: 실제 로그인 API 연결 지점 + // const res = await fetch("/api/demand/login", { + // method: "POST", + // headers: { "Content-Type": "application/json" }, + // body: JSON.stringify({ bizNo, workerNo: noWorker ? null : workerNo, pw }), + // }); + // if (!res.ok) { ... } + // const data = await res.json(); + // onSuccess?.({ userName: data.userName, accessToken: data.token }); + + // --- 데모: 비밀번호가 "1234"면 성공 처리(원하면 제거) --- + const serverOk = pw.trim() === "1234"; + if (!serverOk) { + setErrors((p) => ({ ...p, pw: "잘못된 비밀번호입니다. (데모: 1234 입력 시 성공)" })); + setTouched((p) => ({ ...p, pw: true })); + return; + } + + onSuccess?.({ userName: "마인드원", accessToken: "demo_token" }); + onClose(); + router.refresh(); + } finally { + setSubmitting(false); + } + }; + + return ( +
+ {/* Backdrop */} + + +

+ 수요처 로그인 +

+ + {/* title underline gradient bar */} +
+
+ + {/* Body */} +
+
+ {/* 사업자 등록번호 */} +
+ + { + setBizNo(e.target.value); + setErrors((p) => ({ ...p, bizNo: undefined })); + }} + onBlur={() => { + markTouched("bizNo"); + validate(); + }} + placeholder="사업자등록번호를 입력하세요. (예: 123-45-67890)" + className={inputCls({ hasError: !!(touched.bizNo && errors.bizNo) })} + /> + {touched.bizNo && errors.bizNo && ( +

+ {errors.bizNo} +

+ )} +
+ + {/* 종사자등록번호 + 해당없음 */} +
+
+ + + +
+ + { + setWorkerNo(e.target.value); + setErrors((p) => ({ ...p, workerNo: undefined })); + }} + onBlur={() => { + markTouched("workerNo"); + validate(); + }} + disabled={noWorker} + placeholder="종사자등록번호를 입력하세요." + className={inputCls({ + disabled: noWorker, + hasError: !noWorker && !!(touched.workerNo && errors.workerNo), + })} + /> + + {!noWorker && touched.workerNo && errors.workerNo && ( +

+ {errors.workerNo} +

+ )} +
+ + {/* 비밀번호 */} +
+ + { + setPw(e.target.value); + setErrors((p) => ({ ...p, pw: undefined })); + }} + onBlur={() => { + markTouched("pw"); + validate(); + }} + placeholder="비밀번호를 입력하세요." + className={inputCls({ hasError: !!(touched.pw && errors.pw) })} + /> + {touched.pw && errors.pw && ( +

+ {errors.pw} +

+ )} +
+ + {/* 로그인 버튼 */} + + + {/* 비밀번호 초기화 요청 */} + + + {/* 하단 안내 박스 + 수요처등록 버튼 */} +
+
+
+ 수요처를 등록하지 않았다면 +
+
+ 먼저 수요처등록을 해주세요. +
+
+ + +
+
+
+
+
+
+ ); +} + +export default function TopNav() { + const router = useRouter(); + + const [loginOpen, setLoginOpen] = useState(false); + const [userName, setUserName] = useState(null); + + // ✅ 초기 로드 시 로그인 상태 반영 + useEffect(() => { + const name = localStorage.getItem(LS_USER_KEY); + setUserName(name); + }, []); + + const openLogin = () => setLoginOpen(true); + + const logout = () => { + localStorage.removeItem(LS_TOKEN_KEY); + localStorage.removeItem(LS_USER_KEY); + setUserName(null); + router.refresh(); + }; + + return ( + <> +
+ {/* ✅ 좌/중/우 정렬이 되도록 컨테이너 구성 */} +
+
+ {/* 좌측: 로고 */} +
+ + HASUON + +
+ + {/* 중앙: 상단 메뉴 */} + + + {/* ✅ 우측: 로그인 버튼 / 로그인 정보 + 로그아웃 */} +
+ {!userName ? ( + + ) : ( + <> + + {userName}님 환영합니다. + + + + )} +
+
+
+
+ + {/* ✅ 로그인 모달 */} + setLoginOpen(false)} + onSuccess={({ userName, accessToken }) => { + // ✅ 로그인 성공 처리: 저장 + 헤더 갱신 + localStorage.setItem(LS_USER_KEY, userName); + if (accessToken) localStorage.setItem(LS_TOKEN_KEY, accessToken); + setUserName(userName); + setLoginOpen(false); + router.refresh(); + }} + /> + + ); +} diff --git a/apps/dm/app/(landing)/reuse/_constants/lnb.ts b/apps/dm/app/(landing)/reuse/_constants/lnb.ts new file mode 100644 index 000000000..49c9ae1ae --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_constants/lnb.ts @@ -0,0 +1,58 @@ +// apps/dm/app/(landing)/reuse/_constants/lnb.ts +import type { LnbItem } from "../_components/Lnb"; + +export const LNB_DEMAND: LnbItem[] = [ + { href: "/reuse/apply/place", label: "수요처등록" }, + { href: "/reuse/apply/register", label: "수요정보등록" }, + { href: "/reuse/apply/status", label: "수요신청현황" }, +]; + +export const LNB_INTRO = [ + { label: "물 재이용 법", href: "/reuse/intro/law" }, + { label: "빗물 이용시설", href: "/reuse/intro/rain" }, + { label: "중수도", href: "/reuse/intro/greywater" }, + { label: "하수처리수", href: "/reuse/intro/treated" }, +]; + +export const LNB_CASES = [ + { label: "빗물이용시설(현황)", href: "/reuse/cases/rain" }, + { label: "중수도(현황)", href: "/reuse/cases/greywater" }, + { label: "하수처리수 재이용시설(현황)", href: "/reuse/cases/treated" }, +]; + +// 물 재이용 사례처럼 2depth가 있는 메뉴 +export const LNB_BUSINESS: LnbItem[] = [ + { + label: "빗물 재이용 사례", + children: [ + { label: "경기도 수원시", href: "/reuse/business/rain/suwon" }, + // { label: "충청남도 보령시", href: "/reuse/business/rain/bolyeong" }, + // { label: "충청북도 청주시", href: "/reuse/business/rain/cheongju" }, + ], + }, + { + label: "중수 재이용 사례", + children: [{ label: "사례 목록", href: "/reuse/business/graywater" }], + }, + { + label: "하수 재이용 사례", + children: [ + { label: "파주시", href: "/reuse/business/sewage/paju" }, + { label: "충청남도 보령시", href: "/reuse/business/sewage/bolyeong" }, + { label: "여수", href: "/reuse/business/sewage/yeosu" }, + { label: "청주", href: "/reuse/business/sewage/cheongju" }, + { label: "수원시 황구지천", href: "/reuse/business/sewage/hwanggu" }, + { label: "구리시 도로자동청소시스템", href: "/reuse/business/sewage/guri" }, + ], + }, + { + label: "해외 재이용 사례", + children: [ + { label: "사례 개요", href: "/reuse/business/globalCase/overview" }, + { label: "대만", href: "/reuse/business/globalCase/taiwan" }, + { label: "호주", href: "/reuse/business/globalCase/australia" }, + { label: "싱가포르", href: "/reuse/business/globalCase/singapore" }, + { label: "EU", href: "/reuse/business/globalCase/eu" } + ], + }, +]; diff --git a/apps/dm/app/(landing)/reuse/_hooks/useScrollSpy.ts b/apps/dm/app/(landing)/reuse/_hooks/useScrollSpy.ts new file mode 100644 index 000000000..3a253e95d --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_hooks/useScrollSpy.ts @@ -0,0 +1,55 @@ +"use client"; +import { useEffect, useRef, useState } from "react"; + +export function useScrollSpy(sectionIds: string[], options?: IntersectionObserverInit) { + const [activeId, setActiveId] = useState(sectionIds[0] ?? ""); + const ratiosRef = useRef>(new Map()); + + useEffect(() => { + const els = sectionIds + .map((id) => document.getElementById(id)) + .filter(Boolean) as HTMLElement[]; + + if (!els.length) return; + + const DEFAULT_ROOT_MARGIN = "83px 0px -65% 0px"; + + // 초기값 세팅(안정화) + ratiosRef.current.clear(); + els.forEach((el) => ratiosRef.current.set(el.id, 0)); + + const io = new IntersectionObserver( + (entries) => { + for (const e of entries) { + const id = (e.target as HTMLElement).id; + ratiosRef.current.set(id, e.isIntersecting ? e.intersectionRatio : 0); + } + + // ✅ 전체 섹션 중 가장 ratio 큰 항목을 active로 + let bestId = activeId; + let bestRatio = -1; + + for (const [id, ratio] of ratiosRef.current.entries()) { + if (ratio > bestRatio) { + bestRatio = ratio; + bestId = id; + } + } + + if (bestId) setActiveId(bestId); + }, + { + root: null, + threshold: [0, 0.01, 0.1, 0.25, 0.5, 0.75], + rootMargin: DEFAULT_ROOT_MARGIN, + ...options, + } + ); + + els.forEach((el) => io.observe(el)); + return () => io.disconnect(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sectionIds.join("|"), options?.rootMargin, JSON.stringify(options?.threshold)]); + + return activeId; +} diff --git a/apps/dm/app/(landing)/reuse/_sections/Cases.tsx b/apps/dm/app/(landing)/reuse/_sections/Cases.tsx new file mode 100644 index 000000000..077d05cfe --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_sections/Cases.tsx @@ -0,0 +1,65 @@ +// apps/dm/app/(landing)/reuse/_sections/Cases.tsx +"use client"; + +export default function Cases() { + return ( +
+
+
+ + {/* 좌측 : 카피 영역 */} +
+
+

+ 빗물+중수도+하수도 +

+ +

+ + 데이터로 보는 + + + 물 재이용 현황 + +

+ + +
+
+ + {/* 우측 : 이미지 카드 */} +
+
+ 물 재이용 현황 데이터 테이블 +
+
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/_sections/Hero.tsx b/apps/dm/app/(landing)/reuse/_sections/Hero.tsx new file mode 100644 index 000000000..8f93bdd72 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_sections/Hero.tsx @@ -0,0 +1,29 @@ +// apps/dm/app/(landing)/reuse/_sections/Hero.tsx +import styles from "../reuse.module.css"; + +export default function Hero() { + return ( +
+
+
+ +
+
+

물 재이용

+

+ 빗물, 오수, 하수처리수, 폐수처리수, 발전소 온배수를 재이용처리하여
+ 생활, 공업, 농업, 조경, 하천유지 등의 용도로 재이용합니다. +

+

+ 전국 하수 재이용률 15.6%(2024년 통계 기준),
+ 물재이용 활성화를 위한 재이용 수요신청, 매칭을 추진하고 있습니다. +

+
+
+
+ + scroll down +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx b/apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx new file mode 100644 index 000000000..070d9ba91 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx @@ -0,0 +1,86 @@ +// apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx +"use client"; + +import Link from "next/link"; + +type IntroCardItem = { + title: string; + desc: string; + image: string; + href: string; +}; + +const INTRO_CARDS: IntroCardItem[] = [ + { + title: "물 재이용 법", + desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.", + image: "/images/landing/card_01.jpg", + href: "/reuse/intro/law", + }, + { + title: "친환경 수자원 빗물", + desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.", + image: "/images/landing/card_02.jpg", + href: "/reuse/intro/rain", + }, + { + title: "알뜰하게 재이용되는 중수", + desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.", + image: "/images/landing/card_03.jpg", + href: "/reuse/intro/greywater", + }, + { + title: "하수처리수 재이용", + desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.", + image: "/images/landing/card_04.jpg", + href: "/reuse/intro/treated", + }, +]; + +export default function IntroCards() { + return ( +
+
+
+
+

물 재이용 소개

+
+
+

+ 지속 가능한 미래를 위한 약속, 깨끗한 물의 새로운 순환을 시작합니다. +

+
+ +
+
+ {INTRO_CARDS.map((card, idx) => ( + + {/* 배경 이미지 (이미 그라디언트 포함) */} + {card.title} + + {/* 텍스트 영역 */} +
+

+ {card.title} +

+

+ {card.desc} +

+
+ + ))} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx b/apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx new file mode 100644 index 000000000..761a79201 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx @@ -0,0 +1,22 @@ +// apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx +import CaseTabsCarousel from "../_components/CaseTabsCarousel"; + + +export default function ProcessFlow() { + return ( +
+
+
+
+

물 재이용 사례

+
+
+
+ + {/* 탭메뉴 영역 */} + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/apply/layout.tsx b/apps/dm/app/(landing)/reuse/apply/layout.tsx new file mode 100644 index 000000000..e9e7e5cb0 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/apply/layout.tsx @@ -0,0 +1,13 @@ +// 예) apps/dm/app/(landing)/reuse/apply/layout.tsx +import type { ReactNode } from "react"; +import Lnb from "../_components/Lnb"; +import { LNB_DEMAND } from "../_constants/lnb"; + +export default function ApplyLayout({ children }: { children: ReactNode }) { + return ( +
+ +
{children}
+
+ ); +} diff --git a/apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx b/apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx new file mode 100644 index 000000000..877eb7d8c --- /dev/null +++ b/apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx @@ -0,0 +1,99 @@ +// apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx (수질기준참고 모달) +"use client"; + +import { useEffect, useId } from "react"; +import Image from "next/image"; + +type Props = { + open: boolean; + onClose: () => void; + imageSrc: string; + title?: string; +}; + +export default function WaterQualityRefModal({ + open, + onClose, + imageSrc, + title = "수질 기준 참고", +}: Props) { + const titleId = useId(); + + useEffect(() => { + if (!open) return; + + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") onClose(); + }; + window.addEventListener("keydown", onKeyDown); + + // 스크롤 잠금 + const prev = document.body.style.overflow; + document.body.style.overflow = "hidden"; + + return () => { + window.removeEventListener("keydown", onKeyDown); + document.body.style.overflow = prev; + }; + }, [open, onClose]); + + if (!open) return null; + + return ( +
+ {/* Backdrop */} + + +

+ {title} +

+ +
+
+ + {/* Body (스크롤 영역) */} +
+
+ {/* 이미지가 길어도 여기서 스크롤 */} + 수질 기준 참고 +
+
+
+
+
+ ); +} diff --git a/apps/dm/app/(landing)/reuse/apply/place/page.tsx b/apps/dm/app/(landing)/reuse/apply/place/page.tsx new file mode 100644 index 000000000..2deb0334e --- /dev/null +++ b/apps/dm/app/(landing)/reuse/apply/place/page.tsx @@ -0,0 +1,350 @@ +// apps/dm/app/(landing)/reuse/apply/place/page.tsx +"use client"; + +import { useMemo, useState } from "react"; +import SubPageHeader from "../../_components/SubPageHeader"; + +type Option = { value: string; label: string }; +type SidoValue = "" | "seoul" | "busan" | "daegu" | "incheon" | "gyeonggi"; + +const SIDO: { value: SidoValue; label: string }[] = [ + { value: "", label: "선택" }, + { value: "seoul", label: "서울특별시" }, + { value: "busan", label: "부산광역시" }, + { value: "daegu", label: "대구광역시" }, + { value: "incheon", label: "인천광역시" }, + { value: "gyeonggi", label: "경기도" }, +]; + +const SIGUNGU_MAP: Record = { + "": [{ value: "", label: "선택" }], + seoul: [ + { value: "", label: "선택" }, + { value: "gangnam", label: "강남구" }, + { value: "yeongdeungpo", label: "영등포구" }, + { value: "mapo", label: "마포구" }, + ], + busan: [ + { value: "", label: "선택" }, + { value: "haeundae", label: "해운대구" }, + { value: "suyeong", label: "수영구" }, + ], + daegu: [ + { value: "", label: "선택" }, + { value: "suseong", label: "수성구" }, + { value: "dalseo", label: "달서구" }, + ], + incheon: [ + { value: "", label: "선택" }, + { value: "namdong", label: "남동구" }, + { value: "yeonsu", label: "연수구" }, + ], + gyeonggi: [ + { value: "", label: "선택" }, + { value: "bundang", label: "성남시 분당구" }, + { value: "suji", label: "용인시 수지구" }, + { value: "ilsandong", label: "고양시 일산동구" }, + ], +}; + +/* --------------------------- + * register/page.tsx 스타일과 맞춘 공통 UI (FormRow/Divider) + * -------------------------- */ + +function Divider() { + return
; +} + +function FormRow({ + label, + required, + children, +}: { + label: React.ReactNode; + required?: boolean; + children: React.ReactNode; +}) { + return ( +
+ {/* 라벨(좌측) */} +
+
+ {label} + {required ? * : null} +
+
+ + {/* 입력(우측) */} +
+ {children} +
+
+ ); +} + +function TextInput({ + value, + onChange, + placeholder, + type = "text", + disabled, + className = "", +}: { + value: string; + onChange: (v: string) => void; + placeholder?: string; + type?: string; + disabled?: boolean; + className?: string; +}) { + return ( + onChange(e.target.value)} + placeholder={placeholder} + className={[ + "h-11 w-full rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800", + "placeholder:text-neutral-400 focus:border-neutral-400 focus:outline-none", + disabled ? "bg-neutral-100 text-neutral-400" : "", + className, + ].join(" ")} + /> + ); +} + +function SelectBox({ + value, + onChange, + options, + className = "", +}: { + value: T; + onChange: (v: T) => void; + options: { value: T; label: string }[]; + className?: string; +}) { + return ( + + ); +} + +export default function DemandPlaceRegisterPage() { + const [sido, setSido] = useState(""); + const [sigungu, setSigungu] = useState(""); + + const [company, setCompany] = useState(""); + const [bizNo, setBizNo] = useState(""); + const [workerNo, setWorkerNo] = useState(""); + const [noWorkerNo, setNoWorkerNo] = useState(false); + + const [zip, setZip] = useState(""); + const [addr1, setAddr1] = useState(""); + const [addr2, setAddr2] = useState(""); + + const [tel, setTel] = useState(""); + const [pw, setPw] = useState(""); + const [pw2, setPw2] = useState(""); + + // ✅ undefined 불가(Record + sido가 SidoValue) + const sigunguOptions = useMemo(() => SIGUNGU_MAP[sido], [sido]); + + const onSubmit = () => { + if (!sido || !sigungu) return alert("시도/시군구를 선택해 주세요."); + if (!company) return alert("회사명을 입력해 주세요."); + if (!bizNo) return alert("사업자등록번호를 입력해 주세요."); + if (!noWorkerNo && !workerNo) + return alert("종사자등록번호를 입력하거나 '해당없음'을 선택해 주세요."); + if (!addr1) return alert("사업자주소를 입력해 주세요."); + if (!tel) return alert("전화번호를 입력해 주세요."); + if (!pw) return alert("비밀번호를 입력해 주세요."); + if (pw !== pw2) return alert("비밀번호가 일치하지 않습니다."); + + alert("수요처 등록(샘플) 완료!"); + }; + + return ( +
+ + + {/* register/page.tsx와 동일한 테이블 룩앤필 */} +
+ + + value={sido} + onChange={(v) => { + setSido(v); + setSigungu(""); // 시도 변경 시 초기화 + }} + options={SIDO} + /> + + + + + + + + + + + +
+ +
+
+ + + + +
+ +
+
+ + + + +
+
+ +
+ + +
+
+ + + + +
+
+
+ +
+ +
+ + + +
+
+ + + + +
+ +
+
+ + + + +
+ +
+
+ + + + +
+ +
+
+
+ + {/* register/page.tsx와 동일하게 하단 중앙 버튼 */} +
+ +
+
+ ); +} diff --git a/apps/dm/app/(landing)/reuse/apply/register/page.tsx b/apps/dm/app/(landing)/reuse/apply/register/page.tsx new file mode 100644 index 000000000..07a8bf244 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/apply/register/page.tsx @@ -0,0 +1,476 @@ +// apps/dm/app/(landing)/reuse/apply/register/page.tsx +"use client"; + +import { useMemo, useState, useRef } from "react"; +import SubPageHeader from "../../_components/SubPageHeader"; +import WaterQualityRefModal from "../modal/WaterQualityRefModal"; + +type PHRange = { min: string; max: string }; + +export default function DemandRegisterPage() { + const today = useMemo(() => { + const d = new Date(); + const yyyy = d.getFullYear(); + const mm = String(d.getMonth() + 1).padStart(2, "0"); + const dd = String(d.getDate()).padStart(2, "0"); + return `${yyyy}-${mm}-${dd}`; + }, []); + + const [openRef, setOpenRef] = useState(false); + + // 기본정보 + const [reqDate, setReqDate] = useState(today); + const [reqQty, setReqQty] = useState(""); + const [usePurpose, setUsePurpose] = useState(""); + const [hopePrice, setHopePrice] = useState(""); + + // 요구수질 + const [coliform, setColiform] = useState(""); + const [noDetect, setNoDetect] = useState(false); + + const [tn, setTn] = useState(""); + const [residualCl, setResidualCl] = useState(""); + const [tp, setTp] = useState(""); + const [turbidity, setTurbidity] = useState(""); + const [ph, setPh] = useState({ min: "", max: "" }); + const [bod, setBod] = useState(""); + const [chloride, setChloride] = useState(""); + const [odor, setOdor] = useState("불쾌하지 않을 것"); + const [ec, setEc] = useState(""); + const [color, setColor] = useState(""); + const [remark, setRemark] = useState(""); + + // 공급처 후보지 선택(필수아님) + const [cand1, setCand1] = useState(""); + const [cand2, setCand2] = useState(""); + const [cand3, setCand3] = useState(""); + + return ( + <> + +
+ + {/* 서브 타이틀 + 브레드크럼 */} + + + {/* 컨텐츠 영역 */} +
+ + {/* 기본정보 테이블 */} +
+ + + + + + + + + + + + + + + + + + + + + +
+ + {/* 요구수질 섹션 타이틀 바 */} +
+
+ 요구수질 + + {/* 수질기준참고 모달 */} + setOpenRef(false)} + imageSrc="/images/landing/water_quality_ref_1.png" + /> +
+
+ + {/* 요구수질 테이블 */} +
+ {/* 1행 */} + + + +
+ } + rightLabel="총질소(T-N)(mg/L)" + rightControl={ + + } + /> + + + {/* 2행 */} + } + rightLabel="총인(T-P)(mg/L)" + rightControl={ + + } + /> + + + {/* 3행 */} + + } + rightLabel="수소이온농도(pH)" + rightControl={ +
+ setPh((p) => ({ ...p, min: v }))} + className="w-32" + /> + ~ + setPh((p) => ({ ...p, max: v }))} + className="w-32" + /> +
+ } + /> + + + {/* 4행 */} + + 생물화학적산소요구량 +
+ (BOD)(mg/L) + + } + leftRequired + leftControl={} + rightLabel="염화물(mgCL/L)" + rightControl={} + /> + + + {/* 5행 */} + setOdor(e.target.value)} + className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500" + > + + + + + } + rightLabel="전기전도도(µs/cm)" + rightControl={} + /> + + + {/* 6행 */} + } + rightLabel="비고" + rightControl={ +