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 ;
}