[feat] add layout for landing page #12

ghost · 2024-11-16T12:17:44Z

📌 Related Issue

#4

📝 Description

헤더, 메인, 푸터 일부 작업

📸 Screenshot

)

📢 Notes

+로고 동적 스타일링 해보고 싶어서 SVG 컴포넌트 변환 > @svgr/webpack 추가
+랜딩 페이지 png 파일 일부 추가
+Image 컴포넌트 사용으로 png 파일 추가

-반복 코드 컴포넌트 분리 예정
-로그인 버튼 기능 추가 예정

메인 섹션 중 Taskify 텍스트 svg 컴포넌트로 교체 예정 (그냥 해보고 싶음)

! 줄바꿈 에러 해결 방법 찾는 중

devmanta

첫PR 고생하셨습니다~~!! 🤗
나름 빠르게(?) 올려주셔서 리뷰 압박 덜했습니다~~!ㅋㅋㅋ

devmanta · 2024-11-16T12:20:03Z

src/app/page.module.css

+  gap: 28px;
+  margin-bottom: 110px;
+  align-items: center;
+  line-height: 90px;


line-height는 아마 영향없을텐데 없어도 되는거면은 삭제해도 좋을것같습니다~

텍스트 영역이 각각 폰트가 달라서 수직 정렬이 어렵더라고요. 임시로 padding + line-height로 구현했습니다.

devmanta · 2024-11-16T12:21:38Z

package.json

    "lint:ci": "next lint --config .eslintrc.ci.json"
  },
  "dependencies": {
+    "@svgr/webpack": "^8.1.0",


이거는 단순 svg 파일 쓰려고 추가한건가요..?!

아 PR노트에 동적로고..?해보고싶어서 넣으신거군여..!
근데..로고 동적? 그게 뭐에요....(••)(••)?! 신박한건가요

svg fill 속성이 하드코딩 되어있어서 fill 속성 날리고 동적으로 스타일링 해보려고 함 넣어봤어요

devmanta · 2024-11-16T12:23:38Z

src/app/page.tsx

@@ -1,5 +1,141 @@
+'use client';
+
 import styles from './page.module.css';


이거 저와 같은 삽질상황을 방지하고자 맨마지막에 import하는것을 추천드립니다..! feat. 지원님 말씀: styles import 맨마지막 생활화

ㅋㅋ 무슨 이슈가...발생한 거죠? 감사합니더

devmanta · 2024-11-16T12:27:27Z

src/app/page.tsx

+    <div className={styles.page}>
+      <header className={styles.header}>
+        <Link href="/" aria-label="홈으로 이동">
+          <Logo className={styles.logo} alt="로고" />


이런것도 next에서 제공해주는 Image 사용해서 써도 될것같은데 따로 Logo로 import하신 이유가있으신가요~?
next에서 제공해주는 Image쓰면 아마 애들이 알아서 최적화 해주는걸로 알고있습니다..!

devmanta · 2024-11-16T12:30:24Z

src/app/page.tsx

+              width={722}
+              height={423}
+              alt="일정 관리 웹 어플리케이션"
+              loading="eager"


얘는 뭐하는친구인가요..!?
Next/Image를 사용하게 되면 자동으로 lazy loading이 적용됩니다. 물론 중요한 이미지 일부에 lazy loading을 적용하고 싶지 않은 경우에는 해당 기능을 끌 수도 있습니다. Image 컴포넌트의 priority라는 prop을 true로 설정하거나, loading prop에 “eager” 값을 설정하면 됩니다. priorty 값을 설정하는 것이 더 권장되는 방식입니다.
뭔지 몰라서 잠깐 검색해봣는데 여기에 위와 같은 내용이 있더라구요 (저는 잘몰라서..)

첫 화면에 보이는 섹션이라서 eager로 lazy loading을 껐습니다. 그냥 상반되는 속성 같아요. priorty로 우선순위 높이는 방식으로 바꿔볼게요.

devmanta · 2024-11-16T12:31:36Z

src/app/page.tsx

+              priority={true}
+            />
+          </div>
+


이런 엔터들은 기준이 주관적이라서 개인적으론 엔터는 없었으면 좋겠지만....😅

devmanta · 2024-11-16T12:33:36Z

public/icons/email.svg

이건 화면에서 보면 회색 아이콘인데 검은색으로 바꾸고 따로 색상처리를 하신...걸까요?

najitwo

첫 PR 고생하셨습니다. 👏
@svgr/webpack 로더 추가하신거 좋네요
나중에 hover 인터렉션도 추가 하시면 좋을 거 같습니다.
page 컴포넌트 중간중간에 불필요한 공백이 보이는 것 같은데
의도한게 아니시라면 지워주셨으면 합니다..!

* ✨ feat: add header, main and footer sections * ✨ feat: add logo to header * ✨ feat: add links to header * 🐛 fix: resolve import error of SVG components * ✨ feat: remove till attribute for dynamic styling of icon SVG * 🔧 chore: add PNG fallback for unoptimized SVG in Image component * ✨ feat: add images for landing page * ✨ feat: add header and footer layout * ✨ feat: add part of the main section * 🐛 fix: change any type to specific type in svg module * ♻️ refactor: add responsive image component * 🔧 chore: add montserrat font to main section * ✨ feat: add custom logo svg component * ♻️ refactor: add card component * 🔧 chore: add images for landing page * ✨ feat: add card components * ✨ feat: add UI elements for landing page

* ♻️ refactor: improve layout and components structure * ✨ [feat] add layout for landing page (#12) * ✨ feat: add header, main and footer sections * ✨ feat: add logo to header * ✨ feat: add links to header * 🐛 fix: resolve import error of SVG components * ✨ feat: remove till attribute for dynamic styling of icon SVG * 🔧 chore: add PNG fallback for unoptimized SVG in Image component * ✨ feat: add images for landing page * ✨ feat: add header and footer layout * ✨ feat: add part of the main section * 🐛 fix: change any type to specific type in svg module * ♻️ refactor: add responsive image component * 🔧 chore: add montserrat font to main section * ✨ feat: add custom logo svg component * ♻️ refactor: add card component * 🔧 chore: add images for landing page * ✨ feat: add card components * ✨ feat: add UI elements for landing page * ♻️ refactor: improve layout and components structure

* ✨ feat: add header, main and footer sections * ✨ feat: add logo to header * ✨ feat: add links to header * 🐛 fix: resolve import error of SVG components * ✨ feat: remove till attribute for dynamic styling of icon SVG * 🔧 chore: add PNG fallback for unoptimized SVG in Image component * ✨ feat: add images for landing page * ✨ feat: add header and footer layout * ✨ feat: add part of the main section * 🐛 fix: change any type to specific type in svg module * ♻️ refactor: add responsive image component * 🔧 chore: add montserrat font to main section * ✨ feat: add custom logo svg component * ♻️ refactor: add card component * 🔧 chore: add images for landing page * ✨ feat: add card components * ✨ feat: add UI elements for landing page

* ♻️ refactor: improve layout and components structure * ✨ [feat] add layout for landing page (#12) * ✨ feat: add header, main and footer sections * ✨ feat: add logo to header * ✨ feat: add links to header * 🐛 fix: resolve import error of SVG components * ✨ feat: remove till attribute for dynamic styling of icon SVG * 🔧 chore: add PNG fallback for unoptimized SVG in Image component * ✨ feat: add images for landing page * ✨ feat: add header and footer layout * ✨ feat: add part of the main section * 🐛 fix: change any type to specific type in svg module * ♻️ refactor: add responsive image component * 🔧 chore: add montserrat font to main section * ✨ feat: add custom logo svg component * ♻️ refactor: add card component * 🔧 chore: add images for landing page * ✨ feat: add card components * ✨ feat: add UI elements for landing page * ♻️ refactor: improve layout and components structure

21ow added 9 commits November 16, 2024 00:36

✨ feat: add header, main and footer sections

8a0b1b9

✨ feat: add logo to header

ecd4a4c

✨ feat: add links to header

4f0f804

🐛 fix: resolve import error of SVG components

3e14583

✨ feat: remove till attribute for dynamic styling of icon SVG

d5b63a8

🔧 chore: add PNG fallback for unoptimized SVG in Image component

8f85de6

✨ feat: add images for landing page

b5a6cea

✨ feat: add header and footer layout

475f35d

✨ feat: add part of the main section

ca71df2

ghost added the 🎨HTML&CSS Issues or tasks specifically related to HTML structure or CSS styling label Nov 16, 2024

ghost self-assigned this Nov 16, 2024

ghost linked an issue Nov 16, 2024 that may be closed by this pull request

[feat] add layout for landing page #4

Closed

3 tasks

🐛 fix: change any type to specific type in svg module

0aafc6d

devmanta reviewed Nov 16, 2024

View reviewed changes

najitwo approved these changes Nov 16, 2024

View reviewed changes

najitwo changed the title ~~4 feat add layout for landing page~~ [feat] add layout for landing page Nov 16, 2024

21ow added 7 commits November 17, 2024 15:34

♻️ refactor: add responsive image component

907bccc

🔧 chore: add montserrat font to main section

03cb0d5

✨ feat: add custom logo svg component

08678c5

♻️ refactor: add card component

e057644

🔧 chore: add images for landing page

20f73a4

✨ feat: add card components

faf8db8

✨ feat: add UI elements for landing page

adae75c

ghost added the ✨Feature Request for a new feature or functionality label Nov 17, 2024

Merge branch 'develop' into 4-feat-add-layout-for-landing-page

02bf575

ghost merged commit 2c630a1 into develop Nov 17, 2024
1 check passed

ghost deleted the 4-feat-add-layout-for-landing-page branch November 22, 2024 16:36

This pull request was closed.

		@@ -1,5 +1,141 @@
		'use client';

		import styles from './page.module.css';

[feat] add layout for landing page #12

[feat] add layout for landing page #12

Uh oh!

Conversation

ghost commented Nov 16, 2024 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Related Issue

📝 Description

📸 Screenshot

📢 Notes

Uh oh!

devmanta left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devmanta Nov 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devmanta Nov 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

najitwo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ghost commented Nov 16, 2024 •

edited by ghost

Loading

devmanta Nov 16, 2024 •

edited

Loading

devmanta Nov 16, 2024 •

edited

Loading