From d7bf5c83f207d7330995fbd9649c09522e0314e8 Mon Sep 17 00:00:00 2001 From: withsang Date: Fri, 17 Nov 2023 05:44:49 +0900 Subject: [PATCH 1/6] feat(header): add header & footer --- index.html | 5 + package.json | 3 +- pnpm-lock.yaml | 229 +++++++++++++++++++++++++++- src/assets/NewWaysLogo.svg | 9 ++ src/assets/SNSHomepage.svg | 11 ++ src/assets/SNSInstagram.svg | 11 ++ src/assets/SNSLinkedin.svg | 13 ++ src/assets/SNSYoutube.svg | 11 ++ src/assets/index.ts | 5 + src/components/organisms/Footer.tsx | 72 +++++++++ src/components/organisms/Header.tsx | 12 ++ src/components/organisms/index.ts | 2 + src/components/pages/Test.tsx | 33 +--- src/components/templates/Layout.tsx | 48 ++++++ src/components/templates/index.ts | 1 + tsconfig.json | 1 + vite.config.ts | 2 + 17 files changed, 434 insertions(+), 34 deletions(-) create mode 100644 src/assets/NewWaysLogo.svg create mode 100644 src/assets/SNSHomepage.svg create mode 100644 src/assets/SNSInstagram.svg create mode 100644 src/assets/SNSLinkedin.svg create mode 100644 src/assets/SNSYoutube.svg create mode 100644 src/components/organisms/Footer.tsx create mode 100644 src/components/organisms/Header.tsx create mode 100644 src/components/templates/Layout.tsx diff --git a/index.html b/index.html index a53d67c..12e02b8 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,11 @@ + 뉴웨이즈 다양성 평가 리포트 diff --git a/package.json b/package.json index ad486af..7d7675f 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "prettier": "^3.0.3", "typescript": "^5.2.2", - "vite": "^4.4.10" + "vite": "^4.4.10", + "vite-plugin-svgr": "^4.1.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5d0a17a..109320c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -88,6 +88,9 @@ devDependencies: vite: specifier: ^4.4.10 version: 4.4.10(@types/node@20.8.2) + vite-plugin-svgr: + specifier: ^4.1.0 + version: 4.1.0(typescript@5.2.2)(vite@4.4.10) packages: @@ -1857,6 +1860,146 @@ packages: engines: {node: '>=14.0.0'} dev: false + /@rollup/pluginutils@5.0.5: + resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.5 + estree-walker: 2.0.2 + picomatch: 2.3.1 + dev: true + + /@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.23.0): + resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.23.0): + resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.23.0): + resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.23.0): + resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.23.0): + resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.23.0): + resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.23.0): + resolution: {integrity: sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.23.0): + resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==} + engines: {node: '>=12'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + dev: true + + /@svgr/babel-preset@8.1.0(@babel/core@7.23.0): + resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.0 + '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.23.0) + '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.23.0) + '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.23.0) + '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.23.0) + '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.23.0) + '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.23.0) + '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.23.0) + '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.23.0) + dev: true + + /@svgr/core@8.1.0(typescript@5.2.2): + resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==} + engines: {node: '>=14'} + dependencies: + '@babel/core': 7.23.0 + '@svgr/babel-preset': 8.1.0(@babel/core@7.23.0) + camelcase: 6.3.0 + cosmiconfig: 8.3.6(typescript@5.2.2) + snake-case: 3.0.4 + transitivePeerDependencies: + - supports-color + - typescript + dev: true + + /@svgr/hast-util-to-babel-ast@8.0.0: + resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==} + engines: {node: '>=14'} + dependencies: + '@babel/types': 7.23.0 + entities: 4.5.0 + dev: true + + /@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0): + resolution: {integrity: sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==} + engines: {node: '>=14'} + peerDependencies: + '@svgr/core': '*' + dependencies: + '@babel/core': 7.23.0 + '@svgr/babel-preset': 8.1.0(@babel/core@7.23.0) + '@svgr/core': 8.1.0(typescript@5.2.2) + '@svgr/hast-util-to-babel-ast': 8.0.0 + svg-parser: 2.0.4 + transitivePeerDependencies: + - supports-color + dev: true + /@turf/bbox-polygon@6.5.0: resolution: {integrity: sha512-+/r0NyL1lOG3zKZmmf6L8ommU07HliP4dgYToMoTxqzsWzyLjaj/OzgQ8rBmv703WJX+aS6yCmLuIhYqyufyuw==} dependencies: @@ -1944,6 +2087,10 @@ packages: resolution: {integrity: sha512-jhAJzaanK5LqyLQ50jJNIrB8fjL9gwWZTgYjevPvkDLMU+kTAZkYsobI59nYoeSrH1PucuyJEi247Pb90t6XUg==} dev: false + /@types/estree@1.0.5: + resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + dev: true + /@types/geojson@7946.0.13: resolution: {integrity: sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==} dev: false @@ -2514,6 +2661,11 @@ packages: engines: {node: '>=0.10.0'} dev: false + /camelcase@6.3.0: + resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} + engines: {node: '>=10'} + dev: true + /caniuse-lite@1.0.30001543: resolution: {integrity: sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==} dev: true @@ -2650,6 +2802,22 @@ packages: yaml: 1.10.2 dev: false + /cosmiconfig@8.3.6(typescript@5.2.2): + resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==} + engines: {node: '>=14'} + peerDependencies: + typescript: '>=4.9.5' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + import-fresh: 3.3.0 + js-yaml: 4.1.0 + parse-json: 5.2.0 + path-type: 4.0.0 + typescript: 5.2.2 + dev: true + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -2919,6 +3087,13 @@ packages: resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==} dev: false + /dot-case@3.0.4: + resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} + dependencies: + no-case: 3.0.4 + tslib: 2.6.2 + dev: true + /dotignore@0.1.2: resolution: {integrity: sha512-UGGGWfSauusaVJC+8fgV+NVvBXkCTmVv7sk6nojDZZvuOUNGUy0Zk4UpHQD6EDjS0jpBwcACvH4eofvyzBcRDw==} hasBin: true @@ -2954,11 +3129,15 @@ packages: tapable: 2.2.1 dev: true + /entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + dev: true + /error-ex@1.3.2: resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} dependencies: is-arrayish: 0.2.1 - dev: false /error-stack-parser@2.1.4: resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==} @@ -3405,6 +3584,10 @@ packages: engines: {node: '>=4.0'} dev: true + /estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + dev: true + /esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} @@ -3875,7 +4058,6 @@ packages: /is-arrayish@0.2.1: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} - dev: false /is-arrayish@0.3.2: resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} @@ -4097,7 +4279,6 @@ packages: /json-parse-even-better-errors@2.3.1: resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} - dev: false /json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} @@ -4197,7 +4378,6 @@ packages: /lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - dev: false /locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} @@ -4229,6 +4409,12 @@ packages: dependencies: js-tokens: 4.0.0 + /lower-case@2.0.2: + resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} + dependencies: + tslib: 2.6.2 + dev: true + /lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} dependencies: @@ -4428,6 +4614,13 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true + /no-case@3.0.4: + resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} + dependencies: + lower-case: 2.0.2 + tslib: 2.6.2 + dev: true + /node-releases@2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} dev: true @@ -4553,7 +4746,6 @@ packages: error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 - dev: false /path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} @@ -5644,6 +5836,13 @@ packages: engines: {node: '>=8'} dev: true + /snake-case@3.0.4: + resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} + dependencies: + dot-case: 3.0.4 + tslib: 2.6.2 + dev: true + /sort-asc@0.2.0: resolution: {integrity: sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==} engines: {node: '>=0.10.0'} @@ -5842,6 +6041,10 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + /svg-parser@2.0.4: + resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} + dev: true + /tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -5950,7 +6153,6 @@ packages: /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - dev: false /type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} @@ -6089,6 +6291,21 @@ packages: gl-matrix: 3.4.3 dev: false + /vite-plugin-svgr@4.1.0(typescript@5.2.2)(vite@4.4.10): + resolution: {integrity: sha512-v7Qic+FWmCChgQNGSI4V8X63OEYsdUoLt66iqIcHozq9bfK/Dwmr0V+LBy1NE8CE98Y8HouEBJ+pto4AMfN5xw==} + peerDependencies: + vite: ^2.6.0 || 3 || 4 + dependencies: + '@rollup/pluginutils': 5.0.5 + '@svgr/core': 8.1.0(typescript@5.2.2) + '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0) + vite: 4.4.10(@types/node@20.8.2) + transitivePeerDependencies: + - rollup + - supports-color + - typescript + dev: true + /vite@4.4.10(@types/node@20.8.2): resolution: {integrity: sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/assets/NewWaysLogo.svg b/src/assets/NewWaysLogo.svg new file mode 100644 index 0000000..6af701c --- /dev/null +++ b/src/assets/NewWaysLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/SNSHomepage.svg b/src/assets/SNSHomepage.svg new file mode 100644 index 0000000..d8d563d --- /dev/null +++ b/src/assets/SNSHomepage.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/SNSInstagram.svg b/src/assets/SNSInstagram.svg new file mode 100644 index 0000000..489e4b0 --- /dev/null +++ b/src/assets/SNSInstagram.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/SNSLinkedin.svg b/src/assets/SNSLinkedin.svg new file mode 100644 index 0000000..cf7cdae --- /dev/null +++ b/src/assets/SNSLinkedin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/SNSYoutube.svg b/src/assets/SNSYoutube.svg new file mode 100644 index 0000000..f0024e3 --- /dev/null +++ b/src/assets/SNSYoutube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/index.ts b/src/assets/index.ts index 0c9af75..ddae958 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -1 +1,6 @@ // svg assets을 component로 export +export { default as NewWaysLogo } from "./NewWaysLogo.svg?react"; +export { default as SNSHomepage } from "./SNSHomepage.svg?react"; +export { default as SNSInstagram } from "./SNSInstagram.svg?react"; +export { default as SNSLinkedin } from "./SNSLinkedin.svg?react"; +export { default as SNSYoutube } from "./SNSYoutube.svg?react"; diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx new file mode 100644 index 0000000..5359796 --- /dev/null +++ b/src/components/organisms/Footer.tsx @@ -0,0 +1,72 @@ +import { Typography, Layout, Flex, Col, Row } from "antd"; + +import { SNSHomepage, SNSInstagram, SNSLinkedin, SNSYoutube } from "@/assets"; + +const { Title, Paragraph, Text } = Typography; +const { Footer } = Layout; + +const FooterTitle = () => 사단법인 뉴웨이즈(NEWWAYS); + +const FooterDescription = () => ( + + 젊치인의 도전과 성장을 돕는 에이전시 + 대표 박혜민 + 고유번호 767-82-00531 + 문의 build@newways.kr + +); + +const FooterLinks = () => ( + + + + + + + + + + + + + + +); + +const NewwaysFooter = () => ( + +); + +export default NewwaysFooter; diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx new file mode 100644 index 0000000..c68867c --- /dev/null +++ b/src/components/organisms/Header.tsx @@ -0,0 +1,12 @@ +import { Layout } from "antd"; +import { NewWaysLogo } from "@/assets"; + +const { Header } = Layout; + +const NewwaysHeader = () => ( +
+ +
+); + +export default NewwaysHeader; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index cca8947..c2733c5 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1,2 +1,4 @@ // organism 단계의 컴포넌트들을 한번에 export 하기 위한 index.ts 파일 +export { default as Header } from "./Header"; +export { default as Footer } from "./Footer"; export { default as TestChart } from "./TestChart"; diff --git a/src/components/pages/Test.tsx b/src/components/pages/Test.tsx index a6cd783..891d9ea 100644 --- a/src/components/pages/Test.tsx +++ b/src/components/pages/Test.tsx @@ -1,33 +1,12 @@ import React from "react"; -import { Layout, theme } from "antd"; +import { Layout } from "@/components/templates"; import { TestChart } from "@/components/organisms"; -const { Header, Content, Footer } = Layout; - -const Test: React.FC = () => { - const { - token: { colorBgContainer }, - } = theme.useToken(); - - return ( - -
-
-
- -
- -
- -
- Ant Design ©2023 Created by Ant UED -
- - ); -}; +const Test: React.FC = () => ( + + + +); export default Test; diff --git a/src/components/templates/Layout.tsx b/src/components/templates/Layout.tsx new file mode 100644 index 0000000..f36f911 --- /dev/null +++ b/src/components/templates/Layout.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Layout, ConfigProvider, theme } from "antd"; +import { Header, Footer } from "@/components/organisms"; + +const { Content } = Layout; + +interface Props { + children: React.ReactNode; +} + +const NewwaysLayout = ({ children }: Props) => { + const { + token: { colorBgContainer }, + } = theme.useToken(); + + return ( + + +
+ +
+ {children} +
+ +