Merge branch 'develop'

PICK-PLE · Jul 19, 2024 · fe1d962 · fe1d962
2 parents fa32832 + ae0b4cf
commit fe1d962
Show file tree

Hide file tree

Showing 26 changed files with 152 additions and 93 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
     <meta
       property="og:description"
       content="내가 PICK!한 사람과 함께 하는 클래스 모임을 통해 원하는 가치를 나누어 보세요." />
-    <meta property="og:image" content="/public/image/thumbnail/pick_ple_thumbnail.png" />
+    <meta property="og:image" content="/image/thumbnail/pick_ple_thumbnail.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
 

diff --git a/src/apis/domains/moim/useFetchHostMoimInfo.ts b/src/apis/domains/moim/useFetchHostMoimInfo.ts
@@ -4,7 +4,7 @@ import { components } from '@schema';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { ApiResponseType } from '@types';
 
-type MoimListByHostGetResponse = components['schemas']['MoimListByHostGetResponse']
+type MoimListByHostGetResponse = components['schemas']['MoimListByHostGetResponse'];
 
 const getHostMoimInfo = async (
   hostId: number,

diff --git a/src/apis/domains/moimSubmission/usePatchSubmitter.ts b/src/apis/domains/moimSubmission/usePatchSubmitter.ts
@@ -1,6 +1,10 @@
 import { patch } from '@apis/api';
 import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
-import { QueryClient, useMutation } from '@tanstack/react-query';
+import { userAtom } from '@stores';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { smoothScroll } from '@utils';
+import { useAtom } from 'jotai';
+import { useNavigate } from 'react-router-dom';
 
 export interface PatchSubmitterRequest {
   moimId: number;
@@ -17,13 +21,23 @@ const patchSubmitter = async ({ moimId, submitterIdList }: PatchSubmitterRequest
   }
 };
 
-export const usePatchSubmitter = () => {
-  const queryClient = new QueryClient();
+export const usePatchSubmitter = (isOngoing: boolean, onClose: () => void) => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const [user] = useAtom(userAtom);
+
+  console.log(QUERY_KEY.HOST_MOIM_INFO, user.hostId, isOngoing ? 'ongoing' : 'completed');
+
   return useMutation({
     mutationFn: ({ moimId, submitterIdList }: PatchSubmitterRequest) =>
       patchSubmitter({ moimId, submitterIdList }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MOIM_SUBMITTER] });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.HOST_MOIM_INFO, user.hostId, isOngoing ? 'ongoing' : 'completed'],
+      });
+      onClose();
+      smoothScroll(0);
+      navigate('/host/myclass'); // 다시 모임 관리하는 host 페이지로 이동
     },
   });
 };
diff --git a/src/components/common/CategorySelectBox/CategorySelectBox.tsx b/src/components/common/CategorySelectBox/CategorySelectBox.tsx
@@ -1,7 +1,6 @@
 import { CATEGORY_ICON } from '@constants';
 import { imgStyle, labelStyle, liStyle, ulStyle } from './CategorySelectBox.style';
 
-
 const categoryIcons = [
   {
     name: 'njob',
@@ -35,13 +34,13 @@ const categoryIcons = [
   },
   {
     name: 'lifestyle',
-    title: '건강',
+    title: '라이프',
     stroke: CATEGORY_ICON.lifestyle.stroke,
     stroke_selected: CATEGORY_ICON.lifestyle.stroke_selected,
   },
   {
     name: 'health',
-    title: '라이프',
+    title: '건강',
     stroke: CATEGORY_ICON.health.stroke,
     stroke_selected: CATEGORY_ICON.health.stroke_selected,
   },
@@ -72,7 +71,7 @@ interface Category {
 }
 
 interface CategorySelectBoxProps {
-  selectedCategories: Category
+  selectedCategories: Category;
   onUpdateCategories: (newCategories: Category) => void;
 }
 

diff --git a/src/components/common/Label/Label.style.ts b/src/components/common/Label/Label.style.ts
@@ -6,7 +6,7 @@ export const labelStyle = css`
   ${flexGenerator()};
   gap: 0.4rem;
 
-  padding: 0 1rem;
+  padding: 0.8rem 0.6rem;
 
   border-radius: 5px;
 `;

diff --git a/src/components/common/QuestionText/QuestionText.style.ts b/src/components/common/QuestionText/QuestionText.style.ts
@@ -13,6 +13,8 @@ export const questionStyle = (theme: Theme) => css`
 export const textStyle = (theme: Theme) => css`
   color: ${theme.color.blackgray};
   ${theme.font['head04-b-16']}
+
+  word-break: break-word;
 `;
 
 export const preventDragStyle = css`

diff --git a/src/components/common/TextArea/TextArea.style.ts b/src/components/common/TextArea/TextArea.style.ts
@@ -12,7 +12,7 @@ export const textAreaWrapperStyle = (isError: boolean, isFocused: boolean) => (t
     ${flexGenerator('column', 'space-between', 'flex-end')}
     width: 100%;
     min-width: 33.5rem;
-    padding: 1.2rem 1.6rem 1rem 1rem;
+    padding: 1.2rem 1.3rem 1rem 1rem;
 
     border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1};
     border-radius: 10px;

diff --git a/src/components/common/TimeSelect/TimeSelect.style.ts b/src/components/common/TimeSelect/TimeSelect.style.ts
@@ -15,18 +15,19 @@ export const timeSelectWrapper = (theme: Theme) => css`
   border-radius: 10px;
 `;
 
-export const selectStyle = (hasValue: boolean) => (theme: Theme) => css`
-  width: 13rem;
-  border: none;
-  border-radius: 4px;
-  color: ${hasValue ? theme.color.blackgray : theme.color.midgray1};
-  ${theme.font['body01-r-15']};
+export const selectStyle = (hasValue: boolean) => (theme: Theme) =>
+  css`
+    width: 13rem;
+    border: none;
+    border-radius: 4px;
+    color: ${hasValue ? theme.color.blackgray : theme.color.midgray1};
+    ${theme.font['body01-r-15']};
 
-  cursor: pointer;
+    cursor: pointer;
 
-  appearance: none;
-  -webkit-appearance: none;
-`;
+    appearance: none;
+    -webkit-appearance: none;
+  `;
 
 export const textStyle = (theme: Theme) => css`
   color: ${theme.color.midgray1};
@@ -46,3 +47,13 @@ export const iconStyle = css`
 export const labelWrapper = css`
   position: relative;
 `;
+
+export const svgStyle = (hasValue: boolean) => (theme: Theme) =>
+  css`
+    path {
+      fill: ${hasValue ? theme.color.blackgray : theme.color.midgray1};
+    }
+
+    width: 2.4rem;
+    height: 2.4rem;
+  `;
diff --git a/src/components/common/TimeSelect/TimeSelect.tsx b/src/components/common/TimeSelect/TimeSelect.tsx
@@ -6,6 +6,7 @@ import {
   timeSelectContainer,
   iconStyle,
   labelWrapper,
+  svgStyle,
 } from './TimeSelect.style';
 import { IcDropdownPlatformDown } from '@svg';
 
@@ -60,7 +61,7 @@ const TimeSelect = ({
           </label>
           <label htmlFor="start-time" onClick={() => focusSelect(startTimeRef)}>
             <span css={iconStyle} onClick={() => focusSelect(startTimeRef)}>
-              <IcDropdownPlatformDown />
+              <IcDropdownPlatformDown css={svgStyle(Boolean(startTime))} />
             </span>
           </label>
           <select
@@ -83,7 +84,7 @@ const TimeSelect = ({
             종료 시간
           </label>
           <span css={iconStyle} onClick={() => focusSelect(endTimeRef)}>
-            <IcDropdownPlatformDown />
+            <IcDropdownPlatformDown css={svgStyle(Boolean(endTime))} />
           </span>
           <select
             ref={endTimeRef}

diff --git a/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.style.ts b/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.style.ts
@@ -18,8 +18,8 @@ export const InterestCategoryButtonVariant = {
     gap: 0.4rem;
     border-radius: 5px;
     background-color: ${theme.color.purple6};
-    color: ${theme.color.purple2};
-    ${theme.font['body03-r-12']}
+    color: ${theme.color.purple1};
+    ${theme.font['body02-r-14']}
 
     cursor: pointer;
   `,

diff --git a/src/components/common/inputs/Input/Input.style.ts b/src/components/common/inputs/Input/Input.style.ts
@@ -23,6 +23,7 @@ export const inputStyle = (isError: boolean, isFocused: boolean) => (theme: Them
     width: 100%;
     height: 5.2rem;
     padding: 1.5rem;
+    padding-right: 6rem;
     border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1};
     border-radius: 10px;
 

diff --git a/src/pages/categories/components/ClassListCard/ClassListCard.style.ts b/src/pages/categories/components/ClassListCard/ClassListCard.style.ts
@@ -13,7 +13,7 @@ export const classListContainer = (theme: Theme) => css`
 
 export const classListTextContainer = css`
   ${flexGenerator('column', 'flex-start', 'flex-start')}
-  gap: 0.7rem;
+  gap: 0.8rem;
 `;
 
 export const classCardCustomStyle = css`
@@ -22,7 +22,7 @@ export const classCardCustomStyle = css`
 
 export const classListTextWrapper = css`
   ${flexGenerator('column', 'flex-start', 'flex-start')}
-  gap: 0.8rem
+  gap: 0.7rem
 `;
 
 export const titleTextWrapper = (theme: Theme) => css`

diff --git a/src/pages/categories/components/ClassListCard/ClassListCard.tsx b/src/pages/categories/components/ClassListCard/ClassListCard.tsx
@@ -32,12 +32,11 @@ const ClassListCard = ({ classListData }: ClassListCardProps) => {
       />
 
       <div css={classListTextContainer}>
+        <span css={titleTextWrapper}>{title}</span>
         <div css={classListTextWrapper}>
-          <span css={titleTextWrapper}>{title}</span>
           <SimpleUserProfile size="small" userImgUrl={hostImageUrl} username={hostNickName ?? ''} />
+          <span css={timeTextWraaper}>{`${date}. (${dayOfWeek}) ${startTime}~${endTime}`}</span>
         </div>
-
-        <span css={timeTextWraaper}>{`${date}. (${dayOfWeek}) ${startTime}~${endTime}`}</span>
       </div>
     </div>
   );

diff --git a/src/pages/class/components/StepThree/StepThree.tsx b/src/pages/class/components/StepThree/StepThree.tsx
@@ -28,8 +28,8 @@ const StepThree = ({ onNext }: StepProps) => {
   const { validateStepThree } = useClassPostInputValidation();
   const { isTitleValid, isDescriptionValid } = validateStepThree(classPostState);
 
-  const putS3UploadMutation = usePutS3Upload();
-  const { mutateAsync, isPending } = usePostMoim();
+  const { mutateAsync: putS3UploadMutateAsync, isPending: putS3IsPending } = usePutS3Upload();
+  const { mutateAsync: postMutateAsync, isPending: postIsPending } = usePostMoim();
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [isAllValid, setIsAllValid] = useState(false);
@@ -44,11 +44,11 @@ const StepThree = ({ onNext }: StepProps) => {
     if (isAllValid && selectedFiles.length >= 1) {
       const imageUrlList = await handleUpload({
         selectedFiles,
-        putS3Upload: putS3UploadMutation.mutateAsync,
+        putS3Upload: putS3UploadMutateAsync,
         type: 'moim',
       });
 
-      mutateAsync({ ...classPostState, imageList: imageUrlList })
+      postMutateAsync({ ...classPostState, imageList: imageUrlList })
         .then((data) => {
           if (data) {
             setMoimId(data);
@@ -63,7 +63,7 @@ const StepThree = ({ onNext }: StepProps) => {
     }
   };
 
-  if (isPending) {
+  if (putS3IsPending || postIsPending) {
     return <Spinner />;
   }
 

diff --git a/src/pages/class/page/Class/Class.style.ts b/src/pages/class/page/Class/Class.style.ts
@@ -16,6 +16,7 @@ export const classInfo = css`
 `;
 
 export const classNameStyle = (theme: Theme) => css`
+  word-break: break-word;
   margin-top: 1.4rem;
   padding-right: 4.5rem;
   ${theme.font['head01-b-22']};
@@ -35,28 +36,26 @@ export const tabWrapper = (theme: Theme) => css`
 
   background-color: ${theme.color.white};
 
+  border-bottom: 2px solid ${theme.color.lightgray1};
   padding-left: 2.8rem;
   gap: 2.3rem;
 `;
 
-export const tabButtonStyle = (theme: Theme) => css`
-  display: inline-flex;
-  flex-shrink: 0;
-  ${theme.font['subhead01-sb-18']};
-
-  background-color: ${theme.color.white};
-  color: ${theme.color.midgray1};
-  padding: 0;
-  padding-bottom: 1.6rem;
-
-  border: none;
-`;
+export const tabButtonStyle = (isSelected: boolean) => (theme: Theme) =>
+  css`
+    display: inline-flex;
+    flex-shrink: 0;
+    ${theme.font['subhead01-sb-18']};
 
-export const selectedTabStyle = (theme: Theme) => css`
-  color: ${theme.color.blackgray};
+    background-color: ${theme.color.white};
+    color: ${isSelected ? theme.color.blackgray : theme.color.midgray1};
 
-  border-bottom: 2px solid ${theme.color.blackgray};
-`;
+    padding: 0;
+    padding-bottom: 1.6rem;
+    margin-bottom: -2px;
+    border: none;
+    border-bottom: 2px solid ${isSelected ? theme.color.blackgray : theme.color.lightgray1};
+  `;
 
 export const tabSectionStyle = (theme: Theme) => css`
   background-color: ${theme.color.background};

diff --git a/src/pages/class/page/Class/Class.tsx b/src/pages/class/page/Class/Class.tsx
@@ -26,7 +26,6 @@ import {
   classNameStyle,
   floatingButtonWrapper,
   infoSectionStyle,
-  selectedTabStyle,
   tabButtonStyle,
   tabSectionStyle,
   tabWrapper,
@@ -87,7 +86,7 @@ const Class = () => {
 
   const handleShareButtonClick = async () => {
     const shareSuccess = await handleShare(url, shareTitle, text, handleCopyToClipboard);
-    if (!shareSuccess) {
+    if (shareSuccess === false) {
       showToast();
     }
   };
@@ -126,24 +125,24 @@ const Class = () => {
           <HostInfoCard hostId={moimDetail.hostId ?? 0} />
         </section>
         <div css={tabWrapper}>
-          <button
-            css={[tabButtonStyle, selectTab === '모임소개' && selectedTabStyle]}
-            type="button"
-            onClick={() => setSelectTab('모임소개')}>
-            모임 소개
-          </button>
-          <button
-            css={[tabButtonStyle, selectTab === '공지사항' && selectedTabStyle]}
-            type="button"
-            onClick={() => setSelectTab('공지사항')}>
-            공지 사항
-          </button>
-          <button
-            css={[tabButtonStyle, selectTab === '리뷰' && selectedTabStyle]}
-            type="button"
-            onClick={() => setSelectTab('리뷰')}>
-            리뷰
-          </button>
+            <button
+              css={tabButtonStyle(selectTab === '모임소개')}
+              type="button"
+              onClick={() => setSelectTab('모임소개')}>
+              모임 소개
+            </button>
+            <button
+              css={tabButtonStyle(selectTab === '공지사항')}
+              type="button"
+              onClick={() => setSelectTab('공지사항')}>
+              공지 사항
+            </button>
+            <button
+              css={tabButtonStyle(selectTab === '리뷰')}
+              type="button"
+              onClick={() => setSelectTab('리뷰')}>
+              리뷰
+            </button>
         </div>
         <section css={[tabSectionStyle, selectTab === '모임소개' && infoSectionStyle]}>
           {selectTab === '모임소개' && <ClassInfo content={moimDescription ?? ''} />}