diff --git a/src/App.tsx b/src/App.tsx index 9c0c263..ea3884c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,6 +18,7 @@ import Write from './pages/write'; import Mileage from './pages/mileage'; import Gallae from './pages/about/Gallae'; import Maker from './pages/about/Maker'; +import Tips from './pages/about/Tips'; const route = createBrowserRouter([ { @@ -120,17 +121,15 @@ const route = createBrowserRouter([ { path: 'admin', element: , - children: [{ path: 'dashboard', element: }], + children: [ + { path: 'dashboard', element: }, + { path: 'register', element: }, + ], }, { path: 'mileage', element: , }, - { - path: 'admin', - element: , - children: [{ path: 'register', element: }], - }, { path: 'about', element: , @@ -140,6 +139,7 @@ const route = createBrowserRouter([ element: , }, { path: 'maker', element: }, + { path: 'tips', element: }, ], }, ], diff --git a/src/constants/About/index.ts b/src/constants/About/index.ts index b2264d9..76efa39 100644 --- a/src/constants/About/index.ts +++ b/src/constants/About/index.ts @@ -74,3 +74,36 @@ export const GALLAE_INTRODUCTION: GallaeIntroduction = { ], }, }; + +export const TIPS = [ + { + title: '확실한 컨셉', + description: + '지원서를 작성할 때, 컨셉이 확실한 것이 좋아요. 여행계획을 작성할 때, 단순히 어느 관광지를 방문할지에 대해 작성하는 것 보다는 명확한 컨셉을 가지고 여행 계획을 세운다면 일관성이 느껴지고, 참신하게 다가와서 좋답니다. 컨셉으로는 ‘청년들이 즐기는 대전 데이트코스’, ‘자연 속에서 힐링하는 창원 여행’ 등 다양한 컨셉이 있어요. 이 중에서 명확한 컨셉을 하나 잡고, 그 컨셉을 기반으로 지원동기, 여행계획, 홍보계획을 작성해보아요!', + }, + { + title: '두괄식으로 쓰기', + description: + '자소서를 작성할 때와 마찬가지로, 두괄식으로 쓰면 좋습니다. 두괄식은 개요와 세부 내용을 구분하여 작성하는 방식으로, 자소서를 읽는 사람에게 정보를 쉽게 전달하고 이해하기 쉽게 도와줍니다.', + }, + { + title: '선정기준에 맞게 작성하기', + description: + '참가자 모집 공고문에 선정기준이 명시되어 있는 경우, 선정기준을 바탕으로 지원서를 작성하면 효율적으로 작성할 수 있어요. 대부분 지원동기(30%), 여행계획(30%), 홍보계획(40%)를 선정기준으로 내세우고 있는데요, 가장 많은 비중을 차지하는 홍보계획은 특히 신경써서 작성하면 좋은 점수를 얻을 수 있습니다. ', + }, + { + title: '실현 가능한 홍보계획', + description: + '그렇다면 잘 쓴 홍보계획은 무엇일까요? 홍보계획을 너무 거창하게 세우면, 나중에 지키기 힘들어요. 홍보계획은 거창할 필요 없이, 하루에 SNS(인스타, 블로그 등)에 콘텐츠 2개 업로드만으로도 충분하답니다.', + }, + { + title: '여행 관련 포트폴리오', + description: + '그동안 여행을 기록해둔 블로그 혹은 인스타그램 계정이 있으면 좋아요. 그동안 여행 관련 콘텐츠를 발행해왔다는 점을 어필할 수 있고, 여행하면서 홍보했을 때 일반계정보다 더 큰 홍보효과를 볼 수 있으니까요. 그렇다고 해서 엄청난 인플루언서일 필요는 없어요! 소소하게 운영하는 여행 블로그 혹은 인스타그램 계정만으로도 충분하답니다.', + }, + { + title: '여행 지원사업 정보에 노출되기', + description: + '아무리 좋은 포트폴리오와, 좋은 지원서 작성 능력을 갖추고 있다 해도, 여행 지원사업이 있는지 모르면 지원조차 할 수 없겠죠? 그래서 매일 업데이트되는 여행 지원사업 관련 소식을 알고있으면 좋아요. ‘갈래’에 주기적으로 접속해서 여행 지원사업을 확인하고, 꿀팁을 기반으로 참신한 지원서를 작성해보는 건 어떨까요?', + }, +]; diff --git a/src/pages/about/Tips.tsx b/src/pages/about/Tips.tsx new file mode 100644 index 0000000..463a666 --- /dev/null +++ b/src/pages/about/Tips.tsx @@ -0,0 +1,72 @@ +import { TIPS } from '@/constants/About'; +import { CommonInner } from '@/style/common'; +import { H2 } from '@/style/fonts/StyledFonts'; +import styled from 'styled-components'; + +const Tips = () => { + return ( + + +

+ 👉 선정될 수 있는 지원서 작성 꿀팁을 알려드릴게요! +

+ + {TIPS.map(tip => ( + + {tip.title} +
{tip.description}
+
+ ))} +
+
+
+ ); +}; + +export default Tips; + +const Container = styled.div` + margin-top: 219px; + margin-bottom: 224px; + body:not(&) { + background-color: var(--color_background); + } +`; + +const TipContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 36px 32px; + margin-top: 40px; +`; + +const TipCard = styled.div` + border-radius: 20px; + border: 0.5px solid var(--grey-200, #e3e7ed); + background: var(--main_1, #fff); + padding: 40px 56px; + width: 682px; + height: 332px; + + .description { + color: var(--grey-700, #53575c); + font-family: SUIT-Medium; + font-size: 18px; + font-style: normal; + line-height: 160%; /* 28.8px */ + } +`; + +const TitleTag = styled.div` + border-radius: 10px; + background-color: #e9f4ff; + padding: 8px 16px; + width: max-content; + + color: var(--color_main1); + font-family: SUIT-Bold; + font-size: 20px; + font-style: normal; + line-height: 150%; /* 30px */ +`;