[7주차] JobDri 이윤서 & 구민교 과제 제출합니다.#7
Open
yiyoonseo wants to merge 42 commits into
Open
Conversation
…velopers#1-designsystem-feat Feature/CEOS-Developers#1 designsystem feat
…velopers#3-landing_page-ui Feat: CEOS-Developers#3 랜딩 페이지 구현
…_page-ui Feature/CEOS-Developers#6 vote page UI
…_page-ui Feature/CEOS-Developers#7 main page UI
…in_signup-ui Feat: CEOS-Developers#2 로그인, 회원가입 모달 구현
Feature/#11 login signup api
Mod: #11 로그인 모달 UI 변경
Fix: Vercel rootDirectory 설정 추가
Fix: vercel.json 설정 추가
Fix: vercel.json 삭제 (rootDirectory 속성 오류 수정)
Fix: ceosvote/vercel.json 삭제
Fix: globals.css import 오타 수정 (global -> globals)
GirimNam
reviewed
May 18, 2026
|
|
||
| return () => window.clearTimeout(timer); | ||
| }, [router]); | ||
|
|
There was a problem hiding this comment.
랜딩페이지 이후 메인 페이지로 라우팅시킨게 너무 좋은 것 같습니다!
There was a problem hiding this comment.
버튼 컴포넌트들을 한 곳에서 관리하는게 너무 효율적이고 좋은거 같아요!
Comment on lines
+127
to
+132
| <Button | ||
| label={poll.votedCandidateId ? "다시 투표하기" : "투표하기"} | ||
| size="large" | ||
| className="flex-1" | ||
| onClick={handleVoteButtonClick} | ||
| /> |
There was a problem hiding this comment.
후보를 선택하지 않았을 때 handleVoteButtonClick 내부에서 동작은 막고 있지만, 버튼에는 active 조건이 따로 없어서 UI상으로는 활성화된 것처럼 보일 수 있을 것 같아요!
| </div> | ||
|
|
||
| {error && <p className="text-cap12-med text-red-primary">{error}</p>} | ||
| </div> |
There was a problem hiding this comment.
현재는 이메일/비밀번호가 비어 있는지만 확인하고 있어서, 이메일 형식 검증 등 검증 조건이 늘어난다면 Zod 같은 schema validation을 적용해 검증 로직을 분리하는 것도 좋을 거 같아요!
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
3 participants
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.
링크
📄노션 링크
🔗배포 링크
🎨피그마 링크
초기 세팅
디자인 시스템과 컴포넌트는 JobDri의 디자인 시스템과 컴포넌트를 사용했습니다.
API 또한 JobDri의 명세서를 사용했습니다.
(API연동을 해뒀으나 현재 CORS에러로 인해 정상적으로 작동하지 못합니다...ㅠㅠ)
페이지 설명
기능 설명
반응형 작업
느낀점 및 배운점 (민교)
이번 과제를 하면서 페이지를 구현하는 것뿐만 아니라, 컴포넌트와 파일 구조를 어떻게 나누는지가 전체 코드의 유지보수성에 큰 영향을 준다고 느꼈습니다. 버튼, 헤더, 배지, 모달처럼 여러 곳에서 반복되는 요소를 공통 컴포넌트로 분리하니 코드가 더 정리되고 재사용하기 쉬워졌습니다.
반응형 작업을 하면서는 모바일 화면만 따로 대응하는 것이 아니라, 전체 화면 크기에 따라 레이아웃이 어떻게 변해야 하는지를 더 많이 고려하게 되었습니다. 기기마다 화면 사이즈가 다르기 때문에 구체적인 수치를 고정으로 넣기보다는 vh 같은 상대 단위를 활용해 화면에 보이는 높이나 크기를 조절하는 것이 더 자연스러웠습니다. 또한 화면이 커질 때 컴포넌트 자체도 비율에 맞춰 함께 커지게 할지, 아니면 컴포넌트 크기는 유지하고 바깥 여백만 늘어나게 할지 고민하게 되었습니다. 같은 요소라도 화면 크기에 따라 배치 방식, 간격, 크기가 달라져야 더 안정적인 UI가 된다고 느꼈습니다.
그리고 프론트엔드 작업을 해나가며 피그마 작업을 할 때도 화면이나 컨테이너를 만들 때마다 반응형을 함께 생각하게 되었습니다. 이전에는 결과적으로 보이는 화면 위주로 디자인하고 구조까지 깊게 고려하지 못했는데, 팀의 디자이너분들이 요소의 구조, 반응형, 컴포넌트의 재사용성을 매번 고려해 컨테이너와 컴포넌트를 만드는 과정을 보며 많이 배울 수 있었습니다. 이제는 박스 하나를 만들 때도 사이즈가 어떻게 변해야 하는지, 레이아웃은 어떻게 잡아야 하는지, 다른 화면에서도 재사용할 수 있는지를 함께 생각하게 되었습니다.
이번 작업을 통해 기능 구현뿐만 아니라 UI/UX 관점에서도 배우는 점이 많았습니다. 화면을 보기 좋게 만드는 것에서 끝나는 것이 아니라, 실제 사용성과 유지보수성, 반응형 구조까지 고려해야 더 완성도 있는 프론트엔드 작업이 된다는 것을 알 수 있었던 것 같습니다.
느낀점 및 배운점 (윤서)
배포 과정에서 깃 설정이 꼬여 문제가 있었습니다.
해결하는데 시간이 꽤 오래 걸려 애를 먹었습니다.
내용이 조금 길어 링크 첨부합니다.
정리