From b27811694f5e7754d19580fb9dbd554f3a9d0290 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sat, 11 Feb 2023 04:43:31 +0900 Subject: [PATCH 001/233] =?UTF-8?q?chore:=20icon=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=93=A4=20=EC=B6=94=EA=B0=80(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/.gitkeep | 0 public/assets/icons/add.svg | 3 +++ public/assets/icons/alarm.svg | 3 +++ public/assets/icons/arrow_down.svg | 3 +++ public/assets/icons/arrow_left.svg | 3 +++ public/assets/icons/arrow_right.svg | 3 +++ public/assets/icons/arrow_up.svg | 3 +++ public/assets/icons/check.svg | 3 +++ public/assets/icons/check_box.svg | 3 +++ public/assets/icons/edit.svg | 3 +++ public/assets/icons/error.svg | 3 +++ public/assets/icons/exit.svg | 3 +++ public/assets/icons/face.svg | 3 +++ public/assets/icons/favorite.svg | 3 +++ public/assets/icons/friend.svg | 3 +++ public/assets/icons/lock.svg | 3 +++ public/assets/icons/more_horiz.svg | 3 +++ public/assets/icons/more_vert.svg | 3 +++ public/assets/icons/plus_circle.svg | 3 +++ public/assets/icons/privacy.svg | 3 +++ public/assets/icons/replay.svg | 3 +++ public/assets/icons/settings.svg | 3 +++ public/assets/icons/trash.svg | 3 +++ public/assets/icons/user.svg | 4 ++++ 24 files changed, 70 insertions(+) delete mode 100644 public/assets/.gitkeep create mode 100644 public/assets/icons/add.svg create mode 100644 public/assets/icons/alarm.svg create mode 100644 public/assets/icons/arrow_down.svg create mode 100644 public/assets/icons/arrow_left.svg create mode 100644 public/assets/icons/arrow_right.svg create mode 100644 public/assets/icons/arrow_up.svg create mode 100644 public/assets/icons/check.svg create mode 100644 public/assets/icons/check_box.svg create mode 100644 public/assets/icons/edit.svg create mode 100644 public/assets/icons/error.svg create mode 100644 public/assets/icons/exit.svg create mode 100644 public/assets/icons/face.svg create mode 100644 public/assets/icons/favorite.svg create mode 100644 public/assets/icons/friend.svg create mode 100644 public/assets/icons/lock.svg create mode 100644 public/assets/icons/more_horiz.svg create mode 100644 public/assets/icons/more_vert.svg create mode 100644 public/assets/icons/plus_circle.svg create mode 100644 public/assets/icons/privacy.svg create mode 100644 public/assets/icons/replay.svg create mode 100644 public/assets/icons/settings.svg create mode 100644 public/assets/icons/trash.svg create mode 100644 public/assets/icons/user.svg diff --git a/public/assets/.gitkeep b/public/assets/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/public/assets/icons/add.svg b/public/assets/icons/add.svg new file mode 100644 index 0000000..6f83752 --- /dev/null +++ b/public/assets/icons/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/alarm.svg b/public/assets/icons/alarm.svg new file mode 100644 index 0000000..acfb1e0 --- /dev/null +++ b/public/assets/icons/alarm.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/arrow_down.svg b/public/assets/icons/arrow_down.svg new file mode 100644 index 0000000..a9a84a5 --- /dev/null +++ b/public/assets/icons/arrow_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/arrow_left.svg b/public/assets/icons/arrow_left.svg new file mode 100644 index 0000000..cd7a9c8 --- /dev/null +++ b/public/assets/icons/arrow_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/arrow_right.svg b/public/assets/icons/arrow_right.svg new file mode 100644 index 0000000..9703154 --- /dev/null +++ b/public/assets/icons/arrow_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/arrow_up.svg b/public/assets/icons/arrow_up.svg new file mode 100644 index 0000000..901dc13 --- /dev/null +++ b/public/assets/icons/arrow_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/check.svg b/public/assets/icons/check.svg new file mode 100644 index 0000000..464d6b6 --- /dev/null +++ b/public/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/check_box.svg b/public/assets/icons/check_box.svg new file mode 100644 index 0000000..ecfbd6a --- /dev/null +++ b/public/assets/icons/check_box.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/edit.svg b/public/assets/icons/edit.svg new file mode 100644 index 0000000..8c2bc91 --- /dev/null +++ b/public/assets/icons/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/error.svg b/public/assets/icons/error.svg new file mode 100644 index 0000000..264afb4 --- /dev/null +++ b/public/assets/icons/error.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/exit.svg b/public/assets/icons/exit.svg new file mode 100644 index 0000000..2ba8104 --- /dev/null +++ b/public/assets/icons/exit.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/face.svg b/public/assets/icons/face.svg new file mode 100644 index 0000000..37d7ef6 --- /dev/null +++ b/public/assets/icons/face.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/favorite.svg b/public/assets/icons/favorite.svg new file mode 100644 index 0000000..4c11948 --- /dev/null +++ b/public/assets/icons/favorite.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/friend.svg b/public/assets/icons/friend.svg new file mode 100644 index 0000000..0210350 --- /dev/null +++ b/public/assets/icons/friend.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/lock.svg b/public/assets/icons/lock.svg new file mode 100644 index 0000000..7572b1e --- /dev/null +++ b/public/assets/icons/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/more_horiz.svg b/public/assets/icons/more_horiz.svg new file mode 100644 index 0000000..ffecbb1 --- /dev/null +++ b/public/assets/icons/more_horiz.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/more_vert.svg b/public/assets/icons/more_vert.svg new file mode 100644 index 0000000..916dd38 --- /dev/null +++ b/public/assets/icons/more_vert.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/plus_circle.svg b/public/assets/icons/plus_circle.svg new file mode 100644 index 0000000..3d43f0c --- /dev/null +++ b/public/assets/icons/plus_circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/privacy.svg b/public/assets/icons/privacy.svg new file mode 100644 index 0000000..58f5735 --- /dev/null +++ b/public/assets/icons/privacy.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/replay.svg b/public/assets/icons/replay.svg new file mode 100644 index 0000000..d91dd03 --- /dev/null +++ b/public/assets/icons/replay.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/settings.svg b/public/assets/icons/settings.svg new file mode 100644 index 0000000..c5ddaee --- /dev/null +++ b/public/assets/icons/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/trash.svg b/public/assets/icons/trash.svg new file mode 100644 index 0000000..af192c3 --- /dev/null +++ b/public/assets/icons/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/user.svg b/public/assets/icons/user.svg new file mode 100644 index 0000000..7a96d5a --- /dev/null +++ b/public/assets/icons/user.svg @@ -0,0 +1,4 @@ + + + + From d286b4f1d4f18b58df81cec51afcf9ccc9b8ab51 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 00:25:34 +0900 Subject: [PATCH 002/233] =?UTF-8?q?chore:=20clsx=20=EC=84=A4=EC=B9=98(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7742b0a..4307406 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "@next/font": "13.1.6", "axios": "^1.3.2", + "clsx": "^1.2.1", "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/yarn.lock b/yarn.lock index 06a0b0a..39489e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4583,7 +4583,7 @@ clsx@1.1.0: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702" integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA== -clsx@^1.0.4: +clsx@^1.0.4, clsx@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== From fa339356fab4b7bc42431f1eb4b89787bea1cb8b Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 01:08:31 +0900 Subject: [PATCH 003/233] =?UTF-8?q?chore:=20next=EC=99=80=20storybook?= =?UTF-8?q?=EC=97=90=20svg=20=EC=84=A4=EC=A0=95(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.js | 13 ++++ next.config.js | 8 +++ package.json | 1 + yarn.lock | 176 +++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 193 insertions(+), 5 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index a95d170..ecf7fca 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -17,6 +17,19 @@ module.exports = { ], framework: '@storybook/react', webpackFinal: async (config) => { + const fileLoaderRule = config.module.rules.find( + (rule) => rule.test && rule.test.test('.svg'), + ) + fileLoaderRule.exclude = /\.svg$/ + + config.module.rules.push({ + test: /\.svg$/, + enforce: 'pre', + loader: require.resolve('@svgr/webpack'), + }) + + config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'] + config.resolve.alias = { ...config.resolve.alias, '@': path.resolve(__dirname, '../src'), diff --git a/next.config.js b/next.config.js index a843cbe..873f34c 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,14 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + webpack: (config) => { + config.module.rules.push({ + test: /\.svg$/i, + issuer: /\.[jt]sx?$/, + use: ['@svgr/webpack'], + }) + return config + }, } module.exports = nextConfig diff --git a/package.json b/package.json index 4307406..5ed91da 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@storybook/manager-webpack5": "^6.5.16", "@storybook/react": "^6.5.16", "@storybook/testing-library": "^0.0.13", + "@svgr/webpack": "^6.5.1", "@types/node": "^18.11.19", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", diff --git a/yarn.lock b/yarn.lock index 39489e6..eb5b833 100644 --- a/yarn.lock +++ b/yarn.lock @@ -44,7 +44,7 @@ semver "^5.4.1" source-map "^0.5.0" -"@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.20.12", "@babel/core@^7.7.5": +"@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.19.6", "@babel/core@^7.20.12", "@babel/core@^7.7.5": version "7.20.12" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d" integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg== @@ -824,6 +824,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" +"@babel/plugin-transform-react-constant-elements@^7.18.12": + version "7.20.2" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz#3f02c784e0b711970d7d8ccc96c4359d64e27ac7" + integrity sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g== + dependencies: + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/plugin-transform-react-display-name@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415" @@ -932,7 +939,7 @@ "@babel/helper-create-regexp-features-plugin" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" -"@babel/preset-env@^7.12.11": +"@babel/preset-env@^7.12.11", "@babel/preset-env@^7.19.4": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506" integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg== @@ -1033,7 +1040,7 @@ "@babel/types" "^7.4.4" esutils "^2.0.2" -"@babel/preset-react@^7.12.10": +"@babel/preset-react@^7.12.10", "@babel/preset-react@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.18.6.tgz#979f76d6277048dc19094c217b507f3ad517dd2d" integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg== @@ -1045,7 +1052,7 @@ "@babel/plugin-transform-react-jsx-development" "^7.18.6" "@babel/plugin-transform-react-pure-annotations" "^7.18.6" -"@babel/preset-typescript@^7.12.7": +"@babel/preset-typescript@^7.12.7", "@babel/preset-typescript@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399" integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ== @@ -2671,6 +2678,112 @@ regenerator-runtime "^0.13.7" resolve-from "^5.0.0" +"@svgr/babel-plugin-add-jsx-attribute@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba" + integrity sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ== + +"@svgr/babel-plugin-remove-jsx-attribute@*": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.5.0.tgz#652bfd4ed0a0699843585cda96faeb09d6e1306e" + integrity sha512-8zYdkym7qNyfXpWvu4yq46k41pyNM9SOstoWhKlm+IfdCE1DdnRKeMUPsWIEO/DEkaWxJ8T9esNdG3QwQ93jBA== + +"@svgr/babel-plugin-remove-jsx-empty-expression@*": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.5.0.tgz#4b78994ab7d39032c729903fc2dd5c0fa4565cb8" + integrity sha512-NFdxMq3xA42Kb1UbzCVxplUc0iqSyM9X8kopImvFnB+uSDdzIHOdbs1op8ofAvVRtbg4oZiyRl3fTYeKcOe9Iw== + +"@svgr/babel-plugin-replace-jsx-attribute-value@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz#fb9d22ea26d2bc5e0a44b763d4c46d5d3f596c60" + integrity sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg== + +"@svgr/babel-plugin-svg-dynamic-title@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz#01b2024a2b53ffaa5efceaa0bf3e1d5a4c520ce4" + integrity sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw== + +"@svgr/babel-plugin-svg-em-dimensions@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz#dd3fa9f5b24eb4f93bcf121c3d40ff5facecb217" + integrity sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA== + +"@svgr/babel-plugin-transform-react-native-svg@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz#1d8e945a03df65b601551097d8f5e34351d3d305" + integrity sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg== + +"@svgr/babel-plugin-transform-svg-component@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz#48620b9e590e25ff95a80f811544218d27f8a250" + integrity sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ== + +"@svgr/babel-preset@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.5.1.tgz#b90de7979c8843c5c580c7e2ec71f024b49eb828" + integrity sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw== + dependencies: + "@svgr/babel-plugin-add-jsx-attribute" "^6.5.1" + "@svgr/babel-plugin-remove-jsx-attribute" "*" + "@svgr/babel-plugin-remove-jsx-empty-expression" "*" + "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.5.1" + "@svgr/babel-plugin-svg-dynamic-title" "^6.5.1" + "@svgr/babel-plugin-svg-em-dimensions" "^6.5.1" + "@svgr/babel-plugin-transform-react-native-svg" "^6.5.1" + "@svgr/babel-plugin-transform-svg-component" "^6.5.1" + +"@svgr/core@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.5.1.tgz#d3e8aa9dbe3fbd747f9ee4282c1c77a27410488a" + integrity sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw== + dependencies: + "@babel/core" "^7.19.6" + "@svgr/babel-preset" "^6.5.1" + "@svgr/plugin-jsx" "^6.5.1" + camelcase "^6.2.0" + cosmiconfig "^7.0.1" + +"@svgr/hast-util-to-babel-ast@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz#81800bd09b5bcdb968bf6ee7c863d2288fdb80d2" + integrity sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw== + dependencies: + "@babel/types" "^7.20.0" + entities "^4.4.0" + +"@svgr/plugin-jsx@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz#0e30d1878e771ca753c94e69581c7971542a7072" + integrity sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw== + dependencies: + "@babel/core" "^7.19.6" + "@svgr/babel-preset" "^6.5.1" + "@svgr/hast-util-to-babel-ast" "^6.5.1" + svg-parser "^2.0.4" + +"@svgr/plugin-svgo@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-6.5.1.tgz#0f91910e988fc0b842f88e0960c2862e022abe84" + integrity sha512-omvZKf8ixP9z6GWgwbtmP9qQMPX4ODXi+wzbVZgomNFsUIlHA1sf4fThdwTWSsZGgvGAG6yE+b/F5gWUkcZ/iQ== + dependencies: + cosmiconfig "^7.0.1" + deepmerge "^4.2.2" + svgo "^2.8.0" + +"@svgr/webpack@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-6.5.1.tgz#ecf027814fc1cb2decc29dc92f39c3cf691e40e8" + integrity sha512-cQ/AsnBkXPkEK8cLbv4Dm7JGXq2XrumKnL1dRpJD9rIO2fTIlJI9a1uCciYG1F2aUsox/hJQyNGbt3soDxSRkA== + dependencies: + "@babel/core" "^7.19.6" + "@babel/plugin-transform-react-constant-elements" "^7.18.12" + "@babel/preset-env" "^7.19.4" + "@babel/preset-react" "^7.18.6" + "@babel/preset-typescript" "^7.18.6" + "@svgr/core" "^6.5.1" + "@svgr/plugin-jsx" "^6.5.1" + "@svgr/plugin-svgo" "^6.5.1" + "@swc/helpers@0.4.14": version "0.4.14" resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" @@ -2699,6 +2812,11 @@ dependencies: "@babel/runtime" "^7.12.5" +"@trysound/sax@0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" + integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== + "@tsconfig/node10@^1.0.7": version "1.0.9" resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2" @@ -4667,6 +4785,11 @@ commander@^6.2.1: resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== +commander@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" + integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== + commander@^8.3.0: version "8.3.0" resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" @@ -4861,7 +4984,7 @@ cosmiconfig@^6.0.0: path-type "^4.0.0" yaml "^1.7.2" -cosmiconfig@^7.0.0: +cosmiconfig@^7.0.0, cosmiconfig@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6" integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA== @@ -5026,6 +5149,14 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" +css-tree@^1.1.2, css-tree@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" + integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q== + dependencies: + mdn-data "2.0.14" + source-map "^0.6.1" + css-what@^6.0.1: version "6.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" @@ -5036,6 +5167,13 @@ cssesc@^3.0.0: resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== +csso@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529" + integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA== + dependencies: + css-tree "^1.1.2" + csstype@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" @@ -5473,6 +5611,11 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== +entities@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174" + integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA== + errno@^0.1.3, errno@~0.1.7: version "0.1.8" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f" @@ -8228,6 +8371,11 @@ mdast-util-to-string@^1.0.0: resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527" integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== +mdn-data@2.0.14: + version "2.0.14" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" + integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== + mdurl@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" @@ -10972,6 +11120,24 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +svg-parser@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5" + integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ== + +svgo@^2.8.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24" + integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg== + dependencies: + "@trysound/sax" "0.2.0" + commander "^7.2.0" + css-select "^4.1.3" + css-tree "^1.1.3" + csso "^4.2.0" + picocolors "^1.0.0" + stable "^0.1.8" + symbol.prototype.description@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/symbol.prototype.description/-/symbol.prototype.description-1.0.5.tgz#d30e01263b6020fbbd2d2884a6276ce4d49ab568" From ebc011b3cf923dfa6c6b7219ab5a8961878866da Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 01:27:05 +0900 Subject: [PATCH 004/233] =?UTF-8?q?feat:=20icons=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Icons/AddIcon.tsx | 24 ++++++++++++++++ src/components/Icons/AlarmIcon.tsx | 24 ++++++++++++++++ src/components/Icons/ArrowDownIcon.tsx | 24 ++++++++++++++++ src/components/Icons/ArrowLeftIcon.tsx | 24 ++++++++++++++++ src/components/Icons/ArrowRightIcon.tsx | 24 ++++++++++++++++ src/components/Icons/ArrowUpIcon.tsx | 24 ++++++++++++++++ src/components/Icons/CheckIcon.tsx | 24 ++++++++++++++++ src/components/Icons/CheckboxIcon.tsx | 24 ++++++++++++++++ src/components/Icons/EditIcon.tsx | 24 ++++++++++++++++ src/components/Icons/ErrorIcon.tsx | 24 ++++++++++++++++ src/components/Icons/ExitIcon.tsx | 24 ++++++++++++++++ src/components/Icons/FaceIcon.tsx | 24 ++++++++++++++++ src/components/Icons/FavoriteIcon.tsx | 24 ++++++++++++++++ src/components/Icons/FriendIcon.tsx | 24 ++++++++++++++++ src/components/Icons/LockIcon.tsx | 24 ++++++++++++++++ src/components/Icons/MoreHorizontalIcon.tsx | 24 ++++++++++++++++ src/components/Icons/MoreVerticalIcon.tsx | 24 ++++++++++++++++ src/components/Icons/PlusCircleIcon.tsx | 24 ++++++++++++++++ src/components/Icons/PrivacyIcon.tsx | 24 ++++++++++++++++ src/components/Icons/ReplayIcon.tsx | 24 ++++++++++++++++ src/components/Icons/SettingsIcon.tsx | 24 ++++++++++++++++ src/components/Icons/TrashIcon.tsx | 24 ++++++++++++++++ src/components/Icons/UserIcon.tsx | 24 ++++++++++++++++ src/components/Icons/index.stories.tsx | 32 +++++++++++++++++++++ src/components/Icons/index.ts | 23 +++++++++++++++ src/types/.gitkeep | 0 src/types/svg.ts | 3 ++ 27 files changed, 610 insertions(+) create mode 100644 src/components/Icons/AddIcon.tsx create mode 100644 src/components/Icons/AlarmIcon.tsx create mode 100644 src/components/Icons/ArrowDownIcon.tsx create mode 100644 src/components/Icons/ArrowLeftIcon.tsx create mode 100644 src/components/Icons/ArrowRightIcon.tsx create mode 100644 src/components/Icons/ArrowUpIcon.tsx create mode 100644 src/components/Icons/CheckIcon.tsx create mode 100644 src/components/Icons/CheckboxIcon.tsx create mode 100644 src/components/Icons/EditIcon.tsx create mode 100644 src/components/Icons/ErrorIcon.tsx create mode 100644 src/components/Icons/ExitIcon.tsx create mode 100644 src/components/Icons/FaceIcon.tsx create mode 100644 src/components/Icons/FavoriteIcon.tsx create mode 100644 src/components/Icons/FriendIcon.tsx create mode 100644 src/components/Icons/LockIcon.tsx create mode 100644 src/components/Icons/MoreHorizontalIcon.tsx create mode 100644 src/components/Icons/MoreVerticalIcon.tsx create mode 100644 src/components/Icons/PlusCircleIcon.tsx create mode 100644 src/components/Icons/PrivacyIcon.tsx create mode 100644 src/components/Icons/ReplayIcon.tsx create mode 100644 src/components/Icons/SettingsIcon.tsx create mode 100644 src/components/Icons/TrashIcon.tsx create mode 100644 src/components/Icons/UserIcon.tsx create mode 100644 src/components/Icons/index.stories.tsx create mode 100644 src/components/Icons/index.ts delete mode 100644 src/types/.gitkeep create mode 100644 src/types/svg.ts diff --git a/src/components/Icons/AddIcon.tsx b/src/components/Icons/AddIcon.tsx new file mode 100644 index 0000000..449d595 --- /dev/null +++ b/src/components/Icons/AddIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Add from 'public/assets/icons/add.svg' +import { SvgProps } from '@/types/svg' + +const AddIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default AddIcon diff --git a/src/components/Icons/AlarmIcon.tsx b/src/components/Icons/AlarmIcon.tsx new file mode 100644 index 0000000..be7a10c --- /dev/null +++ b/src/components/Icons/AlarmIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Alarm from 'public/assets/icons/alarm.svg' +import { SvgProps } from '@/types/svg' + +const AlarmIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default AlarmIcon diff --git a/src/components/Icons/ArrowDownIcon.tsx b/src/components/Icons/ArrowDownIcon.tsx new file mode 100644 index 0000000..8a10222 --- /dev/null +++ b/src/components/Icons/ArrowDownIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import ArrowDown from 'public/assets/icons/arrow_down.svg' +import { SvgProps } from '@/types/svg' + +const ArrowDownIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default ArrowDownIcon diff --git a/src/components/Icons/ArrowLeftIcon.tsx b/src/components/Icons/ArrowLeftIcon.tsx new file mode 100644 index 0000000..decb7fc --- /dev/null +++ b/src/components/Icons/ArrowLeftIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import ArrowLeft from 'public/assets/icons/arrow_left.svg' +import { SvgProps } from '@/types/svg' + +const ArrowLeftIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default ArrowLeftIcon diff --git a/src/components/Icons/ArrowRightIcon.tsx b/src/components/Icons/ArrowRightIcon.tsx new file mode 100644 index 0000000..11f3b61 --- /dev/null +++ b/src/components/Icons/ArrowRightIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import ArrowRight from 'public/assets/icons/arrow_right.svg' +import { SvgProps } from '@/types/svg' + +const ArrowRightIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default ArrowRightIcon diff --git a/src/components/Icons/ArrowUpIcon.tsx b/src/components/Icons/ArrowUpIcon.tsx new file mode 100644 index 0000000..1606afa --- /dev/null +++ b/src/components/Icons/ArrowUpIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import ArrowUp from 'public/assets/icons/arrow_up.svg' +import { SvgProps } from '@/types/svg' + +const ArrowUpIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default ArrowUpIcon diff --git a/src/components/Icons/CheckIcon.tsx b/src/components/Icons/CheckIcon.tsx new file mode 100644 index 0000000..0dccdc6 --- /dev/null +++ b/src/components/Icons/CheckIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Check from 'public/assets/icons/check.svg' +import { SvgProps } from '@/types/svg' + +const CheckIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default CheckIcon diff --git a/src/components/Icons/CheckboxIcon.tsx b/src/components/Icons/CheckboxIcon.tsx new file mode 100644 index 0000000..68de367 --- /dev/null +++ b/src/components/Icons/CheckboxIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import CheckBox from 'public/assets/icons/check_box.svg' +import { SvgProps } from '@/types/svg' + +const CheckboxIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default CheckboxIcon diff --git a/src/components/Icons/EditIcon.tsx b/src/components/Icons/EditIcon.tsx new file mode 100644 index 0000000..245c317 --- /dev/null +++ b/src/components/Icons/EditIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Edit from 'public/assets/icons/edit.svg' +import { SvgProps } from '@/types/svg' + +const EditIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default EditIcon diff --git a/src/components/Icons/ErrorIcon.tsx b/src/components/Icons/ErrorIcon.tsx new file mode 100644 index 0000000..cb84e2f --- /dev/null +++ b/src/components/Icons/ErrorIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Error from 'public/assets/icons/error.svg' +import { SvgProps } from '@/types/svg' + +const ErrorIcon = ({ + alt = '', + className = '', + width = 20, + height = 20, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default ErrorIcon diff --git a/src/components/Icons/ExitIcon.tsx b/src/components/Icons/ExitIcon.tsx new file mode 100644 index 0000000..56176aa --- /dev/null +++ b/src/components/Icons/ExitIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Exit from 'public/assets/icons/exit.svg' +import { SvgProps } from '@/types/svg' + +const ExitIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default ExitIcon diff --git a/src/components/Icons/FaceIcon.tsx b/src/components/Icons/FaceIcon.tsx new file mode 100644 index 0000000..016f8b0 --- /dev/null +++ b/src/components/Icons/FaceIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Face from 'public/assets/icons/face.svg' +import { SvgProps } from '@/types/svg' + +const FaceIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default FaceIcon diff --git a/src/components/Icons/FavoriteIcon.tsx b/src/components/Icons/FavoriteIcon.tsx new file mode 100644 index 0000000..efaf9d0 --- /dev/null +++ b/src/components/Icons/FavoriteIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Favorite from 'public/assets/icons/favorite.svg' +import { SvgProps } from '@/types/svg' + +const FavoriteIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default FavoriteIcon diff --git a/src/components/Icons/FriendIcon.tsx b/src/components/Icons/FriendIcon.tsx new file mode 100644 index 0000000..d19800d --- /dev/null +++ b/src/components/Icons/FriendIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Friend from 'public/assets/icons/friend.svg' +import { SvgProps } from '@/types/svg' + +const FriendIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default FriendIcon diff --git a/src/components/Icons/LockIcon.tsx b/src/components/Icons/LockIcon.tsx new file mode 100644 index 0000000..9e8162c --- /dev/null +++ b/src/components/Icons/LockIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Lock from 'public/assets/icons/lock.svg' +import { SvgProps } from '@/types/svg' + +const LockIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default LockIcon diff --git a/src/components/Icons/MoreHorizontalIcon.tsx b/src/components/Icons/MoreHorizontalIcon.tsx new file mode 100644 index 0000000..6e45cb6 --- /dev/null +++ b/src/components/Icons/MoreHorizontalIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import MoreHorizontal from 'public/assets/icons/more_horiz.svg' +import { SvgProps } from '@/types/svg' + +const MoreHorizontalIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default MoreHorizontalIcon diff --git a/src/components/Icons/MoreVerticalIcon.tsx b/src/components/Icons/MoreVerticalIcon.tsx new file mode 100644 index 0000000..f12ca78 --- /dev/null +++ b/src/components/Icons/MoreVerticalIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import MoreVertical from 'public/assets/icons/more_vert.svg' +import { SvgProps } from '@/types/svg' + +const MoreVerticalIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default MoreVerticalIcon diff --git a/src/components/Icons/PlusCircleIcon.tsx b/src/components/Icons/PlusCircleIcon.tsx new file mode 100644 index 0000000..22d7b32 --- /dev/null +++ b/src/components/Icons/PlusCircleIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import PlusCircle from 'public/assets/icons/plus_circle.svg' +import { SvgProps } from '@/types/svg' + +const PlusCircleIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default PlusCircleIcon diff --git a/src/components/Icons/PrivacyIcon.tsx b/src/components/Icons/PrivacyIcon.tsx new file mode 100644 index 0000000..3735a02 --- /dev/null +++ b/src/components/Icons/PrivacyIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Privacy from 'public/assets/icons/privacy.svg' +import { SvgProps } from '@/types/svg' + +const PrivacyIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default PrivacyIcon diff --git a/src/components/Icons/ReplayIcon.tsx b/src/components/Icons/ReplayIcon.tsx new file mode 100644 index 0000000..048863e --- /dev/null +++ b/src/components/Icons/ReplayIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Replay from 'public/assets/icons/replay.svg' +import { SvgProps } from '@/types/svg' + +const ReplayIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default ReplayIcon diff --git a/src/components/Icons/SettingsIcon.tsx b/src/components/Icons/SettingsIcon.tsx new file mode 100644 index 0000000..16d510b --- /dev/null +++ b/src/components/Icons/SettingsIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Settings from 'public/assets/icons/settings.svg' +import { SvgProps } from '@/types/svg' + +const SettingsIcon = ({ + alt = '', + className = '', + width = 20, + height = 20, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default SettingsIcon diff --git a/src/components/Icons/TrashIcon.tsx b/src/components/Icons/TrashIcon.tsx new file mode 100644 index 0000000..1ca526f --- /dev/null +++ b/src/components/Icons/TrashIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Trash from 'public/assets/icons/trash.svg' +import { SvgProps } from '@/types/svg' + +const TrashIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default TrashIcon diff --git a/src/components/Icons/UserIcon.tsx b/src/components/Icons/UserIcon.tsx new file mode 100644 index 0000000..2fa0078 --- /dev/null +++ b/src/components/Icons/UserIcon.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import User from 'public/assets/icons/user.svg' +import { SvgProps } from '@/types/svg' + +const UserIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default UserIcon diff --git a/src/components/Icons/index.stories.tsx b/src/components/Icons/index.stories.tsx new file mode 100644 index 0000000..25d6b84 --- /dev/null +++ b/src/components/Icons/index.stories.tsx @@ -0,0 +1,32 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import * as Icons from './index' +import { SvgProps } from '@/types/svg' + +type IconComponent = ({ ...rest }: SvgProps) => JSX.Element + +export default { + title: 'Components/Icons', +} as ComponentMeta + +const Template: ComponentStory = () => { + return ( +
+ {Object.keys(Icons).map((key, idx) => { + const Icon = Icons[key as keyof typeof Icons] + return ( +
+
+ +
+

{key}

+
+ ) + })} +
+ ) +} + +export const Basic = Template.bind({}) diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts new file mode 100644 index 0000000..36b01c7 --- /dev/null +++ b/src/components/Icons/index.ts @@ -0,0 +1,23 @@ +export { default as AddIcon } from './AddIcon' +export { default as AlarmIcon } from './AlarmIcon' +export { default as ArrowDownIcon } from './ArrowDownIcon' +export { default as ArrowLeftIcon } from './ArrowLeftIcon' +export { default as ArrowRightIcon } from './ArrowRightIcon' +export { default as ArrowUpIcon } from './ArrowUpIcon' +export { default as CheckIcon } from './CheckIcon' +export { default as CheckboxIcon } from './CheckboxIcon' +export { default as EditIcon } from './EditIcon' +export { default as ErrorIcon } from './ErrorIcon' +export { default as ExitIcon } from './ExitIcon' +export { default as FaceIcon } from './FaceIcon' +export { default as FavoriteIcon } from './FavoriteIcon' +export { default as FriendIcon } from './FriendIcon' +export { default as LockIcon } from './LockIcon' +export { default as MoreHorizIcontal } from './MoreHorizontalIcon' +export { default as MoreVerticalIcon } from './MoreVerticalIcon' +export { default as PlusCircleIcon } from './PlusCircleIcon' +export { default as PrivacyIcon } from './PrivacyIcon' +export { default as ReplayIcon } from './ReplayIcon' +export { default as SettingsIcon } from './SettingsIcon' +export { default as TrashIcon } from './TrashIcon' +export { default as UserIcon } from './UserIcon' diff --git a/src/types/.gitkeep b/src/types/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/types/svg.ts b/src/types/svg.ts new file mode 100644 index 0000000..73ea299 --- /dev/null +++ b/src/types/svg.ts @@ -0,0 +1,3 @@ +export interface SvgProps extends React.SVGAttributes { + alt?: string +} From a2cbf7831f32471829c25abdc48666cbf05c2d53 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 01:32:13 +0900 Subject: [PATCH 005/233] =?UTF-8?q?chore:=20tailwind=EC=97=90=20gray=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EB=B0=8F=20borderRadius=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 65f3176..e50260c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,12 +3,23 @@ module.exports = { content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { colors: { + white: '#FFFFFF', black: '#333333', red: '#FF7154', orange: '#FFB673', skyblue: '#7CCAE2', blue: '#5B9DFF', purple: '#7E85FF', + gray: { + 100: '#F2F3F5', + 200: '#999999', + 300: '#767676', + }, + }, + borderRadius: { + sm: '8px', + md: '12px', + lg: '14px', }, extend: { fontSize: { From 5a1e0911efbe317611919e8269c2dc1ce53ea8da Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 01:47:09 +0900 Subject: [PATCH 006/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20Button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/index.stories.tsx | 20 +++++++++- src/components/Button/index.tsx | 53 ++++++++++++++++++++++++- 2 files changed, 69 insertions(+), 4 deletions(-) diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx index cd0fbe2..f45a6c0 100644 --- a/src/components/Button/index.stories.tsx +++ b/src/components/Button/index.stories.tsx @@ -1,11 +1,27 @@ import { ComponentMeta, ComponentStory } from '@storybook/react' -import Button from '@/components/Button' +import Button, { sizeOptions, colorOptions } from '.' export default { title: 'components/Button', components: Button, + argTypes: { + size: { + options: sizeOptions, + control: { type: 'radio' }, + }, + color: { + options: colorOptions, + control: { type: 'radio' }, + }, + }, } as ComponentMeta -const Template: ComponentStory = () => +import clsx from 'clsx' +import { PropsWithChildren } from 'react' + +export const colorOptions = ['white', 'gray', 'black'] as const +export const sizeOptions = ['sm', 'md'] as const +interface Props extends React.ComponentPropsWithoutRef<'button'> { + size?: (typeof sizeOptions)[number] + color?: (typeof colorOptions)[number] + disabled?: boolean +} + +const COLOR_CONFIG = { + white: 'bg-white text-gray-300', + gray: 'bg-gray-100 text-gray-300', + black: 'bg-black text-white', +} + +const SIZE_CONFIG = { + sm: 'px-3 py-1 w-fit rounded-sm', + md: 'px-8 py-[13px] w-full rounded-lg', +} + +const Button = ({ + type = 'button', + color = 'black', + disabled = false, + children, + size = 'md', + ...rest +}: PropsWithChildren) => { + const { onClick } = rest + + return ( + + ) } export default Button From 573bacc4242b2fddd3d1c374508dacb257d63e30 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 01:58:02 +0900 Subject: [PATCH 007/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20ToggleButt?= =?UTF-8?q?on=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(?= =?UTF-8?q?#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ToggleButton/index.stories.tsx | 17 +++++ src/components/ToggleButton/index.tsx | 64 +++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 src/components/ToggleButton/index.stories.tsx create mode 100644 src/components/ToggleButton/index.tsx diff --git a/src/components/ToggleButton/index.stories.tsx b/src/components/ToggleButton/index.stories.tsx new file mode 100644 index 0000000..d851baa --- /dev/null +++ b/src/components/ToggleButton/index.stories.tsx @@ -0,0 +1,17 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import ToggleButton from '.' + +export default { + title: 'components/ToggleButton', + components: ToggleButton, +} as ComponentMeta + +const Template: ComponentStory = (args) => ( + +) + +export const Basic = Template.bind({}) +Basic.args = { + children: '팔로우', + value: 'follow', +} diff --git a/src/components/ToggleButton/index.tsx b/src/components/ToggleButton/index.tsx new file mode 100644 index 0000000..d22a523 --- /dev/null +++ b/src/components/ToggleButton/index.tsx @@ -0,0 +1,64 @@ +import React, { PropsWithChildren } from 'react' +import clsx from 'clsx' + +export type OnClick = ({ + selected, + value, +}: { + selected: boolean + value: string +}) => void + +interface Props { + name: string + value: string + defaultChecked?: boolean + onClick?: OnClick +} + +const ToggleButton = ({ + name, + value, + defaultChecked = false, + children, + onClick, +}: PropsWithChildren) => { + const handleChange = (e: React.ChangeEvent) => { + const { checked, value } = e.target + onClick?.({ selected: checked, value }) + } + + return ( + + ) +} + +export default ToggleButton From aeeef39ad4450dc4f67e870db38c1093bcceaf57 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 04:00:31 +0900 Subject: [PATCH 008/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20Header=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.stories.tsx | 29 ++++++++ src/components/Header/index.tsx | 93 +++++++++++++++++++++++++ 2 files changed, 122 insertions(+) create mode 100644 src/components/Header/index.stories.tsx create mode 100644 src/components/Header/index.tsx diff --git a/src/components/Header/index.stories.tsx b/src/components/Header/index.stories.tsx new file mode 100644 index 0000000..d181c3f --- /dev/null +++ b/src/components/Header/index.stories.tsx @@ -0,0 +1,29 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import Header, { buttonOptions } from '.' + +export default { + title: 'components/Header', + components: Header, + parameters: { + layout: 'fullscreen', + }, + argTypes: { + leftButton: { + options: buttonOptions, + control: { type: 'radio' }, + }, + rightButton: { + options: buttonOptions, + control: { type: 'radio' }, + }, + }, +} as ComponentMeta + +const Template: ComponentStory = (args) =>
+ +export const Basic = Template.bind({}) +Basic.args = { + title: '상단 타이틀', + leftButton: 'back', + rightButton: 'more', +} diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..d713854 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,93 @@ +import clsx from 'clsx' +import { useRouter } from 'next/router' +import { ArrowLeftIcon, ExitIcon, MoreVerticalIcon } from '@/components/Icons' +import { PropsWithChildren } from 'react' + +export const buttonOptions = ['none', 'exit', 'more', 'back'] as const +type HeaderButton = (typeof buttonOptions)[number] + +interface Props { + title: string + leftButton?: HeaderButton + rightButton?: HeaderButton +} + +const HeaderButton = ({ type }: { type: HeaderButton }) => { + if (type === 'exit') return + if (type === 'more') return + if (type === 'back') return + else return null +} + +const Header = ({ + title, + leftButton = 'back', + rightButton = 'none', +}: Props) => { + return ( +
+
+ +
+

+ {title} +

+
+ +
+
+ ) +} + +const ButtonWrapper = ({ + onClick, + children, +}: PropsWithChildren<{ onClick?: () => void }>) => { + return ( + + ) +} + +const BackButton = () => { + const { back } = useRouter() + return ( + + + + ) +} + +const MoreButton = () => { + return ( + {}}> + + + ) +} + +const ExitButton = () => { + return ( + {}}> + + + ) +} + +export default Header From 0187cf1931c8a9d7c234476a25df84926599ab6d Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 04:01:18 +0900 Subject: [PATCH 009/233] =?UTF-8?q?chore:=20storybook=20router=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0=EC=9D=84=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?addon=20=EC=84=A4=EC=A0=95(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.js | 1 + .storybook/preview.js | 4 ++++ package.json | 1 + yarn.lock | 12 ++++++++++++ 4 files changed, 18 insertions(+) diff --git a/.storybook/main.js b/.storybook/main.js index ecf7fca..832d9cb 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -6,6 +6,7 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', + 'storybook-addon-next-router', { name: '@storybook/addon-postcss', options: { diff --git a/.storybook/preview.js b/.storybook/preview.js index f2d161d..e2da74b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,5 @@ import '../src/styles/globals.css' +import { RouterContext } from 'next/dist/shared/lib/router-context' export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, @@ -8,4 +9,7 @@ export const parameters = { date: /Date$/, }, }, + nextRouter: { + Provider: RouterContext.Provider, + }, } diff --git a/package.json b/package.json index 5ed91da..56b4b0b 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0", + "storybook-addon-next-router": "^4.0.2", "zustand": "^4.3.2" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index eb5b833..71c62b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10878,6 +10878,13 @@ store2@^2.12.0: resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068" integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w== +storybook-addon-next-router@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/storybook-addon-next-router/-/storybook-addon-next-router-4.0.2.tgz#fb45a4b7d9c4f92cd63b509f4d378c51164aca7d" + integrity sha512-0rjGAl7HziW4ecDq+VU03H1dwkw5f6phqA+PMquPzdowNVl29ejVwVadLMGlovG6x2snaxMGxtySR2c5bwegSw== + dependencies: + tslib "2.4.0" + stream-browserify@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b" @@ -11461,6 +11468,11 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tslib@^1.8.1, tslib@^1.9.3: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" From 64778592c37174f76e94ebfeb0066ce99decf002 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 04:04:46 +0900 Subject: [PATCH 010/233] =?UTF-8?q?chore:=20=ED=99=88=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Icons/index.ts | 2 +- src/containers/Home/index.tsx | 5 +++++ src/pages/home/index.tsx | 5 +++++ src/pages/index.tsx | 6 +++--- 4 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 src/containers/Home/index.tsx create mode 100644 src/pages/home/index.tsx diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts index 36b01c7..2333cd2 100644 --- a/src/components/Icons/index.ts +++ b/src/components/Icons/index.ts @@ -13,7 +13,7 @@ export { default as FaceIcon } from './FaceIcon' export { default as FavoriteIcon } from './FavoriteIcon' export { default as FriendIcon } from './FriendIcon' export { default as LockIcon } from './LockIcon' -export { default as MoreHorizIcontal } from './MoreHorizontalIcon' +export { default as MoreHorizontalIcon } from './MoreHorizontalIcon' export { default as MoreVerticalIcon } from './MoreVerticalIcon' export { default as PlusCircleIcon } from './PlusCircleIcon' export { default as PrivacyIcon } from './PrivacyIcon' diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx new file mode 100644 index 0000000..83ca458 --- /dev/null +++ b/src/containers/Home/index.tsx @@ -0,0 +1,5 @@ +const Home = () => { + return
Home
+} + +export default Home diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx new file mode 100644 index 0000000..ab33bf1 --- /dev/null +++ b/src/pages/home/index.tsx @@ -0,0 +1,5 @@ +import HomeContainer from '@/containers/Home' + +export default function Home() { + return +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 0cf1c9f..a2998c0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,5 @@ -import Main from '@/containers/Main' +import MainContainer from '@/containers/Main' -export default function Home() { - return
+export default function Main() { + return } From 717d819f4749d48f32bd1cc36961a6ee9af93a6b Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 13:55:45 +0900 Subject: [PATCH 011/233] =?UTF-8?q?chore:=20dev=20=EB=B8=8C=EB=9E=9C?= =?UTF-8?q?=EC=B9=98=EB=AA=85=20develop=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/build.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 1468ea8..3f9f5d1 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -2,9 +2,9 @@ name: Build Test on: push: - branches: [main, dev] + branches: [main, develop] pull_request: - branches: [main, dev] + branches: [main, develop] jobs: build: From 5ff9ec7d4d84036d58e94f69b16266c2be6b235b Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 13:57:07 +0900 Subject: [PATCH 012/233] =?UTF-8?q?chore:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20HeaderButton=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EB=AA=85=20=EB=B3=80=EA=B2=BD(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index d713854..fa41287 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -4,15 +4,15 @@ import { ArrowLeftIcon, ExitIcon, MoreVerticalIcon } from '@/components/Icons' import { PropsWithChildren } from 'react' export const buttonOptions = ['none', 'exit', 'more', 'back'] as const -type HeaderButton = (typeof buttonOptions)[number] +type ButtonType = (typeof buttonOptions)[number] interface Props { title: string - leftButton?: HeaderButton - rightButton?: HeaderButton + leftButton?: ButtonType + rightButton?: ButtonType } -const HeaderButton = ({ type }: { type: HeaderButton }) => { +const HeaderButton = ({ type }: { type: ButtonType }) => { if (type === 'exit') return if (type === 'more') return if (type === 'back') return From 0fcfc54e5516d8e624c1c43462fa0e671ea50fac Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 17:45:53 +0900 Subject: [PATCH 013/233] =?UTF-8?q?chore:=20storybook=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20import=20=EB=B0=A9?= =?UTF-8?q?=EC=8B=9D=20=EB=B3=80=EA=B2=BD(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/index.stories.tsx | 2 +- src/components/Header/index.stories.tsx | 2 +- src/components/ToggleButton/index.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx index f45a6c0..e04320b 100644 --- a/src/components/Button/index.stories.tsx +++ b/src/components/Button/index.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react' -import Button, { sizeOptions, colorOptions } from '.' +import Button, { sizeOptions, colorOptions } from '@/components/Button' export default { title: 'components/Button', diff --git a/src/components/Header/index.stories.tsx b/src/components/Header/index.stories.tsx index d181c3f..24e3a7f 100644 --- a/src/components/Header/index.stories.tsx +++ b/src/components/Header/index.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react' -import Header, { buttonOptions } from '.' +import Header, { buttonOptions } from '@/components/Header' export default { title: 'components/Header', diff --git a/src/components/ToggleButton/index.stories.tsx b/src/components/ToggleButton/index.stories.tsx index d851baa..788fdd9 100644 --- a/src/components/ToggleButton/index.stories.tsx +++ b/src/components/ToggleButton/index.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react' -import ToggleButton from '.' +import ToggleButton from '@/components/ToggleButton' export default { title: 'components/ToggleButton', From 9d44c057611083630578aae5c99d9af1f44ee213 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 17:56:55 +0900 Subject: [PATCH 014/233] =?UTF-8?q?chore:=20commitlint=20subject-case=20ru?= =?UTF-8?q?le=20=EB=B3=80=EA=B2=BD(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- commitlint.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/commitlint.config.js b/commitlint.config.js index 68d03e4..65a574a 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -6,5 +6,6 @@ module.exports = { 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'], ], + 'subject-case': [0, 'never'], }, } From 62547d39536e007280a59241ee6fb457c2100fd6 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 17:57:21 +0900 Subject: [PATCH 015/233] =?UTF-8?q?chore:=20ToggleButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20Props=20=EC=88=98=EC=A0=95(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ToggleButton/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/ToggleButton/index.tsx b/src/components/ToggleButton/index.tsx index d22a523..9e89e84 100644 --- a/src/components/ToggleButton/index.tsx +++ b/src/components/ToggleButton/index.tsx @@ -9,10 +9,8 @@ export type OnClick = ({ value: string }) => void -interface Props { - name: string - value: string - defaultChecked?: boolean +interface Props + extends Omit, 'onClick'> { onClick?: OnClick } From e97b0eee8f078e8d1ca798a384342208e7761bf2 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 21:05:58 +0900 Subject: [PATCH 016/233] =?UTF-8?q?chore:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20click=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=A5=BC=20prop=EC=9C=BC=EB=A1=9C=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.tsx | 69 ++++++++++----------------------- 1 file changed, 20 insertions(+), 49 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index fa41287..efbc2a8 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,5 +1,4 @@ import clsx from 'clsx' -import { useRouter } from 'next/router' import { ArrowLeftIcon, ExitIcon, MoreVerticalIcon } from '@/components/Icons' import { PropsWithChildren } from 'react' @@ -10,19 +9,16 @@ interface Props { title: string leftButton?: ButtonType rightButton?: ButtonType -} - -const HeaderButton = ({ type }: { type: ButtonType }) => { - if (type === 'exit') return - if (type === 'more') return - if (type === 'back') return - else return null + onLeftButtonClick?: () => void + onRightButtonClick?: () => void } const Header = ({ title, - leftButton = 'back', + leftButton = 'none', rightButton = 'none', + onLeftButtonClick, + onRightButtonClick, }: Props) => { return (
-
- -
+

{title}

-
- -
+
) } -const ButtonWrapper = ({ - onClick, - children, -}: PropsWithChildren<{ onClick?: () => void }>) => { - return ( - - ) -} - -const BackButton = () => { - const { back } = useRouter() - return ( - - - - ) -} - -const MoreButton = () => { - return ( - {}}> - - - ) +const ButtonIcon = ({ type }: { type: ButtonType }) => { + if (type === 'exit') return + if (type === 'more') return + if (type === 'back') return + else return null } -const ExitButton = () => { +const HeaderButton = ({ + type, + onClick, +}: PropsWithChildren<{ type: ButtonType; onClick?: () => void }>) => { return ( - {}}> - - + ) } From 92c9ba2f0d624dd8d7063ccd0bd8f70e95f5cfcf Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 12 Feb 2023 21:09:48 +0900 Subject: [PATCH 017/233] =?UTF-8?q?chore:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20className=20prop=20=EC=B6=94=EA=B0=80(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 408a701..48a7031 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react' export const colorOptions = ['white', 'gray', 'black'] as const export const sizeOptions = ['sm', 'md'] as const + interface Props extends React.ComponentPropsWithoutRef<'button'> { size?: (typeof sizeOptions)[number] color?: (typeof colorOptions)[number] @@ -26,6 +27,7 @@ const Button = ({ disabled = false, children, size = 'md', + className, ...rest }: PropsWithChildren) => { const { onClick } = rest @@ -41,6 +43,7 @@ const Button = ({ 'justify-center', COLOR_CONFIG[color], SIZE_CONFIG[size], + className, { 'disabled:text-gray-200 disabled:bg-gray-100': color === 'black', }, From 867ba39ab6b09983466159456843eacf85f49824 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Mon, 13 Feb 2023 20:49:32 +0900 Subject: [PATCH 018/233] =?UTF-8?q?chore:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20fontWeight=20prop=20=EC=B6=94=EA=B0=80(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/index.stories.tsx | 11 ++++++++++- src/components/Button/index.tsx | 9 +++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx index e04320b..b43b202 100644 --- a/src/components/Button/index.stories.tsx +++ b/src/components/Button/index.stories.tsx @@ -1,5 +1,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react' -import Button, { sizeOptions, colorOptions } from '@/components/Button' +import Button, { + sizeOptions, + colorOptions, + fontWeightOptions, +} from '@/components/Button' export default { title: 'components/Button', @@ -13,6 +17,10 @@ export default { options: colorOptions, control: { type: 'radio' }, }, + fontWeight: { + options: fontWeightOptions, + control: { type: 'radio' }, + }, }, } as ComponentMeta @@ -24,4 +32,5 @@ Basic.args = { disabled: false, size: 'sm', color: 'black', + fontWeight: 'medium', } diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 48a7031..882a3e1 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -3,13 +3,20 @@ import { PropsWithChildren } from 'react' export const colorOptions = ['white', 'gray', 'black'] as const export const sizeOptions = ['sm', 'md'] as const +export const fontWeightOptions = ['medium', 'bold'] as const interface Props extends React.ComponentPropsWithoutRef<'button'> { size?: (typeof sizeOptions)[number] color?: (typeof colorOptions)[number] + fontWeight?: (typeof fontWeightOptions)[number] disabled?: boolean } +const FONT_WEIGHT_CONFIG = { + medium: 'font-medium', + bold: 'font-bold', +} + const COLOR_CONFIG = { white: 'bg-white text-gray-300', gray: 'bg-gray-100 text-gray-300', @@ -27,6 +34,7 @@ const Button = ({ disabled = false, children, size = 'md', + fontWeight = 'medium', className, ...rest }: PropsWithChildren) => { @@ -41,6 +49,7 @@ const Button = ({ 'flex', 'items-center', 'justify-center', + FONT_WEIGHT_CONFIG[fontWeight], COLOR_CONFIG[color], SIZE_CONFIG[size], className, From cfa1f4af27fb88617d17cac62098cad925594725 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Mon, 13 Feb 2023 20:52:58 +0900 Subject: [PATCH 019/233] =?UTF-8?q?chore:=20Button=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=ED=8F=B0=ED=8A=B8=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 882a3e1..103e92f 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -49,6 +49,7 @@ const Button = ({ 'flex', 'items-center', 'justify-center', + 'text-lg', FONT_WEIGHT_CONFIG[fontWeight], COLOR_CONFIG[color], SIZE_CONFIG[size], From 0c6e095d8341ed118b46a8ad43e985833ebd0f35 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Mon, 13 Feb 2023 21:52:06 +0900 Subject: [PATCH 020/233] =?UTF-8?q?chore:=20tailwind=20gray=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EB=B3=80=EA=B2=BD(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/index.tsx | 6 +++--- src/components/ToggleButton/index.tsx | 2 +- tailwind.config.js | 12 ++++++++++-- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 103e92f..7da3734 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -18,8 +18,8 @@ const FONT_WEIGHT_CONFIG = { } const COLOR_CONFIG = { - white: 'bg-white text-gray-300', - gray: 'bg-gray-100 text-gray-300', + white: 'bg-white text-textGray-100', + gray: 'bg-gray-100 text-textGray-100', black: 'bg-black text-white', } @@ -55,7 +55,7 @@ const Button = ({ SIZE_CONFIG[size], className, { - 'disabled:text-gray-200 disabled:bg-gray-100': color === 'black', + 'disabled:text-textGray-50 disabled:bg-gray-100': color === 'black', }, )} > diff --git a/src/components/ToggleButton/index.tsx b/src/components/ToggleButton/index.tsx index 9e89e84..e1abcd3 100644 --- a/src/components/ToggleButton/index.tsx +++ b/src/components/ToggleButton/index.tsx @@ -48,7 +48,7 @@ const ToggleButton = ({ 'px-3', 'py-1', 'bg-gray-100', - 'text-gray-300', + 'text-textGray-100', 'peer-checked:bg-red', 'peer-checked:text-white', )} diff --git a/tailwind.config.js b/tailwind.config.js index e50260c..0e3aa74 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,9 +11,17 @@ module.exports = { blue: '#5B9DFF', purple: '#7E85FF', gray: { + 50: '#F9F9F9', 100: '#F2F3F5', - 200: '#999999', - 300: '#767676', + 200: '#E3E4E6', + 300: '#D5D5DB', + 400: '#B7BABF', + 500: '#979A9E', + }, + textGray: { + 50: '#999999', + 100: '#767676', + 200: '#505050', }, }, borderRadius: { From ffeb408e5458c622ad77166ccee7b207d2bc0094 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Tue, 14 Feb 2023 01:30:36 +0900 Subject: [PATCH 021/233] =?UTF-8?q?chore:=20global.d.ts=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- global.d.ts | 7 +++++++ tsconfig.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 global.d.ts diff --git a/global.d.ts b/global.d.ts new file mode 100644 index 0000000..f93a64f --- /dev/null +++ b/global.d.ts @@ -0,0 +1,7 @@ +declare global { + interface Window { + ReactNativeWebView: any + } +} + +export const ReactNativeWebView = window.ReactNativeWebView diff --git a/tsconfig.json b/tsconfig.json index 2159bf4..72161f2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,6 +19,6 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["global.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } From a5e2a85ec043a5397ae90449465c1130f4ce9868 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Tue, 14 Feb 2023 01:33:00 +0900 Subject: [PATCH 022/233] =?UTF-8?q?feat:=20RN=EA=B3=BC=20webview=20?= =?UTF-8?q?=ED=86=B5=EC=8B=A0=20Bridge=20=EA=B5=AC=ED=98=84(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/.gitkeep | 0 .../react-native-webview-bridge/WebBridge.ts | 73 +++++++++++++++++++ .../bottom-sheet/index.ts | 33 +++++++++ .../bottom-sheet/useRNBottomSheet.ts | 34 +++++++++ .../react-native-webview-bridge/index.ts | 5 ++ .../types/bottomSheet.type.ts | 39 ++++++++++ .../types/common.type.ts | 33 +++++++++ 7 files changed, 217 insertions(+) delete mode 100644 src/utils/.gitkeep create mode 100644 src/utils/react-native-webview-bridge/WebBridge.ts create mode 100644 src/utils/react-native-webview-bridge/bottom-sheet/index.ts create mode 100644 src/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet.ts create mode 100644 src/utils/react-native-webview-bridge/index.ts create mode 100644 src/utils/react-native-webview-bridge/types/bottomSheet.type.ts create mode 100644 src/utils/react-native-webview-bridge/types/common.type.ts diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/utils/react-native-webview-bridge/WebBridge.ts b/src/utils/react-native-webview-bridge/WebBridge.ts new file mode 100644 index 0000000..dc2f64a --- /dev/null +++ b/src/utils/react-native-webview-bridge/WebBridge.ts @@ -0,0 +1,73 @@ +import { + MessageType, + MessageData, + Callbacks, + ECallbackMessageType, + CallbackDataType, + CallbackMessageData, +} from './types/common.type' + +export default class WebBridge { + /** + * @member eventList <이벤트키, 이벤트 전달 받을 시 실행할 콜백 함수> + */ + protected static eventList = new Map() + + sendMessage(type: MessageType, data?: MessageData) { + window.ReactNativeWebView.postMessage(JSON.stringify({ type, data })) + } + + webviewListner(event: any) { + const { type, eventKey, data } = JSON.parse( + event.data, + ) as CallbackMessageData + + switch (type) { + case ECallbackMessageType.CALL_BACK: + if (eventKey && WebBridge.eventList.has(eventKey)) { + const { callbackKey, parameters } = data as CallbackDataType + const callbacks = WebBridge.eventList.get(eventKey) + callbacks?.[callbackKey]?.(parameters) + } + break + } + } + + /** + * + * @param eventKey 이벤트를 식별할 키 입니다. 유일하지 않으면 가장 최신에 등록된 이벤트만 실행됩니다. + * @param callbacks 이벤트가 발생했을 때 실행될 콜백 함수 입니다. + */ + subscribe(eventKey: string, callbacks: Callbacks) { + this.unsubscribe(eventKey) + WebBridge.eventList.set(eventKey, callbacks) + } + + unsubscribe(eventKey: string) { + if (WebBridge.eventList.has(eventKey)) { + WebBridge.eventList.delete(eventKey) + } + } + + /** + * @description event Listener 등록입니다. 최초 한 번만 실행해주세요. 잊지 않고 `unmount()`도 실행을 함께 해주세요. + */ + init() { + if (window.ReactNativeWebView) { + /** android */ + document.addEventListener('message', this.webviewListner) + /** ios */ + window.addEventListener('message', this.webviewListner) + } + } + + /** + * @description event Listener 삭제입니다. + */ + unmount() { + /** android */ + document.removeEventListener('message', this.webviewListner) + /** ios */ + window.removeEventListener('message', this.webviewListner) + } +} diff --git a/src/utils/react-native-webview-bridge/bottom-sheet/index.ts b/src/utils/react-native-webview-bridge/bottom-sheet/index.ts new file mode 100644 index 0000000..6b737f9 --- /dev/null +++ b/src/utils/react-native-webview-bridge/bottom-sheet/index.ts @@ -0,0 +1,33 @@ +import { + BottomSheetType, + ListBottomSheetContents, +} from '@/utils/react-native-webview-bridge/types/bottomSheet.type' +import { EMessageType, MessageData } from '../types/common.type' +import webBridge from '@/utils/react-native-webview-bridge' + +function open( + data: MessageData<{ + type: BottomSheetType + props: ListBottomSheetContents + }>, +) { + if (window?.ReactNativeWebView) { + webBridge.sendMessage(EMessageType.OPEN_BOTTOM_SHEET, data) + } +} + +function close( + data: MessageData<{ + type: BottomSheetType + }>, +) { + if (window?.ReactNativeWebView) { + webBridge.sendMessage(EMessageType.CLOSE_BOTTOM_SHEET, data) + } +} + +const RNBottomSheet = { + open, + close, +} +export default RNBottomSheet diff --git a/src/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet.ts b/src/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet.ts new file mode 100644 index 0000000..761f8e2 --- /dev/null +++ b/src/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet.ts @@ -0,0 +1,34 @@ +import { + ListBottomSheetContents, + EBottomSheetType, + RNCallBacks, +} from '@/utils/react-native-webview-bridge/types/bottomSheet.type' +import RNBottomSheet from '@/utils/react-native-webview-bridge/bottom-sheet' +import webBridge from '@/utils/react-native-webview-bridge' + +type Functions = { + open: (data: ListBottomSheetContents, callbacks?: RNCallBacks) => void + close: () => void +} +type ReturnType = [Functions['open'], Functions['close']] + +export default function useRNListBottomSheet(key: string): ReturnType { + const thisKey = `BOTTOM_SHEET_${EBottomSheetType.LIST}_${key}` + + const open: Functions['open'] = (data, callbacks) => { + if (callbacks) { + webBridge.subscribe(thisKey, callbacks) + } + + RNBottomSheet.open({ + eventKey: thisKey, + contents: { type: EBottomSheetType.LIST, props: data }, + }) + } + + const close: Functions['close'] = () => { + RNBottomSheet.close({ eventKey: thisKey }) + } + + return [open, close] +} diff --git a/src/utils/react-native-webview-bridge/index.ts b/src/utils/react-native-webview-bridge/index.ts new file mode 100644 index 0000000..6094730 --- /dev/null +++ b/src/utils/react-native-webview-bridge/index.ts @@ -0,0 +1,5 @@ +import WebBridge from './WebBridge' + +const webBridge = new WebBridge() + +export default webBridge diff --git a/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts new file mode 100644 index 0000000..c56664d --- /dev/null +++ b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts @@ -0,0 +1,39 @@ +export enum EBottomSheetType { + LIST = 'LIST', + SELECT = 'SELECT', + MULTI_SELECT = 'MULTI_SELECT', + REACTION = 'REACTION', +} +export type BottomSheetType = keyof typeof EBottomSheetType +export type Key = string + +export type DefaultElement = { + key: Key + title: string + // showSwitch?: boolean + // onSwitchChange?: (value: boolean) => void +} +export type ListBottomSheetContents = { + title?: string + items: Array +} + +export type RNWebViewData = { + key: string +} + +export enum ERNEventType { + ITEM_CLICKED = 'ITEM_CLICKED', + CLICKED = 'CLICKED', + CLOSED = 'CLOSED', + OPENED = 'OPENED', +} +export type RNEventType = keyof typeof ERNEventType + +/** + * @description RN에 정의되어 있는 콜백 함수입니다. + */ +export type RNCallBacks = { + onItemClick?: (key: string) => void + onClose?: () => void +} diff --git a/src/utils/react-native-webview-bridge/types/common.type.ts b/src/utils/react-native-webview-bridge/types/common.type.ts new file mode 100644 index 0000000..d605275 --- /dev/null +++ b/src/utils/react-native-webview-bridge/types/common.type.ts @@ -0,0 +1,33 @@ +/** + * @description WebView -> RN 보낼 수 있는 메세지 종류 + */ +export enum EMessageType { + OPEN_BOTTOM_SHEET = 'OPEN_BOTTOM_SHEET', + CLOSE_BOTTOM_SHEET = 'CLOSE_BOTTOM_SHEET', +} +export type MessageType = keyof typeof EMessageType +export type MessageData> = { + eventKey: string + contents?: T +} + +/** + * @description RN -> WebView 받을 수 있는 메세지 종류 + */ +export enum ECallbackMessageType { + CALL_BACK = 'CALL_BACK', +} +export type CallbackMessageType = keyof typeof ECallbackMessageType +export type CallbackMessageData = { + type: string + eventKey?: string + data?: any +} +export type CallbackDataType = { + callbackKey: string + parameters: any +} + +export type Callbacks = { + [key: string]: (parameters?: any) => any +} From abe3fd49299c0ff8f6256c235ed1e70f3458d73f Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Tue, 14 Feb 2023 01:35:08 +0900 Subject: [PATCH 023/233] =?UTF-8?q?chore:=20webview=20Bridge=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=20=EC=98=88=EC=8B=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/webview-test.tsx | 60 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/pages/webview-test.tsx diff --git a/src/pages/webview-test.tsx b/src/pages/webview-test.tsx new file mode 100644 index 0000000..d252bfa --- /dev/null +++ b/src/pages/webview-test.tsx @@ -0,0 +1,60 @@ +import webBridge from '@/utils/react-native-webview-bridge' +import useRNListBottomSheet from '@/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet' +import { useEffect, useState } from 'react' + +/** + * @description bridge를 사용하는 예시 페이지입니다. + * @TODO 페이지 삭제 + */ +export default function WebViewTestPage() { + const [text, setText] = useState(['초기']) + const [open, close] = useRNListBottomSheet('REST') + + const handleOpenBottomSheet = () => { + open( + { + title: '휴식', + items: [ + { key: 'edit', title: '수정하기' }, + { key: 'delete', title: '삭제하기' }, + { + key: 'saveBlock', + title: '블럭 저장하기', + }, + { key: 'delay', title: '다른 날로 미루기' }, + ], + }, + { + onItemClick: (key: string) => { + setText((arr) => [...arr, '아이템 클릭' + key]) + }, + onClose: () => { + setText((arr) => [...arr, '모달 닫힘']) + }, + }, + ) + } + + const handleCloseBottomSheet = () => { + close() + } + + useEffect(() => { + webBridge.init() + return () => { + webBridge.unmount() + } + }, []) + + return ( + <> + + +
+ {text.map((txt, idx) => ( +
{txt}
+ ))} +
+ + ) +} From 63549a9ddc73d98e993b1d8da07dce4c848d0999 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 01:47:34 +0900 Subject: [PATCH 024/233] =?UTF-8?q?chore:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20rounded=20config=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EC=83=81=EC=88=98=EC=99=80=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EB=93=A4=20=EB=B6=84=EB=A6=AC(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/consts.ts | 4 +++ src/components/Button/index.stories.tsx | 13 +++++-- src/components/Button/index.tsx | 45 ++++++++++++++++--------- src/components/Button/types.ts | 22 ++++++++++++ 4 files changed, 66 insertions(+), 18 deletions(-) create mode 100644 src/components/Button/consts.ts create mode 100644 src/components/Button/types.ts diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts new file mode 100644 index 0000000..c1ee027 --- /dev/null +++ b/src/components/Button/consts.ts @@ -0,0 +1,4 @@ +export const colorOptions = ['white', 'gray', 'black'] as const +export const sizeOptions = ['sm', 'md'] as const +export const fontWeightOptions = ['medium', 'bold'] as const +export const roundedOptions = ['sm', 'md', 'lg'] as const diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx index b43b202..3f08c7c 100644 --- a/src/components/Button/index.stories.tsx +++ b/src/components/Button/index.stories.tsx @@ -1,9 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react' -import Button, { - sizeOptions, +import Button from '@/components/Button' +import { colorOptions, fontWeightOptions, -} from '@/components/Button' + roundedOptions, + sizeOptions, +} from './consts' export default { title: 'components/Button', @@ -21,6 +23,10 @@ export default { options: fontWeightOptions, control: { type: 'radio' }, }, + rounded: { + options: roundedOptions, + control: { type: 'radio' }, + }, }, } as ComponentMeta @@ -33,4 +39,5 @@ Basic.args = { size: 'sm', color: 'black', fontWeight: 'medium', + rounded: 'md', } diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 7da3734..db55708 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -1,31 +1,44 @@ import clsx from 'clsx' import { PropsWithChildren } from 'react' - -export const colorOptions = ['white', 'gray', 'black'] as const -export const sizeOptions = ['sm', 'md'] as const -export const fontWeightOptions = ['medium', 'bold'] as const +import type { + Size, + Color, + FontWeight, + Rounded, + ColorConfig, + RoundedConfig, + FontWeightConfig, + SizeConfig, +} from './types' interface Props extends React.ComponentPropsWithoutRef<'button'> { - size?: (typeof sizeOptions)[number] - color?: (typeof colorOptions)[number] - fontWeight?: (typeof fontWeightOptions)[number] + size?: Size + color?: Color + fontWeight?: FontWeight + rounded?: Rounded disabled?: boolean } -const FONT_WEIGHT_CONFIG = { - medium: 'font-medium', - bold: 'font-bold', +const SIZE_CONFIG: SizeConfig = { + sm: 'px-3 py-1 w-fit', + md: 'px-8 py-[13px] w-full', } -const COLOR_CONFIG = { +const COLOR_CONFIG: ColorConfig = { white: 'bg-white text-textGray-100', gray: 'bg-gray-100 text-textGray-100', black: 'bg-black text-white', } -const SIZE_CONFIG = { - sm: 'px-3 py-1 w-fit rounded-sm', - md: 'px-8 py-[13px] w-full rounded-lg', +const ROUNDED_CONFIG: RoundedConfig = { + sm: 'rounded-sm', + md: 'rounded-md', + lg: 'rounded-lg', +} + +const FONT_WEIGHT_CONFIG: FontWeightConfig = { + medium: 'font-medium', + bold: 'font-bold', } const Button = ({ @@ -34,6 +47,7 @@ const Button = ({ disabled = false, children, size = 'md', + rounded = 'md', fontWeight = 'medium', className, ...rest @@ -49,7 +63,8 @@ const Button = ({ 'flex', 'items-center', 'justify-center', - 'text-lg', + 'text-base', + ROUNDED_CONFIG[rounded], FONT_WEIGHT_CONFIG[fontWeight], COLOR_CONFIG[color], SIZE_CONFIG[size], diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts new file mode 100644 index 0000000..db10c77 --- /dev/null +++ b/src/components/Button/types.ts @@ -0,0 +1,22 @@ +import { + colorOptions, + sizeOptions, + fontWeightOptions, + roundedOptions, +} from './consts' + +type Config = { + [key in T[number]]: string +} + +type ArrayToUnion = T[number] + +export type Color = ArrayToUnion +export type Size = ArrayToUnion +export type FontWeight = ArrayToUnion +export type Rounded = ArrayToUnion + +export type ColorConfig = Config +export type SizeConfig = Config +export type FontWeightConfig = Config +export type RoundedConfig = Config From d48a1ace4bf09a67fead02a5d98cd64cf4b45cb6 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 01:49:54 +0900 Subject: [PATCH 025/233] =?UTF-8?q?chore:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.js | 2 ++ public/assets/icons/alarm.svg | 2 +- public/assets/images/no_data.svg | 12 ++++++++++++ public/assets/images/profile_default.png | Bin 0 -> 5834 bytes 4 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 public/assets/images/no_data.svg create mode 100644 public/assets/images/profile_default.png diff --git a/.storybook/main.js b/.storybook/main.js index 832d9cb..a27d128 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -17,6 +17,8 @@ module.exports = { }, ], framework: '@storybook/react', + staticDirs: ['../public'], + webpackFinal: async (config) => { const fileLoaderRule = config.module.rules.find( (rule) => rule.test && rule.test.test('.svg'), diff --git a/public/assets/icons/alarm.svg b/public/assets/icons/alarm.svg index acfb1e0..89d64a9 100644 --- a/public/assets/icons/alarm.svg +++ b/public/assets/icons/alarm.svg @@ -1,3 +1,3 @@ - + diff --git a/public/assets/images/no_data.svg b/public/assets/images/no_data.svg new file mode 100644 index 0000000..185c844 --- /dev/null +++ b/public/assets/images/no_data.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/assets/images/profile_default.png b/public/assets/images/profile_default.png new file mode 100644 index 0000000000000000000000000000000000000000..ebf979af6d44d337f099225be52e8a81ae11ff59 GIT binary patch literal 5834 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 literal 0 HcmV?d00001 From 49f812ea90c523e268b05070cc3604971b4d90d9 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 01:52:27 +0900 Subject: [PATCH 026/233] =?UTF-8?q?feat:=20Date=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Date/index.stories.tsx | 16 ++++++++++++++++ src/components/Date/index.tsx | 18 ++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/components/Date/index.stories.tsx create mode 100644 src/components/Date/index.tsx diff --git a/src/components/Date/index.stories.tsx b/src/components/Date/index.stories.tsx new file mode 100644 index 0000000..349fe1c --- /dev/null +++ b/src/components/Date/index.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import Date from '@/components/Date' + +export default { + title: 'components/Date', + components: Date, +} as ComponentMeta + +const Template: ComponentStory = (args) => + +export const Basic = Template.bind({}) +Basic.args = { + date: '1월 25일 수요일', + totalBlock: 4, + totalTask: 14, +} diff --git a/src/components/Date/index.tsx b/src/components/Date/index.tsx new file mode 100644 index 0000000..b1fb9c0 --- /dev/null +++ b/src/components/Date/index.tsx @@ -0,0 +1,18 @@ +interface Props { + date: string + totalBlock: number + totalTask: number +} + +const Date = ({ date, totalBlock, totalTask }: Props) => { + return ( +
+

{date}

+

+ 블럭 {totalBlock}개, 할 일 {totalTask}개 +

+
+ ) +} + +export default Date From e699445c1c3026046f8f51fbcc4925ae36ee3ddd Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 02:13:49 +0900 Subject: [PATCH 027/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20NoData=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NoData/index.stories.tsx | 15 ++++++++++ src/components/NoData/index.tsx | 38 +++++++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 src/components/NoData/index.stories.tsx create mode 100644 src/components/NoData/index.tsx diff --git a/src/components/NoData/index.stories.tsx b/src/components/NoData/index.stories.tsx new file mode 100644 index 0000000..ff49a2c --- /dev/null +++ b/src/components/NoData/index.stories.tsx @@ -0,0 +1,15 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import NoData from '@/components/NoData' + +export default { + title: 'components/NoData', + components: NoData, +} as ComponentMeta + +const Template: ComponentStory = (args) => + +export const Basic = Template.bind({}) +Basic.args = { + text: '등록된 블록이 없어요\n 새 블럭을 만들어보세요!', + outlined: false, +} diff --git a/src/components/NoData/index.tsx b/src/components/NoData/index.tsx new file mode 100644 index 0000000..6c6bbb5 --- /dev/null +++ b/src/components/NoData/index.tsx @@ -0,0 +1,38 @@ +import clsx from 'clsx' + +interface Props { + text?: string + outlined?: boolean +} + +const NoData = ({ text = '등록된 블록이 없어요', outlined = false }: Props) => { + return ( +
+ {/* TODO: 이미지 확인 */} +

+ {text} +

+
+ ) +} + +export default NoData From 48b78cca89c0749cee882b16f27cad10a5c1fab0 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 02:46:01 +0900 Subject: [PATCH 028/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20Profile=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Profile/index.stories.tsx | 14 ++++++++ src/components/Profile/index.tsx | 46 ++++++++++++++++++++++++ tailwind.config.js | 1 + 3 files changed, 61 insertions(+) create mode 100644 src/components/Profile/index.stories.tsx create mode 100644 src/components/Profile/index.tsx diff --git a/src/components/Profile/index.stories.tsx b/src/components/Profile/index.stories.tsx new file mode 100644 index 0000000..8a5f8bd --- /dev/null +++ b/src/components/Profile/index.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import Profile from '@/components/Profile' + +export default { + title: 'components/Profile', + components: Profile, +} as ComponentMeta + +const Template: ComponentStory = (args) => + +export const Basic = Template.bind({}) +Basic.args = { + imgSrc: '', +} diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx new file mode 100644 index 0000000..ed24a1f --- /dev/null +++ b/src/components/Profile/index.tsx @@ -0,0 +1,46 @@ +import clsx from 'clsx' + +interface Props { + imgSrc?: string +} + +const DefaultImage = () => { + return ( +
+ profile +
+ ) +} + +const Profile = ({ imgSrc = '' }: Props) => { + return ( +
+ {!imgSrc ? ( + + ) : ( + + )} +
+ ) +} + +export default Profile diff --git a/tailwind.config.js b/tailwind.config.js index 0e3aa74..667148d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,6 +28,7 @@ module.exports = { sm: '8px', md: '12px', lg: '14px', + full: '50%', }, extend: { fontSize: { From c353bd2bd1962f699e25c47c518addf30eb8b364 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 02:46:37 +0900 Subject: [PATCH 029/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20Tabs=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tabs/index.stories.tsx | 24 +++++++ src/components/Tabs/index.tsx | 92 +++++++++++++++++++++++++++ 2 files changed, 116 insertions(+) create mode 100644 src/components/Tabs/index.stories.tsx create mode 100644 src/components/Tabs/index.tsx diff --git a/src/components/Tabs/index.stories.tsx b/src/components/Tabs/index.stories.tsx new file mode 100644 index 0000000..21bb39b --- /dev/null +++ b/src/components/Tabs/index.stories.tsx @@ -0,0 +1,24 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import Tabs from '@/components/Tabs' + +export default { + title: 'components/Tabs', + components: Tabs, +} as ComponentMeta + +export const Basic: ComponentStory = () => { + return ( + + + + + + +
내용 0
+ + +
내용 1s
+ + + ) +} diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx new file mode 100644 index 0000000..580197c --- /dev/null +++ b/src/components/Tabs/index.tsx @@ -0,0 +1,92 @@ +import clsx from 'clsx' +import React, { + createContext, + Dispatch, + PropsWithChildren, + SetStateAction, + useContext, + useState, +} from 'react' + +interface TabProps { + id: number + text: string + onClick?: () => void +} + +const TabsContext = createContext<{ + activeTabId: number + setActiveTabId: Dispatch> +}>({ + activeTabId: 0, + setActiveTabId: () => {}, +}) + +export const Tabs = ({ + defaultIndex = 0, + children, +}: PropsWithChildren<{ defaultIndex?: number }>) => { + const [activeTabId, setActiveTabId] = useState(defaultIndex) + + return ( + + {children} + + ) +} + +const useTabs = () => { + const context = useContext(TabsContext) + if (!context) throw new Error('useTabs must be used within Tabs component') + return context +} + +const TabList = ({ children }: { children: React.ReactNode }) => { + return
    {children}
+} + +const Tab = ({ id, text, onClick = () => {} }: TabProps) => { + const { activeTabId, setActiveTabId } = useTabs() + const handleTabClick = () => { + setActiveTabId(id) + onClick?.() + } + return ( +
  • + +
    • + ) +} + +const TabPanel = ({ id, children }: PropsWithChildren<{ id: number }>) => { + const { activeTabId } = useTabs() + if (id !== activeTabId) return null + return
    {children}
    +} + +Tabs.TabList = TabList +Tabs.Tab = Tab +Tabs.TabPanel = TabPanel + +export default Tabs From 5050fa4725ae7de63d4bdb43cae74aadfd22a0e9 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 02:49:53 +0900 Subject: [PATCH 030/233] =?UTF-8?q?chore:=20noop=20util=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.tsx | 10 +++++++--- src/components/Tabs/index.tsx | 5 +++-- src/utils/.gitkeep | 0 src/utils/index.ts | 1 + 4 files changed, 11 insertions(+), 5 deletions(-) delete mode 100644 src/utils/.gitkeep create mode 100644 src/utils/index.ts diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index efbc2a8..8ccd00a 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx' -import { ArrowLeftIcon, ExitIcon, MoreVerticalIcon } from '@/components/Icons' import { PropsWithChildren } from 'react' +import { ArrowLeftIcon, ExitIcon, MoreVerticalIcon } from '@/components/Icons' +import { noop } from '@/utils' export const buttonOptions = ['none', 'exit', 'more', 'back'] as const type ButtonType = (typeof buttonOptions)[number] @@ -17,14 +18,17 @@ const Header = ({ title, leftButton = 'none', rightButton = 'none', - onLeftButtonClick, - onRightButtonClick, + onLeftButtonClick = noop, + onRightButtonClick = noop, }: Props) => { return (
    > }>({ activeTabId: 0, - setActiveTabId: () => {}, + setActiveTabId: noop, }) export const Tabs = ({ @@ -45,7 +46,7 @@ const TabList = ({ children }: { children: React.ReactNode }) => { return
      {children}
    } -const Tab = ({ id, text, onClick = () => {} }: TabProps) => { +const Tab = ({ id, text, onClick = noop }: TabProps) => { const { activeTabId, setActiveTabId } = useTabs() const handleTabClick = () => { setActiveTabId(id) diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..9f9f125 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1 @@ +export const noop = () => {} From 204949c06f7233343b9f17e092f53f5c2cb45ef0 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 02:59:00 +0900 Subject: [PATCH 031/233] =?UTF-8?q?feat:=20ProfileHeader=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Home/ProfileHeader/index.tsx | 29 +++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/containers/Home/ProfileHeader/index.tsx diff --git a/src/containers/Home/ProfileHeader/index.tsx b/src/containers/Home/ProfileHeader/index.tsx new file mode 100644 index 0000000..bfb4163 --- /dev/null +++ b/src/containers/Home/ProfileHeader/index.tsx @@ -0,0 +1,29 @@ +import { AlarmIcon } from '@/components/Icons' +import Profile from '@/components/Profile' + +interface Props { + user: string + profileImage?: string +} + +const ProfileHeader = ({ user, profileImage = '' }: Props) => { + return ( +
    +
    +
    + +
    +
    + {user}님,
    + 오늘 하루도 화이팅! +
    +
    + + +
    + ) +} + +export default ProfileHeader From e1303038818bc2f857b4009e374fb1c7e633087d Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 03:02:11 +0900 Subject: [PATCH 032/233] =?UTF-8?q?feat:=20Home=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EB=B0=B0=EC=B9=98(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Home/CalendarPanel/index.tsx | 5 ++++ src/containers/Home/DailyBlockPanel/index.tsx | 27 +++++++++++++++++++ src/containers/Home/index.tsx | 26 +++++++++++++++++- src/styles/globals.css | 6 +++++ 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/containers/Home/CalendarPanel/index.tsx create mode 100644 src/containers/Home/DailyBlockPanel/index.tsx diff --git a/src/containers/Home/CalendarPanel/index.tsx b/src/containers/Home/CalendarPanel/index.tsx new file mode 100644 index 0000000..9081fbd --- /dev/null +++ b/src/containers/Home/CalendarPanel/index.tsx @@ -0,0 +1,5 @@ +const CalendarPanel = () => { + return
    calendar panel
    +} + +export default CalendarPanel diff --git a/src/containers/Home/DailyBlockPanel/index.tsx b/src/containers/Home/DailyBlockPanel/index.tsx new file mode 100644 index 0000000..1fc4841 --- /dev/null +++ b/src/containers/Home/DailyBlockPanel/index.tsx @@ -0,0 +1,27 @@ +import Button from '@/components/Button' +import Date from '@/components/Date' +import { AddIcon } from '@/components/Icons' +import NoData from '@/components/NoData' + +// TODO : 서버 데이터 연결 +const DATE = '1월 25일 수요일' +const TOTAL_BLOCK = 0 +const TOTAL_TASK = 0 + +const DailyBlockPanel = () => { + return ( +
    + +
    + +
    + + +
    + ) +} + +export default DailyBlockPanel diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx index 83ca458..fbc8d61 100644 --- a/src/containers/Home/index.tsx +++ b/src/containers/Home/index.tsx @@ -1,5 +1,29 @@ +import Tabs from '@/components/Tabs' +import ProfileHeader from './ProfileHeader' +import CalendarPanel from './CalendarPanel' +import DailyBlockPanel from './DailyBlockPanel' + +const USER_NICKNAME = '김새롬' // TODO : 서버 데이터 연결 + const Home = () => { - return
    Home
    + return ( +
    + + + + + + + + + + + + + + +
    + ) } export default Home diff --git a/src/styles/globals.css b/src/styles/globals.css index 708f5c7..8f63d53 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -28,3 +28,9 @@ ol, ul { list-style: none; } + +.inner { + max-width: 750px; + width: 100%; + margin: 0 auto; +} From 4efc67df29de74927b2db0aab58e48ba30c34fca Mon Sep 17 00:00:00 2001 From: yoonncho Date: Tue, 14 Feb 2023 17:40:01 +0900 Subject: [PATCH 033/233] =?UTF-8?q?chore:=20no=5Fdata=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20png=EB=A1=9C=20=EB=B3=80=EA=B2=BD(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/images/no_data.png | Bin 0 -> 3127 bytes public/assets/images/no_data.svg | 12 ------------ src/components/NoData/index.tsx | 2 +- 3 files changed, 1 insertion(+), 13 deletions(-) create mode 100644 public/assets/images/no_data.png delete mode 100644 public/assets/images/no_data.svg diff --git a/public/assets/images/no_data.png b/public/assets/images/no_data.png new file mode 100644 index 0000000000000000000000000000000000000000..a202f015ad2097c646d1ba4ed8c7a50051a3d08b GIT binary patch literal 3127 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 VhjRUepa1y)!y9ILb-J!`{{aKc%j5t6 literal 0 HcmV?d00001 diff --git a/public/assets/images/no_data.svg b/public/assets/images/no_data.svg deleted file mode 100644 index 185c844..0000000 --- a/public/assets/images/no_data.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/components/NoData/index.tsx b/src/components/NoData/index.tsx index 6c6bbb5..5ea3a17 100644 --- a/src/components/NoData/index.tsx +++ b/src/components/NoData/index.tsx @@ -19,7 +19,7 @@ const NoData = ({ text = '등록된 블록이 없어요', outlined = false }: Pr { 'border border-dashed border-textGray-50': outlined }, )} > - {/* TODO: 이미지 확인 */} +

    Date: Sat, 18 Feb 2023 21:17:03 +0900 Subject: [PATCH 034/233] =?UTF-8?q?fix:=20webviewListener=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/react-native-webview-bridge/WebBridge.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/utils/react-native-webview-bridge/WebBridge.ts b/src/utils/react-native-webview-bridge/WebBridge.ts index dc2f64a..f188cf5 100644 --- a/src/utils/react-native-webview-bridge/WebBridge.ts +++ b/src/utils/react-native-webview-bridge/WebBridge.ts @@ -17,7 +17,7 @@ export default class WebBridge { window.ReactNativeWebView.postMessage(JSON.stringify({ type, data })) } - webviewListner(event: any) { + webviewListener(event: any) { const { type, eventKey, data } = JSON.parse( event.data, ) as CallbackMessageData @@ -55,9 +55,9 @@ export default class WebBridge { init() { if (window.ReactNativeWebView) { /** android */ - document.addEventListener('message', this.webviewListner) + document.addEventListener('message', this.webviewListener) /** ios */ - window.addEventListener('message', this.webviewListner) + window.addEventListener('message', this.webviewListener) } } @@ -66,8 +66,8 @@ export default class WebBridge { */ unmount() { /** android */ - document.removeEventListener('message', this.webviewListner) + document.removeEventListener('message', this.webviewListener) /** ios */ - window.removeEventListener('message', this.webviewListner) + window.removeEventListener('message', this.webviewListener) } } From 1f9a2f0ed8f173d28afec227ac41b5423ea62da6 Mon Sep 17 00:00:00 2001 From: eun-seong Date: Sat, 18 Feb 2023 21:18:28 +0900 Subject: [PATCH 035/233] =?UTF-8?q?fix:=20enum=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20all=20caps=20=EC=BC=80=EC=9D=B4=EC=8A=A4?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native-webview-bridge/types/bottomSheet.type.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts index c56664d..8b87490 100644 --- a/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts +++ b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts @@ -22,13 +22,13 @@ export type RNWebViewData = { key: string } -export enum ERNEventType { +export enum RN_EVENT_TYPE { ITEM_CLICKED = 'ITEM_CLICKED', CLICKED = 'CLICKED', CLOSED = 'CLOSED', OPENED = 'OPENED', } -export type RNEventType = keyof typeof ERNEventType +export type RNEventType = keyof typeof RN_EVENT_TYPE /** * @description RN에 정의되어 있는 콜백 함수입니다. From 57e3a07b0cd1609c9ed8a3bfe664618ae77f9e36 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sat, 18 Feb 2023 21:25:14 +0900 Subject: [PATCH 036/233] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=83=80=EC=9E=85=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native-webview-bridge/types/bottomSheet.type.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts index 8b87490..b8edfc8 100644 --- a/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts +++ b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts @@ -18,10 +18,6 @@ export type ListBottomSheetContents = { items: Array } -export type RNWebViewData = { - key: string -} - export enum RN_EVENT_TYPE { ITEM_CLICKED = 'ITEM_CLICKED', CLICKED = 'CLICKED', From d1761ab5140b0eb7078c5bfb2d117035bf75e20a Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sat, 18 Feb 2023 21:25:46 +0900 Subject: [PATCH 037/233] =?UTF-8?q?fix:=20CallbackMessageData=EC=9D=98=20d?= =?UTF-8?q?ata=20=ED=83=80=EC=9E=85=EC=9D=84=20CallbackDataType=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/react-native-webview-bridge/types/common.type.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/react-native-webview-bridge/types/common.type.ts b/src/utils/react-native-webview-bridge/types/common.type.ts index d605275..a0ac756 100644 --- a/src/utils/react-native-webview-bridge/types/common.type.ts +++ b/src/utils/react-native-webview-bridge/types/common.type.ts @@ -21,7 +21,7 @@ export type CallbackMessageType = keyof typeof ECallbackMessageType export type CallbackMessageData = { type: string eventKey?: string - data?: any + data?: CallbackDataType } export type CallbackDataType = { callbackKey: string @@ -29,5 +29,5 @@ export type CallbackDataType = { } export type Callbacks = { - [key: string]: (parameters?: any) => any + [key: string]: (parameter?: any) => any } From 9393d056f5ea1bb5cff3dc5abfbfb28cab190d46 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sat, 18 Feb 2023 21:26:35 +0900 Subject: [PATCH 038/233] =?UTF-8?q?fix:=20useRNBottomSheet=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=B4=EB=A6=84=EC=9D=84=20useRNListBottomSheetd?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/webview-test.tsx | 2 +- .../{useRNBottomSheet.ts => useRNListBottomSheet.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/utils/react-native-webview-bridge/bottom-sheet/{useRNBottomSheet.ts => useRNListBottomSheet.ts} (100%) diff --git a/src/pages/webview-test.tsx b/src/pages/webview-test.tsx index d252bfa..cfe7a38 100644 --- a/src/pages/webview-test.tsx +++ b/src/pages/webview-test.tsx @@ -1,5 +1,5 @@ import webBridge from '@/utils/react-native-webview-bridge' -import useRNListBottomSheet from '@/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet' +import useRNListBottomSheet from '@/utils/react-native-webview-bridge/bottom-sheet/useRNListBottomSheet' import { useEffect, useState } from 'react' /** diff --git a/src/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet.ts b/src/utils/react-native-webview-bridge/bottom-sheet/useRNListBottomSheet.ts similarity index 100% rename from src/utils/react-native-webview-bridge/bottom-sheet/useRNBottomSheet.ts rename to src/utils/react-native-webview-bridge/bottom-sheet/useRNListBottomSheet.ts From 3f343dc22b3eb5c24f8979627416461b630c6e05 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sat, 18 Feb 2023 23:58:12 +0900 Subject: [PATCH 039/233] =?UTF-8?q?chore:=20dayjs=20=EC=84=A4=EC=B9=98(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 56b4b0b..e033f02 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@next/font": "13.1.6", "axios": "^1.3.2", "clsx": "^1.2.1", + "dayjs": "^1.11.7", "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/yarn.lock b/yarn.lock index 71c62b5..90b7891 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5201,6 +5201,11 @@ dargs@^7.0.0: resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc" integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg== +dayjs@^1.11.7: + version "1.11.7" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2" + integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" From 1d9f8d42e7e47348e8de7728c270bbc8f9032824 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 19 Feb 2023 00:36:58 +0900 Subject: [PATCH 040/233] =?UTF-8?q?chore:=20date=20format=20util=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Date/index.tsx | 6 +++++- src/utils/formatDate.ts | 22 ++++++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 src/utils/formatDate.ts diff --git a/src/components/Date/index.tsx b/src/components/Date/index.tsx index b1fb9c0..727b3fb 100644 --- a/src/components/Date/index.tsx +++ b/src/components/Date/index.tsx @@ -1,3 +1,5 @@ +import formatDate from '@/utils/formatDate' + interface Props { date: string totalBlock: number @@ -5,9 +7,11 @@ interface Props { } const Date = ({ date, totalBlock, totalTask }: Props) => { + const formattedDate = formatDate(date) + return (

    -

    {date}

    +

    {formattedDate}

    블럭 {totalBlock}개, 할 일 {totalTask}개

    diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts new file mode 100644 index 0000000..26d9d11 --- /dev/null +++ b/src/utils/formatDate.ts @@ -0,0 +1,22 @@ +import dayjs from 'dayjs' + +const DAYS = [ + '일요일', + '월요일', + '화요일', + '수요일', + '목요일', + '금요일', + '토요일', +] + +const formatDate = (date: string) => { + const dateTime = dayjs(date) + const formattedDate = `${dateTime.month() + 1}월 ${dateTime.date()}일 ${ + DAYS[dateTime.day()] + }` + + return formattedDate +} + +export default formatDate From b3c3fc0c33345883e5b41837fe857937b6fcef58 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 02:30:27 +0900 Subject: [PATCH 041/233] =?UTF-8?q?chore:=20=EC=BB=AC=EB=9F=AC=ED=8C=94?= =?UTF-8?q?=EB=A0=88=ED=8A=B8=EC=97=90=20pick=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tailwind.config.js b/tailwind.config.js index 667148d..aa5d749 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,7 @@ module.exports = { white: '#FFFFFF', black: '#333333', red: '#FF7154', + pink: '#FF7179', orange: '#FFB673', skyblue: '#7CCAE2', blue: '#5B9DFF', From d9a89430775de260db2af308045c0b67bf23c1ef Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 02:31:09 +0900 Subject: [PATCH 042/233] =?UTF-8?q?chore:=20tailwind=20=EC=A0=95=EC=9D=98?= =?UTF-8?q?=20=EC=83=89=EC=83=81=20=ED=8C=94=EB=A0=88=ED=8A=B8=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 8 ++++++++ src/styles/type.ts | 23 +++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/styles/theme.ts create mode 100644 src/styles/type.ts diff --git a/src/styles/theme.ts b/src/styles/theme.ts new file mode 100644 index 0000000..3f5789b --- /dev/null +++ b/src/styles/theme.ts @@ -0,0 +1,8 @@ +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from '../../tailwind.config.js' +import { Colors } from './type' + +const config = resolveConfig(tailwindConfig) +const colors = config?.theme?.colors as Colors + +export { colors } diff --git a/src/styles/type.ts b/src/styles/type.ts new file mode 100644 index 0000000..53f0ff7 --- /dev/null +++ b/src/styles/type.ts @@ -0,0 +1,23 @@ +export type Colors = { + white: string + black: string + red: string + pink: string + orange: string + skyblue: string + blue: string + purple: string + gray: { + 50: string + 100: string + 200: string + 300: string + 400: string + 500: string + } + textGray: { + 50: string + 100: string + 200: string + } +} From 6ca1113cbb38d57f2fae153922e73f85516554f6 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 02:40:06 +0900 Subject: [PATCH 043/233] =?UTF-8?q?feat:=20Color=20Picker=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ColorPicker/index.stories.tsx | 27 +++++++ src/components/ColorPicker/index.tsx | 82 ++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 src/components/ColorPicker/index.stories.tsx create mode 100644 src/components/ColorPicker/index.tsx diff --git a/src/components/ColorPicker/index.stories.tsx b/src/components/ColorPicker/index.stories.tsx new file mode 100644 index 0000000..3664be2 --- /dev/null +++ b/src/components/ColorPicker/index.stories.tsx @@ -0,0 +1,27 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import ColorPicker from '@/components/ColorPicker' +import { noop } from '@/utils' + +export default { + title: 'components/ColorPicker', + components: ColorPicker, +} as ComponentMeta + +const Template: ComponentStory = (args) => ( + +) + +export const Basic = Template.bind({}) +Basic.args = { + defaultColors: [ + '#FF7154', + '#FF7179', + '#FFB673', + '#7CCAE2', + '#5B9DFF', + '#7E85FF', + ], + multiple: false, + defaultPicked: ['#FFB673'], + onChange: noop, +} diff --git a/src/components/ColorPicker/index.tsx b/src/components/ColorPicker/index.tsx new file mode 100644 index 0000000..9776558 --- /dev/null +++ b/src/components/ColorPicker/index.tsx @@ -0,0 +1,82 @@ +import clsx from 'clsx' +import { ComponentProps, useState } from 'react' + +type Value = string | string[] | undefined +interface Props { + defaultColors?: string[] + defaultPicked?: Value + multiple?: boolean + onChange?: (color: Value) => void +} + +export default function ColorPicker({ + defaultColors = [], + defaultPicked, + multiple = false, + onChange, +}: Props) { + const [pickedColor, setPickedColor] = useState( + defaultPicked || (multiple ? [] : undefined), + ) + + const handleColorClick = (color: string) => { + if (multiple) { + let newState = Array.isArray(pickedColor) ? [...pickedColor] : [color] + const idx = newState.indexOf(color) + if (idx !== -1) { + newState = [...newState.slice(0, idx), ...newState.slice(idx + 1)] + } else { + newState = Array.isArray(pickedColor) + ? [...pickedColor, color] + : [color] + } + setPickedColor(newState) + onChange?.(newState) + } else { + onChange?.(color) + setPickedColor(color) + } + } + + return ( +
    + {defaultColors?.map((color) => ( + handleColorClick(color)} + picked={ + multiple ? pickedColor?.includes(color) : pickedColor === color + } + /> + ))} +
    + ) +} + +interface ColorProps extends ComponentProps<'div'> { + color: string + picked?: boolean +} +function Color({ color, picked, ...props }: ColorProps) { + return ( +
    +
    +
    + ) +} From fefb78e82058664236887e33fe3bdab2dc3069cc Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 05:51:29 +0900 Subject: [PATCH 044/233] =?UTF-8?q?feat:=20=EC=9B=83=EB=8A=94=20=EC=96=BC?= =?UTF-8?q?=EA=B5=B4=20Svg=20=EC=B6=94=EA=B0=80(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icons/smile_face.svg | 6 ++++++ src/components/Icons/SmileFace.tsx | 24 ++++++++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 public/assets/icons/smile_face.svg create mode 100644 src/components/Icons/SmileFace.tsx diff --git a/public/assets/icons/smile_face.svg b/public/assets/icons/smile_face.svg new file mode 100644 index 0000000..4bcc27d --- /dev/null +++ b/public/assets/icons/smile_face.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Icons/SmileFace.tsx b/src/components/Icons/SmileFace.tsx new file mode 100644 index 0000000..d0cefba --- /dev/null +++ b/src/components/Icons/SmileFace.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import SmileFace from 'public/assets/icons/smile_face.svg' +import { SvgProps } from '@/types/svg' + +const SmileFaceIcon = ({ + alt = '', + className = '', + width = 24, + height = 24, + ...rest +}: SvgProps) => { + return ( + + + + ) +} + +export default SmileFaceIcon From e4270461df56db02691a446a4c9ea7ce3b60a5ea Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 05:54:01 +0900 Subject: [PATCH 045/233] =?UTF-8?q?refactor:=20bottomsheet=20open=20?= =?UTF-8?q?=EB=A9=94=EC=86=8C=EB=93=9C=20=ED=8C=8C=EB=9D=BC=EB=AF=B8?= =?UTF-8?q?=ED=84=B0=EC=97=90=20Type=20Generic=20=EC=B6=94=EA=B0=80(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native-webview-bridge/bottom-sheet/index.ts | 9 +++------ .../bottom-sheet/useRNListBottomSheet.ts | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/utils/react-native-webview-bridge/bottom-sheet/index.ts b/src/utils/react-native-webview-bridge/bottom-sheet/index.ts index 6b737f9..d8aa10a 100644 --- a/src/utils/react-native-webview-bridge/bottom-sheet/index.ts +++ b/src/utils/react-native-webview-bridge/bottom-sheet/index.ts @@ -1,14 +1,11 @@ -import { - BottomSheetType, - ListBottomSheetContents, -} from '@/utils/react-native-webview-bridge/types/bottomSheet.type' +import { BottomSheetType } from '@/utils/react-native-webview-bridge/types/bottomSheet.type' import { EMessageType, MessageData } from '../types/common.type' import webBridge from '@/utils/react-native-webview-bridge' -function open( +function open( data: MessageData<{ type: BottomSheetType - props: ListBottomSheetContents + props?: T }>, ) { if (window?.ReactNativeWebView) { diff --git a/src/utils/react-native-webview-bridge/bottom-sheet/useRNListBottomSheet.ts b/src/utils/react-native-webview-bridge/bottom-sheet/useRNListBottomSheet.ts index 761f8e2..cf0dd32 100644 --- a/src/utils/react-native-webview-bridge/bottom-sheet/useRNListBottomSheet.ts +++ b/src/utils/react-native-webview-bridge/bottom-sheet/useRNListBottomSheet.ts @@ -20,7 +20,7 @@ export default function useRNListBottomSheet(key: string): ReturnType { webBridge.subscribe(thisKey, callbacks) } - RNBottomSheet.open({ + RNBottomSheet.open({ eventKey: thisKey, contents: { type: EBottomSheetType.LIST, props: data }, }) From 4ceb3fdab0974617a53b1d7cfa4c7dfb1f3325a1 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 05:54:54 +0900 Subject: [PATCH 046/233] =?UTF-8?q?feat:=20EmojiBottomSheet=20bridge=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80(#1?= =?UTF-8?q?5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bottom-sheet/useRNEmojiBottomSheet.ts | 33 +++++++++++++++++++ .../types/bottomSheet.type.ts | 1 + 2 files changed, 34 insertions(+) create mode 100644 src/utils/react-native-webview-bridge/bottom-sheet/useRNEmojiBottomSheet.ts diff --git a/src/utils/react-native-webview-bridge/bottom-sheet/useRNEmojiBottomSheet.ts b/src/utils/react-native-webview-bridge/bottom-sheet/useRNEmojiBottomSheet.ts new file mode 100644 index 0000000..eae2ff1 --- /dev/null +++ b/src/utils/react-native-webview-bridge/bottom-sheet/useRNEmojiBottomSheet.ts @@ -0,0 +1,33 @@ +import { + EBottomSheetType, + RNCallBacks, +} from '@/utils/react-native-webview-bridge/types/bottomSheet.type' +import RNBottomSheet from '@/utils/react-native-webview-bridge/bottom-sheet' +import webBridge from '@/utils/react-native-webview-bridge' + +type Functions = { + open: (callbacks?: RNCallBacks) => void + close: () => void +} +type ReturnType = [Functions['open'], Functions['close']] + +export default function useRNEmojiBottomSheet(key: string): ReturnType { + const thisKey = `BOTTOM_SHEET_${EBottomSheetType.EMOJI}_${key}` + + const open: Functions['open'] = (callbacks) => { + if (callbacks) { + webBridge.subscribe(thisKey, callbacks) + } + + RNBottomSheet.open({ + eventKey: thisKey, + contents: { type: EBottomSheetType.EMOJI }, + }) + } + + const close: Functions['close'] = () => { + RNBottomSheet.close({ eventKey: thisKey }) + } + + return [open, close] +} diff --git a/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts index b8edfc8..42214cc 100644 --- a/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts +++ b/src/utils/react-native-webview-bridge/types/bottomSheet.type.ts @@ -3,6 +3,7 @@ export enum EBottomSheetType { SELECT = 'SELECT', MULTI_SELECT = 'MULTI_SELECT', REACTION = 'REACTION', + EMOJI = 'EMOJI', } export type BottomSheetType = keyof typeof EBottomSheetType export type Key = string From 531c40f018c87847cef3724e932d519e5d401670 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 06:15:29 +0900 Subject: [PATCH 047/233] =?UTF-8?q?feat:=20Block=20Input=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BlockInput/index.stories.tsx | 20 ++++ src/components/BlockInput/index.tsx | 107 ++++++++++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 src/components/BlockInput/index.stories.tsx create mode 100644 src/components/BlockInput/index.tsx diff --git a/src/components/BlockInput/index.stories.tsx b/src/components/BlockInput/index.stories.tsx new file mode 100644 index 0000000..f036634 --- /dev/null +++ b/src/components/BlockInput/index.stories.tsx @@ -0,0 +1,20 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import BlockInput from '@/components/BlockInput' +import { noop } from '@/utils' + +export default { + title: 'components/BlockInput', + components: BlockInput, +} as ComponentMeta + +const Template: ComponentStory = (args) => ( + +) + +export const Basic = Template.bind({}) +Basic.args = { + count: true, + defaultValue: '', + placeholder: '블록 제목을 입력하세요', + onEmojiChange: noop, +} diff --git a/src/components/BlockInput/index.tsx b/src/components/BlockInput/index.tsx new file mode 100644 index 0000000..a77ad32 --- /dev/null +++ b/src/components/BlockInput/index.tsx @@ -0,0 +1,107 @@ +import clsx from 'clsx' +import { + ChangeEvent, + ComponentProps, + forwardRef, + useState, + useEffect, +} from 'react' + +import useRNEmojiBottomSheet from '@/utils/react-native-webview-bridge/bottom-sheet/useRNEmojiBottomSheet' +import webBridge from '@/utils/react-native-webview-bridge' + +import SmileFaceIcon from '@/components/Icons/SmileFace' + +interface Props extends ComponentProps<'input'> { + count?: boolean + defaultValue?: string + onEmojiChange?: (emoji: string) => void +} + +export default forwardRef(function BlockInput( + { count = true, maxLength = 15, onEmojiChange, ...props }, + ref, +) { + const [valueLength, setValueLength] = useState( + props?.defaultValue?.length || 0, + ) + const [emoji, setEmoji] = useState() + const [open, close] = useRNEmojiBottomSheet('newBlock') + + const handleEmojiClick = () => { + open({ + onItemClick: (key) => { + onEmojiChange?.(key) + setEmoji(key) + close() + }, + }) + } + + const handleChange = (e: ChangeEvent) => { + if (count) { + setValueLength((e.nativeEvent.target as HTMLInputElement).value.length) + } + props?.onChange?.(e) + } + + useEffect(() => { + webBridge.init() + return () => { + webBridge.unmount() + } + }, []) + + return ( +
    + + + {count && ( +
    + {valueLength}/{maxLength} +
    + )} +
    + ) +}) From f8817cf1b2b49c0d5fd911e820f1745c30f549c9 Mon Sep 17 00:00:00 2001 From: eunseonglee Date: Sun, 19 Feb 2023 06:15:57 +0900 Subject: [PATCH 048/233] =?UTF-8?q?feat:=20Switch=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Switch/index.stories.tsx | 16 +++++++++ src/components/Switch/index.tsx | 45 +++++++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 src/components/Switch/index.stories.tsx create mode 100644 src/components/Switch/index.tsx diff --git a/src/components/Switch/index.stories.tsx b/src/components/Switch/index.stories.tsx new file mode 100644 index 0000000..52a19e0 --- /dev/null +++ b/src/components/Switch/index.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import Switch from '@/components/Switch' +import { noop } from '@/utils' + +export default { + title: 'components/Switch', + components: Switch, +} as ComponentMeta + +const Template: ComponentStory = (args) => + +export const Basic = Template.bind({}) +Basic.args = { + defaultValue: true, + onChange: noop, +} diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx new file mode 100644 index 0000000..2778ab6 --- /dev/null +++ b/src/components/Switch/index.tsx @@ -0,0 +1,45 @@ +import clsx from 'clsx' +import { useState } from 'react' + +interface Props { + defaultValue?: boolean + onChange?: (value: boolean) => void +} + +export default function Switch({ defaultValue = false, onChange }: Props) { + const [active, setActive] = useState(defaultValue) + + const handleClick = () => { + setActive(!active) + onChange?.(!active) + } + + return ( +
    +
    +
    + ) +} From 18418ed5cbd6226eb77085bb732666fcb92c45dc Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 19 Feb 2023 04:13:02 +0900 Subject: [PATCH 049/233] =?UTF-8?q?chore:=20mock=20DATE=20=EC=83=81?= =?UTF-8?q?=EC=88=98=20=EC=88=98=EC=A0=95(#8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Date/index.stories.tsx | 2 +- src/containers/Home/DailyBlockPanel/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Date/index.stories.tsx b/src/components/Date/index.stories.tsx index 349fe1c..e169b1b 100644 --- a/src/components/Date/index.stories.tsx +++ b/src/components/Date/index.stories.tsx @@ -10,7 +10,7 @@ const Template: ComponentStory = (args) => export const Basic = Template.bind({}) Basic.args = { - date: '1월 25일 수요일', + date: '2022-01-25', totalBlock: 4, totalTask: 14, } diff --git a/src/containers/Home/DailyBlockPanel/index.tsx b/src/containers/Home/DailyBlockPanel/index.tsx index 1fc4841..3bd24ae 100644 --- a/src/containers/Home/DailyBlockPanel/index.tsx +++ b/src/containers/Home/DailyBlockPanel/index.tsx @@ -4,7 +4,7 @@ import { AddIcon } from '@/components/Icons' import NoData from '@/components/NoData' // TODO : 서버 데이터 연결 -const DATE = '1월 25일 수요일' +const DATE = '2022-01-25' const TOTAL_BLOCK = 0 const TOTAL_TASK = 0 From 0b8b770425a642d31d1c8495f1aa9e55ae5fad46 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 19 Feb 2023 04:15:19 +0900 Subject: [PATCH 050/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20CheckBox?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#8?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icons/todo_check.svg | 3 ++ src/components/CheckBox/index.stories.tsx | 17 ++++++ src/components/CheckBox/index.tsx | 64 +++++++++++++++++++++++ 3 files changed, 84 insertions(+) create mode 100644 public/assets/icons/todo_check.svg create mode 100644 src/components/CheckBox/index.stories.tsx create mode 100644 src/components/CheckBox/index.tsx diff --git a/public/assets/icons/todo_check.svg b/public/assets/icons/todo_check.svg new file mode 100644 index 0000000..9c6f7f7 --- /dev/null +++ b/public/assets/icons/todo_check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CheckBox/index.stories.tsx b/src/components/CheckBox/index.stories.tsx new file mode 100644 index 0000000..eb66f20 --- /dev/null +++ b/src/components/CheckBox/index.stories.tsx @@ -0,0 +1,17 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import CheckBox from '@/components/CheckBox' + +export default { + title: 'components/CheckBox', + components: CheckBox, +} as ComponentMeta + +export const Main: ComponentStory = () => { + return ( +
    + +

    체크박스 내용

    +     +
    + ) +} diff --git a/src/components/CheckBox/index.tsx b/src/components/CheckBox/index.tsx new file mode 100644 index 0000000..01bb92e --- /dev/null +++ b/src/components/CheckBox/index.tsx @@ -0,0 +1,64 @@ +import clsx from 'clsx' +import React, { PropsWithChildren } from 'react' + +export type OnChange = ({ + selected, + value, +}: { + selected: boolean + value: string +}) => void + +interface Props { + name: string + value?: string + defaultChecked?: boolean + onChange?: OnChange +} + +const CHECK_BOX_STYLE = 'flex w-[22px] h-[22px] rounded-sm bg-white' + +const CheckBox = ({ + value, + name, + defaultChecked, + onChange, + children, +}: PropsWithChildren) => { + const handleChange = (e: React.ChangeEvent) => { + const { checked, value } = e.target + onChange?.({ selected: checked, value }) + } + + return ( + + ) +} + +export default CheckBox From e6763002d3a755e4a4745dfa09f9c96da7e6de54 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 19 Feb 2023 04:53:39 +0900 Subject: [PATCH 051/233] =?UTF-8?q?chore:=20block=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=83=81=EC=88=98=20=EB=B0=8F=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80(#8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/block.ts | 64 ++++++++++++++++++++++++++++++++++++++++++ src/types/block.ts | 15 ++++++++++ 2 files changed, 79 insertions(+) create mode 100644 src/constants/block.ts create mode 100644 src/types/block.ts diff --git a/src/constants/block.ts b/src/constants/block.ts new file mode 100644 index 0000000..8afd64f --- /dev/null +++ b/src/constants/block.ts @@ -0,0 +1,64 @@ +import { Block } from '@/types/block' + +export enum BlockColors { + FF7154 = 'FF7154', + FFB673 = 'FFB673', + '5B9DFF' = '5B9DFF', + '7E85FF' = '7E85FF', + '7CCAE2' = '7CCAE2', +} +export type BlockColorType = keyof typeof BlockColors + +export const BLOCK_COLOR_CONFIG = { + FF7154: 'bg-red', + FFB673: 'bg-orange', + '5B9DFF': 'bg-blue', + '7E85FF': 'bg-purple', + '7CCAE2': 'bg-skyblue', +} + +// mock data - 추후 제거 예정 +const BLOCK_DATA: Block = { + color: 'FF7154', + icon: '', + blockTitle: '출근 준비', + sumOfTask: 4, + sumOfDoneTask: 2, + tasks: [ + { + task: '할 일 1', + isDone: false, + }, + { + task: '할 일 2', + isDone: true, + }, + { + task: '할 일 3', + isDone: true, + }, + { + task: '할 일 3', + isDone: false, + }, + ], +} + +export const BLOCK_LIST_DATA: Block[] = [ + BLOCK_DATA, + { + ...BLOCK_DATA, + color: 'FFB673', + blockTitle: '회사', + }, + { + ...BLOCK_DATA, + color: '7E85FF', + blockTitle: '디앤디', + }, + { + ...BLOCK_DATA, + color: '5B9DFF', + blockTitle: '휴식', + }, +] diff --git a/src/types/block.ts b/src/types/block.ts new file mode 100644 index 0000000..b412315 --- /dev/null +++ b/src/types/block.ts @@ -0,0 +1,15 @@ +import { BlockColorType } from '@/constants/block' + +export type Task = { + task: string + isDone: boolean +} + +export type Block = { + color: BlockColorType + icon: string + blockTitle: string + sumOfTask: number + sumOfDoneTask: number + tasks: Task[] +} From a6cf440fc7c54f6d9ead5daf24873b45acbd547a Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 19 Feb 2023 04:55:43 +0900 Subject: [PATCH 052/233] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20Block=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80(#8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Block/index.stories.tsx | 14 ++++++++ src/components/Block/index.tsx | 44 ++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 src/components/Block/index.stories.tsx create mode 100644 src/components/Block/index.tsx diff --git a/src/components/Block/index.stories.tsx b/src/components/Block/index.stories.tsx new file mode 100644 index 0000000..f8ba9e6 --- /dev/null +++ b/src/components/Block/index.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import Block from '@/components/Block' + +export default { + title: 'components/Block', + components: Block, +} as ComponentMeta + +const Template: ComponentStory = (args) => + +export const Basic = Template.bind({}) +Basic.args = { + colors: ['FF7154', 'FFB673', '5B9DFF'], +} diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx new file mode 100644 index 0000000..5ad0870 --- /dev/null +++ b/src/components/Block/index.tsx @@ -0,0 +1,44 @@ +import clsx from 'clsx' +import { BLOCK_COLOR_CONFIG, BlockColorType } from '@/constants/block' + +const MAX_COLORS = 5 // 보여질 최대 색상 개수 +const MOCK_COLORS: BlockColorType[] = [ + 'FF7154', + 'FFB673', + '7CCAE2', + '5B9DFF', + '7E85FF', +] +const HEIGHT = ['', 'h-full', 'h-1/2', 'h-1/3', 'h-1/4', 'h-1/5'] + +interface Props { + colors: BlockColorType[] +} + +const Block = ({ colors = MOCK_COLORS }: Props) => { + const totalBlocks = colors.length + + const showColors = () => { + const coloredBlocks = [] + for (let i = 0; i <= totalBlocks; i++) { + coloredBlocks.push( +
    , + ) + } + return coloredBlocks + } + + return ( +
    {showColors()}
    + ) +} + +export default Block From 69e80d38f71ceb0623fd70369d800ff15d483343 Mon Sep 17 00:00:00 2001 From: yoonncho Date: Sun, 19 Feb 2023 14:37:36 +0900 Subject: [PATCH 053/233] =?UTF-8?q?feat:=20todo=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EA=B3=BC=20Todo=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84(#8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TodoBlock/AddTodoButton/index.tsx | 13 +++++++ src/components/TodoBlock/Todo/index.tsx | 37 +++++++++++++++++++ src/styles/globals.css | 14 +++++++ 3 files changed, 64 insertions(+) create mode 100644 src/components/TodoBlock/AddTodoButton/index.tsx create mode 100644 src/components/TodoBlock/Todo/index.tsx diff --git a/src/components/TodoBlock/AddTodoButton/index.tsx b/src/components/TodoBlock/AddTodoButton/index.tsx new file mode 100644 index 0000000..2f5ec2a --- /dev/null +++ b/src/components/TodoBlock/AddTodoButton/index.tsx @@ -0,0 +1,13 @@ +import Button from '@/components/Button' +import { AddIcon } from '@/components/Icons' + +const AddTodoButton = () => { + return ( + + ) +} + +export default AddTodoButton diff --git a/src/components/TodoBlock/Todo/index.tsx b/src/components/TodoBlock/Todo/index.tsx new file mode 100644 index 0000000..afd2bd7 --- /dev/null +++ b/src/components/TodoBlock/Todo/index.tsx @@ -0,0 +1,37 @@ +import clsx from 'clsx' +import { useState } from 'react' +import CheckBox, { OnChange } from '@/components/CheckBox' +import { Task } from '@/types/block' + +const Todo = ({ isDone, task }: Task) => { + const [isChecked, setIsChecked] = useState(isDone) + const handleCheckTodo: OnChange = ({ selected }) => { + setIsChecked(selected) + } + return ( +
    + + {/* TODO: 추후 공통 Textarea 컴포넌트로 변경 */} +