Merge branch 'develop' into feature/studyInviteFriend

components/atoms/TimeSelectorUnit.tsx

@@ -20,13 +20,13 @@ function TimeSelectorUnit({ time, setTime, timeArr, disabled }: ITimeSelectorUni
     const minutes = Number(value.slice(3));
     setTime({ hours, minutes });
   };
+
 
   return (
     <Layout>
       <Select
         name="hour"
         value={`${hourStr}:${minuteStr}`}
-        // placeholder="시간"
         onChange={onChangeTime}
         disabled={disabled}
       >

components/molecules/ImageUploadInput.tsx

@@ -1,6 +1,7 @@
 import { Input } from "@chakra-ui/react";
 import { faCameraViewfinder } from "@fortawesome/pro-light-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { captureException } from "@sentry/nextjs";
 import Image from "next/image";
 import { useRef, useState } from "react";
 import styled from "styled-components";
@@ -45,6 +46,7 @@ export default function ImageUploadInput({ setImageUrl: changeImage }: IImageUpl
             setImageUrl(image);
             changeImage(file);
           } else {
+            captureException(error);
             console.error("Error converting HEIC to JPEG", error);
           }
         }

components/molecules/cards/ProfileCommentCard.tsx

@@ -1,3 +1,6 @@
+import { Flex } from "@chakra-ui/react";
+import { faPenToSquare } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styled from "styled-components";
 
 import { IUserSummary } from "../../../types/models/userTypes/userInfoTypes";
@@ -8,9 +11,15 @@ export interface IProfileCommentCard {
   user: IUserSummary;
   comment?: string;
   rightComponent?: React.ReactNode;
+  setMemo?: () => void;
 }
 
-export default function ProfileCommentCard({ user, comment, rightComponent }: IProfileCommentCard) {
+export default function ProfileCommentCard({
+  user,
+  comment,
+  rightComponent,
+  setMemo,
+}: IProfileCommentCard) {
   return (
     <CardContainer>
       <Avatar image={user.profileImage} size="md" avatar={user.avatar} uid={user.uid} />
@@ -19,13 +28,27 @@ export default function ProfileCommentCard({ user, comment, rightComponent }: IP
           <span>{user.name}</span>
           <UserBadge score={user.score} uid={user.uid} />
         </UserNameBadgeContainer>
-        <CommentText>{comment !== null ? comment : user.comment}</CommentText>
+        <Flex alignItems="center">
+          <CommentText>{comment !== null ? comment : user.comment}</CommentText>
+          {setMemo && (
+            <Button onClick={setMemo}>
+              <FontAwesomeIcon icon={faPenToSquare} size="sm" />
+            </Button>
+          )}
+        </Flex>
       </UserInfoContainer>
       <RightComponentContainer>{rightComponent}</RightComponentContainer>
     </CardContainer>
   );
 }
 
+const Button = styled.button`
+  display: inline-block;
+  margin-left: 4px;
+  padding: 0 4px;
+  color: var(--gray-3);
+`;
+
 const CardContainer = styled.div`
   display: flex;
   align-items: center;

components/organisms/ProfileCardColumn.tsx

@@ -12,6 +12,7 @@ export default function ProfileCardColumn({ userCardArr }: IProfileCardColumn) {
           key={idx}
           user={userCard.user}
           comment={userCard?.comment}
+          setMemo={userCard?.setMemo}
           rightComponent={userCard?.rightComponent}
         />
       ))}

components/organisms/location/LocationSearch.tsx

@@ -6,7 +6,7 @@ import { KeyboardEvent, useState } from "react";
 import styled from "styled-components";
 
 import { DispatchType } from "../../../types/hooks/reactTypes";
-import { IGatherLocation } from "../../../types/models/gatherTypes/gather";
+import { IGatherLocation } from "../../../types/models/gatherTypes/gatherTypes";
 
 interface ISearchLocation {
   location?: string;

constants/styles.ts

@@ -1,4 +1,4 @@
-import { GatherStatus } from "../types/models/gatherTypes/gather";
+import { GatherStatus } from "../types/models/gatherTypes/gatherTypes";
 
 export const TABLE_COLORS = [
   "#FF8896",

constants/util/convert.ts

@@ -1,4 +1,4 @@
-import { GatherStatus } from "../../types/models/gatherTypes/gather";
+import { GatherStatus } from "../../types/models/gatherTypes/gatherTypes";
 
 export const STATUS_TO_TEXT: Record<GatherStatus, string> = {
   open: "오픈",

hooks/gather/mutations.ts

@@ -3,7 +3,7 @@ import { useMutation } from "react-query";
 
 import { requestServer } from "../../libs/methodHelpers";
 import { MutationOptions } from "../../types/hooks/reactTypes";
-import { IGather, IGatherWriting } from "../../types/models/gatherTypes/gather";
+import { IGather, IGatherWriting } from "../../types/models/gatherTypes/gatherTypes";
 
 type GatherWritingParam<T> = T extends "post"
   ? { gather: IGatherWriting }

hooks/groupStudy/queries.ts

@@ -5,7 +5,7 @@ import { GATHER_CONTENT, GROUP_STUDY, GROUP_STUDY_ALL } from "../../constants/ke
 import { SERVER_URI } from "../../constants/system";
 import { IGatherSummary } from "../../pages/review";
 import { QueryOptions } from "../../types/hooks/reactTypes";
-import { IGather } from "../../types/models/gatherTypes/gather";
+import { IGather } from "../../types/models/gatherTypes/gatherTypes";
 import { IGroup, IGroupAttendance } from "../../types/models/groupTypes/group";
 
 export const useGroupQuery = (options?: QueryOptions<IGroup[]>) =>

hooks/study/mutations.ts

@@ -67,12 +67,12 @@ export const useStudyOpenFreeMutation = (date: string, options?: MutationOptions
     options,
   );
 
-export const useStudyAttendCheckMutation = (date: Dayjs, options?: MutationOptions<string>) =>
+export const useStudyAttendCheckMutation = (date: string, options?: MutationOptions<string>) =>
   useMutation<void, AxiosError, string>(
     (memo) =>
       requestServer<{ memo: string }>({
         method: "patch",
-        url: `vote/${dayjsToStr(date)}/arrived`,
+        url: `vote/${date}/arrived`,
         body: { memo },
       }),
     options,

hooks/user/queries.ts

@@ -57,7 +57,7 @@ export const usePointSystemLogQuery = (
     [USER_POINT_SYSTEM, category, isUserScope, "log"],
     async () => {
       const scopeQuery = isUserScope ? "" : "all";
-      console.log(5, category, scopeQuery);
+
       const res = await axios.get<IPointLog[]>(`${SERVER_URI}/log/${category}/${scopeQuery}`);
       return res.data;
     },

libs/study/date/getStudyDateStatus.ts

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 
 import { STUDY_RESULT_HOUR } from "../../../constants/serviceConstants/studyConstants/studyTimeConstant";
-import { getHour, getToday } from "../../../utils/dateTimeUtils";
+import { dayjsToStr, getHour, getToday } from "../../../utils/dateTimeUtils";
 
 /**
  * today는 결과 발표난 이후부터 시간, 오늘의 스터디
@@ -16,6 +16,12 @@ export const getStudyDateStatus = (date: string) => {
     (currentDate.isSame(selectedDate) && currentHours < STUDY_RESULT_HOUR);
 
   if (isTodayCondition) return "today";
-  if (selectedDate.isBefore(currentDate)) return "passed";
+  if (
+    (dayjsToStr(selectedDate) === dayjsToStr(currentDate) && currentHours >= STUDY_RESULT_HOUR) ||
+    selectedDate.isBefore(currentDate)
+  ) {
+    return "passed";
+  }
+
   return "not passed";
 };

modals/Modals.tsx

@@ -24,6 +24,7 @@ export interface IFooterOptions {
     text?: string;
     func?: () => void;
     isRedTheme?: boolean;
+    isLoading?: boolean;
   };
   sub?: {
     text?: string;
@@ -125,6 +126,7 @@ export function ModalLayout({
                   colorScheme={main?.isRedTheme ? "redTheme" : "mintTheme"}
                   w="100%"
                   onClick={func}
+                  isLoading={main?.isLoading}
                 >
                   {text}
                 </Button>

modals/gather/GatherKakaoShareModal.tsx

@@ -12,10 +12,14 @@ import KakaoShareBtn from "../../components/atoms/Icons/KakaoShareBtn";
 import { WEB_URL } from "../../constants/system";
 import { ModalSubtitle } from "../../styles/layout/modal";
 import { IModal } from "../../types/components/modalTypes";
-import { IGatherHeader } from "../../types/models/gatherTypes/gather";
+
 import { ModalLayout } from "../Modals";
 
-interface IGatherKakaoShareModal extends IModal, IGatherHeader {}
+interface IGatherKakaoShareModal extends IModal {
+  title: string;
+  date: string;
+  locationMain: string;
+}
 
 function GatherKakaoShareModal({ title, date, locationMain, setIsModal }: IGatherKakaoShareModal) {
   const router = useRouter();

modals/gather/GatherWritingConfirmModal.tsx

@@ -16,7 +16,7 @@ import { isGatherEditState } from "../../recoils/checkAtoms";
 import { sharedGatherWritingState } from "../../recoils/sharedDataAtoms";
 import { ModalSubtitle } from "../../styles/layout/modal";
 import { IModal } from "../../types/components/modalTypes";
-import { IGather, IGatherWriting } from "../../types/models/gatherTypes/gather";
+import { IGather, IGatherWriting } from "../../types/models/gatherTypes/gatherTypes";
 import { IFooterOptions, ModalLayout } from "../Modals";
 
 interface IGatherWritingConfirmModal extends IModal {

modals/study/StudyAttendCheckModal.tsx

@@ -29,7 +29,6 @@ import { ModalSubtitle } from "../../styles/layout/modal";
 import { IModal } from "../../types/components/modalTypes";
 import { LocationEn } from "../../types/services/locationTypes";
 import { convertLocationLangTo } from "../../utils/convertUtils/convertDatas";
-import { now } from "../../utils/dateTimeUtils";
 import { IFooterOptions, ModalLayout } from "../Modals";
 
 const LOCATE_GAP = 0.00008;
@@ -69,7 +68,7 @@ function StudyAttendCheckModal({ setIsModal }: IStudyAttendCheckModal) {
   const { mutate: getAlphabet } = useAlphabetMutation("get");
   const { mutate: getDeposit } = usePointSystemMutation("deposit");
 
-  const { mutate: handleArrived } = useStudyAttendCheckMutation(now().startOf("day"), {
+  const { mutate: handleArrived } = useStudyAttendCheckMutation(date, {
     onSuccess() {
       queryClient.invalidateQueries([STUDY_VOTE, date, location]);
       const alphabet = getRandomAlphabet(20);

modals/study/StudyChangeMemoModal.tsx

@@ -0,0 +1,43 @@
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { useQueryClient } from "react-query";
+
+import Textarea from "../../components/atoms/Textarea";
+import { STUDY_VOTE } from "../../constants/keys/queryKeys";
+import { PLACE_TO_LOCATION } from "../../constants/serviceConstants/studyConstants/studyLocationConstants";
+import { useStudyAttendCheckMutation } from "../../hooks/study/mutations";
+import { IModal } from "../../types/components/modalTypes";
+import { IFooterOptions, ModalLayout } from "../Modals";
+
+interface IStudyChangeMemoModal extends IModal {
+  hasModalMemo;
+}
+export default function StudyChangeMemoModal({ hasModalMemo, setIsModal }: IStudyChangeMemoModal) {
+  const { id, date } = useParams<{ id: string; date: string }>() || {};
+  const location = PLACE_TO_LOCATION[id];
+
+  const [value, setValue] = useState(hasModalMemo);
+
+  const queryClient = useQueryClient();
+
+  const { mutate: changeStudyMemo, isLoading } = useStudyAttendCheckMutation(date, {
+    onSuccess() {
+      queryClient.invalidateQueries([STUDY_VOTE, date, location]);
+      setIsModal(true);
+    },
+  });
+
+  const footerOptions: IFooterOptions = {
+    main: {
+      text: "변경",
+      func: () => changeStudyMemo(value),
+      isLoading,
+    },
+  };
+
+  return (
+    <ModalLayout title="출석 메모 변경" footerOptions={footerOptions} setIsModal={setIsModal}>
+      <Textarea value={value} onChange={(e) => setValue(e.target.value)} />
+    </ModalLayout>
+  );
+}

modals/study/StudyFreeOpenModal.tsx

@@ -35,17 +35,17 @@ function StudyFreeOpenModal({ setIsModal }: IStudyFreeOpenModal) {
     end: { hours: 18, minutes: 0 },
   });
 
-  const { mutateAsync: openFree } = useStudyOpenFreeMutation(date, {
+  const { mutateAsync: openFree, isLoading } = useStudyOpenFreeMutation(date, {
     onSuccess() {
       queryClient.invalidateQueries([STUDY_VOTE, date, location]);
       completeToast("free", "스터디가 Free로 오픈되었습니다.");
+      setIsModal(false);
     },
     onError: errorToast,
   });
   const { mutate: patchAttend } = useStudyParticipationMutation(dayjs(date), "post", {
     onSuccess: () => {
       queryClient.invalidateQueries([STUDY_VOTE, date, location]);
-      setIsModal(false);
     },
     onError: errorToast,
   });
@@ -73,6 +73,7 @@ function StudyFreeOpenModal({ setIsModal }: IStudyFreeOpenModal) {
     main: {
       text: "오픈",
       func: onSubmit,
+      isLoading,
     },
   };
 

modals/study/StudyInviteModal.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@chakra-ui/react";
-import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 
@@ -49,7 +49,7 @@ function StudyInviteModal({ setIsModal, place }: IStudyInviteModal) {
           },
         },
         address: location,
-        // addressTitle: "카카오 본사",
+
         buttons: [
           {
             title: "웹으로 이동",

pageTemplates/gather/detail/GatherContent.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { IGatherListItem } from "../../../types/models/gatherTypes/gather";
+import { IGatherListItem } from "../../../types/models/gatherTypes/gatherTypes";
 
 interface IGather {
   content: string;

pageTemplates/gather/detail/GatherDetail.tsx

@@ -31,7 +31,7 @@ function GatherDetailInfo({
       {isSubLocation && <LocationSub>{location.sub}</LocationSub>}
       <Item>
         <ItemText>날짜</ItemText>
-        <span>{date === "미정" ? date : dayjsToFormat(dayjs(date), "M.D(ddd) 오후 h:mm")}</span>
+        <span>{date === "미정" ? date : dayjsToFormat(dayjs(date), "M.D(ddd) hh:mm")}</span>
       </Item>
       <Item>
         <ItemText>나이</ItemText>

pageTemplates/gather/detail/GatherTitle.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 import { Badge } from "../../../components/atoms/badges/Badges";
 import { STATUS_TO_TEXT } from "../../../constants/util/convert";
-import { GatherStatus } from "../../../types/models/gatherTypes/gather";
+import { GatherStatus } from "../../../types/models/gatherTypes/gatherTypes";
 
 interface IGatherTitle {
   title: string;

pageTemplates/gather/writing/GatherWritingDateDate.tsx

@@ -10,7 +10,7 @@ import {
   PickerDateAndTimeHeader,
 } from "../../../components/molecules/picker/DatePickerOptions";
 import { DispatchType } from "../../../types/hooks/reactTypes";
-import { IGatherWriting } from "../../../types/models/gatherTypes/gather";
+import { IGatherWriting } from "../../../types/models/gatherTypes/gatherTypes";
 import { dayjsToFormat } from "../../../utils/dateTimeUtils";
 
 const TIME_RANGE_MIN = new Date();