Merge pull request #141 from Ong-gi-Jong-gi/dev

무럭무럭 0.2.1 배포

src/apis/auth/logout.ts

@@ -18,8 +18,6 @@ export const useLogout = () => {
     mutationFn: () => postLogout(),
     onSettled: () => {
       deleteCookie('authorization');
-      localStorage.removeItem('challengeDate');
-      localStorage.removeItem('challengeStartDate');
       navigate(routes.login, { replace: true });
     },
     onError: (error) => {

src/apis/challenge/getChallengeList.ts

@@ -6,11 +6,7 @@ import { nextDate } from '../../utils/nextDate';
 import { ChallengeListUnitDto } from '../dtos/challengeDtos';
 
 const getChallengeList = async () => {
-  const challengeDate = localStorage.getItem('challengeDate');
-
-  const { data } = await authorizedApi.get(
-    `${API.CHALLENGE.LIST}?challengeDate=${challengeDate ? challengeDate : new Date().getTime()}`,
-  );
+  const { data } = await authorizedApi.get(API.CHALLENGE.LIST);
 
   return {
     challenges: data.data.map(

src/apis/challenge/getTodayChallenge.ts

@@ -6,10 +6,8 @@ import { ChallengeToday } from '../../types/challenge';
 import { ChallengeInfoDto } from '../dtos/challengeDtos';
 
 const getTodayChallenge = async () => {
-  const challengeDate = localStorage.getItem('challengeDate');
-
   const { data } = await authorizedApi.get<responseRoot<ChallengeToday>>(
-    `${API.CHALLENGE.TODAY}?challengeDate=${challengeDate ? challengeDate : new Date().getTime().toString()}`,
+    API.CHALLENGE.TODAY,
   );
 
   if (data.status === '200')

src/apis/challenge/postCreateChallenge.ts

@@ -2,25 +2,18 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { authorizedApi } from '..';
 import API from '../../constants/API';
 
-const postCreateChallenge = async (challengeDate: number) => {
-  const { data } = await authorizedApi.post(API.CHALLENGE.CREATE, {
-    challengeDate,
-  });
+const postCreateChallenge = async () => {
+  const { data } = await authorizedApi.post(API.CHALLENGE.CREATE);
 
   return data;
 };
 
 export const useCreateChallenge = () => {
   const queryClient = useQueryClient();
-  const storageDate = localStorage.getItem('challengeDate');
-
-  const challengeDate = storageDate
-    ? parseInt(storageDate)
-    : new Date().getTime();
 
   return useMutation({
-    mutationKey: [API.CHALLENGE.CREATE, challengeDate],
-    mutationFn: () => postCreateChallenge(challengeDate),
+    mutationKey: [API.CHALLENGE.CREATE],
+    mutationFn: () => postCreateChallenge(),
     onSettled: () => {
       queryClient.invalidateQueries({
         queryKey: [API.CHALLENGE.TODAY],

src/apis/lucky/getLucky.ts

@@ -3,11 +3,9 @@ import { authorizedApi } from '..';
 import API from '../../constants/API';
 import { LuckyDto } from '../dtos/luckyDtos';
 
-const getLucky = async (challengeDate: string) => {
+const getLucky = async () => {
   try {
-    const { data } = await authorizedApi.get(
-      `${API.LUCKY.STATUS}?challengeDate=${challengeDate}`,
-    );
+    const { data } = await authorizedApi.get(API.LUCKY.STATUS);
 
     if (data.data === null)
       return { luckyStatus: 0, isBubble: false } as LuckyDto;
@@ -22,13 +20,8 @@ const getLucky = async (challengeDate: string) => {
 };
 
 export const useGetLucky = () => {
-  const storageDate = localStorage.getItem('challengeDate');
-  const challengeDate = storageDate
-    ? storageDate
-    : new Date().getTime().toString();
-
   return useSuspenseQuery({
     queryKey: [API.LUCKY.STATUS],
-    queryFn: () => getLucky(challengeDate),
+    queryFn: () => getLucky(),
   });
 };

src/apis/lucky/postLuckyBubble.ts

@@ -3,13 +3,7 @@ import { authorizedApi } from '..';
 import API from '../../constants/API';
 
 const postLuckyBubble = async () => {
-  const challengeDate = localStorage.getItem('challengeDate');
-
-  const { data } = await authorizedApi.post(`${API.LUCKY.BUBBLE}`, {
-    challengeDate: challengeDate
-      ? challengeDate
-      : new Date().getTime().toString(),
-  });
+  const { data } = await authorizedApi.post(API.LUCKY.BUBBLE);
 
   return data;
 };

src/components/challengelist/ChallengeListUnit.tsx

@@ -35,7 +35,7 @@ const ChallengeListUnit = ({
   return (
     <div className={listUnitClassName} onClick={handleUnitClick}>
       <div className="flex items-center gap-4">
-        <p className="text-ryurue-sm text-secondary-20">{`#${parseInt(challengeNumber) > 9 ? challengeNumber : '0' + challengeNumber}`}</p>
+        <p className="text-ryurue-base text-secondary-20">{`#${parseInt(challengeNumber) > 9 ? challengeNumber : '0' + challengeNumber}`}</p>
         <Badge text={formattedType} color={CHALLENGE_COLOR[formattedType]} />
       </div>
       <p className="h-full truncate text-ellipsis text-ryurue-base">

src/components/face-challenge/FaceChallengeContainer.tsx

@@ -1,15 +1,10 @@
-import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useGetFaceChallenge } from '../../apis/challenge/getFaceChallenge';
-import FacetimeContainer from './facetime/FacetimeContainer';
-import PrejoinContainer from './prejoin/PrejoinContainer';
+import FaceChallengeContent from './FaceChallengeContent';
 import FaceChallengeResult from './result/FaceChallengeResult';
-import FaceLandmark from './utils/FaceLandmark';
 
 const FaceChallengeContainer = () => {
   const { challengeId } = useParams();
-
-  const [isJoined, setIsJoined] = useState(false);
   const { data } = useGetFaceChallenge({
     challengeId: challengeId || '',
   });
@@ -23,19 +18,7 @@ const FaceChallengeContainer = () => {
       {challengeInfo.isComplete ? (
         <FaceChallengeResult challengeInfo={challengeInfo} />
       ) : (
-        <FaceLandmark code={code}>
-          {isJoined ? (
-            <FacetimeContainer code={code} />
-          ) : (
-            <>
-              <PrejoinContainer
-                setIsJoined={(isJoined) => setIsJoined(isJoined)}
-                challengeInfo={challengeInfo}
-                code={code}
-              />
-            </>
-          )}
-        </FaceLandmark>
+        <FaceChallengeContent challengeInfo={challengeInfo} code={code} />
       )}
     </>
   );

src/components/face-challenge/FaceChallengeContent.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { ChallengeDetailDto } from '../../apis/dtos/challengeDtos';
+import FacetimeContainer from './facetime/FacetimeContainer';
+import PrejoinContainer from './prejoin/PrejoinContainer';
+import FaceLandmark from './utils/FaceLandmark';
+
+interface FaceChallengeContentProps {
+  challengeInfo: ChallengeDetailDto;
+  code: string;
+}
+
+const FaceChallengeContent = ({
+  challengeInfo,
+  code,
+}: FaceChallengeContentProps) => {
+  const [isJoined, setIsJoined] = useState(false);
+  return (
+    <FaceLandmark code={code}>
+      {isJoined ? (
+        <FacetimeContainer code={code} />
+      ) : (
+        <>
+          <PrejoinContainer
+            setIsJoined={(isJoined) => setIsJoined(isJoined)}
+            challengeInfo={challengeInfo}
+            code={code}
+          />
+        </>
+      )}
+    </FaceLandmark>
+  );
+};
+export default FaceChallengeContent;

src/components/main/ChallengeButton.tsx

@@ -33,8 +33,8 @@ type ChallengeButtonProps =
 
 const adjustFontSize = (text: string) => {
   return text.length > 10
-    ? 'xs:text-ryurue-md text-ryurue-base'
-    : ' xs:text-ryurue-lg text-ryurue-md';
+    ? 'xs:text-ryurue-base text-ryurue-sm'
+    : ' xs:text-ryurue-md text-ryurue-base';
 };
 
 const renderTypeInfo = (props: ChallengeButtonProps) => {
@@ -63,15 +63,15 @@ const ChallengeButton = (props: ChallengeButtonProps) => {
   const { mutate } = useCreateChallenge();
 
   const layoutClass = clsx(
-    'shadow h-32 w-full items-center justify-center gap-4 rounded-md bg-paper bg-contain px-9 py-5 font-ryurue',
+    'shadow h-36 w-full items-center justify-center gap-4 rounded-md bg-paper bg-contain px-9 py-5 font-ryurue',
     {
       flex: type === 'active',
       'grid grid-rows-[24px_1fr]': type !== 'active',
       'cursor-pointer': type !== 'disabled',
     },
   );
   const textClass = clsx(
-    'line-clamp-1 text-pretty break-keep',
+    'line-clamp-2 text-pretty break-keep',
     adjustFontSize(text),
     { 'text-gray-40': type === 'disabled' },
   );

src/components/main/Navbar.tsx

@@ -1,6 +1,4 @@
 import { FaListUl } from 'react-icons/fa';
-import { GrPowerReset } from 'react-icons/gr';
-import { TbPlayerTrackNextFilled } from 'react-icons/tb';
 import { useNavigate } from 'react-router-dom';
 import routes from '../../constants/routes';
 import IconButton from '../common/IconButton';
@@ -10,64 +8,13 @@ const Navbar = () => {
     navigate(routes.challenge);
   };
 
-  const handleDayChange = () => {
-    const ONE_DAY_MILI_SEC = 86400000;
-    const challengeStartDate = localStorage.getItem('challengeStartDate');
-    const challengeDate = localStorage.getItem('challengeDate');
-
-    if (challengeDate && challengeStartDate) {
-      const startDate = parseInt(challengeStartDate);
-      const nowDate = parseInt(challengeDate);
-
-      const passDays = (nowDate - startDate) / ONE_DAY_MILI_SEC;
-
-      console.log(passDays);
-
-      if (passDays == 0) {
-        localStorage.setItem(
-          'challengeDate',
-          `${nowDate + ONE_DAY_MILI_SEC * 14}`,
-        );
-      } else if (passDays == 14) {
-        localStorage.setItem(
-          'challengeDate',
-          `${nowDate + ONE_DAY_MILI_SEC * 15}`,
-        );
-      } else {
-        localStorage.setItem('challengeDate', `${nowDate + ONE_DAY_MILI_SEC}`);
-      }
-
-      window.location.reload();
-    }
-  };
-
-  const handleResetDay = () => {
-    const challengeStartDate = localStorage.getItem('challengeStartDate');
-
-    if (challengeStartDate)
-      localStorage.setItem('challengeDate', challengeStartDate);
-    window.location.reload();
-  };
-
   return (
     <div className="absolute right-6 top-1/4 z-10 flex flex-col gap-2">
       <IconButton
         icon={<FaListUl size={20} />}
         label="챌린지"
         onClick={handleChallengeBtn}
       />
-      <IconButton
-        theme="subtle"
-        icon={<TbPlayerTrackNextFilled size={20} />}
-        label="다음"
-        onClick={handleDayChange}
-      />
-      <IconButton
-        theme="subtle"
-        icon={<GrPowerReset size={20} />}
-        label="초기화"
-        onClick={handleResetDay}
-      />
     </div>
   );
 };

src/components/mypage/UserInfo.tsx

@@ -1,6 +1,3 @@
-import { useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { getFcmToken } from '../../apis/auth/fcmToken';
 import { useLogout } from '../../apis/auth/logout';
 import { useGetUserInfo } from '../../apis/user/getUserInfo';
 import { SYS_MESSAGE } from '../../constants/message';
@@ -15,7 +12,6 @@ const UserInfo = () => {
   const { userInfo, isLoading } = useGetUserInfo();
   const { openModal } = useModalStore();
   const { mutate } = useLogout();
-  const [fcm, setFcm] = useState('');
 
   if (isLoading) return <div>Loading...</div>;
   if (!userInfo) return <div>{SYS_MESSAGE.NO_DATA}</div>;
@@ -38,19 +34,6 @@ const UserInfo = () => {
     mutate();
   };
 
-  const requestPermission = async () => {
-    try {
-      const token = await getFcmToken();
-      if (token) {
-        setFcm(token);
-        // await postFcmToken(token);
-        // Send the token to your server and update the UI if necessary
-      }
-    } catch (err) {
-      console.error('An error occurred while retrieving token. ', err);
-    }
-  };
-
   return (
     <div className="flex flex-col gap-5">
       <Header />
@@ -63,10 +46,6 @@ const UserInfo = () => {
           src={userInfo.userImg}
           isText
         />
-
-        <CopyToClipboard text={fcm}>
-          <Button label="" theme="subtle" onClick={requestPermission} />
-        </CopyToClipboard>
         <Button label="로그아웃" theme="subtle" onClick={handleLogout} />
       </div>
       <div className="flex gap-3">

src/components/qa-challenge/ChallengeHeader.tsx

@@ -12,12 +12,12 @@ const ChallengeHeader = ({
   return (
     <div className="flex w-full flex-col gap-4 font-pretendard">
       {challengeNumber && challengeDate && (
-        <div className="space-x-6 text-pretendard-base font-pretendard-normal text-gray-40">
+        <div className="font-pretendard-base space-x-6 text-pretendard-base text-gray-40">
           <span># {challengeNumber}번째 질문</span>
           <span>{challengeDate}</span>
         </div>
       )}
-      <span className="break-keep text-pretendard-lg font-pretendard-bold">
+      <span className="break-keep text-pretendard-md font-pretendard-bold">
         {challengeTitle}
       </span>
     </div>

src/components/qa-challenge/PhotoChallengeContainer.tsx

@@ -23,6 +23,9 @@ const PhotoChallengeContainer = () => {
           challengeDate={formatDate(challengeInfo.challengeDate)}
           challengeTitle={challengeInfo.challengeTitle}
         />
+        <p className="text-ryurue-xs font-ryurue text-gray-40">
+          가로 스크롤을 통해 가족들의 사진을 구경하세요!
+        </p>
       </div>
       <div className="w-full flex-1 overflow-scroll p-1 scrollbar-hide">
         <div

src/global.css

@@ -5,7 +5,7 @@
 @font-face {
   font-family: 'Ownglyph_ryurue-Rg';
   src:
-    url('https://fastly.jsdelivr.net/gh/projectnoonnu/2406-1@1.0/Ownglyph_UNZ-Rg.woff2')
+    url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/Ownglyph_ryurue-Rg.woff2')
       format('woff2'),
     url('./fonts/Ryuryu.ttf') format('truetype');
   font-weight: normal;