Merge pull request #7 from wafflestudio/feat/common

Feat/common

eslint.config.js

@@ -51,6 +51,14 @@ export default tseslint.config(
       ],
       'import/no-duplicates': 'error',
       'import/no-named-as-default': 'off',
+      'padding-line-between-statements': [
+        'error',
+        {
+          blankLine: 'always',
+          prev: 'import',
+          next: ['class', 'function', 'const', 'let', 'var', 'export'],
+        },
+      ],
     },
   }
 );

package.json

@@ -41,7 +41,8 @@
     "react-router-dom": "^7.1.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5"
+    "vite": "^6.0.5",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

src/App.tsx

@@ -1,31 +1,9 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-
-import { ProtectedRoute } from '@/components/Auth';
-import { Home } from '@/pages/home';
-import { Landing } from '@/pages/landing';
-import { Signup } from '@/pages/signup';
+import { RouterProvider } from 'react-router-dom';
 
+import { router } from './router';
 import '@/styles/styles.css';
-const routes = [
-  {
-    path: '/',
-    element: <ProtectedRoute redirectTo="/auth/login" />,
-    children: [{ path: '', element: <Signup /> }],
-  },
-  { path: '/auth/login', element: <Landing /> },
-  {
-    path: '/home',
-    element: <Home />,
-  },
-  {
-    path: '/signup',
-    element: <ProtectedRoute redirectTo="/auth/login" />,
-    children: [{ path: '', element: <Signup /> }],
-  },
-];
 
-const router = createBrowserRouter(routes);
 function App() {
   const queryClient = new QueryClient();
   return (

src/components/Auth.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
 import { useToken } from '@/utils/api';
+
 export const ProtectedRoute: React.FC<{ redirectTo: string }> = ({
   redirectTo,
 }) => {

src/components/LoginButton.tsx

@@ -10,8 +10,8 @@ const LoginButton = ({
   return (
     <div className="flex h-12 w-full flex-shrink-0 items-center justify-center">
       <button
-        className={`cursor-pointer rounded-md border border-borderGrey px-[73.5px] py-[9px] ${
-          isClicked ? 'bg-backgroundGrey' : 'bg-backgroundWhite'
+        className={`cursor-pointer rounded-md border border-borderGray px-[73.5px] py-[9px] ${
+          isClicked ? 'bg-backgroundGray' : 'bg-backgroundWhite'
         }`}
         onClick={onClick}
       >

src/components/common/Button.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+type ButtonProps = {
+  theme?: 'gray' | 'green' | 'red';
+  size?: 'small' | 'large';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  theme = 'gray', // 기본값 gray
+  size = 'small', // 기본값 small
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const baseStyles = 'transition-all font-pmedium';
+  const disabledStyles = 'bg-backgroundGray text-textGray1';
+
+  // theme에 따른 스타일 설정
+  const buttonTheme = {
+    gray: 'bg-textGray1 text-backgroundWhite hover:bg-textGray2',
+    green: 'bg-pointColor text-titleBlack hover:bg-backgroundGreen',
+    red: 'bg-[#E7564C] text-backgroundWhite hover:bg-[#D04338]',
+  };
+
+  // size에 따른 스타일 설정
+  const sizeStyles = {
+    small:
+      'h-[21px] px-[6px] py-[4px] text-[11px] rounded-[30px] leading-[13.13px]',
+    large:
+      'h-[34px] px-[16px] py-[8px] text-[15px] rounded-[6px] leading-[13.13px]',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${sizeStyles[size]} ${
+        disabled ? disabledStyles : buttonTheme[theme]
+      } ${className}`}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/common/Divider.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Divider = ({
+  className = '',
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={`h-[1px] w-full bg-borderGray ${className}`}
+      {...props}
+    />
+  );
+};
+
+export default Divider;

src/components/common/IconButton.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement } from 'react';
+
+const IconButton = ({
+  className = '',
+  children,
+  disabled = false,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      {...props}
+      disabled={disabled}
+      className={`flex h-[36px] w-[36px] items-center justify-center rounded-[6px] bg-white p-[8px] transition-colors hover:bg-[#EBE6E0] disabled:cursor-default disabled:bg-backgroundWhite ${
+        disabled ? 'text-borderGray' : 'text-textGray2'
+      } ${className}`}
+    >
+      {React.isValidElement(children)
+        ? React.cloneElement(children as ReactElement, {
+            className:
+              `${(children as ReactElement).props.className || ''} fill-inherit`.trim(),
+          })
+        : children}
+    </button>
+  );
+};
+
+export default IconButton;

src/components/common/Input.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Input = ({
+  className = '',
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      {...props}
+      className={`box-border h-[29px] w-full rounded-[4px] border border-borderGray bg-backgroundWhite px-2 text-sm font-normal text-titleBlack placeholder-textGray1 outline-none focus:border-[1.5px] focus:border-pointColor ${className}`}
+    />
+  );
+};
+
+export default Input;

src/components/common/SearchBar.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const SearchBar = ({
+  className = '',
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      {...props}
+      className={`h-[38px] w-full rounded-[20px] border border-textGray1 bg-backgroundGray px-4 font-pmedium text-titleBlack placeholder-textGray1 outline-none ${className}`}
+    />
+  );
+};
+
+export default SearchBar;

src/constants/icons.tsx

@@ -0,0 +1,19 @@
+import ADD_ICON from '@/assets/icons/add-icon.svg?react';
+import BACKWARD_ICON from '@/assets/icons/backward-icon.svg?react';
+import CROP_ICON from '@/assets/icons/crop-icon.svg?react';
+import DELETE_ICON from '@/assets/icons/delete-icon.svg?react';
+import EDIT_ICON from '@/assets/icons/edit-icon.svg?react';
+import HISTORY_ICON from '@/assets/icons/history-icon.svg?react';
+import LIST_ICON from '@/assets/icons/list-icon.svg?react';
+import TREE_ICON from '@/assets/icons/tree-icon.svg?react';
+
+export const Icons = {
+  Add: <ADD_ICON />,
+  Backward: <BACKWARD_ICON />,
+  Crop: <CROP_ICON />,
+  Delete: <DELETE_ICON />,
+  Edit: <EDIT_ICON />,
+  History: <HISTORY_ICON />,
+  List: <LIST_ICON />,
+  Tree: <TREE_ICON />,
+};

src/constants/images.tsx → src/constants/images.ts

@@ -1,4 +1,4 @@
-import BACK_BUTTON from '@/assets/images/backward-button.svg';
+import BACK_BUTTON from '@/assets/icons/backward-icon.svg';
 import SIGNUP_LOGO from '@/assets/images/signup.svg';
 import BLACK_LOGO from '@/assets/images/wemade-logo-black.png';
 import GRAY_SMALL_LOGO from '@/assets/images/wemade-logo-gray-small.svg';

src/pages/home.tsx → src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import { useSearchParams, useNavigate } from 'react-router-dom';
 
 import { useGetRequestWithoutToken, useToken } from '@/utils/api';
+
 type AuthResponse = {
   access_token: string;
   refresh_token: string;
@@ -10,7 +11,7 @@ type AuthResponse = {
   };
 };
 
-export const Home = () => {
+const Home = () => {
   const { setAccessToken } = useToken();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -32,3 +33,5 @@ export const Home = () => {
 
   return <div>Home</div>;
 };
+
+export default Home;

src/pages/landing.tsx → src/pages/Landing.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import SearchBar from '@/components/common/SearchBar.tsx';
 import { Layout } from '@/components/Layout';
 import LoginButton from '@/components/LoginButton';
-import { BLACK_LOGO } from '@/constants/images';
-export const Landing = () => {
+import { BLACK_LOGO } from '@/constants/images.ts';
+
+const Landing = () => {
   const [isClicked, setIsClicked] = useState(false);
 
   const handleLogin = async () => {
@@ -31,11 +33,11 @@ export const Landing = () => {
           isClicked={isClicked}
         />
         <div className="my-[38px] flex w-[320px] items-center">
-          <hr className="flex-grow border-t border-textGrey1" />
-          <span className="mx-3.5 text-sm text-textGrey1">OR</span>
-          <hr className="flex-grow border-t border-textGrey1" />
+          <hr className="flex-grow border-t border-textGray1" />
+          <span className="mx-3.5 text-sm text-textGray1">OR</span>
+          <hr className="flex-grow border-t border-textGray1" />
         </div>
-        <div className="text-[15px] text-textGrey2">
+        <div className="text-[15px] text-textGray2">
           처음이시라면?
           <Link
             to="/signup"
@@ -48,3 +50,5 @@ export const Landing = () => {
     </Layout>
   );
 };
+
+export default Landing;