🗑️ Chore : 상세정보 모달 구현 및 mbti선택 컴포넌트 수정 (#30)

src/components/MbtiSelector/MbtiSelector.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import './MbtiSelector.css';
 
 type MbtiType = 'EI' | 'SN' | 'TF' | 'JP';
@@ -15,7 +15,11 @@ interface MbtiRowProps {
   onChange: () => void;
 }
 
-const MbtiSelector = () => {
+interface MbtiSelectorProps {
+  onMbtiChange: (mbti: string) => void;
+}
+
+const MbtiSelector: React.FC<MbtiSelectorProps> = ({ onMbtiChange }) => {
   const [mbti, setMbti] = useState<MbtiState>({
     EI: false,
     SN: false,
@@ -27,49 +31,52 @@ const MbtiSelector = () => {
     setMbti((prev) => ({ ...prev, [key]: !prev[key] }));
   };
 
-  const getMbtiResult = (): string => {
+  const getMbtiResult = useCallback((): string => {
     return (
       (mbti.EI ? 'I' : 'E') +
       (mbti.SN ? 'N' : 'S') +
       (mbti.TF ? 'F' : 'T') +
       (mbti.JP ? 'P' : 'J')
     );
-  };
+  }, [mbti]);
+
+  useEffect(() => {
+    const result = getMbtiResult();
+    onMbtiChange(result);
+  }, [getMbtiResult, onMbtiChange]);
 
   return (
     <div className="mbti-container">
-
       <div className="mbti-flex-container">
-        <MbtiRow 
+        <MbtiRow
           label="에너지의 방향"
           leftOption="E (외향형)"
           rightOption="I (내향형)"
           isRight={mbti.EI}
           onChange={() => updateMbti('EI')}
         />
-        <MbtiRow 
+        <MbtiRow
           label="인식 방식"
           leftOption="S (감각형)"
           rightOption="N (직관형)"
           isRight={mbti.SN}
           onChange={() => updateMbti('SN')}
         />
-        <MbtiRow 
+        <MbtiRow
           label="결정 방식"
           leftOption="T (사고형)"
           rightOption="F (감정형)"
           isRight={mbti.TF}
           onChange={() => updateMbti('TF')}
         />
-        <MbtiRow 
+        <MbtiRow
           label="삶의 패턴"
           leftOption="J (판단형)"
           rightOption="P (인식형)"
           isRight={mbti.JP}
           onChange={() => updateMbti('JP')}
         />
       </div>
-
       <div className="mbti-result">
         <p>선택된 MBTI <span className="mbti-result-text">{getMbtiResult()}</span></p>
       </div>

src/pages/JoinPage/JoinDetail/JoinDetail.css

@@ -0,0 +1,61 @@
+.join-detail {
+    padding: 20px;
+  }
+
+  .join-detail h2 {
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+
+  .join-detail h3 {
+    font-size: 1.0rem;
+    margin-bottom: 10px;
+    font-weight: 600;
+  }
+
+  .gender-selector, .birth-date-selector, .mbti-selector {
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #EEEEEE; 
+  }
+
+  .gender-options {
+    display: flex;
+    justify-content: left;
+    gap: 20px;
+  }
+
+  .gender-options label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .gender-options input[type="radio"] {
+    margin-left: 15px;
+  }
+
+  .birth-date-selector {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .birth-date-selector h3 {
+    align-self: flex-start;
+  }
+
+  .birth-date-selector input {
+    width: 400px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+    text-align: center;
+    align-self: center;
+  }
+
+  .mbti-selector {
+    width: 100%;
+    border-bottom: none; 
+  }

src/pages/JoinPage/JoinDetail/JoinDetail.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import BottomModal from '@components/BottomModal/BottomModal';
+import MbtiSelector from '@components/MbtiSelector/MbtiSelector';
+import './JoinDetail.css';
+
+const JoinDetail: React.FC = () => {
+  const [gender, setGender] = useState<'male' | 'female'>('male');
+  const [birthDate, setBirthDate] = useState('');
+  const [mbti, setMbti] = useState('');
+
+  const handleMbtiChange = (selectedMbti: string) => {
+    setMbti(selectedMbti);
+  };
+
+  const handleSubmit = () => {
+    console.log({ gender, birthDate, mbti });
+  };
+
+  return (
+    <BottomModal onClick={handleSubmit} buttonText="확인">
+      <div className="join-detail">
+        <div className="gender-selector">
+          <h3>성별</h3>
+          <div className="gender-options">
+            <label>
+                남
+              <input
+                type="radio"
+                name="gender"
+                value="male"
+                checked={gender === 'male'}
+                onChange={() => setGender('male')}
+              />
+
+            </label>
+            <label>
+                여
+              <input
+                type="radio"
+                name="gender"
+                value="female"
+                checked={gender === 'female'}
+                onChange={() => setGender('female')}
+              />
+
+            </label>
+          </div>
+        </div>
+        <div className="birth-date-selector">
+          <h3>생년월일</h3>
+          <input 
+            type="date" 
+            value={birthDate} 
+            onChange={(e) => setBirthDate(e.target.value)}
+            placeholder="YYYY.MM.DD"
+          />
+        </div>
+        <div className="mbti-selector">
+          <h3>MBTI</h3>
+          <MbtiSelector onMbtiChange={handleMbtiChange} />
+        </div>
+      </div>
+    </BottomModal>
+  );
+};
+
+export default JoinDetail;