Feature/about us (#52)

* feat: tailwind pretendard 폰트 설정

* refactor: lint, prettier 설정

* feat: svg.webpack 추가

* feat: arrow 변경

next.config.mjs

@@ -22,6 +22,14 @@ const nextConfig = {
       },
     ],
   },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
 };
 
 export default nextConfig;

package.json

@@ -11,6 +11,7 @@
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix"
   },
   "dependencies": {
+    "@svgr/webpack": "^8.1.0",
     "cheerio": "^1.0.0",
     "framer-motion": "^11.5.4",
     "jodit-react": "^4.1.2",

src/app/about-us/_components/ActivicyCard/index.tsx

@@ -1,7 +1,13 @@
 // components/CardLayout.js
 import Image from 'next/image';
 
-const ActivityCard = ({ imageSrc, title, description, isImageRight }) => {
+const ActivityCard = ({
+  imageSrc,
+  title,
+  description,
+  isImageRight,
+  description2,
+}) => {
   return (
     <div
       className={`flex ${isImageRight ? 'flex-row-reverse' : 'flex-row'} items-center my-8`}
@@ -12,12 +18,13 @@ const ActivityCard = ({ imageSrc, title, description, isImageRight }) => {
           alt={title}
           width={500}
           height={300}
-          className="object-cover rounded-lg"
+          className="object-cover"
         />
       </div>
       <div className="w-1/2 px-6">
-        <h3 className="text-xl font-bold text-blue-500 mb-4">{title}</h3>
-        <p className="text-gray-600">{description}</p>
+        <h3 className="text-lg font-medium text-blue-500 mb-4">{title}</h3>
+        <p className="font-medium text-xl mb-4">{description}</p>
+        <p className="font-medium text-[#6B7684]">{description2}</p>
       </div>
     </div>
   );

src/app/about-us/we/page.tsx

@@ -9,6 +9,7 @@ import ActivityCard from '@/app/about-us/_components/ActivicyCard';
 import AboutUsImage1 from '@/public/about-us/we/image 25.png';
 import AboutUsImage2 from '@/public/about-us/we/image 24.png';
 import AboutUsImage3 from '@/public/about-us/we/aboutus_1.jpeg';
+import AboutUsImage4 from '@/public/about-us/we/aboutus_0.jpeg';
 
 const AboutUsWePage = () => {
   return (
@@ -33,7 +34,7 @@ const AboutUsWePage = () => {
       <div className="bg-wink-100 min-h-96 flex gap-8 justify-center">
         <div>
           <h1 className="font-medium text-xl md:text-2xl">
-            자꾸만 눈이가는
+            자꾸만 눈이 가는
             <br />
             멋진 모습
           </h1>
@@ -56,46 +57,50 @@ const AboutUsWePage = () => {
       </div>
       <div className="bg-gradient-to-b from-wink-100 to-white h-32 md:h-64"></div>
       <div className="flex justify-center">
-        <div className="min-w-96 flex flex-col">
+        <div className="max-w-2xl flex flex-col">
           <h1 className="font-medium text-2xl md:text-4xl">
             안녕하세요. 우리는 WINK 입니다.
           </h1>
           <div className="flex justify-center pt-4">
-            <Image src={AboutUsImage3} alt="thumbnail" width={600} />
+            <Image src={AboutUsImage3} alt="thumbnail" width={672} />
           </div>
 
           <h1 className="font-medium text-2xl md:text-4xl pt-14">
             우리는 어떤 길을 <br /> 걸어왔을까요?{' '}
           </h1>
           <div>
             <ActivityCard
-              imageSrc="/path-to-your-image.jpg"
+              imageSrc={AboutUsImage4}
               title="윙커톤"
-              description="이 카드는 왼쪽에 이미지가 있고 오른쪽에 텍스트가 있습니다."
+              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
               isImageRight={false}
             />
           </div>
           <div>
             <ActivityCard
-              imageSrc="/path-to-your-image.jpg"
+              imageSrc={AboutUsImage4}
               title="윙커톤"
-              description="이 카드는 왼쪽에 이미지가 있고 오른쪽에 텍스트가 있습니다."
+              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
               isImageRight
             />
           </div>
           <div>
             <ActivityCard
-              imageSrc="/path-to-your-image.jpg"
+              imageSrc={AboutUsImage4}
               title="윙커톤"
-              description="이 카드는 왼쪽에 이미지가 있고 오른쪽에 텍스트가 있습니다."
+              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
               isImageRight={false}
             />
           </div>
           <div>
             <ActivityCard
-              imageSrc="/path-to-your-image.jpg"
+              imageSrc={AboutUsImage4}
               title="윙커톤"
-              description="이 카드는 왼쪽에 이미지가 있고 오른쪽에 텍스트가 있습니다."
+              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
               isImageRight
             />
           </div>

src/app/activity/history/page.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { FaAngleDown, FaAngleUp, FaCircle } from 'react-icons/fa';
+import { FaCircle } from 'react-icons/fa';
+
+import ArrowDown from '@/public/assets/arrow-down.svg';
+import ArrowUp from '@/public/assets/arrow-up.svg';
 
 import Image, { StaticImageData } from 'next/image';
 
@@ -86,9 +89,9 @@ const ActivityHistoryPage = () => {
                       </span>
                     </span>
                     {openItems.includes(`${yearData.year}-${index}`) ? (
-                      <FaAngleUp />
+                      <ArrowUp />
                     ) : (
-                      <FaAngleDown />
+                      <ArrowDown />
                     )}
                   </button>
 

src/component/Dropdown.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FaAngleDown } from 'react-icons/fa';
+// import { FaAngleDown } from 'react-icons/fa';
+import DropDown from '@/public/assets/arrow-down.svg';
 
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -23,7 +24,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
         className="flex items-center justify-between w-full text-sm bg-white"
       >
         {value}
-        <FaAngleDown className={`w-4 h-4 ml-2`} />
+        <DropDown className={`w-4 h-4 ml-2`} />
       </button>
       <AnimatePresence>
         {isOpen && (

src/component/Header.tsx

@@ -2,8 +2,8 @@
 
 import React, { useState } from 'react';
 import { CiLogout } from 'react-icons/ci';
-import { FaAngleDown } from 'react-icons/fa';
 
+import Dropdown from '@/public/assets/arrow-down.svg';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
@@ -81,7 +81,7 @@ export const Header: React.FC = () => {
   return (
     <header className="fixed top-0 z-50 bg-white w-full h-14 flex items-center justify-center border-b">
       <div className="w-page flex justify-between p-4 lg:p-6">
-        <Link href={'/'} replace>
+        <Link href={'/about-us/we'} replace>
           <Image
             className="object-contain h-6 mt-1"
             src={logo}
@@ -109,7 +109,7 @@ export const Header: React.FC = () => {
                     }}
                   >
                     {item.title}
-                    {item.dropdown && <FaAngleDown size={16} />}
+                    {item.dropdown && <Dropdown />}
                   </div>
                   <AnimatePresence>
                     {activeDropdown === item.title && item.dropdown && (
@@ -153,7 +153,7 @@ export const Header: React.FC = () => {
                     className="rounded-full"
                   />
                   <span className="font-bold text-sm">{member.name}</span>
-                  <FaAngleDown size={14} />
+                  <Dropdown />
                 </div>
                 <AnimatePresence>
                   {activeDropdown === 'profile' && (