Merge pull request #169 from bsideproject/moon

[feat] My -> myPosting 일단 추가

components/ProfileCard/index.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
-import { Nav, Textarea } from '@/components/index.tsx';
-import EditProfile from '@/pages/profile/editProfile';
 import { useForm } from 'react-hook-form';
+import { Nav, Textarea } from '@/components/index.tsx';
+import EditProfile from '@/pages/userInfo/editProfile';
+
 import MyPosting from '@/public/icons/myPosting.svg';
 import ChangePassword from '@/public/icons/Password.svg';
 import Logout from '@/public/icons/LogOut.svg';
 import Vector from '@/public/icons/Vector 115.svg';
 import { useRouter } from 'next/router';
-
 import useModal from '@/hooks/useModal.ts';
 
 interface ProfileCardProps {
@@ -49,10 +49,10 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
     const ListItem = ({ IconComponent, text, route, index }: ListItemProps) => (
         <div 
             className="flex justify-between items-center border border-gray-300 p-[10px]"
-            onMouseOver ={() => { console.log('mouseover', index); setHoveredIndex(index)} }
+            onMouseOver ={() => { setHoveredIndex(index)} }
             onMouseOut={() => setHoveredIndex(null)}
-            onTouchStart={() => setHoveredIndex(index)} 
-            onTouchEnd={() => setHoveredIndex(null)}  
+            onTouchStart={() => setHoveredIndex(index)}
+            onTouchEnd={() => setHoveredIndex(null)}
             onClick={() => handleRouting(route)}
         >
             <div className="flex items-center h-[35px]">
@@ -64,12 +64,12 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
     );
 
     const items = [
-        { IconComponent: MyPosting, text: "My postings", route: '/myPosting'},
+        { IconComponent: MyPosting, text: "My postings", route: '/userInfo/myPostings'},
         { IconComponent: ChangePassword, text: "Change password", route: '/resetPassword/step1'},
         { IconComponent: Logout, text: "Log out", route: "/"},
     ];
 
-    function ListContainer() {
+    const ListContainer = () =>{
         return (
             <div className="flex flex-col w-full">
                 {items.map((item, index) => (
@@ -94,7 +94,7 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
                         <button className="text-sm text-r5 border border-r5 rounded-full w-[50px] h-[24px]" onClick={handleProfileEdit}>Edit</button>
                     </div>
                 </div>
-                <Textarea 
+                <Textarea
                     register={ register('describe') } 
                     initValue={"Hi, I'm Dennis. I'm 31 years old and I'm from Seoul, South Korea. I'm a software engineer with 5 years of experience in the industry. I'm passionate about building innovative products that make people's lives easier."}
                     className="bg-r1 mb-[20px] h-[120px] text-[14px]"

pages/profile/editProfile.tsx → pages/userInfo/editProfile.tsx

@@ -1,16 +1,14 @@
 import React, { useState } from 'react';
-import { FieldError, useForm as UseForm } from 'react-hook-form';
+import { FieldValues, SubmitHandler, FieldError, useForm as UseForm } from 'react-hook-form';
 import useModal from '@/hooks/useModal.ts';
 import { isValidEmail } from '@/utils/validCheck.ts';
 import {
   Textarea,
   Button,
   Upload,
   Input,
+  Calendar
 } from '@/components/index.tsx';
-import { FieldValues, SubmitHandler } from 'react-hook-form';
-import Calendar from '@/components/Calendar/Calendar.tsx';
-
 import ProfileCamera from '@/public/icons/profileCamera.svg';
 
 interface ProfileProps {
@@ -36,8 +34,7 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
     formState: { errors },
   } = UseForm({ mode: 'onChange' });
   const [buttonState, setButtonState] = useState('Male');
-  const [isCalendarShow, setCalendarShow] = useState(false);
-
+
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     openModal({
       props: {
@@ -49,10 +46,6 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
       children: <>hi</>,
     });
   };
-
-  const handleCalendarShow = (isShow: boolean) => {
-    setCalendarShow(isShow);
-  }
 
   const isPostingComplete = () => {
     return true;
@@ -165,7 +158,7 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
                 <div className={subHeader}>Date of birth</div>
             </div>
             <section className='mb-[8px]'>
-                <Calendar placeholder="MM-DD-YYYY" type="text" register={register('dateAvailable')} disabled={watch('availableChecked')} handleCalendarShow={handleCalendarShow}/>
+                <Calendar placeholder="MM-DD-YYYY" type="text" register={register('dateAvailable')} disabled={watch('availableChecked')} />
             </section>
             <div className="mb-[12px] mt-[32px]">
                 <div className={subHeader}>About you</div>

pages/userInfo/myPostings.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import NoPosting from '@/public/icons/noPosting.svg';
+import Step1 from '@/pages/room/addRoom/step1.tsx';
+import useModal from '@/hooks/useModal';
+
+//import { useRouter } from 'next/router';
+
+
+// TODO 데이터가 구체화되면 바꿔줘야함
+interface MyPostingProps {
+    roomInfo : any | null;
+}
+
+export default function MyPosting({ roomInfo }: MyPostingProps) {
+    const { openModal } = useModal();
+
+    const handleAddPosting = () => {
+        openModal({
+            props: {
+              title: 'Add Rooms',
+              size: 'full',
+              custom: true,
+              customHeader: true,
+            },
+            children: <Step1 />,
+        });
+    };
+
+    /**
+     *  룸이 없을 때 보여주는 Component
+     */
+    const NoPostings = () => {
+        const noPostingStyle = 'text-[20px] font-bold mt-[29px] text-center'; 
+        const containerStyle = 'h-screen flex flex-col items-center justify-center'; 
+
+        return (
+            <div className={containerStyle}>
+                <NoPosting />
+                <div className={noPostingStyle}>
+                    Click here to post and find roommates!
+                </div>
+                <div className="mt-[29px]">
+                <button
+                    className={`font-pretendard text-[16px] font-semibold bg-g0 border border-solid border-r1 rounded-[2px] text-r1 w-[120px] h-[48px]`}
+                    onClick={() => handleAddPosting()}
+                    type={'button'}
+                    data-size={'md'}
+                >
+                    + Add post
+                </button>
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * 룸이 있을 때 보여주는 Component (TODO : 구체화 해줘야함)
+     */
+    const MyRooms = () => {
+
+        return (
+            <div>
+                호이호이
+            </div>
+        );
+    };
+
+    return (
+        (roomInfo || []).length === 0 ? <NoPostings /> : <MyRooms />
+    )
+}