Refactor/modal

src/components/screens/FaqScreen.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, TypeOutline } from 'lucide-react';
 
 // FAQ 데이터
 const faqData = {
@@ -12,70 +12,120 @@ const faqData = {
         },
         {
             id: 2,
-            title: '비밀번호를 잊어버렸어요',
+            title: '로그인이 안돼요.',
             content:
-                "로그인 페이지에서 '비밀번호 찾기'를 클릭하시면 가입하신 이메일로 재설정 링크를 보내드립니다.",
+                "이메일 또는 비밀번호를 다시 한 번 확인해주세요. SNS 계정으로 가입한 경우, 동일한 로그인 방식을 사용해야 합니다.",
         },
         {
             id: 3,
-            title: '로그인이 안돼요',
+            title: '회원 탈퇴는 어떻게 하나요?',
             content:
-                '이메일과 비밀번호를 정확히 입력했는지 확인해주세요. 대소문자를 구분합니다.',
+                '마이페이지 → ⚙️ -> 회원정보수정 메뉴에서 “회원 탈퇴”를 선택하면 즉시 탈퇴할 수 있습니다.',
+        },
+        {
+            id: 8,
+            title: '소셜 로그인은 어떤 계정을 지원하나요?',
+            content:
+                '현재 카카오 로그인을 지원하고 있으며, 추후 네이버 및 구글 계정 연동도 추가될 예정입니다.',
+        },
+        {
+            id: 9,
+            title: '회원정보는 어떻게 수정할 수 있나요?',
+            content:
+                '마이페이지 → ⚙️ -> 회원정보수정 메뉴에서 닉네임, 프로필 이미지 등 기본 정보를 수정할 수 있습니다.',
         },
     ],
+
     포인트: [
         {
             id: 4,
             title: '포인트는 어떻게 적립되나요?',
             content:
-                '영수증이나 이용내역 사진을 찍어서 올리면 자동 인식 후 포인트가 적립됩니다',
+                '영수증이나 이용내역 사진을 업로드하면 자동 인식 후 포인트가 적립됩니다. 일부 챌린지나 이벤트 참여 시에도 추가 적립이 가능합니다.',
         },
         {
             id: 5,
             title: '포인트 유효기간은 얼마나 되나요?',
             content:
-                '적립일로부터 3년간 유효합니다. 유효기간이 지나면 자동으로 소멸됩니다.',
+                '적립일로부터 평생 유효합니다. 단, 장기 미이용 시 휴면 정책에 따라 안내 후 소멸될 수 있습니다.',
         },
         {
             id: 6,
-            title: '포인트를 어떻게 이용할 수 있나요? ',
+            title: '포인트를 어떻게 이용할 수 있나요?',
             content:
-                '기프티콘으로 교환하거나, 1만 포인트 이상이면 본인 계좌로 현금 출금이 가능합니다.',
+                '기프티콘 교환, 캠페인 기부, 1만 포인트 이상일 경우 현금 출금이 가능합니다. 자세한 내용은 포인트 이용 안내를 참고하세요.',
+        },
+        {
+            id: 10,
+            title: '포인트가 적립되지 않았어요.',
+            content:
+                '이미 인증된 영수증이거나 인식이 실패한 경우일 수 있습니다. “1:1 문의하기” 를 통해 사진과 상황을 알려주시면 확인 후 처리해드리겠습니다.',
+        },
+        {
+            id: 11,
+            title: '포인트 출금은 어떻게 하나요?',
+            content:
+                '1만 포인트 이상 보유 시 마이페이지 → 포인트 → “출금 신청” 버튼을 눌러 본인 명의 계좌로 송금받을 수 있습니다.',
+        },
+        {
+            id: 12,
+            title: '챌린지 참여 시 포인트가 추가되나요?',
+            content:
+                '챌린지에 따라 획득 포인트 정보를 확인할 수 있습니다.',
         },
     ],
+
     고객지원: [
         {
             id: 7,
             title: '고객센터 운영시간은?',
             content:
                 '평일 오전 9시부터 오후 6시까지 운영됩니다. 주말 및 공휴일은 휴무입니다.',
         },
+        {
+            id: 13,
+            title: '1:1 문의는 어떻게 하나요?',
+            content:
+                'FAQ 하단의 “1:1 문의하기” 버튼을 클릭하면 문의 페이지로 이동합니다. 접수된 문의는 평균 24시간 이내 답변됩니다.',
+        },
+        {
+            id: 14,
+            title: '서비스 오류를 발견했어요.',
+            content:
+                '발견한 오류나 개선사항은 [email protected] 으로 보내주세요. 빠르게 검토 후 반영하겠습니다.',
+        },
+        {
+            id: 15,
+            title: '제휴나 협업 문의는 어디로 하면 되나요?',
+            content:
+                '환경 기업, 단체와의 제휴를 환영합니다. [email protected] 으로 메일을 보내주시면 담당자가 확인 후 연락드립니다.',
+        },
+
     ],
 };
 
+
 // 개별 FAQ 아이템 컴포넌트
 function FaqItem({ faq, isOpen, onToggle }) {
     return (
         <div className='border-b border-gray-200'>
-            <button
-                onClick={onToggle}
-                className='w-full flex items-center justify-between p-5 text-left hover:bg-gray-50 transition'
-            >
-                <span className='font-medium text-gray-800'>{faq.title}</span>
-                {isOpen ? (
-                    <ChevronUp
-                        className='text-gray-500 flex-shrink-0'
-                        size={20}
-                    />
-                ) : (
-                    <ChevronDown
-                        className='text-gray-500 flex-shrink-0'
-                        size={20}
-                    />
-                )}
-            </button>
+           <button
+    onClick={onToggle}
+    className={`w-full flex items-center justify-between p-5 text-left transition 
+        ${isOpen ? 'bg-white-50' : 'hover:bg-white-50'}
+        focus:outline-none focus:ring-0 focus-visible:outline-none`}
+>
+    <span className='font-medium text-gray-800'>{faq.title}</span>
+    {isOpen ? (
+        <ChevronUp className='text-gray-500 flex-shrink-0' size={20} />
+    ) : (
+        <ChevronDown className='text-gray-500 flex-shrink-0' size={20} />
+    )}
+</button>
+
+
             {isOpen && (
-                <div className='px-5 pb-5 text-gray-600 leading-relaxed'>
+                <div className='px-5 pt-7 pb-7 text-gray-600 leading-relaxed'>
                     {faq.content}
                 </div>
             )}
@@ -108,7 +158,7 @@ export default function FaqScreen() {
                 </div>
 
                 {/* 탭 메뉴 */}
-                <div className='flex gap-2 mb-6 bg-white rounded-lg p-2 shadow-sm'>
+                <div className='flex gap-2 mb-6 bg-white rounded-lg p-2 shadow-sm '>
                     {tabs.map((tab) => (
                         <button
                             key={tab}
@@ -122,7 +172,7 @@ export default function FaqScreen() {
                                     : 'bg-white text-gray-600 hover:bg-gray-100'
                             }`}
                         >
-                            {tab}
+                            {tab} 
                         </button>
                     ))}
                 </div>

src/components/screens/LoginSignupScreen.jsx

@@ -44,6 +44,7 @@ const styles = `
   .hint{ font-size:.85rem; color:#6b7280; margin-top:6px; }
   .error{ font-size:.85rem; color:#e11d48; margin-top:6px; }
   .btn{ width:100%; padding:12px 14px; border-radius:12px; border:0; background:var(--brand); color:#fff; font-weight:800; cursor:pointer; margin-top:6px;}
+  button:focus{ outline:none; box-shadow:none; }
   .btn:disabled{ opacity:.5; cursor:not-allowed; }
   .kakao{ width:100%; margin-top:12px; padding:12px 14px; border-radius:12px; border:0;
           background:#FEE500; color:#3C1E1E; font-weight:700; cursor:pointer; }
@@ -65,7 +66,6 @@ const styles = `
   }
 `;
 
-/* ✅ 모달 컴포넌트 */
 function Modal({ message, type = 'info', onClose }) {
   const handleClick = () => {
     if (type === 'success') {
@@ -161,27 +161,29 @@ export default function LoginSignupScreen() {
             <HomeScreen />
           )}
 
-          {!userInfo && (
-            <button
-              onClick={kakaoLogin}
-              style={{
-                width: '100%',
-                marginTop: '12px',
-                borderRadius: '12px',
-                overflow: 'hidden',
-                padding: 0,
-              }}
-            >
-              <img
-                src={kakaoBtn}
-                alt="카카오 로그인"
-                style={{ width: '100%', display: 'block' }}
-              />
-            </button>
-          )}
+
+{!userInfo && page === 'login' && (
+  <button
+    onClick={kakaoLogin}
+    style={{
+      width: '100%',
+      marginTop: '12px',
+      borderRadius: '12px',
+      overflow: 'hidden',
+      padding: 0,
+    }}
+  >
+    <img
+      src={kakaoBtn}
+      alt="카카오 로그인"
+      style={{ width: '100%', display: 'block' }}
+    />
+  </button>
+)}
+
         </div>
 
-        {/* ✅ 모달 표시 */}
+
         {modal && (
           <Modal
             message={modal.message}
@@ -324,13 +326,13 @@ function SignupForm({ setPage, setModal }) {
     try {
       await api.post('/member', { email, password, nickname });
       setModal({
-        message: '회원가입 완료! 로그인해주세요 🌿',
+        message: '회원가입 성공 로그인해주세요',
         type: 'success',
       });
       setTimeout(() => setPage('login'), 1000);
     } catch {
       setModal({
-        message: '회원가입 실패. 다시 시도해주세요 🍂',
+        message: '다시 시도해주세요',
         type: 'error',
       });
     }