Skip to content
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.

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

feat-fe: 랜딩 페이지 반응형 디자인 추가 #775

Open
wants to merge 11 commits into
base: fe/develop
Choose a base branch
from

Conversation

github-actions[bot]
Copy link
Contributor

@github-actions github-actions bot commented Oct 7, 2024

목적

랜딩 페이지의 반응형 디자인을 추가합니다.

작업 내용

  • 피그마에 디자인
  • 디자인 시안대로 구현

(gif로 내보내니까 배경의 그라디언트가 깨지네요.🥲 실제로는 정상적으로 보입니다.)
responsive

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!


LAND_02

closes #774

@github-actions github-actions bot added feature 새로운 기능 frontend 프론트엔드 labels Oct 7, 2024
@github-actions github-actions bot added this to the 스프린트 6.0 milestone Oct 7, 2024
Copy link
Contributor Author

1729236688.020229

Copy link
Contributor Author

1729236688.431759

@llqqssttyy llqqssttyy marked this pull request as ready for review October 18, 2024 07:32
Copy link
Contributor Author

1729236750.701789

Copy link
Contributor

@lurgi lurgi left a comment

Choose a reason for hiding this comment

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

굳 잡 렛서

const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};

const scrollToMain = () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

함수명이 영 별로네요

Comment on lines -42 to 67
const getBubblePosition = (index: number) => {
const positions = [
const getBubblePosition = (index: number, isMobile?: boolean) => {
const desktopPositions = [
{ top: '10%', right: '10%' },
{ top: '10%', left: '10%' },
{ top: '40%', right: '5%' },
{ top: '40%', left: '5%' },
];
return positions[index] || positions[0];

const mobilePositions = [
{ right: '5%', top: '10%' },
{ left: '5%', top: '10%' },
{ right: '0', top: '40%' },
{ left: '0', top: '40%' },
];

const position = isMobile
? mobilePositions[index] || mobilePositions[0]
: desktopPositions[index] || desktopPositions[0];

return css`
${position.top ? `top: ${position.top};` : ''}
${position.right ? `right: ${position.right};` : ''}
${position.left ? `left: ${position.left};` : ''}
`;
};
Copy link
Contributor

Choose a reason for hiding this comment

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

코드 너무 잘 짜셨어요 너무 멋져요 어떻게 이런 생각을....

Copy link
Contributor

Choose a reason for hiding this comment

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

함수명이 영 별로네요

지킬과 하이드 같네요

Comment on lines +311 to +314
${index === 0 ? 'right: 5%;' : ''}
${index === 1 ? 'left: 5%;' : ''}
${index === 2 ? 'right: 0;' : ''}
${index === 3 ? 'left: 0;' : ''}
Copy link
Contributor

Choose a reason for hiding this comment

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

수정 부탁드려요~ 제가 수정해보니 정상작동하네요

Copy link
Contributor

@llqqssttyy llqqssttyy Oct 18, 2024

Choose a reason for hiding this comment

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

알아서 수정해보겠습니다🤣

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature 새로운 기능 frontend 프론트엔드
Projects
Status: 할일
Development

Successfully merging this pull request may close these issues.

2 participants