[Contacts articles] Contacts 페이지(1/2) - 연락처 컴포넌트 구현

next-i18next.config.js

@@ -10,8 +10,8 @@ const isBrowser = typeof window !== 'undefined';
 module.exports = {
   // debug: true,
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'de', 'it'],
+    defaultLocale: 'ko',
+    locales: ['en'],
   },
   backend: {
     backendOptions: [

next.config.js

@@ -2,8 +2,9 @@
 const path = require('path');
 
 const nextConfig = {
+  reactStrictMode: false,
   sassOptions: {
-    includePaths: [path.join(__dirname, 'style')],
+    includePaths: [path.join(__dirname, 'src/styles/base')],
   },
 };
 

package.json

@@ -19,6 +19,8 @@
     "next": "13.5.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-lottie-player": "^1.5.5",
+    "react-simple-typewriter": "^5.0.1",
     "sass": "^1.68.0"
   },
   "devDependencies": {
@@ -32,6 +34,7 @@
     "@types/node": "20.6.3",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
+    "@types/react-typist": "^2.0.3",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "babel-jest": "^29.7.0",

public/fonts.ts → public/fonts/fonts.ts

@@ -5,6 +5,9 @@ import {
   Megrim,
   IBM_Plex_Mono,
   Permanent_Marker,
+  Baloo_Bhaina_2,
+  Chakra_Petch,
+  Solway,
 } from 'next/font/google';
 
 // logo
@@ -33,10 +36,27 @@ export const IBMPlexMono = IBM_Plex_Mono({
   variable: '--font-IBMPlexMono',
 });
 
-// style
+export const solway = Solway({
+  subsets: ['latin'],
+  weight: '400',
+  variable: '--font-solway',
+});
 
+// style
 export const permanentMarker = Permanent_Marker({
   subsets: ['latin'],
   weight: '400',
   variable: '--font-permanentMarker',
 });
+
+export const balooBhaina = Baloo_Bhaina_2({
+  subsets: ['latin'],
+  weight: '400',
+  variable: '--font-balooBhaina',
+});
+
+export const chakraPatch = Chakra_Petch({
+  subsets: ['latin'],
+  weight: '400',
+  variable: '--font-chakraPatch',
+});

src/app/[lng]/contacts/page.module.scss

@@ -0,0 +1,50 @@
+@import 'mixins';
+
+.container {
+  position: absolute;
+  top: 0;
+  @include center-center(column);
+  width: 100%;
+  height: calc(100vh - 80px);
+  margin-top: 80px;
+
+  .wrapper {
+    @include center-center(column);
+    width: 800px;
+
+    .title-wrapper {
+      @include center-center(column);
+      width: 90%;
+
+      .title-box {
+        @include flex(flex-start, center);
+        width: 95%;
+        height: 80px;
+        margin-bottom: 10px;
+      }
+
+      .title {
+        margin-right: 1rem;
+        font-family: var(--font-balooBhaina);
+        @include titleAgain(en);
+      }
+
+      .ko {
+        @include titleAgain(ko);
+      }
+      .sub-title {
+        margin-left: 2rem;
+      }
+    }
+  }
+}
+
+.contents-box {
+  display: flex;
+  width: 800px;
+  height: 100%;
+
+  .info-box {
+    padding-top: 5px;
+  }
+}

src/app/[lng]/contacts/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useTranslation } from '@/app/i18n/client';
+import TypingAni from '@/components/common/effect/TypingAni';
+import ContactArticle from '@/components/contacts/ContactArticle';
+import LngSwitchButtonCSR from '@/components/language-button/LngSwitchButtonCSR';
+import { contactInfos } from '@/constants/contactInfos';
+import { LngParamsProps } from '@/types/lngSwitch';
+import { getPathFromURL } from '@/utils/common/getPathFromURL';
+import styles from './page.module.scss';
+
+export default function Contacts({ params: { lng } }: LngParamsProps) {
+  const { t } = useTranslation(lng, 'contacts');
+  const url = getPathFromURL(usePathname());
+
+  return (
+    <div className={styles.container}>
+      <LngSwitchButtonCSR lng={lng} url={url} />
+      <div className={styles.wrapper}>
+        <div className={styles['title-wrapper']}>
+          <div className={styles['title-box']}>
+            <h2 className={`${styles.title} ${lng === 'ko' && styles.ko}`}>
+              {t('title')}
+            </h2>
+            <div className={styles['sub-title']}>
+              <TypingAni lng={lng} />
+            </div>
+          </div>
+        </div>
+        <div className={styles['contents-box']}>
+          <div className={styles['info-box']}>
+            {contactInfos.map((info) => (
+              <ContactArticle
+                key={info.title}
+                title={info.title}
+                subTitle={info.subTitle}
+                url={info.url}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/[lng]/layout.tsx

@@ -9,7 +9,7 @@ import {
   mansalva,
   megrim,
   permanentMarker,
-} from '../../../public/fonts';
+} from '../../../public/fonts/fonts';
 import { languages } from '../i18n/settings';
 
 export async function generateStaticParams() {

src/app/i18n/locales/en/contacts.json

@@ -0,0 +1,8 @@
+{
+  "title": "Contacts",
+  "subTitle1":"prioritizing user experience,",
+  "subTitle2":"embracing diverse learning opportunities,",
+  "subTitle3":"ready to collaborate and grow together.",
+  "subTitle4":"A frontend developer, Seona Lee, who is..."
+}
+

src/app/i18n/locales/en/header.json

@@ -1,4 +1,4 @@
 {
-  "roadmap": "roadmap",
-  "dots": "dots"
+  "dots": "dots",
+  "contacts": "contacts"
 }

src/app/i18n/locales/ko/contacts.json

@@ -0,0 +1,8 @@
+{
+  "title": "연결",
+  "subTitle1":"어제보다는 오늘이 더 나은,",
+  "subTitle2":"오늘보다는 내일이 더 나은,",
+  "subTitle3":"더 나은 사용자 경험을 위해 문제를 스스로 정의하고 해결하고자 하는",
+  "subTitle4":"프론트엔드 개발자 이선아입니다."
+}
+

src/app/i18n/locales/ko/header.json

@@ -1,4 +1,4 @@
 {
-  "roadmap": "이정표",
-  "dots": "연결"
+  "dots": "연결",
+  "contacts": "연락"
 }

src/components/common/buttons/Button1.module.scss

@@ -1,20 +1,17 @@
+@import 'mixins';
+
 .button-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 130px;
-  height: 100%;
+  @include center-center();
 }
 
 .button {
-  width: 60px;
-  height: 40px;
+  padding: 5px 10px;
   transition: all 0.5s ease-in-out;
   border: 2px solid var(--color-primary);
   border-radius: 17px;
   color: var(--color-primary);
-  font-size: 1.3rem;
-  font-weight: 800;
+  font-size: 1.1rem;
+  font-weight: 600;
   background: {
     image: linear-gradient(45deg, var(--color-primary)50%, transparent 50%);
     position: 100%;

src/components/common/buttons/Button2.module.scss

@@ -1,27 +1,28 @@
+@import 'mixins';
+
 .button-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include center-center();
   width: 130px;
   height: 100%;
 }
 
 .button {
-  display: flex;
-  justify-content: center;
+  @include center-center();
   width: 50px;
   height: 30px;
   padding-top: 2px;
   transition: all 0.3s ease-in-out;
   border: 1.5px solid var(--color-light-primary);
   border-radius: 17px;
+  border-radius: var(--rounded-default);
   color: var(--color-gray4);
-  font-size: 1.3rem;
-  font-weight: 500;
+  font-size: 1.4rem;
+  font-weight: 600;
   text-align: center;
 
   &:hover {
     color: var(--color-primary);
     font-weight: 700;
   }
 }
+

src/components/common/effect/TypingAni.module.scss

@@ -0,0 +1,14 @@
+.box {
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+
+  &.ko {
+    font-family: var(--font-ko-wooju);
+  }
+
+  .point {
+    height: 1.6rem;
+    color: var(--color-primary);
+  }
+}
+