Merge pull request #38 from prgrms-web-devcourse-final-project/feat/input#10

[style]/input, Selectbox#10

Author: mtm-git1018

next.config.ts

@@ -1,13 +1,15 @@
+
 import type { NextConfig } from 'next';
 
+
 const nextConfig: NextConfig = {
   // TurboPack 설정
   experimental: {
     turbo: {
       rules: {
-        '*.svg': {
+        '.svg': {
           loaders: ['@svgr/webpack'],
-          as: '*.js',
+          as: '.js',
         },
       },
     },
@@ -20,11 +22,11 @@ const nextConfig: NextConfig = {
     config.module.rules.push(
       {
         ...fileLoaderRule,
-        test: /\.svg$/i,
+        test: /.svg$/i,
         resourceQuery: /url/,
       },
       {
-        test: /\.svg$/i,
+        test: /.svg$/i,
         issuer: fileLoaderRule.issuer,
         resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
         use: [
@@ -38,9 +40,9 @@ const nextConfig: NextConfig = {
         ],
       }
     );
-    fileLoaderRule.exclude = /\.svg$/i;
+    fileLoaderRule.exclude = /.svg$/i;
     return config;
   },
 };
-
+ 
 export default nextConfig;

package.json

@@ -10,7 +10,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx"
-  },
+  }, 
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "prettier --write",

src/app/design-system/page.tsx

@@ -2,10 +2,13 @@
 
 import Button from '@/shared/components/button/Button';
 import TextButton from '@/shared/components/button/TextButton';
-import ModalLayout from '@/shared/components/modalPop/ModalLayout';
+import Input from '@/shared/components/InputBox/Input';
 import { useState } from 'react';
 import { customToast } from '@/shared/components/toast/CustomToastUtils';
+import ModalLayout from '@/shared/components/modalPop/ModalLayout';
 import ConfirmPop from '@/shared/components/modalPop/ConfirmPop';
+import ChatInput from '@/shared/components/InputBox/ChatInput';
+import SelectBox from '@/shared/components/InputBox/SelectBox';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -22,20 +25,18 @@ function Page() {
 
         {/* Input */}
         <div className="flex flex-col gap-2 space-y-2">
-          <h3 className="text-lg font-medium border-b pb-1">Input</h3>
-          {/* 여기 컴포넌트 삽입 */}
-        </div>
-
-        {/* checkbox */}
-        <div className="space-y-2">
-          <h3 className="text-lg font-medium border-b pb-1">checkbox</h3>
-          {/* 여기 컴포넌트 삽입 */}
+          <h3 className="text-xl font-medium border-b pb-1">Input</h3>
+          <Input placeholder="내용을 입력해주세요." id="test" />
+          <Input placeholder="내용을 입력해주세요." id="test" variant="search" />
+          <Input placeholder="칵테일을 검색해 보세요" id="test" variant="comment" />
+          <Input placeholder="내용을 입력해주세요." id="test" size="lg" />
+          <ChatInput placeholder="내용을 입력해주세요" id="test" />
         </div>
 
         {/* select */}
         <div className="space-y-2">
           <h3 className="text-lg font-medium border-b pb-1">select</h3>
-          {/* 여기 컴포넌트 삽입 */}
+          <SelectBox option={['', '논알콜', '약한 도수', '중간 도수']} title="도수" />
         </div>
       </div>
 

src/shared/components/InputBox/ChatInput.tsx

@@ -0,0 +1,38 @@
+import { keyDown } from '@/shared/utills/keyDown';
+import { Ref } from 'react';
+
+interface Props {
+  id: string;
+  placeholder: string;
+  className?: string;
+  ref?: Ref<HTMLTextAreaElement | null>;
+}
+
+function ChatInput({ id, placeholder, className, ref }: Props) {
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    const target = e.currentTarget;
+
+    if (target.value == '') {
+      target.style.height = '';
+    }
+    target.style.height = `${target.scrollHeight}px`;
+  };
+
+  return (
+    <div>
+      <label htmlFor={id} className="sr-only">
+        입력창
+      </label>
+      <textarea
+        id={id}
+        name={id}
+        ref={ref}
+        onKeyDown={(e) => keyDown(e)}
+        onInput={(e) => handleInput(e)}
+        placeholder={placeholder}
+        className={` px-4 py-1 rounded-lg h-13 bg-white text-primary leading-11 placeholder:text-gray-dark resize-none outline-none ${className}`}
+      />
+    </div>
+  );
+}
+export default ChatInput;

src/shared/components/InputBox/Input.tsx

@@ -0,0 +1,80 @@
+import tw from '@/shared/utills/tw';
+import { cva } from 'class-variance-authority';
+import { HTMLInputTypeAttribute, Ref } from 'react';
+import Search from '@/shared/assets/icons/search_32.svg';
+import Button from '../button/Button';
+// select나올떄 자연스러운 처리 화살표 로테이트 [x]
+// 인풋 타입받을 수 있게 수정 [x]
+// 인풋접근성 라벨이 중요함 라벨 을 div에 묶어서 하거나 label로 인풋감싸거나 div로 묶고 같은 선상에두게 [x]
+// div안에 라벨이랑감싸기 [x]
+// 텍스트 에어리어 버전도 만들기
+// 인풋 잘림 = 라인height 인풋 높이랑 맞춰두기 [x]
+
+interface Props {
+  placeholder: string;
+  type?: HTMLInputTypeAttribute;
+  ref?: Ref<HTMLInputElement | null>;
+  size?: 'default' | 'lg';
+  variant?: 'default' | 'search' | 'comment';
+  className?: string;
+  onChange?: () => void;
+  id: string;
+}
+
+export const InputClass = cva(
+  `px-4 py-1 w-80 rounded-lg bg-white text-primary flex items-center gap-2 placeholder:text-gray-dark`,
+  {
+    variants: {
+      size: {
+        default: 'h-10',
+        lg: 'h-13',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+function Input({
+  placeholder,
+  type,
+  ref,
+  size,
+  variant = 'default',
+  className,
+  id,
+  onChange,
+  ...rest
+}: Props) {
+  return (
+    <div className={tw(InputClass({ size, className }))}>
+      <label htmlFor={id} className="flex-1">
+        <input
+          id={id}
+          type={type}
+          placeholder={placeholder}
+          className={`outline-none w-full flex-1 leading-${size}`}
+          ref={ref}
+          onChange={onChange}
+          {...rest}
+        />
+      </label>
+      {variant === 'search' ? (
+        <button type="button">
+          <Search aria-label="검색버튼" />
+        </button>
+      ) : variant === 'comment' ? (
+        <Button
+          color="purple"
+          type="submit"
+          size="auto"
+          className="w-10 h-6 flex-center text-xs px-1.5 py-[1px] rounded-sm shadow-md"
+        >
+          입력
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+export default Input;

src/shared/components/InputBox/SelectBox.tsx

@@ -0,0 +1,59 @@
+import { Ref, useState } from 'react';
+import Down from '@/shared/assets/icons/selectDown_24.svg';
+
+interface Props {
+  ref?: Ref<HTMLButtonElement | null>;
+  option: string[];
+  title: string;
+}
+
+function SelectBox({ ref, option, title }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [select, setSelect] = useState('');
+
+  const handleChoose = (v: string) => {
+    setIsOpen(!isOpen);
+    if (!v) {
+      setSelect(title);
+    } else {
+      setSelect(v);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 relative h-6 w-30">
+      <button
+        ref={ref}
+        className="flex gap-2 cursor-pointer text-base"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        {select ? select : title}
+        {isOpen ? (
+          <Down className="rotate-180 duration-300" />
+        ) : (
+          <Down className="rotate-0 duration-300" />
+        )}
+      </button>
+
+      <ul
+        className={`w-30 bg-white text-gray-dark p-2 rounded-xl  duration-200  absolute transition-all 
+         ${isOpen ? 'opacity-100 top-8' : 'opacity-0 pointer-events-none top-4'}`}
+        role="listbox"
+      >
+        {option.map((v, i) => (
+          <li
+            key={v + i}
+            role="option"
+            className="cursor-pointer p-1 hover:bg-secondary aria-selected:bg-secondary"
+            onClick={() => handleChoose(v)}
+            aria-selected={v === select}
+          >
+            {v || title}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+export default SelectBox;

src/shared/components/button/Button.tsx

@@ -2,20 +2,15 @@ import tw from '@/shared/utills/tw';
 import { cva } from 'class-variance-authority';
 import { ButtonHTMLAttributes, Ref } from 'react';
 
-// 버튼속성을 다 받을 수 있게
-// 클래스네임, 기본적인건 다 props로 받을 수 있게
-// 버튼 보여질 경우 arial hidden을 넣고 아이콘의경우 aria-label넣는다
-// 속성값에 disabled넣었을때 알어서 바뀔수 있게 할 수 있게 수정하기.
-// Ref가 잘 되는지 확인해보기
-
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: 'default' | 'sm';
+  size?: 'default' | 'sm' | 'auto';
   color?: 'default' | 'purple';
   ref?: Ref<HTMLButtonElement | null>;
   disable?: boolean;
   type?: 'submit' | 'button';
   children?: React.ReactNode;
   className?: string;
+  onClick?: () => void;
 }
 
 export const ButtonClass = cva(
@@ -29,8 +24,9 @@ export const ButtonClass = cva(
         purple: 'bg-tertiary text-secondary',
       },
       size: {
-        default: 'h-10, min-w-25',
+        default: 'h-10 min-w-25',
         sm: 'h-8 min-w-20',
+        auto: 'w-auto',
       },
     },
     defaultVariants: {
@@ -48,6 +44,7 @@ function Button({
   className,
   ref,
   disabled,
+  onClick,
   ...rest
 }: Props) {
   return (
@@ -56,6 +53,7 @@ function Button({
       type={type}
       ref={ref}
       disabled={disabled}
+      onClick={onClick}
       {...rest}
     >
       {children}

src/shared/styles/_base.css

@@ -2,4 +2,8 @@
   button {
     cursor: pointer;
   }
+
+  select{
+    appearance:none
+  }
 }

src/shared/utills/keyDown.ts

@@ -0,0 +1,8 @@
+export const keyDown = (e: React.KeyboardEvent) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
+  }
+};