[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현 #12

youngminss · 2022-12-22T08:26:27Z

📎 Related Issues

📋 작업 내용

공통 컴포넌트 - Header & GNB 컴포넌트 구현
공통 컴포넌트 - Footer 컴포넌트 구현
공통 컴포넌트 - Global Layout 컴포넌트, Contents Layout 컴포넌트 구현 (max-width 반영)
랜딩페이지 - 메인 컨텐츠 영역
랜딩페이지 - 입점신청 진행 버튼 👉 @say-young516 이 구현하는 Button 컴포넌트로 대체할 예정 )

🔎 PR Point

styled-components 환경설정을 위한 babelrc.json 을 제거 👉 next.config.js 에서 experimental 에서 설정 가능 확인 후 마이그레이션

그로인해, SWC 적용이 가능해짐
but, 아직까지 Turbopack 은 alpha 버전이긴하나, 내부 dependency 문제로 적용이 안된 상태이긴하나, 지금 당장의 개발 경험을 저하시킬 정도는 아니기 때문에 적용이 안된 상태이므로 확인할 것
어떤 문제로 적용이 안되는 지 궁금하다면, package.json 실행 스크립트 중 dev 커맨드가 현재 next dev 인데 next dev --turbo 로 변경해서 실행해보면 알 수 있음

Typography 공통 컴포넌트 구현

매번 각 페이지마다 텍스트에 스타일링을 적용하기 위해, 스타일 컴포넌트를 여러 개 생성하다보니 일회성 코드가 여럿 생성된다고 생각하여, Typography 공통 컴포넌트를 구현함
최대한, 이 컴포넌트를 통해서 텍스트 관련 UI 는 적용할 수 있도록 하면 좋을 듯함
그럼에도 불구하고, 유연하지 못할 수 있는 상황에 대해서는 텍스트에 대한 새로운 스타일 컴포넌트를 생성해서 사용할 것

// ===== Typography =====

// variant : 원하는 html 태그를 지정하면, 런타임 환경에서 해당 html 태그로 동적으로 변환됨(by. styled-components `as` 속성)
// aggressive : Figma 에서 디자인팀이 설정한 이름에 대해 분리해 놓음

type Props = {
	variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'caption' | 'span' | 'div';
	aggressive:
		| 'headline_001'
		| 'headline_002'
		| 'headline_003'
		| 'headline_004'
		| 'body_oneline_001'
		| 'body_oneline_002'
		| 'body_oneline_003'
		| 'body_multiline_001'
		| 'body_multiline_002'
		| 'body_multiline_003';
	margin?: string;
	padding?: string;
	color?: string;
	lineHeight?: string;
	align?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
	whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap';
} & PropsWithChildren;

const Typography = ({ children, variant, aggressive, ...props }: Props) => {
	return (
		<S.Component as={variant} aggressive={aggressive} {...props}>
			{children}
		</S.Component>
	);
};

// styled.ts

import styled from 'styled-components';

type ComponentProps = {
	aggressive:
		| 'headline_001'
		| 'headline_002'
		| 'headline_003'
		| 'headline_004'
		| 'body_oneline_001'
		| 'body_oneline_002'
		| 'body_oneline_003'
		| 'body_multiline_001'
		| 'body_multiline_002'
		| 'body_multiline_003';
	margin?: string;
	padding?: string;
	color?: string;
	lineHeight?: string;
	align?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
	whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap';
};

export const Component = styled.div<ComponentProps>`
	margin: ${({ margin }) => margin && margin};
	padding: ${({ padding }) => padding && padding};
	${({ aggressive, theme }) => theme.fonts[aggressive]}    // ✅ props 로 넘어오는 aggressive 값에 따라, theme.ts 에서 정의한 폰트 스타일링이 적용됨
	line-height: ${({ lineHeight }) => lineHeight && lineHeight};
	text-align: ${({ align }) => align && align};
	white-space: ${({ whiteSpace }) => whiteSpace && whiteSpace};
`;

랜딩페이지 - 컨텐츠 영역 버튼 부분

@say-young516 이 제작할 Button 컴포넌트로 대체할 예정 !

컨텐츠 영역 배경색에 대한 예측

무슨말이냐면, 랜딩페이지에서 (현재)메인 컨텐츠 영역의 백그라운드는 흰색 이다.
but, 입점신청 플로우에서 메인 컨텐츠 영역의 백그라운드색은 옅은 회색 이다.
이에 대해, 현재 app 루트 디렉터리에서의 layout.tsx 에서 다음과 같이 Header, Footer 를 제외한 Contents 영역에 대해 컨테이너 컴포넌트 가 존재하는데, 이 컴포넌트에 background-color 를 현재는 흰색 으로 고정해서 사용 중
만약, 이 형태를 유지하면서 props 를 내려주는 방식으로 필요에 따라 배경색을 변경하는 방식을 취하든, Contents 영역에 대해 Root 단계에서 컨테이너를 감싸지 않고, 각 페이지 별로 필요에 따라 컨테이너 컴포넌트를 구성할 것인지는 문제가 발생할 경우 조취해볼 것
(무슨 말인지 이해안가면, 이야기할 것) @say-young516

😡 Trouble Shooting

(이 작업을 하던 중에 발생했던 것)

👀 스크린샷 / GIF / 링크

랜딩페이지 1차 결과물

➕ 추가적인 태스크

랜딩페이지 - 메인컨텐츠 영역 입정 신청하기 실제 Button 컴포넌트 적용
로그인한 후에 Header 에서 네비게이션 아이템들(로그아웃, 마이페이지) UI 추가
프로젝트 로고 제작된 후, 로고 이미지 반영

📚 Reference

웹 접근성 - IR

NextJS 13 - Font

NextJS 13 - SWC (related. styled-compoments 설정)

Next13 Turbopack(alpha, 200.12.22 기준)

✅ PR Submit 이전에 확인하세요 !

체크리스트

Merge 하는 브랜치에 Master/Main 브랜치가 아닙니다. (개인 작업시에만 확인)
Critical 한 Error 또는 Warning 이 존재하지 않습니다.
브라우저에 console 이 존재하지 않습니다.

…R 기법을 위한 Global CSS 추가

+ consistent-type-definitions : 타입스크립트 type 키워드로 타입을 선언해야할 상황이 있기 때문 + strict-boolean-expressions : 명확한 nullish 가 아니 falsy 한 값들에 대한 삼항 연산자를 사용하기 위해

…belrc 제거

say-young516 · 2022-12-22T13:34:11Z

오키 ~ 이해는 다 했는데 일단 저 contents 관련 부분은, 적용해봐야 알 것 같고 이거 merge 되면 Typography는 해당 사항대로 수정해놓겠습니당

say-young516 · 2022-12-22T13:44:19Z

styles/GlobalStyle.ts

+
+	// Web Accessibility Styles - IR
+	.visually-hidden {
+		position: absolute !important;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: 0;
+		border: 0;
+		overflow: hidden;
+		clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+		clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
+		clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
+		white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
+	}


IR 기법에 대해서는 생각해본 적이 없었는데, 새롭네요,, 배워갑니다 💨 아래는 내가 참고한 자료들,, 나중에 필요하면 다시 살펴보려구용
https://snupi.tistory.com/109

https://velog.io/@wltnrms0629/HTMLCSS-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%91%9C%ED%98%84-IR%EA%B8%B0%EB%B2%95

웹 접근성에 대해서는 나도 아직 공부해야할 게 더 많아용 ㅋㅋ,,
이런 존재부터 아는 게 중요하다고 생각해요 ~ 👍

say-young516 · 2022-12-22T13:48:20Z

app/layout.tsx

@@ -33,6 +33,6 @@ export default RootLayout;

 const ChildrenContainer = styled.main`
 	position: relative;
-	min-height: calc(100vh - 160px);
-	font-size: 2rem;
+	min-height: calc(100vh - 258px);


이렇게 설정해둔 이유가 있나요 ~? 궁금

음, 어디까지나 랜딩페이지 만 구현되었다는 전제하지만

현재 디자인 시안을 기준으로 랜딩페이지의 Header, Footer 를 제외한 Contents 영역의 컨텐츠가 많지가 않아서, 컨텐츠를 기준으로만 height 를 설정하면

Footer 의 경우, 현재 디자인 시안처럼 원페이지 형태로 딱 이쁘게 안떨어져서 나오더라구요 ~
Footer 가 원페이지에서 하단에 딱 걸치는 형태가 아니라, Contents 가 끝나는 시점 바로 밑에 배치된다는 !

이해가 가시나요 ~ ?

음, 어디까지나 랜딩페이지 만 구현되었다는 전제하지만

현재 디자인 시안을 기준으로 랜딩페이지의 Header, Footer 를 제외한 Contents 영역의 컨텐츠가 많지가 않아서, 컨텐츠를 기준으로만 height 를 설정하면

Footer 의 경우, 현재 디자인 시안처럼 원페이지 형태로 딱 이쁘게 안떨어져서 나오더라구요 ~ Footer 가 원페이지에서 하단에 딱 걸치는 형태가 아니라, Contents 가 끝나는 시점 바로 밑에 배치된다는 !

이해가 가시나요 ~ ?

아하 아이갓잇..! 못난이 UI를 방지하기 위한 거였군뇨.. 신기하네욥~

say-young516 · 2022-12-22T13:49:39Z

app/page.tsx

+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					width: '240px',
+					height: '50px',
+					borderRadius: '8px',
+					backgroundColor: '#0064FF',
+					color: '#FFFFFF',
+					fontSize: '16px',
+					fontWeight: 'medium',
+				}}
+			>


아 알았어 준다고요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 정성이네..

youngminss added 12 commits December 21, 2022 17:47

🍱 Global Icon Assets 수정

c56d105

💄 Header - GNB 컴포넌트 UI 구현

c0e704c

💄 UnorderList, LinkWrapper, BackgroundImageBox 스타일 컴포넌트 생성, 웹 접근성 - I…

7a0f1d6

…R 기법을 위한 Global CSS 추가

🍱 Pretendard Font Assets 추가

6340b87

🍱 next13 localFont 설정 후 폰트 적용(in. theme.ts)

1da18b5

💄 Typography 공통 컴포넌트 추가

738876e

🩹 공통 StyledLayout 컴포넌트 - BoxFlexColumnCenter 네이밍으로 변경

482fcde

💄 Footer 컴포넌트 UI 구현

b0d5e3c

💄 공통 StyledLayout - FlexBox, SubMaxContainer 추가, BoxFlexColumnCenter 제거

2719e7b

💄 랜딩 페이지 1차 구현

8ec9bee

🔧 next.config.js - styled-components 설정을 complier 를 통해 설정, swc 적용, ba…

92b92a7

…belrc 제거

youngminss added 💄 UI UI 스타일링 🍱 Support Assets 작업 ⚙️ Enviroment 개발 환경 작업 labels Dec 22, 2022

youngminss added this to the 스프린트 1 (2022.12.19 ~ 2022.12.26) milestone Dec 22, 2022

youngminss requested a review from say-young516 December 22, 2022 08:26

youngminss self-assigned this Dec 22, 2022

say-young516 approved these changes Dec 22, 2022

View reviewed changes

say-young516 merged commit b39d3ec into develop Dec 22, 2022

say-young516 deleted the feature/#7 branch December 22, 2022 14:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현 #12

[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현 #12

youngminss commented Dec 22, 2022 •

edited

Loading

say-young516 commented Dec 22, 2022 •

edited

Loading

say-young516 Dec 22, 2022

youngminss Dec 22, 2022

say-young516 Dec 22, 2022

youngminss Dec 22, 2022

say-young516 Dec 22, 2022

say-young516 Dec 22, 2022

[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현 #12

[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현 #12

Conversation

youngminss commented Dec 22, 2022 • edited Loading

📎 Related Issues

📋 작업 내용

🔎 PR Point

styled-components 환경설정을 위한 babelrc.json 을 제거 👉 next.config.js 에서 experimental 에서 설정 가능 확인 후 마이그레이션

Typography 공통 컴포넌트 구현

랜딩페이지 - 컨텐츠 영역 버튼 부분

컨텐츠 영역 배경색에 대한 예측

😡 Trouble Shooting

👀 스크린샷 / GIF / 링크

랜딩페이지 1차 결과물

➕ 추가적인 태스크

📚 Reference

웹 접근성 - IR

NextJS 13 - Font

NextJS 13 - SWC (related. styled-compoments 설정)

Next13 Turbopack(alpha, 200.12.22 기준)

✅ PR Submit 이전에 확인하세요 !

say-young516 commented Dec 22, 2022 • edited Loading

say-young516 Dec 22, 2022

Choose a reason for hiding this comment

youngminss Dec 22, 2022

Choose a reason for hiding this comment

say-young516 Dec 22, 2022

Choose a reason for hiding this comment

youngminss Dec 22, 2022

Choose a reason for hiding this comment

say-young516 Dec 22, 2022

Choose a reason for hiding this comment

say-young516 Dec 22, 2022

Choose a reason for hiding this comment

youngminss commented Dec 22, 2022 •

edited

Loading

say-young516 commented Dec 22, 2022 •

edited

Loading