From 4eff240e1647c6b44394fffb0be134a0a6ddb2e9 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sat, 18 Nov 2023 17:16:24 +0900 Subject: [PATCH 1/7] =?UTF-8?q?chore(add=20FAQ=20page):=20FAQ=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index 672f92ae..975aada4 100644 --- a/src/App.tsx +++ b/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 = () => { } /> } /> } /> + } /> }> } /> From fe895a64385c6417d22eb5a99aec7eedb6bc2f28 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sat, 18 Nov 2023 17:16:53 +0900 Subject: [PATCH 2/7] =?UTF-8?q?chore(add=20icon):=20arrowRight=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/styles/icon.ts | 1 + src/components/Common/Icon/index.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/@types/styles/icon.ts b/src/@types/styles/icon.ts index 2fb79c48..4a7a4c75 100644 --- a/src/@types/styles/icon.ts +++ b/src/@types/styles/icon.ts @@ -6,6 +6,7 @@ export type IconKind = | 'notification' | 'school' | 'arrowBack' + | 'arrowRight' | 'plus' | 'edit' | 'suggest' diff --git a/src/components/Common/Icon/index.tsx b/src/components/Common/Icon/index.tsx index 7bb52d50..8bfe3c23 100644 --- a/src/components/Common/Icon/index.tsx +++ b/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, From f5af4a4f82157ec019addc129c07714a161c7012 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sat, 18 Nov 2023 17:19:13 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat(add=20component):=20FAQ=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 질문, 응답으로 구성 - 응답에 대한 렌더링 상태를 showAnswer을 통해서 관리 - 링크가 있는 경우에만 링크를 렌더링 --- src/components/FAQBox/index.tsx | 107 ++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 src/components/FAQBox/index.tsx diff --git a/src/components/FAQBox/index.tsx b/src/components/FAQBox/index.tsx new file mode 100644 index 00000000..34c336d3 --- /dev/null +++ b/src/components/FAQBox/index.tsx @@ -0,0 +1,107 @@ +import Icon from '@components/Common/Icon'; +import { FQA_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(false); + const toggleAnswer = () => setShowAnswer((prevState) => !prevState); + + const moveToLink = () => { + if (!answer.link) return; + openLink(answer.link); + }; + + const hasAnswerLink = () => !!answer.link; + const answerTextSeperatedLine = answer.text.split( + FQA_CONSTANTS.LINE_SEPERATOR, + ); + + return ( + <> + + {FQA_CONSTANTS.QUESTION_MARK} + {question} + + + + + {showAnswer && ( + + {answerTextSeperatedLine.map((line, index) => ( +

{line}

+ ))} + {hasAnswerLink() && ( + {FQA_CONSTANTS.LINK} + )} + + )} + + + + ); +}; + +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; +`; From e75beff80169d8796a22114d4c7cd0fdcdb41ff2 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sat, 18 Nov 2023 17:19:57 +0900 Subject: [PATCH 4/7] =?UTF-8?q?config(add=20constants):=20FAQ=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=EC=97=90=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=EB=90=98=EB=8A=94=20=EC=83=81=EC=88=98=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 질문, 응답 데이터 - 문자열 상수 --- src/constants/FAQ/faq-constants.ts | 9 +++++++ src/constants/FAQ/faq-data.ts | 43 ++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 src/constants/FAQ/faq-constants.ts create mode 100644 src/constants/FAQ/faq-data.ts diff --git a/src/constants/FAQ/faq-constants.ts b/src/constants/FAQ/faq-constants.ts new file mode 100644 index 00000000..0f41b370 --- /dev/null +++ b/src/constants/FAQ/faq-constants.ts @@ -0,0 +1,9 @@ +const FQA_CONSTANTS = { + QUESTION_MARK: 'Q.', + LINE_SEPERATOR: '\n', + TITLE: '자주 묻는 질문', + SUB_TITLE: '부림이 서비스 관련 문의사항은 언제든지 건의사항에 남겨주세요!', + LINK: '링크', +} as const; + +export default FQA_CONSTANTS; diff --git a/src/constants/FAQ/faq-data.ts b/src/constants/FAQ/faq-data.ts new file mode 100644 index 00000000..c389b2f2 --- /dev/null +++ b/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; From 552b767bcab35f1de39e9631ae7f5ecb94e69eb9 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sat, 18 Nov 2023 17:20:25 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat(add=20page):=20FAQ=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/FAQ/index.tsx | 57 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/pages/FAQ/index.tsx diff --git a/src/pages/FAQ/index.tsx b/src/pages/FAQ/index.tsx new file mode 100644 index 00000000..d0a66a1c --- /dev/null +++ b/src/pages/FAQ/index.tsx @@ -0,0 +1,57 @@ +import FAQBox from '@components/FAQBox'; +import { FAQ_DATA, FQA_CONSTANTS } from '@constants/FAQ'; +import styled from '@emotion/styled'; +import { THEME } from '@styles/ThemeProvider/theme'; +import React from 'react'; + +const FAQPage = () => { + return ( + + + {FQA_CONSTANTS.TITLE} + {FQA_CONSTANTS.SUB_TITLE} + + + + {FAQ_DATA.map((data, index) => ( + + + + ))} + + + ); +}; + +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}; +`; From 5a6c4509e9960be9d3cbe82701c9ccceb623f133 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sat, 18 Nov 2023 17:21:05 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore(combine=20export):=20FAQ=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EC=83=81=EC=88=98=EB=93=A4=20=ED=95=9C=EB=B2=88?= =?UTF-8?q?=EC=97=90=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/FAQ/index.ts | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 src/constants/FAQ/index.ts diff --git a/src/constants/FAQ/index.ts b/src/constants/FAQ/index.ts new file mode 100644 index 00000000..62543628 --- /dev/null +++ b/src/constants/FAQ/index.ts @@ -0,0 +1,2 @@ +export { default as FQA_CONSTANTS } from './faq-constants'; +export { default as FAQ_DATA } from './faq-data'; From 493617cb07350b097778dd49358acae6cba73546 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sun, 19 Nov 2023 14:15:37 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore(change=20constants=20name):=20FAQ=5FC?= =?UTF-8?q?ONSTANTS=20=EC=83=81=EC=88=98=20=EA=B0=9D=EC=B2=B4=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FAQBox/index.tsx | 8 ++++---- src/constants/FAQ/faq-constants.ts | 4 ++-- src/constants/FAQ/index.ts | 2 +- src/pages/FAQ/index.tsx | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/FAQBox/index.tsx b/src/components/FAQBox/index.tsx index 34c336d3..c5b55c1e 100644 --- a/src/components/FAQBox/index.tsx +++ b/src/components/FAQBox/index.tsx @@ -1,5 +1,5 @@ import Icon from '@components/Common/Icon'; -import { FQA_CONSTANTS } from '@constants/FAQ'; +import { FAQ_CONSTANTS } from '@constants/FAQ'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { THEME } from '@styles/ThemeProvider/theme'; @@ -25,13 +25,13 @@ const FAQBox = ({ question, answer }: FAQBoxProps) => { const hasAnswerLink = () => !!answer.link; const answerTextSeperatedLine = answer.text.split( - FQA_CONSTANTS.LINE_SEPERATOR, + FAQ_CONSTANTS.LINE_SEPERATOR, ); return ( <> - {FQA_CONSTANTS.QUESTION_MARK} + {FAQ_CONSTANTS.QUESTION_MARK} {question} @@ -43,7 +43,7 @@ const FAQBox = ({ question, answer }: FAQBoxProps) => {

{line}

))} {hasAnswerLink() && ( - {FQA_CONSTANTS.LINK} + {FAQ_CONSTANTS.LINK} )} )} diff --git a/src/constants/FAQ/faq-constants.ts b/src/constants/FAQ/faq-constants.ts index 0f41b370..8048e158 100644 --- a/src/constants/FAQ/faq-constants.ts +++ b/src/constants/FAQ/faq-constants.ts @@ -1,4 +1,4 @@ -const FQA_CONSTANTS = { +const FAQ_CONSTANTS = { QUESTION_MARK: 'Q.', LINE_SEPERATOR: '\n', TITLE: '자주 묻는 질문', @@ -6,4 +6,4 @@ const FQA_CONSTANTS = { LINK: '링크', } as const; -export default FQA_CONSTANTS; +export default FAQ_CONSTANTS; diff --git a/src/constants/FAQ/index.ts b/src/constants/FAQ/index.ts index 62543628..77984bfa 100644 --- a/src/constants/FAQ/index.ts +++ b/src/constants/FAQ/index.ts @@ -1,2 +1,2 @@ -export { default as FQA_CONSTANTS } from './faq-constants'; +export { default as FAQ_CONSTANTS } from './faq-constants'; export { default as FAQ_DATA } from './faq-data'; diff --git a/src/pages/FAQ/index.tsx b/src/pages/FAQ/index.tsx index d0a66a1c..22e2a344 100644 --- a/src/pages/FAQ/index.tsx +++ b/src/pages/FAQ/index.tsx @@ -1,5 +1,5 @@ import FAQBox from '@components/FAQBox'; -import { FAQ_DATA, FQA_CONSTANTS } from '@constants/FAQ'; +import { FAQ_DATA, FAQ_CONSTANTS } from '@constants/FAQ'; import styled from '@emotion/styled'; import { THEME } from '@styles/ThemeProvider/theme'; import React from 'react'; @@ -8,8 +8,8 @@ const FAQPage = () => { return ( - {FQA_CONSTANTS.TITLE} - {FQA_CONSTANTS.SUB_TITLE} + {FAQ_CONSTANTS.TITLE} + {FAQ_CONSTANTS.SUB_TITLE}