Merge branch 'dev' into style/#286

src/@types/styles/icon.ts

@@ -6,6 +6,7 @@ export type IconKind =
   | 'notification'
   | 'school'
   | 'arrowBack'
+  | 'arrowRight'
   | 'plus'
   | 'edit'
   | 'suggest'

src/App.tsx

@@ -2,6 +2,7 @@ import BodyLayout from '@components/BodyLayout';
 import FooterTab from '@components/FooterTab';
 import Header from '@components/Header';
 import Announcement from '@pages/Announcement';
+import FAQPage from '@pages/FAQ';
 import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
 import Map from '@pages/Map';
@@ -25,6 +26,7 @@ const App = () => {
           <Route path="/major-decision/*" element={<MajorDecision />} />
           <Route path="/my" element={<My />} />
           <Route path="/tip/:type" element={<Tip />} />
+          <Route path="/FAQ" element={<FAQPage />} />
         </Route>
         <Route element={<OverlayProvider />}>
           <Route path="/map" element={<Map />} />

src/components/Common/Icon/index.tsx

@@ -25,6 +25,7 @@ import {
   MdOutlineLightbulb,
   MdOutlineMyLocation,
   MdOutlineError,
+  MdOutlineKeyboardArrowRight,
 } from 'react-icons/md';
 
 const ICON: { [key in IconKind]: IconType } = {
@@ -35,6 +36,7 @@ const ICON: { [key in IconKind]: IconType } = {
   notification: MdNotifications,
   school: MdSchool,
   arrowBack: MdArrowBackIos,
+  arrowRight: MdOutlineKeyboardArrowRight,
   plus: MdAddCircleOutline,
   edit: MdOutlineModeEdit,
   suggest: MdOutlineQuestionAnswer,

src/components/FAQBox/index.tsx

@@ -0,0 +1,107 @@
+import Icon from '@components/Common/Icon';
+import { FAQ_CONSTANTS } from '@constants/FAQ';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import openLink from '@utils/router/openLink';
+import React, { useState } from 'react';
+
+interface FAQBoxProps {
+  readonly question: string;
+  readonly answer: {
+    readonly text: string;
+    readonly link?: string;
+  };
+}
+
+const FAQBox = ({ question, answer }: FAQBoxProps) => {
+  const [showAnswer, setShowAnswer] = useState<boolean>(false);
+  const toggleAnswer = () => setShowAnswer((prevState) => !prevState);
+
+  const moveToLink = () => {
+    if (!answer.link) return;
+    openLink(answer.link);
+  };
+
+  const hasAnswerLink = () => !!answer.link;
+  const answerTextSeperatedLine = answer.text.split(
+    FAQ_CONSTANTS.LINE_SEPERATOR,
+  );
+
+  return (
+    <>
+      <QuestionContainer onClick={toggleAnswer} showAnswer={showAnswer}>
+        <QuestionMark>{FAQ_CONSTANTS.QUESTION_MARK}</QuestionMark>
+        <QuestionText>{question}</QuestionText>
+        <IconContainer>
+          <Icon kind="arrowRight" size="24" />
+        </IconContainer>
+      </QuestionContainer>
+      {showAnswer && (
+        <AnswerContainer>
+          {answerTextSeperatedLine.map((line, index) => (
+            <p key={index}>{line}</p>
+          ))}
+          {hasAnswerLink() && (
+            <StyledLink onClick={moveToLink}>{FAQ_CONSTANTS.LINK}</StyledLink>
+          )}
+        </AnswerContainer>
+      )}
+
+      <BoundaryLine />
+    </>
+  );
+};
+
+export default FAQBox;
+
+const QuestionContainer = styled.div<{ showAnswer: boolean }>`
+  position: relative;
+  padding: 10px 0px 10px 0px;
+  display: flex;
+  align-items: center;
+
+  ${({ showAnswer }) => css`
+    & > span {
+      color: ${showAnswer && THEME.PRIMARY};
+    }
+    & > div > svg {
+      transform: ${showAnswer ? 'rotate(90deg)' : 'rotate(0deg)'};
+      transition: all ease 0.3s;
+    }
+  `}
+`;
+
+const QuestionMark = styled.span`
+  font-weight: bold;
+`;
+
+const QuestionText = styled.span`
+  text-indent: 1rem;
+`;
+
+const IconContainer = styled.div`
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const AnswerContainer = styled.div`
+  background-color: #7a9dd31a;
+  color: ${THEME.TEXT.BLACK};
+  line-height: 1.8;
+  padding: 10px 20px 10px 20px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+`;
+
+const StyledLink = styled.span`
+  color: ${THEME.PRIMARY};
+  border-bottom: 1px solid ${THEME.PRIMARY};
+`;
+
+const BoundaryLine = styled.div`
+  border-bottom: 1px solid #ededed;
+`;

src/constants/FAQ/faq-constants.ts

@@ -0,0 +1,9 @@
+const FAQ_CONSTANTS = {
+  QUESTION_MARK: 'Q.',
+  LINE_SEPERATOR: '\n',
+  TITLE: '자주 묻는 질문',
+  SUB_TITLE: '부림이 서비스 관련 문의사항은 언제든지 건의사항에 남겨주세요!',
+  LINK: '링크',
+} as const;
+
+export default FAQ_CONSTANTS;

src/constants/FAQ/faq-data.ts

@@ -0,0 +1,43 @@
+interface FAQ {
+  readonly question: string;
+  readonly answer: {
+    readonly text: string;
+    readonly link?: string;
+  };
+}
+
+const FAQ_DATA: FAQ[] = [
+  {
+    question: '"부경 등대"의 의미는 무엇인가요?',
+    answer: {
+      text: '부경 등대는 "부경대 학생들이 학교를 더 알차게 다닐 수 있도록 등대처럼 길을 밝혀준다"는 의미입니다 :)\n기존의 부림이(부경대 알림이)에서 변경된 새로운 이름 입니다.',
+    },
+  },
+  {
+    question: '공지사항 알림이 오지 않아요!',
+    answer: {
+      text: 'IOS를 사용하고 앱 스토어에서 "부림이"를 다운 받은 경우 스토어 정책 상 알림 기능이 동작하지 않습니다.\n만약 이미 앱 스토어에서 다운 받았다면 "이미 앱스토어에서 어플을 설치 했어요"의 내용을 확인해주세요 :)\n앱 스토어에서 받지 않았는데 알림이 오지 않는다면 IOS 버젼이 16.4 이상인지 확인해주세요.',
+    },
+  },
+  {
+    question: '카카오 맵을 설치해야 할까요?',
+    answer: {
+      text: '지도 페이지의 기능들은 모두 카카오 맵이 제공해주는 기능들을 활용해서 만들어졌습니다.\n 카카오 맵이 설치되어 있지 않은 경우는 길찾기 기능이 제한될 수 있으니 설치 후 건물 길찾기 기능을 이용해보세요 :)',
+    },
+  },
+  {
+    question: '키워드 알림은 언제 되나요?',
+    answer: {
+      text: '키워드 알림 기능은 현재 개발 진행 중에 있습니다.\n조금만 더 기다려주시면 키워드 알림 기능도 제공해드릴게요 :)',
+    },
+  },
+  {
+    question: '이미 앱스토어로 다운 받았어요.(IOS)',
+    answer: {
+      text: '이미 앱스토어로 다운 받으셨다면 기존의 앱을 지운 후 아래의 링크로 이동해 방법을 따라해주세요 :)',
+      link: 'https://burimi.notion.site/IOS-71bbd68542f24b8db00718367d327597',
+    },
+  },
+];
+
+export default FAQ_DATA;

src/constants/FAQ/index.ts

@@ -0,0 +1,2 @@
+export { default as FAQ_CONSTANTS } from './faq-constants';
+export { default as FAQ_DATA } from './faq-data';

src/pages/FAQ/index.tsx

@@ -0,0 +1,57 @@
+import FAQBox from '@components/FAQBox';
+import { FAQ_DATA, FAQ_CONSTANTS } from '@constants/FAQ';
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+const FAQPage = () => {
+  return (
+    <Container>
+      <TextContainer>
+        <FAQTitle>{FAQ_CONSTANTS.TITLE}</FAQTitle>
+        <FAQSubTitle>{FAQ_CONSTANTS.SUB_TITLE}</FAQSubTitle>
+        <BoundaryLine />
+      </TextContainer>
+      <FAQContainer>
+        {FAQ_DATA.map((data, index) => (
+          <React.Fragment key={index}>
+            <FAQBox {...data} />
+          </React.Fragment>
+        ))}
+      </FAQContainer>
+    </Container>
+  );
+};
+
+export default FAQPage;
+
+const Container = styled.div`
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const TextContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+
+const FAQTitle = styled.span`
+  margin-top: 1rem;
+  font-size: 1.5rem;
+  font-weight: bold;
+`;
+
+const FAQSubTitle = styled.span`
+  color: ${THEME.TEXT.GRAY};
+  line-height: 1.3;
+`;
+
+const FAQContainer = styled.div`
+  line-height: 4;
+`;
+
+const BoundaryLine = styled.div`
+  border-bottom: 1px solid ${THEME.TEXT.BLACK};
+`;