diff --git a/folder/data-access-folder/index.js b/folder/data-access-folder/index.js deleted file mode 100644 index 1b3705b01..000000000 --- a/folder/data-access-folder/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./useGetFolder"; -export * from "./useGetFolders"; diff --git a/link/ui-card-list/CardList.tsx b/link/ui-card-list/CardList.tsx deleted file mode 100644 index c94321f3d..000000000 --- a/link/ui-card-list/CardList.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ReactNode, forwardRef } from "react"; -import styles from "./CardList.module.scss"; -import classNames from "classnames/bind"; - -const cx = classNames.bind(styles); - -export const CardList = forwardRef(({ children }, ref) => { - return ( -
- {children} -
- ); -}); diff --git a/package-lock.json b/package-lock.json index c1ee4a24d..749343e0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,12 +15,14 @@ "nextjs": "^0.0.3", "react": "^18", "react-dom": "^18", - "sass": "^1.69.4" + "sass": "^1.69.4", + "shared-utils": "^2.0.1" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "encoding": "^0.1.13", "eslint": "^8", "eslint-config-next": "13.5.6", "typescript": "^5" @@ -36,9 +38,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz", - "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz", + "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==", "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" @@ -72,9 +74,9 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz", - "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", + "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", "dev": true, "dependencies": { "ajv": "^6.12.4", @@ -95,9 +97,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.54.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.54.0.tgz", - "integrity": "sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==", + "version": "8.55.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz", + "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -341,9 +343,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.9.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.4.tgz", - "integrity": "sha512-wmyg8HUhcn6ACjsn8oKYjkN/zUzQeNtMy44weTJSM6p4MMzEOuKbA3OjJ267uPCOW7Xex9dyrNTful8XTQYoDA==", + "version": "20.10.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.3.tgz", + "integrity": "sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -356,9 +358,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.2.38", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.38.tgz", - "integrity": "sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==", + "version": "18.2.41", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.41.tgz", + "integrity": "sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -382,15 +384,15 @@ "dev": true }, "node_modules/@typescript-eslint/parser": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.12.0.tgz", - "integrity": "sha512-s8/jNFPKPNRmXEnNXfuo1gemBdVmpQsK1pcu+QIvuNJuhFzGrpD7WjOcvDc/+uEdfzSYpNu7U/+MmbScjoQ6vg==", + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.13.1.tgz", + "integrity": "sha512-fs2XOhWCzRhqMmQf0eicLa/CWSaYss2feXsy7xBD/pLyWke/jCIVc2s1ikEAtSW7ina1HNhv7kONoEfVNEcdDQ==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.12.0", - "@typescript-eslint/types": "6.12.0", - "@typescript-eslint/typescript-estree": "6.12.0", - "@typescript-eslint/visitor-keys": "6.12.0", + "@typescript-eslint/scope-manager": "6.13.1", + "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/typescript-estree": "6.13.1", + "@typescript-eslint/visitor-keys": "6.13.1", "debug": "^4.3.4" }, "engines": { @@ -410,13 +412,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.12.0.tgz", - "integrity": "sha512-5gUvjg+XdSj8pcetdL9eXJzQNTl3RD7LgUiYTl8Aabdi8hFkaGSYnaS6BLc0BGNaDH+tVzVwmKtWvu0jLgWVbw==", + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.13.1.tgz", + "integrity": "sha512-BW0kJ7ceiKi56GbT2KKzZzN+nDxzQK2DS6x0PiSMPjciPgd/JRQGMibyaN2cPt2cAvuoH0oNvn2fwonHI+4QUQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.12.0", - "@typescript-eslint/visitor-keys": "6.12.0" + "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/visitor-keys": "6.13.1" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -427,9 +429,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.12.0.tgz", - "integrity": "sha512-MA16p/+WxM5JG/F3RTpRIcuOghWO30//VEOvzubM8zuOOBYXsP+IfjoCXXiIfy2Ta8FRh9+IO9QLlaFQUU+10Q==", + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.13.1.tgz", + "integrity": "sha512-gjeEskSmiEKKFIbnhDXUyiqVma1gRCQNbVZ1C8q7Zjcxh3WZMbzWVfGE9rHfWd1msQtPS0BVD9Jz9jded44eKg==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -440,13 +442,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.12.0.tgz", - "integrity": "sha512-vw9E2P9+3UUWzhgjyyVczLWxZ3GuQNT7QpnIY3o5OMeLO/c8oHljGc8ZpryBMIyympiAAaKgw9e5Hl9dCWFOYw==", + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.13.1.tgz", + "integrity": "sha512-sBLQsvOC0Q7LGcUHO5qpG1HxRgePbT6wwqOiGLpR8uOJvPJbfs0mW3jPA3ujsDvfiVwVlWUDESNXv44KtINkUQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.12.0", - "@typescript-eslint/visitor-keys": "6.12.0", + "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/visitor-keys": "6.13.1", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -467,12 +469,12 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.12.0.tgz", - "integrity": "sha512-rg3BizTZHF1k3ipn8gfrzDXXSFKyOEB5zxYXInQ6z0hUvmQlhaZQzK+YmHmNViMA9HzW5Q9+bPPt90bU6GQwyw==", + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.13.1.tgz", + "integrity": "sha512-NDhQUy2tg6XGNBGDRm1XybOHSia8mcXmlbKWoQP+nm1BIIMxa55shyJfZkHpEBN62KNPLrocSM2PdPcaLgDKMQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/types": "6.13.1", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -727,6 +729,14 @@ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, + "node_modules/audio-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/audio-utils/-/audio-utils-2.0.2.tgz", + "integrity": "sha512-gPvZRIRntxY2ybakvRFZp7TeEDUUqL4rIPR7zGGFUjnYmaq2KzSxhDG3zbWYVzc1pBjBOwyM7MiKGdU+Mip5Aw==", + "dependencies": { + "shared-utils": "2.x.x" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -837,9 +847,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==", + "version": "1.0.30001566", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz", + "integrity": "sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==", "funding": [ { "type": "opencollective", @@ -980,9 +990,9 @@ "dev": true }, "node_modules/date-fns": { - "version": "3.0.0-alpha.2", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.0.0-alpha.2.tgz", - "integrity": "sha512-iyiPe3OJNTaiSSH0tZmQuXL0EK5hWzh+eHewYZzL9KzGKSgwt0yszO7BRMxgE35f0/iC+g3NxCXDM0WwP2yB5g==", + "version": "3.0.0-rc.2", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.0.0-rc.2.tgz", + "integrity": "sha512-3MAy/Mc7i7LVIayaPnHCNhah7Zaj9/9G9v4pmdJNvMJ+mPahQtrQ4DWm6YxkQjvhRB4gBnjV5UB1ll5ZQxE31w==", "funding": { "type": "opencollective", "url": "https://opencollective.com/date-fns" @@ -1089,6 +1099,15 @@ "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "dev": true }, + "node_modules/encoding": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", + "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "dev": true, + "dependencies": { + "iconv-lite": "^0.6.2" + } + }, "node_modules/enhanced-resolve": { "version": "5.15.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", @@ -1230,15 +1249,15 @@ } }, "node_modules/eslint": { - "version": "8.54.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.54.0.tgz", - "integrity": "sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==", + "version": "8.55.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz", + "integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.3", - "@eslint/js": "8.54.0", + "@eslint/eslintrc": "^2.1.4", + "@eslint/js": "8.55.0", "@humanwhocodes/config-array": "^0.11.13", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", @@ -2083,6 +2102,18 @@ "node": ">= 0.4" } }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/ignore": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz", @@ -2825,13 +2856,13 @@ } }, "node_modules/object.assign": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz", - "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==", + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz", + "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.4", + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", "has-symbols": "^1.0.3", "object-keys": "^1.1.1" }, @@ -3320,6 +3351,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true + }, "node_modules/sass": { "version": "1.69.5", "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", @@ -3388,6 +3425,14 @@ "node": ">= 0.4" } }, + "node_modules/shared-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/shared-utils/-/shared-utils-2.0.1.tgz", + "integrity": "sha512-Vcs19dPxvGA7mQ5AuWqNuQl3YAPf+IbDajXOhiDYE1V5yQ9InxFKyrAUIwut/akGZlMV1zKP9nMgZB0pVwiUkg==", + "dependencies": { + "audio-utils": "x.x.x" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 5893be27b..ea4b4b18f 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,14 @@ "nextjs": "^0.0.3", "react": "^18", "react-dom": "^18", - "sass": "^1.69.4" + "sass": "^1.69.4", + "shared-utils": "^2.0.1" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "encoding": "^0.1.13", "eslint": "^8", "eslint-config-next": "13.5.6", "typescript": "^5" diff --git a/pages/api/hello.ts b/pages/api/hello.ts deleted file mode 100644 index f8bcc7e5c..000000000 --- a/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/FolderPage.tsx b/pages/folder/index.tsx similarity index 56% rename from pages/FolderPage.tsx rename to pages/folder/index.tsx index 055ed858e..076aa3b06 100644 --- a/pages/FolderPage.tsx +++ b/pages/folder/index.tsx @@ -1,18 +1,18 @@ -import { useGetFolders } from '@/folder/data-access-folder'; -import { useGetLinks } from '@/link/data-access-link'; -import { Layout } from '@/sharing/feature-layout'; -import { FolderLayout } from '@/page-layout/FolderLayout'; -import { FolderToolBar } from '@/folder/feature-folder-tool-bar'; -import { SearchBar } from '@/link/ui-search-bar'; +import { useGetFolders } from '@/src/folder/data-access-folder'; +import { useGetLinks } from '@/src/link/data-access-link'; +import { Layout } from '@/src/sharing/feature-layout'; +import { FolderLayout } from '@/src/page-layout/FolderLayout'; +import { FolderToolBar } from '@/src/folder/feature-folder-tool-bar'; +import { SearchBar } from '@/src/link/ui-search-bar'; import { useState } from 'react'; -import { ALL_LINKS_ID } from '@/link/data-access-link/constant'; -import { LinkForm } from '@/link/feature-link-form'; -import { CardList } from '@/link/feature-card-list'; -import { SelectedFolderId } from '@/folder/type'; -import { useSearchLink } from '@/link/util-search-link/useSearchLink'; -import { useIntersectionObserver } from '@/sharing/util/useIntersectionObserver'; +import { ALL_LINKS_ID } from '@/src/link/data-access-link/constant'; +import { LinkForm } from '@/src/link/feature-link-form'; +import { CardList } from '@/src/link/feature-card-list'; +import { SelectedFolderId } from '@/src/folder/type'; +import { useSearchLink } from '@/src/link/util-search-link'; +import { useIntersectionObserver } from '@/src/sharing/util'; -export const FolderPage = () => { +const FolderPage = () => { const { data: folders } = useGetFolders(); const [selectedFolderId, setSelectedFolderId] = useState(ALL_LINKS_ID); @@ -44,3 +44,4 @@ export const FolderPage = () => { ); }; +export default FolderPage; diff --git a/pages/index.tsx b/pages/index.tsx index e55af6ca0..875ce8747 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,17 @@ +import Head from 'next/head'; +import Image from 'next/image'; +import { Inter } from 'next/font/google'; +import styles from '@/styles/Home.module.css'; + +const inter = Inter({ subsets: ['latin'] }); + export default function Home() { - return <>hi; + return ( + <> + + Linkbrary + +
+ + ); } diff --git a/pages/SharedPage.tsx b/pages/shared/index.tsx similarity index 60% rename from pages/SharedPage.tsx rename to pages/shared/index.tsx index a0b3e7057..a3f10df6f 100644 --- a/pages/SharedPage.tsx +++ b/pages/shared/index.tsx @@ -1,13 +1,13 @@ -import { useGetFolder } from '@/folder/data-access-folder'; -import { Layout } from '@/sharing/feature-layout'; -import { SharedLayout } from '@/page-layout/SharedLayout'; -import { CardList } from '@/link/ui-card-list'; -import { FolderInfo } from '@/folder/ui-folder-info'; -import { ReadOnlyCard } from '@/link/ui-read-only-card'; -import { SearchBar } from '@/link/ui-search-bar'; -import { useSearchLink } from '@/link/util-search-link/useSearchLink'; +import { useGetFolder } from '@/src/folder/data-access-folder'; +import { Layout } from '@/src/sharing/feature-layout'; +import { SharedLayout } from '@/src/page-layout/SharedLayout'; +import { CardList } from '@/src/link/ui-card-list'; +import { FolderInfo } from '@/src/folder/ui-folder-info'; +import { ReadOnlyCard } from '@/src/link/ui-read-only-card'; +import { SearchBar } from '@/src/link/ui-search-bar'; +import { useSearchLink } from '@/src/link/util-search-link/useSearchLink'; -export const SharedPage = () => { +const SharedPage = () => { const { data } = useGetFolder(); const { profileImage, ownerName, folderName, links } = data || {}; const { searchValue, handleChange, handleCloseClick, result } = @@ -41,3 +41,5 @@ export const SharedPage = () => { ); }; + +export default SharedPage; diff --git a/sharing/feature-layout/Layout.tsx b/sharing/feature-layout/Layout.tsx deleted file mode 100644 index 66a9c39dd..000000000 --- a/sharing/feature-layout/Layout.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import styles from "./Layout.module.scss"; -import classNames from "classnames/bind"; -import { useGetUser } from "user/data-access-user"; -import { Footer } from "sharing/ui-footer"; -import { NavigationBar } from "sharing/ui-navigation-bar"; -import { ReactNode, RefObject } from "react"; - -const cx = classNames.bind(styles); - -type LayoutProps = { - children: ReactNode; - isSticky?: boolean; - footerRef?: RefObject; -}; - -export const Layout = ({ children, isSticky = true, footerRef }: LayoutProps) => { - const { data } = useGetUser(); - const profile = data ? { email: data.email, imageSource: data.profileImageSource } : null; - - return ( -
- -
{children}
-
-
- ); -}; diff --git a/sharing/ui-input-modal/InputModal.tsx b/sharing/ui-input-modal/InputModal.tsx deleted file mode 100644 index 623c5865e..000000000 --- a/sharing/ui-input-modal/InputModal.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import styles from "./InputModal.module.scss"; -import classNames from "classnames/bind"; -import { ChangeEventHandler, KeyboardEventHandler, MouseEventHandler } from "react"; -import { Input } from "sharing/ui-input"; -import { Modal } from "sharing/ui-modal"; -import { ModalContentBox } from "sharing/ui-modal-content-box"; -import { ModalContentButton } from "sharing/ui-modal-content-button"; -import { ModalContentTitle } from "sharing/ui-modal-content-title"; - -const cx = classNames.bind(styles); - -type InputModalProps = { - isOpen: boolean; - title: string; - placeholder: string; - buttonText: string; - onCloseClick: MouseEventHandler; - onKeyDown: KeyboardEventHandler; - value: string; - onChange: ChangeEventHandler; -}; - -export const InputModal = ({ - isOpen, - title, - placeholder, - buttonText, - onCloseClick, - onKeyDown, - value, - onChange, -}: InputModalProps) => { - return ( - - {title}} - content={ -
- - {}}>{buttonText} -
- } - onCloseClick={onCloseClick} - /> - - ); -}; diff --git a/sharing/ui-navigation-bar/NavigationBar.tsx b/sharing/ui-navigation-bar/NavigationBar.tsx deleted file mode 100644 index 6a1ed7e7c..000000000 --- a/sharing/ui-navigation-bar/NavigationBar.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import styles from "./NavigationBar.module.scss"; -import classNames from "classnames/bind"; -import { ROUTE } from "sharing/util"; -import { Cta } from "sharing/ui-cta"; -import { Profile } from "user/ui-profile"; -import { LOGO_IMAGE, TEXT } from "./constant"; - -const cx = classNames.bind(styles); - -type NavigationBarProps = { - profile: { - imageSource: string; - email: string; - } | null; - isSticky: boolean; -}; - -export const NavigationBar = ({ profile, isSticky }: NavigationBarProps) => { - return ( - - ); -}; diff --git a/sharing/util/index.js b/sharing/util/index.js deleted file mode 100644 index 39ac9bd8b..000000000 --- a/sharing/util/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export * from "./axiosInstance"; -export * from "./constant"; -export * from "./getElapsedTime"; -export * from "./useAsync"; -export * from "./useEffectOnce"; -export * from "./copyToClipboard"; -export * from "./useBackgroundClick"; -export * from "./useKakaoSdk"; -export * from "./useIntersectionObserver"; diff --git a/sign/styles/global.scss b/sign/styles/global.scss deleted file mode 100644 index 7ea93de24..000000000 --- a/sign/styles/global.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "./colors.scss"; -@import "./variables.scss"; -@import "./mixin.scss"; diff --git a/src/folder/data-access-folder/index.js b/src/folder/data-access-folder/index.js new file mode 100644 index 000000000..b5f921888 --- /dev/null +++ b/src/folder/data-access-folder/index.js @@ -0,0 +1,2 @@ +export * from './useGetFolder'; +export * from './useGetFolders'; diff --git a/folder/data-access-folder/useGetFolder.ts b/src/folder/data-access-folder/useGetFolder.ts similarity index 58% rename from folder/data-access-folder/useGetFolder.ts rename to src/folder/data-access-folder/useGetFolder.ts index ebe52cf94..75cd3890b 100644 --- a/folder/data-access-folder/useGetFolder.ts +++ b/src/folder/data-access-folder/useGetFolder.ts @@ -1,7 +1,7 @@ -import { SampleFolderRawData } from '@/folder/type'; -import { mapFolderData } from '@/folder/util-map'; -import { useAsync } from '@/sharing/util'; -import { axiosInstance } from '@/sharing/util'; +import { SampleFolderRawData } from '@/src/folder/type'; +import { mapFolderData } from '@/src/folder/util-map'; +import { useAsync } from '@/src/sharing/util'; +import { axiosInstance } from '@/src/sharing/util'; export const useGetFolder = () => { const getFolder = () => diff --git a/folder/data-access-folder/useGetFolders.ts b/src/folder/data-access-folder/useGetFolders.ts similarity index 61% rename from folder/data-access-folder/useGetFolders.ts rename to src/folder/data-access-folder/useGetFolders.ts index dd616d190..cf326560a 100644 --- a/folder/data-access-folder/useGetFolders.ts +++ b/src/folder/data-access-folder/useGetFolders.ts @@ -1,7 +1,7 @@ -import { FolderRawData } from '../../folder/type'; -import { mapFoldersData } from '../util-map/mapFoldersData'; -import { axiosInstance } from '../../sharing/util'; -import { useAsync } from '../../sharing/util'; +import { FolderRawData } from '@/src/folder/type'; +import { mapFoldersData } from '@/src/folder/util-map/mapFoldersData'; +import { axiosInstance } from '@/src/sharing/util'; +import { useAsync } from '@/src/sharing/util'; export const useGetFolders = () => { const getFolders = () => diff --git a/folder/feature-folder-tool-bar/FolderToolBar.module.scss b/src/folder/feature-folder-tool-bar/FolderToolBar.module.scss similarity index 89% rename from folder/feature-folder-tool-bar/FolderToolBar.module.scss rename to src/folder/feature-folder-tool-bar/FolderToolBar.module.scss index 640146d20..b362ba2d4 100644 --- a/folder/feature-folder-tool-bar/FolderToolBar.module.scss +++ b/src/folder/feature-folder-tool-bar/FolderToolBar.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .container { display: flex; @@ -9,8 +9,8 @@ @include tablet { display: grid; grid-template-areas: - "folders folders add-button" - "folder-name buttons buttons"; + 'folders folders add-button' + 'folder-name buttons buttons'; justify-content: space-between; align-items: center; row-gap: 2.4rem; diff --git a/folder/feature-folder-tool-bar/FolderToolBar.tsx b/src/folder/feature-folder-tool-bar/FolderToolBar.tsx similarity index 65% rename from folder/feature-folder-tool-bar/FolderToolBar.tsx rename to src/folder/feature-folder-tool-bar/FolderToolBar.tsx index 8cc664317..03cbf1afb 100644 --- a/folder/feature-folder-tool-bar/FolderToolBar.tsx +++ b/src/folder/feature-folder-tool-bar/FolderToolBar.tsx @@ -1,16 +1,21 @@ -import styles from "./FolderToolBar.module.scss"; -import classNames from "classnames/bind"; -import { AddFolderButton } from "folder/ui-add-folder-button"; -import { FolderButton } from "folder/ui-folder-button"; -import { IconAndTextButton } from "sharing/ui-icon-and-text-button"; -import { ALL_LINKS_TEXT, BUTTONS, KAKAO_SHARE_DATA, MODALS_ID } from "./constant"; -import { ALL_LINKS_ID } from "link/data-access-link/constant"; -import { KeyboardEvent, useState } from "react"; -import { ShareModal } from "folder/ui-share-modal"; -import { InputModal } from "sharing/ui-input-modal"; -import { AlertModal } from "sharing/ui-alert-modal"; -import { Folder, SelectedFolderId } from "folder/type"; -import { copyToClipboard, useKakaoSdk } from "sharing/util"; +import styles from './FolderToolBar.module.scss'; +import classNames from 'classnames/bind'; +import { AddFolderButton } from '@/src/folder/ui-add-folder-button'; +import { FolderButton } from '@/src/folder/ui-folder-button'; +import { IconAndTextButton } from '@/src/sharing/ui-icon-and-text-button'; +import { + ALL_LINKS_TEXT, + BUTTONS, + KAKAO_SHARE_DATA, + MODALS_ID, +} from './constant'; +import { ALL_LINKS_ID } from '@/src/link/data-access-link/constant'; +import { KeyboardEvent, useState } from 'react'; +import { ShareModal } from '@/src/folder/ui-share-modal'; +import { InputModal } from '@/src/sharing/ui-input-modal'; +import { AlertModal } from '@/src/sharing/ui-alert-modal'; +import { Folder, SelectedFolderId } from '@/src/folder/type'; +import { copyToClipboard, useKakaoSdk } from '@/src/sharing/util'; const cx = classNames.bind(styles); @@ -20,33 +25,38 @@ type FolderToolBarProps = { onFolderClick: (folderId: SelectedFolderId) => void; }; -export const FolderToolBar = ({ folders, selectedFolderId, onFolderClick }: FolderToolBarProps) => { +export const FolderToolBar = ({ + folders, + selectedFolderId, + onFolderClick, +}: FolderToolBarProps) => { const { shareKakao } = useKakaoSdk(); const [currentModal, setCurrentModal] = useState(null); - const [inputValue, setInputValue] = useState(""); + const [inputValue, setInputValue] = useState(''); const folderName = ALL_LINKS_ID === selectedFolderId ? ALL_LINKS_TEXT - : folders?.find(({ id }) => id === selectedFolderId)?.name ?? ""; - const shareLink = `${window.location.origin}/shared?user=1&folder=${selectedFolderId}`; + : folders?.find(({ id }) => id === selectedFolderId)?.name ?? ''; + const getShareLink = () => + `${window.location.origin}/shared?user=1&folder=${selectedFolderId}`; const closeModal = () => setCurrentModal(null); const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === "Escape") { + if (event.key === 'Escape') { closeModal(); } }; const handleKakaoClick = () => { - shareKakao({ url: shareLink, ...KAKAO_SHARE_DATA }); + shareKakao({ url: getShareLink(), ...KAKAO_SHARE_DATA }); }; const handleFacebookClick = () => - window.open(`http://www.facebook.com/sharer.php?u=${shareLink}`); - const handleLinkCopyClick = () => copyToClipboard(shareLink); + window?.open(`http://www.facebook.com/sharer.php?u=${getShareLink()}`); + const handleLinkCopyClick = () => copyToClipboard(getShareLink()); return ( -
-
+
+
))}
-
+
setCurrentModal(MODALS_ID.addFolder)} /> setInputValue(event.target.value)} />
-

{folderName}

+

{folderName}

{selectedFolderId !== ALL_LINKS_ID && ( -
+
{BUTTONS.map(({ text, iconSource, modalId }) => ( { + const { id, createdAt, url, imageSource, title, description } = link; + + return { + id, + title, + url, + imageSource, + alt: `${title ?? url}의 대표 이미지`, + elapsedTime: getElapsedTime(createdAt), + description, + createdAt: format(new Date(createdAt), 'yyyy. MM. dd'), + }; +}; diff --git a/folder/type.ts b/src/folder/type.ts similarity index 81% rename from folder/type.ts rename to src/folder/type.ts index 95c58a550..ef42d5e4a 100644 --- a/folder/type.ts +++ b/src/folder/type.ts @@ -1,4 +1,4 @@ -import { SampleLinkRawData } from "link/type"; +import { SampleLinkRawData } from '@/src/link/type'; export type SampleFolderRawData = { id: number; @@ -29,4 +29,4 @@ export type Folder = { linkCount: number; }; -export type SelectedFolderId = number | "all"; +export type SelectedFolderId = number | 'all'; diff --git a/folder/ui-add-folder-button/AddFolderButton.module.scss b/src/folder/ui-add-folder-button/AddFolderButton.module.scss similarity index 91% rename from folder/ui-add-folder-button/AddFolderButton.module.scss rename to src/folder/ui-add-folder-button/AddFolderButton.module.scss index 85a1f7af2..9d7ea08ed 100644 --- a/folder/ui-add-folder-button/AddFolderButton.module.scss +++ b/src/folder/ui-add-folder-button/AddFolderButton.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .container { display: flex; diff --git a/folder/ui-add-folder-button/AddFolderButton.tsx b/src/folder/ui-add-folder-button/AddFolderButton.tsx similarity index 100% rename from folder/ui-add-folder-button/AddFolderButton.tsx rename to src/folder/ui-add-folder-button/AddFolderButton.tsx diff --git a/folder/ui-add-folder-button/add.svg b/src/folder/ui-add-folder-button/add.svg similarity index 100% rename from folder/ui-add-folder-button/add.svg rename to src/folder/ui-add-folder-button/add.svg diff --git a/folder/ui-add-folder-button/index.js b/src/folder/ui-add-folder-button/index.js similarity index 100% rename from folder/ui-add-folder-button/index.js rename to src/folder/ui-add-folder-button/index.js diff --git a/folder/ui-folder-button/FolderButton.module.scss b/src/folder/ui-folder-button/FolderButton.module.scss similarity index 90% rename from folder/ui-folder-button/FolderButton.module.scss rename to src/folder/ui-folder-button/FolderButton.module.scss index a59c86a2b..4485c9c2c 100644 --- a/folder/ui-folder-button/FolderButton.module.scss +++ b/src/folder/ui-folder-button/FolderButton.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .container { display: flex; diff --git a/folder/ui-folder-button/FolderButton.tsx b/src/folder/ui-folder-button/FolderButton.tsx similarity index 100% rename from folder/ui-folder-button/FolderButton.tsx rename to src/folder/ui-folder-button/FolderButton.tsx diff --git a/folder/ui-folder-button/index.js b/src/folder/ui-folder-button/index.js similarity index 100% rename from folder/ui-folder-button/index.js rename to src/folder/ui-folder-button/index.js diff --git a/folder/ui-folder-info/FolderInfo.module.scss b/src/folder/ui-folder-info/FolderInfo.module.scss similarity index 93% rename from folder/ui-folder-info/FolderInfo.module.scss rename to src/folder/ui-folder-info/FolderInfo.module.scss index 61a12d163..aab2f3c5f 100644 --- a/folder/ui-folder-info/FolderInfo.module.scss +++ b/src/folder/ui-folder-info/FolderInfo.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .container { display: flex; diff --git a/folder/ui-folder-info/FolderInfo.tsx b/src/folder/ui-folder-info/FolderInfo.tsx similarity index 100% rename from folder/ui-folder-info/FolderInfo.tsx rename to src/folder/ui-folder-info/FolderInfo.tsx diff --git a/folder/ui-folder-info/index.js b/src/folder/ui-folder-info/index.js similarity index 100% rename from folder/ui-folder-info/index.js rename to src/folder/ui-folder-info/index.js diff --git a/folder/ui-folder-item/FolderItem.module.scss b/src/folder/ui-folder-item/FolderItem.module.scss similarity index 91% rename from folder/ui-folder-item/FolderItem.module.scss rename to src/folder/ui-folder-item/FolderItem.module.scss index 62a075a8c..a46a097c7 100644 --- a/folder/ui-folder-item/FolderItem.module.scss +++ b/src/folder/ui-folder-item/FolderItem.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .button { flex: 0 0 4rem; diff --git a/folder/ui-folder-item/FolderItem.tsx b/src/folder/ui-folder-item/FolderItem.tsx similarity index 100% rename from folder/ui-folder-item/FolderItem.tsx rename to src/folder/ui-folder-item/FolderItem.tsx diff --git a/folder/ui-folder-item/index.js b/src/folder/ui-folder-item/index.js similarity index 100% rename from folder/ui-folder-item/index.js rename to src/folder/ui-folder-item/index.js diff --git a/folder/ui-share-modal/ShareModal.module.scss b/src/folder/ui-share-modal/ShareModal.module.scss similarity index 89% rename from folder/ui-share-modal/ShareModal.module.scss rename to src/folder/ui-share-modal/ShareModal.module.scss index 3e42f9e01..e73db30c8 100644 --- a/folder/ui-share-modal/ShareModal.module.scss +++ b/src/folder/ui-share-modal/ShareModal.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .modal-header { display: flex; diff --git a/folder/ui-share-modal/ShareModal.tsx b/src/folder/ui-share-modal/ShareModal.tsx similarity index 58% rename from folder/ui-share-modal/ShareModal.tsx rename to src/folder/ui-share-modal/ShareModal.tsx index 1142ec57f..72b08942b 100644 --- a/folder/ui-share-modal/ShareModal.tsx +++ b/src/folder/ui-share-modal/ShareModal.tsx @@ -1,13 +1,13 @@ -import styles from "./ShareModal.module.scss"; -import classNames from "classnames/bind"; -import { Modal } from "sharing/ui-modal"; -import { ModalContentBox } from "sharing/ui-modal-content-box"; -import { ModalContentDescription } from "sharing/ui-modal-content-description"; -import { ModalContentTitle } from "sharing/ui-modal-content-title"; -import { ReactComponent as KakaoIcon } from "./kakao.svg"; -import { ReactComponent as FacebookIcon } from "./facebook.svg"; -import { ReactComponent as LinkIcon } from "./link.svg"; -import { KeyboardEventHandler, MouseEventHandler } from "react"; +import styles from './ShareModal.module.scss'; +import classNames from 'classnames/bind'; +import { Modal } from '@/src/sharing/ui-modal'; +import { ModalContentBox } from '@/src/sharing/ui-modal-content-box'; +import { ModalContentDescription } from '@/src/sharing/ui-modal-content-description'; +import { ModalContentTitle } from '@/src/sharing/ui-modal-content-title'; +import { ReactComponent as KakaoIcon } from './kakao.svg'; +import { ReactComponent as FacebookIcon } from './facebook.svg'; +import { ReactComponent as LinkIcon } from './link.svg'; +import { KeyboardEventHandler, MouseEventHandler } from 'react'; const cx = classNames.bind(styles); @@ -34,22 +34,22 @@ export const ShareModal = ({ +
폴더 공유 {folderName}
} content={ -
- - - diff --git a/folder/ui-share-modal/facebook.svg b/src/folder/ui-share-modal/facebook.svg similarity index 100% rename from folder/ui-share-modal/facebook.svg rename to src/folder/ui-share-modal/facebook.svg diff --git a/folder/ui-share-modal/index.js b/src/folder/ui-share-modal/index.js similarity index 100% rename from folder/ui-share-modal/index.js rename to src/folder/ui-share-modal/index.js diff --git a/folder/ui-share-modal/kakao.svg b/src/folder/ui-share-modal/kakao.svg similarity index 100% rename from folder/ui-share-modal/kakao.svg rename to src/folder/ui-share-modal/kakao.svg diff --git a/folder/ui-share-modal/link.svg b/src/folder/ui-share-modal/link.svg similarity index 100% rename from folder/ui-share-modal/link.svg rename to src/folder/ui-share-modal/link.svg diff --git a/folder/util-map/constant.ts b/src/folder/util-map/constant.ts similarity index 100% rename from folder/util-map/constant.ts rename to src/folder/util-map/constant.ts diff --git a/folder/util-map/index.js b/src/folder/util-map/index.js similarity index 100% rename from folder/util-map/index.js rename to src/folder/util-map/index.js diff --git a/folder/util-map/mapFolderData.ts b/src/folder/util-map/mapFolderData.ts similarity index 100% rename from folder/util-map/mapFolderData.ts rename to src/folder/util-map/mapFolderData.ts diff --git a/folder/util-map/mapFoldersData.ts b/src/folder/util-map/mapFoldersData.ts similarity index 100% rename from folder/util-map/mapFoldersData.ts rename to src/folder/util-map/mapFoldersData.ts diff --git a/link/data-access-link/constant.js b/src/link/data-access-link/constant.js similarity index 100% rename from link/data-access-link/constant.js rename to src/link/data-access-link/constant.js diff --git a/link/data-access-link/index.js b/src/link/data-access-link/index.js similarity index 100% rename from link/data-access-link/index.js rename to src/link/data-access-link/index.js diff --git a/link/data-access-link/useGetLinks.ts b/src/link/data-access-link/useGetLinks.ts similarity index 57% rename from link/data-access-link/useGetLinks.ts rename to src/link/data-access-link/useGetLinks.ts index d6e9dd029..4a381f7b9 100644 --- a/link/data-access-link/useGetLinks.ts +++ b/src/link/data-access-link/useGetLinks.ts @@ -1,16 +1,17 @@ -import { useCallback, useEffect } from "react"; -import { axiosInstance } from "sharing/util"; -import { mapLinksData } from "link/util-map/mapLinksData"; -import { useAsync } from "sharing/util"; -import { ALL_LINKS_ID } from "./constant"; -import { SelectedFolderId } from "folder/type"; -import { LinkRawData } from "link/type"; +import { useCallback, useEffect } from 'react'; +import { axiosInstance } from '@/src/sharing/util'; +import { mapLinksData } from '@/src/link/util-map/mapLinksData'; +import { useAsync } from '@/src/sharing/util'; +import { ALL_LINKS_ID } from './constant'; +import { SelectedFolderId } from '@/src/folder/type'; +import { LinkRawData } from '@/src/link/type'; export const useGetLinks = (folderId: SelectedFolderId = ALL_LINKS_ID) => { - const queryString = folderId === ALL_LINKS_ID ? "" : `?folderId=${folderId}`; + const queryString = folderId === ALL_LINKS_ID ? '' : `?folderId=${folderId}`; const getLinks = useCallback( - () => axiosInstance.get<{ data: LinkRawData[] }>(`users/1/links${queryString}`), - [queryString] + () => + axiosInstance.get<{ data: LinkRawData[] }>(`users/1/links${queryString}`), + [queryString], ); const { execute, loading, error, data } = useAsync(getLinks); diff --git a/link/feature-card-list/CardList.tsx b/src/link/feature-card-list/CardList.tsx similarity index 74% rename from link/feature-card-list/CardList.tsx rename to src/link/feature-card-list/CardList.tsx index 2bfd9bec5..0cf52ab01 100644 --- a/link/feature-card-list/CardList.tsx +++ b/src/link/feature-card-list/CardList.tsx @@ -1,12 +1,12 @@ -import { useGetFolders } from "folder/data-access-folder"; -import { AddLinkModal } from "link/ui-add-link-modal"; -import { EditableCard } from "link/ui-editable-card"; -import { NoLink } from "link/ui-no-link"; -import { KeyboardEventHandler, useCallback, useRef, useState } from "react"; -import { CardList as UiCardList } from "link/ui-card-list"; -import { AlertModal } from "sharing/ui-alert-modal"; -import { MODALS_ID } from "./constant"; -import { Link } from "link/type"; +import { useGetFolders } from '@/src/folder/data-access-folder'; +import { AddLinkModal } from '@/src/link/ui-add-link-modal'; +import { EditableCard } from '@/src/link/ui-editable-card'; +import { NoLink } from '@/src/link/ui-no-link'; +import { KeyboardEventHandler, useCallback, useRef, useState } from 'react'; +import { CardList as UiCardList } from '@/src/link/ui-card-list'; +import { AlertModal } from '@/src/sharing/ui-alert-modal'; +import { MODALS_ID } from '@/src/folder/feature-folder-tool-bar/constant'; +import { Link } from '@/src/link/type'; type CardListProps = { links: Link[]; @@ -17,11 +17,11 @@ export const CardList = ({ links }: CardListProps) => { const cardListRef = useRef(null); const [selectedFolderId, setSelectedFolderId] = useState(null); const [currentModal, setCurrentModal] = useState(null); - const [selectedLinkUrl, setSelectedLinkUrl] = useState(""); + const [selectedLinkUrl, setSelectedLinkUrl] = useState(''); const closeModal = () => setCurrentModal(null); const handleKeyDown: KeyboardEventHandler = (event) => { - if (event.key === "Escape") { + if (event.key === 'Escape') { closeModal(); } }; @@ -32,15 +32,15 @@ export const CardList = ({ links }: CardListProps) => { cardListRef?.current !== null ? window .getComputedStyle(cardListRef?.current) - .getPropertyValue("grid-template-columns") - .split(" ").length + .getPropertyValue('grid-template-columns') + .split(' ').length : 1; if ((cardIndex + 1) % count === 0) { return { right: 0 }; } return { left: 0 }; }, - [cardListRef] + [cardListRef], ); if (links.length === 0) return ; @@ -52,11 +52,11 @@ export const CardList = ({ links }: CardListProps) => { {...link} popoverPosition={getPopoverPosition(index)} onDeleteClick={() => { - setSelectedLinkUrl(link?.url ?? ""); + setSelectedLinkUrl(link?.url ?? ''); setCurrentModal(MODALS_ID.deleteLink); }} onAddToFolderClick={() => { - setSelectedLinkUrl(link?.url ?? ""); + setSelectedLinkUrl(link?.url ?? ''); setCurrentModal(MODALS_ID.addToFolder); }} /> diff --git a/link/feature-card-list/constant.js b/src/link/feature-card-list/constant.js similarity index 100% rename from link/feature-card-list/constant.js rename to src/link/feature-card-list/constant.js diff --git a/link/feature-card-list/index.js b/src/link/feature-card-list/index.js similarity index 100% rename from link/feature-card-list/index.js rename to src/link/feature-card-list/index.js diff --git a/link/feature-link-form/LinkForm.module.scss b/src/link/feature-link-form/LinkForm.module.scss similarity index 89% rename from link/feature-link-form/LinkForm.module.scss rename to src/link/feature-link-form/LinkForm.module.scss index fa8be6765..875e0718b 100644 --- a/link/feature-link-form/LinkForm.module.scss +++ b/src/link/feature-link-form/LinkForm.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .container { display: flex; diff --git a/link/feature-link-form/LinkForm.tsx b/src/link/feature-link-form/LinkForm.tsx similarity index 71% rename from link/feature-link-form/LinkForm.tsx rename to src/link/feature-link-form/LinkForm.tsx index a9dd3808b..64191aa73 100644 --- a/link/feature-link-form/LinkForm.tsx +++ b/src/link/feature-link-form/LinkForm.tsx @@ -1,10 +1,10 @@ -import styles from "./LinkForm.module.scss"; -import classNames from "classnames/bind"; -import { useGetFolders } from "folder/data-access-folder"; -import { AddLinkModal } from "link/ui-add-link-modal"; -import { LinkForm as UiLinkForm } from "link/ui-link-form"; -import { ChangeEvent, KeyboardEventHandler, useState } from "react"; -import { useIntersectionObserver } from "sharing/util/useIntersectionObserver"; +import styles from './LinkForm.module.scss'; +import classNames from 'classnames/bind'; +import { useGetFolders } from '@/src/folder/data-access-folder'; +import { AddLinkModal } from '@/src/link/ui-add-link-modal'; +import { LinkForm as UiLinkForm } from '@/src/link/ui-link-form'; +import { ChangeEvent, KeyboardEventHandler, useState } from 'react'; +import { useIntersectionObserver } from '@/src/sharing/util/useIntersectionObserver'; const cx = classNames.bind(styles); @@ -16,7 +16,7 @@ export const LinkForm = ({ hideFixedLinkForm = false }: LinkFormProps) => { const [isModalOpen, setIsModalOpen] = useState(false); const { data: folders } = useGetFolders(); const [selectedFolderId, setSelectedFolderId] = useState(null); - const [linkUrl, setLinkUrl] = useState(""); + const [linkUrl, setLinkUrl] = useState(''); const { ref, isIntersecting } = useIntersectionObserver(); const showFixedLinkForm = !hideFixedLinkForm && !isIntersecting; @@ -29,13 +29,13 @@ export const LinkForm = ({ hideFixedLinkForm = false }: LinkFormProps) => { setIsModalOpen(false); }; const handleKeyDown: KeyboardEventHandler = (event) => { - if (event.key === "Escape") { + if (event.key === 'Escape') { closeModal(); } }; return ( -
+
setIsModalOpen(true)} @@ -54,7 +54,7 @@ export const LinkForm = ({ hideFixedLinkForm = false }: LinkFormProps) => { /> {showFixedLinkForm && ( -
+
setIsModalOpen(true)} value={linkUrl} diff --git a/link/feature-link-form/index.js b/src/link/feature-link-form/index.js similarity index 100% rename from link/feature-link-form/index.js rename to src/link/feature-link-form/index.js diff --git a/link/type.ts b/src/link/type.ts similarity index 100% rename from link/type.ts rename to src/link/type.ts diff --git a/link/ui-add-link-modal/AddLinkModal.module.scss b/src/link/ui-add-link-modal/AddLinkModal.module.scss similarity index 100% rename from link/ui-add-link-modal/AddLinkModal.module.scss rename to src/link/ui-add-link-modal/AddLinkModal.module.scss diff --git a/link/ui-add-link-modal/AddLinkModal.tsx b/src/link/ui-add-link-modal/AddLinkModal.tsx similarity index 59% rename from link/ui-add-link-modal/AddLinkModal.tsx rename to src/link/ui-add-link-modal/AddLinkModal.tsx index d155b5ad1..a26579cc1 100644 --- a/link/ui-add-link-modal/AddLinkModal.tsx +++ b/src/link/ui-add-link-modal/AddLinkModal.tsx @@ -1,13 +1,13 @@ -import styles from "./AddLinkModal.module.scss"; -import classNames from "classnames/bind"; -import { Folder } from "folder/type"; -import { FolderItem } from "folder/ui-folder-item"; -import { Dispatch, KeyboardEventHandler, SetStateAction } from "react"; -import { Modal } from "sharing/ui-modal"; -import { ModalContentBox } from "sharing/ui-modal-content-box"; -import { ModalContentButton } from "sharing/ui-modal-content-button"; -import { ModalContentDescription } from "sharing/ui-modal-content-description"; -import { ModalContentTitle } from "sharing/ui-modal-content-title"; +import styles from './AddLinkModal.module.scss'; +import classNames from 'classnames/bind'; +import { Folder } from '@/src/folder/type'; +import { FolderItem } from '@/src/folder/ui-folder-item'; +import { Dispatch, KeyboardEventHandler, SetStateAction } from 'react'; +import { Modal } from '@/src/sharing/ui-modal'; +import { ModalContentBox } from '@/src/sharing/ui-modal-content-box'; +import { ModalContentButton } from '@/src/sharing/ui-modal-content-button'; +import { ModalContentDescription } from '@/src/sharing/ui-modal-content-description'; +import { ModalContentTitle } from '@/src/sharing/ui-modal-content-title'; const cx = classNames.bind(styles); @@ -36,14 +36,14 @@ export const AddLinkModal = ({ +
폴더에 추가 {description}
} content={ -
-
+
+
{folders?.map(({ id, name, linkCount }) => ( ))}
- 추가하기 + + 추가하기 +
} onCloseClick={onCloseClick} diff --git a/link/ui-add-link-modal/index.js b/src/link/ui-add-link-modal/index.js similarity index 100% rename from link/ui-add-link-modal/index.js rename to src/link/ui-add-link-modal/index.js diff --git a/link/ui-card-list/CardList.module.scss b/src/link/ui-card-list/CardList.module.scss similarity index 86% rename from link/ui-card-list/CardList.module.scss rename to src/link/ui-card-list/CardList.module.scss index 5a88cc17f..97055e86a 100644 --- a/link/ui-card-list/CardList.module.scss +++ b/src/link/ui-card-list/CardList.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .container { display: grid; diff --git a/src/link/ui-card-list/CardList.tsx b/src/link/ui-card-list/CardList.tsx new file mode 100644 index 000000000..75a713d52 --- /dev/null +++ b/src/link/ui-card-list/CardList.tsx @@ -0,0 +1,16 @@ +/* eslint-disable react/display-name */ +import { ReactNode, forwardRef } from 'react'; +import styles from './CardList.module.scss'; +import classNames from 'classnames/bind'; + +const cx = classNames.bind(styles); + +export const CardList = forwardRef( + ({ children }, ref) => { + return ( +
+ {children} +
+ ); + }, +); diff --git a/link/ui-card-list/index.js b/src/link/ui-card-list/index.js similarity index 100% rename from link/ui-card-list/index.js rename to src/link/ui-card-list/index.js diff --git a/link/ui-editable-card/EditableCard.module.scss b/src/link/ui-editable-card/EditableCard.module.scss similarity index 93% rename from link/ui-editable-card/EditableCard.module.scss rename to src/link/ui-editable-card/EditableCard.module.scss index 12743e2eb..64e1dc47a 100644 --- a/link/ui-editable-card/EditableCard.module.scss +++ b/src/link/ui-editable-card/EditableCard.module.scss @@ -1,4 +1,4 @@ -@import "sharing/styles/global.scss"; +@import '@/src/sharing/styles/global.scss'; .star { position: absolute; diff --git a/link/ui-editable-card/EditableCard.tsx b/src/link/ui-editable-card/EditableCard.tsx similarity index 73% rename from link/ui-editable-card/EditableCard.tsx rename to src/link/ui-editable-card/EditableCard.tsx index 47ea19371..04f73fd96 100644 --- a/link/ui-editable-card/EditableCard.tsx +++ b/src/link/ui-editable-card/EditableCard.tsx @@ -1,10 +1,16 @@ -import styles from "./EditableCard.module.scss"; -import classNames from "classnames/bind"; -import { CSSProperties, MouseEventHandler, useCallback, useRef, useState } from "react"; -import { Card } from "sharing/ui-card"; -import { CardContent } from "sharing/ui-card-content"; -import { CardImage } from "sharing/ui-card-image"; -import { Popover } from "sharing/ui-popover"; +import styles from './EditableCard.module.scss'; +import classNames from 'classnames/bind'; +import { + CSSProperties, + MouseEventHandler, + useCallback, + useRef, + useState, +} from 'react'; +import { Card } from '@/src/sharing/ui-card'; +import { CardContent } from '@/src/sharing/ui-card-content'; +import { CardImage } from '@/src/sharing/ui-card-image'; +import { Popover } from '@/src/sharing/ui-popover'; const cx = classNames.bind(styles); @@ -16,10 +22,10 @@ type EditableCardProps = { description: string; createdAt: string; popoverPosition: { - top?: CSSProperties["top"]; - right?: CSSProperties["right"]; - bottom?: CSSProperties["bottom"]; - left?: CSSProperties["left"]; + top?: CSSProperties['top']; + right?: CSSProperties['right']; + bottom?: CSSProperties['bottom']; + left?: CSSProperties['left']; }; onDeleteClick: () => void; onAddToFolderClick: () => void; @@ -69,10 +75,17 @@ export const EditableCard = ({ createdAt={createdAt} isHovered={isHovered} /> - - -