feat(login): 로그인 화면을 랜딩 페이지로 교체 - #105
Merged
Merged
Conversation
AIPMS(aipms.pusan.ac.kr) 랜딩과 같은 구성으로 바꾼다. 처음 들어온 사람이 무엇을 하는 시스템인지, 로그인한 뒤 왜 아무것도 안 보이는지(권한 대기)를 로그인 전에 알 수 있어야 해서다. - 상단 고정 네비, 히어로(구글 로그인), 이용 절차, 주요 기능, 역할별 안내, 패밀리 사이트, 마무리 CTA, 다크 푸터 - 배경 격자(LoginGrid)는 그대로 쓰고 히어로 안으로 옮긴다 - 미인증 상태에서는 RootLayout 이 사이드바 셸을 씌우지 않는다. 미인증으로 그려지는 화면은 이 랜딩 하나뿐이다(나머지는 미들웨어가 막는다) - 랜딩 스타일은 login/landing.css 로 분리하고 globals.css 의 .login-* 는 지운다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
앵커 링크가 브랜드 이름과 로그인 버튼 사이에 끼면서 '이용 / 절차' 로 두 줄이 됐다. 링크를 접는 기준을 640px 에서 900px 로 올리고, 브랜드 이름은 자리가 모자라면 옆을 밀지 말고 잘리게 한다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
격자는 칸이 켜지는 것뿐이라 '잇는다' 는 헤드라인과 안 맞았다. 점이 떠다니며 가까운 것끼리 이어지고 커서와도 이어지는 그림으로 바꾼다. - LoginGrid 삭제(쓰는 곳 없음), HeroNetwork 추가. 캔버스 하나, 외부 의존성 없음 - prefers-reduced-motion 이면 한 번만 그리고 멈춘다. 탭이 뒤로 가면 프레임 중단 - 커서 없는 환경(hover: none)에서는 배경 자체를 끈다 - 로컬 AUTH_BYPASS 에서 앱 셸이 랜딩을 감싸며 생기던 바깥 여백 제거 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
대시보드가 이 시스템의 첫 화면이라, 배경도 지표를 보는 화면으로 둔다. 눈금선과 막대, 추세선 두 줄을 아주 옅게 깔고 천천히 흘린다. 커서를 대면 실제 차트처럼 세로 기준선이 붙고 그 지점에 점이 찍힌다. 숫자와 축 이름은 일부러 넣지 않는다. 배경에 수치를 적으면 실제 실적으로 읽힌다. HeroNetwork 는 남겨 둔다. 한 줄만 바꾸면 되돌릴 수 있다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
위는 이어지는 점(HeroNetwork), 아래는 지표 차트(HeroChart) 를 겹쳐 둔다. 헤드라인이 '잇는다' 이고 첫 화면이 대시보드라 둘 다 맞는 그림이었다. - 밴드 둘을 겹쳐 두고 경계는 마스크로 흐린다. 한 그림처럼 이어진다 - 커서는 각자 제 밴드 안에서 받는다. 위에서는 점이 끌려오고 아래에서는 세로 기준선이 붙는다 - 차트의 세로 위치는 이제 밴드가 잡으므로 캔버스 안에서는 거의 꽉 쓴다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
점이 그냥 점이라 배경이 장식에 그쳤다. 큰 점을 기업, 작은 점을 학생으로 나누고 선은 기업과 학생 사이에만 긋는다. 이 시스템이 실제로 이어 두는 관계가 그것뿐이라, 그림만 봐도 무엇을 다루는지 읽힌다. - 커서로 기업 하나가 잡히면 그 기업에 걸린 학생과 선이 함께 밝아진다 - 기업은 학생보다 느리게 움직이고 커서에도 덜 끌린다 - 범례는 오른쪽 위 고정. 점 옆에 라벨을 띄웠더니 헤드라인과 본문 글자 위에 겹쳤다. 좁은 화면에서는 범례를 뺀다 - 이름과 숫자는 안 적는다. 배경에 그럴듯한 값을 적으면 실제 데이터로 읽힌다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
점에 기업·학생 뜻이 생기면서 아래쪽 차트가 같은 자리에서 다른 말을 했다. 배경은 기업과 학생이 이어지는 그림 하나로 둔다. HeroChart 와 밴드 CSS 삭제. 되살리려면 2575ed0 참고. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
협력 기업, 등록 학생, 산학·인턴십 실적 건수를 DB 에서 세어 보여 준다. 꾸민 값이 아니라 실제 수치다. 개인을 특정할 수 있는 값은 쓰지 않는다. - unstable_cache 로 한 시간 캐시. 로그인하러 온 사람마다 카운트를 돌릴 이유가 없다 - 여기는 로그인으로 들어오는 유일한 길목이다. 집계가 실패해도 화면은 그대로 뜨고 숫자만 빠진다(로컬 DB 를 내린 채로 확인) - 빈 DB 에서 '0곳 0명 0건' 이 뜨면 망가진 화면으로 보여서, 기업이 없으면 줄을 통째로 뺀다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
DB 의 협력 기업 이름을 그대로 띄운다. 꾸민 이름이 아니다. 학생은 이름 없이 점으로만 둔다. 학생 쪽에 이름을 붙이면 없는 사람의 기록처럼 읽히고, 어느 기업에 누가 갔다는 주장까지 하게 된다. - 기업 점 개수를 받아 온 이름 수로 묶는다. 넘기면 같은 이름이 여러 번 뜬다 - 헤드라인, 본문, 로그인 카드, 범례가 놓인 자리는 측정해 두고 거기 걸리는 이름은 그리지 않는다. 글 위에 이름이 겹치면 배경이 아니라 오류로 보인다 - 긴 법인명은 12자에서 자른다. 배경에서 한 줄을 다 차지한다 - 이름을 못 받아 오면 점만 뜬다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
기업 점이 너무 적었다. 학생 두 명에 기업 하나꼴로 올리고, 점 개수를 이름 수에 묶어 두던 제한을 푼다. 이름은 기업마다 하나씩만 쓰므로 이름이 모자라는 만큼은 이름 없는 점으로 남는다. - 기업은 제자리에 박아 둔다. 움직이면 이름표가 같이 떠다녀 읽기 나쁘고, 빈 자리를 골라 놓은 것도 금방 글 위로 밀려간다. 커서에도 안 끌린다 - 이름 붙는 점은 글 영역을 피해 자리를 잡는다 - 이름을 붙일 기업은 10곳까지. 점은 많아도 되지만 글자가 많으면 시끄럽다 - 받아 오는 기업명을 18개에서 40개로 늘린다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
기업 점에 커서를 대면 잡는 모양으로 바뀌고, 끌어서 아무 데나 놓을 수 있다. 옮기면 그 자리 기준으로 걸리는 학생이 다시 잡히고 선도 따라 바뀐다. - 끄는 동안은 창 전체에서 마우스를 받는다. 로그인 카드 위를 지나가도 점을 놓치지 않는다 - 끌고 있는 기업은 글 위에 겹치더라도 이름을 보여 준다. 잡은 게 무엇인지 안 보이면 끌 수가 없다. 놓으면 원래 규칙으로 돌아간다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
일정 속도로 떠다니던 것을 힘으로 바꾼다. 기업끼리는 같은 극처럼 밀어내서 고르게 퍼지고, 기업과 학생은 적당한 거리를 두고 당기거나 밀고, 학생끼리는 겹치지 않을 만큼만 밀어낸다. 감속을 걸어 두어 곧 자리를 잡고 잔잔해진다. - 기업에는 제자리로 돌아오려는 힘을 약하게 건다. 밀어내기만 두면 서로 밀다가 벽에 붙고, 빈 자리를 골라 놓은 이름표도 글 위로 밀려간다 - 끌어다 놓으면 그 자리가 새 제자리가 된다. 안 그러면 손을 떼는 순간 돌아간다 - 커서는 학생만 당긴다. 기업까지 끌리면 이름표가 커서를 따라다닌다 - 가장자리는 되미는 힘으로 처리한다. 튕기게 하면 벽에서 덜그럭거린다 - 모션 최소화 설정이면 자리만 잡아 두고 한 번 그린 뒤 멈춘다 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- 끌고 있는 점을 커서에 딱 붙이지 않고 남은 거리의 일부씩만 따라가게 한다. 손에 끌려오는 느낌이 난다 - 앵커를 눌렀을 때 한 번에 튀지 않고 밀려 내려간다(scroll-behavior: smooth) - 구역이 화면에 들어오면 떠오른다. 한 번 올라온 구역은 다시 숨기지 않는다 떠오르기는 IntersectionObserver 대신 스크롤에서 직접 잰다. 본문을 숨겨 놓고 콜백을 기다리는 구조라 콜백이 안 오는 상황이 하나라도 있으면 그 사람에게는 페이지가 비어 보인다. 탭이 가려져 있으면 실제로 옵저버도 rAF 도 멈춘다. 대상이 다섯 개뿐이라 스크롤마다 바로 재도 부담이 없다. 숨기는 클래스는 자바스크립트가 붙인다. CSS 에만 두면 스크립트가 막힌 브라우저에서 본문이 숨은 채로 남는다. 모션 최소화 설정이면 전부 건너뛴다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
AIPMS 랜딩과 같은 구성으로
/login을 바꿨다. 처음 들어온 사람이 무엇을 하는 시스템인지, 로그인 뒤 왜 아무것도 안 보이는지(권한 대기)를 로그인 전에 알 수 있게.login/landing.css로 분리,globals.css의.login-*210줄 삭제로컬 확인: 라이트·다크, 1280 / 375, 고정 네비, 앵커 이동, 콘솔 에러 없음,
npm run build통과.🤖 Generated with Claude Code