feat: 홈 화면 온보딩 구현

.gitignore

@@ -146,4 +146,7 @@ dist
 
 # End of https://www.toptal.com/developers/gitignore/api/node
 
-*.xcconfig
+*.xcconfig
+
+# Claude Code configuration
+CLAUDE.md

apps/web/src/app/desktop/component/home/ActionItemsWrapper/index.tsx

@@ -12,6 +12,7 @@ import "swiper/css/navigation";
 import { useGetActionItemList } from "@/hooks/api/actionItem/useGetActionItemList";
 import { LoadingSpinner } from "@/component/space/view/LoadingSpinner";
 import { Icon } from "@/component/common/Icon";
+import { Spacing } from "@/component/common/Spacing";
 
 export default function ActionItemsWrapper() {
   // * 본인 memberId 가져오기
@@ -107,6 +108,7 @@ export default function ActionItemsWrapper() {
           }
 
           .swiper-wrapper {
+            display: ${myActionItems?.length === 0 ? "none" : "flex"};
             align-items: stretch;
           }
 
@@ -165,33 +167,9 @@ export default function ActionItemsWrapper() {
             <LoadingSpinner />
           </div>
         ) : !myActionItems || myActionItems.length === 0 ? (
-          <div
-            css={css`
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              flex-direction: column;
-              gap: 1.6rem;
-            `}
-          >
-            <Icon icon="ic_new_clock" size={5.6} color={DESIGN_TOKEN_COLOR.gray500} />
-            <Typography
-              variant="body15Medium"
-              color="gray500"
-              css={css`
-                text-align: center;
-                white-space: pre-wrap;
-              `}
-            >
-              {"진행 중인 실행 목표가 없어요\n회고를 완료하면 실행목표를 설정할 수 있습니다"}
-            </Typography>
-          </div>
+          <ActionItemsWrapper.Onboarding />
         ) : (
-          myActionItems.map((actionItem, index) => (
+          myActionItems?.map((actionItem, index) => (
             <SwiperSlide key={`${actionItem.retrospectId}-${index}`}>
               <ActionItemBox actionItem={actionItem} />
             </SwiperSlide>
@@ -201,3 +179,156 @@ export default function ActionItemsWrapper() {
     </article>
   );
 }
+
+ActionItemsWrapper.Onboarding = function () {
+  return (
+    <section
+      css={css`
+        display: flex;
+        gap: 2rem;
+      `}
+    >
+      <ActionItemsWrapper.OnboardingHint />
+      <ActionItemsWrapper.OnboardingItem />
+      <ActionItemsWrapper.OnboardingItem />
+    </section>
+  );
+};
+
+ActionItemsWrapper.OnboardingHint = function () {
+  return (
+    <article
+      css={css`
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        width: 26.5rem;
+        height: 22.8rem;
+        padding-right: 2.4rem;
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 0.1rem;
+          height: 100%;
+          background-color: ${DESIGN_TOKEN_COLOR.gray200};
+        }
+      `}
+    >
+      <Icon icon="ic_post" size={4.0} />
+      <Spacing size={1.2} />
+      <Typography variant="title16Bold" color="gray600">
+        회고 진행하고 실행목표 확인하기
+      </Typography>
+      <Spacing size={1.2} />
+      <Typography
+        variant="body14Medium"
+        color="gray500"
+        css={css`
+          word-break: keep-all;
+        `}
+      >
+        Layer에서 회고를 작성하고 실행목표까지 만들어보세요. 회고를 완료하면 실행목표를 바로 확인할 수 있어요.
+      </Typography>
+    </article>
+  );
+};
+
+ActionItemsWrapper.OnboardingItem = function () {
+  return (
+    <article
+      css={css`
+        width: 27.7rem;
+        opacity: 0.3;
+      `}
+    >
+      {/* ---------- 회고 제목 ---------- */}
+      <section
+        css={css`
+          display: flex;
+          align-items: center;
+          background-color: ${DESIGN_TOKEN_COLOR.gray100};
+          padding: 1.6rem;
+          border-radius: 0.8rem;
+        `}
+      >
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            gap: 0.4rem;
+            flex: 1;
+            min-width: 0;
+          `}
+        >
+          <Typography variant="title16Bold" color="gray900">
+            중간발표 이후 회고
+          </Typography>
+          <Typography
+            variant="body14Medium"
+            color="gray500"
+            css={css`
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            `}
+          >
+            떡잎방범대 | 회고 마감일 2026.06.30
+          </Typography>
+        </div>
+        <div
+          css={css`
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 2.4rem;
+            height: 2.4rem;
+            border-radius: 50%;
+            flex-shrink: 0;
+          `}
+        >
+          <Icon icon="ic_after" size={1.2} color={DESIGN_TOKEN_COLOR.gray800} />
+        </div>
+      </section>
+
+      {/* ---------- 실행목표 리스트 ---------- */}
+      <ul
+        css={css`
+          display: flex;
+          flex-direction: column;
+          margin-top: 2.4rem;
+          list-style: disc;
+          padding-left: 2.6rem;
+          margin-top: 2.4rem;
+          gap: 2rem;
+
+          li::marker {
+            color: ${DESIGN_TOKEN_COLOR.gray400};
+            font-size: 2rem;
+          }
+        `}
+      >
+        <li
+          css={css`
+            padding-left: 0.8rem;
+          `}
+        >
+          <Typography variant="body16Medium" color="gray900">
+            긴 회의 시간 줄이기
+          </Typography>
+        </li>
+        <li
+          css={css`
+            padding-left: 0.8rem;
+          `}
+        >
+          <Typography variant="body16Medium" color="gray900">
+            회의 후 내용 꼭 기록해두기
+          </Typography>
+        </li>
+      </ul>
+    </article>
+  );
+};

apps/web/src/app/desktop/component/home/AnalyticsBox/index.tsx

@@ -4,6 +4,7 @@ import AnalyticsSummaryBox from "./AnalyticsSummaryBox";
 import { Point } from "@/types/analysis";
 import { getAnalysisConfig } from "@/utils/analysis/getAnalysisConfig";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
+import { Icon } from "@/component/common/Icon";
 
 type AnalyticsBoxProps = {
   type: "good" | "bad" | "improvement";
@@ -40,7 +41,7 @@ export default function AnalyticsBox({ type, analysis }: AnalyticsBoxProps) {
             font-size: 1.8rem;
           `}
         >
-          {config.emoji}
+          <Icon icon={config.emoji} size={config.iconSize} />
         </div>
         <Typography variant="title18Bold">{config.title}</Typography>
       </section>