From baf3700f671bbbec78427db475eb68bea7c06068 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 2 May 2025 15:58:49 +0900 Subject: [PATCH 1/5] refactor: implement state management for survey sale pages; add effect hooks to set selected tab state and enhance navigation functionality --- src/app/survey-sale/basic-info/page.tsx | 10 +++++++ src/app/survey-sale/roof-info/page.tsx | 10 +++++++ src/components/survey-sale/common/NavTab.tsx | 29 ++++++++++++++++++-- src/components/ui/common/Header.tsx | 5 ++-- src/store/surveySaleTabState.ts | 26 ++++++++++++++++++ 5 files changed, 75 insertions(+), 5 deletions(-) create mode 100644 src/store/surveySaleTabState.ts diff --git a/src/app/survey-sale/basic-info/page.tsx b/src/app/survey-sale/basic-info/page.tsx index 20cbeb8..3df482f 100644 --- a/src/app/survey-sale/basic-info/page.tsx +++ b/src/app/survey-sale/basic-info/page.tsx @@ -1,6 +1,16 @@ +'use client' + +import { useEffect } from 'react' +import { useSurveySaleTabState } from '@/store/surveySaleTabState' import BasicForm from '@/components/survey-sale/detail/BasicForm' export default function page() { + const { setBasicInfoSelected } = useSurveySaleTabState() + + useEffect(() => { + setBasicInfoSelected() + }, []) + return ( <> diff --git a/src/app/survey-sale/roof-info/page.tsx b/src/app/survey-sale/roof-info/page.tsx index 2bdfea5..b0a1b98 100644 --- a/src/app/survey-sale/roof-info/page.tsx +++ b/src/app/survey-sale/roof-info/page.tsx @@ -1,6 +1,16 @@ +'use client' + +import { useEffect } from 'react' +import { useSurveySaleTabState } from '@/store/surveySaleTabState' import RoofInfoForm from '@/components/survey-sale/detail/RoofInfoForm' export default function page() { + const { setRoofInfoSelected } = useSurveySaleTabState() + + useEffect(() => { + setRoofInfoSelected() + }, []) + return ( <> diff --git a/src/components/survey-sale/common/NavTab.tsx b/src/components/survey-sale/common/NavTab.tsx index 7d763cc..8029afd 100644 --- a/src/components/survey-sale/common/NavTab.tsx +++ b/src/components/survey-sale/common/NavTab.tsx @@ -1,21 +1,44 @@ 'use client' -import { usePathname } from 'next/navigation' +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() if (pathname === '/survey-sale') { 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/ui/common/Header.tsx b/src/components/ui/common/Header.tsx index 4a6056f..5c44695 100644 --- a/src/components/ui/common/Header.tsx +++ b/src/components/ui/common/Header.tsx @@ -3,7 +3,7 @@ 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' @@ -17,6 +17,7 @@ import 'swiper/css' // } export default function Header({ name }: HeaderProps) { + const router = useRouter() const pathname = usePathname() const [headerAct, setHeaderAct] = useState(false) const [isShowBackBtn, setIsShowBackBtn] = useState(false) @@ -38,7 +39,7 @@ export default function Header({ name }: HeaderProps) {
{isShowBackBtn && (
- +
)}

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), +})) From ddd41009b7f180a28a5ab2f08b3f6b9a1ebfd416 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 2 May 2025 16:02:54 +0900 Subject: [PATCH 2/5] refactor: move state management and effect hooks for selected tab into respective form components for better encapsulation --- src/app/survey-sale/basic-info/page.tsx | 10 ---------- src/app/survey-sale/roof-info/page.tsx | 10 ---------- src/components/survey-sale/detail/BasicForm.tsx | 9 +++++++++ src/components/survey-sale/detail/RoofInfoForm.tsx | 9 +++++++++ 4 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/app/survey-sale/basic-info/page.tsx b/src/app/survey-sale/basic-info/page.tsx index 3df482f..20cbeb8 100644 --- a/src/app/survey-sale/basic-info/page.tsx +++ b/src/app/survey-sale/basic-info/page.tsx @@ -1,16 +1,6 @@ -'use client' - -import { useEffect } from 'react' -import { useSurveySaleTabState } from '@/store/surveySaleTabState' import BasicForm from '@/components/survey-sale/detail/BasicForm' export default function page() { - const { setBasicInfoSelected } = useSurveySaleTabState() - - useEffect(() => { - setBasicInfoSelected() - }, []) - return ( <> diff --git a/src/app/survey-sale/roof-info/page.tsx b/src/app/survey-sale/roof-info/page.tsx index b0a1b98..2bdfea5 100644 --- a/src/app/survey-sale/roof-info/page.tsx +++ b/src/app/survey-sale/roof-info/page.tsx @@ -1,16 +1,6 @@ -'use client' - -import { useEffect } from 'react' -import { useSurveySaleTabState } from '@/store/surveySaleTabState' import RoofInfoForm from '@/components/survey-sale/detail/RoofInfoForm' export default function page() { - const { setRoofInfoSelected } = useSurveySaleTabState() - - useEffect(() => { - setRoofInfoSelected() - }, []) - return ( <> diff --git a/src/components/survey-sale/detail/BasicForm.tsx b/src/components/survey-sale/detail/BasicForm.tsx index fce0e49..f293495 100644 --- a/src/components/survey-sale/detail/BasicForm.tsx +++ b/src/components/survey-sale/detail/BasicForm.tsx @@ -1,6 +1,15 @@ 'use client' +import { useEffect } from 'react' +import { useSurveySaleTabState } from '@/store/surveySaleTabState' + export default function BasicForm() { + 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 bbe6546..e8850ca 100644 --- a/src/components/survey-sale/detail/RoofInfoForm.tsx +++ b/src/components/survey-sale/detail/RoofInfoForm.tsx @@ -1,6 +1,15 @@ 'use client' +import { useEffect } from 'react' +import { useSurveySaleTabState } from '@/store/surveySaleTabState' + export default function RoofInfoForm() { + const { setRoofInfoSelected } = useSurveySaleTabState() + + useEffect(() => { + setRoofInfoSelected() + }, []) + return ( <>
From e0bdaa4ddfc87686c7aed702fabd131755bf3685 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 2 May 2025 16:35:27 +0900 Subject: [PATCH 3/5] refactor: remove inquiry page component and enhance navigation in Main and Header components with router integration --- src/app/inquiry/[id]/page.tsx | 5 ++ src/app/inquiry/layout.tsx | 3 + src/app/inquiry/list/page.tsx | 13 ++++ src/app/inquiry/page.tsx | 7 --- src/app/inquiry/regist/page.tsx | 9 +++ src/components/inquiry/Answer.tsx | 38 ++++++++++++ src/components/inquiry/Detail.tsx | 87 +++++++++++++++++++++++++++ src/components/inquiry/ListForm.tsx | 20 ++++++ src/components/inquiry/ListTable.tsx | 70 +++++++++++++++++++++ src/components/inquiry/RegistForm.tsx | 79 ++++++++++++++++++++++++ src/components/ui/Main.tsx | 11 ++-- src/components/ui/common/Header.tsx | 10 +-- 12 files changed, 336 insertions(+), 16 deletions(-) create mode 100644 src/app/inquiry/[id]/page.tsx create mode 100644 src/app/inquiry/layout.tsx create mode 100644 src/app/inquiry/list/page.tsx delete mode 100644 src/app/inquiry/page.tsx create mode 100644 src/app/inquiry/regist/page.tsx create mode 100644 src/components/inquiry/Answer.tsx create mode 100644 src/components/inquiry/Detail.tsx create mode 100644 src/components/inquiry/ListForm.tsx create mode 100644 src/components/inquiry/ListTable.tsx create mode 100644 src/components/inquiry/RegistForm.tsx diff --git a/src/app/inquiry/[id]/page.tsx b/src/app/inquiry/[id]/page.tsx new file mode 100644 index 0000000..e99d85e --- /dev/null +++ b/src/app/inquiry/[id]/page.tsx @@ -0,0 +1,5 @@ +import Detail from '@/components/inquiry/Detail' + +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 4e60c5a..0000000 --- a/src/app/inquiry/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function page() { - return ( - <> -

1:1 문의

- - ) -} 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/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 5c44695..fb2b9da 100644 --- a/src/components/ui/common/Header.tsx +++ b/src/components/ui/common/Header.tsx @@ -90,16 +90,16 @@ export default function Header({ name }: HeaderProps) {
From 7046b215c404b6b75fc43630e9957e62d016c2d5 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 2 May 2025 16:55:47 +0900 Subject: [PATCH 4/5] refactor: integrate side navigation state management into Header component for improved navigation control --- src/components/ui/common/Header.tsx | 13 ++++++++----- src/store/sideNavState.ts | 21 +++++++++++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 src/store/sideNavState.ts diff --git a/src/components/ui/common/Header.tsx b/src/components/ui/common/Header.tsx index fb2b9da..580545d 100644 --- a/src/components/ui/common/Header.tsx +++ b/src/components/ui/common/Header.tsx @@ -10,6 +10,7 @@ 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 이름 @@ -19,7 +20,7 @@ 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') { @@ -30,6 +31,8 @@ export default function Header({ name }: HeaderProps) { if (pathname !== '/') { setIsShowBackBtn(true) } + //사이드바 초기화 + reset() }, [pathname]) return ( @@ -43,13 +46,13 @@ export default function Header({ name }: HeaderProps) {
)}

- {name} + {name}

- +

-
+
@@ -62,7 +65,7 @@ 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), +})) From 4e90af97e7d1c5bf13ada70844613f5c038ae9d0 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 2 May 2025 16:58:07 +0900 Subject: [PATCH 5/5] docs: update README to include useEffect organization and client URL pathname changes in Header component --- README.md | 4 ++++ 1 file changed, 4 insertions(+) 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