From 681aab1709239f815e68104e0edb3e663ecd680c Mon Sep 17 00:00:00 2001 From: rkskekzzz Date: Thu, 21 Sep 2023 01:01:15 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20input=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/app/test/input/page.tsx | 10 ++++++++++ packages/ui/src/index.ts | 1 + packages/ui/src/input/index.tsx | 30 ++++++++++++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 apps/web/src/app/test/input/page.tsx create mode 100644 packages/ui/src/input/index.tsx diff --git a/apps/web/src/app/test/input/page.tsx b/apps/web/src/app/test/input/page.tsx new file mode 100644 index 0000000..2d033a3 --- /dev/null +++ b/apps/web/src/app/test/input/page.tsx @@ -0,0 +1,10 @@ +'use client' +import { Input } from '@80000coding/ui' + +export default function Page() { + return ( +
+ +
+ ) +} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 2ba02c7..de72506 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -5,5 +5,6 @@ export * from './button' export * from './chip' export * from './dropdown' export * from './icon' +export * from './input' export * from './notification' export * from './toggle' diff --git a/packages/ui/src/input/index.tsx b/packages/ui/src/input/index.tsx new file mode 100644 index 0000000..cbb9618 --- /dev/null +++ b/packages/ui/src/input/index.tsx @@ -0,0 +1,30 @@ +import { Input as Input$1 } from '@nextui-org/react' + +export type InputProps = Omit, 'classNames'> + +export function Input() { + return ( + + ) +} From 027b4bedb3e88b76ed7810761fce0b913a342ec5 Mon Sep 17 00:00:00 2001 From: rkskekzzz Date: Thu, 21 Sep 2023 01:26:32 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=A8=20next=20build=EC=8B=9C=20app/tes?= =?UTF-8?q?t=20=ED=95=98=EC=9C=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=93=A4?= =?UTF-8?q?=EC=9D=80=20=EC=A0=9C=EC=99=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/next.config.js | 16 ++++++++++++++++ apps/web/package.json | 1 + package-lock.json | 7 +++++++ 3 files changed, 24 insertions(+) diff --git a/apps/web/next.config.js b/apps/web/next.config.js index a03f14e..090e508 100644 --- a/apps/web/next.config.js +++ b/apps/web/next.config.js @@ -1,5 +1,21 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + /** + * + * @param {import('webpack').Configuration} config + * @param {import('next/dist/server/config-shared').WebpackConfigContext} context + * @returns {import('webpack').Configuration} + */ + webpack: (config) => { + if (process.env.NEXT_OUTPUT_MODE !== 'export' || !config.module) { + return config + } + config.module.rules?.push({ + test: /src\/app\/test/, + loader: 'ignore-loader', + }) + return config + }, experimental: { externalDir: true, }, diff --git a/apps/web/package.json b/apps/web/package.json index 0a7f3d9..a34d90c 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -52,6 +52,7 @@ "@types/react-dom": "18.2.6", "chromatic": "^6.22.0", "eslint-config-custom": "*", + "ignore-loader": "^0.1.2", "storybook": "^7.1.0", "storybook-dark-mode": "^3.0.1", "tailwindcss": "3.3.2", diff --git a/package-lock.json b/package-lock.json index d0721cb..94cb79b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -92,6 +92,7 @@ "@types/react-dom": "18.2.6", "chromatic": "^6.22.0", "eslint-config-custom": "*", + "ignore-loader": "^0.1.2", "storybook": "^7.1.0", "storybook-dark-mode": "^3.0.1", "storybook-tailwind-dark-mode": "^1.0.22", @@ -20104,6 +20105,12 @@ "node": ">= 4" } }, + "node_modules/ignore-loader": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ignore-loader/-/ignore-loader-0.1.2.tgz", + "integrity": "sha512-yOJQEKrNwoYqrWLS4DcnzM7SEQhRKis5mB+LdKKh4cPmGYlLPR0ozRzHV5jmEk2IxptqJNQA5Cc0gw8Fj12bXA==", + "dev": true + }, "node_modules/image-size": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz", From 29d933b74e885639ac0060de99e5a28ed18b4c9a Mon Sep 17 00:00:00 2001 From: sehyeon An Date: Fri, 22 Sep 2023 23:59:16 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=E2=9C=A8=20Input=20Box=20Component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 신수형 suhshin --- apps/web/src/app/test/input/page.tsx | 18 +++++- packages/ui/src/input/index.tsx | 91 +++++++++++++++++++++++----- 2 files changed, 91 insertions(+), 18 deletions(-) diff --git a/apps/web/src/app/test/input/page.tsx b/apps/web/src/app/test/input/page.tsx index 2d033a3..9b6dda4 100644 --- a/apps/web/src/app/test/input/page.tsx +++ b/apps/web/src/app/test/input/page.tsx @@ -1,10 +1,24 @@ 'use client' import { Input } from '@80000coding/ui' +import { useState } from 'react' export default function Page() { + const [value, setValue] = useState('') + return ( -
- +
+ + + + + {/* */}
) } diff --git a/packages/ui/src/input/index.tsx b/packages/ui/src/input/index.tsx index cbb9618..df3f00a 100644 --- a/packages/ui/src/input/index.tsx +++ b/packages/ui/src/input/index.tsx @@ -1,30 +1,89 @@ +import { StaticConfirmIcon } from '@80000coding/web-icons' import { Input as Input$1 } from '@nextui-org/react' +import { Dispatch, SetStateAction, useState } from 'react' -export type InputProps = Omit, 'classNames'> +export type InputProps = { + value: string + setValue: Dispatch> + displayLength?: boolean + isDescription?: boolean + isCorrect?: boolean +} & Omit, 'classNames'> + +export function Input({ + value, + setValue, + isInvalid = false, + placeholder = 'placeholder', + errorMessage: errorMessage$1 = 'Please enter a valid value', + displayLength = true, + description: description$1 = 'Please enter a value', + isDescription = true, + isCorrect = false, + label, + ...rest +}: InputProps) { + const [isFocus, setIsFocus] = useState(false) + const description = displayLength ? ( + <> + {description$1} + {value.length + '/20'} + + ) : ( + description$1 + ) + + const errorMessage = displayLength ? ( + <> + {errorMessage$1} + {value.length + '/20'} + + ) : ( + errorMessage$1 + ) -export function Input() { return ( { + setIsFocus(e) + }} + /* styles */ + type='text' radius='full' + labelPlacement='outside' + endContent={isCorrect && !isFocus && } classNames={{ - label: 'text-black/50 dark:text-white/90', - input: ['bg-transparent', 'text-black/90 dark:text-white/90', 'placeholder:text-default-700/50 dark:placeholder:text-white/60'], - innerWrapper: 'bg-transparent', + label: ['mx-[12px]', 'body-2'], + description: ['w-full', 'text-gray-400', 'caption-2', 'left-[12px]'], + errorMessage: ['w-full', 'text-red-warning', 'caption-2', 'left-[12px]'], + input: ['!bg-white', 'text-black', 'placeholder:text-gray-300', 'body-3', 'h-100'], + innerWrapper: [], inputWrapper: [ - 'shadow-xl', - 'bg-default-200/50', - 'dark:bg-default/60', - 'backdrop-blur-xl', - 'backdrop-saturate-200', - 'hover:bg-default-200/70', - 'focus-within:!bg-default-200/50', - 'dark:hover:bg-default/70', - 'dark:focus-within:!bg-default/60', + 'items-start', + '!bg-white', + 'border', + isInvalid ? 'border-red-warning' : isCorrect ? 'border-green' : 'border-gray-300', + isInvalid ? 'hover:border-red-warning' : 'hover:border-green', + isInvalid ? 'focus-within:border-red-warning' : 'focus-within:border-green', '!cursor-text', + 'rounded-[20px]', + 'px-[20px]', + 'py-[13px]', ], + mainWrapper: 'pb-[28px]', // 28px = padding 12px + lineheight 16px }} + {...rest} /> ) } From 7532a7ab6b69a360232726b57171d9c9f9b00caf Mon Sep 17 00:00:00 2001 From: sehyeon An Date: Thu, 28 Sep 2023 03:02:35 +0900 Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=9A=A7=20input=20search?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/app/test/input/page.tsx | 8 ++-- packages/ui/src/index.ts | 1 + packages/ui/src/input/input-search/index.tsx | 40 ++++++++++++++++++++ 3 files changed, 45 insertions(+), 4 deletions(-) create mode 100644 packages/ui/src/input/input-search/index.tsx diff --git a/apps/web/src/app/test/input/page.tsx b/apps/web/src/app/test/input/page.tsx index 9b6dda4..354ab3e 100644 --- a/apps/web/src/app/test/input/page.tsx +++ b/apps/web/src/app/test/input/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { Input } from '@80000coding/ui' +import { InputSearch } from '@80000coding/ui' import { useState } from 'react' export default function Page() { @@ -7,7 +7,7 @@ export default function Page() { return (
- + {/* - {/* */} + > */} +
) } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index de72506..a9705bb 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -6,5 +6,6 @@ export * from './chip' export * from './dropdown' export * from './icon' export * from './input' +export * from './input/input-search' export * from './notification' export * from './toggle' diff --git a/packages/ui/src/input/input-search/index.tsx b/packages/ui/src/input/input-search/index.tsx new file mode 100644 index 0000000..e273f5e --- /dev/null +++ b/packages/ui/src/input/input-search/index.tsx @@ -0,0 +1,40 @@ +import { DynamicSearchIcon, StaticCloseIcon } from '@80000coding/web-icons' +import { Input as Input$1 } from '@nextui-org/react' +import { Dispatch, SetStateAction } from 'react' + +export type InputSearchProps = { + value: string + setValue: Dispatch> +} & Omit, 'classNames'> + +export function InputSearch({ value, setValue, isInvalid = false, ...rest }: InputSearchProps) { + // const [value, setValue] = useState('') + const onClear = () => { + value = '' + console.log('click') + } + return ( + + {value !== '' && } + +
+ } + onValueChange={setValue} + isInvalid={isInvalid} + type='text' + placeholder='검색어를 입력하세요' + radius='full' + classNames={{ + label: ['mx-[12px]', 'body-2'], + description: ['mx-[12px]', 'caption-2'], + input: ['!bg-white', 'text-black', 'placeholder:text-gray-300', 'body-3', 'h-100'], + innerWrapper: [], + inputWrapper: ['items-start', '!bg-white', 'border', '!cursor-text', 'rounded-[20px]', 'px-[20px]', 'py-[13px]'], + }} + /> + ) +} From 1764f326b1737404cb7bf83f95d38a66b71e23c7 Mon Sep 17 00:00:00 2001 From: sehyeon An Date: Wed, 11 Oct 2023 22:59:28 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=9A=A7=20input=20search=20box?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/app/test/input/page.tsx | 1 + packages/ui/src/input/input-search/index.tsx | 42 +++++++++++++++---- .../icons/dynamic/dynamic-delete.svg | 10 +++++ 3 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 packages/web-icons/icons/dynamic/dynamic-delete.svg diff --git a/apps/web/src/app/test/input/page.tsx b/apps/web/src/app/test/input/page.tsx index 354ab3e..6ee0caf 100644 --- a/apps/web/src/app/test/input/page.tsx +++ b/apps/web/src/app/test/input/page.tsx @@ -19,6 +19,7 @@ export default function Page() { isCorrect={value === '가나다라'} > */} + ) } diff --git a/packages/ui/src/input/input-search/index.tsx b/packages/ui/src/input/input-search/index.tsx index e273f5e..df1a593 100644 --- a/packages/ui/src/input/input-search/index.tsx +++ b/packages/ui/src/input/input-search/index.tsx @@ -1,28 +1,44 @@ -import { DynamicSearchIcon, StaticCloseIcon } from '@80000coding/web-icons' +import { DynamicBackIcon, DynamicDeleteIcon, DynamicSearchIcon } from '@80000coding/web-icons' import { Input as Input$1 } from '@nextui-org/react' -import { Dispatch, SetStateAction } from 'react' +import { Dispatch, SetStateAction, useState } from 'react' export type InputSearchProps = { value: string setValue: Dispatch> + isBackBtn?: boolean } & Omit, 'classNames'> -export function InputSearch({ value, setValue, isInvalid = false, ...rest }: InputSearchProps) { +export function InputSearch({ value, setValue, isInvalid = false, isBackBtn = false, ...rest }: InputSearchProps) { // const [value, setValue] = useState('') + const onClear = () => { - value = '' - console.log('click') + setValue('') + } + + const onSearch = () => { + console.log('search') + } + + const onClickGoBack = () => { + console.log('Go Back!') } + + const [isFocus, setIsFocus] = useState(false) + return ( } endContent={
- {value !== '' && } - + {value !== '' && isFocus && } +
} + onFocusChange={(e) => { + setIsFocus(e) + }} onValueChange={setValue} isInvalid={isInvalid} type='text' @@ -33,7 +49,17 @@ export function InputSearch({ value, setValue, isInvalid = false, ...rest }: Inp description: ['mx-[12px]', 'caption-2'], input: ['!bg-white', 'text-black', 'placeholder:text-gray-300', 'body-3', 'h-100'], innerWrapper: [], - inputWrapper: ['items-start', '!bg-white', 'border', '!cursor-text', 'rounded-[20px]', 'px-[20px]', 'py-[13px]'], + inputWrapper: [ + 'items-start', + '!bg-white', + 'border', + 'hover:border-green', + 'focus-within:border-green', + '!cursor-text', + 'rounded-[20px]', + 'px-[20px]', + 'py-[13px]', + ], }} /> ) diff --git a/packages/web-icons/icons/dynamic/dynamic-delete.svg b/packages/web-icons/icons/dynamic/dynamic-delete.svg new file mode 100644 index 0000000..c7ee465 --- /dev/null +++ b/packages/web-icons/icons/dynamic/dynamic-delete.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From f257330315042e74d71f379d2e486d6a5bc2245a Mon Sep 17 00:00:00 2001 From: sehyeon An Date: Wed, 11 Oct 2023 23:32:23 +0900 Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=9A=A7=20input-comment=20textarea?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/app/test/input/page.tsx | 4 +- packages/ui/src/index.ts | 1 + packages/ui/src/input/input-comment/index.tsx | 62 +++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 packages/ui/src/input/input-comment/index.tsx diff --git a/apps/web/src/app/test/input/page.tsx b/apps/web/src/app/test/input/page.tsx index 6ee0caf..41eb5ce 100644 --- a/apps/web/src/app/test/input/page.tsx +++ b/apps/web/src/app/test/input/page.tsx @@ -1,9 +1,10 @@ 'use client' -import { InputSearch } from '@80000coding/ui' +import { InputComment, InputSearch } from '@80000coding/ui' import { useState } from 'react' export default function Page() { const [value, setValue] = useState('') + const [commentValue, setComment] = useState('') return (
@@ -20,6 +21,7 @@ export default function Page() { > */} +
) } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index a9705bb..c39f18b 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -6,6 +6,7 @@ export * from './chip' export * from './dropdown' export * from './icon' export * from './input' +export * from './input/input-comment' export * from './input/input-search' export * from './notification' export * from './toggle' diff --git a/packages/ui/src/input/input-comment/index.tsx b/packages/ui/src/input/input-comment/index.tsx new file mode 100644 index 0000000..9f7c8eb --- /dev/null +++ b/packages/ui/src/input/input-comment/index.tsx @@ -0,0 +1,62 @@ +import { Textarea as TextArea$1 } from '@nextui-org/react' +import { Dispatch, SetStateAction, useState } from 'react' + +export type InputCommentProps = { + value: string + setValue: Dispatch> + displayLength?: boolean + isDescription?: boolean + isCorrect?: boolean +} & Omit, 'classNames'> + +export function InputComment({ + value, + setValue, + isInvalid = false, + placeholder = '댓글을 입력해주세요', + isCorrect = false, + label, + ...rest +}: InputCommentProps) { + const [isFocus, setIsFocus] = useState(false) + + return ( + { + setIsFocus(e) + }} + /* styles */ + maxRows={3} + type='text' + radius='full' + labelPlacement='outside' + classNames={{ + label: ['mx-[12px]', 'body-2'], + input: ['!bg-white', 'text-black', 'placeholder:text-gray-300', 'body-3'], + innerWrapper: ['px-[0px]', 'py-[0px]'], + inputWrapper: [ + 'items-start', + '!bg-white', + 'border', + isInvalid ? 'border-red-warning' : isCorrect ? 'border-green' : 'border-gray-300', + isInvalid ? 'hover:border-red-warning' : 'hover:border-green', + isInvalid ? 'focus-within:border-red-warning' : 'focus-within:border-green', + '!cursor-text', + 'rounded-[20px]', + 'px-[20px]', + 'py-[13px]', + ], + }} + {...rest} + /> + ) +} From 0b402e36d5ce9b746191b99e087dccfafac5b164 Mon Sep 17 00:00:00 2001 From: sehyeon An Date: Mon, 16 Oct 2023 16:32:12 +0900 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=90=9B=20input=20search=20-=20onclear?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/input/input-search/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/input/input-search/index.tsx b/packages/ui/src/input/input-search/index.tsx index df1a593..14645f1 100644 --- a/packages/ui/src/input/input-search/index.tsx +++ b/packages/ui/src/input/input-search/index.tsx @@ -32,7 +32,7 @@ export function InputSearch({ value, setValue, isInvalid = false, isBackBtn = fa startContent={isBackBtn && } endContent={
- {value !== '' && isFocus && } + {value !== '' && }
} From 19aaf45610b0f3328a588fbd1ce39d3812b142ec Mon Sep 17 00:00:00 2001 From: sehyeon An Date: Mon, 16 Oct 2023 16:39:54 +0900 Subject: [PATCH 8/8] =?UTF-8?q?=E2=9C=A8=20input-comment=20box?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/input/input-comment/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/input/input-comment/index.tsx b/packages/ui/src/input/input-comment/index.tsx index 9f7c8eb..e662afc 100644 --- a/packages/ui/src/input/input-comment/index.tsx +++ b/packages/ui/src/input/input-comment/index.tsx @@ -36,13 +36,14 @@ export function InputComment({ }} /* styles */ maxRows={3} + minRows={1} type='text' radius='full' labelPlacement='outside' classNames={{ label: ['mx-[12px]', 'body-2'], - input: ['!bg-white', 'text-black', 'placeholder:text-gray-300', 'body-3'], - innerWrapper: ['px-[0px]', 'py-[0px]'], + input: ['!bg-white', 'text-black', 'placeholder:text-gray-300', 'body-3', 'px-[0px]', 'py-[0]'], + innerWrapper: [], inputWrapper: [ 'items-start', '!bg-white', @@ -53,7 +54,7 @@ export function InputComment({ '!cursor-text', 'rounded-[20px]', 'px-[20px]', - 'py-[13px]', + 'py-[10px]', ], }} {...rest}