Merge branch 'develop' into feat/#42/api-jaeguk

src/App.tsx

@@ -19,6 +19,7 @@ import Mileage from './pages/mileage';
 import Gallae from './pages/about/Gallae';
 import Maker from './pages/about/Maker';
 import AdminLayout from './components/Admin/AdminLayout';
+import Tips from './pages/about/Tips';
 
 const route = createBrowserRouter([
   {
@@ -135,6 +136,7 @@ const route = createBrowserRouter([
             element: <Gallae />,
           },
           { path: 'maker', element: <Maker /> },
+          { path: 'tips', element: <Tips /> },
         ],
       },
     ],

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:
+      '아무리 좋은 포트폴리오와, 좋은 지원서 작성 능력을 갖추고 있다 해도, 여행 지원사업이 있는지 모르면 지원조차 할 수 없겠죠? 그래서 매일 업데이트되는 여행 지원사업 관련 소식을 알고있으면 좋아요. ‘갈래’에 주기적으로 접속해서 여행 지원사업을 확인하고, 꿀팁을 기반으로 참신한 지원서를 작성해보는 건 어떨까요?',
+  },
+];

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 (
+    <Container>
+      <CommonInner>
+        <H2 $fontColor="#15191d">
+          👉 선정될 수 있는 지원서 작성 꿀팁을 알려드릴게요!
+        </H2>
+        <TipContainer>
+          {TIPS.map(tip => (
+            <TipCard key={tip.title}>
+              <TitleTag>{tip.title}</TitleTag>
+              <div className="description">{tip.description}</div>
+            </TipCard>
+          ))}
+        </TipContainer>
+      </CommonInner>
+    </Container>
+  );
+};
+
+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 */
+`;