Feature(HK-165): 서비스 사용 가이드 모달 구현

package.json

@@ -19,6 +19,7 @@
     "@xterm/xterm": "^5.5.0",
     "antd": "^5.22.2",
     "axios": "^1.7.9",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.477.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -59,6 +60,7 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@craco/craco": "^7.1.0",
+    "@types/js-cookie": "^3.0.6",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "commitlint-plugin-function-rules": "^4.0.0",

src/pages/dashboard/content/index.style.tsx

@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Backdrop = styled.div`
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+`;
+
+export const ModalCard = styled.div`
+  position: relative;
+  z-index: 1001;
+  width: 680px;
+  max-width: 92vw;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  padding: 24px;
+`;
+
+export const CloseButton = styled.button`
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  border-radius: 6px;
+
+  &:hover {
+    background: #f3f4f6;
+  }
+`;
+
+export const Title = styled.h2`
+  font-size: 22px;
+  font-weight: 800;
+  margin: 0 0 12px 0;
+`;
+
+export const DescList = styled.ol`
+  margin: 8px 0 16px 0;
+  padding-left: 20px;
+  color: #4b5563;
+  line-height: 1.6;
+
+  & > li {
+    margin: 6px 0;
+  }
+`;
+
+export const CheckboxRow = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #6b7280;
+  user-select: none;
+
+  input {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+export const Footer = styled.div`
+  margin-top: 16px;
+  text-align: right;
+`;
+
+export const OutlineButton = styled.button`
+  color: white;
+  cursor: pointer;
+  border: 1px solid black;
+  background-color: var(--main-color);
+  border-radius: 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+  font-size: 14px;
+
+  &:hover {
+    opacity: 0.7;
+  }
+`;

src/pages/dashboard/content/index.tsx

@@ -1,5 +1,46 @@
-const Content = () => {
-  return <></>;
+import { useState } from 'react';
+import { Overlay, Backdrop, ModalCard, CloseButton, Title, DescList, CheckboxRow, Footer, OutlineButton } from './index.style';
+
+type GuideModalProps = {
+  open: boolean;
+  onClose: (dontShowAgain?: boolean) => void;
+};
+
+const Content = ({ open, onClose }: GuideModalProps) => {
+  const [dontShow, setDontShow] = useState(false);
+  if (!open) return null;
+
+  const handleClose = () => onClose(dontShow);
+
+  return (
+    <Overlay role="dialog" aria-modal="true">
+      <Backdrop onClick={handleClose} />
+      <ModalCard>
+        <CloseButton aria-label="닫기" onClick={handleClose}>
+          ×
+        </CloseButton>
+
+        <Title>HUSK 사용 가이드</Title>
+        <DescList>
+          <li>키 등록: KeyChain에서 우측의 + 카드를 눌러 PEM 개인키 내용을 붙여넣고 저장하세요.</li>
+          <li>
+            연결 생성: 좌측 <b>SSH Connection</b>에서 인스턴스 정보<b>(Host IP/Port/Username)</b>를 입력하고 방금 등록한 키체인을 선택하세요.
+          </li>
+          <li>터미널 접속: 연결 카드를 누르면 웹터미널이 열립니다.</li>
+          <li>관리: 키체인 카드의 ⋮ 메뉴에서 이름 변경/삭제가 가능합니다.</li>
+        </DescList>
+
+        <CheckboxRow>
+          <input type="checkbox" checked={dontShow} onChange={(e) => setDontShow(e.target.checked)} />
+          7일 동안 보지 않기
+        </CheckboxRow>
+
+        <Footer>
+          <OutlineButton onClick={handleClose}>시작하기</OutlineButton>
+        </Footer>
+      </ModalCard>
+    </Overlay>
+  );
 };
 
 export default Content;

src/pages/dashboard/index.tsx

@@ -1,11 +1,21 @@
+import { useState, useCallback } from 'react';
+import Cookies from 'js-cookie';
 import Content from './content';
 
+const COOKIE_KEY = 'husk.guide.dismissed';
+const HIDE_DAYS = 7;
+
 const Dashboard = () => {
-  return (
-    <>
-      <Content />
-    </>
-  );
+  const [isGuideOpen, setIsGuideOpen] = useState(() => Cookies.get(COOKIE_KEY) !== '1');
+
+  const handleCloseGuide = useCallback((dontShowAgain?: boolean) => {
+    if (dontShowAgain) {
+      Cookies.set(COOKIE_KEY, '1', { expires: HIDE_DAYS, path: '/' });
+    }
+    setIsGuideOpen(false);
+  }, []);
+
+  return <Content open={isGuideOpen} onClose={handleCloseGuide} />;
 };
 
 export default Dashboard;