YAPP-Github · minseong0324 · Feb 13, 2025 · Feb 13, 2025 · Feb 13, 2025 · Feb 13, 2025
diff --git a/apps/web/src/app/create/Create.tsx b/apps/web/src/app/create/Create.tsx
@@ -9,10 +9,10 @@ import {
   Icon,
   Button,
   Modal,
+  GradientAnimatedText,
 } from '@repo/ui';
 import { ImageManager, MainBreadcrumbItem } from '@web/components/common';
 import { KeywordChipGroup } from './_components/KeywordChip/KeywordChipGroup';
-import { GradientAnimatedTitle } from './_components/GradientAnimatedTitle/GradientAnimatedTitle';
 import { AnimatedContainer } from './_components/AnimatedContainer/AnimatedContainer';
 import { useForm, Controller } from 'react-hook-form';
 import { isEmptyStringOrNil } from '@web/utils';
@@ -144,7 +144,9 @@ export default function Create() {
 
       <Spacing size={80} />
 
-      <GradientAnimatedTitle>어떤 글을 생성할까요?</GradientAnimatedTitle>
+      <GradientAnimatedText className={styles.titleStyle}>
+        어떤 글을 생성할까요?
+      </GradientAnimatedText>
 
       <AnimatedContainer>
         <form className={styles.contentStyle}>
@@ -253,23 +255,22 @@ export default function Create() {
 
           {/* 본문 길이 */}
           <section className={styles.sectionStyle}>
-            <Label>본문 길이</Label>
+            <Label description="3문장 이상의 긴 게시물을 업로드 하려면 X 유료 구독 플랜에 가입해주세요">
+              본문 길이
+            </Label>
             <Controller
               name="length"
               control={control}
               render={({ field: { onChange, value } }) => (
                 <RadioCards value={value} onChange={onChange} columns={3}>
-                  {LENGTH_OPTIONS.map(
-                    ({ value, label, description, badge }) => (
-                      <RadioCards.Item key={value} value={value}>
-                        <RadioCards.Badge>{badge}</RadioCards.Badge>
-                        <RadioCards.Label>{label}</RadioCards.Label>
-                        <RadioCards.Description>
-                          {description}
-                        </RadioCards.Description>
-                      </RadioCards.Item>
-                    )
-                  )}
+                  {LENGTH_OPTIONS.map(({ value, label, description }) => (
+                    <RadioCards.Item key={value} value={value}>
+                      <RadioCards.Label>{label}</RadioCards.Label>
+                      <RadioCards.Description>
+                        {description}
+                      </RadioCards.Description>
+                    </RadioCards.Item>
+                  ))}
                 </RadioCards>
               )}
             />

diff --git a/apps/web/src/app/create/_components/GradientAnimatedTitle/GradientAnimatedTitle.tsx b/apps/web/src/app/create/_components/GradientAnimatedTitle/GradientAnimatedTitle.tsx
diff --git a/apps/web/src/app/create/constants.ts b/apps/web/src/app/create/constants.ts
@@ -66,18 +66,15 @@ export const LENGTH_OPTIONS = [
     value: LENGTH_TYPE.SHORT,
     label: '짧은 게시물',
     description: '약 1~2문장, 최대 140자',
-    badge: '누구나 이용 가능',
   },
   {
     value: LENGTH_TYPE.MEDIUM,
     label: '보통 게시물',
     description: '약 3~4문장, 최대 300자',
-    badge: 'X 유료 구독 전용',
   },
   {
     value: LENGTH_TYPE.LONG,
     label: '긴 게시물',
     description: '약 7~8문장, 최대 1000자',
-    badge: 'X 유료 구독 전용',
   },
 ] as const;
diff --git a/apps/web/src/app/create/pageStyle.css.ts b/apps/web/src/app/create/pageStyle.css.ts
@@ -25,3 +25,9 @@ export const labelDiscriptionWrapperStyle = style({
   display: 'flex',
   flexDirection: 'column',
 });
+
+export const titleStyle = style({
+  width: '100%',
+  padding: `${vars.space[24]} 0`,
+  textAlign: 'center',
+});
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -91,6 +91,10 @@
       "types": "./dist/components/Dropdown/index.d.ts",
       "import": "./dist/components/Dropdown/index.js"
     },
+    "./GradientAnimatedText": {
+      "types": "./dist/components/GradientAnimatedText/index.d.ts",
+      "import": "./dist/components/GradientAnimatedText/index.js"
+    },
     "./utils": "./dist/utils/index.js"
   },
   "scripts": {

diff --git a/...nimatedTitle/GradientAnimatedTitle.css.ts → ...tAnimatedText/GradientAnimatedText.css.ts b/...nimatedTitle/GradientAnimatedTitle.css.ts → ...tAnimatedText/GradientAnimatedText.css.ts
@@ -1,4 +1,3 @@
-import { vars } from '@repo/theme';
 import { keyframes, style } from '@vanilla-extract/css';
 
 const flowingGradient = keyframes({
@@ -11,14 +10,13 @@ const flowingGradient = keyframes({
 });
 
 export const gradientTitleStyle = style({
+  width: 'fit-content',
   background:
     'linear-gradient(90deg, #1F3761 0%, #2646C5 10%, #615BE7 30%, #615BE7 70%, #2646C5 93%, #1F3761 97%, #1F3761 100%)',
   backgroundSize: '200% 100%',
   backgroundClip: 'text',
   WebkitBackgroundClip: 'text',
   WebkitTextFillColor: 'transparent',
-  textAlign: 'center',
-  padding: `${vars.space[24]} 0`,
   animation: `${flowingGradient} 4s linear infinite`,
   backgroundRepeat: 'repeat',
 });
diff --git a/packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.tsx b/packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.tsx
@@ -0,0 +1,90 @@
+import { motion, HTMLMotionProps } from 'motion/react';
+import * as styles from './GradientAnimatedText.css';
+import { ReactNode, forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+export type GradientAnimatedTextProps = {
+  children: ReactNode;
+  asChild?: boolean;
+} & HTMLMotionProps<'h1'>;
+
+/**
+ * 그라디언트 애니메이션이 적용된 텍스트 컴포넌트입니다.
+ *
+ * @example
+ * // 기본 사용 (h1)
+ * <GradientAnimatedText>제목</GradientAnimatedText>
+ *
+ * // 다른 태그로 사용
+ * <GradientAnimatedText asChild>
+ *   <Text.P>제목</Text.P>
+ * </GradientAnimatedText>
+ *
+ */
+export const GradientAnimatedText = forwardRef<
+  HTMLHeadingElement,
+  GradientAnimatedTextProps
+>(({ children, asChild, className = '', ...props }, ref) => {
+  if (asChild) {
+    return (
+      <Slot ref={ref}>
+        <motion.div
+          className={`${styles.gradientTitleStyle} ${className}`}
+          initial={{
+            y: '35vh',
+            scale: 2,
+            x: '-50%',
+            left: '50%',
+            position: 'absolute',
+          }}
+          animate={{
+            y: 0,
+            scale: 1,
+            x: 0,
+            left: 'auto',
+            position: 'relative',
+          }}
+          transition={{
+            type: 'spring',
+            duration: 0.6,
+            bounce: 0.22,
+          }}
+          {...props}
+        >
+          {children}
+        </motion.div>
+      </Slot>
+    );
+  }
+
+  return (
+    <motion.h1
+      ref={ref}
+      className={`${styles.gradientTitleStyle} ${className}`}
+      initial={{
+        y: '35vh',
+        scale: 2,
+        x: '-50%',
+        left: '50%',
+        position: 'absolute',
+      }}
+      animate={{
+        y: 0,
+        scale: 1,
+        x: 0,
+        left: 'auto',
+        position: 'relative',
+      }}
+      transition={{
+        type: 'spring',
+        duration: 0.6,
+        bounce: 0.22,
+      }}
+      {...props}
+    >
+      {children}
+    </motion.h1>
+  );
-  if (asChild) {
-    return (
-      <Slot ref={ref}>
-        <motion.div
-          className={`${styles.gradientTitleStyle} ${className}`}
-          initial={{
-            y: '35vh',
-            scale: 2,
-            x: '-50%',
-            left: '50%',
-            position: 'absolute',
-          }}
-          animate={{
-            y: 0,
-            scale: 1,
-            x: 0,
-            left: 'auto',
-            position: 'relative',
-          }}
-          transition={{
-            type: 'spring',
-            duration: 0.6,
-            bounce: 0.22,
-          }}
-          {...props}
-        >
-          {children}
-        </motion.div>
-      </Slot>
-    );
-  }
-
-  return (
-    <motion.h1
-      ref={ref}
-      className={`${styles.gradientTitleStyle} ${className}`}
-      initial={{
-        y: '35vh',
-        scale: 2,
-        x: '-50%',
-        left: '50%',
-        position: 'absolute',
-      }}
-      animate={{
-        y: 0,
-        scale: 1,
-        x: 0,
-        left: 'auto',
-        position: 'relative',
-      }}
-      transition={{
-        type: 'spring',
-        duration: 0.6,
-        bounce: 0.22,
-      }}
-      {...props}
-    >
-      {children}
-    </motion.h1>
-  );
+const animationProps = {
+  initial: {
+    y: '35vh',
+    scale: 2,
+    x: '-50%',
+    left: '50%',
+    position: 'absolute',
+  },
+  animate: {
+    y: 0,
+    scale: 1,
+    x: 0,
+    left: 'auto',
+    position: 'relative',
+  },
+  transition: {
+    type: 'spring',
+    duration: 0.6,
+    bounce: 0.22,
+  },
+};
+
+export const GradientAnimatedText = forwardRef<
+  HTMLHeadingElement,
+  GradientAnimatedTextProps
+>(({ children, asChild, className = '', ...props }, ref) => {
+  if (asChild) {
+    return (
+      <Slot ref={ref}>
+        <motion.div
+          className={`${styles.gradientTitleStyle} ${className}`}
+          {...animationProps}
+          {...props}
+        >
+          {children}
+        </motion.div>
+      </Slot>
+    );
+  }
+
+  return (
+    <motion.h1
+      ref={ref}
+      className={`${styles.gradientTitleStyle} ${className}`}
+      {...animationProps}
+      {...props}
+    >
+      {children}
+    </motion.h1>
+  );
+});
-  if (asChild) {
-    return (
-      <Slot ref={ref}>
-        <motion.div
-          className={`${styles.gradientTitleStyle} ${className}`}
-          initial={{
-            y: '35vh',
-            scale: 2,
-            x: '-50%',
-            left: '50%',
-            position: 'absolute',
-          }}
-          animate={{
-            y: 0,
-            scale: 1,
-            x: 0,
-            left: 'auto',
-            position: 'relative',
-          }}
-          transition={{
-            type: 'spring',
-            duration: 0.6,
-            bounce: 0.22,
-          }}
-          {...props}
-        >
-          {children}
-        </motion.div>
-      </Slot>
-    );
-  }
-
-  return (
-    <motion.h1
-      ref={ref}
-      className={`${styles.gradientTitleStyle} ${className}`}
-      initial={{
-        y: '35vh',
-        scale: 2,
-        x: '-50%',
-        left: '50%',
-        position: 'absolute',
-      }}
-      animate={{
-        y: 0,
-        scale: 1,
-        x: 0,
-        left: 'auto',
-        position: 'relative',
-      }}
-      transition={{
-        type: 'spring',
-        duration: 0.6,
-        bounce: 0.22,
-      }}
-      {...props}
-    >
-      {children}
-    </motion.h1>
-  );
+const animationProps = {
+  initial: {
+    y: '35vh',
+    scale: 2,
+    x: '-50%',
+    left: '50%',
+    position: 'absolute',
+  },
+  animate: {
+    y: 0,
+    scale: 1,
+    x: 0,
+    left: 'auto',
+    position: 'relative',
+  },
+  transition: {
+    type: 'spring',
+    duration: 0.6,
+    bounce: 0.22,
+  },
+};
+
+export const GradientAnimatedText = forwardRef<
+  HTMLHeadingElement,
+  GradientAnimatedTextProps
+>(({ children, asChild, className = '', ...props }, ref) => {
+  if (asChild) {
+    return (
+      <Slot ref={ref}>
+        <motion.div
+          className={`${styles.gradientTitleStyle} ${className}`}
+          {...animationProps}
+          {...props}
+        >
+          {children}
+        </motion.div>
+      </Slot>
+    );
+  }
+
+  return (
+    <motion.h1
+      ref={ref}
+      className={`${styles.gradientTitleStyle} ${className}`}
+      {...animationProps}
+      {...props}
+    >
+      {children}
+    </motion.h1>
+  );
+});
+});
+
+GradientAnimatedText.displayName = 'GradientAnimatedText';
diff --git a/packages/ui/src/components/GradientAnimatedText/index.ts b/packages/ui/src/components/GradientAnimatedText/index.ts
@@ -0,0 +1,2 @@
+export { GradientAnimatedText } from './GradientAnimatedText';
+export type { GradientAnimatedTextProps } from './GradientAnimatedText';
diff --git a/packages/ui/src/components/Label/Label.css.ts b/packages/ui/src/components/Label/Label.css.ts
@@ -1,6 +1,12 @@
 import { vars } from '@repo/theme';
 import { style } from '@vanilla-extract/css';
 
+export const labelWrapperStyle = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: vars.space[12],
+});
+
 export const labelStyle = style({
   display: 'flex',
   alignItems: 'center',

diff --git a/packages/ui/src/components/Label/Label.tsx b/packages/ui/src/components/Label/Label.tsx
@@ -1,11 +1,17 @@
-import { forwardRef, LabelHTMLAttributes } from 'react';
+import { forwardRef, LabelHTMLAttributes, ReactNode } from 'react';
 import { Text } from '../Text/Text';
-import { labelStyle, requiredStyle, optionalStyle } from './Label.css';
+import {
+  labelStyle,
+  labelWrapperStyle,
+  requiredStyle,
+  optionalStyle,
+} from './Label.css';
 
 export type LabelVariant = 'default' | 'required' | 'optional';
 
 export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
   variant?: LabelVariant;
+  description?: ReactNode;
 };
 
 const LABEL_CLASS = {
@@ -14,32 +20,62 @@ const LABEL_CLASS = {
   optional: optionalStyle,
 } as const;
 
+/**
+ * 폼 요소의 레이블을 표시하는 컴포넌트입니다.
+ *
+ * @example
+ * // 기본 사용
+ * <Label>이름</Label>
+ *
+ * // 필수 항목
+ * <Label variant="required">이름</Label>
+ *
+ * // 선택 항목
+ * <Label variant="optional">이름</Label>
+ *
+ * // 설명 추가
+ * <Label
+ *   description="2~10자 이내로 입력해주세요"
+ * >
+ *   이름
+ * </Label>
+ */
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ children, variant = 'default', className = '', ...props }, ref) => {
+  (
+    { children, variant = 'default', description, className = '', ...props },
+    ref
+  ) => {
     return (
-      <label
-        ref={ref}
-        className={`${labelStyle} ${LABEL_CLASS[variant]} ${className}`}
-        aria-required={variant === 'required'}
-        {...props}
-      >
-        {children}
-        {variant === 'required' && (
-          <Text
-            as="span"
-            fontSize={20}
-            fontWeight="semibold"
-            color="primary600"
-          >
-            *
+      <div className={labelWrapperStyle}>
+        <label
+          ref={ref}
+          className={`${labelStyle} ${LABEL_CLASS[variant]} ${className}`}
+          aria-required={variant === 'required'}
+          {...props}
+        >
+          {children}
+          {variant === 'required' && (
+            <Text
+              as="span"
+              fontSize={20}
+              fontWeight="semibold"
+              color="primary600"
+            >
+              *
+            </Text>
+          )}
+          {variant === 'optional' && (
+            <Text as="span" fontSize={16} fontWeight="semibold" color="grey300">
+              선택
+            </Text>
+          )}
+        </label>
+        {description && (
+          <Text fontSize={16} fontWeight="medium" color="grey400">
+            {description}
           </Text>
         )}
-        {variant === 'optional' && (
-          <Text as="span" fontSize={16} fontWeight="semibold" color="grey300">
-            선택
-          </Text>
-        )}
-      </label>
+      </div>
     );
   }
 );

diff --git a/packages/ui/src/components/RadioCards/RadioCardsDescription.tsx b/packages/ui/src/components/RadioCards/RadioCardsDescription.tsx
@@ -14,7 +14,7 @@ export const RadioCardsDescription = ({
     <Text.P
       fontSize={14}
       fontWeight="medium"
-      color={isDisabled ? 'grey400' : 'grey600'}
+      color={isDisabled ? 'grey200' : 'grey600'}
       {...props}
     >
       {children}

diff --git a/packages/ui/src/components/RadioCards/RadioCardsLabel.tsx b/packages/ui/src/components/RadioCards/RadioCardsLabel.tsx
@@ -14,7 +14,7 @@ export const RadioCardsLabel = ({
     <Text.Span
       fontSize={18}
       fontWeight="semibold"
-      color={isDisabled ? 'grey400' : 'grey800'}
+      color={isDisabled ? 'grey300' : 'grey800'}
       {...props}
     >
       {children}

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -14,3 +14,4 @@ export * from './Modal';
 export * from './Skeleton';
 export * from './Chip';
 export * from './Accordion';
+export * from './GradientAnimatedText';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { GradientAnimatedText } from './GradientAnimatedText';
		export type { GradientAnimatedTextProps } from './GradientAnimatedText';