Feature/fe/#106 add channel UI merge

backend/package.json

@@ -1,33 +1,34 @@
-{
-  "name": "ddara-backend",
-  "private": true,
-  "workspaces": [
-    "frontend",
-    "backend"
-  ],
-  "version": "0.0.0",
-  "type": "module",
-  "description": "따라따라의 선따라길따라 BackEnd 코드",
-  "main": "index.js",
-  "scripts": {
-    "dev": "node src/index.js",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:coverage": "vitest run --coverage",
-    "lint": "pnpm lint-staged"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "bcrypt": "^5.1.1",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
-    "express-validator": "^7.2.0",
-    "jsonwebtoken": "^9.0.2",
-    "pg": "^8.13.1",
-    "swagger-jsdoc": "^6.2.8",
-    "swagger-ui-express": "^5.0.1",
-    "ws": "^8.11.0"
-  }
-}
+{
+    "name": "ddara-backend",
+    "private": true,
+    "workspaces": [
+      "frontend",
+      "backend"
+    ],
+    "version": "0.0.0",
+    "type": "module",
+    "description": "따라따라의 선따라길따라 BackEnd 코드",
+    "main": "index.js",
+    "scripts": {
+      "dev": "node src/index.js",
+      "test": "vitest",
+      "test:watch": "vitest --watch",
+      "test:coverage": "vitest run --coverage",
+      "lint": "pnpm lint-staged"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+      "bcrypt": "^5.1.1",
+      "dotenv": "^16.4.5",
+      "express": "^4.21.1",
+      "express-validator": "^7.2.0",
+      "jsonwebtoken": "^9.0.2",
+      "pg": "^8.13.1",
+      "swagger-jsdoc": "^6.2.8",
+      "swagger-ui-express": "^5.0.1",
+      "uuid": "^11.0.3",
+      "ws": "^8.11.0"
+    }
+  }

frontend/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "ddara-frontend",
-  "private": true,
-  "workspaces": [
-    "frontend",
-    "backend"
-  ],
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:coverage": "vitest run --coverage",
-    "lint": "pnpm lint-staged",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@fontsource/pretendard": "^5.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.13.0",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-onboarding": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
-    "@storybook/test": "^8.4.2",
-    "@types/navermaps": "^3.7.8",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.20",
-    "classnames": "^2.5.1",
-    "eslint": "^9.13.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^0.11.0",
-    "globals": "^15.11.0",
-    "postcss": "^8.4.47",
-    "storybook": "^8.4.2",
-    "tailwindcss": "^3.4.14",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
-    "vite-tsconfig-paths": "^5.1.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
-}
+{
+    "name": "ddara-frontend",
+    "private": true,
+    "workspaces": [
+      "frontend",
+      "backend"
+    ],
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+      "dev": "vite",
+      "build": "tsc -b && vite build",
+      "test": "vitest",
+      "test:watch": "vitest --watch",
+      "test:coverage": "vitest run --coverage",
+      "lint": "pnpm lint-staged",
+      "preview": "vite preview",
+      "storybook": "storybook dev -p 6006",
+      "build-storybook": "storybook build"
+    },
+    "dependencies": {
+      "@fontsource/pretendard": "^5.1.0",
+      "react": "^18.3.1",
+      "react-dom": "^18.3.1",
+      "react-icons": "^5.3.0",
+      "react-router-dom": "^6.28.0"
+    },
+    "devDependencies": {
+      "@chromatic-com/storybook": "^3.2.2",
+      "@eslint/js": "^9.13.0",
+      "@storybook/addon-essentials": "^8.4.2",
+      "@storybook/addon-interactions": "^8.4.2",
+      "@storybook/addon-onboarding": "^8.4.2",
+      "@storybook/blocks": "^8.4.2",
+      "@storybook/react": "^8.4.2",
+      "@storybook/react-vite": "^8.4.2",
+      "@storybook/test": "^8.4.2",
+      "@types/navermaps": "^3.7.8",
+      "@types/react": "^18.3.12",
+      "@types/react-dom": "^18.3.1",
+      "@types/react-router-dom": "^5.3.3",
+      "@vitejs/plugin-react-swc": "^3.5.0",
+      "autoprefixer": "^10.4.20",
+      "classnames": "^2.5.1",
+      "eslint": "^9.13.0",
+      "eslint-import-resolver-typescript": "^3.6.3",
+      "eslint-plugin-react-hooks": "^5.0.0",
+      "eslint-plugin-react-refresh": "^0.4.14",
+      "eslint-plugin-storybook": "^0.11.0",
+      "globals": "^15.11.0",
+      "postcss": "^8.4.47",
+      "storybook": "^8.4.2",
+      "tailwindcss": "^3.4.14",
+      "typescript": "~5.6.2",
+      "typescript-eslint": "^8.11.0",
+      "vite": "^5.4.10",
+      "vite-tsconfig-paths": "^5.1.1"
+    },
+    "eslintConfig": {
+      "extends": [
+        "plugin:storybook/recommended"
+      ]
+    }
+  }

frontend/src/component/common/InputBox.tsx

@@ -0,0 +1,28 @@
+import { ChangeEvent, FocusEvent } from 'react';
+
+export interface IInputBoxProps {
+  type?: 'text' | 'number' | 'password' | 'email' | 'tel';
+  placeholder?: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+
+export const InputBox = ({
+  type = 'text',
+  placeholder = '',
+  onChange,
+  onFocus,
+  onBlur,
+  className = '',
+}: IInputBoxProps) => (
+  <input
+    type={type}
+    placeholder={placeholder}
+    onChange={onChange}
+    onFocus={onFocus}
+    onBlur={onBlur}
+    className={`border-grayscale-75 placeholder:text-grayscale-50 focus:border-grayscale-400 text-grayscale-400 flex h-11 w-full rounded border px-3 text-xs focus:border-2 focus:outline-none ${className}`}
+  />
+);

frontend/src/component/layout/Footer.tsx

@@ -6,12 +6,13 @@ interface IFooterProps {
   title?: string;
   onClick?: () => void;
   active?: boolean;
+  isTranperency?: boolean;
 }
 
-export const Footer = (props: IFooterProps) => {
-  const buttonStyle = props.active ? buttonActiveType.ACTIVE : buttonActiveType.PASSIVE;
+export const Footer = ({ title, onClick, active = false, isTranperency = true }: IFooterProps) => {
+  const buttonStyle = active ? buttonActiveType.ACTIVE : buttonActiveType.PASSIVE;
 
-  return (
+  return isTranperency ? (
     <footer className="absolute bottom-5 h-[6%] w-[95%]">
       <button
         className={classNames(
@@ -24,10 +25,12 @@ export const Footer = (props: IFooterProps) => {
           buttonStyle,
         )}
         type="button"
-        onClick={props.onClick}
+        onClick={onClick}
       >
-        {props.title}
+        {title}
       </button>
     </footer>
+  ) : (
+    <div />
   );
 };

frontend/src/component/layout/Layout.tsx

@@ -7,6 +7,7 @@ interface ILayoutProps {
   footerTitle?: string;
   footerActive?: boolean;
   handleFooterClick?: () => void;
+  footerTransperency?: boolean;
 }
 
 export const Layout = (props: ILayoutProps) => {
@@ -25,6 +26,7 @@ export const Layout = (props: ILayoutProps) => {
         title={props.footerTitle}
         onClick={props.handleFooterClick}
         active={props.footerActive}
+        isTranperency={props.footerTransperency}
       />
     </>
   );

frontend/src/component/layout/header/LayoutHeader.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Header } from '@/component/header/Header';
 import { NoticeText } from '@/component/text/NoticeText';
-import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider.tsx';
+import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider';
 
 export const LayoutHeader = () => {
   const { headerOption } = useContext(HeaderContext);

frontend/src/index.css

@@ -37,6 +37,7 @@ time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
+  border-style: solid;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;