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: greeting 문구별 애니메이션 추가 #20

Merged
merged 11 commits into from
Jul 26, 2023

Conversation

Brokyeom
Copy link
Member

@Brokyeom Brokyeom commented Jul 25, 2023

  • 각 문구별로 다른 opacity 를 주어 순서대로 문구가나타나도록 했습니다.
  • 이로 인해 greeting 스크롤 영역이 많이 늘어났는데, 디자이너측과 이야기가 끝나면 유동적으로 조정하도록 하겠습니다.

2023-07-26.012052.mp4

@Brokyeom Brokyeom self-assigned this Jul 25, 2023
@Brokyeom Brokyeom changed the title feat: 문구별 애니메이션 추가 feat: greeting 문구별 애니메이션 추가 Jul 25, 2023
apps/web/src/components/mainpage/greeting/Intro.tsx Outdated Show resolved Hide resolved
Comment on lines +35 to +38
<div className='pl-[4rem] py-[2.4rem] flex flex-col border-b border-solid border-white'>
<Title type='official' />
<Description type='official' />
</div>
Copy link
Member

Choose a reason for hiding this comment

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

p2; Description과 Title이 3개의 제품을 설명하는 3개의 일을 하고 있어요. 그런데 정작 레이아웃 코드의 중복 제거는 하고 있지 못해요.
또한 만약에 제품이 추가되면 <ProductSection>, <Title>, <Description> 을 모두 수정해야 해요.

만약 각 제품 설명은 따로 컴포넌트로 제작하고, 이 부분을 레이아웃 컴포넌트화 시켜서 children으로 받게 하면 이러한 문제를 해결할 수 있어요.
중복이 효과적으로 제거되면서도, 새로운 제품이 추가되었을 때 <ProductSection> 컴포넌트만 수정해도 되게 되어요.

EX)

<DescriptionLayout title="SOPT 공식 홈페이지" link="https://www.sopt.org/" iconClassName="fill-sub-yellow" keyword="OFFICIAL\n여러줄">
  <SoptOfficialDescription />
</DescriptionLayout>

Copy link
Member Author

Choose a reason for hiding this comment

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

해당 부분은 product 영역인데, 현재 브랜치와 머지하는 과정에서 중간 과정이 딸려온 것 같습니다!
productSection 퍼블리싱 PR 에서 이 사항 반영해서 올리도록 할게요!!

@Tekiter
Copy link
Member

Tekiter commented Jul 25, 2023

p2; 위쪽에 공간이 충분함에도, 화면 높이가 조금만 작아져도 잘리는 문제가 있어요. 글자 그룹의 위치를 화면의 가운데로 맞춰주면 좋을 것 같아요.

image

@Brokyeom Brokyeom enabled auto-merge July 26, 2023 04:23
@Brokyeom Brokyeom added this pull request to the merge queue Jul 26, 2023
Merged via the queue into main with commit 3050ce1 Jul 26, 2023
2 checks passed
@Tekiter Tekiter deleted the feat-greeting-animation branch July 29, 2023 09:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants