Merge branch 'develop' into feat/#973

.github/workflows/deploy-development.yml

@@ -34,7 +34,7 @@ jobs:
           echo "NEXT_PUBLIC_APP_ENV=development" >> .env
       - name: Build
         run: yarn build:ci
-      - name: Move artifacts into dist folder
+      - name: Move artifacts into dist folder4
         run: mkdir group && mv out/* group/ && mv group out
       - name: Publish
         run: yarn run wrangler pages publish "out" --project-name "${{ secrets.CLOUDFLARE_PAGES_PROJECT_NAME }}" --commit-message "${{ github.sha }}" --branch=main

pages/list/index.tsx

@@ -49,6 +49,7 @@ const Home: NextPage = () => {
   return (
     <>
       <div>
+        {/*크루 탭 - 홈, 전체 모임, 내모임, 모임 개설하기 */}
         <CrewTab>
           <SMobileButtonContainer>
             <WriteIcon onClick={handleMakeMeeting} className="make-button" />
@@ -59,12 +60,18 @@ const Home: NextPage = () => {
             <span>모임 개설하기</span>
           </SMakeMeetingButton>
         </CrewTab>
+
+        {/*Notice 슬라이더*/}
         <SNoticeWrapper>
           <NoticeSlider notices={notices} />
         </SNoticeWrapper>
+
+        {/*필터 - 필터, 모임 검색, 모임 신청 가이드, 필터 적용 후 생기는 FLEX 박스(chip 모임)*/}
         <SFilterWrapper>
           <Filter />
         </SFilterWrapper>
+
+        {/*모임 목록들 - MeetingListOfAll : 내부적으로 쿼리 파라미터 이용하여 필터링 적용*/}
         <SSRSafeSuspense
           fallback={
             <GridLayout mobileType="list">
@@ -77,6 +84,7 @@ const Home: NextPage = () => {
           <MeetingListOfAll />
         </SSRSafeSuspense>
       </div>
+
       <ConfirmModal
         isModalOpened={isModalOpened}
         message={`모임을 개설하려면\n프로필 작성이 필요해요`}

pages/mine/management/index.tsx

@@ -11,7 +11,7 @@ import { Option } from '@components/form/Select/OptionItem';
 import ItemDescriptionBox from '@components/page/mine/management/ItemDescriptionBox';
 import Pagination from '@components/page/list/Pagination';
 import { usePageParams, useSortByDateParams, useStatusParams, useTakeParams } from '@hooks/queryString/custom';
-import { numberOptionList, sortOptionList } from '@data/options';
+import { numberOptionListDefault, numberOptionList, sortOptionList, sortOptionListDefault } from '@data/options';
 import { useMutationDownloadMeetingMemberCSV, useQueryGetMeeting } from '@api/API_LEGACY/meeting/hooks';
 import Filter from '@components/page/mine/management/Filter';
 import DownloadIcon from '@assets/svg/download.svg';
@@ -31,13 +31,18 @@ const ManagementPage = () => {
   });
   const isHost = meetingData?.host ?? false;
   const { mutate: downloadCSVMutate, isLoading: isDownloadCSVLoading } = useMutationDownloadMeetingMemberCSV();
+
+  const convertedNumberTake = numberOptionList[Number(take)] ?? numberOptionListDefault;
+
+  const convertedSortTake = sortOptionList[Number(sortByDate)] ?? sortOptionListDefault;
+
   const { isLoading: isManagementDataLoading, data: management } = useQueryGetMeetingPeopleList({
     params: {
       id,
       page: (page || 0) as number,
-      take: Number(numberOptionList[Number(take) || 0].value),
+      take: Number(convertedNumberTake.value),
       status,
-      date: sortOptionList[Number(sortByDate) || 0].value as string,
+      date: sortOptionList[Number(sortByDate) || 0]?.value as string,
     },
   });
 
@@ -82,7 +87,7 @@ const ManagementPage = () => {
         ) : (
           <SSelectNumberWrapper>
             <Select
-              value={numberOptionList[Number(take) || 0]}
+              value={convertedNumberTake}
               options={numberOptionList}
               onChange={handleChangeSelectOption(setTake, numberOptionList)}
             />
@@ -96,14 +101,14 @@ const ManagementPage = () => {
             <div>
               <SSelectNumberWrapper>
                 <Select
-                  value={numberOptionList[Number(take) || 0]}
+                  value={convertedNumberTake}
                   options={numberOptionList}
                   onChange={handleChangeSelectOption(setTake, numberOptionList)}
                 />
               </SSelectNumberWrapper>
               <SSelectWrapper>
                 <Select
-                  value={sortOptionList[Number(sortByDate) || 0]}
+                  value={convertedSortTake}
                   options={sortOptionList}
                   onChange={handleChangeSelectOption(setSort, sortOptionList)}
                 />

pages/post/index.tsx

@@ -75,7 +75,12 @@ export default function PostPage() {
   };
 
   const { setTarget } = useIntersectionObserver({
-    onIntersect: ([{ isIntersecting }]) => isIntersecting,
+    onIntersect: entries => {
+      const entry = entries[0];
+      if (entry?.isIntersecting) {
+        return entry?.isIntersecting;
+      }
+    },
   });
 
   const handleCreateComment = async (req: PostCommentWithMentionRequest) => {

src/api/API_LEGACY/meeting/hooks.ts

@@ -60,6 +60,7 @@ interface UseMutateBody<T> {
 }
 
 export const useQueryMeetingListOfAll = () => {
+  //쿼리 파라미터값들을 읽어서, 서버에 모임 리스트 받아오는데 사용
   const { value: category } = useCategoryParams();
   const { value: status } = useStatusParams();
   const { value: search } = useSearchParams();

src/components/feed/FeedPostViewer/FeedPostViewer.tsx

@@ -119,7 +119,7 @@ export default function FeedPostViewer({
         </ContentBody>
         <Link href={`/detail?id=${post.meeting.id}`} passHref legacyBehavior>
           <GroupButton>
-            <GroupThumbnail src={post.meeting.imageURL[0].url} alt="" />
+            <GroupThumbnail src={post.meeting.imageURL[0]?.url} alt="" />
             <GroupInformation>
               <div>
                 <GroupCategory isStudy={post.meeting.category === CATEGORY_OPTIONS[0]}>

src/components/feed/Modal/FeedCreateModal.tsx

@@ -127,7 +127,7 @@ function FeedCreateModal({ isModalOpened, meetingId, handleModalClose }: CreateM
             userId={Number(me?.orgId)}
             groupInfo={{
               title: detailData?.title || '',
-              imageUrl: detailData?.imageURL[THUMBNAIL_IMAGE_INDEX].url || '',
+              imageUrl: detailData?.imageURL[THUMBNAIL_IMAGE_INDEX]?.url || '',
               category: detailData?.category || '',
             }}
             title="피드 작성"

src/components/feed/Modal/FeedCreateWithSelectMeetingModal.tsx

@@ -47,7 +47,7 @@ function FeedCreateWithSelectMeetingModal({ isModalOpened, handleModalClose }: C
 
   const { isValid } = formMethods.formState;
   const meetingType = formMethods.getValues('meetingId')
-    ? attendMeetingList?.data.filter(item => item.id == formMethods.getValues('meetingId'))[0].category
+    ? attendMeetingList?.data.filter(item => item.id == formMethods.getValues('meetingId'))[0]?.category
     : '';
 
   const hostname = typeof window !== 'undefined' ? window.location.hostname : '';

src/components/feed/Modal/FeedEditModal.tsx

@@ -79,7 +79,7 @@ function FeedEditModal({ isModalOpened, postId, handleModalClose }: EditModal) {
             userId={Number(me?.orgId)}
             groupInfo={{
               title: postData?.meeting?.title || '',
-              imageUrl: postData?.meeting?.imageURL[THUMBNAIL_IMAGE_INDEX].url || '',
+              imageUrl: postData?.meeting?.imageURL[THUMBNAIL_IMAGE_INDEX]?.url || '',
               category: postData?.meeting?.category || '',
             }}
             title="피드 수정"

src/components/feed/Modal/FeedFormPresentation.tsx

@@ -127,7 +127,7 @@ function FeedFormPresentation({
 
   const uploadFile = async (file: File) => {
     const extension = file.type.split('/')[1];
-    const { url, fields } = await getPresignedUrl(extension);
+    const { url, fields } = await getPresignedUrl(extension ?? '');
     await uploadImage(file, url, fields);
     const imageUrls = imageS3Bucket + fields.key;
     return imageUrls;

src/components/form/Calendar/index.tsx

@@ -24,7 +24,7 @@ const CalendarInputForm = ({ selectedDate, setSelectedDate, error }: Props) => {
           value={selectedDate ? dayjs(selectedDate, 'YYYY-MM-DD').toDate() : null}
           onClickDay={date => setSelectedDate(dayjs(date).format('YYYY.MM.DD'))}
           formatDay={(locale, date) => dayjs(date).format('D')}
-          formatShortWeekday={(locale, date) => ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][date.getDay()]}
+          formatShortWeekday={(locale, date) => ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][date.getDay()] ?? ''}
           showNeighboringMonth={false}
           next2Label={null}
           prev2Label={null}

src/components/form/Presentation/JoinablePartsField/index.tsx

@@ -1,5 +1,5 @@
 import { Option } from '@components/form/Select/OptionItem';
-import { parts } from '@data/options';
+import { defaultParts, parts } from '@data/options';
 import { Chip } from '@sopt-makers/ui';
 
 interface JoinablePartsFieldProps {
@@ -33,7 +33,7 @@ const JoinablePartsField = ({ value, onChange }: JoinablePartsFieldProps) => {
 
       // 모든 개별 파트가 선택되었으면 'all' 옵션도 활성화
       if (updatedParts.length === parts.length - 1) {
-        updatedParts.push(parts[0]); // 'all'을 활성화
+        updatedParts.push(parts[0] ?? defaultParts); // 'all'을 활성화
       }
     }
 

src/components/form/Presentation/index.tsx

@@ -23,8 +23,8 @@ import CheckSelectedIcon from '@assets/svg/checkBox/form_selected.svg';
 import CheckUnselectedIcon from '@assets/svg/checkBox/form_unselected.svg';
 import { IconAlertCircle } from '@sopt-makers/icons';
 import { useDialog } from '@sopt-makers/ui';
-import sopt_schedule_tooltip from 'public/assets/images/sopt_schedule_tooltip.png';
-import BubblePointIcon from 'public/assets/svg/bubble_point.svg';
+import sopt_schedule_tooltip from '@assets/images/sopt_schedule_tooltip.png';
+import BubblePointIcon from '@assets/svg/bubble_point.svg';
 import JoinablePartsField from '@components/form/Presentation/JoinablePartsField';
 import CoLeader from './CoLeader';
 
@@ -115,7 +115,7 @@ function Presentation({
       return;
     }
     const [file] = [...e.target.files];
-    const url = await uploadFile(file);
+    const url = await uploadFile(file ?? new File([], 'default.txt'));
     handleChangeImage(index, url);
   };
 
@@ -146,7 +146,7 @@ function Presentation({
 
   const uploadFile = async (file: File) => {
     const extension = file.type.split('/')[1];
-    const { url, fields } = await getPresignedUrl(extension);
+    const { url, fields } = await getPresignedUrl(extension ?? '');
     await uploadImage(file, url, fields);
     const imageUrls = imageS3Bucket + fields.key;
     return imageUrls;

src/components/form/SearchMention/index.tsx

@@ -17,6 +17,17 @@ interface mentionableDataType {
   profileImageUrl: string;
 }
 
+const defaultMentionableDataType = {
+  id: 0,
+  display: '',
+  orgId: 0,
+  userId: 0,
+  userName: '',
+  recentPart: '',
+  recentGeneration: 0,
+  profileImageUrl: '',
+};
+
 interface SearchMentionProps {
   mentionUserList: mentionableDataType[];
   inputRef: React.RefObject<HTMLTextAreaElement>;
@@ -59,7 +70,7 @@ const SearchMention = ({
 
       if (suggestions.length > 0) {
         // select the first suggestion
-        handleUserClick(suggestions[0]);
+        handleUserClick(suggestions[0] ?? defaultMentionableDataType);
         e.preventDefault();
       }
     }

src/components/form/Select/BaseSelect/BaseSelect.tsx

@@ -1,7 +1,7 @@
 import { Listbox } from '@headlessui/react';
 import Label from '@components/form/Label';
 import Button from '../Button';
-import OptionItem, { Option } from '../OptionItem';
+import OptionItem, { defaultOption, Option } from '../OptionItem';
 import ErrorMessage from '../../ErrorMessage';
 import { styled } from 'stitches.config';
 import { MultipleSelectProps, SelectProps } from '../types/props';
@@ -18,7 +18,7 @@ export default function BaseSelect(props: SelectProps | MultipleSelectProps) {
       // NOTE: 전체 옵션을 선택한 경우, 전체 옵션을 체크해주어야 한다.
       if (isAllSelect(lastSelectedItem)) return onChange(options);
       // NOTE: 전체 옵션을 선택 해제한 경우, 전체 옵션을 체크 해제해주어야 한다.
-      if (isAllUnselected(value, newValues)) return onChange([value[0]]);
+      if (isAllUnselected(value, newValues)) return onChange([value[0] ?? defaultOption]);
       // NOTE: 전체 선택되어 있는 상황에서 다른 옵션을 체크 해제하는 경우 전체 옵션도 해제해주어야 한다.
       if (newValues.length !== options.length) {
         newValues = newValues.filter(v => v.value !== 'all');
@@ -35,12 +35,12 @@ export default function BaseSelect(props: SelectProps | MultipleSelectProps) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const selectedItems = value?.filter(v => v.value).sort((a, b) => a.order! - b.order!);
       // NOTE: 선택된 옵션이 존재하지 않거나 빈 배열일경우 디폴트 옵션을 라벨로 표기한다.
-      if (!selectedItems?.length) return { text: value?.[0].label, active: false };
+      if (!selectedItems?.length) return { text: value?.[0]?.label, active: false };
       // NOTE: 전체 선택이 포함된경우 '전체' 라고 표기한다.
       if (isAllSelect(selectedItems[0])) return { text: '전체', active: true };
       // NOTE: 전체 선택이 포함되지 않은 경우 선택된 옵션을 표기한다. 이때 개수가 여러개면 '00 외 0' 형식으로 보여준다.
       const suffix = selectedItems.length > 1 ? ` 외 ${selectedItems.length - 1}` : '';
-      return { text: `${selectedItems[0].label}${suffix}`, active: true };
+      return { text: `${selectedItems[0]?.label}${suffix}`, active: true };
     }
     return { text: value?.label, active: Boolean(value?.value) };
   };

src/components/form/Select/BottomSheetSelect/BottomSheetSelect.tsx

@@ -3,7 +3,7 @@ import { Listbox } from '@headlessui/react';
 import useModal from '@hooks/useModal';
 import MobileOptionItem from '../OptionItem/MobileOptionItem';
 import BottomSheetDialog from './BottomSheetDialog';
-import { Option } from '../OptionItem';
+import { defaultOption, Option } from '../OptionItem';
 import { MultipleSelectProps, SelectProps } from '../types/props';
 import { isAllSelect, isAllUnselected } from '../utils';
 
@@ -25,7 +25,7 @@ export default function BottomSheetSelect({
       // NOTE: 전체 옵션을 선택한 경우, 전체 옵션을 체크해주어야 한다.
       if (isAllSelect(lastSelectedItem)) return onChange(options);
       // NOTE: 전체 옵션을 선택 해제한 경우, 전체 옵션을 체크 해제해주어야 한다.
-      if (isAllUnselected(value, newValues)) return onChange([value[0]]);
+      if (isAllUnselected(value, newValues)) return onChange([value[0] ?? defaultOption]);
       // NOTE: 전체 선택되어 있는 상황에서 다른 옵션을 체크 해제하는 경우 전체 옵션도 해제해주어야 한다.
       if (newValues.length !== options.length) {
         newValues = newValues.filter(v => v.value !== 'all');
@@ -42,12 +42,12 @@ export default function BottomSheetSelect({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const selectedItems = value?.filter(v => v.value).sort((a, b) => a.order! - b.order!);
       // NOTE: 선택된 옵션이 존재하지 않거나 빈 배열일경우 디폴트 옵션을 라벨로 표기한다.
-      if (!selectedItems?.length) return { text: value?.[0].label, active: false };
+      if (!selectedItems?.length) return { text: value?.[0]?.label, active: false };
       // NOTE: 전체 선택이 포함된경우 '전체' 라고 표기한다.
       if (isAllSelect(selectedItems[0])) return { text: '전체', active: true };
       // NOTE: 전체 선택이 포함되지 않은 경우 선택된 옵션을 표기한다. 이때 개수가 여러개면 '00 외 0' 형식으로 보여준다.
       const suffix = selectedItems.length > 1 ? ` 외 ${selectedItems.length - 1}` : '';
-      return { text: `${selectedItems[0].label}${suffix}`, active: true };
+      return { text: `${selectedItems[0]?.label}${suffix}`, active: true };
     }
     return { text: value?.label, active: Boolean(value?.value) };
   };

src/components/form/Select/OptionItem/index.tsx

@@ -14,6 +14,11 @@ export interface Option {
   order?: number;
 }
 
+export const defaultOption = {
+  label: '',
+  value: '',
+} as const;
+
 interface OptionItemProps {
   css?: CSSType;
   option: Option;

src/components/groupBrowsing/mobileSizeCard.tsx

@@ -15,7 +15,7 @@ const MobileSizeCard: FC<GroupBrowsingCardItem> = ({ id, title, category, mStart
         <SStatus recruitingStatus={newStatus}>{ACTION_STATUS[newStatus]}</SStatus>
         <SThumbnailImage
           css={{
-            backgroundImage: `url(${imageURL[0].url && getResizedImage(imageURL[0].url, 140)})`,
+            backgroundImage: `url(${getResizedImage(imageURL[0]?.url ?? '', 140)})`,
             backgroundSize: 'cover',
           }}
         />

src/components/modal/FloatingButtonModal.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/router';
 import { keyframes, styled } from 'stitches.config';
 import FeedIcon from '../../../public/assets/svg/floating_button_feed_icon.svg';
 import GroupIcon from '../../../public/assets/svg/floating_button_group_icon.svg';
+import BoltIcon from '@assets/svg/bolt_md.svg';
 import NoJoinedGroupModal from './NoJoinedGroupModal';
 
 const FloatingButtonModal = (props: { isActive: boolean; handleOptionClose: () => void }) => {
@@ -35,6 +36,12 @@ const FloatingButtonModal = (props: { isActive: boolean; handleOptionClose: () =
     router.push('/make');
   };
 
+  const handleBoltCreateButtonClick = () => {
+    //todo: 번쩍 개설을 위한 정보를 넘겨주면서 라우팅하기
+    ampli.clickMakeGroup({ location: router.pathname });
+    router.push('/make');
+  };
+
   const handleFeedCreateButtonClick = () => {
     if (me?.orgId) {
       ampli.clickFeedPosting({ user_id: Number(me?.orgId), location: router.pathname });
@@ -44,6 +51,10 @@ const FloatingButtonModal = (props: { isActive: boolean; handleOptionClose: () =
 
   return (
     <Container isActive={isActive}>
+      <Button onClick={handleBoltCreateButtonClick}>
+        <BoltIcon style={{ marginRight: '4px' }} />
+        번쩍 개설
+      </Button>
       <Button onClick={handleGroupCreateButtonClick}>
         <GroupIcon style={{ marginRight: '4px' }} />
         모임 개설
@@ -70,7 +81,7 @@ const fadeOut = keyframes({
 
 const Container = styled('div', {
   width: '160px',
-  height: '112px',
+  height: 'auto',
   zIndex: '$3',
   position: 'absolute',
   bottom: '76px',
@@ -96,7 +107,7 @@ const Container = styled('div', {
   },
   '@tablet': {
     width: '140px',
-    height: '90px',
+    height: 'auto',
     borderRadius: '18px',
     bottom: '72px',
     padding: '$6 $0 $6 $4',