-
+
+ {q.label}
+
+ 응답자가 {MIN_GROUP}명보다 적어서 숨겼어요. 누가 답했는지 알아볼 수 없게 하려고요.
+
+
-
-
- {/^\d{4}/.test(e.title) ? (
- <>
- {e.title.split(' ')[0]} {e.title.split(' ').slice(1).join(' ')}
-
- ) : (
- e.title
- )}
-
-
- {DESCRIPTION}
-
- {open && (
+
+
+ 
+
{steps.length > 0 && (
-
-
- {e.sample && 예시 }
- {status && {status} }
-
-
+
+
+ {/^\d{4}/.test(e.title) ? (
+ <>
+ {e.title.split(' ')[0]} {e.title.split(' ').slice(1).join(' ')}
+
+ ) : (
+ e.title
+ )}
+
+
+ {DESCRIPTION}
+
+ {open && (
+
+
+ {e.sample && 예시 }
+ {result ? (
+ {result.total.toLocaleString()}명이 답했어요
+ ) : open ? (
<>
-
- 설문 시작하기
-
- 응답 받는 중
+ {e.closesAt && {koDate(e.closesAt)} 마감 }
- )}
- {result && (
-
- 결과 보기
-
+ ) : (
+ e.resultsAt && {koDate(e.resultsAt)}에 결과를 공개해요
)}
-
-
- 10분 안팎
-
-
- 로그인도 이메일도 필요 없어요
-
-
+
+
+
+ 설문 시작하기
+ )}
+ {result && (
+
+ 결과 보기 -
+
-
+
+ 10분 안팎 +
+ -
+
+ 로그인도 이메일도 필요 없어요 +
+
+
-
- 일정
-
-
-
- {steps.map((step, i) => (
-
-
+ +)} {topics.length > 0 && ( -++
+ 일정 + + {!result && e.resultsAt && ( + -- {i === current ? '지금' : step.label} - -- {step.date} - -{step.note} - - ))} + 결과를 어떻게 분석하나요+ + )} + -
+ {steps.map((step, i) => {
+ const done = i <= current
+ const last = i === steps.length - 1
+ return (
+
-
+
+
+ {i === current ? `${step.label} · 지금` : step.label} + + {step.date} +{step.note} +
+ )
+ })}
- - )} - --)} + {e.devTypes && ( -+ + ++-무엇을 묻나요 -+ {topics.length}가지 주제를 물어요. 본인 상황에 맞는 질문만 나와서 10분 안팎이면 끝나요. -
- {topics.map((t) => {
- const highlight = t.id === 'ai'
- return (
-
-
+ {featured && (
+ + -+ )} +
- {t.title} - - ) - })} - + + + + 올해의 주제 + {featured.title.replace(/^올해의 주제\s*/, '')} ++-
+ {topics
+ .filter((t) => t.id !== FEATURED)
+ .map((t) => (
+
-
+
+
+ + {t.title} +
+ ))}
+
-
+
+
- --- 끝까지 답하면 나의 개발자 유형을 알려 드려요 + + +@@ -215,10 +304,10 @@ function EditionPage() { )}+끝까지 답하면
++ 나의 개발자 유형을 알려 드려요 -여섯 가지 유형 가운데 하나와 함께, 2027년 커리어를 내다보는 한 줄도 받아 볼 수 있어요. 친구에게 공유해 보세요. ++ 여섯 가지 유형 가운데 하나와 함께, 2027년 커리어를 내다보는 한 줄도 받아 볼 수 있어요. 친구에게 공유해 보세요. + - +diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 302ecfe..d93febb 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,10 +1,11 @@ import { Link, createFileRoute } from '@tanstack/react-router' -import { Card, Heading, Text } from 'daleui' +import { Heading, Icon, Text } from 'daleui' import { EditionList } from '@/components/EditionList' import { SiteFooter } from '@/components/SiteFooter' import { SiteHeader } from '@/components/SiteHeader' import { openEditions } from '@/editions' -import { gradientBanner, gradientText, heroImage, heroWash } from '@/lib/brand' +import { koDate } from '@/lib/date' +import { ctaLink, eyebrow, gradientBanner, gradientText, heroFrame, heroImage, heroTitle, sectionTitle } from '@/lib/brand' import { ogImage } from '@/lib/og' const TITLE = '달레 스터디 개발자 설문조사' @@ -29,161 +30,267 @@ export const Route = createFileRoute('/')({ component: Landing, }) +type IconName = React.ComponentProps이 설문조사를 왜 하는지, 응답을 어떻게 다루는지 궁금하다면 - - 달레 스터디 개발자 설문조사 소개 보기+ + 달레 스터디 개발자 설문조사 소개 보기 ['name'] + const wrap: React.CSSProperties = { maxWidth: 1120, margin: '0 auto', padding: '0 24px', boxSizing: 'border-box' } -const section: React.CSSProperties = { ...wrap, padding: '96px 24px', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-40)' } -const cta: React.CSSProperties = { - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - minHeight: 52, - padding: '0 var(--spacing-24)', - borderRadius: 'var(--radii-md)', - background: 'var(--colors-bg-solid-brand)', - color: 'var(--colors-fg-solid-brand)', - fontSize: '1.125rem', - fontWeight: 500, - textDecoration: 'none', -} +const section: React.CSSProperties = { ...wrap, padding: '96px 24px', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-48)' } +const rule = '1px solid var(--colors-bg-neutral-hover)' +const brandRule = '1px solid var(--colors-bg-brand-active)' + +const REASONS = [ + { + title: '국내 개발자 설문조사는 명맥이 끊겼어요', + body: '2023년 이후로 국내 개발자만을 대상으로 꾸준히 하는 설문조사가 없어요. 그래서 국내 기술이나 업계 동향을 파악하기가 어려워졌어요.', + }, + { + title: '한국 소프트웨어 개발 현실에 맞는 질문을 해요', + body: 'SI와 SM, 원청과 하청 구조, 파견 근무, 신입 공채, 원화 연봉처럼 글로벌 설문조사에서는 묻지 않는 것들이에요.', + }, +] + +const PROMISES: { icon: IconName; title: string; body: string }[] = [ + { icon: 'eyeOff', title: '익명으로 답해요', body: '이름, 이메일, 로그인 정보를 수집하지 않아요. 연봉처럼 답하기 망설여지는 질문은 건너뛰어도 돼요.' }, + { icon: 'globe', title: '결과는 모두 공개해요', body: '응답이 마감되면 결과를 누구나 볼 수 있게 공개하고, 분석한 인사이트도 함께 나눠요.' }, + { icon: 'heartHandshake', title: '통계에만 써요', body: '집계된 응답은 분석과 통계를 내는 데만 쓰고, 영리 목적으로는 쓰지 않아요.' }, +] + +// Stack Overflow 2025 설문조사 응답자 가운데 한국 개발자 +const KOREA = 86 +const GLOBAL = 49_009 function Landing() { // 지금 응답을 받는 회차. 없으면 결과로 안내한다. const open = openEditions()[0] + const share = KOREA / GLOBAL return ( - - - --- 한국 개발자의 오늘을 함께 기록해요 + + -+ {open?.opensAt && ( + + + {open.id} + + {koDate(open.opensAt)}부터 응답을 받아요 +++ + )} + + 한국 개발자의 오늘을 + -
+ 함께 기록해요+ 한국 개발자가 어떻게 일하고 성장하는지, 그 이야기를 함께 모아요. 응답 하나하나가 모여 국내 개발 생태계를 읽는 인사이트가 돼요. - {open ? ( - - {open.title.replace(' 달레 스터디 개발자 설문조사', ' 설문조사')} 참여하기 - - ) : ( - - 결과 보기 - - )} ++ {open ? ( + + {open.title.replace(' 달레 스터디 개발자 설문조사', ' 설문조사')} 참여하기-+ + ) : ( + + 결과 보기 + + )} + + 왜 하나요? + 
+ -
+
10분 안팎 +로그인·이메일 없이 익명 +결과는 모두 공개 ++
+ + -글로벌 설문조사 속 한국은 너무 작아요 -+++왜 하나요
++ 글로벌 설문조사 속 한국은 너무 작아요 + ++ {/* 패널은 테마와 상관없이 짙은 바탕이라 글자색도 고정한다 */}---86명-- Stack Overflow 2025 설문조사 응답자 49,009명 가운데 한국 개발자 수예요. 0.2%밖에 안 돼요. ------ 국내 개발자 설문조사는 명맥이 끊겼어요 - -- 2023년 이후로 국내 개발자만을 대상으로 꾸준히 하는 설문조사가 없어요. 그래서 국내 기술이나 업계 동향을 파악하기가 어려워졌어요. - --+- 한국 소프트웨어 개발 현실에 맞는 질문을 해요 - -- SI와 SM, 원청과 하청 구조, 파견 근무, 신입 공채, 원화 연봉처럼 글로벌 설문조사에서는 묻지 않는 것들이에요. - +Stack Overflow 2025 설문조사 응답자
++ + {KOREA} + 명 + + / {GLOBAL.toLocaleString()}명 +
+++ {/* 실제 비율로는 보이지 않을 만큼 가늘어서 최소 폭을 둔다 */} + ++-
+ {REASONS.map((r, i) => (
+
- 0 && { marginTop: 32, paddingTop: 32, borderTop: rule }),
+ }}
+ >
+
+ ++
+ {r.title} + ++ {r.body} + +
+ ))}
+
+ -커뮤니티 설문조사라서 안심할 수 있어요 ---- -- -- - -익명으로 답해요 -- 이름, 이메일, 로그인 정보를 수집하지 않아요. 연봉처럼 답하기 망설여지는 질문은 건너뛰어도 돼요. - -- -- -- - -결과는 모두 공개해요 -- 응답이 마감되면 결과를 누구나 볼 수 있게 공개하고, 분석한 인사이트도 함께 나눠요. - -- +- -- - -통계에만 써요 -- 집계된 응답은 분석과 통계를 내는 데만 쓰고, 영리 목적으로는 쓰지 않아요. - -++약속
++ 커뮤니티 설문조사라서 안심할 수 있어요 + -
+ {PROMISES.map((p) => (
+
-
+
+
+ + + {p.title} + +{p.body} +
+ ))}
+
- -지금까지의 설문조사 ++ {open && ( -++ 지금까지의 설문조사 + - -)} - {q.type === 'multi' && ( --) } + +function Fact({ icon, children }: { icon: IconName; children: React.ReactNode }) { + return ( +10분이면 참여할 수 있어요-주변 개발자에게도 알려 주세요. 다양한 사람이 답할수록 결과가 더 의미 있어져요.++ +@@ -194,3 +301,12 @@ function Landing() {+- + 참여하기10분이면 참여할 수 있어요
+주변 개발자에게도 알려 주세요. 다양한 사람이 답할수록 결과가 더 의미 있어져요.
- +
+ ) +} From daa1fda83ed16029960cce89898f79a03271449f Mon Sep 17 00:00:00 2001 From: Dale Seo <5466341+DaleSeo@users.noreply.github.com> Date: Sun, 8 Nov 2026 20:05:24 -0500 Subject: [PATCH 2/2] feat: refine survey, results, and admin screens --- AGENTS.md | 2 +- docs/stack.md | 2 +- src/components/Admin.tsx | 21 +- src/components/DevTypeCard.tsx | 49 ++-- src/components/QuestionStep.tsx | 58 +++-- src/components/ResultChart.tsx | 31 +++ src/components/SiteHeader.tsx | 36 ++- src/components/UpcomingResults.tsx | 177 +++++++++------ src/routes/$edition.results.tsx | 330 +++++++++++++++++++-------- src/routes/$edition.survey.tsx | 344 +++++++++++++++++++---------- src/routes/$edition.type.$slug.tsx | 18 +- src/routes/admin.index.tsx | 15 +- src/routes/admin.raw.tsx | 51 ++++- src/routes/admin.tsx | 89 +++++--- 14 files changed, 832 insertions(+), 391 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 7ac56aa..9cf32bd 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -33,7 +33,7 @@ bun scripts/og-images.ts <임시 폴더> # 유형 공유 페이지 og:image **TanStack Start** on **Cloudflare Workers**, D1 + Drizzle, 달레 UI(`docs/stack.md`). -- 화면은 `src/routes/` 의 파일 기반 라우트다. 설문을 여는 버튼("설문 시작하기")은 회차 페이지(`/<회차>`)에만 두고, 홈과 유형 공유 페이지의 참여 버튼은 회차 페이지로 보낸다. 설문 진행 화면을 뺀 모든 화면에 `SiteHeader`·`SiteFooter` 를 둔다(헤더의 "결과" 메뉴는 예시가 아닌 결과가 생기면 저절로 나온다). 응답 완료·이미 응답·마감 화면은 `$edition.survey.tsx` 의 `Finished` 하나로 그린다. +- 화면은 `src/routes/` 의 파일 기반 라우트다. 설문을 여는 버튼("설문 시작하기")은 회차 페이지(`/<회차>`)에만 두고, 홈, 유형 공유 페이지, 헤더의 참여 버튼은 회차 페이지로 보낸다. 설문 진행 화면을 뺀 모든 화면에 `SiteHeader`·`SiteFooter` 를 둔다(헤더의 "결과" 메뉴는 예시가 아닌 결과가 생기면, "참여하기"는 응답을 받는 회차가 있으면 저절로 나온다). 응답 완료·이미 응답·마감 화면은 `$edition.survey.tsx` 의 `Finished` 하나로 그린다. - 마감은 회차의 `closesAt` 으로 정한다. 화면과 서버 함수가 함께 본다. 회차의 `opensAt` 전(`isBeta`)에는 종료 화면에 "다시 답하기"가 나온다. - 익명 설문이다. 로그인이 없고, 응답자를 알아볼 수 있는 값은 스키마에 칸을 두지 않는 것으로 지킨다. 개발자 유형도 브라우저에서만 계산한다. 서버와 브라우저에 무엇을 두는지는 `docs/data-model.md`. - 결과 화면은 `src/results/<회차>.json` 만 읽고 원본 응답을 모른다(집계 규칙은 `docs/data-model.md`). TanStack Charts(`src/components/ResultChart.tsx`)로 그리고, 보기 기준은 `?by=` 에 남는다. 차트 색은 dataviz 검증 스크립트를 통과한 값이다. diff --git a/docs/stack.md b/docs/stack.md index dc6b9fd..84741c6 100644 --- a/docs/stack.md +++ b/docs/stack.md @@ -25,7 +25,7 @@ Tally 같은 설문 도구 대신 직접 만든다. 응답 화면을 달레 UI - `worker-configuration.d.ts` — `bun run cf-typegen`. 저장소를 새로 받으면 `bun run test` 전에 한 번 돌린다(`tsconfig.json` 이 이 파일을 읽는다). 시크릿 타입은 `wrangler types` 가 모르므로 `src/env.d.ts` 에 더한다. - **Worker 바인딩**은 서버 코드에서 `import { env } from 'cloudflare:workers'` 로 읽는다. - **타입 검사 범위:** `tsconfig.json` 이 `*.test.ts` 와 `scripts/` 를 뺀다. `bun test` 는 타입을 보지 않으므로, 테스트와 스크립트의 타입 오류는 실행해야 드러난다. -- **스타일:** 달레 UI 컴포넌트를 먼저 쓰고, 배치는 인라인 `style` 에 달레 UI CSS 변수(`var(--colors-…)`, `var(--spacing-…)`)로 한다. 별도 CSS 프레임워크는 없다. +- **스타일:** 달레 UI 컴포넌트를 먼저 쓰고, 배치는 인라인 `style` 에 달레 UI CSS 변수(`var(--colors-…)`, `var(--spacing-…)`)로 한다. 별도 CSS 프레임워크는 없다. 여러 화면이 같이 쓰는 제목 단계, 첫 화면 액자, 주 행동 링크, 브랜드 그라데이션은 `src/lib/brand.ts` 에 둔다. 인라인으로 할 수 없는 `:hover`, `:focus-visible`, 화면 너비별 규칙만 컴포넌트 안의 ` ++ {children} + @@ -82,12 +104,6 @@ export function QuestionStep({ question: q, value, error, onPick, onToggle, onTe-@@ -28,11 +45,11 @@ export function QuestionStep({ question: q, value, error, onPick, onToggle, onTe {!q.required &&건너뛰어도 돼요 }+ {q.label} {q.help && ( -+ {q.help} )} @@ -44,26 +61,31 @@ export function QuestionStep({ question: q, value, error, onPick, onToggle, onTe aria-labelledby="question" style={{ display: 'grid', - gridTemplateColumns: q.options.length >= 9 ? 'repeat(auto-fill, minmax(220px, 1fr))' : '1fr', - gap: 'var(--spacing-8)', - maxWidth: q.options.length >= 9 ? 640 : 440, + gridTemplateColumns: many ? 'repeat(auto-fill, minmax(min(100%, 220px), 1fr))' : '1fr', + gap: 10, }} > - {q.options.map((o) => { + {q.options.map((o, i) => { const on = q.type === 'multi' ? picked.includes(o.code) : value === o.code return ( - + + {o.label} + {i < KEY_OPTIONS && ( + + {i + 1} + + )} + ) })}- {picked.length}개 골랐어요. {q.limit ? `최대 ${q.limit}개까지 고를 수 있어요.` : '여러 개 골라도 돼요.'} - - )} - {q.type === 'scale' && q.scale && (`${Math.round(share * 100)}%` @@ -37,6 +43,21 @@ function withHeadroom(rows: Row[]) { return scaleLinear().domain([0, Math.max(0.01, ...rows.map((r) => r.share)) * 1.18]) } +// 쌓은 막대 칸의 가운데. 막대는 3점 칸의 가운데를 0에 두고 양쪽으로 쌓는다(stack 의 anchor 와 같은 기준). +function likertLabels(rows: Row[]) { + const byLabel = new Map{/* 좁은 화면에서는 로고 마크가 달레 스터디를 대신한다 */} - + {/* 참여 버튼이 있으면 소셜 아이콘도 숨긴다. 같은 링크가 하단(SiteFooter)에 있다 */} + 달레 스터디 개발자 설문조사 @@ -37,6 +42,7 @@ export function SiteHeader() { href="https://linkedin.com/company/dalestudy" target="_blank" rel="noopener noreferrer" + className="site-social" aria-label="달레 스터디 링크드인" style={{ display: 'inline-flex', padding: 'var(--spacing-8)', margin: 'calc(var(--spacing-8) * -1)', color: 'inherit' }} > @@ -46,6 +52,7 @@ export function SiteHeader() { href="https://dales.link/discord" target="_blank" rel="noopener noreferrer" + className="site-social" aria-label="달레 스터디 디스코드" style={{ display: 'inline-flex', padding: 'var(--spacing-8)', margin: 'calc(var(--spacing-8) * -1)', color: 'inherit' }} > @@ -55,11 +62,34 @@ export function SiteHeader() { href="https://github.com/DaleStudy/survey" target="_blank" rel="noopener noreferrer" + className="site-social" aria-label="GitHub 저장소" style={{ display: 'inline-flex', padding: 'var(--spacing-8)', margin: 'calc(var(--spacing-8) * -1)', color: 'inherit' }} >+ {showJoin && ( + + 참여하기 + + )} - -diff --git a/src/routes/$edition.results.tsx b/src/routes/$edition.results.tsx index 17276c5..f0e233e 100644 --- a/src/routes/$edition.results.tsx +++ b/src/routes/$edition.results.tsx @@ -1,5 +1,6 @@ import { Link, createFileRoute, notFound } from '@tanstack/react-router' import { Heading, Icon, Tag, Text } from 'daleui' +import { useEffect, useState } from 'react' import { findEdition } from '@/editions' import { SiteFooter } from '@/components/SiteFooter' import { SiteHeader } from '@/components/SiteHeader' @@ -35,29 +36,49 @@ const percent = (share: number) => `${Math.round(share * 100)}%` function QuestionResult({ q, breakdown }: { q: QuestionStat; breakdown?: Breakdown }) { const groups = breakdown?.questions[q.id] + if (q.hidden) { + return ( ++ + -+{koDate(e.resultsAt)} 공개 -{e.title} 결과 -+ + {e.title} 결과 + +{open ? `지금 응답을 모으고 있어요. 마감 뒤 분석을 거쳐 ${koDate(e.resultsAt)}에 누구나 볼 수 있게 공개해요.` : `응답을 마감하고 분석하고 있어요. ${koDate(e.resultsAt)}에 누구나 볼 수 있게 공개해요.`} {open && ( - - 설문 참여하기 + + 설문 참여하기)} - + -
+ {stages.map((s, i) => (
+
-
+
+ ++
+ {i === now ? `${s.label} · 지금` : s.label} + + {s.date &&{s.date} } +
+ ))}
+
- + + - {sections.length > 0 && ( -++어떻게 분석하나요 --
- {method.map((m) => (
+
-
-
- {m.title} -- {m.body} - + ++ {m.title} + +{m.body}
))}
-
-
+ {method.map((m, i) => (
- -+ )} + ++ {sections.length > 0 && ( + + -++-무엇을 공개하나요 -설문에서 물은 주제를 모두 공개해요. +설문에서 물은 주제를 모두 공개해요. -
+
-
- -+{s.title} -- {s.count}문항 - -+ {s.title} + ++ {s.count}문항 +
))}
-
{sections.map(([id, s]) => (
- - 읽을 때 알아 두세요 - -- 스스로 참여한 분들의 답이라서 한국 개발자 전체를 그대로 대표하지는 않아요. 결과 화면에는 문항마다 몇 명이 답했는지 함께 적어요. - ++ +++ +++ 읽을 때 알아 두세요 + ++ 스스로 참여한 분들의 답이라서 한국 개발자 전체를 그대로 대표하지는 않아요. 결과 화면에는 문항마다 몇 명이 답했는지 함께 적어요. + ++ + ) + } return ( -+ - -- {q.hidden ? ( -- {q.label} - -- {q.answered.toLocaleString()}명이 답했어요.{q.type === 'multi' ? ' 여러 개 고를 수 있어서 합이 100%를 넘어요.' : ''} - {q.mean !== undefined ? ` 평균 ${q.mean.toFixed(1)}점이에요.` : ''} - --- 응답자가 {MIN_GROUP}명보다 적어서 숨겼어요. 누가 답했는지 알아볼 수 없게 하려고요. ++ ++ {q.type === 'long' ? ( ++- ) : q.type === 'long' ? ( -+ {q.label} + ++ {q.answered.toLocaleString()}명이 답했어요.{q.type === 'multi' ? ' 여러 개 고를 수 있어서 합이 100%를 넘어요.' : ''} + 자유 의견은 이름이나 회사명처럼 특정인을 알아볼 수 있는 정보를 지운 뒤 따로 정리해요. + {q.mean !== undefined && ( +++ )} ++ 평균 + + + {q.mean.toFixed(1)} + / 5 + +자유 의견은 이름이나 회사명처럼 특정인을 알아볼 수 있는 정보를 지운 뒤 따로 정리해요. ) : ( <>- -표로 보기
++표로 보기
@@ -106,6 +127,15 @@ function QuestionResult({ q, breakdown }: { q: QuestionStat; breakdown?: Breakdo ) } +const card: React.CSSProperties = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--spacing-20)', + padding: 'clamp(16px, 4vw, 28px)', + borderRadius: 'var(--radii-lg)', + border: '1px solid var(--colors-bg-neutral-hover)', +} + const cell: React.CSSProperties = { padding: 'var(--spacing-4) var(--spacing-12)', borderBottom: '1px solid var(--colors-bg-neutral-hover)', @@ -116,102 +146,216 @@ const cell: React.CSSProperties = { function BreakdownPicker({ breakdowns, active }: { breakdowns: Breakdown[]; active?: string }) { const options = [{ id: undefined, label: '전체' }, ...breakdowns.map((b) => ({ id: b.id, label: b.label }))] return ( - -
+
+