diff --git a/index.css b/index.css index 62e6e0b..61944e8 100644 --- a/index.css +++ b/index.css @@ -7721,6 +7721,10 @@ border-color: rgba(255, 255, 255, 0.1); } +.genre-btn.active:hover:not(:disabled) { + border-color: var(--color-mint); +} + .genre-btn.active { border-color: var(--color-mint); } @@ -8080,6 +8084,7 @@ color: var(--color-mint); font-size: var(--text-sm); text-align: center; + white-space: pre-line; display: flex; align-items: center; justify-content: center; @@ -9759,6 +9764,47 @@ color: rgba(255, 255, 255, 0.3); } +/* SEO 자동 생성 shimmer 효과 */ +@keyframes seo-shimmer { + 0% { background-position: 200% center; } + 100% { background-position: -200% center; } +} + +.seo-input-wrapper { + position: relative; +} + +.seo-input-wrapper .social-posting-input, +.seo-input-wrapper .social-posting-textarea { + width: 100%; +} + +.seo-shimmer-text { + position: absolute; + top: 50%; + left: 12px; + transform: translateY(-50%); + pointer-events: none; + font-size: 14px; + font-family: 'Pretendard', sans-serif; + background: linear-gradient( + 90deg, + rgba(166, 255, 234, 0.25) 0%, + #a6ffea 40%, + rgba(166, 255, 234, 0.25) 80% + ); + background-size: 200% 100%; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: seo-shimmer 3s linear infinite; +} + +.seo-input-wrapper:has(.social-posting-textarea) .seo-shimmer-text { + top: 14px; + transform: none; +} + .social-posting-input:focus, .social-posting-select:focus, .social-posting-textarea:focus { @@ -10589,29 +10635,59 @@ .tutorial-tooltip { position: fixed; - width: 300px; - background: #1a2630; - border: 1px solid rgba(166, 255, 234, 0.25); - border-radius: 12px; - padding: 16px; pointer-events: all; z-index: 10002; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + display: flex; + width: 370px; + padding: 20px; + flex-direction: column; + gap: 8px; + border-radius: 12px; + border: 1px solid var(--Color-teal-600, #046266); + background: var(--Color-teal-800, #002224); } .tutorial-tooltip-title { - font-size: 15px; - font-weight: 700; - color: #a6ffea; - margin: 0 0 8px; + align-self: stretch; + color: rgba(255, 255, 255, 0.70); + /* 14 */ + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ } .tutorial-tooltip-desc { - font-size: 13px; - color: rgba(255, 255, 255, 0.75); - margin: 0 0 14px; + display: flex; + padding-bottom: 16px; + flex-direction: column; + align-items: flex-start; + gap: 4px; + align-self: stretch; line-height: 1.5; white-space: pre-line; + align-self: stretch; + color: var(--Color-white, #FFF); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 133.333% */ + letter-spacing: -0.108px; +} + +.tutorial-tooltip-note { + align-self: stretch; + color: rgba(255, 255, 255, 0.60); + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 100%; + letter-spacing: -0.072px; + margin: -8px 0 14px; + white-space: pre-line; } .tutorial-tooltip-footer { @@ -10620,23 +10696,35 @@ justify-content: space-between; } +.tutorial-tooltip-footer-left { + display: flex; + align-items: center; + gap: 8px; +} + .tutorial-tooltip-counter { + color: rgba(255, 255, 255, 0.60); + font-family: Pretendard; font-size: 12px; - color: rgba(255, 255, 255, 0.4); + font-style: normal; + font-weight: 400; + line-height: 100%; /* 12px */ + letter-spacing: -0.072px; } .tutorial-tooltip-actions { display: flex; - gap: 6px; + gap: 10px; } .tutorial-btn-skip { + color: rgba(255, 255, 255, 0.60); + font-family: Pretendard; font-size: 12px; - color: rgba(255, 255, 255, 0.4); - background: none; - border: none; - cursor: pointer; - padding: 4px 8px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 12px */ + letter-spacing: -0.072px; } .tutorial-btn-skip:hover { @@ -10644,13 +10732,20 @@ } .tutorial-btn-prev { + display: flex; + padding: 8px 12px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 4px; + background: var(--Color-teal-200, #9BCACC); + color: var(--Color-teal-800, #002224); + font-family: Pretendard; font-size: 13px; - color: rgba(255, 255, 255, 0.7); - background: rgba(255, 255, 255, 0.08); - border: none; - border-radius: 6px; - cursor: pointer; - padding: 5px 12px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 13px */ + letter-spacing: -0.078px; } .tutorial-btn-prev:hover { @@ -10658,17 +10753,66 @@ } .tutorial-btn-next { + display: flex; + padding: 8px 12px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 4px; + background: var(--Color-teal-200, #9BCACC); + color: var(--Color-teal-800, #002224); + font-family: Pretendard; font-size: 13px; - color: #fff; - background: #6366f1; - border: none; - border-radius: 6px; - cursor: pointer; - padding: 5px 12px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 13px */ + letter-spacing: -0.078px; } .tutorial-btn-next:hover { - background: #4f46e5; + background: rgba(255, 255, 255, 0.14); +} + +/* 말풍선 variant — 색상은 기본 tooltip과 동일, 꼬리만 추가 */ +.tutorial-tooltip-bubble { + border-radius: 12px; +} + +/* 꼬리 (화살표) */ +.tutorial-tooltip-bubble::before { + content: ''; + position: absolute; + width: 0; + height: 0; + border: 10px solid transparent; +} + +.tutorial-tooltip-bubble--bottom::before { + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-bottom-color: #1a2630; +} + +.tutorial-tooltip-bubble--top::before { + top: 100%; + left: 50%; + transform: translateX(-50%); + border-top-color: #1a2630; +} + +.tutorial-tooltip-bubble--right::before { + right: 100%; + top: 50%; + transform: translateY(-50%); + border-right-color: #1a2630; +} + +.tutorial-tooltip-bubble--left::before { + left: 100%; + top: 50%; + transform: translateY(-50%); + border-left-color: #1a2630; } .tutorial-tooltip-action-hint { diff --git a/src/components/SocialPostingModal.tsx b/src/components/SocialPostingModal.tsx index 772ad94..08817cb 100644 --- a/src/components/SocialPostingModal.tsx +++ b/src/components/SocialPostingModal.tsx @@ -440,6 +440,7 @@ const SocialPostingModal: React.FC = ({ onNext={tutorial.nextHint} onPrev={tutorial.prevHint} onSkip={tutorial.skipTutorial} + groupProgress={tutorial.groupProgress} /> )} @@ -565,48 +566,60 @@ const SocialPostingModal: React.FC = ({ - setTitle(e.target.value)} - placeholder={isLoadingAutoDescription ? t('social.autoSeoTitle') : t('social.postTitlePlaceholder')} - // placeholder={t('social.postTitlePlaceholder')} - className="social-posting-input" - maxLength={100} - disabled={isLoadingAutoDescription} - /> +
+ setTitle(e.target.value)} + placeholder={isLoadingAutoDescription ? '' : t('social.postTitlePlaceholder')} + className="social-posting-input" + maxLength={100} + disabled={isLoadingAutoDescription} + /> + {isLoadingAutoDescription && ( + {t('social.autoSeoTitle')} + )} +
{title.length}/100 {/* Description */}
-