Merge to prod

components/Group/Banner.jsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import Button from '@/shared/components/Button';
 import groupBannerImg from '@/public/assets/group-banner.png';
 import Image from '@/shared/components/Image';
+import InfoCompletionGuard from '@/shared/components/InfoCompletionGuard';
 
 const StyledBanner = styled.div`
   position: relative;
@@ -60,7 +61,9 @@ const Banner = () => {
         <h1>揪團</h1>
         <p>想一起組織有趣的活動或學習小組嗎？</p>
         <p>註冊並加入我們，然後創建你的活動，讓更多人一起參加！</p>
-        <Button onClick={() => router.push('/group/create')}>我想揪團</Button>
+        <InfoCompletionGuard>
+          <Button onClick={() => router.push('/group/create')}>我想揪團</Button>
+        </InfoCompletionGuard>
       </div>
     </StyledBanner>
   );

components/Group/Form/Fields/AreaCheckbox.jsx

@@ -9,7 +9,7 @@ export default function AreaCheckbox({
   itemLabel,
   itemValue,
   name,
-  value,
+  value = [],
   control,
 }) {
   const [isPhysicalArea, setIsPhysicalArea] = useState(false);
@@ -57,12 +57,14 @@ export default function AreaCheckbox({
         <FormControlLabel
           control={<Checkbox onClick={toggleIsPhysicalArea} />}
           label="實體活動"
+          disabled={value.includes('待討論')}
           checked={isPhysicalArea}
         />
         <Select
           name={name}
           options={options}
           placeholder="地點"
+          disabled={value.includes('待討論')}
           value={physicalAreaValue}
           itemLabel={itemLabel}
           itemValue={itemValue}
@@ -73,6 +75,7 @@ export default function AreaCheckbox({
         <FormControlLabel
           control={<Checkbox onClick={() => handleCheckboxChange('線上')} />}
           label="線上"
+          disabled={value.includes('待討論')}
           checked={value.includes('線上')}
         />
       </div>
@@ -81,6 +84,7 @@ export default function AreaCheckbox({
           control={<Checkbox onClick={() => handleCheckboxChange('待討論')} />}
           label="待討論"
           checked={value.includes('待討論')}
+          disabled={value.some((item) => item !== '待討論')}
         />
       </div>
     </>

components/Group/Form/Fields/CheckboxGroup.jsx

@@ -0,0 +1,41 @@
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+export default function CheckboxGroup({
+  options,
+  name,
+  value = [],
+  control,
+  handleValues,
+}) {
+  const handleCheckboxChange = (_value) => {
+    const hasValue = value.includes(_value);
+    const updatedValue = hasValue
+      ? value.filter((v) => v !== _value)
+      : [...value, _value];
+    const newValue = handleValues(
+      hasValue ? 'remove' : 'add',
+      _value,
+      updatedValue,
+    );
+
+    control.onChange({ target: { name, value: newValue } });
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+      {options.map((option) => (
+        <FormControlLabel
+          key={option.value}
+          sx={{ flex: '0 0 124px' }}
+          control={
+            <Checkbox onClick={() => handleCheckboxChange(option.value)} />
+          }
+          label={option.label}
+          checked={value.includes(option.value)}
+        />
+      ))}
+    </Box>
+  );
+}

components/Group/Form/Fields/DateRadio.jsx

@@ -0,0 +1,68 @@
+import dayjs from 'dayjs';
+import { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function DateRadio({
+  name,
+  customValueName,
+  value,
+  isCustomValue,
+  control,
+}) {
+  const [isCustomDate, setIsCustomDate] = useState(isCustomValue);
+  const [date, setDate] = useState(value);
+
+  useEffect(() => {
+    control.onChange({ target: { name, value: date } });
+    control.onChange({
+      target: { name: customValueName, value: isCustomDate },
+    });
+  }, [name, date, customValueName, isCustomDate]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          label: { whiteSpace: 'nowrap' },
+        }}
+      >
+        <FormControlLabel
+          control={<Checkbox onClick={() => setIsCustomDate(true)} />}
+          label="自訂"
+          checked={isCustomDate}
+        />
+        <MobileDatePicker
+          inputFormat="YYYY/MM/DD"
+          value={date}
+          onChange={setDate}
+          onAccept={() => setIsCustomDate(true)}
+          minDate={dayjs().add(1, 'day')}
+          maxDate={dayjs().add(4, 'year')}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              size="small"
+              sx={{ '& legend': { display: 'none' } }}
+              fullWidth
+            />
+          )}
+        />
+      </Box>
+      <div>
+        <FormControlLabel
+          control={<Checkbox onClick={() => setIsCustomDate(false)} />}
+          label="不限"
+          checked={!isCustomDate}
+        />
+      </div>
+    </LocalizationProvider>
+  );
+}

components/Group/Form/Fields/Select.jsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import FormControl from '@mui/material/FormControl';
 import MuiSelect from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
@@ -14,7 +13,7 @@ export default function Select({
   sx,
   disabled,
   control,
-  value,
+  value = [],
   error,
 }) {
   const getValue = (any, key) => (typeof any === 'object' ? any[key] : any);
@@ -27,6 +26,7 @@ export default function Select({
   return (
     <FormControl size="small" fullWidth>
       <MuiSelect
+        inputRef={(element) => control.setRef?.(name, element)}
         displayEmpty
         multiple={multiple}
         fullWidth={fullWidth}

components/Group/Form/Fields/TagsField.jsx

@@ -60,6 +60,7 @@ function TagsField({ name, helperText, control, value = [] }) {
         ))}
         {value.length < 8 && (
           <input
+            ref={(element) => control.setRef?.(name, element)}
             value={input}
             onCompositionStart={() => {
               isComposing.current = true;

components/Group/Form/Fields/TextField.jsx

@@ -13,6 +13,7 @@ export default function TextField({
   return (
     <>
       <MuiTextField
+        inputRef={(element) => control.setRef?.(name, element)}
         fullWidth
         id={id}
         name={name}
@@ -21,7 +22,7 @@ export default function TextField({
         placeholder={placeholder}
         value={value}
         multiline={multiline}
-        rows={multiline && 10}
+        rows={multiline && 6}
         helperText={helperText}
         {...control}
       />

components/Group/Form/Fields/Upload.jsx

@@ -1,15 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
+import { GiPerspectiveDiceSixFacesThree } from 'react-icons/gi';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import DeleteSvg from '@/public/assets/icons/delete.svg';
 import Image from '@/shared/components/Image';
 import { StyledUpload } from '../Form.styled';
 import UploadSvg from './UploadSvg';
 
 export default function Upload({ name, value, control }) {
-  const [preview, setPreview] = useState(value || '');
+  const [preview, setPreview] = useState(value);
   const [error, setError] = useState('');
   const inputRef = useRef();
+  const isLoading = useRef(false);
 
   const changeHandler = (file) => {
     const event = {
@@ -66,15 +67,25 @@ export default function Upload({ name, value, control }) {
     if (files?.[0]) handleFile(files[0]);
   };
 
-  const handleClear = () => {
+  const handleRandom = () => {
     setPreview('');
     setError('');
     inputRef.current.value = '';
     changeHandler('');
   };
 
   useEffect(() => {
-    if (typeof value === 'string') setPreview(value);
+    if (typeof value === 'string' && value) {
+      setPreview(value);
+    } else if (!isLoading.current && !value) {
+      isLoading.current = true;
+      fetch('https://picsum.photos/436/244')
+        .then((res) => res.blob())
+        .then(handleFile)
+        .then(() => {
+          isLoading.current = false;
+        });
+    }
   }, [value]);
 
   return (
@@ -92,10 +103,10 @@ export default function Upload({ name, value, control }) {
               marginTop: 0.25,
             },
           }}
-          onClick={handleClear}
+          onClick={handleRandom}
         >
-          <img src={DeleteSvg.src} alt="delete icon" />
-          <span>清除</span>
+          <GiPerspectiveDiceSixFacesThree size={20} />
+          <span>隨機圖片</span>
         </Button>
       )}
       <StyledUpload

components/Group/Form/Fields/index.jsx

@@ -5,6 +5,8 @@ import TagsField from './TagsField';
 import TextField from './TextField';
 import Upload from './Upload';
 import Wrapper from './Wrapper';
+import CheckboxGroup from './CheckboxGroup';
+import DateRadio from './DateRadio';
 
 const withWrapper = (Component) => (props) => {
   const id = useId();
@@ -25,6 +27,8 @@ const withWrapper = (Component) => (props) => {
 
 const Fields = {
   AreaCheckbox: withWrapper(AreaCheckbox),
+  CheckboxGroup: withWrapper(CheckboxGroup),
+  DateRadio: withWrapper(DateRadio),
   Select: withWrapper(Select),
   TagsField: withWrapper(TagsField),
   TextField: withWrapper(TextField),

components/Group/Form/Form.styled.jsx

@@ -43,7 +43,9 @@ export const StyledLabel = styled(InputLabel)`
 `;
 
 export const StyledGroup = styled.div`
-  margin-bottom: 20px;
+  & + & {
+    margin-top: 20px;
+  }
 
   .error-message {
     font-size: 14px;