feat: 지붕재적합성 상세팝업 마크업 적용 및 팝업 on/off 연결

feat: Add representative and store ID fields to SD_SURVEY_SALES_BASIC_INFO model in Prisma schema
Merge pull request 'feature/suitable' (#44 ) from feature/suitable into dev
2025-05-23 13:31:42 +09:00 · 2025-05-23 11:22:02 +09:00 · 2025-05-23 10:50:07 +09:00 · 2025-05-23 10:06:45 +09:00
5 changed files with 298 additions and 54 deletions
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@ -62,6 +62,8 @@ model SD_SURVEY_SALES_BASIC_INFO {
  SUBMISSION_TARGET_ID String?                      @db.VarChar(200)
  REG_DT               DateTime                     @default(now())
  UPT_DT               DateTime                     @updatedAt
+  REPRESENTATIVE_ID    String?                      @db.VarChar(100)
+  STORE_ID             String?                      @db.VarChar(100)
  DETAIL_INFO          SD_SURVEY_SALES_DETAIL_INFO?
 }

--- a/src/app/api/auth/route.ts
+++ b/src/app/api/auth/route.ts
@ -15,7 +15,9 @@ export async function POST(request: Request) {
  })
  console.log('🚀 ~ result ~ result:', result.data)

-  if (result.data.result.code === 200) {
+  let finalResult = {}
+
+  if (result.data.result.resultCode === 'S') {
    tracking({
      url: `/api/auth/login`,
      data: JSON.stringify({
@ -72,7 +74,6 @@ export async function POST(request: Request) {
    console.log('end session edit!')

    await session.save()
-  }

    const resultForSession = {
      LANG_CD: result.data.data.langCd,
@ -119,5 +120,18 @@ export async function POST(request: Request) {
      resultForSession.ROLE = 'User'
    }

-  return NextResponse.json({ code: 200, message: 'Login is Succecss!!', result: resultForSession })
+    finalResult = {
+      code: 200,
+      message: 'Login is Succecss!!',
+      result: resultForSession,
+    }
+  } else {
+    finalResult = {
+      code: 400,
+      message: 'Login is Failed!!',
+      result: {},
+    }
+  }
+
+  return NextResponse.json(finalResult)
 }
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@ -39,6 +39,26 @@ export default function Login() {
    return emailRegex.test(email)
  }

+  const handleLogin = () => {
+    if (validateLogin()) {
+      setIsLogin(true)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleLogin()
+    }
+  }
+
+  const validateLogin = () => {
+    if (account.loginId === '' || account.pwd === '') {
+      alert('Please enter your ID and password.')
+      return false
+    }
+    return true
+  }
+
  interface LoginData {
    code: number
    message: string | null
@ -85,6 +105,9 @@ export default function Login() {
        ...loginData?.result,
      })
      router.push('/')
+    } else if (loginData?.code === 400) {
+      alert(loginData?.message)
+      setAccount({ loginId: '', pwd: '' })
    }
  }, [loginData])

@ -106,6 +129,7 @@ export default function Login() {
              className="login-frame"
              placeholder="Input Frame ID"
              value={account.loginId}
+              onKeyDown={(e) => handleKeyDown(e)}
              onChange={(e) => setAccount({ loginId: e.target.value })}
            />
            <button className="login-icon" onClick={() => setAccount({ loginId: '' })}>
@ -120,6 +144,7 @@ export default function Login() {
              className="login-frame"
              placeholder="Input Frame PW"
              value={account.pwd}
+              onKeyDown={(e) => handleKeyDown(e)}
              onChange={(e) => setAccount({ pwd: e.target.value })}
            />
            <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
@ -141,7 +166,7 @@ export default function Login() {
          </div>
        </div>
        <div className="login-btn-wrap">
-          <button className="btn-frame icon login" onClick={() => setIsLogin(true)}>
+          <button className="btn-frame icon login" onClick={handleLogin}>
            お問い合わせ <i className="btn-arr"></i>
          </button>
        </div>
--- a/src/components/popup/SuitableDetailPopup.tsx
+++ b/src/components/popup/SuitableDetailPopup.tsx
@ -1,4 +1,11 @@
+'use client'
+
+import Image from 'next/image'
+import { usePopupController } from '@/store/popupController'
+
 export default function SuitableDetailPopup() {
+  const popupController = usePopupController()
+
  return (
    <div className="modal-popup">
      <div className="modal-dialog">
@ -7,14 +14,15 @@ export default function SuitableDetailPopup() {
            <div className="modal-header-inner">
              <div className="modal-name-wrap">
                <div className="modal-img">
-                  <img src="/assets/images/layout/modal_header_icon03.svg" alt="" />
+                  <Image src="/assets/images/layout/modal_header_icon03.svg" width={22} height={22} alt="" />
                </div>
                <div className="modal-name">屋根材適合性詳細 </div>
              </div>
-              <button className="modal-close"></button>
+              <button className="modal-close" onClick={() => popupController.setSuitableDetailPopup(false)}></button>
            </div>
          </div>
          <div className="modal-body">
+            <div className="compliance-check-pop-wrap">
              <div className={`compliance-check-bx act`}>
                <div className="check-name-wrap">
                  <div className="check-name">アースティ４０</div>
@ -22,7 +30,198 @@ export default function SuitableDetailPopup() {
                    <button className="bx-btn"></button>
                  </div>
                </div>
-              <div className="compliance-check-pop-contents"></div>
+                <div className="compliance-check-pop-contents">
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                    <div className="check-pop-data-txt">㈱ダイトー</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根材</div>
+                    <div className="check-pop-data-txt">瓦</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">金具タイプ</div>
+                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
+                  </div>
+                  <div className="check-pop-data-table-wrap">
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ｄで設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">
+                          桟木なしの場合は支持金具平ー１で設置可能。その場合水返しが高い為、レベルプレート使用。桟木ありの場合は支持金具平ー２で設置可能
+                        </div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">設置不可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">お問い合わせください</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className={`compliance-check-bx`}>
+                <div className="check-name-wrap">
+                  <div className="check-name">アースティ４０</div>
+                  <div className="check-name-btn">
+                    <button className="bx-btn"></button>
+                  </div>
+                </div>
+                <div className="compliance-check-pop-contents">
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                    <div className="check-pop-data-txt">㈱ダイトー</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根材</div>
+                    <div className="check-pop-data-txt">瓦</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">金具タイプ</div>
+                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
+                  </div>
+                  <div className="check-pop-data-table-wrap">
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ｄで設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">設置不可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">お問い合わせください</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="btn-flex-wrap com">
+              <div className="btn-bx">
+                <button className="btn-frame n-blue icon">
+                  閉じる<i className="btn-arr"></i>
+                </button>
+              </div>
+              <div className="btn-bx">
+                <button className="btn-frame red icon">
+                  ウンロード<i className="btn-arr"></i>
+                </button>
+              </div>
+              <div className="btn-bx">
+                <button className="btn-frame n-blue icon">
+                  1：1お問い合わせ<i className="btn-arr"></i>
+                </button>
+              </div>
            </div>
          </div>
        </div>
--- a/src/components/suitable/SuitableButton.tsx
+++ b/src/components/suitable/SuitableButton.tsx
@ -1,6 +1,10 @@
 'use client'

+import { usePopupController } from '@/store/popupController'
+
 export default function SuitableButton() {
+  const popupController = usePopupController()
+
  return (
    <div className="float-btn-wrap">
      <div className="btn-flex-wrap com">
@ -10,7 +14,7 @@ export default function SuitableButton() {
          </button>
        </div>
        <div className="btn-bx">
-          <button className="btn-frame red icon">
+          <button className="btn-frame red icon" onClick={() => popupController.setSuitableDetailPopup(true)}>
            詳細を見る<i className="btn-arr"></i>
          </button>
        </div>
Author	SHA1	Message	Date
Daseul Kim	d718012f6f	feat: 지붕재적합성 상세팝업 마크업 적용 및 팝업 on/off 연결	2025-05-23 13:31:42 +09:00
yoosangwook	e833e25048	feat: Add representative and store ID fields to SD_SURVEY_SALES_BASIC_INFO model in Prisma schema	2025-05-23 11:22:02 +09:00
swyoo	916946956a	Merge pull request 'feature/suitable' (#44 ) from feature/suitable into dev Reviewed-on: #44	2025-05-23 10:50:07 +09:00
yoosangwook	29e7675ada	refactor: Enhance authentication API and login component functionality - Updated authentication API to improve response handling and session management. - Refactored login component to include validation and keyboard event handling for login submission. - Improved user feedback by displaying alerts for login success and failure messages.	2025-05-23 10:06:45 +09:00