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.

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

Jump to bottom

[ Style/10 ] global 레이아웃으로 모바일 뷰 설정 #11

Merged
merged 11 commits into from
Jun 3, 2024
Merged

[ Style/10 ] global 레이아웃으로 모바일 뷰 설정 #11

merged 11 commits into from
Jun 3, 2024

Conversation

Happhee
Copy link
Collaborator

@Happhee Happhee commented Jun 3, 2024

🔥 Related Issues

resolve #10

💜 작업 내용

  • GlobalStyle 모바일 뷰로 고정
  • WebViewContainer로 개발설정

✅ PR Point

로컬 폰트 적용

  • layout.tsx에 정의해두고, tailwind.config.ts에 fontFamily적용해서 font-pretendard로 사용할 수 있게 했습니다!
const pretendard = localFont({
  src: [
    {
      path: "../fonts/Pretendard-Light.woff2",
      weight: "300",
    },
    {
      path: "../fonts/Pretendard-Regular.woff2",
      weight: "400",
    },
    {
      path: "../fonts/Pretendard-Medium.woff2",
      weight: "500",
    },
    {
      path: "../fonts/Pretendard-SemiBold.woff2",
      weight: "600",
    },
    {
      path: "../fonts/Pretendard-Bold.woff2",
      weight: "700",
    },
  ],
  variable: "--font-pretendard",
});

스타일 지정

  • figma상에는 text_black , text_gray1 으로 되어있는데 언더바가 치기 귀찮아서 text-black, text-gray1으로 사용할 수 있도록 지정하였습니다.
   success: "#0166B3",
        error: "##B00020",
        main: "#264932",
        background1: "#F5F5F5",
        text: {
          black: "#000000",
          gray1: "#484848",
          gray2: "#A5A5A5",
          gray3: "#E6E6E6",
        },

svg사용하기

  • public/assets/icon{가로길이} 로 icon분리하였습니다.
  • next.config.mjs 에 svg 사용할 수 있도록 설정했습니다!
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },

모바일 뷰 설정

  • layout.tsx 에 max-width를 480px로 설정했습니다..!
 <body
          className={cn(
            'scrollbar-hide" relative mx-auto flex',
            "min-h-[100dvh] w-full max-w-[480px] overscroll-y-none",
          )}
        >
          <Suspense>{children}</Suspense>
        </body>

일단 혹시몰라서 scrollbar는 숨김처리 했습니다!

👀 스크린샷 / GIF / 링크

image

📚 Reference

@soomin9106
Copy link
Collaborator

@Happhee
확인 완료 했습니다!
폰트, svg 설정도 완료 하셨군요 👍

@Happhee Happhee merged commit 9e40204 into main Jun 3, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@soomin9106 soomin9106 soomin9106 approved these changes

Assignees
No one assigned
Labels
🎨 style
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[ 스타일 설정 ] global 레이아웃으로 모바일 뷰 설정
2 participants
@Happhee @soomin9106