Merge pull request #9 from wafflestudio/feat/common

Feat/common

package.json

@@ -16,6 +16,7 @@
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwind-merge": "^3.0.1",
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {

src/App.tsx

@@ -1,11 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 
-import { router } from './router';
+import { router } from './route/router.tsx';
 import '@/styles/styles.css';
 
 function App() {
   const queryClient = new QueryClient();
+
   return (
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />

src/Layout/Layout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom';
+
+const Layout = () => {
+  return (
+    <div className="relative mx-auto flex h-screen w-full max-w-[560px] flex-col items-center overflow-hidden">
+      <Outlet />
+    </div>
+  );
+};
+
+export default Layout;

src/Layout/SideBar.tsx

@@ -0,0 +1,7 @@
+const SideBar = () => {
+  return (
+    <div className="fixed left-0 top-0 h-screen w-[70px] bg-[#ECECEC]"></div>
+  );
+};
+
+export default SideBar;

src/components/InfoCard/InfoDetail.tsx

@@ -6,23 +6,20 @@ type InfoDetailProps = {
 const InfoDetail = ({ title, content }: InfoDetailProps) => {
   return (
     <div className="flex flex-col">
-      <div className="mb-3.5 font-psemibold text-[15px]">{title}</div>{' '}
-      {/* title 아래 마진 14px */}
+      <div className="mb-3.5 text-[15px] font-semibold">{title}</div>{' '}
       {Array.isArray(content) ? (
         <div className="flex flex-col gap-2.5">
-          {' '}
-          {/* content 사이 gap 10px */}
           {content.map((item, index) => (
             <div
               key={index}
-              className="font-pmedium text-sm font-normal"
+              className="text-sm font-normal"
             >
               {item}
             </div>
           ))}
         </div>
       ) : (
-        <div className="font-pmedium text-sm font-normal">{content}</div>
+        <div className="text-sm font-normal">{content}</div>
       )}
     </div>
   );

src/components/InfoCard/Tag.tsx

@@ -10,7 +10,7 @@ const Tag = ({ label, isPosition = false, linkTo }: TagProps) => {
   const navigate = useNavigate();
 
   const baseStyles =
-    'h-[26px] inline-block cursor-pointer rounded-md px-3 py-[5px] font-pmedium leading-[16.71px] transition-colors';
+    'h-[26px] inline-block cursor-pointer rounded-md px-3 py-[5px] leading-[16.71px] transition-colors';
 
   const colorStyles = isPosition
     ? 'bg-black text-white'

src/components/common/BackButton.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Icons } from '@/constants/icons.tsx';
+
+const BackButton = ({ linkTo = '-1' }: { linkTo?: string }) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    if (linkTo === '-1') {
+      navigate(-1);
+    } else if (linkTo) {
+      navigate(linkTo);
+    }
+  };
+
+  return (
+    <div
+      className="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-full border border-borderGray bg-white transition-colors hover:bg-backgroundGray"
+      onClick={handleClick}
+    >
+      {Icons.Backward}
+    </div>
+  );
+};
+
+export default BackButton;