feat: #330 Add Write Answer Tooltip

apps/web/src/component/write/phase/Write.tsx

@@ -336,6 +336,7 @@ export function Write() {
             display: flex;
             flex-direction: column;
             row-gap: 0.8rem;
+            height: 100%;
           `}
         >
           {data?.questions.map((item) => {

apps/web/src/component/write/template/write/Descriptive.tsx

@@ -1,11 +1,18 @@
 import { css } from "@emotion/react";
-import { ChangeEventHandler } from "react";
+import { ChangeEventHandler, useState } from "react";
+
+import { ToolTip } from "./ToolTip.tsx";
+
+import { Icon } from "@/component/common/Icon";
+import { Typography } from "@/component/common/typography";
+import { DESIGN_TOKEN_COLOR } from "@/style/designTokens.ts";
 
 type DescriptiveTemplateProps = {
   answer: string;
   onChange: ChangeEventHandler<HTMLTextAreaElement>;
 };
 export function WDescriptiveTemplate({ answer, onChange }: DescriptiveTemplateProps) {
+  const [isToolTip, setToolTip] = useState(false);
   const PLACEHOLDER =
     "자유롭게 회고를 작성해주세요 :)\n예시) 가장 어려운 점은 일정관리를 하는 것이다. 나만의 일정을 관리한다면 상관없지만, 셀 내 모든 인원들의 일정을 고려하며 관리를 하는 것이 처음에는 많이 어려운 점 중 하나였다. 기획과 개발을 하면서 많은 변수가 생기는데, 이를 유관부서가 이해할 수 있도록 일정을 잘 전달하는 것은 생각보다 어려운 일임을 하면서 깨닫기도 했다.";
   return (
@@ -14,6 +21,7 @@ export function WDescriptiveTemplate({ answer, onChange }: DescriptiveTemplatePr
         display: flex;
         flex-direction: column;
         row-gap: 2.3rem;
+        height: 100%;
       `}
     >
       {/*  FIXME: SPACE 컴포넌트 넣기 */}
@@ -24,7 +32,7 @@ export function WDescriptiveTemplate({ answer, onChange }: DescriptiveTemplatePr
           line-height: 2;
           font-size: 1.5rem;
           font-weight: 300;
-          height: 41.8rem;
+          height: 100%;
           overflow-y: auto;
           white-space: pre-line;
 
@@ -35,6 +43,49 @@ export function WDescriptiveTemplate({ answer, onChange }: DescriptiveTemplatePr
         value={answer || ""}
         onChange={onChange}
       />
+      <div
+        css={css`
+          display: flex;
+          align-items: center;
+          position: relative;
+
+          #totalAnswer {
+            margin-left: auto;
+          }
+        `}
+      >
+        <ToolTip
+          isVisible={isToolTip}
+          handleClose={() => setToolTip(false)}
+          title={"분석 결과를 높이려면?"}
+          contents={"회고 내용을 자세하고 구체적으로 작성해 주세요. AI가 제공하는 분석 디테일이 높아져 유의미한 분석 결과를 받아 볼 수 있어요."}
+        />
+        <div
+          css={css`
+            display: flex;
+            align-items: center;
+            column-gap: 0.6rem;
+            cursor: pointer;
+          `}
+          onClick={() => setToolTip(true)}
+        >
+          <Icon
+            icon={"ic_info_transparent"}
+            size={1.5}
+            css={css`
+              path {
+                fill: ${DESIGN_TOKEN_COLOR.gray600};
+              }
+            `}
+          />
+          <Typography color={"gray500"} variant={"body12Medium"}>
+            분석 결과를 높이려면?
+          </Typography>
+        </div>
+        <Typography color={"gray500"} variant={"body12Medium"} id={"totalAnswer"}>
+          {answer.length}자 작성
+        </Typography>
+      </div>
     </div>
   );
 }

apps/web/src/component/write/template/write/ToolTip.tsx

@@ -0,0 +1,80 @@
+import { css } from "@emotion/react";
+
+import { Icon } from "@/component/common/Icon";
+import { Typography } from "@/component/common/typography";
+import { ANIMATION } from "@/style/common/animation.ts";
+import { DESIGN_TOKEN_COLOR } from "@/style/designTokens.ts";
+
+type ToolTipProps = {
+  isVisible: boolean;
+  title: string;
+  contents: string;
+  handleClose: () => void;
+};
+
+export function ToolTip({ isVisible, title, contents, handleClose }: ToolTipProps) {
+  return (
+    // 부모 요소에 relative 속성이 적용되어있어야해요
+    // TODO: 추후 공통 컴포넌트화 진행, 현재는 한 화면에서만 사용되고 있음
+    <div
+      id={"analysis-tooltip"}
+      css={css`
+        position: absolute;
+        width: 26.6rem;
+        bottom: 0;
+        margin-bottom: 4rem;
+        background-color: ${DESIGN_TOKEN_COLOR.gray900};
+        animation: ${ANIMATION.FADE_UP} ease 0.4s;
+        padding: 1.2rem 1.4rem;
+        border-radius: 0.8rem;
+
+        display: ${isVisible ? "flex" : "none"};
+        flex-direction: column;
+        row-gap: 1rem;
+
+        ::after {
+          position: absolute;
+          width: 1.2rem;
+          height: 1.2rem;
+          border-radius: 0 0 0.2rem 0.2rem;
+          visibility: visible;
+          background-color: inherit;
+          bottom: -0.4rem;
+          content: "";
+          transform: rotate(45deg);
+          transition:
+            opacity 0.2s ease,
+            visibility 0.2s ease;
+        }
+      `}
+    >
+      <div
+        id={"header"}
+        css={css`
+          display: flex;
+          align-items: center;
+        `}
+      >
+        <Typography variant={"subtitle14SemiBold"} color={"gray00"}>
+          {title}
+        </Typography>
+        <Icon
+          icon={"ic_write_quit"}
+          size={1}
+          css={css`
+            path {
+              stroke: ${DESIGN_TOKEN_COLOR.gray100};
+            }
+            margin-left: auto;
+          `}
+          onClick={handleClose}
+        />
+      </div>
+      <div id={"content"}>
+        <Typography color={"gray300"} variant={"body12Medium"}>
+          {contents}
+        </Typography>
+      </div>
+    </div>
+  );
+}

apps/web/src/component/write/template/write/index.ts

@@ -1,3 +1,4 @@
 export { WAchievementTemplate } from "./Achievement.tsx";
 export { WSatisfactionTemplate } from "./Satisfaction.tsx";
 export { WDescriptiveTemplate } from "./Descriptive.tsx";
+export { ToolTip } from "./ToolTip.tsx";