depromeet · klmhyeonwoo · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025
diff --git a/apps/mobile/assets/svgs/common/ic_list_white.svg b/apps/mobile/assets/svgs/common/ic_list_white.svg
diff --git a/apps/mobile/assets/svgs/common/ic_stars_white.svg b/apps/mobile/assets/svgs/common/ic_stars_white.svg
diff --git a/apps/mobile/assets/svgs/common/index.ts b/apps/mobile/assets/svgs/common/index.ts
@@ -27,6 +27,7 @@ export { default as ic_plus_thin } from "./ic_plus_thin.svg?react";
 export { default as ic_kakao } from "./ic_kakao.svg?react";
 export { default as ic_copy } from "./ic_copy.svg?react";
 export { default as ic_list } from "./ic_list.svg?react";
+export { default as ic_stars_white } from "./ic_stars_white.svg?react";
 export { default as ic_stars } from "./ic_stars.svg?react";
 export { default as ic_file } from "./ic_file.svg?react";
 export { default as ic_3point } from "./ic_3point.svg?react";
@@ -43,3 +44,4 @@ export { default as ic_info_transparent } from "./ic_info_transparent.svg?react"
 export { default as ic_apple_logo } from "./ic_apple_logo.svg?react";
 export { default as ic_twoMan_blue } from "./ic_twoMan_blue.svg?react";
 export { default as ic_minus } from "./ic_minus.svg?react";
+export { default as ic_write } from "./ic_write.svg?react";
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -1,41 +1,62 @@
 <!doctype html>
 <html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- FIXME: 추후 디자인 팀 OG 로고 요청 후 수정 -->
+    <link rel="icon" type="image/svg+xml" href="/white_layer.svg" />
+    <link rel="icon" type="image/svg+xml" href="/dark_layer.svg" media="(prefers-color-scheme: dark)" />
+    <link rel="icon" type="image/svg+xml" href="/white_layer.svg" media="(prefers-color-scheme: white)" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+    />
+    <title>성장하는 당신을 위한 회고 서비스, Layer</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
-<head>
-  <meta charset="UTF-8" />
-  <!-- FIXME: 추후 디자인 팀 OG 로고 요청 후 수정 -->
-  <link rel="icon" type="image/svg+xml" href="/white_layer.svg" />
-  <link rel="icon" type="image/svg+xml" href="/dark_layer.svg" media="(prefers-color-scheme: dark)" />
-  <link rel="icon" type="image/svg+xml" href="/white_layer.svg" media="(prefers-color-scheme: white)" />
-  <link rel="stylesheet" as="style" crossorigin
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
-  <title>성장하는 당신을 위한 회고 서비스, Layer</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="성장하는 당신을 위한 회고 서비스, Layer" />
-  <meta property="og:image" content="https://kr.object.ncloudstorage.com/layer-bucket/og-image.png" />
-  <meta property="og:description" content="편리한 회고 작성부터 AI 분석까지 Layer에서 함께해요!" />
-  <meta property="og:site_name" content="layer" />
-  <meta property="og:locale" content="ko_KR" />
-  <meta property="og:image:width" content="1200" />
-  <meta property="og:image:height" content="630" />
-  <meta name="description" content="편리한 회고 작성부터 AI 분석까지 Layer에서 함께해요!" />
+    <!-- SEO Meta Tags -->
+    <meta name="description" content="편리한 회고 작성부터 AI 분석까지 Layer에서 함께해요!" />
+    <meta
+      name="keywords"
+      content="회고, 회고록, retrospect, 회고 서비스, AI 분석, 템플릿, KPT, 5F, 성장, 팀 회고, 개인 회고, Layer, 레이어, 성장하는 사람들의 회고 모임, 메모어"
+    />
+    <meta name="author" content="Layer Team" />
+    <meta name="robots" content="index, follow" />
+    <meta name="theme-color" content="#009BFF" />
+    <link rel="canonical" href="https://www.layerapp.io/" />
 
-  <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
-  <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
-  <script type="text/javascript"
-    src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
-</head>
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://www.layerapp.io/" />
+    <meta property="og:title" content="성장하는 당신을 위한 회고 서비스, Layer" />
+    <meta property="og:description" content="편리한 회고 작성부터 AI 분석까지 Layer에서 함께해요!" />
+    <meta property="og:image" content="https://kr.object.ncloudstorage.com/layer-bucket/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:site_name" content="layer" />
+    <meta property="og:locale" content="ko_KR" />
 
-<body>
-  <div id="root"></div>
-  <div id="loading-modal-root"></div>
-  <div id="modal-root"></div>
-  <div id="toast-root"></div>
-  <div id="bottom-sheet-root"></div>
-  <div id="dropdown-root"></div>
-  <div id="tooltip-root"></div>
-  <script type="module" src="/src/app.tsx"></script>
-</body>
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="성장하는 당신을 위한 회고 서비스, Layer" />
+    <meta name="twitter:description" content="편리한 회고 작성부터 AI 분석까지 Layer에서 함께해요!" />
+    <meta name="twitter:image" content="https://kr.object.ncloudstorage.com/layer-bucket/og-image.png" />
 
-</html>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
+    <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <div id="loading-modal-root"></div>
+    <div id="modal-root"></div>
+    <div id="toast-root"></div>
+    <div id="bottom-sheet-root"></div>
+    <div id="dropdown-root"></div>
+    <div id="tooltip-root"></div>
+    <div id="toggle-root"></div>
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>
diff --git a/apps/web/server/server.cjs b/apps/web/server/server.cjs
@@ -74,6 +74,9 @@ app.get("/space/join/:id", async (req, res) => {
     $('meta[property="og:title"]').attr('content', `${leaderName}님의 회고 초대장`);
     $('meta[property="og:description"]').attr('content', `함께 회고해요! ${leaderName}님이 ${teamName} 스페이스에 초대했어요.`);
     $('meta[property="og:image"]').attr('content', 'https://kr.object.ncloudstorage.com/layer-bucket/retrospectOG.png');
+    $('meta[name="twitter:title"]').attr('content', `${leaderName}님의 회고 초대장`);
+    $('meta[name="twitter:description"]').attr('content', `함께 회고해요! ${leaderName}님이 ${teamName} 스페이스에 초대했어요.`);
+    $('meta[name="twitter:image"]').attr('content', 'https://kr.object.ncloudstorage.com/layer-bucket/retrospectOG.png');
 
     res.send($.html());
   } catch (err) {

diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
@@ -1,4 +1,6 @@
 import "@/style/global.css";
+import "@/style/channelTalk.css";
+
 import { QueryClientProvider } from "@tanstack/react-query";
 // import { DevTools } from "jotai-devtools";
 import React, { Suspense } from "react";

diff --git a/apps/web/src/app/.gitkeep → apps/web/src/app/desktop/.gitkeep b/apps/web/src/app/.gitkeep → apps/web/src/app/desktop/.gitkeep
diff --git a/apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisContent.tsx b/apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisContent.tsx
@@ -0,0 +1,24 @@
+import { getAnalysisResponse } from "@/hooks/api/retrospect/analysis/useGetAnalysisAnswer";
+import AnalysisQuestionsTab from "./AnalysisQuestionsTab";
+import AnalysisIndividualTab from "./AnalysisIndividualTab";
+import AnalysisTab from "./AnalysisTab";
+import { AnalysisTab as AnalysisTabType } from ".";
+import AnalysisRetrospectTab from "./AnalysisRetrospectTab";
+
+type AnalysisContentProps = {
+  selectedTab: AnalysisTabType;
+  analysisData: getAnalysisResponse;
+};
+
+export default function AnalysisContent({ selectedTab, analysisData }: AnalysisContentProps) {
+  const { questions, individuals } = analysisData;
+
+  return (
+    <>
+      {selectedTab === "회고" && <AnalysisRetrospectTab analysisData={analysisData} />}
+      {selectedTab === "질문" && <AnalysisQuestionsTab questions={questions} />}
+      {selectedTab === "개별" && <AnalysisIndividualTab individuals={individuals} />}
+      {selectedTab === "분석" && <AnalysisTab analysisData={analysisData} />}
+    </>
+  );
+}
diff --git a/apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisHeader.tsx b/apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisHeader.tsx
@@ -0,0 +1,125 @@
+import { Icon } from "@/component/common/Icon";
+import { Typography } from "@/component/common/typography";
+import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
+import { css } from "@emotion/react";
+import { TEAM_ANALYSIS_MENU_TABS, PERSONAL_ANALYSIS_MENU_TABS, AnalysisTab } from ".";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { PATHS } from "@layer/shared";
+import { useEffect, useRef } from "react";
+import { useNavigation } from "@/component/common/LocalNavigationBar/context/NavigationContext";
+
+type AnalysisHeaderProps = {
+  selectedTab: AnalysisTab;
+  isPersonal: boolean;
+  isOverviewVisible: boolean;
+  handleTabClick: (tab: AnalysisTab) => void;
+  onToggleOverview: () => void;
+};
+
+export default function AnalysisHeader({ selectedTab, isPersonal, isOverviewVisible, handleTabClick, onToggleOverview }: AnalysisHeaderProps) {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const { isCollapsed, toggleCollapse } = useNavigation();
+
+  const title = searchParams.get("title");
+  const spaceId = searchParams.get("spaceId");
+
+  const menuTabs = isPersonal ? PERSONAL_ANALYSIS_MENU_TABS : TEAM_ANALYSIS_MENU_TABS;
+
+  const originalIsCollapsedRef = useRef<boolean>(isCollapsed);
+
+  const handleClose = () => {
+    if (isCollapsed && !originalIsCollapsedRef.current) {
+      toggleCollapse();
+    }
+
+    navigate(PATHS.spaceDetail(spaceId as string));
+  };
+
+  useEffect(() => {
+    originalIsCollapsedRef.current = isCollapsed;
+  }, []);
+
+  return (
+    <section
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+      `}
+    >
+      <section
+        css={css`
+          display: flex;
+          gap: 1.2rem;
+        `}
+      >
+        <Icon
+          icon="ic_analysis_close"
+          size={2.0}
+          css={css`
+            cursor: pointer;
+          `}
+          onClick={handleClose}
+        />
+        <Icon
+          icon={isOverviewVisible ? "ic_expand" : "ic_shrink"}
+          size={2.0}
+          onClick={onToggleOverview}
+          css={css`
+            cursor: pointer;
+          `}
+        />
+      </section>
+
+      {/* ---------- 제목 ---------- */}
+      <Typography variant="heading24Bold" color="gray900">
+        {title}
+      </Typography>
+
+      <div
+        css={css`
+          display: flex;
+          gap: 1.2rem;
+          overflow: hidden;
+          transition:
+            height 0.3s ease-in-out,
+            opacity 0.3s ease-in-out,
+            margin 0.3s ease-in-out;
+          border-bottom: 1px solid ${DESIGN_TOKEN_COLOR.gray200};
+        `}
+      >
+        {menuTabs.map((tab) => (
+          <button
+            key={tab}
+            onClick={() => handleTabClick(tab)}
+            css={css`
+              position: relative;
+              background: none;
+              border: none;
+              padding: 0.6rem 0rem;
+
+              &::after {
+                content: "";
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 2px;
+                background-color: ${DESIGN_TOKEN_COLOR.gray900};
+                transform: scaleX(${tab === selectedTab ? 1 : 0});
+                transition: transform 0.3s ease-in-out;
+                transform-origin: center;
+              }
+            `}
+          >
+            <Typography variant="subtitle14SemiBold" color={tab === selectedTab ? "gray900" : "gray500"}>
+              {tab}
+            </Typography>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}