From f1f8c07e0c9431b05777c59a79043331050cb045 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Fri, 2 Feb 2024 10:33:01 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Reafactor(FAQBox):=20=EC=9E=AC=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20ToggleInfo?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FAQBox/index.tsx | 79 ++++++++++++---------------------
 1 file changed, 28 insertions(+), 51 deletions(-)

diff --git a/src/components/FAQBox/index.tsx b/src/components/FAQBox/index.tsx
index 0678b66c..f46dad3f 100644
--- a/src/components/FAQBox/index.tsx
+++ b/src/components/FAQBox/index.tsx
@@ -1,10 +1,10 @@
-import Icon from '@components/Common/Icon';
+import ToggleInfo from '@components/Common/ToggleInfo';
 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';
+import React from 'react';
 
 interface FAQBoxProps {
   readonly question: string;
@@ -15,35 +15,38 @@ interface FAQBoxProps {
 }
 
 const FAQBox = ({ question, answer }: FAQBoxProps) => {
-  const [showAnswer, setShowAnswer] = useState<boolean>(false);
-  const toggleAnswer = () => setShowAnswer((prevState) => !prevState);
-
-  const seperatedAnswerText = answer.text.split(FAQ_CONSTANTS.LINE_SEPERATOR);
   const moveToLink = () => {
     if (!answer.link) return;
+
     openLink(answer.link);
   };
-  const hasAnswerLink = () => !!answer.link;
+
+  const hasLink = !!answer.link;
 
   return (
     <>
-      <QuestionContainer onClick={toggleAnswer} showAnswer={showAnswer}>
-        <QuestionMark>{FAQ_CONSTANTS.QUESTION_MARK}</QuestionMark>
-        <QuestionText>{question}</QuestionText>
-        <IconContainer>
-          <Icon kind="arrowDown" size="24" />
-        </IconContainer>
-      </QuestionContainer>
-      {showAnswer && (
-        <AnswerContainer>
-          {seperatedAnswerText.map((line, index) => (
-            <p key={index}>{line}</p>
-          ))}
-          {hasAnswerLink() && (
-            <StyledLink onClick={moveToLink}>{FAQ_CONSTANTS.LINK}</StyledLink>
-          )}
-        </AnswerContainer>
-      )}
+      <ToggleInfo
+        infoTitle={() => (
+          <>
+            <span
+              css={css`
+                font-weight: bold;
+              `}
+            >
+              {FAQ_CONSTANTS.QUESTION_MARK}
+            </span>
+            <QuestionText>{question}</QuestionText>
+          </>
+        )}
+        infoDesc={() => (
+          <AnswerContainer>
+            {answer.text}
+            {hasLink && (
+              <StyledLink onClick={moveToLink}>{FAQ_CONSTANTS.LINK}</StyledLink>
+            )}
+          </AnswerContainer>
+        )}
+      />
       <BoundaryLine />
     </>
   );
@@ -51,37 +54,10 @@ const FAQBox = ({ question, answer }: FAQBoxProps) => {
 
 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(-180deg)' : '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;
-`;
-
 const AnswerContainer = styled.div`
   background-color: #7a9dd31a;
   color: ${THEME.TEXT.BLACK};
@@ -89,6 +65,7 @@ const AnswerContainer = styled.div`
   padding: 10px 20px 10px 20px;
   border-radius: 10px;
   margin-bottom: 10px;
+  white-space: pre-line;
 `;
 
 const StyledLink = styled.span`

From 0d5f08f2f5ed41df6e6464f7d89f165a2e34138d Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Fri, 2 Feb 2024 10:33:20 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Chore(faq-data):=20=EC=A4=84=20=EB=B0=94?=
 =?UTF-8?q?=EA=BF=88=20=EB=AC=B8=EC=9E=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/FAQ/faq-data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/FAQ/faq-data.ts b/src/constants/FAQ/faq-data.ts
index c389b2f2..0936adb0 100644
--- a/src/constants/FAQ/faq-data.ts
+++ b/src/constants/FAQ/faq-data.ts
@@ -34,7 +34,7 @@ const FAQ_DATA: FAQ[] = [
   {
     question: '이미 앱스토어로 다운 받았어요.(IOS)',
     answer: {
-      text: '이미 앱스토어로 다운 받으셨다면 기존의 앱을 지운 후 아래의 링크로 이동해 방법을 따라해주세요 :)',
+      text: '이미 앱스토어로 다운 받으셨다면 기존의 앱을 지운 후 아래의 링크로 이동해 방법을 따라해주세요 :)\n',
       link: 'https://burimi.notion.site/IOS-71bbd68542f24b8db00718367d327597',
     },
   },