frontendschool6 / ready-act Goto Github PK

import { AppContext } from '@/App';
import { useContext, useEffect, useState } from 'react';

function PaymentToggleButton({ value = "false", labelClassName, ...restProps }) {
  const { updateCreateRoomForm } = useContext(AppContext);
  const [isToggled, setToggled] = useState(value);

  useEffect(() => {
    updateCreateRoomForm('payment', isToggled);
    console.log(isToggled);
  }, [isToggled]);

  return (
    <>
      <label htmlFor="payment" className={labelClassName}>
        지불 방법
      </label>
      <div id="payment" className="bg-greenishgray-200 w-full p-2 rounded-lg">
        <button
          value={isToggled}
          type="button"
          className="w-full rounded-lg "
          onClick={() => setToggled(!isToggled)}
          data-payment={isToggled ? '계좌 이체' : '만나서 결제'}
          {...restProps}
        >
          <div
            className={`flex w-full ${isToggled ? 'items-center' : ''}`.trim()}
          >
            <div
              className={`w-1/2 ${!isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              만나서 결제
            </div>
            <div
              className={`w-1/2 ${isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              계좌 이체
            </div>
          </div>
        </button>
      </div>
    </>
  );
}

export default PaymentToggleButton;

<button
          value={isToggled}
          type="button"
          className="w-full rounded-lg "
          onClick={() => setToggled(!isToggled)}
          data-payment={isToggled ? '계좌 이체' : '만나서 결제'}
          {...restProps}
        >
          <div
            className={`flex w-full ${isToggled ? 'items-center' : ''}`.trim()}
          >
            <div
              className={`w-1/2 ${!isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              만나서 결제
            </div>
            <div
              className={`w-1/2 ${isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              계좌 이체
            </div>
          </div>
        </button>

<div className="hAddr flex">
          {/* 여기 */}
          <span readOnly value={data || ""} id="centerAddr" className='p-4'>
            {data}
          </span>

import arrowLeft from '@/assets/icons/arrowLeft.svg';
import { useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import './Location.module.css';
import { AppContext } from '@/App';
import Button from "../../components/Button";

const { kakao } = window;

function Location({ value }) {
  const { updateCreateRoomForm } = useContext(AppContext);

  const [data, setData] = useState(value);

  useEffect(() => {
    const mapContainer = document.getElementById('map'), // 지도를 표시할 div
      mapOption = {
        center: new kakao.maps.LatLng(37.57157200866145, 126.9763416696016), // 지도의 중심좌표
        level: 4,
      };

    const map = new kakao.maps.Map(mapContainer, mapOption);

    const geocoder = new kakao.maps.services.Geocoder();

    const marker = new kakao.maps.Marker(),
      infowindow = new kakao.maps.InfoWindow({ zindex: 1 });

    searchAddrFromCoords(map.getCenter(), displayCenterInfo);

    kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
      searchDetailAddrFromCoords(mouseEvent.latLng, function (result, status) {
        if (status === kakao.maps.services.Status.OK) {
          let detailAddr = !!result[0].address.address_name
            ? result[0].address.address_name
            : '위치정보를 불러올수없음';
          setData(detailAddr);

          const content = '<div className="bAddr">' + detailAddr + '</div>';

          marker.setPosition(mouseEvent.latLng);
          marker.setMap(map);

          infowindow.setContent(content);
          infowindow.open(map, marker);
        }
      });
    });

    kakao.maps.event.addListener(map, 'idle', function () {
      searchAddrFromCoords(map.getCenter(), displayCenterInfo);
    });

    function searchAddrFromCoords(coords, callback) {
      geocoder.coord2RegionCode(coords.getLng(), coords.getLat(), callback);
    }

    function searchDetailAddrFromCoords(coords, callback) {
      geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
    }

    function displayCenterInfo(result, status) {
      if (status === kakao.maps.services.Status.OK) {
        const infoDiv = document.getElementById('centerAddr');

        for (let i = 0; i < result.length; i++) {
          if (result[i].region_type === 'H') {
            infoDiv.innerHTML = result[i].address_name;
            break;
          }
        }
      }
    }
  }, []);

  useEffect(() => {
    updateCreateRoomForm('meetingPoint', data);

  }, [data]);


  return (
    <div className="h-full">
      <div className="relative h-12">
        <p className="text-center py-3">지도에서 위치 확인</p>

        <Link to="/createroom">
          <img src={arrowLeft} alt="뒤로 가기" className="absolute top-3" />
        </Link>
      </div>

      <div className="map_wrap">
        <div id="map" className="w-full h-[420px]"></div>
        <div className="hAddr flex">
          {/* <input readOnly value={data || ""} id="centerAddr" className='p-4' /> */}
          <span id="centerAddr" className='p-4'>
            {data}
          </span>

          <Link to="/createroom" className="bg-white w-full absolute max-w-xl bottom-0 p-4 drop-shadow-2xl">
            <Button type="submit" className="activeButton lgFontButton w-full ">
              이 위치로 설정
            </Button>
          </Link>

        </div>
      </div>
    </div>
  );
}

export default Location;

import { AppContext } from '@/App';
// import FormInput from '../../components/FormInput';
import { useContext, useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { pb } from '@/api/pocketbase';


function Creator() {
  const { updateCreateRoomForm } = useContext(AppContext);
  const [idData, setIdData] = useState([]);
  const [productIdData, setProductIdData] = useState([]);
  const { id } = useParams();


  // localStorage에서 아이디 정보를 가져오는 함수
  const localStorageId = JSON.parse(localStorage.getItem('pocketbase_auth')).model.id;
  // console.log(localStorageId);

  useEffect(() => {
    async function readUserId() {
      try {
        // 포켓 호스트에서 아이디 정보를 가져오는 함수
        const pocketHostId = await pb.collection('users').getFullList();
        // console.log(pocketHostId);
        // localStorageId 과 pocketHostId 두개를 비교하여 일치하는것만 setIdData 에 주입하여 렌더
        pocketHostId.filter((idList) => {
          // console.log(idList.id);
          if (idList.id === localStorageId) {
            setIdData(idList);

          }
        })

      }
      catch (error) {
        if (!(error instanceof ClientResponseError)) {
          console.error(error);
        }
      }

    }


    async function readProductId() {
      try {
        const productId = await pb.collection('products').getFullList({
          expand: 'creator',
          filter: `creator.id="${localStorageId}"`,
        });

        // console.log(productId);
        setProductIdData(productId);

      } catch (error) {
        if (!(error instanceof ClientResponseError)) {
          console.error(error);
        }
      }
    }


    readUserId();
    readProductId()

    updateCreateRoomForm('creator', idData.name);
    console.log(idData.name);
    // console.log(idData);
  }, [idData.name])


  // 이제 이 비교된 결과값을 넣는 Creator input 창이 필요 
  // creator input 의 값을 context api 에서 뽑아서 사용 app context form 에 넣어서 상태 관리
  return (
    <>

      <div readOnly label="생성자" placeholder="생성자" labelClassName="creator" inputClassName="w-full defaultInput">{idData.name}</div>

    </>
  )
}
export default Creator;

import { useId, useContext, useState, useEffect } from 'react';
import { category } from '../../data/category';
import { AppContext } from '../../App';

function CategoryDropdown({ className, title }) {
  const { id } = useId();
  const { updateCreateRoomForm } = useContext(AppContext);
  const [selectedCategory, setSelectedCategory] = useState();

  useEffect(() => {

    async function readCategoryList() {
      try {
        const categoryList = category.map((list) => list.title);
        console.log(categoryList);
        console.log(setSelectedCategory);

      } catch (error) {
        console.error(error);
      }
    }

    readCategoryList()

    updateCreateRoomForm('category', selectedCategory);
    console.log(selectedCategory);
  }, []);

  return (
    <div>
      <label htmlFor={id}>{title}</label>
      <select
        value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}
        id={id}
        className={className}
        name="category"
        defaultValue="전체"
      >
        {category.map((list) => (
          <option key={list.title} value={list.title}>
            {list.title}
          </option>
        ))}
      </select>
    </div>
  );
}

export default CategoryDropdown;

function CreateRoom() {


  const formRef = useRef(null);

  const counterRef = useRef(null);

  const handleCreate = async (e) => {
    e.preventDefault();

    // 오류 : counter 에 current.value 가 안찍힌다.
    const counterValue = counterRef.current.value;
    console.log(counterValue);


    const data = new FormData();

    data.append('participateNumber', counterValue);
 
return ...
}

import { useState } from "react";
import { minus, plus } from '../../src/assets/icons/svg-icons';

function ParticipateCounter({ title, isRef }) {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  const decrementCount = () => {
    setCount(count - 1);
  };


  return (
    <div>
      <label>{title}</label>
      <div className="flex gap-2 float-right p-2 items-center">
        <button type="button" onClick={decrementCount}>
          <img src={minus} alt="minus" />
        </button>

        <p ref={isRef}>{count}</p>

        <button type="button" onClick={incrementCount}>
          <img src={plus} alt="plus" />
        </button>
      </div>
    </div>
  );
};

export default ParticipateCounter;

import { forwardRef, useId, useState } from 'react';
// import Input from "@/components/Input";

function DatePicker({ title, className, labelClassName, ...restProps }, ref) {
  const [, setDate] = useState(null);
  const id = useId();

  return (
    <div>
      <label htmlFor={id} className={labelClassName}>
        {title}
      </label>
      <input
        id={id}
        ref={ref}
        className={className}
        type="date"
        onChange={(e) => setDate(e.target.value)}
        {...restProps}
      />
    </div>
  );
}

export default forwardRef(DatePicker);

import { useState } from 'react';

function TimePicker() {
  const [time, setTime] = useState('00:00:00');

  const handleTimeChange = (e) => {
    const inputTime = e.target.value;
    // 정규식을 사용하여 입력된 값이 유효한 형식인지 확인
    const timeRegex = /^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
    if (timeRegex.test(inputTime)) {
      setTime(inputTime);
    }
  };

  return (
    <div>
      <label htmlFor="timeInput">Time:</label>
      <input
        type="text"
        id="timeInput"
        value={time}
        onChange={handleTimeChange}
      />
    </div>
  );
}

export default TimePicker;

{isToggled ? 
            (<div className="flex w-full items-center "><div className="w-1/2 shadow-lg bg-white rounded-lg "> 계좌 이체 </div><div className="w-1/2 "> 만나서 결제 </div></div>) :
            (<div className="flex w-full">< div className="w-1/2" > 계좌 이체 </div><div className="w-1/2 shadow-lg bg-white rounded-lg">만나서 결제</div> </div>)}

import React, { useState, forwardRef } from "react";

function PaymentToggleButton({ labelClassName, title, }, ref) {
  const [isToggled, setToggled] = useState(false);
  return (
    <>
      <label className={labelClassName}>{title}</label>
      <div className="bg-greenishgray-200 w-full p-2 rounded-lg">

        <button
          ref={ref}
          className="w-full"
          type="button"
          onClick={() => setToggled(!isToggled)}
        >
          {/* 토글이 되면 ? 왼쪽이 활성화된 ui : 오른쪽이 활성화된 ui */}
          {/* 스타일에만 isToggled 를 준다면 ? 콘솔에는 여전히 둘다 찍힐까? */}
          {isToggled ?
            (<div className="flex w-full items-center "><div className="w-1/2 shadow-lg bg-white rounded-lg "> 계좌 이체 </div><div className="w-1/2 "> 만나서 결제 </div></div>) :
            (<div className="flex w-full">< div className="w-1/2" > 계좌 이체 </div><div className="w-1/2 shadow-lg bg-white rounded-lg">만나서 결제</div> </div>)}
          {/* {isToggled ? "계좌 이체" : "만나서 결제"} */}
        </button>

      </div >
    </>
  );
};

export default forwardRef(PaymentToggleButton);

import { AppContext } from '@/App';
import imgUpload from '@/assets/icons/imgUpload.svg';
import { useContext, useEffect, useState } from 'react';

function FileUpload({ value, className, title, ...restProps }) {
  const { updateCreateRoomForm } = useContext(AppContext);
  const [fileImages, setFileImages] = useState(value);

  useEffect(() => {
    updateCreateRoomForm('uploadImage', fileImages);
  }, [fileImages]);

  const handleFileUpload = (e) => {
    const { files } = e.target;
    const fileImages = Array.from(files).map((file) => ({
      image: URL.createObjectURL(file),
      label: file.name,
    }));
    setFileImages(fileImages);
  };

  return (
    <>
      <div className=" mb-14">
        <div className="flex justify-between items-center">
          <p>사진 업로드</p>
          <label htmlFor="photo" className={className}>
            {title}
          </label>
          <input
            type="file"
            accept="image/jpg,image/png,image/jpeg,image/webp,image/avif"
            name="photo"
            id="photo"
            onChange={handleFileUpload}
            style={{ display: 'none' }}
            {...restProps}
          />
        </div>
        <div className="flex justify-center border-2 my-4 rounded-lg border-dashed border-line-400">
          {!fileImages && (
            <img src={imgUpload} alt="photo" className="w-20 p-4" />
          )}
          {fileImages?.map((file) => {
            return <img value={fileImages}
              key={file.label} src={file.image} alt={file.label} />;
          })}
        </div>
      </div>
    </>
  );
}

export default FileUpload;

import { AppContext } from '@/App';
import { useContext, useEffect, useState } from 'react';


function ContentTextarea(
  { value = "", title, placeholder, className, labelClassName, ...restProps }) {
  const { updateCreateRoomForm } = useContext(AppContext);
  const [data, setData] = useState(value);

  useEffect(() => {
    updateCreateRoomForm('content', data);
  }, [data]);

  const handleInputChange = (e) => {
    setData(e.target.value);
  };

  return (
    <>
      <label htmlFor="content" className={labelClassName}>
        내용
      </label>
      <textarea
        value={data}
        onChange={handleInputChange}
        id="content"
        placeholder={placeholder}
        className={className}
        {...restProps}
      />
    </>
  );
}

export default ContentTextarea;

import { useState, forwardRef } from "react";
import { imgUpload } from '../../assets/icons/svg-icons'

function FileUpload({ }, ref) {

  const [fileImages, setFileImages] = useState(null);

  const handleFileUpload = (e) => {
    const { files } = e.target;
    const fileImages = Array.from(files).map((file) => ({
      image: URL.createObjectURL(file),
      label: file.name,
    }));
    setFileImages(fileImages);

    // img file const 
    console.log(photoRef.current.files);
    const photoValue = photoRef.current.files;

    if (!photoValue) {
      // toast message here
      return
    }
  };

  return (<>
    <div >
      <label htmlFor="photo" className="sr-only">
        사진 등록
      </label>
      <input
        type="file"
        accept="image/jpg,image/png,image/jpeg,image/webp,image/avif"
        name="photo"
        id="photo"
        ref={ref}
        onChange={handleFileUpload}
        className=""
      />
      <div className="" >
        {!fileImages && (
          <img
            src={imgUpload}
            alt="photo"
            className="w-24"
          />
        )}
        {fileImages?.map((file) => {
          return (
            <img
              key={file.label}
              src={file.image}
              alt={file.label}
              className=""
            />
          );
        })}
      </div>
    </div>
  </>)
}
export default forwardRef(FileUpload);

 } catch (error) {
       if (!(error instanceof ClientResponseError)) {
         console.error(error);
       }}

import { AppContext } from '@/App';
import { useEffect, useState, useContext, useId } from 'react';


function ContentTextarea(
  { title, placeholder, className, labelClassName, ...restProps }) {
  const { id } = useId();
  const { updateCreateRoomForm } = useContext(AppContext);
  const [data, setData] = useState('');

  useEffect(() => {
    updateCreateRoomForm('content', data);


  }, [data])

  const handleInputChange = (e) => {

    setData(e.target.value);

    // console.log(setData);

  };

  return (
    <>
      <label htmlFor={id} className={labelClassName}>
        {title}
      </label>
      <textarea
        value={data}
        onChange={handleInputChange}
        id={id}
        placeholder={placeholder}
        className={className}
        {...restProps}
      />
    </>
  );
}

export default ContentTextarea;

import { AppContext } from '@/App';
import { pb } from '@/api/pocketbase';
import Button from '@/components/Button';
import FormInput from '@/components/FormInput';
import CreateHeader from '@/layout/CreateHeader';
import CategoryDropdown from '@/parts/create/CategoryDropdown';
import ContentTextarea from '@/parts/create/ContentTextarea';
import DatePicker from '@/parts/create/DatePicker';
import FileUpload from '@/parts/create/FileUpload';
import MeetingPoint from '@/parts/create/MeetingPoint';
import ParticipateCounter from '@/parts/create/ParticipateCounter';
import PaymentToggleButton from '@/parts/create/PaymentToggleButton';
import Status from '@/parts/create/Status';
import { ClientResponseError } from 'pocketbase';
import { useContext, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import Creator from '@/parts/create/Creator';
import { useEffect } from 'react';



function CreateRoom() {
  const { createRoomForm, updateCreateRoomForm } = useContext(AppContext);

  const formRef = useRef(null);
  const titleRef = useRef(null);
  const priceRef = useRef(null);
  const dateRef = useRef(null);
  const paymentRef = useRef(null);
  const ParticipateCounterRef = useRef(null);
  const uploadImageRef = useRef(null);
  const statusRef = useRef(null);

  const handleCreate = async (e) => {
    e.preventDefault();

    const categoryValue = createRoomForm.category;
    const titleValue = titleRef.current.value;
    const contentValue = createRoomForm.content;
    console.log(contentValue);
    const priceValue = priceRef.current.value;
    const dateValue = dateRef.current.value;

    const paymentValue = paymentRef.current.dataset.payment;
    const ParticipateCounterValue = Number(
      ParticipateCounterRef.current.textContent
    );

    const meetingPointValue = createRoomForm.meetingPoint;
    const creatorValue = createRoomForm.creator.id;

    const uploadImageValue = uploadImageRef.current.files[0];
    const statusValue = statusRef.current.value;

    const data = new FormData();

    data.append('category', categoryValue);
    data.append('title', titleValue);
    data.append('content', contentValue);
    data.append('price', priceValue);
    data.append('pickup', dateValue);
    data.append('payment', paymentValue);
    data.append('participateNumber', ParticipateCounterValue);
    data.append('meetingPoint', meetingPointValue);
    data.append('creator', creatorValue);
    data.append('participate', creatorValue);
    if (uploadImageValue) {
      data.append('uploadImage', uploadImageValue);
    }
    data.append("status", statusValue);

    for (const [key, value] of data.entries()) {
      console.log(key, value);
    }

    // return
    try {
      await pb.collection('products').create(data);

      // navigate('/products');

    } catch (error) {
      if (!(error instanceof ClientResponseError)) {
        console.error(error);
      }
    }
  }

  return (
    <>

      <Helmet>
        <title>방만들기</title>
      </Helmet>

      <div >
        <CreateHeader />

        <form
          encType="multipart/form-data"
          ref={formRef}
          onSubmit={handleCreate}
        >
          <div className="flex flex-col gap-4 p-4 relative"
          >

            <CategoryDropdown
              title="카테고리"
              className="w-full defaultInput"
            />
            <FormInput
              ref={titleRef}
              type="text"
              placeholder="상품명을 입력해주세요."
              labelClassName="product name"
              inputClassName="defaultInput w-full"
              label="상품명"
            />
            <FormInput
              ref={priceRef}
              type="number"
              placeholder="0원"
              labelClassName="product price"
              inputClassName="defaultInput w-full"
              label="상품 가격"
            />
            <ContentTextarea
              title="내용"
              placeholder="공구 모임 주요내용을 알려주세요."
              className="w-full defaultInput"
              labelClassName="product content"
            />

            <DatePicker
              ref={dateRef}
              title="픽업 날짜"
              className="w-full defaultInput"
              labelClassName="date Picker"
            />

            <Status
              ref={statusRef}
              title="상태"
              className="w-full defaultInput "
              labelClassName="status"
            />

            <Creator />

            <PaymentToggleButton
              ref={paymentRef}
              title="정산 방법"
              labelClassName="payment"
            />

            <ParticipateCounter ref={ParticipateCounterRef} title="인원" />

            <MeetingPoint title="만날 장소" />

            <FileUpload
              ref={uploadImageRef}
              title="파일 업로드"
              className="bg-[#EBF8E8] p-4 rounded-lg text-primary-500"
            />
          </div>
          <div className="bg-white fixed bottom-0 max-w-xl w-full p-4 drop-shadow-2xl">
            <Button type="submit" className="activeButton lgFontButton w-full ">
              방 만들기
            </Button>
          </div>
        </form>
      </div>
    </>
  );
}

export default CreateRoom;

import React, { useState } from 'react';

function NotificationSender() {
  const [message, setMessage] = useState('');

  const sendNotification = async () => {
    try {
      const response = await fetch('YOUR_POCKETBASE_API_URL/send-notification', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_AUTH_TOKEN',
        },
        body: JSON.stringify({ message }),
      });

      if (response.ok) {
        console.log('Notification sent successfully');
        // 여기에서 필요한 처리를 수행하세요.
      } else {
        console.error('Error sending notification:', response.statusText);
      }
    } catch (error) {
      console.error('Error sending notification:', error);
    }
  };

  return (
    <div>
      <h2>Send Notification</h2>
      <textarea
        rows="3"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendNotification}>Send</button>
    </div>
  );
}

export default NotificationSender;

import { string } from 'prop-types';
import { useId, forwardRef } from 'react';

function Status({ title, className, labelClassName, ...restProps }, ref) {
  const { id } = useId();

  return (
    <>
      <label htmlFor={id} className={labelClassName}>
        {title}
      </label>
      <select
        ref={ref}
        id={id}
        className={className}
        {...restProps}
        name="status"
        defaultValue="대기중"
      >
        <option value="대기중">대기중</option>
        <option value="진행중">진행중</option>
        <option value="공구종료">공구종료</option>
      </select>
    </>
  );
}

export default forwardRef(Status);