[Feature] 로그인 페이지 디자인 구현

[wonhj12]

Pull requests

작업 내용

공통 컴포넌트들을 구현했습니다.

Button : 로그인 버튼 등 전반적으로 사용되는 버튼 컴포넌트입니다.

• width 파라미터에 number 또는 string 값을 입력으로 받습니다. number 입력시 자동으로 px로 적용, string 입력시 %나 auto 등의 값을 입력하면 됩니다.
• 기본 값으로는 100%가 적용됩니다.

InputField : 레이블과 input을 함께 묶어둔 컴포넌트입니다.

• id, label, type 값을 입력으로 받습니다.
• 기본 값으로는 text 타입을 지정해뒀습니다.

CheckboxField : 레이블과 체크박스를 함께 묶어둔 컴포넌트입니다.

• label 값을 입력으로 받습니다.
• 사용하는 곳이 거의 없을 것 같긴 한데, 우선은 구현해 두었습니다.

TextButton : 텍스트 형식의 버튼 컴포넌트입니다. ( 태그와 동일)

• fontWeight 값을 입력으로 받습니다. 지금으로썬 400 또는 500 값만 받을 수 있도록 했습니다. 추후 디자인 따라서 추가하면 될 것 같습니다.
• 기본 값으로는 500이 적용됩니다.

로그인 페이지를 구현했습니다.

• 상단 Jandi 로고 부분은 헤더에 포함되어야 하는 것 같아서 일단은 제외했습니다.
• 우측 오늘 한 칸 심기 카드 부분도 디자인 확정이 되지 않아 일단 제외했습니다.

참고 사항

아직 와이어프레임 단계라서 컴포넌트 위주로 작업했습니다.

컴포넌트 import에서 사용할 수 있도록 path alias를 설정했습니다.

문법이나 스타일 등 이상하거나 잘못 작성한 부분이 있으면 편하게 알려주시면 감사하겠습니다.

화면 구성

Check List

• 코드가 정상적으로 동작함
• 기존 기능에 영향을 주지 않음
• 린트/포맷팅 적용 완료
• 관련 테스트 작성 또는 기존 테스트 통과 확인
• 리뷰어가 이해할 수 있도록 충분한 설명이 포함됨

이슈

• close [ Feature ] 로그인 페이지 #2

[Copilot]

Pull request overview

Implements the initial login page UI and introduces a small set of reusable “common” UI components in the web app, along with @/ path alias support for simpler imports.

Changes:

• Add common components: Button, InputField, CheckboxField, TextButton (+ barrel exports)
• Build the login page layout/styling using the new components
• Configure @/ path alias in Vite + TypeScript, and adjust UI GlobalStyles body layout

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/ui/src/GlobalStyles.tsx	Removes body flex-centering; sets body width to support full-width layouts
apps/web/vite.config.ts	Adds @ alias (currently uses __dirname)
apps/web/tsconfig.app.json	Adds TS baseUrl + paths mapping for @/*
apps/web/src/pages/LoginPage/LoginPage.tsx	Replaces placeholder login markup with composed form UI
apps/web/src/pages/LoginPage/LoginPage.styled.ts	Adds split background + form layout styling
apps/web/src/components/common/index.ts	Exports new common components from the common barrel
apps/web/src/components/common/Button/index.ts	Button barrel export
apps/web/src/components/common/Button/Button.tsx	Reusable button component with optional width prop
apps/web/src/components/common/Button/Button.styled.ts	Button styling
apps/web/src/components/common/InputField/index.ts	InputField barrel export
apps/web/src/components/common/InputField/InputField.tsx	Labeled input component
apps/web/src/components/common/InputField/InputField.styled.ts	InputField styling
apps/web/src/components/common/CheckboxField/index.ts	CheckboxField barrel export
apps/web/src/components/common/CheckboxField/CheckboxField.tsx	Labeled checkbox component
apps/web/src/components/common/CheckboxField/CheckboxField.styled.ts	CheckboxField styling
apps/web/src/components/common/TextButton/index.ts	TextButton barrel export
apps/web/src/components/common/TextButton/TextButton.tsx	Anchor-like text button component
apps/web/src/components/common/TextButton/TextButton.styled.ts	TextButton styling

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.