-
- 
-
-
-
-
-
+ return (
+
+
)
diff --git a/frontend/src/widgets/home-faq/ui/HomeFaq.tsx b/frontend/src/widgets/home-faq/ui/HomeFaq.tsx
index 59428efb..1edd441a 100644
--- a/frontend/src/widgets/home-faq/ui/HomeFaq.tsx
+++ b/frontend/src/widgets/home-faq/ui/HomeFaq.tsx
@@ -1,3 +1,5 @@
+import { Reveal } from '@/shared/ui'
+
const faqs = [
{
q: 'Stack Up은 무료 크레딧을 제공하나요?',
@@ -9,74 +11,66 @@ const faqs = [
},
{
q: 'GitHub 외 다른 로그인은 가능한가요?',
- a: '개발자를 위한 서비스이고 레포 분석이 핵심 기능이라, MVP단계에선 GitHub OAuth만 제공합니다.',
+ a: '개발자를 위한 서비스이고 레포 분석이 핵심 기능이라, MVP 단계에선 GitHub OAuth만 제공합니다.',
},
{
q: '꼬리질문은 얼마나 빨리 받을 수 있나요?',
- a: '평균 3초 이내 응답을 목표로 합니다. Flash 모델과 사전 구축 RAG 인덱스로 지연을 최소화해요.',
+ a: '평균 3초 이내 응답을 목표로 합니다. 저지연 모델과 사전 구축한 검색 인덱스로 지연을 최소화해요.',
},
{
q: '음성 분석은 어떻게 동작하나요?',
- a: 'WebRTC로 마이크·웹캠 스트림을 받아 말 속도(WPM)·간투어를 분석합니다. 권한을 거부하면 텍스트 입력으로 진행할 수 있어요.',
+ a: '마이크 스트림을 받아 말 속도(어절/분)·무음 구간·간투어를 측정합니다. 권한을 거부하면 텍스트 입력으로 진행할 수 있어요.',
},
]
export function HomeFaq() {
return (
-
+
+
-
+
- Ready to level up? + 첫 면접, 지금 시작해보세요
-- 지금 GitHub 계정만 연결하면, 30초 안에 첫 모의면접이 시작됩니다. +
+ GitHub 계정을 연결하면 자료 분석부터 바로 시작됩니다.
- Get Started - - → - + GitHub으로 시작하기
-
- FAQ -
- -- Questions, answered. -
- - - -
-
-
+ {label}
+
+
+
+
+ {value.toFixed(1)}
+
+ {weakest ? (
+
+ 최저
+
+ ) : (
+
+ )}
+
+ )
+}
+
+/** 가장 낮은 축을 겨냥해 꼬리질문이 만들어지는 흐름. */
+export function FollowupVisual() {
+ return (
+
+
+ )
+}
+
+/** 점수에 근거와 인용이 붙는 화면. */
+export function ScoringVisual() {
+ return (
+
+
+ )
+}
+
+export function DeliveryVisual() {
+ const metrics = [
+ { label: '말 속도', value: '142', unit: '어절/분' },
+ { label: '무음', value: '4.2', unit: '초' },
+ { label: '간투어', value: '8', unit: '회' },
+ ]
+ return (
+
+
+ )
+}
diff --git a/frontend/src/widgets/home-hero/ui/HeroPreview.tsx b/frontend/src/widgets/home-hero/ui/HeroPreview.tsx
new file mode 100644
index 00000000..45cb3e38
--- /dev/null
+++ b/frontend/src/widgets/home-hero/ui/HeroPreview.tsx
@@ -0,0 +1,81 @@
+/**
+ * 히어로의 제품 미리보기 — 실제 면접 화면의 한 장면을 그대로 재현한다.
+ *
+ * 스톡 사진 대신 제품 UI 를 보여주는 이유: 랜딩에서 증명해야 하는 건 "분위기"가 아니라
+ * "답변을 파고드는 꼬리질문 + 근거 있는 4축 채점"이라는 동작이다.
+ * 데이터는 시연용 고정값(제품 문구·채점 축은 실제 스키마와 동일).
+ */
+
+const SCORES = [
+ { label: '구체성', value: '3.5' },
+ { label: '논리', value: '4.0' },
+ { label: '구조', value: '부분 STAR' },
+ { label: '정확성', value: '4.5' },
+]
+
+export function HeroPreview() {
+ return (
+
-
-
-
- 여기에 없는 궁금증은 Contact 페이지에서 이어서 답해드려요. -
- +
+ {/* 헤딩은 다른 섹션과 같은 좌측 거터에 맞추고, 목록만 읽기 좋은 폭으로 제한. */}
+
diff --git a/frontend/src/widgets/home-features/index.ts b/frontend/src/widgets/home-features/index.ts
new file mode 100644
index 00000000..529f59fc
--- /dev/null
+++ b/frontend/src/widgets/home-features/index.ts
@@ -0,0 +1 @@
+export { HomeFeatures } from './ui/HomeFeatures'
diff --git a/frontend/src/widgets/home-features/ui/FeatureVisuals.tsx b/frontend/src/widgets/home-features/ui/FeatureVisuals.tsx
new file mode 100644
index 00000000..f452d95a
--- /dev/null
+++ b/frontend/src/widgets/home-features/ui/FeatureVisuals.tsx
@@ -0,0 +1,163 @@
+/**
+ * 기능 섹션의 제품 UI 조각들. 값은 시연용 고정값이지만 축 이름·등급·지표는 실제 스키마와 같다.
+ * (채점 4축, 면접관 패널 라벨, 전달력 지표 = WPM·무음·간투어)
+ */
+
+function Card({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+ 자주 묻는 질문
+
+
- - Contact - - → - - -
-
- {faqs.map((f) => (
-
-
- -
- - {f.q} - - + {faqs.map((f, i) => ( +
+ ))}+++- + {f.a} + + ++ + {f.q} + + + + + +
+- + - - -
- {f.a} --
+ {children}
+
+ )
+}
+
+function AxisRow({
+ label,
+ value,
+ max = 5,
+ weakest = false,
+}: {
+ label: string
+ value: number
+ max?: number
+ weakest?: boolean
+}) {
+ return (
+ 직전 답변 채점
+ -
+
+
+ 구체성을 겨냥한 꼬리질문
+
+
+ + “숫자로 말씀해 주세요. 개선 전후 p99 응답시간이 어떻게 바뀌었나요?” +
+
+ 기술 정확도·깊이
+ 79
+
+
+
+
+
+ 점수 근거
+ + Q3에서 동시성 제어를 RDB 락으로만 설명해 분산 환경 고려가 빠졌습니다. +
+-
+ {['이력서 > 결제 시스템 개선', 'pay-api > OrderService.java'].map((s) => (
+
- + + {s} + + ))} +
+
+ )
+}
+
+export function PanelVisual() {
+ const rows = [
+ { label: '백엔드', v: 79 },
+ { label: '논리', v: 85 },
+ { label: '전달', v: 88 },
+ ]
+ return (
+ -
+ {metrics.map((m) => (
+
- {m.label} +
- + {m.value} + {m.unit} + +
+
+ ))}
+
+
+ )
+}
+
+export function ReportVisual() {
+ return (
+ -
+ {rows.map((r) => (
+
- + {r.label} 면접관 + {r.v} + + ))} +
+ 종합
+ 82
+
+
+
+ )
+}
diff --git a/frontend/src/widgets/home-features/ui/HomeFeatures.tsx b/frontend/src/widgets/home-features/ui/HomeFeatures.tsx
new file mode 100644
index 00000000..d210efe8
--- /dev/null
+++ b/frontend/src/widgets/home-features/ui/HomeFeatures.tsx
@@ -0,0 +1,98 @@
+import { Reveal } from '@/shared/ui'
+import {
+ DeliveryVisual,
+ FollowupVisual,
+ PanelVisual,
+ ReportVisual,
+ ScoringVisual,
+} from './FeatureVisuals'
+
+const headingStyle = {
+ fontSize: 'clamp(26px, 3vw, 38px)',
+ lineHeight: 1.28,
+ letterSpacing: '-0.03em',
+ wordBreak: 'keep-all',
+} as const
+
+const rows = [
+ {
+ eyebrow: '꼬리질문',
+ title: '답을 흐리면\n그 지점을 다시 묻습니다',
+ desc: '답변을 구체성·논리·구조·정확성으로 채점하고, 가장 낮게 나온 축을 겨냥해 다음 질문을 만듭니다. 실제 면접에서 파고드는 방식과 같습니다.',
+ visual:
+ stack-up.shop/share/a1b2c3
+ 복사
+
+
+
+ PDF 저장
+
+
+ 링크 공유
+
+
+
+ {rows.map((r, i) => (
+
+ 0 ? 'mt-24 lg:mt-32' : ''
+ }`}
+ >
+
+ {r.eyebrow}
+
+
+ {r.visual}
+
+
+ ))}
+
+ + {r.title} +
++ {r.desc} +
+-
+ {cards.map((c, i) => (
+
+
+ {c.title}
++ {c.desc} +
+{c.visual}
+
+
+ )
+}
diff --git a/frontend/src/widgets/home-hero/ui/HomeHero.tsx b/frontend/src/widgets/home-hero/ui/HomeHero.tsx
index 5f922edf..97909f34 100644
--- a/frontend/src/widgets/home-hero/ui/HomeHero.tsx
+++ b/frontend/src/widgets/home-hero/ui/HomeHero.tsx
@@ -1,37 +1,83 @@
-import { Laptop } from './Laptop'
-import { ScreenContent } from './ScreenContent'
+import { Link } from 'react-router-dom'
+import { useGetStartedTarget } from '@/features/auth'
+import { Reveal } from '@/shared/ui'
+import { HeroPreview } from './HeroPreview'
+
+const SOURCES = ['GitHub 레포', '이력서', '자소서']
export function HomeHero() {
+ const getStartedTo = useGetStartedTarget()
+
return (
-
+
+
+
+
+
+
+ 면접 진행 중
+ · 4번째 질문
+
+
+ 프로젝트 심층
+
+
+
+
+
+
+ 면접관
+
+
+ + 결제 처리에 outbox 패턴을 도입했다고 쓰셨는데, 메시지 발행과 DB 커밋의 원자성은 + 어떻게 보장했나요? +
+근거 · 이력서 > 결제 시스템 개선
+
+
+
+ 내 답변
+
+
+ + 트랜잭션 안에서 outbox 테이블에 같이 저장하고, 별도 워커가 폴링해서 발행했습니다. +
+
+
+
+
+ 면접관
+
+ 꼬리질문
+
+
+
+
+ + 폴링 주기 사이에 중복 발행이 생길 수 있는데, 컨슈머 쪽 멱등성은 어떻게 처리하셨나요? +
+
+
+ 직전 답변 채점
+ -
+ {SCORES.map((s) => (
+
- {s.label} +
- {s.value} +
+
+ ))}
+
-
-
-
-
+
)
diff --git a/frontend/src/widgets/home-hero/ui/Laptop.tsx b/frontend/src/widgets/home-hero/ui/Laptop.tsx
deleted file mode 100644
index a0c505a0..00000000
--- a/frontend/src/widgets/home-hero/ui/Laptop.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { ReactNode } from 'react'
-
-export function Laptop({ children }: { children: ReactNode }) {
- return (
-
-
- )
-}
diff --git a/frontend/src/widgets/home-services/ui/HomeServices.tsx b/frontend/src/widgets/home-services/ui/HomeServices.tsx
index fb46d7e0..a0e08b2d 100644
--- a/frontend/src/widgets/home-services/ui/HomeServices.tsx
+++ b/frontend/src/widgets/home-services/ui/HomeServices.tsx
@@ -1,31 +1,34 @@
import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
-import { Modal } from '@/shared/ui'
+import { Modal, Reveal } from '@/shared/ui'
type ServiceCard = {
- tag: string
+ plan: 'Pro' | 'Free'
title: string
- image: string
+ desc: string
+ tags: string[]
} & ({ to: string } | { modal: 'role' })
const services: ServiceCard[] = [
{
- tag: 'Pro Plan',
- title: '이력서 심층 면접\nExperience Interview',
- image: '/second-section-frontend-interview.png',
+ plan: 'Pro',
+ title: '이력서 심층 면접',
+ desc: '올려둔 이력서·자소서·GitHub 레포에서 질문을 만들고, 답변을 꼬리질문으로 파고듭니다.',
+ tags: ['이력서', '자소서', 'GitHub'],
to: '/sessions/new',
},
{
- tag: 'Free Plan',
- title: '직무 기술 면접\nRole-based Interview',
- image: '/second-section-backend-interview.avif',
- // 직무는 프론트/백엔드를 모달에서 고른 뒤 해당 연습으로 이동.
+ plan: 'Free',
+ title: '직무 기술 면접',
+ desc: '프론트엔드·백엔드에서 자주 나오는 기술 질문을 골라 가볍게 연습합니다.',
+ tags: ['프론트엔드', '백엔드'],
modal: 'role',
},
{
- tag: 'Free Plan',
- title: 'CS 전공 지식 면접\nCS Core Interview',
- image: '/second-section-cs-interview.webp',
+ plan: 'Free',
+ title: 'CS 전공 지식 면접',
+ desc: '운영체제·네트워크·데이터베이스 같은 전공 필수 개념을 점검합니다.',
+ tags: ['OS', '네트워크', 'DB'],
to: '/practice/cs',
},
]
@@ -36,42 +39,47 @@ const ROLE_OPTIONS = [
] as const
const cardClass =
- 'group relative block rounded-2xl overflow-hidden aspect-[3/4] bg-sage-800 text-left'
+ 'group flex h-full w-full flex-col rounded-2xl border border-border bg-surface-raised p-6 text-left transition-colors duration-fast hover:border-border-strong lg:p-7'
function CardInner({ card }: { card: ServiceCard }) {
return (
<>
- 
-
-
-
- {card.tag}
-
-
-
- - - Now Live · AI Based Interview - -
+
+
+
+
+
+
+
+
+ 내 이력서를 아는
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+ {SOURCES.map((s) => (
+
- + {s} + + ))} +
+ 내 이력서를 아는
+
+ 면접관과 연습하세요
+
+ + 올려둔 자료에서 질문을 만들고, 답변이 얕은 지점을 꼬리질문으로 파고듭니다. 끝나면 + 근거가 붙은 리포트를 받습니다. +
+
+
+ GitHub으로 시작하기
+
+
+ 어떻게 동작하나요?
+
+
+ + 계정 연결만 하면 바로 시작 · 월 2회 무료 +
+
- {/* Lid */}
-
- )
-}
diff --git a/frontend/src/widgets/home-hero/ui/ScreenContent.tsx b/frontend/src/widgets/home-hero/ui/ScreenContent.tsx
deleted file mode 100644
index b2d37f94..00000000
--- a/frontend/src/widgets/home-hero/ui/ScreenContent.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Link } from 'react-router-dom'
-import { useGetStartedTarget } from '@/features/auth'
-import { useTypewriter } from '@/shared/hooks'
-
-const TYPED_TEXT = 'Stack Up'
-
-export function ScreenContent() {
- const { typed, done } = useTypewriter(TYPED_TEXT, {
- startDelayMs: 850,
- stepMs: 130,
- })
- const getStartedTo = useGetStartedTarget()
-
- return (
-
- {/* Bezel */}
-
-
- {/* Base / hinge */}
-
- {/* Camera dot */}
-
-
- {/* Screen */}
-
-
- {children}
-
-
-
-
-
-
-
- )
-}
diff --git a/frontend/src/widgets/home-quote/index.ts b/frontend/src/widgets/home-quote/index.ts
deleted file mode 100644
index e685ef69..00000000
--- a/frontend/src/widgets/home-quote/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { HomeQuote } from './ui/HomeQuote'
diff --git a/frontend/src/widgets/home-quote/ui/HomeQuote.tsx b/frontend/src/widgets/home-quote/ui/HomeQuote.tsx
deleted file mode 100644
index 842a2410..00000000
--- a/frontend/src/widgets/home-quote/ui/HomeQuote.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-export function HomeQuote() {
- return (
- - IT Interview Solution -
- -- {typed} - -
- -
-
- Get Started
-
- →
-
-
-
-
-
-
-
-
- {/* decorative left panel */}
-
-
-
-
-
-
- {/* quote panel */}
-
-
-
- Stack Up
-
-
-
-
- “
-
-
- -- -- Stack Up은 직군을 가리지 않는 올인원 모의 면접 솔루션입니다. 이력서·자소서· - GitHub 레포에서 출발해, 답변의 깊이까지 따라 들어갑니다. -
-
-
-
- 전 직군 · 맞춤 질문 · 음성·비언어 분석까지
-
-
-
-
- {card.title} -
+
+
+ {card.plan}
+
→
+
+ {card.title}
++ {card.desc} +
+ +-
+ {card.tags.map((t) => (
+
- + {t} + + ))} +
-
+ setRoleOpen(false)} title="직무 기술 면접">
diff --git a/frontend/src/widgets/home-steps/index.ts b/frontend/src/widgets/home-steps/index.ts
new file mode 100644
index 00000000..e877939e
--- /dev/null
+++ b/frontend/src/widgets/home-steps/index.ts
@@ -0,0 +1 @@
+export { HomeSteps } from './ui/HomeSteps'
diff --git a/frontend/src/widgets/home-steps/ui/HomeSteps.tsx b/frontend/src/widgets/home-steps/ui/HomeSteps.tsx
new file mode 100644
index 00000000..f3ff9de8
--- /dev/null
+++ b/frontend/src/widgets/home-steps/ui/HomeSteps.tsx
@@ -0,0 +1,137 @@
+import type { ReactNode } from 'react'
+import { Reveal } from '@/shared/ui'
+
+function Check() {
+ return (
+
+ )
+}
+
+/** 카드 안에서 결과물을 실제 UI 조각으로 보여주는 미니 패널. */
+function Panel({ children }: { children: ReactNode }) {
+ return (
+
+
+ ),
+ },
+ {
+ no: '02',
+ title: '맞춤 면접',
+ desc: '내 경험에서 나온 질문에 답하고, 얕은 지점은 꼬리질문으로 다시 묻습니다.',
+ panel: (
+
+
+ ),
+ },
+ {
+ no: '03',
+ title: '리포트',
+ desc: '점수와 함께 어디서 왜 깎였는지, 자료의 어느 대목이 근거인지 남습니다.',
+ panel: (
+
+
+ ),
+ },
+]
+
+export function HomeSteps() {
+ return (
+
+
+ )
+}
diff --git a/frontend/src/widgets/site-footer/ui/SiteFooter.tsx b/frontend/src/widgets/site-footer/ui/SiteFooter.tsx
index e8204f81..e1d42f98 100644
--- a/frontend/src/widgets/site-footer/ui/SiteFooter.tsx
+++ b/frontend/src/widgets/site-footer/ui/SiteFooter.tsx
@@ -1,5 +1,4 @@
import { Link } from 'react-router-dom'
-import { useGetStartedTarget } from '@/features/auth'
// 단순 뷰 섹션 widgets 에선 굳이 나누지 않는게 좋다고 판단했습니다.
// 상수, 메세지 등 마찬가지
@@ -8,83 +7,56 @@ type FooterLink = { label: string; to?: string; href?: string }
const columns: { title: string; links: FooterLink[] }[] = [
{
- title: 'Company',
+ title: '서비스',
links: [
- { label: 'Home', to: '/#top' },
- { label: 'About', to: '/#quote' },
- { label: 'FAQ', to: '/#faq' },
+ { label: '이력서 심층 면접', to: '/sessions/new' },
+ { label: '직무 기술 면접', to: '/practice/role' },
+ { label: 'CS 전공 면접', to: '/practice/cs' },
],
},
{
- title: 'Services',
+ title: '둘러보기',
links: [
- { label: '이력서 심층 면접', to: '/sessions/new' },
- { label: '직무 기술 면접', to: '/practice/role' },
- { label: 'CS 전공 면접', to: '/practice/cs' },
+ { label: '기능', to: '/#features' },
+ { label: '동작 방식', to: '/#how' },
+ { label: 'FAQ', to: '/#faq' },
],
},
{
- title: 'Resources',
+ title: '리소스',
links: [
- { label: 'Workspace', to: '/workspace' },
- { label: 'Design System', to: '/design-system' },
+ { label: '워크스페이스', to: '/workspace' },
+ { label: '디자인 시스템', to: '/design-system' },
{ label: 'GitHub', href: 'https://github.com/Team-StackUp/stackup' },
],
},
]
export function SiteFooter() {
- const getStartedTo = useGetStartedTarget()
return (
-
- Our Services -
+
+
+
-
+ 지금 필요한 면접을 고르세요 +
++ 이력서 기반 심층 면접부터 전공 개념 점검까지, 준비 단계에 맞게 고를 수 있습니다. +
+
- {services.map((s) =>
- 'to' in s ? (
-
-
+ -
+ {services.map((s, i) => (
+
{children}
+ )
+}
+
+const steps = [
+ {
+ no: '01',
+ title: '자료 연결',
+ desc: 'GitHub 레포와 이력서·자소서를 올리면 알아서 읽고 정리합니다.',
+ panel: (
+ -
+ {['이력서.pdf', 'github.com/me/pay-api', '자소서 3문항'].map((t) => (
+
-
+
+ {t} + 분석 완료 +
+ ))}
+
+
+ 기술 선택
+
+
+ 꼬리질문
+
+
+ + “왜 Kafka 대신 RabbitMQ 였나요?” +
+-
+ {[
+ { label: '종합', v: 82 },
+ { label: '기술', v: 79 },
+ { label: '전달력', v: 88 },
+ ].map((r) => (
+
- + {r.label} + + + + + {r.v} + + + ))} +
+
+
+
+
+ + 면접 준비는 3단계로 끝납니다 +
++ 질문을 직접 고르거나 답을 미리 외울 필요가 없습니다. +
+-
+ {steps.map((s, i) => (
+
+ {s.no}
+
+ {s.title}
++ {s.desc} +
+{s.panel}
+