Merge pull request #22 from Pro-Pofol/feature/#20-tip

ADD :: TIP Page Publishing

src/app/page.tsx

@@ -45,28 +45,33 @@ const ApplyData: ApplicationBoxProps[] = [
 
 interface TipBoxProps {
   title: string;
+  content: string;
   name: string;
   date: string;
 }
 
 const TipData: TipBoxProps[] = [
   {
     title: '포트폴리오 만들 때 주의할 점',
+    content: '포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!',
     name: '이강혁',
     date: '2024-04-16'
   },
   {
     title: '자기소개서는 이렇게',
+    content: '포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!',
     name: '강진현',
     date: '2024-04-10'
   },
   {
     title: '이럭서에 뭘 넣어야 할지 모르겠다면?',
+    content: '포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!',
     name: '임태곤',
     date: '2024-04-06'
   },
   {
     title: '합격하는 포트폴리오',
+    content: '포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!포트폴리오!! 비상!!!!',
     name: '최승우',
     date: '2023-04-18',
   },

src/app/tip/Banner.tsx

@@ -0,0 +1,14 @@
+import { GradientImg } from "@/assets"
+import Image from "next/image"
+
+export const TipBanner = () => {
+    return (
+        <section className="w-full h-[240px] relative border-b-2 border-gray100 overflow-hidden flex justify-center items-center">
+            <Image src={GradientImg} alt="Banner 이미지" className="w-full h-[240px] absolute object-cover object-center -z-[1]" priority />
+            <div className="flex flex-col gap-3 items-center">
+                <span className="text-headlineLarge text-white">지원서 작성 팁</span>
+                <span className="text-bodyLarge text-gray200">PROPOFOL 사용자들이 직접 작성한 유용한 지원서 작성 팁이에요.</span>
+            </div>
+        </section>
+    )
+}

src/app/tip/ShowSection.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { TipBox } from "@/components";
+import { useState } from "react";
+
+interface TipBoxProps {
+    title: string
+    content: string
+    name: string
+    date: string
+}
+
+const TipData: TipBoxProps[] = [
+    {
+        title: "오늘 저녁 머 먹지...?",
+        content: "맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!!",
+        name: "홍길동이",
+        date: "2024-05-22"
+    },
+    {
+        title: "1오늘 저녁 머 먹지...?",
+        content: "맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!!",
+        name: "홍길동이",
+        date: "2024-05-22"
+    },
+    {
+        title: "2오늘 저녁 머 먹지...?",
+        content: "맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!!",
+        name: "홍길동이",
+        date: "2024-05-22"
+    },
+    {
+        title: "2오늘 저녁 머 먹지...?",
+        content: "맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!! 맛있는 피자! 맛있는 치킨! 맛있는 도넛! 냠냠!!",
+        name: "홍길동이",
+        date: "2024-05-22"
+    },
+]
+
+export const ShowSection = () =>{
+
+    const [orderType, setOrderType] = useState<'first' | 'last'>('first')
+
+    return(
+        <section className="flex flex-col items-center w-full relative mb-[120px]">
+            <div className="py-6 px-10 flex justify-between items-center sticky bg-white top-0 left-0 w-[70%] min-w-[800px] h-fit">
+                <span className="text-bodyLarge text-black">182개의 지원서 자료</span>
+                <div className="p-1 gap-0.5 flex rounded-full border h-12 border-gray200 bg-gray50 text-bodySmall relative text-gray600">
+                    <div className={`absolute top-[2px] ${orderType === 'first' ? 'left-[3px]' : 'left-[80px]'} border border-gray100 bg-white py-2 px-4 text-transparent rounded-full transition-all`}>{orderType === 'first' ? '최신순' : '오래된순'}</div>
+                    <span className={`transition-all py-2 px-4 z-10 cursor-pointer ${orderType === 'first' ? 'text-blue500' : 'text-gray600'}`} onClick={() => setOrderType('first')}>최신순</span>
+                    <span className={`transition-all py-2 px-4 z-10 cursor-pointer ${orderType === 'last' ? 'text-blue500' : 'text-gray600'}`} onClick={() => setOrderType('last')}>오래된순</span>
+                </div>
+            </div>
+            <div className="grid grid-cols-3 w-[70%] min-w-[800px] h-fit gap-x-3 gap-y-6 px-10">
+                {
+                    TipData.map((item, index)=>
+                        <TipBox 
+                            key={index} 
+                            {...item}
+                        />
+                    )
+                }
+            </div>
+        </section>
+    );
+}

src/app/tip/page.tsx

@@ -0,0 +1,11 @@
+import { TipBanner } from "./Banner";
+import { ShowSection } from "./ShowSection";
+
+export default function Tip(){
+    return(
+        <main>
+            <TipBanner/>
+            <ShowSection></ShowSection>
+        </main>
+    );
+}

src/components/ApplicationBox.tsx

@@ -23,7 +23,7 @@ const tagColor = {
  * 사용 예시
  * ```
     <ApplicationBox tag="포트폴리오" title="제목" name="유저이름" mainMajor="Frontend" />
- ```
+```
  */
 export const ApplicationBox = ({ tag, title, name, date, mainMajor, subMajor }: ApplicationBoxProps) => {
     return (

src/components/TipBox.tsx

@@ -1,23 +1,25 @@
 import { dateToString } from "@/utils";
 
 interface TipBoxProps {
-    title: string;
-    name: string;
-    date: string;
+    title: string
+    content: string
+    name: string
+    date: string
 }
 
 /**
  * TIP을 간략하게 표시해주는 컴포넌트입니다.
  * 
  * 사용 예시
  * ```
-    <TipBox title="제목" name="유저 이름" date="날짜" />
- ```
+    <TipBox title="제목" content="미리보기 내용" name="유저 이름" date="날짜" />
+```
  */
-export const TipBox = ({ title, name, date }: TipBoxProps) => {
+export const TipBox = ({ title, content, name, date }: TipBoxProps) => {
     return (
-        <div className="p-8 flex sm:flex-col w-full gap-2.5 justify-between items-center sm:items-start border border-gray100 bg-white rounded-3xl cursor-pointer">
+        <div className="p-8 flex flex-col w-full min-w-[240px] gap-2.5 justify-between items-start border border-gray100 bg-white rounded-3xl cursor-pointer">
             <span className="text-titleSmall text-black truncate w-full">{title}</span>
+            <span className="text-bodySmall text-gray500 line-clamp-2 w-full">{content}</span>
             <div className="text-bodySmall text-gray600 flex justify-end items-center gap-2 w-fit sm:w-full text-nowrap">
                 <span>{name}</span>
                 <div className="w-0.5 h-0.5 bg-gray600 rounded-full" />