fix: webDomain basePath 함수 수정 (#107)

* fix: 환경변수 못부르는 문제 수정 * fix: countdown hydration error fix * fix: 환경변수 설정 위치 변경 * chore: why * chore: test * fix: 질문등록해도 릴레이질문 등록 모달 노출 제거 * chore:test * chore:test * chore: remove console
depromeet · Aug 18, 2024 · a0e1453 · a0e1453
1 parent 3b04723
commit a0e1453
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 112 deletions.
diff --git a/.github/workflows/deploy-integration.yml b/.github/workflows/deploy-integration.yml
@@ -53,11 +53,11 @@ jobs:
           destination-repository-name: ${{needs.variable.outputs.DESTINATION_REPOSITORY}}
           user-email: ${{secrets.EMAIL}}
           commit-message: 'chore: ${{inputs.user_name}} deploy ${{inputs.stage}}'
-          target-branch: ${{inputs.stage == 'prodction' && 'main' || 'main' }}
+          target-branch: ${{inputs.stage == 'production' && 'main' || 'main' }}
       - name: get deploy information
         id: deploy-information
         run: echo "target-repository=${{needs.variable.outputs.DESTINATION_REPOSITORY}}" >> "$GITHUB_OUTPUT" |
-          echo "target-branch=${{inputs.stage == 'prodction' && 'main' || 'main' }}" >> "$GITHUB_OUTPUT"
+          echo "target-branch=${{inputs.stage == 'production' && 'main' || 'main' }}" >> "$GITHUB_OUTPUT"
   info:
     name: get deploy information
     runs-on: ubuntu-latest

diff --git a/packages/web-domains/src/answer/common/components/Countdown/AnswerCountdown.tsx b/packages/web-domains/src/answer/common/components/Countdown/AnswerCountdown.tsx
@@ -0,0 +1,45 @@
+import { Txt } from '@sambad/sds/components';
+import { colors } from '@sambad/sds/theme';
+import dayjs from 'dayjs';
+import dynamic from 'next/dynamic';
+import { HTMLAttributes } from 'react';
+import Countdown from 'react-countdown';
+
+import { getRemainTime } from '../../../../home/common/utils/getRemainTime';
+
+interface AnswerCountDownProps extends HTMLAttributes<HTMLDivElement> {
+  timer: string | number | Date;
+}
+
+const CountdownRender = dynamic(() => import('./AnswerCountdownRender.tsx').then((mod) => mod.AnswerCountdownRender), {
+  ssr: true,
+});
+
+export const AnswerCountDown = ({ timer, ...rest }: AnswerCountDownProps) => {
+  const remainTime = getRemainTime(timer);
+
+  const isTenminuteleft = remainTime <= dayjs().minute(10).valueOf();
+
+  return (
+    <section
+      css={{
+        width: '100%',
+        padding: '0 40px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+      {...rest}
+    >
+      <Txt as="p" typography="body4" css={{ marginBottom: '8px' }} color={colors.grey600}>
+        마감까지 남은 시간
+      </Txt>
+      <Countdown
+        date={remainTime}
+        renderer={({ hours, minutes, seconds }) => (
+          <CountdownRender hours={hours} minutes={minutes} seconds={seconds} isTenminuteleft={isTenminuteleft} />
+        )}
+      />
+    </section>
+  );
+};
diff --git a/...wer/common/components/AnswerCountdown.tsx → ...nents/Countdown/AnswerCountdownRender.tsx b/...wer/common/components/AnswerCountdown.tsx → ...nents/Countdown/AnswerCountdownRender.tsx
@@ -1,45 +1,7 @@
-import { Txt } from '@sambad/sds/components';
-import { borderRadiusVariants, colors, shadow } from '@sambad/sds/theme';
-import dayjs from 'dayjs';
-import { HTMLAttributes } from 'react';
-import Countdown from 'react-countdown';
+import { Txt } from '@sds/components';
+import { colors, borderRadiusVariants, shadow } from '@sds/theme';
 
-import { getRemainTime } from '../../../home/common/utils/getRemainTime';
-
-interface AnswerCountDownProps extends HTMLAttributes<HTMLDivElement> {
-  timer: string | number | Date;
-}
-
-export const AnswerCountDown = ({ timer, ...rest }: AnswerCountDownProps) => {
-  const remainTime = getRemainTime(timer);
-
-  const isTenminuteleft = remainTime <= dayjs().minute(10).valueOf();
-
-  return (
-    <section
-      css={{
-        width: '100%',
-        padding: '0 40px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-      }}
-      {...rest}
-    >
-      <Txt as="p" typography="body4" css={{ marginBottom: '8px' }} color={colors.grey600}>
-        마감까지 남은 시간
-      </Txt>
-      <Countdown
-        date={remainTime}
-        renderer={({ hours, minutes, seconds }) => (
-          <CountdownRender hours={hours} minutes={minutes} seconds={seconds} isTenminuteleft={isTenminuteleft} />
-        )}
-      />
-    </section>
-  );
-};
-
-const CountdownRender = ({
+export const AnswerCountdownRender = ({
   hours,
   minutes,
   seconds,

diff --git a/...ages/web-domains/src/answer/features/answer-closing/containers/AnswerClosingContainer.tsx b/...ages/web-domains/src/answer/features/answer-closing/containers/AnswerClosingContainer.tsx
@@ -2,7 +2,7 @@
 
 import { KakaoShareModal } from '@/common';
 
-import { AnswerCountDown } from '../../../common/components/AnswerCountdown';
+import { AnswerCountDown } from '../../../common/components/Countdown/AnswerCountdown';
 import { ClosingButton } from '../../floating-button/components/ClosingButton';
 import { ClosingMessage } from '../components/ClosingMessage';
 import { useAnswerClosingService } from '../services/useAnswerClosingService';

diff --git a/packages/web-domains/src/answer/features/answer-closing/services/useAnswerClosingService.ts b/packages/web-domains/src/answer/features/answer-closing/services/useAnswerClosingService.ts
@@ -8,6 +8,7 @@ export const useAnswerClosingService = () => {
   const { close, isOpen } = useDialogContext();
   const answerGlobalTime = useAtomValue(answerAtoms.answerGlobalTime);
   const basePath = getWebDomain();
+
   return {
     answerGlobalTime: answerGlobalTime ?? 0,
     isOpen,

diff --git a/...ains/src/answer/features/progressing-question/containers/ProgressingQuestionContainer.tsx b/...ains/src/answer/features/progressing-question/containers/ProgressingQuestionContainer.tsx
@@ -3,7 +3,7 @@
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 
-import { AnswerCountDown } from '../../../common/components/AnswerCountdown';
+import { AnswerCountDown } from '../../../common/components/Countdown/AnswerCountdown';
 import { StartButton } from '../../floating-button/components/StartButton';
 import { QuestionInfo } from '../components/QuestionInfo';
 import { ResponseGuageBar } from '../components/ResponseGuageBar';

diff --git a/packages/web-domains/src/common/components/KakaoShare/generateKakaoShare.utils.ts b/packages/web-domains/src/common/components/KakaoShare/generateKakaoShare.utils.ts
@@ -12,7 +12,7 @@ interface ShareToKakaoProps {
 
 export const generateKakaoShare = ({ shareLink, shareImageUrl, shareDescription }: ShareToKakaoProps) => {
   const { Kakao } = window;
-  console.log(shareLink);
+
   Kakao.Share.sendDefault({
     objectType: 'feed',
     content: {

diff --git a/packages/web-domains/src/common/getWebdomain.ts b/packages/web-domains/src/common/getWebdomain.ts
diff --git a/packages/web-domains/src/common/utils/getWebDomain.ts b/packages/web-domains/src/common/utils/getWebDomain.ts
@@ -1,11 +1,12 @@
+const STAGE = process.env.NEXT_PUBLIC_STAGE;
+
 export const getWebDomain = () => {
-  const NEXT_PUBLIC_STAGE = process.env.NEXT_PUBLIC_STAGE;
+  if (STAGE === 'production') {
+    return 'https://moring.one';
+  }
 
-  switch (NEXT_PUBLIC_STAGE) {
-    case 'production':
-      return 'https://moring.one';
-    case 'development':
-      return 'https://dev.moring.one';
+  if (STAGE === 'development') {
+    return 'https://dev.moring.one';
   }
 
   return 'https://local.moring.one:3000';

diff --git a/packages/web-domains/src/home/common/apis/queries/useGetTopPreviousQuestionList.ts b/packages/web-domains/src/home/common/apis/queries/useGetTopPreviousQuestionList.ts
@@ -65,7 +65,6 @@ export async function getTopPreviousQuestionList(
       Cookie: cookie?.toString(),
     },
   });
-  console.log(data);
 
   return data;
 }
diff --git a/packages/web-domains/src/home/features/notification/containers/NotificationContainer.tsx b/packages/web-domains/src/home/features/notification/containers/NotificationContainer.tsx
@@ -4,14 +4,14 @@ import { ArrivedQuestionNotification } from '../components/ArrivedQuestionNotifi
 import { SelectedTargetMemberNotification } from '../components/SelectedTargetMemberNotification';
 import { useNotificationService } from '../services/useNotificationService';
 export const NotificationContainer = () => {
-  const { notfication, handleClose, isOpen, isNotAnswerd } = useNotificationService();
+  const { notfication, handleClose, isOpen, isNotAnswerd, isNotRegistered } = useNotificationService();
 
   return (
     <>
       {notfication?.eventType === 'QUESTION_REGISTERED' && isNotAnswerd && (
         <ArrivedQuestionNotification isOpen={isOpen} onClose={handleClose} />
       )}
-      {notfication?.eventType === 'TARGET_MEMBER' && (
+      {notfication?.eventType === 'TARGET_MEMBER' && isNotRegistered && (
         <SelectedTargetMemberNotification isOpen={isOpen} onClose={handleClose} />
       )}
     </>

diff --git a/packages/web-domains/src/home/features/notification/services/useNotificationService.ts b/packages/web-domains/src/home/features/notification/services/useNotificationService.ts
@@ -53,5 +53,6 @@ export const useNotificationService = () => {
     handleClose,
     isRefetching,
     isNotAnswerd: !progressingQuestionData?.isAnswered,
+    isNotRegistered: !progressingQuestionData?.isQuestionRegistered,
   };
 };
diff --git a/...rc/home/features/progressing-question/components/QuestionInfo/InActiveCountdownRender.tsx b/...rc/home/features/progressing-question/components/QuestionInfo/InActiveCountdownRender.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { Txt } from '@sds/components';
+import { borderRadiusVariants, colors } from '@sds/theme';
+
+export const InActiveCountdownRender = ({
+  hours,
+  minutes,
+  seconds,
+}: {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}) => {
+  const renderHours = hours < 10 ? `0${hours}` : `${hours}`;
+  const renderMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+  const renderseconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+
+  return (
+    <div
+      css={{
+        width: '97px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '29px',
+        padding: '4px 8px',
+        borderRadius: borderRadiusVariants.medium,
+        backgroundColor: colors.grey300,
+        marginTop: '16px',
+      }}
+    >
+      <Txt typography="title3" color={colors.grey600}>
+        {renderHours}
+      </Txt>
+      <Txt typography="title3" color={colors.grey600} css={{ padding: '0 4px' }}>
+        :
+      </Txt>
+      <Txt typography="title3" color={colors.grey600}>
+        {renderMinutes}
+      </Txt>
+      <Txt typography="title3" color={colors.grey600} css={{ padding: '0 4px' }}>
+        :
+      </Txt>
+      <Txt typography="title3" color={colors.grey600}>
+        {renderseconds}
+      </Txt>
+    </div>
+  );
+};
diff --git a/...mains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx b/...mains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx
@@ -1,14 +1,22 @@
 'use client';
 
 import { Txt } from '@sambad/sds/components';
-import { borderRadiusVariants, colors } from '@sambad/sds/theme';
+import { colors } from '@sambad/sds/theme';
+import dynamic from 'next/dynamic';
 import Countdown from 'react-countdown';
 
 import { ClockIcon } from '../../../../../common/asset/clock';
 import { MemberType } from '../../../../common/apis/schema/useGetProgressingQuestionQuery.type';
 import { Avatar } from '../../../../common/components/Avatar/Avatar';
 import { getRemainTime } from '../../../../common/utils/getRemainTime';
 
+const CountdownRender = dynamic(
+  () => import('./InActiveCountdownRender.tsx').then((mod) => mod.InActiveCountdownRender),
+  {
+    ssr: true,
+  },
+);
+
 interface InActiveQuestionProps {
   time: number;
   targetMember: MemberType;
@@ -20,52 +28,19 @@ export const InActiveQuestion = ({ time, targetMember }: InActiveQuestionProps)
   const timer = getRemainTime(time);
 
   return (
-    <div css={{ backgroundColor: colors.white, padding: '32px 20px', borderRadius: '16px' }}>
+    <div css={{ backgroundColor: colors.white, padding: '32px 20px', borderRadius: '16px', height: '182px' }}>
       <div css={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
         <Avatar Icon={ClockIcon} size={40} />
         <Txt as="p" typography="title3" color={colors.grey600} css={{ marginTop: '12px' }}>
           {name}님의 질문을 기다리고 있어요
         </Txt>
-        <Countdown date={timer} renderer={CountdownRender} />
+        <Countdown
+          date={timer}
+          renderer={({ hours, minutes, seconds }) => (
+            <CountdownRender hours={hours} minutes={minutes} seconds={seconds} />
+          )}
+        />
       </div>
     </div>
   );
 };
-
-const CountdownRender = ({ hours, minutes, seconds }: { hours: number; minutes: number; seconds: number }) => {
-  const renderHours = hours < 10 ? `0${hours}` : `${hours}`;
-  const renderMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
-  const renderseconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
-
-  return (
-    <div
-      css={{
-        width: '97px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '29px',
-        padding: '4px 8px',
-        borderRadius: borderRadiusVariants.medium,
-        backgroundColor: colors.grey300,
-        marginTop: '16px',
-      }}
-    >
-      <Txt typography="title3" color={colors.grey600}>
-        {renderHours}
-      </Txt>
-      <Txt typography="title3" color={colors.grey600} css={{ padding: '0 4px' }}>
-        :
-      </Txt>
-      <Txt typography="title3" color={colors.grey600}>
-        {renderMinutes}
-      </Txt>
-      <Txt typography="title3" color={colors.grey600} css={{ padding: '0 4px' }}>
-        :
-      </Txt>
-      <Txt typography="title3" color={colors.grey600}>
-        {renderseconds}
-      </Txt>
-    </div>
-  );
-};
diff --git a/...roup/containers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.tsx b/...roup/containers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.tsx
@@ -5,8 +5,7 @@ import { colors, size } from '@sambad/sds/theme';
 import Link from 'next/link';
 import { useState } from 'react';
 
-import { KakaoShareModal } from '@/common';
-import { getWebDomain } from '@/common/getWebdomain';
+import { KakaoShareModal, getWebDomain } from '@/common';
 import { findCurrentMeetingId } from '@/relay-question/utils/findCurrentMeetingId';
 
 import { ShareGroupBackground } from '../../../../assets/ShareGroupBackground';

diff --git a/...-next-questioner/containers/ShareNextQuestionerContainer/ShareNextQuestionerContainer.tsx b/...-next-questioner/containers/ShareNextQuestionerContainer/ShareNextQuestionerContainer.tsx
@@ -5,8 +5,7 @@ import { colors, size } from '@sambad/sds/theme';
 import Link from 'next/link';
 import { useState } from 'react';
 
-import { KakaoShareModal } from '@/common';
-import { getWebDomain } from '@/common/getWebdomain';
+import { KakaoShareModal, getWebDomain } from '@/common';
 import { useActiveQuestionQuery } from '@/relay-question/features/share-group/hooks/useActiveQuestionQuery';
 import { useMyMeetingsQuery } from '@/relay-question/features/start-relay-question/hooks/queries/useMyMeetingsQuery';
 import { findCurrentMeetingId } from '@/relay-question/utils/findCurrentMeetingId';