✨feat: 메타 태그 추가 및 미리보기 이미지 추가

minimo-9 · web-flow · commit 971a40f1725f · 2025-04-26T18:32:51.000+09:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -21,8 +21,31 @@
       href="https://hangeul.pstatic.net/hangeul_static/css/NanumSonPyeonJiCe.css"
       rel="stylesheet"
     />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/images/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>너의 마음을 전달해줘 - Rolling</title>
+    <title>Rolling – 마음을 실은 종이비행기</title>
+    <meta property="og:title" content="Rolling – 마음을 실은 종이비행기" />
+    <meta
+      property="og:description"
+      content="마음을 종이비행기에 담아 전하세요. 부담 없이, 따뜻하게."
+    />
+    <meta
+      property="og:image"
+      content="https://yourdomain.com/images/rolling-meta.png"
+    />
+    <meta property="og:url" content="https://rolling-gamma.vercel.app/" />
+    <meta property="og:type" content="website" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Rolling – 마음을 실은 종이비행기" />
+    <meta
+      name="twitter:description"
+      content="당신의 마음을 종이비행기에 담아 따뜻하게 전해보세요."
+    />
+    <meta
+      name="twitter:image"
+      content="https://rolling-gamma.vercel.app/rolling-meta.png"
+    />
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/assets/images/rolling-meta.png b/src/assets/images/rolling-meta.png
diff --git a/src/components/common/Button.module.scss b/src/components/common/Button.module.scss
@@ -30,7 +30,7 @@
     background-color: $purple-800;
   }
 
-  &:focus {
+  &:focus-visible {
     border: 2px solid $purple-900;
     background-color: $purple-800;
   }
diff --git a/src/components/common/FormInput.jsx b/src/components/common/FormInput.jsx
@@ -22,7 +22,6 @@ export default function FormInput({
         value={value}
         onChange={onChange}
         onBlur={onBlur}
-        maxLength={10}
         className={`${styles['form-input__input']} ${isError ? styles['form-input__input--error'] : ''}`}
       />
       {isError && (
diff --git a/src/components/layout/Header/Header.jsx b/src/components/layout/Header/Header.jsx
@@ -13,7 +13,7 @@ export default function Header() {
 
   useEffect(() => {
     function handleResize() {
-      setIsMobile(window.innerWidth <= 768);
+      setIsMobile(window.innerWidth <= 767);
     }
 
     handleResize();
diff --git a/src/pages/CreateRecipient/CreateRecipient.jsx b/src/pages/CreateRecipient/CreateRecipient.jsx
@@ -32,7 +32,8 @@ export default function CreateRecipient() {
   }, []);
 
   function handleInputChange(e) {
-    setValue(e.target.value);
+    const inputValue = e.target.value.slice(0, 10);
+    setValue(inputValue);
   }
 
   function handleBlur() {
@@ -74,7 +75,6 @@ export default function CreateRecipient() {
           value={value}
           onChange={handleInputChange}
           onBlur={handleBlur}
-          maxLength={40}
           isError={isError}
         />
       </div>
diff --git a/src/pages/MessageForm/MessageForm.jsx b/src/pages/MessageForm/MessageForm.jsx
@@ -27,7 +27,8 @@ export default function MessageForm() {
   const navigate = useNavigate();
 
   function handleInputChange(e) {
-    setSender(e.target.value);
+    const inputValue = e.target.value.slice(0, 10);
+    setSender(inputValue);
   }
 
   function handleSenderBlur() {

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`background-color: $purple-800;`
`31`	`31`	`}`
`32`	`32`
`33`		`- &:focus {`
	`33`	`+ &:focus-visible {`
`34`	`34`	`border: 2px solid $purple-900;`
`35`	`35`	`background-color: $purple-800;`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ export default function Header() {`
`13`	`13`
`14`	`14`	`useEffect(() => {`
`15`	`15`	`function handleResize() {`
`16`		`- setIsMobile(window.innerWidth <= 768);`
	`16`	`+ setIsMobile(window.innerWidth <= 767);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`handleResize();`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,8 @@ export default function MessageForm() {`
`27`	`27`	`const navigate = useNavigate();`
`28`	`28`
`29`	`29`	`function handleInputChange(e) {`
`30`		`- setSender(e.target.value);`
	`30`	`+ const inputValue = e.target.value.slice(0, 10);`
	`31`	`+ setSender(inputValue);`
`31`	`32`	`}`
`32`	`33`
`33`	`34`	`function handleSenderBlur() {`