diff --git a/README.md b/README.md index 83f05cc..278511e 100644 --- a/README.md +++ b/README.md @@ -37,3 +37,7 @@ const popupController = usePopupController() onClick={() => popupController.setMemberInformationPopup(false)} onClick={() => popupController.setZipCodePopup(false)} ``` + +# useEffect 정리 + +- client url pathname 변경시 -> @/components/ui/Header.tsx diff --git a/src/app/inquiry/[id]/page.tsx b/src/app/inquiry/[id]/page.tsx index 60271a3..e99d85e 100644 --- a/src/app/inquiry/[id]/page.tsx +++ b/src/app/inquiry/[id]/page.tsx @@ -1,9 +1,5 @@ -import InquiryDetail from '@/components/inquiry/InquiryDetail' +import Detail from '@/components/inquiry/Detail' -export default function InquiryDetails() { - return ( -
- -
- ) +export default function page() { + return } diff --git a/src/app/inquiry/layout.tsx b/src/app/inquiry/layout.tsx new file mode 100644 index 0000000..755fe06 --- /dev/null +++ b/src/app/inquiry/layout.tsx @@ -0,0 +1,3 @@ +export default function layout({ children }: { children: React.ReactNode }) { + return
{children}
+} diff --git a/src/app/inquiry/list/page.tsx b/src/app/inquiry/list/page.tsx new file mode 100644 index 0000000..93fb334 --- /dev/null +++ b/src/app/inquiry/list/page.tsx @@ -0,0 +1,13 @@ +import ListForm from '@/components/inquiry/ListForm' +import ListTable from '@/components/inquiry/ListTable' + +export default function page() { + return ( + <> +
+ + +
+ + ) +} diff --git a/src/app/inquiry/page.tsx b/src/app/inquiry/page.tsx deleted file mode 100644 index 0393249..0000000 --- a/src/app/inquiry/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import InquiryList from '@/components/inquiry/InquiryList' - -export default function Inquiry() { - return ( -
- -
- ) -} diff --git a/src/app/inquiry/regist/page.tsx b/src/app/inquiry/regist/page.tsx new file mode 100644 index 0000000..f0970cc --- /dev/null +++ b/src/app/inquiry/regist/page.tsx @@ -0,0 +1,9 @@ +import RegistForm from '@/components/inquiry/RegistForm' + +export default function page() { + return ( + <> + + + ) +} diff --git a/src/components/inquiry/Answer.tsx b/src/components/inquiry/Answer.tsx new file mode 100644 index 0000000..c1a5ec9 --- /dev/null +++ b/src/components/inquiry/Answer.tsx @@ -0,0 +1,38 @@ +'use client' + +export default function Answer() { + return ( + <> +
+
+
Hanwha Japan 回答
+
+ 佐藤一貴/ 2025.04.02 16:54:00 +
+
+
+
回答
+
+ 一次側接続は, 自動切替開閉器と住宅分電盤昼間遮断器との間に蓄電システム遮断器を配線する方法です. 二次側接続は, + 住宅分電盤週間ブレーカの二次側に蓄電システムブレーカを接続する +
+
+
+
ファイル添付
+
    +
  • + +
    • +
  • + +
    • +
+
+
+ + ) +} diff --git a/src/components/inquiry/Detail.tsx b/src/components/inquiry/Detail.tsx new file mode 100644 index 0000000..d41d5a0 --- /dev/null +++ b/src/components/inquiry/Detail.tsx @@ -0,0 +1,87 @@ +'use client' + +import { useState } from 'react' +import Answer from './Answer' + +export default function Detail() { + //todo: 답변 완료 표시를 위해 임시로 추가 해 놓은 state + // 추후에 api 작업 완료후 삭제 + // 답변 완료 클래스 & 하단 답변내용 출력도 + const [inquiry, setInquiry] = useState(false) + + return ( + <> +
+
+
+
回答完了
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
登録日2025.04.10
作者Hong gi
販売店interplug
施工店interplugs
E-mailHong@interplug.co.kr
+
+
+
屋根適合
+
屋根材適合性確認依頼
+
+ 入力した内容が表示されます. +
+ インストール可能であることを確認してください. +
+ 屋根の写真を添付しました. +
+
+
+
ファイル添付
+
    +
  • + +
    • +
  • + +
    • +
+
+
+ + {inquiry && } + +
+ +
+
+ + ) +} diff --git a/src/components/inquiry/ListForm.tsx b/src/components/inquiry/ListForm.tsx new file mode 100644 index 0000000..0b6ff3f --- /dev/null +++ b/src/components/inquiry/ListForm.tsx @@ -0,0 +1,20 @@ +'use client' +export default function ListForm() { + return ( + <> +
+
+ +
+
+
+ + +
+
+
+ + ) +} diff --git a/src/components/inquiry/ListTable.tsx b/src/components/inquiry/ListTable.tsx new file mode 100644 index 0000000..4735ef1 --- /dev/null +++ b/src/components/inquiry/ListTable.tsx @@ -0,0 +1,70 @@ +'use client' +export default function ListTable() { + return ( + <> +
+
+
+
+ + +
+
+
+ +
+
+
+
+ 合計 98個 +
+
    +
  • +
    +
    屋根
    +
    屋根材適合性確認依頼
    +
    2025.04.02
    +
    回答待ち
    +
    +
    • +
  • +
    +
    設計
    +
    設置可能ですか？
    +
    2025.04.02
    +
    回答完了
    +
    +
    • +
  • +
    +
    屋根
    +
    屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼
    +
    2025.04.02
    +
    回答待ち
    +
    +
    • +
  • +
    +
    設計
    +
    設置可能ですか？
    +
    2025.04.02
    +
    回答完了
    +
    +
    • +
+
+ +
+
+
+ + ) +} diff --git a/src/components/inquiry/RegistForm.tsx b/src/components/inquiry/RegistForm.tsx new file mode 100644 index 0000000..ea27aa8 --- /dev/null +++ b/src/components/inquiry/RegistForm.tsx @@ -0,0 +1,79 @@ +'use client' +export default function RegistForm() { + return ( + <> +
+
+
+
+ お問い合わせタイプ * +
+
+ +
+
+
+
+ お問い合わせタイトル * +
+
+ +
+
+
+
+ お問い合わせタイプ * +
+
+ +
+
+
+
+
+ + +
+
+
+ 添付ファイル2個 +
+
    +
  • +
    +
    添付ファイル名.jpg
    + +
    +
    • +
  • +
    +
    添付ファイル名.jpg
    + +
    +
    • +
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/survey-sale/common/NavTab.tsx b/src/components/survey-sale/common/NavTab.tsx index 414d899..042da5d 100644 --- a/src/components/survey-sale/common/NavTab.tsx +++ b/src/components/survey-sale/common/NavTab.tsx @@ -1,8 +1,11 @@ 'use client' +import { useSurveySaleTabState } from '@/store/surveySaleTabState' import { usePathname, useRouter } from 'next/navigation' +import { useEffect } from 'react' export default function NavTab() { + const router = useRouter() const pathname = usePathname() const router = useRouter() @@ -10,15 +13,31 @@ export default function NavTab() { return null } + const { basicInfoSelected, roofInfoSelected, reset } = useSurveySaleTabState() + + useEffect(() => { + return () => { + reset() + } + }, []) + + const handleBasicInfoClick = () => { + router.push('/survey-sale/basic-info') + } + + const handleRoofInfoClick = () => { + router.push('/survey-sale/roof-info') + } + return ( <>
- -
diff --git a/src/components/survey-sale/detail/BasicForm.tsx b/src/components/survey-sale/detail/BasicForm.tsx index 2f74673..8eba9e3 100644 --- a/src/components/survey-sale/detail/BasicForm.tsx +++ b/src/components/survey-sale/detail/BasicForm.tsx @@ -4,6 +4,7 @@ import { useServey } from '@/hooks/useSurvey' import { SurveyBasicRequest } from '@/types/Survey' import { useRouter, useSearchParams } from 'next/navigation' import { useState, useEffect } from 'react' +import { useSurveySaleTabState } from '@/store/surveySaleTabState' const defaultBasicInfoForm: SurveyBasicRequest = { representative: '', @@ -53,6 +54,12 @@ export default function BasicForm() { return
Loading...
} + const { setBasicInfoSelected } = useSurveySaleTabState() + + useEffect(() => { + setBasicInfoSelected() + }, []) + return ( <>
diff --git a/src/components/survey-sale/detail/RoofInfoForm.tsx b/src/components/survey-sale/detail/RoofInfoForm.tsx index eaa49fc..6d425cc 100644 --- a/src/components/survey-sale/detail/RoofInfoForm.tsx +++ b/src/components/survey-sale/detail/RoofInfoForm.tsx @@ -1,5 +1,8 @@ 'use client' +import { useEffect } from 'react' +import { useSurveySaleTabState } from '@/store/surveySaleTabState' + import { useServey } from '@/hooks/useSurvey' import { SurveyDetailRequest } from '@/types/Survey' import { useRouter, useSearchParams } from 'next/navigation' @@ -44,6 +47,12 @@ const defaultDetailInfoForm: SurveyDetailRequest = { } export default function RoofInfoForm() { + const { setRoofInfoSelected } = useSurveySaleTabState() + + useEffect(() => { + setRoofInfoSelected() + }, []) + const router = useRouter() const searchParams = useSearchParams() const id = searchParams.get('id') diff --git a/src/components/ui/Main.tsx b/src/components/ui/Main.tsx index 2b20646..a9eb336 100644 --- a/src/components/ui/Main.tsx +++ b/src/components/ui/Main.tsx @@ -1,10 +1,13 @@ 'use client' import { useHeaderStore } from '@/store/header' +import { useRouter } from 'next/navigation' import { useEffect } from 'react' export default function Main() { + const router = useRouter() const { setBackBtn } = useHeaderStore() + useEffect(() => { setBackBtn(false) }, []) @@ -27,7 +30,7 @@ export default function Main() {
- +
調査物件一覧
@@ -39,7 +42,7 @@ export default function Main() {
- +
調査物件登録
@@ -51,7 +54,7 @@ export default function Main() {
- +
1:1お問い合わせ リスト
@@ -63,7 +66,7 @@ export default function Main() {
- +
1:1問い合わせ登録
diff --git a/src/components/ui/common/Header.tsx b/src/components/ui/common/Header.tsx index 4a6056f..580545d 100644 --- a/src/components/ui/common/Header.tsx +++ b/src/components/ui/common/Header.tsx @@ -3,13 +3,14 @@ import { useEffect, useState } from 'react' import Link from 'next/link' -import { usePathname } from 'next/navigation' +import { usePathname, useRouter } from 'next/navigation' import { Swiper, SwiperSlide } from 'swiper/react' import type { HeaderProps } from '@/types/Header' import 'swiper/css' +import { useSideNavState } from '@/store/sideNavState' // type HeaderProps = { // name: string //header 이름 @@ -17,8 +18,9 @@ import 'swiper/css' // } export default function Header({ name }: HeaderProps) { + const router = useRouter() const pathname = usePathname() - const [headerAct, setHeaderAct] = useState(false) + const { sideNavIsOpen, setSideNavIsOpen, reset } = useSideNavState() const [isShowBackBtn, setIsShowBackBtn] = useState(false) if (pathname === '/login') { @@ -29,6 +31,8 @@ export default function Header({ name }: HeaderProps) { if (pathname !== '/') { setIsShowBackBtn(true) } + //사이드바 초기화 + reset() }, [pathname]) return ( @@ -38,17 +42,17 @@ export default function Header({ name }: HeaderProps) {
{isShowBackBtn && (
- +
)}

- {name} + {name}

- +
-
+
@@ -61,7 +65,7 @@ export default function Header({ name }: HeaderProps) {
- +
@@ -89,16 +93,16 @@ export default function Header({ name }: HeaderProps) {
diff --git a/src/store/sideNavState.ts b/src/store/sideNavState.ts new file mode 100644 index 0000000..b283aeb --- /dev/null +++ b/src/store/sideNavState.ts @@ -0,0 +1,21 @@ +import { create } from 'zustand' + +type SideNavState = { + sideNavIsOpen: boolean + setSideNavIsOpen: (value: boolean) => void + reset: () => void +} + +type InitialState = { + sideNavIsOpen: boolean +} + +const initialState: InitialState = { + sideNavIsOpen: false, +} + +export const useSideNavState = create((set) => ({ + ...initialState, + setSideNavIsOpen: (value: boolean) => set((state) => ({ ...state, sideNavIsOpen: value })), + reset: () => set(initialState), +})) diff --git a/src/store/surveySaleTabState.ts b/src/store/surveySaleTabState.ts new file mode 100644 index 0000000..f0ab766 --- /dev/null +++ b/src/store/surveySaleTabState.ts @@ -0,0 +1,26 @@ +import { create } from 'zustand' + +type SurveySaleTabState = { + basicInfoSelected: boolean + roofInfoSelected: boolean + setBasicInfoSelected: () => void + setRoofInfoSelected: () => void + reset: () => void +} + +type InitialState = { + basicInfoSelected: boolean + roofInfoSelected: boolean +} + +const initialState: InitialState = { + basicInfoSelected: true, + roofInfoSelected: false, +} + +export const useSurveySaleTabState = create((set) => ({ + ...initialState, + setBasicInfoSelected: () => set((state) => ({ ...state, basicInfoSelected: true, roofInfoSelected: false })), + setRoofInfoSelected: () => set((state) => ({ ...state, basicInfoSelected: false, roofInfoSelected: true })), + reset: () => set(initialState), +}))