Skip to content

Commit 703389b

Browse files
youngminssyoungminss
committed
💄 스타일링 TailwindCSS 툴 추가, 베이스 코드 해당 툴로 변경 중
1 parent 8710bdf commit 703389b

File tree

11 files changed

+368
-27
lines changed

11 files changed

+368
-27
lines changed

‎.prettierrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
"trailingComma": "all",
66
"tabWidth": 2,
77
"printWidth": 130,
8-
"endOfLine": "auto"
8+
"endOfLine": "auto",
9+
"plugins": ["prettier-plugin-tailwindcss"]
910
}

‎app/RootStyleRegistry.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

3-
import React, { PropsWithChildren, useState } from 'react';
43
import { useServerInsertedHTML } from 'next/navigation';
4+
import { PropsWithChildren, useState } from 'react';
55
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
66

77
const StyledComponentsRegistry = ({ children }: PropsWithChildren) => {

‎app/layout.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Provider } from 'jotai';
66
import ProtectedRouteWithAuthContainer from 'pageComponents/app/ProtectedRouteWithAuthContainer';
77
import styled, { ThemeProvider } from 'styled-components';
88
import { GlobalStyle, theme } from 'styles';
9+
import '../styles/globals.css';
910
import StyledComponentsRegistry from './RootStyleRegistry';
1011

1112
const RootLayout = ({ children }: { children: React.ReactNode }) => {

‎app/page.tsx

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
} from 'public/static/images';
1717
import styled, { CSSProperties } from 'styled-components';
1818
import { theme } from 'styles';
19+
import '../styles/globals.css';
1920

2021
const SERVICE_INTRODUCE_PDF_LINK = 'https://drive.google.com/file/d/1f40Y7fdPCTnH83JgiIMmdeFb_igRMUBP/view';
2122
const SERVICE_APP_STORE_LINK = 'https://apps.apple.com/kr/app/pump/id1669869655';
@@ -126,7 +127,7 @@ const Root = () => {
126127
서비스 소개서
127128
</Typography>
128129
</StyledLinkBtn>
129-
<StyledLinkBtn href={SERVICE_APP_STORE_LINK} target={'_blank'}>
130+
<StyledLinkBtn href={SERVICE_APP_STORE_LINK} target={'_blank'} className="!hidden pc:!flex">
130131
<Image src={AppStoreDownloadImg} alt="app store" width={156} height={52} />
131132
</StyledLinkBtn>
132133
</StyledLayout.FlexBox>
@@ -243,17 +244,16 @@ const Root = () => {
243244
</StyledLayout.FlexBox>
244245
</StyledLayout.FlexBox>
245246

246-
<StyledLayout.FlexBox width="996px" margin="88px 0 96px 0">
247+
<div className="mb-[4.8rem] mt-[4.0rem] flex w-full max-w-[99.6rem] pc:mt-[9.6rem] pc:mb-[8.8rem]">
247248
<BackgroundBox
248249
alignItems="center"
249250
justifyContent="space-between"
250251
width="100%"
251252
padding="34px 48px"
252253
backgroundColor={theme.colors.primary_001}
254+
className="!justify-center !px-[2.4rem] !py-[2.4rem] pc:!justify-between pc:!py-[4.7rem] pc:!px-[4.8rem]"
253255
>
254-
<Typography variant="h2" aggressive="headline_oneline_003" color={theme.colors.primary_010}>
255-
리필스테이션 홍보는 Pump에서 시작해보세요.
256-
</Typography>
256+
<h3 className="text-heading-6 text-primary pc:text-heading-3">리필스테이션 홍보는 Pump에서 시작해보세요.</h3>
257257

258258
<StyledLinkBtn
259259
href={'/registration/step1'}
@@ -263,13 +263,27 @@ const Root = () => {
263263
backgroundcolor={theme.colors.primary_010}
264264
color={theme.colors.white}
265265
hoveropacity={'0.8'}
266+
className="!hidden pc:!block"
266267
>
267268
<Typography variant="span" aggressive="button_000">
268269
입점 신청
269270
</Typography>
270271
</StyledLinkBtn>
271272
</BackgroundBox>
272-
</StyledLayout.FlexBox>
273+
</div>
274+
275+
<div className="w-full justify-center bg-gray-1 px-[2rem] py-[4.8rem] text-center pc:hidden">
276+
<h3 className="mb-[0.8rem] text-heading-multi-4 text-gray-7">
277+
Pump 서비스를
278+
<br />
279+
직접 사용해보고 싶으신가요 ?
280+
</h3>
281+
<p className="mb-[2rem] text-body-4 text-gray-6">애플 앱 스토어에서 다운받을 수 있어요.</p>
282+
283+
<StyledLinkBtn href={SERVICE_APP_STORE_LINK} target={'_blank'}>
284+
<Image src={AppStoreDownloadImg} alt="app store" width={156} height={52} />
285+
</StyledLinkBtn>
286+
</div>
273287
</StyledLayout.FlexBox>
274288
);
275289
};

‎components/shared/Header/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Header = () => {
2424
<Image src={PumpLogo} alt="Pump Logo" width={110} height={50} priority />
2525
</S.LogoWrapper>
2626

27-
<StyledLayout.UnorderList gap={'40px'}>
27+
<StyledLayout.UnorderList gap={'40px'} className="!hidden pc:!flex">
2828
{!userSession?.id && (
2929
<S.NavigationItem>
3030
<StyledLayout.LinkWrapper href={'/signin'} replace>

‎next.config.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
/** @type {import('next').NextConfig} */
22

33
const nextConfig = {
4-
4+
reactStrictMode: true,
5+
swcMinify: true,
56
experimental: {
67
appDir: true,
78
typedRoutes: true,
89
},
910
compiler: {
1011
styledComponents: true,
1112
},
12-
swcMinify: true,
13-
reactStrictMode: true,
1413
images: {
1514
remotePatterns: [
1615
{
@@ -27,8 +26,6 @@ const nextConfig = {
2726
}
2827

2928
]
30-
31-
3229
},
3330
webpack: (config) => {
3431
config.module.rules.push({
@@ -45,7 +42,7 @@ const nextConfig = {
4542
S3_UPLOAD_URL: process.env.S3_UPLOAD_URL,
4643
S3_UPLOAD_SECRET: process.env.S3_UPLOAD_SECRET,
4744
S3_UPLOAD_BUCKET: process.env.S3_UPLOAD_BUCKET,
48-
S3_UPLOAD_REGION: process.env.S3_UPLOAD_REGION,
45+
S3_UPLOAD_REGION: process.env.S3_UPLOAD_REGION,
4946
API_BASE_URL: process.env.API_BASE_URL,
5047
KAKAO_CLIENT_ID: process.env.KAKAO_CLIENT_ID,
5148
KAKAO_CLIENT_SECRET: process.env.KAKAO_CLIENT_SECRET,

‎package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"@types/styled-components": "^5.1.26",
4444
"@typescript-eslint/eslint-plugin": "^5.0.0",
4545
"@typescript-eslint/parser": "^5.45.1",
46+
"autoprefixer": "^10.4.13",
4647
"babel-plugin-styled-components": "^2.0.7",
4748
"eslint": "^8.0.1",
4849
"eslint-config-prettier": "^8.5.0",
@@ -54,7 +55,10 @@
5455
"eslint-plugin-react": "^7.31.11",
5556
"husky": "^8.0.2",
5657
"lint-staged": "^13.1.0",
57-
"prettier": "^2.8.0"
58+
"postcss": "^8.4.21",
59+
"prettier": "^2.8.0",
60+
"prettier-plugin-tailwindcss": "^0.2.4",
61+
"tailwindcss": "^3.2.7"
5862
},
5963
"lint-staged": {
6064
"**/*.{js,jsx,ts,tsx}": [

‎postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎styles/globals.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
html {
6+
font-size: 62.5%;
7+
overflow-x: hidden;
8+
overflow-y: scroll;
9+
}

‎tailwind.config.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
4+
theme: {
5+
extend: {
6+
colors: {
7+
white: '#FFFFFF',
8+
'gray-0': '#F9F9F9',
9+
'gray-1': '#F2F2F7',
10+
'gray-2': '#E5E5EA',
11+
'gray-3': '#C7C7CC',
12+
'gray-4': '#8E9E93',
13+
'gray-5': '#636366',
14+
'gray-6': '#3A3A3C',
15+
'gray-7': '#1C1C1E',
16+
primary: '#FF6C00',
17+
'orange-1': '#FFFCF1',
18+
'orange-2': '#FFF8E1',
19+
'orange-3': '#FFEBB2',
20+
'orange-4': '#FFDF81',
21+
'orange-5': '#FFD34D',
22+
'orange-6': '#FFBF00',
23+
'orange-7': '#FFB100',
24+
'orange-8': '#FF9E00',
25+
'orange-9': '#FF8D00',
26+
error: '#F04700',
27+
success: '#44927F',
28+
},
29+
fontSize: {
30+
'heading-1': ['4.8rem', { lineHeight: '5rem', fontWeight: 'bold', letterSpacing: '-0.1rem' }],
31+
'heading-2': ['3.2rem', { lineHeight: '3.4rem', fontWeight: 'bold', letterSpacing: '-0.1rem' }],
32+
'heading-3': ['2.4rem', { lineHeight: '2.6rem', fontWeight: 'bold', letterSpacing: '-0.06rem' }],
33+
'heading-4': ['1.8rem', { lineHeight: '2.0rem', fontWeight: 'bold', letterSpacing: '-0.04rem' }],
34+
'heading-5': ['1.8rem', { lineHeight: '2.0rem', fontWeight: 'bold', letterSpacing: '-0.04rem' }],
35+
'heading-6': ['1.6rem', { lineHeight: '1.8rem', fontWeight: 'bold', letterSpacing: '-0.04rem' }],
36+
'heading-multi-1': ['4.8rem', { lineHeight: '6.4rem', fontWeight: 'bold', letterSpacing: '-0.1rem' }],
37+
'heading-multi-2': ['3.2rem', { lineHeight: '4.4rem', fontWeight: 'bold', letterSpacing: '-0.1rem' }],
38+
'heading-multi-3': ['2.4rem', { lineHeight: '3.2rem', fontWeight: 'bold', letterSpacing: '-0.1rem' }],
39+
'heading-multi-4': ['1.8rem', { lineHeight: '2.6rem', fontWeight: 'bold', letterSpacing: '-0.1rem' }],
40+
'heading-multi-6': ['1.6rem', { lineHeight: '2.4rem', fontWeight: 'bold', letterSpacing: '-0.1rem' }],
41+
'body-1': ['1.7rem', { lineHeight: '1.9rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
42+
'body-2': ['1.6rem', { lineHeight: '1.8rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
43+
'body-3': ['1.5rem', { lineHeight: '1.7rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
44+
'body-4': ['1.4rem', { lineHeight: '1.6rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
45+
'body-5': ['1.3rem', { lineHeight: '1.5rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
46+
'body-multi-1': ['1.7rem', { lineHeight: '2.6rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
47+
'body-multi-2': ['1.6rem', { lineHeight: '2.5rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
48+
'body-multi-3': ['1.5rem', { lineHeight: '2.4rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
49+
'body-multi-4': ['1.4rem', { lineHeight: '2.3rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
50+
'body-multi-5': ['1.3rem', { lineHeight: '1.7rem', fontWeight: 'normal', letterSpacing: '-0.04rem' }],
51+
'caption-s': ['1.1rem', { lineHeight: '1.3rem', fontWeight: 'medium', letterSpacing: '-0.1rem' }],
52+
'caption-m': ['1.1rem', { lineHeight: '1.3rem', fontWeight: 'medium', letterSpacing: '-0.04rem' }],
53+
'caption-l': ['1.2rem', { lineHeight: '1.4rem', fontWeight: 'medium', letterSpacing: '-0.04rem' }],
54+
'button-0': ['1.8rem', { lineHeight: '2.0rem', fontWeight: 'medium', letterSpacing: '-0.04rem' }],
55+
'button-1': ['1.6rem', { lineHeight: '1.8rem', fontWeight: 'medium', letterSpacing: '-0.04rem' }],
56+
'tab-1': ['1.5rem', { lineHeight: '1.7rem', fontWeight: 'semibold', letterSpacing: '-0.04rem' }],
57+
'tab-2': ['1.5rem', { lineHeight: '1.7rem', fontWeight: 'medium', letterSpacing: '-0.04rem' }],
58+
'tab-3': ['1.4rem', { lineHeight: '1.6rem', fontWeight: 'semibold', letterSpacing: '-0.04rem' }],
59+
},
60+
61+
screens: {
62+
pc: '800px',
63+
mobile: { min: '1px', max: '799px' },
64+
},
65+
},
66+
},
67+
plugins: [],
68+
};

0 commit comments

Comments
 (0)