Skip to content

perf: HomeContent ux improvement #1056

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.

Sign up for GitHub

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

Merged
merged 15 commits into from
Sep 24, 2024
Merged

perf: HomeContent ux improvement #1056

Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
987003e
메인 화면 br 태그로 UX 개선
happyhyep Sep 23, 2024
a62ae71
Merge branch 'main' into main
lumirlumir Sep 23, 2024
8e27f54
fix: HomeContent ux improvement
happyhyep Sep 23, 2024
886f252
Merge branch 'main' of https://github.com/happyhyep/ko.react.dev
happyhyep Sep 23, 2024
15b7251
fix: HomeContent ux improvement
happyhyep Sep 23, 2024
545b406
BR 태그 반응형 적용
happyhyep Sep 23, 2024
8a58e84
BR 태그 반응형 적용
happyhyep Sep 23, 2024
7022f49
Header 코드 한줄로 변경
happyhyep Sep 23, 2024
1442e19
header 코드 한줄로 변경
happyhyep Sep 23, 2024
a75095f
Merge branch 'main' into main
lumirlumir Sep 23, 2024
1d57f9f
BR 태그 props 추가
happyhyep Sep 23, 2024
79d5dc4
BR 태그 props 추가
happyhyep Sep 23, 2024
4d186da
Merge branch 'main' into main
lumirlumir Sep 24, 2024
8e56fad
공백 추가
happyhyep Sep 24, 2024
137a790
Merge branch 'main' into main
lumirlumir Sep 24, 2024
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
37 changes: 29 additions & 8 deletions src/components/Layout/HomeContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function Section({children, background = null}) {

function Header({children}) {
return (
<h2 className="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">
<h2 className="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl">
{children}
</h2>
);
Expand All @@ -66,6 +66,10 @@ function Para({children}) {
);
}

function Br() {
return <br />;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
function Br() {
return <br />;
}
function Br({breakPointPrefix = 'lg'}) {
const breakPointClass = {
lg: 'lg:inline',
xl: 'xl:inline',
}[breakPointPrefix];
return <br className={cn('hidden', breakPointClass)} />;
}

이렇게 변경하는 것을 권장합니다.


function Center({children}) {
return (
<div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
Expand Down Expand Up @@ -160,7 +164,9 @@ export function HomeContent() {

<Section background="left-card">
<Center>
<Header>컴포넌트를 사용하여 사용자 인터페이스 만들기</Header>
<Header>
컴포넌트를 사용하여 <Br /> 사용자 인터페이스 만들기
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
컴포넌트를 사용하여 <Br /> 사용자 인터페이스 만들기
컴포넌트를 사용하여
<Br /> 사용자 인터페이스 만들기

얘도 일관성을 맞춰 수정하는게 좋을 듯 합니다

</Header>
<Para>
React를 사용하면 컴포넌트라고 불리는 조각들을 사용하여 사용자
인터페이스를 만들 수 있습니다. <Code>Thumbnail</Code>,{' '}
Expand All @@ -183,7 +189,10 @@ export function HomeContent() {

<Section background="right-card">
<Center>
<Header>코드와 마크업으로 컴포넌트 작성하기</Header>
<Header>
코드와 마크업으로
<Br /> 컴포넌트 작성하기
</Header>
<Para>
React 컴포넌트는 JavaScript 함수입니다. 조건부로 내용을 표시하려면{' '}
<Code>if</Code> 문을 사용할 수 있습니다. 목록을 표시하려면 배열에{' '}
Expand All @@ -206,7 +215,10 @@ export function HomeContent() {

<Section background="left-card">
<Center>
<Header>필요한 곳에 상호작용 요소 추가하기</Header>
<Header>
필요한 곳에
<Br /> 상호작용 요소 추가하기
</Header>
<Para>
React 컴포넌트는 데이터를 받고 화면에 표시할 내용을 반환합니다.
사용자가 입력란에 입력하는 것과 같이 상호작용에 응답하여 새
Expand Down Expand Up @@ -236,7 +248,10 @@ export function HomeContent() {

<Section background="right-card">
<Center>
<Header>프레임워크를 통해서 풀스택으로 만들기</Header>
<Header>
프레임워크를 통해서
<Br /> 풀스택으로 만들기
</Header>
<Para>
React는 라이브러리입니다. 컴포넌트를 함께 묶을 수 있지만, 라우팅과
데이터를 가져오는 방법을 규정하지는 않습니다. React로 앱을
Expand Down Expand Up @@ -414,8 +429,11 @@ export function HomeContent() {
<Section background="right-card">
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
<div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
<div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
<Header>새로운 기능이 준비되면 업그레이드 하기</Header>
<div className="w-full max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
<Header>
새로운 기능에 맞춰
<Br /> 업그레이드 하기
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
새로운 기능에 맞춰
<Br /> 업그레이드 하기
새로운 기능에 맞춰
<Br breakPointPrefix="xl" /> 업그레이드 하기

</Header>
<Para>
React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억 명
이상의 사용자가 있는 비즈니스에 크리티컬한 영역에서 테스트
Expand Down Expand Up @@ -502,7 +520,10 @@ export function HomeContent() {
/>
</div>
<Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
<Header>React 커뮤니티에 오신 것을 환영합니다.</Header>
<Header>
React 커뮤니티에
<Br /> 오신 것을 환영합니다.
</Header>
<ButtonLink
href={'/learn'}
type="primary"
Expand Down
Loading