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

147 front task 랜딩페이지 개선 #148

Merged
merged 24 commits into from
Nov 27, 2023
Merged
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
194a2e9
issue #147 feat: remove unused nav link in LandingPage
kimyoungyin Nov 15, 2023
3cf25ae
issue #147 test: set initial render test for LandingPage
kimyoungyin Nov 15, 2023
82f22f9
issue #147 feat: add selody svg logo and use it as a component in ico…
kimyoungyin Nov 15, 2023
091a1d1
issue #147 refactor: change LandingPage directory and add wrapper com…
kimyoungyin Nov 15, 2023
4d22577
issue #147 refactor: change landing components's directory
kimyoungyin Nov 15, 2023
e47e7f1
issue #147 fix: remove global unuseful root max-width styles
kimyoungyin Nov 15, 2023
bc9a031
issue #147 refactor: rename Landing to LandingMain
kimyoungyin Nov 15, 2023
697be89
issue #147 refactor: split styles to style.js file
kimyoungyin Nov 15, 2023
18db667
issue #147 refactor: move components to each folder
kimyoungyin Nov 15, 2023
294e72d
issue #147 test: fix LandingHeader h1 text
kimyoungyin Nov 15, 2023
79f3cce
issue #147 refactor: minimize LandingHeader style
kimyoungyin Nov 15, 2023
eed2402
issue #147 feat: responsive layout design for LandingPage
kimyoungyin Nov 15, 2023
a0eb37c
issue #147 feat: change typing library which can stop erase
kimyoungyin Nov 15, 2023
e3e280f
issue #147 design: change line-gradient color and set layout
kimyoungyin Nov 15, 2023
1adab8e
issue #147 test: fix LandingHeader h2 text
kimyoungyin Nov 15, 2023
373f353
issue #147 design: remove unused margin-top in LandingHeader
kimyoungyin Nov 15, 2023
2ed523e
issue #147 test: change LandingHeader h2 text
kimyoungyin Nov 15, 2023
1bbaec0
issue #147 refactor: fix LandingMain component and its design
kimyoungyin Nov 15, 2023
c81b926
issue #147 fix: widen width and height for link in '시작하기' button
kimyoungyin Nov 15, 2023
37bc085
issue #147 feat: create reusable SelodyLogo icon and replace all png …
kimyoungyin Nov 15, 2023
5590bdb
issue #147 design: change font-weight for typing content and start bu…
kimyoungyin Nov 21, 2023
8b6f559
issue #147 design: set max-width again in GlobalStyles
kimyoungyin Nov 22, 2023
a2e30a8
issue #147 refactor: split inline animate props to function in Landin…
kimyoungyin Nov 22, 2023
2ad844f
issue #147 refactor: change reducer name from -slice to -reducer
kimyoungyin Nov 22, 2023
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
Prev Previous commit
Next Next commit
issue #147 refactor: split inline animate props to function in Landin…
…gMain
kimyoungyin committed Nov 27, 2023
commit a2e30a873dc44689b79c6983a79def71f91293c2
24 changes: 18 additions & 6 deletions src/components/Landing/LandingMain/LandingMain.jsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,22 @@ const bounceAnimation = {
},
};

const TAG_TO_ANIMATE = {
HEADING: "heading",
BUTTON: "button",
};

const getAnimation = (tag) => ({
initial: {
opacity: 0,
y: tag === TAG_TO_ANIMATE.HEADING ? -50 : 50,
},
animate: { opacity: 1, y: 0 },
transition: {
delay: tag === TAG_TO_ANIMATE.HEADING ? 0.2 : 3.8,
},
});

const LandingMain = () => {
return (
<LandingMainContainerDiv>
@@ -28,9 +44,7 @@ const LandingMain = () => {
<div className="content">
<motion.h2
className="heading2"
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
{...getAnimation(TAG_TO_ANIMATE.HEADING)}
>
Selody와 함께 그룹 일정을 공유하고 관리하자!
</motion.h2>
@@ -55,9 +69,7 @@ const LandingMain = () => {
</div>
<motion.button
className="startBtn"
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 3.8 }}
{...getAnimation(TAG_TO_ANIMATE.BUTTON)}
>
<Link to="/login" className="auth-btn">
시작하기