[FEAT] 모달 컴포넌트 생성

alex-koko commented 7 months ago

💡 Feature Issue

모달 컴포넌트를 만들었습니다!

🌿 To-do

[x] 컴포넌트 만들기
[x] 모달 크기 short, long(방만들기,미션방가입), wide(신고하기) 로 구분 -> 각각 다른 내용 들어감
[x] 버튼에 들어갈 label도 넘겨줘야 함

ramrami-B commented 7 months ago

모달 크기는 모달 내부에 padding을 주면 자동으로 내용물에 따라 크기가 조정 되지 않을까요? 버튼은 컴포넌트를 활용하면 좋을 것 같습니다 :)

그리고 컴포넌트는 만들었는데 다른 체크 부분들 해결하고 나서 pr 올리시는 걸까요?

alex-koko commented 7 months ago

padding으로 크기를 달리하는 것 좋은 아이디어인 것 같습니다! 버튼은 컴포넌트를 import해서 구현하였습니다. 아직 체크부분은 해결 못했는데 내일까지 최대한 구현하겠습니다 :) 감사합니다!!

alex-koko commented 6 months ago

모달들 구현했던 것 코드 보관(임시)

LongJoinModal (방 가입하기)

{/* LongModal의 새로운 컴포넌트들을 이곳에 추가할 수 있습니다. */}
            <div className="long-modal-content">
                {/* 새로운 컴포넌트 */}
                <h2 className="text-xl my-4">미션 기간</h2>
                <div className="flex flex-col items-end mr-5 ">
                    <div className="flex flex-row my-2" >
                        <p className="text-lg">완료일</p>
                        &emsp;
                        <Calendar/>
                    </div>        
                    <label className="text-base my-2"><input type="checkbox"/> 미정</label>
                </div>

                <h2 className="text-xl my-4">미션 횟수</h2>
                <p className="text-sm" my-2>일주일에 몇 번 미션을 하실 건가요?</p>
                <div className="my-4">
                    <input type="radio" id="2" name="number" value="2" checked/><span className="text-base">2회이하</span>&ensp;
                    <input type="radio" id="3" name="number" value="3" checked/><span className="text-base">3회이상</span>&ensp;
                    <input type="radio" id="5" name="number" value="5" checked/><span className="text-base">5회이상</span>&ensp;
                    <input type="radio" id="7" name="number" value="7" checked/><span className="text-base">매일</span>
                </div>
                {/* 다른 컴포넌트나 요소들도 추가 가능합니다. */}
            </div>

LongMakeModal (방 만들기)

import React, { useState } from 'react';
import { Modal } from './Modal';
import { categories } from '../utils/utils.js';

const LongMakeModal = ({ title, contents, setModal, state, leftLabel, rightLabel }) => {
    const [majorCategory, setMajorCategory] = useState('');
    const [minorCategory, setMinorCategory] = useState('');

    const handleMajorCategoryChange = (event) => {
        setMajorCategory(event.target.value);
        setMinorCategory('');
    };

    const handleMinorCategoryChange = (event) => {
        setMinorCategory(event.target.value);
    };

    return (
        <Modal
            type="long"
            title={title}
            contents={contents}
            setModal={setModal}
            state={state}
            leftLabel={leftLabel}
            rightLabel={rightLabel}
        >
            <div className="long-modal2-content p-6 text-left">
                {/* 제목 */}
                <div className="mb-4">
                    <h2 className="text-xl font-bold mb-2">제목</h2>
                    <input
                        type="text"
                        className="w-full p-2 border rounded border-gray outline-none"
                        maxLength={25}
                        placeholder="제목을 입력하세요"
                    />
                </div>

                {/* 카테고리 */}
                <div className="mb-4">
                    <h2 className="text-xl font-bold mb-2">카테고리</h2>
                    <div className="flex">
                        {/* 대분류 선택 */}
                        <select
                            name="major-category"
                            id="major-category"
                            value={majorCategory}
                            onChange={handleMajorCategoryChange}
                            className="w-1/2 border rounded p-2 mr-2 border-gray outline-none"
                        >
                            <option value="" disabled>대분류</option>
                            {Object.keys(categories).map((category) => (
                                <option key={category} value={category}>
                                    {category}
                                </option>
                            ))}
                        </select>

                        {/* 소분류 선택 */}
                        <select
                            name="minor-category"
                            id="minor-category"
                            value={minorCategory}
                            onChange={handleMinorCategoryChange}
                            disabled={!majorCategory}
                            className="w-1/2 border rounded p-2 border-gray outline-none"
                        >
                            <option value="" disabled>소분류</option>
                            {majorCategory &&
                                categories[majorCategory].map((subCategory) => (
                                    <option key={subCategory} value={subCategory}>
                                        {subCategory}
                                    </option>
                                ))}
                        </select>
                    </div>
                </div>

                {/* 설명 */}
                <div className="mb-4">
                    <h2 className="text-xl font-bold mb-2">설명</h2>
                    <textarea
                        className="w-full p-2 border rounded h-24 border-gray outline-none"
                        maxLength={100}
                        placeholder="설명을 입력하세요"
                        rows={4}
                    />
                </div>
            </div>
        </Modal>
    );
};

export default LongMakeModal;

ReportModal (신고하기)

import React, { useState } from 'react';
import { Modal } from './Modal'; // Modal 컴포넌트 임포트

const ReportModal = ({ title, contents, setModal, state, leftLabel, rightLabel }) => {
    // 신고 카테고리 상태 관리
    const [reportCategory, setReportCategory] = useState('');
    // 신고 사유 상태 관리
    const [reportReason, setReportReason] = useState('');

    // 신고 카테고리 변경 핸들러
    const handleReportCategoryChange = (event) => {
        setReportCategory(event.target.value);
    };

    // 신고 사유 변경 핸들러
    const handleReportReasonChange = (event) => {
        setReportReason(event.target.value);
    };

    return (
        <Modal
            type="wide" // 모달 유형을 wide로 설정
            title={title}
            contents={contents}
            setModal={setModal}
            state={state}
            leftLabel={leftLabel}
            rightLabel={rightLabel}
        >
            {/* 모달 내용 */}
            <div className="report-modal-content p-6">
                {/* 신고 카테고리 선택 */}
                <select
                    name="report-category"
                    id="report-category"
                    value={reportCategory}
                    onChange={handleReportCategoryChange}
                    className="w-full p-2 border rounded mb-4 border-gray outline-none"
                >
                    <option value="" disabled>신고 사유 선택</option>
                    <option value="SPAM">스팸/도배글입니다.</option>
                    <option value="ADVERTISE">홍보 내용을 포함하고 있습니다.</option>
                    <option value="SEXUAL">음란물입니다.</option>
                    <option value="PRIVACY">개인정보 노출 게시물입니다.</option>
                    <option value="ETC">기타</option>
                </select>

                {/* 신고 사유 입력 */}
                <textarea
                    className="w-full p-2 border rounded border-gray outline-none"
                    rows={8}
                    maxLength={200}
                    placeholder="신고 사유를 적어주세요."
                    value={reportReason}
                    onChange={handleReportReasonChange}
                />
            </div>
        </Modal>
    );
};

export default ReportModal;

moofarm / ssuckssuck-frontend

[FEAT] 모달 컴포넌트 생성 #7

💡 Feature Issue

🌿 To-do

LongJoinModal (방 가입하기)

LongMakeModal (방 만들기)

ReportModal (신고하기)