From d7634a475242dfc88906b90e7a60ce24d6b0b493 Mon Sep 17 00:00:00 2001 From: moonyah Date: Thu, 6 Jun 2024 07:38:01 +0900 Subject: [PATCH 1/4] [Design] Add Club mobile publishing --- src/app/common/header/MobileHeader.tsx | 6 +- .../(pages)/club/manage/[id]/page.tsx | 550 ++++++++---------- src/app/community/components/CommunityNav.tsx | 8 +- .../community/components/club/ClubCard.tsx | 2 +- .../components/club/CreateGroupForm.tsx | 123 ++-- src/app/community/components/club/Modal.tsx | 49 -- .../components/club/common/ButtonInInput.tsx | 17 + .../components/club/common/Modal.tsx | 60 ++ .../components/club/common/RoundedFrame.tsx | 11 + src/app/community/data/applications.js | 83 +++ src/app/community/data/members.js | 50 ++ src/app/community/layout.tsx | 10 +- 12 files changed, 565 insertions(+), 404 deletions(-) delete mode 100644 src/app/community/components/club/Modal.tsx create mode 100644 src/app/community/components/club/common/ButtonInInput.tsx create mode 100644 src/app/community/components/club/common/Modal.tsx create mode 100644 src/app/community/components/club/common/RoundedFrame.tsx create mode 100644 src/app/community/data/applications.js create mode 100644 src/app/community/data/members.js diff --git a/src/app/common/header/MobileHeader.tsx b/src/app/common/header/MobileHeader.tsx index 093f771..716927a 100644 --- a/src/app/common/header/MobileHeader.tsx +++ b/src/app/common/header/MobileHeader.tsx @@ -25,19 +25,19 @@ export default function MobileHeader({
- Logo + Logo
Unconfirmed Alarm Icon
Hamburger Menu Icon diff --git a/src/app/community/(pages)/club/manage/[id]/page.tsx b/src/app/community/(pages)/club/manage/[id]/page.tsx index f4605ab..55cc099 100644 --- a/src/app/community/(pages)/club/manage/[id]/page.tsx +++ b/src/app/community/(pages)/club/manage/[id]/page.tsx @@ -2,326 +2,286 @@ import ContentWrap from '@/app/common/components/frame/ContentWrap'; import { useState } from 'react'; +import { members } from '../../../../data/members'; +import { applications } from '../../../../data/applications'; +import SearchInput from '@/app/community/components/club/SearchInput'; -interface Member { - id: number; - name: string; - avatar: string; - job: string; - location: string; - lastActivity: string; -} - -interface Application { - id: number; - name: string; - avatar: string; - job: string; - location: string; - questions: { question: string; answer: string }[]; +interface MobileMenuProps { + handleMenuSelect: (selectedMenu: string) => void; + menuSelection: string; } export default function ClubManagePage() { - const members: Member[] = [ - { - id: 1, - name: '김기준', - avatar: '/images/club/example.jpg', - job: '반도체 연구원 지망생', - location: '신도림', - lastActivity: '2024.06.01', - }, - { - id: 2, - name: '김지혜', - avatar: '/images/club/example.jpg', - job: '프론트엔드 개발자', - location: '서울', - lastActivity: '2024.06.01', - }, - { - id: 3, - name: '장문용', - avatar: '/images/club/example.jpg', - job: '프론트엔드 개발자', - location: '서울', - lastActivity: '2024.06.01', - }, - { - id: 4, - name: '채서영', - avatar: '/images/club/example.jpg', - job: '프론트엔드 개발자', - location: '인천', - lastActivity: '2024.06.01', - }, - { - id: 5, - name: 'Eva Martinez', - avatar: '/images/club/example.jpg', - job: 'Engineer', - location: 'Berlin', - lastActivity: '2024.06.01', - }, - { - id: 6, - name: 'David Wilson', - avatar: '/images/club/example.jpg', - job: 'Artist', - location: 'Los Angeles', - lastActivity: '2024.06.01', - }, - ]; - - const applications: Application[] = [ - { - id: 1, - name: '김철수', - avatar: '/images/club/example.jpg', - job: '마케팅', - location: '파리', - questions: [ - { - question: '우리 클럽에 가입하고 싶은 이유는 무엇인가요?', - answer: '커뮤니티를 사랑합니다.', - }, - { - question: '당신이 기여할 수 있는 점은 무엇인가요?', - answer: '마케팅 전문 지식을 제공할 수 있습니다.', - }, - ], - }, - { - id: 2, - name: '김영희', - avatar: '/images/club/example.jpg', - job: '매니저', - location: '도쿄', - questions: [ - { - question: '우리 클럽에 가입하고 싶은 이유는 무엇인가요?', - answer: '네트워킹을 하고 싶습니다.', - }, - { - question: '귀하의 비전은 무엇인가요?', - answer: '새로운 프로젝트를 성공적으로 이끌고 싶습니다.', - }, - ], - }, - { - id: 3, - name: '이영희', - avatar: '/images/club/example.jpg', - job: '개발자', - location: '서울', - questions: [ - { - question: '왜 개발자가 되었나요?', - answer: '흥미로워서입니다.', - }, - ], - }, - { - id: 4, - name: '박철수', - avatar: '/images/club/example.jpg', - job: '디자이너', - location: '뉴욕', - questions: [ - { - question: '좋아하는 디자인 스타일은 무엇인가요?', - answer: '미니멀리즘입니다.', - }, - ], - }, - { - id: 5, - name: '홍길동', - avatar: '/images/club/example.jpg', - job: '영업', - location: '런던', - questions: [ - { - question: '매출을 높이기 위해 무엇을 할 수 있나요?', - answer: '새로운 고객을 확보할 수 있습니다.', - }, - ], - }, - { - id: 6, - name: '이순신', - avatar: '/images/club/example.jpg', - job: '경영자', - location: '상하이', - questions: [], - }, - ]; - const [expandedApplicationId, setExpandedApplicationId] = useState< number | null >(null); + const [mobileViewMode, setMobileViewMode] = useState('members'); // 초기값은 'members'로 설정 + + const handleMenuSelect = (selectedMenu: string) => { + if (selectedMenu === '멤버 리스트') { + setMobileViewMode('members'); + } else if (selectedMenu === '신청서 관리') { + setMobileViewMode('requests'); + } + }; const toggleApplication = (id: number) => { setExpandedApplicationId(expandedApplicationId === id ? null : id); }; - return ( -
- -
- {/* 관리 폼의 제목 */} -
- +
+

+ 소모임 이름 +

+

+ 소모임 설명 +

+
+
+ + ); + }; + + const MemberList = () => { + return ( + <> +
    + {members.map((member) => ( +
  • - < - -
    -

    - 소모임 이름 -

    -

    소모임 설명

    +
    + {member.name} +
    +

    + {member.name} +

    +

    + {member.job} | {member.location} +

    +

    + 마지막 활동일 {member.lastActivity} +

    +
    +
    +
    +
    + Crown Icon +
    + Trash Icon +
    +
    • + ))} +
+ + ); + }; + + const RequestMemberList = () => { + const ApproveAndRefuseButtons = () => { + return ( +
+ + +
+ ); + }; + + return ( + <> + {applications.map((application) => ( +
+
+
+ {application.name} +
+

+ {application.name} +

+

+ {application.job} | {application.location} +

+
+
+
+ +
+
+ +
+
+ + {expandedApplicationId !== application.id && ( +
+ +
+ )} + +
+
+ + {expandedApplicationId === application.id && ( +
+ {application.questions.map((qa, index) => ( +
+

+ {qa.question} +

+

+ {qa.answer} +

+
+ ))} + +
+ +
+ +
+ +
+ +
+ +
+
+ )}
-
+ ))} + + ); + }; + + const MobileMenu = ({ handleMenuSelect, menuSelection }: MobileMenuProps) => { + return ( +
+ + +
+ ); + }; + + return ( +
+ +
+ + +
{/* 멤버 리스트 */} -
-
-

+
+
+

멤버 리스트

-
- + -
- Search Icon -
-
    - {members.map((member) => ( -
  • -
    - {member.name} -
    -

    {member.name}

    -

    - {member.job} | {member.location} -

    -

    - 마지막 활동일 {member.lastActivity} -

    -
    -
    -
    -
    - Crown Icon -
    - Trash Icon -
    -
    • - ))} -
+
+
{/* 신청서 관리 */} -
-
-

+
+
+

신청서 관리

-
- {applications.map((application) => ( -
-
-
- {application.name} -
-

- {application.name} -

-

- {application.job} | {application.location} -

-
-
-
- - -
-
-
- -
- {expandedApplicationId === application.id && ( -
- {application.questions.map((qa, index) => ( -
-

- {qa.question} -

-

- {qa.answer} -

-
- ))} - {/* 닫기 버튼 */} -
- -
-
- )} -
- ))} +
+
diff --git a/src/app/community/components/CommunityNav.tsx b/src/app/community/components/CommunityNav.tsx index 4b55401..966d7eb 100644 --- a/src/app/community/components/CommunityNav.tsx +++ b/src/app/community/components/CommunityNav.tsx @@ -34,7 +34,7 @@ export default function CommunityNav() { return (
setHoverIcon(iconName)} onMouseLeave={() => setHoverIcon('')} onClick={() => setActiveIcon(iconName)} @@ -50,8 +50,8 @@ export default function CommunityNav() { {text} @@ -62,7 +62,7 @@ export default function CommunityNav() { }; return ( -

{showCancelButton && ( - )} diff --git a/src/app/community/components/club/CreateGroupForm.tsx b/src/app/community/components/club/CreateGroupForm.tsx index e370049..a6fd5b6 100644 --- a/src/app/community/components/club/CreateGroupForm.tsx +++ b/src/app/community/components/club/CreateGroupForm.tsx @@ -2,7 +2,12 @@ import React, { useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; -import Modal from './Modal'; +import Modal from './common/Modal'; +import Club from './Club'; +// import { i_club, CLUB } from '@/app/model/club'; +import RoundedFrame from './common/RoundedFrame'; +import MobileBackBtn from '@/app/common/components/form/MobileBackBtn'; +import BlueSquareBtn from '@/app/common/components/form/BlueSquareBtn'; interface CreateGroupFormProps { onClose: () => void; @@ -83,12 +88,15 @@ export default function CreateGroupForm({ onClose }: CreateGroupFormProps) { clearErrors, } = useForm({ resolver: zodResolver(Schema), + mode: 'onChange', }); const [selectedCategory, setSelectedCategory] = useState(null); const [imagePreview, setImagePreview] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const [submitted, setSubmitted] = useState(false); // 제출 여부 상태 추가 + // const [formData, setFormData] = useState(new CLUB); //TODO clue interface 추가하세요 + // const [test, setTest] = useState(new CLUB); //TODO cosole.log 해서 봐라 const [formData, setFormData] = useState({}); const onSubmit = async (data: FormData) => { @@ -184,7 +192,7 @@ export default function CreateGroupForm({ onClose }: CreateGroupFormProps) { return (
- {submitted ? ( // 제출 후에는 폼 대신 모달을 렌더링합니다. + {submitted ? ( ) : ( -
-
- -

+

소모임 개설

-
+ {/* 승인 유형 */} -
- +
+
{approvalType.map((type) => (
{/* 모임 카테고리 */} -
- -
+
+ +
{categories.map((category, index) => (
{/* 모집 정원 */} -
- +
+
-
+
명
{errors.capacity && ( <> -

+

{errors.capacity.message}

)}
{/* 베이스 지점 */} -
- +
+
{errors.basePoint && ( <> -

+

{errors.basePoint.message}

)}
{/* 소모임 이름 */} -
- +
+
{errors.clubName && ( -

+

{errors.clubName.message}

)}
{/* 한 줄 소개 */} -
- +
+
{errors.shortDescription && ( -

+

{errors.shortDescription.message}

)}
{/* 상세 소개 */} -
- +
+