Merge branch 'dev' into feat/cicd

Author: yhj0214

.prettierrc

@@ -8,5 +8,12 @@
   "trailingComma": "none",
   "printWidth": 80,
   "arrowParens": "always",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/index.css",
+  "tailwindConfig": "./tailwind.config.ts",
+  "tailwindFunctions": ["clsx", "cn", "tw"],
+  "tailwindPreserveWhitespace": true,
+  "tailwindPreserveDuplicates": false
 }

package-lock.json

@@ -30,7 +30,8 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.0.5"

package.json

@@ -6,6 +6,7 @@ import ChatRecommend from "@/pages/ChatRecommend";
 import ChatTips from "@/pages/ChatTips";
 import ChatTemporature from "@/pages/ChatTemporature";
 import Content from "@/pages/Content";
+import Login from "@/pages/Login";
 
 const App = () => {
   return (
@@ -18,6 +19,7 @@ const App = () => {
         <Route path="/chat-tips" element={<ChatTips />} />
         <Route path="/chat-temporature" element={<ChatTemporature />} />
         <Route path="/content/:id" element={<Content />} />
+        <Route path="/login" element={<Login />} />
       </Routes>
     </Router>
   );

public/icon/arrow_left.svg

@@ -31,7 +31,7 @@ const Banner = () => {
   }, []);
 
   return (
-    <div className="relative flex w-full h-[184px]">
+    <div className="relative flex h-[184px] w-full">
       {images.map((image, index) => (
         // a -> Link로 바꿀 예정
         <a href={`/contents/${index}`}>
@@ -46,7 +46,7 @@ const Banner = () => {
           />
         </a>
       ))}
-      <div className="right-[20px] bottom-[12px] absolute">
+      <div className="absolute right-[20px] bottom-[12px]">
         <Indicator order={order} setOrder={setOrder} />
       </div>
     </div>

public/image/banner_login.png

@@ -1,16 +1,44 @@
-const Header = () => {
+import { useNavigate } from 'react-router-dom';
+
+type HeaderProps = {
+  title: string;
+  showPreviousIcon?: boolean;
+  showShareIcon?: boolean;
+};
+
+const Header = ({ title, showPreviousIcon = true, showShareIcon = true }: HeaderProps) => {
+  const navigate = useNavigate();
+
+  const handleGoBack = () => {
+    navigate(-1); 
+  };
+
   return (
-    <div className="flex flex-row bg-white border border-gray-100 items-center justify-center w-[500px] h-[56px] relative">
+    <div className="flex flex-row bg-white border border-gray-100 items-center justify-center w-full h-[56px] relative">
+      {showPreviousIcon && ( 
+        <img
+          src="/public/icon/arrow_left.svg"
+          alt="Go To Back"
+          className="absolute left-[18.77px] cursor-pointer"
+          width={9.87}
+          height={16}
+          onClick={handleGoBack}
+        />
+      )}
+
       <h1 className="text-[18px] font-bold text-gray-900 absolute left-1/2 transform -translate-x-1/2">
-        상대방 정보선택
+        {title}
       </h1>
-      <img
-        src="/public/icon/share.svg"
-        alt="Share"
-        className="absolute right-[20px] cursor-pointer"
-        width={16}
-        height={16}
-      />
+
+      {showShareIcon && (
+        <img
+          src="/public/icon/share.svg"
+          alt="Share"
+          className="absolute right-[20px] cursor-pointer"
+          width={16}
+          height={16}
+        />
+      )}
     </div>
   );
 };

public/image/home_banner_lg_3.png

@@ -1,6 +1,6 @@
 const NavBar = () => {
   return (
-    <div className="flex flex-row items-center justify-center w-[500px] h-[56px]">
+    <div className="flex h-[56px] w-full justify-between">
       <img
         src="/public/icon/mbtipslogo.svg"
         alt="Logo"