diff --git a/next.config.js b/next.config.js index 6506fd0..b47597a 100644 --- a/next.config.js +++ b/next.config.js @@ -5,6 +5,33 @@ const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig = { reactStrictMode: true, swcMinify: true, + webpack(config) { + // Grab the existing rule that handles SVG imports + const fileLoaderRule = config.module.rules.find((rule) => + rule.test?.test?.('.svg'), + ); + + config.module.rules.push( + // Reapply the existing rule, but only for svg imports ending in ?url + { + ...fileLoaderRule, + test: /\.svg$/i, + resourceQuery: /url/, // *.svg?url + }, + // Convert all other *.svg imports to React components + { + test: /\.svg$/i, + issuer: /\.[jt]sx?$/, + resourceQuery: { not: /url/ }, // exclude if *.svg?url + use: ['@svgr/webpack'], + }, + ); + + // Modify the file loader rule to ignore *.svg, since we have it handled now. + fileLoaderRule.exclude = /\.svg$/i; + + return config; + }, }; module.exports = withVanillaExtract(nextConfig); diff --git a/src/assets/icons/PaperAirplane.svg b/src/assets/icons/PaperAirplane.svg new file mode 100644 index 0000000..1dc5fb5 --- /dev/null +++ b/src/assets/icons/PaperAirplane.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/SmileFace.svg b/src/assets/icons/SmileFace.svg new file mode 100644 index 0000000..3ff6cd8 --- /dev/null +++ b/src/assets/icons/SmileFace.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/Star.svg b/src/assets/icons/Star.svg new file mode 100644 index 0000000..a5b889a --- /dev/null +++ b/src/assets/icons/Star.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/UnderScore.svg b/src/assets/icons/UnderScore.svg new file mode 100644 index 0000000..698903d --- /dev/null +++ b/src/assets/icons/UnderScore.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/WorldWithFlag.svg b/src/assets/icons/WorldWithFlag.svg new file mode 100644 index 0000000..4e5259f --- /dev/null +++ b/src/assets/icons/WorldWithFlag.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/main/BrandSection/BrandSection.css.ts b/src/components/main/BrandSection/BrandSection.css.ts new file mode 100644 index 0000000..c8ad972 --- /dev/null +++ b/src/components/main/BrandSection/BrandSection.css.ts @@ -0,0 +1,171 @@ +import { style } from '@vanilla-extract/css'; +import { TEXT_STYLES, COLORS, MEDIA_QUERY } from '@/constants/styles'; + +const titleWrapper = style({ + flexShrink: 0, + position: 'relative', + display: 'flex', + flexDirection: 'column', + paddingLeft: '101px', + + [`@media ${MEDIA_QUERY.tabletLg}`]: { + paddingLeft: '76px', + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + paddingLeft: '101px', + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + paddingLeft: '52px', + }, +}); + +const titleText = style({ + ...TEXT_STYLES.maintitle, +}); + +export const title = style([titleWrapper, titleText]); + +const descriptionWrapper = style({ + [`@media ${MEDIA_QUERY.tabletSm}`]: { + padding: '0 104px 100px', + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + padding: '0 52px', + }, +}); + +const descriptionText = style({ + ...TEXT_STYLES.description, +}); + +export const description = style([descriptionWrapper, descriptionText]); + +export const hipiText = style({ + color: COLORS.primary.red, + wordBreak: 'keep-all', + fontSize: '32px', + fontWeight: 400, + lineHeight: '110%', + + [`@media ${MEDIA_QUERY.tabletLg}`]: { + fontSize: '24px', + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + fontSize: '24px', + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: '20px', + }, +}); + +export const iconWrapper = style({ + margin: '0 4px', +}); + +const textIcon = style({ + verticalAlign: 'middle', +}); + +const starIcon = style({ + width: '34px', + height: '33px', + + [`@media ${MEDIA_QUERY.tabletLg}`]: { + width: '28px', + height: '27px', + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + width: '28px', + height: '27px', + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + width: '24px', + height: '23px', + }, +}); + +const worldWithFlagIcon = style({ + width: '24px', + height: '35px', + + [`@media ${MEDIA_QUERY.tabletLg}`]: { + width: '18px', + height: '26px', + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + width: '18px', + height: '26px', + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + width: '14px', + height: '20px', + }, +}); + +export const textStarIcon = style([textIcon, starIcon]); + +export const textWorldWithFlagIcon = style([textIcon, worldWithFlagIcon]); + +export const textWrapper = style({ + display: 'flex', +}); + +export const textWithUnderscore = style({ + position: 'relative', +}); + +export const smileIconWrapper = style({ + display: 'flex', + height: '100%', +}); + +export const smileIcon = style({ + width: '47px', + height: '35px', + + [`@media ${MEDIA_QUERY.tabletLg}`]: { + width: '37px', + height: '28px', + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + width: '37px', + height: '28px', + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + width: '32px', + height: '24px', + }, +}); + +export const unserscoreIcon = style({ + position: 'absolute', + left: 0, + bottom: '-2px', + width: '100%', +}); + +export const paperAirplaneIcon = style({ + position: 'absolute', + left: 0, + bottom: '-69px', + width: '182px', + height: '124px', + + [`@media ${MEDIA_QUERY.tabletLg}`]: { + bottom: '-83px', + width: '160px', + height: '110px', + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + bottom: '-83px', + left: '25px', + width: '160px', + height: '110px', + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + bottom: '-51px', + left: '9px', + width: '114px', + height: '78px', + }, +}); diff --git a/src/components/main/BrandSection/BrandSection.tsx b/src/components/main/BrandSection/BrandSection.tsx new file mode 100644 index 0000000..0e220ac --- /dev/null +++ b/src/components/main/BrandSection/BrandSection.tsx @@ -0,0 +1,53 @@ +import SectionWrapper from '../SectionWrapper'; +import Star from '@/assets/icons/Star.svg'; +import SmileFace from '@/assets/icons/SmileFace.svg'; +import WorldWithFlag from '@/assets/icons/WorldWithFlag.svg'; +import UnsderScore from '@/assets/icons/UnderScore.svg'; +import PaperAirplane from '@/assets/icons/PaperAirplane.svg'; +import * as styles from './BrandSection.css'; + +const BrandSection = () => { + return ( + +
+ 실력 너머의 + + + 유쾌함으로 + + +
+ +
+ + 세상을 바꿉니다. + +
+
+ GDSC Soongsil University는 서로의 실력과 무관하게 시너지를 발휘하는 학생 + 개발자 커뮤니티입니다. 그 시너지의 배경에는, 서로 마음을 맞추어 어떤 + 것도 함께라면 즐거운{' '} + +
+ 놀이 + + + +
+ + 로 만드는 선한 친화력이 있습니다. 그리고 우리는 그 즐거움을 전염시켜{' '} + +
+ 세상 + + + +
+ + 을 더 좋은 곳으로 만들 수 있다고 믿습니다. +
+ + ); +}; + +export default BrandSection; diff --git a/src/components/main/BrandSection/index.ts b/src/components/main/BrandSection/index.ts new file mode 100644 index 0000000..225a9da --- /dev/null +++ b/src/components/main/BrandSection/index.ts @@ -0,0 +1,3 @@ +import BrandSection from './BrandSection'; + +export default BrandSection; diff --git a/src/components/main/MainSection/MainSection.tsx b/src/components/main/MainSection/MainSection.tsx deleted file mode 100644 index 8c342ed..0000000 --- a/src/components/main/MainSection/MainSection.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as styles from './MainSection.css'; - -interface MainSectionProps { - children: React.ReactNode; - reverse?: boolean; -} - -const MainSection = ({ children, reverse }: MainSectionProps) => { - const direction = reverse ? 'reverse' : 'default'; - return
{children}
; -}; - -export default MainSection; diff --git a/src/components/main/MainSection/index.ts b/src/components/main/MainSection/index.ts deleted file mode 100644 index 0512f2d..0000000 --- a/src/components/main/MainSection/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import MainSection from './MainSection'; - -export default MainSection; diff --git a/src/components/main/MainSection/MainSection.css.ts b/src/components/main/SectionWrapper/SectionWrapper.css.ts similarity index 92% rename from src/components/main/MainSection/MainSection.css.ts rename to src/components/main/SectionWrapper/SectionWrapper.css.ts index 9cd8005..3415dd5 100644 --- a/src/components/main/MainSection/MainSection.css.ts +++ b/src/components/main/SectionWrapper/SectionWrapper.css.ts @@ -11,6 +11,7 @@ const wrapperBase = style({ height: '100vh', padding: '0 51px', gap: '128px', + margin: 'auto', [`@media ${MEDIA_QUERY.tabletLg}`]: { padding: '0 24px', @@ -18,11 +19,13 @@ const wrapperBase = style({ }, [`@media ${MEDIA_QUERY.tabletSm}`]: { flexDirection: 'column', + alignItems: 'flex-start', padding: '0', gap: '150px', }, [`@media ${MEDIA_QUERY.mobile}`]: { flexDirection: 'column', + alignItems: 'flex-start', padding: '0', gap: '88px', }, diff --git a/src/components/main/SectionWrapper/SectionWrapper.tsx b/src/components/main/SectionWrapper/SectionWrapper.tsx new file mode 100644 index 0000000..a8e77c4 --- /dev/null +++ b/src/components/main/SectionWrapper/SectionWrapper.tsx @@ -0,0 +1,13 @@ +import * as styles from './SectionWrapper.css'; + +interface SectionWrapperProps { + children: React.ReactNode; + reverse?: boolean; +} + +const SectionWrapper = ({ children, reverse }: SectionWrapperProps) => { + const direction = reverse ? 'reverse' : 'default'; + return
{children}
; +}; + +export default SectionWrapper; diff --git a/src/components/main/SectionWrapper/index.ts b/src/components/main/SectionWrapper/index.ts new file mode 100644 index 0000000..61e93ff --- /dev/null +++ b/src/components/main/SectionWrapper/index.ts @@ -0,0 +1,3 @@ +import SectionWrapper from './SectionWrapper'; + +export default SectionWrapper; diff --git a/src/constants/styles/textStyle.ts b/src/constants/styles/textStyle.ts index 8930a74..0340ab7 100644 --- a/src/constants/styles/textStyle.ts +++ b/src/constants/styles/textStyle.ts @@ -26,194 +26,192 @@ export type TextStyleNameType = typeof TEXT_STYLE_NAME[keyof typeof TEXT_STYLE_NAME]; interface TextStyleType { - fontSize: number; + fontSize: string; fontWeight: number; lineHeight: string; } -const LINE_HEIGHT_RATIO = 1.5; - export const TEXT_STYLES: Record = { [TEXT_STYLE_NAME.maintitle]: { - fontSize: 64, + fontSize: '64px', fontWeight: 700, lineHeight: '120%', [`@media ${MEDIA_QUERY.tabletLg}`]: { - fontSize: 48, + fontSize: '48px', }, [`@media ${MEDIA_QUERY.tabletSm}`]: { - fontSize: 48, + fontSize: '48px', }, [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 36, + fontSize: '36px', }, }, [TEXT_STYLE_NAME.title]: { - fontSize: 36, + fontSize: '36px', fontWeight: 900, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 30, + fontSize: '30px', fontWeight: 900, }, }, [TEXT_STYLE_NAME.subtitle1]: { - fontSize: 30, + fontSize: '30px', fontWeight: 800, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 22, + fontSize: '22px', fontWeight: 800, }, }, [TEXT_STYLE_NAME.subtitle2B]: { - fontSize: 22, + fontSize: '22px', fontWeight: 700, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 20, + fontSize: '20px', fontWeight: 700, }, }, [TEXT_STYLE_NAME.subtitle2R]: { - fontSize: 22, + fontSize: '22px', fontWeight: 500, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 20, + fontSize: '20px', fontWeight: 500, }, }, [TEXT_STYLE_NAME.subtitle3]: { - fontSize: 20, + fontSize: '20px', fontWeight: 700, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 18, + fontSize: '18px', fontWeight: 700, }, }, [TEXT_STYLE_NAME.body1B]: { - fontSize: 20, + fontSize: '20px', fontWeight: 700, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 18, + fontSize: '18px', fontWeight: 700, }, }, [TEXT_STYLE_NAME.body1R]: { - fontSize: 20, + fontSize: '20px', fontWeight: 400, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 18, + fontSize: '18px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.body2B]: { - fontSize: 18, + fontSize: '18px', fontWeight: 700, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 18, + fontSize: '18px', fontWeight: 700, }, }, [TEXT_STYLE_NAME.body2R]: { - fontSize: 18, + fontSize: '18px', fontWeight: 400, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 16, + fontSize: '16px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.body3]: { - fontSize: 16, + fontSize: '16px', fontWeight: 400, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 14, + fontSize: '14px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.caption]: { - fontSize: 14, + fontSize: '14px', fontWeight: 400, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 12, + fontSize: '12px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.button1B]: { - fontSize: 20, + fontSize: '20px', fontWeight: 700, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 12, + fontSize: '12px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.button1R]: { - fontSize: 20, + fontSize: '20px', fontWeight: 400, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 18, + fontSize: '18px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.button2B]: { - fontSize: 18, + fontSize: '18px', fontWeight: 700, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 16, + fontSize: '16px', fontWeight: 700, }, }, [TEXT_STYLE_NAME.button2R]: { - fontSize: 18, + fontSize: '18px', fontWeight: 400, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 16, + fontSize: '16px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.button3R]: { - fontSize: 16, + fontSize: '16px', fontWeight: 400, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 14, + fontSize: '14px', fontWeight: 400, }, }, [TEXT_STYLE_NAME.button4B]: { - fontSize: 14, + fontSize: '14px', fontWeight: 800, lineHeight: 'normal', [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 13, + fontSize: '13px', fontWeight: 800, }, }, [TEXT_STYLE_NAME.description]: { - fontSize: 25, + fontSize: '25px', fontWeight: 500, lineHeight: '160%', [`@media ${MEDIA_QUERY.tabletLg}`]: { - fontSize: 20, + fontSize: '20px', }, [`@media ${MEDIA_QUERY.tabletSm}`]: { - fontSize: 20, + fontSize: '20px', }, [`@media ${MEDIA_QUERY.mobile}`]: { - fontSize: 16, + fontSize: '16px', }, }, }; diff --git a/src/pages/global.css b/src/pages/global.css index ea051bb..3b5e5ec 100644 --- a/src/pages/global.css +++ b/src/pages/global.css @@ -10,6 +10,14 @@ src: url('../assets/fonts/Nanum-BaReunHiPi.woff2') format('woff2-variations'); } +:root { + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + *, *:before, *:after { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5e280fa..a2bf163 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,5 @@ -import { Test } from '@/components/common'; +import BrandSection from '@/components/main/BrandSection'; export default function Home() { - return ; + return ; }