Skip to content

Implement mobile login page styling #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
mingggg046779-rgb wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

Implement mobile login page styling #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 22 additions & 8 deletions src/pages/LoginPage/LoginPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,30 @@ export default function LoginPage() {
return (
<main className={styles.root}>
<section className={styles.content} aria-label="런싱크 로그인">
<h1 className={styles.brand} aria-label="RUN sync">
<span className={styles.brandRun}>RUN</span>
<span className={styles.brandSync}>sync</span>
</h1>
<div className={styles.hero}>
<h1 className={styles.brand} aria-label="RUN sync">
<span className={styles.brandRun}>RUN</span>
<span className={styles.brandSync}>sync</span>
</h1>

<p className={styles.tagline}>러닝을 더 쉽게, 꾸준하게</p>
<p className={styles.tagline}>러닝을 더 쉽게, 꾸준하게</p>
</div>

{/* <div className={styles.illustrationWrap} aria-hidden="true">
<img className={styles.illustration} src={loginIllustration} alt="" />
</div> */}
<div className={styles.illustrationWrap} aria-hidden="true">
<div className={styles.sun} />
<div className={styles.track}>
<span className={styles.trackLine} />
<span className={styles.trackLine} />
</div>
<div className={styles.runner}>
<span className={styles.runnerHead} />
<span className={styles.runnerBody} />
<span className={styles.runnerArmFront} />
<span className={styles.runnerArmBack} />
<span className={styles.runnerLegFront} />
<span className={styles.runnerLegBack} />
Comment on lines +48 to +53

@gemini-code-assist gemini-code-assist Bot May 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

러너의 신체 부위가 렌더링되는 순서(Stacking Order)를 조정하는 것이 좋습니다. 현재는 'Back' 부위들이 나중에 선언되어 몸통 위에 그려지는데, 일반적으로 원근감을 위해 뒤쪽 팔다리는 몸통 뒤에 위치하도록 DOM 순서를 변경하는 것이 더 자연스럽습니다.

Suggested change
<span className={styles.runnerHead} />
<span className={styles.runnerBody} />
<span className={styles.runnerArmFront} />
<span className={styles.runnerArmBack} />
<span className={styles.runnerLegFront} />
<span className={styles.runnerLegBack} />
<span className={styles.runnerArmBack} />
<span className={styles.runnerLegBack} />
<span className={styles.runnerBody} />
<span className={styles.runnerHead} />
<span className={styles.runnerArmFront} />
<span className={styles.runnerLegFront} />

</div>
</div>

<div className={styles.cta}>
<KakaoLoginButton onClick={handleKakaoLogin} />
Expand Down
188 changes: 168 additions & 20 deletions src/pages/LoginPage/LoginPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,64 +2,212 @@
min-height: 100vh;
display: flex;
justify-content: center;
background: #ffffff;
background:
radial-gradient(circle at 50% 18%, rgba(255, 122, 56, 0.16), transparent 30%),
linear-gradient(180deg, #fff7ef 0%, #ffffff 52%, #fff5ec 100%);
color: #1b1b1b;
}

.content {
width: min(420px, 100%);
padding: 84px 24px 28px;
width: min(430px, 100%);
min-height: 100vh;
padding: 76px 28px 28px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}

.hero {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}

.brand {
margin: 0;
line-height: 0.9;
line-height: 0.86;
font-weight: 900;
letter-spacing: -1px;
letter-spacing: -2px;
text-align: center;
color: #ff5a1f;
text-transform: uppercase;
user-select: none;
text-shadow: 0 10px 24px rgba(255, 90, 31, 0.14);
}

.brandRun {
display: block;
font-size: 72px;
font-size: clamp(72px, 22vw, 92px);
}

.brandSync {
display: block;
font-size: 56px;
font-size: clamp(52px, 16vw, 68px);
text-transform: none;
}

.tagline {
margin: 6px 0 0;
font-size: 18px;
font-weight: 600;
color: #1b1b1b;
margin: 18px 0 0;
font-size: 17px;
font-weight: 700;
line-height: 1.45;
color: #26201c;
letter-spacing: -0.2px;
}

.illustrationWrap {
margin-top: 26px;
width: 100%;
display: grid;
place-items: center;
position: relative;
width: min(310px, 78vw);
height: 250px;
margin-top: 42px;
flex: 1;
min-height: 250px;
}

.illustration {
width: min(360px, 100%);
height: auto;
.sun {
position: absolute;
top: 18px;
right: 16px;
width: 72px;
height: 72px;
border-radius: 999px;
background: #ffb24a;
box-shadow: 0 18px 36px rgba(255, 178, 74, 0.28);
}

.track {
position: absolute;
right: 0;
bottom: 34px;
left: 0;
height: 72px;
border-radius: 50%;
border-bottom: 5px solid rgba(255, 90, 31, 0.34);
transform: rotate(-2deg);
}

.trackLine {
position: absolute;
right: 14px;
left: 14px;
border-bottom: 2px solid rgba(255, 90, 31, 0.16);
border-radius: 50%;
}
Comment on lines +91 to +97

@gemini-code-assist gemini-code-assist Bot May 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

.trackLine 요소들이 곡선으로 보이기 위해서는 height 설정이 필요합니다. 현재 설정으로는 직선으로 렌더링될 가능성이 높으므로, 부모인 .track의 곡률을 따라가도록 높이를 지정하는 것이 좋습니다.

Suggested change
.trackLine {
position: absolute;
right: 14px;
left: 14px;
border-bottom: 2px solid rgba(255, 90, 31, 0.16);
border-radius: 50%;
}
.trackLine {
position: absolute;
right: 14px;
left: 14px;
height: 100%;
border-bottom: 2px solid rgba(255, 90, 31, 0.16);
border-radius: 50%;
}


.trackLine:first-child {
bottom: 18px;
}

.trackLine:last-child {
bottom: 38px;
}

.runner {
position: absolute;
right: 74px;
bottom: 82px;
width: 116px;
height: 142px;
transform: rotate(-8deg);
}
Comment on lines +107 to +114

@gemini-code-assist gemini-code-assist Bot May 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

실루엣 형태의 러너 일러스트 전체에 일관된 그림자를 적용하려면, 개별 부위가 아닌 부모 요소인 .runner에 filter: drop-shadow()를 적용하는 것이 좋습니다. 이렇게 하면 부위들이 겹치는 지점에서 그림자가 중첩되는 현상을 방지할 수 있습니다.

Suggested change
.runner {
position: absolute;
right: 74px;
bottom: 82px;
width: 116px;
height: 142px;
transform: rotate(-8deg);
}
.runner {
position: absolute;
right: 74px;
bottom: 82px;
width: 116px;
height: 142px;
transform: rotate(-8deg);
filter: drop-shadow(0 8px 18px rgba(31, 27, 24, 0.12));
}


.runnerHead,
.runnerBody,
.runnerArmFront,
.runnerArmBack,
.runnerLegFront,
.runnerLegBack {
position: absolute;
display: block;
background: #1f1b18;
box-shadow: 0 8px 18px rgba(31, 27, 24, 0.12);
}
Comment on lines +116 to +126

@gemini-code-assist gemini-code-assist Bot May 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

개별 신체 부위 요소에서 box-shadow를 제거하고 공통 스타일을 정리합니다. 앞서 제안한 대로 부모 요소에 drop-shadow를 적용하면 시각적으로 더 깔끔해집니다.

.runnerHead,
.runnerBody,
.runnerArmFront,
.runnerArmBack,
.runnerLegFront,
.runnerLegBack {
  position: absolute;
  display: block;
  background: #1f1b18;
}


.runnerHead {
top: 0;
left: 48px;
width: 30px;
height: 30px;
border-radius: 999px;
}

.runnerBody {
top: 34px;
left: 54px;
width: 16px;
height: 58px;
border-radius: 999px;
transform: rotate(18deg);
transform-origin: top center;
}

.runnerArmFront,
.runnerArmBack,
.runnerLegFront,
.runnerLegBack {
width: 13px;
border-radius: 999px;
transform-origin: top center;
}

.runnerArmFront {
top: 44px;
left: 62px;
height: 50px;
transform: rotate(-58deg);
}

.runnerArmBack {
top: 42px;
left: 56px;
height: 48px;
transform: rotate(54deg);
}

.runnerLegFront {
top: 82px;
left: 62px;
height: 66px;
transform: rotate(-50deg);
}

.runnerLegBack {
top: 84px;
left: 58px;
height: 62px;
transform: rotate(46deg);
}

.cta {
margin-top: auto;
width: 100%;
padding-top: 12px;
padding-top: 30px;
display: grid;
place-items: center;
}

.cta > * {
max-width: 320px;
}

@media (max-width: 360px) {
.content {
padding: 62px 22px 24px;
}

.illustrationWrap {
width: min(280px, 82vw);
height: 220px;
min-height: 220px;
margin-top: 32px;
}

.runner {
right: 58px;
transform: scale(0.88) rotate(-8deg);
transform-origin: bottom center;
}
}