퀴즈 생성 카드 임시 비활성화 (#367)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: sumi <sumi@sumiui-MacBookAir.local>
Co-authored-by: 박승훈 <tmdgns1126@naver.com>

Author: 4 people

apps/web/messages/en_US.json

@@ -210,6 +210,7 @@
     "invalid-guild-name": "Guild name may only contain alphanumeric characters or single hyphens, and cannot begin or end with a hyphen."
   },
   "Quiz": {
+    "prepare": "Coming Soon",
     "quiz-solve-description": "Create a quiz or solve it to earn points!",
     "solve-todays-quiz-description": "Solve today's quiz and get points!",
     "check-language-for-quiz-dialog-title": "Change Language",

apps/web/messages/ko_KR.json

@@ -211,6 +211,7 @@
     "invalid-guild-name": "길드 이름은 영문자, 숫자, -만 포함할 수 있으며, -으로 시작하거나 끝날 수 없습니다."
   },
   "Quiz": {
+    "prepare": "준비중",
     "quiz-solve-description": "퀴즈를 만들거나 풀어서 포인트를 모아보세요!",
     "create-quiz-card-title": "퀴즈 만들기",
     "create-quiz-card-description": "O/X 퀴즈를 만들고 [point]P를 모아보세요!",

apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/QuizTypeCard.tsx

@@ -9,17 +9,20 @@ interface QuizTypeCardProps {
   point: string;
   onClick: () => void;
   isDisabled?: boolean;
+  disabledLabel?: string;
 }
 
-const QuizTypeCard = ({ title, description, image, point, onClick, isDisabled }: QuizTypeCardProps) => {
+const QuizTypeCard = ({ title, description, image, point, onClick, isDisabled, disabledLabel }: QuizTypeCardProps) => {
   return (
     <button className={cx(cardStyle, isDisabled && disabledStyle)} onClick={onClick} disabled={isDisabled}>
-      <Image className={imageStyle} src={image} alt={title} width={100} height={100} />
-      <Flex direction="column" gap="4px">
+      <Image className={cx(imageStyle, isDisabled && disabledContentStyle)} src={image} alt={title} width={100} height={100} />
+      <Flex className={isDisabled ? disabledContentStyle : undefined} direction="column" gap="4px">
         <h4 className={titleStyle}>{title}</h4>
         <p className={descriptionStyle}>{description}</p>
       </Flex>
-      <p className={pointStyle}>{point}</p>
+      <p className={isDisabled && disabledLabel ? disabledLabelStyle : pointStyle}>
+        {isDisabled && disabledLabel ? disabledLabel : point}
+      </p>
     </button>
   );
 };
@@ -38,10 +41,26 @@ const cardStyle = css({
 });
 
 const disabledStyle = css({
-  opacity: 0.5,
   pointerEvents: 'none',
 });
 
+const disabledContentStyle = css({
+  opacity: 0.4,
+  filter: 'grayscale(1)',
+});
+
+const disabledLabelStyle = css({
+  position: 'absolute',
+  top: '8px',
+  right: '8px',
+  padding: '2px 12px',
+  backgroundColor: 'white.white_50',
+  borderRadius: 'full',
+  textStyle: 'glyph12.regular',
+  fontWeight: 700,
+  color: 'white',
+});
+
 const imageStyle = css({
   flexShrink: 0,
 });

apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/SelectQuizType.tsx

@@ -64,6 +64,8 @@ const SelectQuizType = wrap
           image="/assets/game/quiz/quiz-cat.webp"
           point={`${QUIZ_REGISTER_POINT}P`}
           onClick={() => router.push(ROUTE.GAME.QUIZ.CREATE())}
+          isDisabled
+          disabledLabel={t('prepare')}
         />
         <QuizTypeCard
           title={quizSolveCard.title}

apps/webview/src/pages/game/quiz/_components/CreateOrSolve/QuizTypeCard.tsx

@@ -8,17 +8,20 @@ interface QuizTypeCardProps {
   point: string;
   onClick: () => void;
   isDisabled?: boolean;
+  disabledLabel?: string;
 }
 
-const QuizTypeCard = ({ title, description, image, point, onClick, isDisabled }: QuizTypeCardProps) => {
+const QuizTypeCard = ({ title, description, image, point, onClick, isDisabled, disabledLabel }: QuizTypeCardProps) => {
   return (
     <button className={cx(cardStyle, isDisabled && disabledStyle)} onClick={onClick} disabled={isDisabled}>
-      <img className={imageStyle} src={image} alt={title} width={100} height={100} />
-      <Flex direction="column" gap="4px">
+      <img className={cx(imageStyle, isDisabled && disabledContentStyle)} src={image} alt={title} width={100} height={100} />
+      <Flex className={isDisabled ? disabledContentStyle : undefined} direction="column" gap="4px">
         <h4 className={titleStyle}>{title}</h4>
         <p className={descriptionStyle}>{description}</p>
       </Flex>
-      <p className={pointStyle}>{point}</p>
+      <p className={isDisabled && disabledLabel ? disabledLabelStyle : pointStyle}>
+        {isDisabled && disabledLabel ? disabledLabel : point}
+      </p>
     </button>
   );
 };
@@ -37,10 +40,14 @@ const cardStyle = css({
 });
 
 const disabledStyle = css({
-  opacity: 0.5,
   pointerEvents: 'none',
 });
 
+const disabledContentStyle = css({
+  opacity: 0.4,
+  filter: 'grayscale(1)',
+});
+
 const imageStyle = css({
   flexShrink: 0,
 });
@@ -62,6 +69,18 @@ const descriptionStyle = css({
   textAlign: 'left',
 });
 
+const disabledLabelStyle = css({
+  position: 'absolute',
+  top: '8px',
+  right: '8px',
+  padding: '2px 12px',
+  backgroundColor: 'white.white_50',
+  borderRadius: 'full',
+  textStyle: 'glyph12.regular',
+  fontWeight: 700,
+  color: 'white',
+});
+
 const pointStyle = css({
   position: 'absolute',
   top: '8px',

apps/webview/src/pages/game/quiz/_components/CreateOrSolve/SelectQuizType.tsx

@@ -33,6 +33,8 @@ const SelectQuizType = wrap
           image="/assets/game/quiz/quiz-cat.webp"
           point={`${QUIZ_REGISTER_POINT}P`}
           onClick={() => navigate(ROUTES.GAME.QUIZ.CREATE())}
+          isDisabled
+          disabledLabel={t('prepare', { ns: 'shop' })}
         />
         <QuizTypeCard
           title={quizSolveCard.title}