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

Reviewed-on: #44

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?
 }
 

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)
 }

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>

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>

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>