From 999b8349592a48a5c8332604e7e09949308ab1cc Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Mon, 13 May 2024 14:23:43 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Fix:=20=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EC=A0=95=EB=A6=AC=20=EB=B0=8F=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B8=B0=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=82=AC=ED=95=AD=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 225 +----------------- src/apis/post.ts | 8 +- src/components/post/posttestCaseBox/index.tsx | 4 +- .../shared/descriptionBox/index.tsx | 8 +- src/hooks/post/useSetFormData.ts | 6 +- src/pages/detail/right/index.tsx | 8 +- src/pages/post/left/index.tsx | 1 + src/pages/post/right/index.tsx | 4 +- 8 files changed, 26 insertions(+), 238 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 32c298b..a4a83e1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -100,9 +100,6 @@ devDependencies: vite: specifier: ^5.2.0 version: 5.2.10 - vite-plugin-svgr: - specifier: ^4.2.0 - version: 4.2.0(typescript@5.4.5)(vite@5.2.10) packages: @@ -800,20 +797,6 @@ packages: engines: {node: '>=14.0.0'} dev: false - /@rollup/pluginutils@5.1.0: - resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} - 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 - /@rollup/rollup-android-arm-eabi@4.16.4: resolution: {integrity: sha512-GkhjAaQ8oUTOKE4g4gsZ0u8K/IHU1+2WQSgS1TwTcYvL+sjbaQjNHFXbOJ6kgqGHIO1DfUhI/Sphi9GkRT9K+Q==} cpu: [arm] @@ -942,132 +925,6 @@ packages: dev: true optional: true - /@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.24.4): - resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.24.4): - resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.24.4): - resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.24.4): - resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.24.4): - resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.24.4): - resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.24.4): - resolution: {integrity: sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.24.4): - resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==} - engines: {node: '>=12'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - dev: true - - /@svgr/babel-preset@8.1.0(@babel/core@7.24.4): - resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.4 - '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.24.4) - '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.24.4) - '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.24.4) - '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.24.4) - '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.24.4) - '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.24.4) - '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.24.4) - '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.24.4) - dev: true - - /@svgr/core@8.1.0(typescript@5.4.5): - resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==} - engines: {node: '>=14'} - dependencies: - '@babel/core': 7.24.4 - '@svgr/babel-preset': 8.1.0(@babel/core@7.24.4) - camelcase: 6.3.0 - cosmiconfig: 8.3.6(typescript@5.4.5) - 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.24.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.24.4 - '@svgr/babel-preset': 8.1.0(@babel/core@7.24.4) - '@svgr/core': 8.1.0(typescript@5.4.5) - '@svgr/hast-util-to-babel-ast': 8.0.0 - svg-parser: 2.0.4 - transitivePeerDependencies: - - supports-color - dev: true - /@tanstack/query-core@5.32.0: resolution: {integrity: sha512-Z3flEgCat55DRXU5UMwYU1U+DgFZKA3iufyOKs+II7iRAo0uXkeU7PH5e6sOH1CGEag0IpKmZxlUFpCg6roSKw==} dev: false @@ -1523,11 +1380,6 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} - /camelcase@6.3.0: - resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} - engines: {node: '>=10'} - dev: true - /caniuse-lite@1.0.30001612: resolution: {integrity: sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==} dev: true @@ -1597,22 +1449,6 @@ packages: yaml: 1.10.2 dev: false - /cosmiconfig@8.3.6(typescript@5.4.5): - 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.4.5 - dev: true - /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -1712,26 +1548,15 @@ packages: esutils: 2.0.3 dev: true - /dot-case@3.0.4: - resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} - dependencies: - no-case: 3.0.4 - tslib: 2.6.2 - dev: true - /electron-to-chromium@1.4.748: resolution: {integrity: sha512-VWqjOlPZn70UZ8FTKUOkUvBLeTQ0xpty66qV0yJcAGY2/CthI4xyW9aEozRVtuwv3Kpf5xTesmJUcPwuJmgP4A==} 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 /es-abstract@1.23.3: resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==} @@ -2033,10 +1858,6 @@ 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'} @@ -2374,6 +2195,7 @@ packages: /is-arrayish@0.2.1: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} + dev: false /is-async-function@2.0.0: resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==} @@ -2572,6 +2394,7 @@ 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==} @@ -2613,6 +2436,7 @@ 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==} @@ -2631,12 +2455,6 @@ 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: @@ -2706,13 +2524,6 @@ 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.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} dev: true @@ -2824,6 +2635,7 @@ 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==} @@ -3159,13 +2971,6 @@ 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 - /source-map-js@1.2.0: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} @@ -3258,10 +3063,6 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - /svg-parser@2.0.4: - resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} - dev: true - /text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true @@ -3288,6 +3089,7 @@ 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==} @@ -3404,21 +3206,6 @@ packages: react: 18.2.0 dev: false - /vite-plugin-svgr@4.2.0(typescript@5.4.5)(vite@5.2.10): - resolution: {integrity: sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==} - peerDependencies: - vite: ^2.6.0 || 3 || 4 || 5 - dependencies: - '@rollup/pluginutils': 5.1.0 - '@svgr/core': 8.1.0(typescript@5.4.5) - '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0) - vite: 5.2.10 - transitivePeerDependencies: - - rollup - - supports-color - - typescript - dev: true - /vite@5.2.10: resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==} engines: {node: ^18.0.0 || >=20.0.0} diff --git a/src/apis/post.ts b/src/apis/post.ts index c4e66f2..89db719 100644 --- a/src/apis/post.ts +++ b/src/apis/post.ts @@ -1,18 +1,18 @@ -import { List, PostForm } from '@/types'; +import { ArticleDetail } from '@/types'; import instance from './instance'; -export const postArticle = async (formData: PostForm) => { +export const postArticle = async (formData: ArticleDetail) => { const response = await instance.post('/api/post', formData); return response.data; }; export const getArticle = async (postId: string) => { const response = await instance.get(`/api/posts/${postId}`); - return response.data as PostForm; + return response.data as ArticleDetail; }; export const postCheck = async ( - formData: Pick, + formData: Pick, postId: string, ) => { const newFormData = { diff --git a/src/components/post/posttestCaseBox/index.tsx b/src/components/post/posttestCaseBox/index.tsx index fba3154..61ee581 100644 --- a/src/components/post/posttestCaseBox/index.tsx +++ b/src/components/post/posttestCaseBox/index.tsx @@ -1,9 +1,9 @@ import { ChangeEvent, useEffect, useState } from 'react'; import { Icon, Text } from '../../shared'; +import { postFormStore } from '@/stores/post'; +import { TestCase } from '@/types'; import * as S from './styles'; -import { postFormStore } from '@/stores/post'; -import { TestCase } from '@/types/post'; const defalutValue = [{ example: '', result: '' }]; diff --git a/src/components/shared/descriptionBox/index.tsx b/src/components/shared/descriptionBox/index.tsx index 5934eec..f6429b1 100644 --- a/src/components/shared/descriptionBox/index.tsx +++ b/src/components/shared/descriptionBox/index.tsx @@ -1,12 +1,12 @@ import { Line, Select, Text } from '@/components/shared'; - -import * as S from './styles'; -import { PostForm } from '@/types/post'; import { TextareaField } from '@/components/post'; import { CATEGORY } from '@/consts/category'; import { ChangeEvent } from 'react'; +import { ArticleDetail } from '@/types'; + +import * as S from './styles'; -type DescriptonForm = Omit; +type DescriptonForm = Omit; type DescriptionBoxProps = { page: 'post' | 'detail'; diff --git a/src/hooks/post/useSetFormData.ts b/src/hooks/post/useSetFormData.ts index f69e2eb..d0938bb 100644 --- a/src/hooks/post/useSetFormData.ts +++ b/src/hooks/post/useSetFormData.ts @@ -1,5 +1,5 @@ import { postFormStore } from '@/stores/post'; -import { PostForm } from '@/types/post'; +import { ArticleDetail } from '@/types'; import { ChangeEvent } from 'react'; const useSetFormData = () => { @@ -11,9 +11,9 @@ const useSetFormData = () => { updatePostForm(newValue); }; return { postForm, handleChange, updatePostForm } as { - postForm: PostForm; + postForm: ArticleDetail; handleChange: (e: ChangeEvent) => void; - updatePostForm: (value: Partial) => void; + updatePostForm: (value: Partial) => void; }; }; diff --git a/src/pages/detail/right/index.tsx b/src/pages/detail/right/index.tsx index 2a63d81..faa226e 100644 --- a/src/pages/detail/right/index.tsx +++ b/src/pages/detail/right/index.tsx @@ -1,12 +1,12 @@ +import { postFormStore } from '@/stores/post'; +import { postCheck } from '@/apis/post'; +import useGetPost from '@/hooks/post/useGetPost'; import { useModalContext } from '@/contexts/ModalContext'; import { CodeBox } from '@/components/post'; import { useNavigate, useParams } from 'react-router-dom'; import { Icon, StyledButton } from '@/components/shared'; import * as S from './styles'; -import { postFormStore } from '@/stores/post'; -import { submitProblem } from '@/apis/post'; -import useGetPost from '@/hooks/post/useGetPost'; const DetailRight = () => { const navigate = useNavigate(); @@ -20,7 +20,7 @@ const DetailRight = () => { const handleSubmit = () => { const access = localStorage.getItem('access'); if (access) { - submitProblem( + postCheck( { answer: postForm.answer, language: postForm.language }, postId as string, ); diff --git a/src/pages/post/left/index.tsx b/src/pages/post/left/index.tsx index 5098912..fe43b28 100644 --- a/src/pages/post/left/index.tsx +++ b/src/pages/post/left/index.tsx @@ -11,6 +11,7 @@ const PostLeft = () => { return ( { const navigate = useNavigate(); @@ -31,7 +31,7 @@ const PostRight = () => { onClick={() => open({ title: '게시글을 올리겠습니까?', - onButtonClick: () => postProblem(postForm).then(() => navigate('/')), + onButtonClick: () => postArticle(postForm).then(() => navigate('/')), hasCancelButton: true, buttonLabel: '확인', }) From c931c0abdcf6d4e15401868bcaad5b0e0a1ba1a4 Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Mon, 13 May 2024 16:01:18 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Bug:=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/MainListItem/index.tsx | 4 ++-- src/components/mypage/liked/index.tsx | 12 ++++++------ src/components/mypage/solved/index.tsx | 12 ++++++------ src/components/mypage/userInfo/index.tsx | 7 ++++--- src/components/shared/article/index.tsx | 4 ++-- src/hooks/post/useGetPost.ts | 4 ++-- 6 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/main/MainListItem/index.tsx b/src/components/main/MainListItem/index.tsx index da55b81..10fccec 100644 --- a/src/components/main/MainListItem/index.tsx +++ b/src/components/main/MainListItem/index.tsx @@ -1,10 +1,10 @@ import { Icon } from '@/components/shared'; import * as S from './styles'; -import { Article } from '@/types/index'; import Article from '@/components/shared/article'; +import { ArticleType } from '@/types'; interface ListItemProps { - listItem: Article; + listItem: ArticleType; } const MainListItem = ({ listItem }: ListItemProps) => { diff --git a/src/components/mypage/liked/index.tsx b/src/components/mypage/liked/index.tsx index fb4dbc7..899b51b 100644 --- a/src/components/mypage/liked/index.tsx +++ b/src/components/mypage/liked/index.tsx @@ -1,9 +1,9 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import * as S from '../created/styles'; -import { getMypagePosts } from '@/apis/mypage.ts'; import { useNickname } from '@/stores/mypage.ts'; import { useEffect, useRef } from 'react'; -import { ArticleItem } from '@/types/article.ts'; +import { getMypageArticles } from '@/apis/mypage'; +import { ArticleType } from '@/types'; const SolvedMenu = () => { const loginUserId = localStorage.getItem('userId'); @@ -13,11 +13,11 @@ const SolvedMenu = () => { const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['liked', nickname, loginUserId], queryFn: ({ pageParam }) => - getMypagePosts({ + getMypageArticles({ pageIndex: pageParam, - done: false, + isDone: false, value: 'liked', - userNickname: nickname, + email: nickname, loginUserId: loginUserId, }), initialPageParam: 1, @@ -43,7 +43,7 @@ const SolvedMenu = () => { return ( {data?.pages.map((page) => - page.data.map((post: ArticleItem) => ( + page.data.map((post: ArticleType) => (
{/* 게시글 공통 컴포넌트로 표시 */}
)), )} diff --git a/src/components/mypage/solved/index.tsx b/src/components/mypage/solved/index.tsx index 8430494..048a6e5 100644 --- a/src/components/mypage/solved/index.tsx +++ b/src/components/mypage/solved/index.tsx @@ -1,9 +1,9 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import * as S from '../created/styles'; -import { getMypagePosts } from '@/apis/mypage.ts'; +import { getMypageArticles } from '@/apis/mypage.ts'; import { useNickname } from '@/stores/mypage.ts'; import { useEffect, useRef } from 'react'; -import { ArticleItem } from '@/types/article.ts'; +import { ArticleType } from '@/types'; const SolvedMenu = () => { const loginUserId = localStorage.getItem('userId'); @@ -13,11 +13,11 @@ const SolvedMenu = () => { const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['solved', nickname, loginUserId], queryFn: ({ pageParam }) => - getMypagePosts({ + getMypageArticles({ pageIndex: pageParam, - done: false, + isDone: false, value: 'solved', - userNickname: nickname, + email: nickname, loginUserId: loginUserId, }), initialPageParam: 1, @@ -43,7 +43,7 @@ const SolvedMenu = () => { return ( {data?.pages.map((page) => - page.data.map((post: ArticleItem) => ( + page.data.map((post: ArticleType) => (
{/* 게시글 공통 컴포넌트로 표시 */}
)), )} diff --git a/src/components/mypage/userInfo/index.tsx b/src/components/mypage/userInfo/index.tsx index 5932e37..121498d 100644 --- a/src/components/mypage/userInfo/index.tsx +++ b/src/components/mypage/userInfo/index.tsx @@ -1,11 +1,12 @@ import { Icon, UserCircle } from '@/components/shared'; -import * as S from './styles.'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { getUserInfo } from '@/apis/mypage'; import { User } from '@/types/auth.ts'; import { IconValues } from '@/components/shared/icon'; import { useNickname } from '@/stores/mypage'; +import { getUserInfo } from '@/apis/user'; + +import * as S from './styles'; const UserInfo = () => { const navigate = useNavigate(); @@ -29,7 +30,7 @@ const UserInfo = () => { github: data.github, blog: data.blog, introduce: data.introduce, - profileImage: data.profileImageResDto?.fileUrl, + profileImage: data.profileImage, }); setNickname(data.nickname); } diff --git a/src/components/shared/article/index.tsx b/src/components/shared/article/index.tsx index 9f7d017..15d471b 100644 --- a/src/components/shared/article/index.tsx +++ b/src/components/shared/article/index.tsx @@ -1,11 +1,11 @@ -import { Article } from '@/types/article'; +import { ArticleType } from '@/types/article'; import * as S from './styles'; import React, { ReactNode } from 'react'; import { Status } from '../infoStatus'; import { useNavigate } from 'react-router-dom'; // ArticleItem 타입에서 author 제외한 타입 정의 -type ArticleTypes = Omit; +type ArticleTypes = Omit; interface ArticleProps { article: ArticleTypes; diff --git a/src/hooks/post/useGetPost.ts b/src/hooks/post/useGetPost.ts index fa7b695..1957948 100644 --- a/src/hooks/post/useGetPost.ts +++ b/src/hooks/post/useGetPost.ts @@ -1,4 +1,4 @@ -import { getProblem } from '@/apis/post'; +import { getArticle } from '@/apis/post'; import { useSuspenseQuery } from '@tanstack/react-query'; import { useParams } from 'react-router-dom'; @@ -6,7 +6,7 @@ const useGetPost = () => { const { postId } = useParams(); return useSuspenseQuery({ queryKey: ['post', postId], - queryFn: () => getProblem(postId as string), + queryFn: () => getArticle(postId as string), }); }; From 047e5152ba16039737b69dfd77144b79bf4b196a Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Mon, 13 May 2024 16:04:57 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Fix:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20(styledbutto?= =?UTF-8?q?n,=20select)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit styledbutton에 hover시와 active 효과 추가 및 select onchnage함수 변경 및 기타 수정 --- src/components/shared/StyledButton.ts | 16 ++++-- .../shared/descriptionBox/index.tsx | 53 ++++++++----------- src/components/shared/select/styles.ts | 8 +++ src/consts/category.ts | 49 ++++++++--------- src/hooks/post/useSetFormData.ts | 10 ++-- src/pages/post/left/index.tsx | 23 ++++---- src/pages/post/left/styles.ts | 8 ++- src/styles/button.ts | 15 ++++++ 8 files changed, 106 insertions(+), 76 deletions(-) diff --git a/src/components/shared/StyledButton.ts b/src/components/shared/StyledButton.ts index a2182ae..cdd4104 100644 --- a/src/components/shared/StyledButton.ts +++ b/src/components/shared/StyledButton.ts @@ -1,6 +1,12 @@ import styled from '@emotion/styled'; -import { Colors, colors } from '@/styles/colorPalette'; -import { ButtonColor, ButtonSize, buttonColorMap, buttonSizeMap } from '@/styles/button'; +import { Colors } from '@/styles/colorPalette'; +import { + ButtonColor, + ButtonSize, + buttonActiveMap, + buttonColorMap, + buttonSizeMap, +} from '@/styles/button'; interface ButtonProp { width?: string; @@ -20,7 +26,11 @@ const StyledButton = styled.button` width: ${({ width = '300px' }) => width}; &:hover { - background-color: ${({ hover = colors.yellowHover }) => hover}; + ${({ buttonType = 'primary' }) => buttonActiveMap[buttonType]} + } + transition: all 0.1s ease; + &:active { + transform: scale(0.95); } `; diff --git a/src/components/shared/descriptionBox/index.tsx b/src/components/shared/descriptionBox/index.tsx index f6429b1..1b0c5af 100644 --- a/src/components/shared/descriptionBox/index.tsx +++ b/src/components/shared/descriptionBox/index.tsx @@ -1,6 +1,5 @@ -import { Line, Select, Text } from '@/components/shared'; +import { Line, Text } from '@/components/shared'; import { TextareaField } from '@/components/post'; -import { CATEGORY } from '@/consts/category'; import { ChangeEvent } from 'react'; import { ArticleDetail } from '@/types'; @@ -11,7 +10,6 @@ type DescriptonForm = Omit; type DescriptionBoxProps = { page: 'post' | 'detail'; onChange?: (event: ChangeEvent) => void; - categorySelect?: (value: string) => void; } & DescriptonForm; const DescriptionBox = (props: DescriptionBoxProps) => { @@ -26,7 +24,6 @@ const renderComponent = ({ content, condition, onChange, - categorySelect, }: DescriptionBoxProps) => { switch (page) { case 'detail': @@ -45,34 +42,28 @@ const renderComponent = ({ ); case 'post': return ( - <> - diff --git a/src/pages/post/left/styles.ts b/src/pages/post/left/styles.ts index 8b6e8fa..0aafb97 100644 --- a/src/pages/post/left/styles.ts +++ b/src/pages/post/left/styles.ts @@ -1,11 +1,15 @@ import styled from '@emotion/styled'; -import { colors } from '../../../styles/colorPalette'; +import { colors } from '@/styles/colorPalette'; export const Container = styled.div` + position: relative; display: flex; flex-direction: column; min-width: 800px; - position: relative; height: 100vh; border-right: 1px solid ${colors.gray50}; + + > :first-of-type { + padding: 20px; + } `; diff --git a/src/styles/button.ts b/src/styles/button.ts index c365f6b..f2c7991 100644 --- a/src/styles/button.ts +++ b/src/styles/button.ts @@ -17,6 +17,21 @@ export const buttonColorMap = { `, }; +export const buttonActiveMap = { + primary: css` + background-color: ${colors.yellowHover}; + color: ${colors.white}; + `, + reverse: css` + background-color: ${colors.white}; + color: ${colors.yellow}; + `, + second: css` + background-color: ${colors.gray50}; + color: ${colors.white}; + `, +}; + export const buttonSizeMap = { small: css` font-size: 16px; From 84b781e7a39c22353f6f4d8deb3ee09e17413e80 Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Tue, 14 May 2024 22:23:06 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Fix:=20=ED=83=80=EC=9E=85,=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EB=AA=85=20=EB=B0=8F=20=EB=B3=80=EC=88=98=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/{post.ts => article.ts} | 26 +++++------------------ src/components/main/mainList/MainList.tsx | 2 +- src/components/shared/article/index.tsx | 2 +- src/consts/category.ts | 2 +- src/pages/post/right/index.tsx | 2 +- src/stores/mypage.ts | 8 +++---- src/stores/post.ts | 3 +-- src/types/article.ts | 8 +++++++ 8 files changed, 22 insertions(+), 31 deletions(-) rename src/apis/{post.ts => article.ts} (56%) diff --git a/src/apis/post.ts b/src/apis/article.ts similarity index 56% rename from src/apis/post.ts rename to src/apis/article.ts index 89db719..91302de 100644 --- a/src/apis/post.ts +++ b/src/apis/article.ts @@ -1,8 +1,8 @@ -import { ArticleDetail } from '@/types'; +import { ArticleDetail, ArticleList } from '@/types'; import instance from './instance'; export const postArticle = async (formData: ArticleDetail) => { - const response = await instance.post('/api/post', formData); + const response = await instance.post('/api/posts', formData); return response.data; }; @@ -29,23 +29,7 @@ interface FetchParams { limit: number; } -export const getArticles = async ({ - pageParam = 1, - limit = 2, - email, -}: FetchParams): Promise => { - try { - const response = await instance.get( - `/api/posts?page=${pageParam}&limit=${limit}`, - { - params: { - email: email, - }, - }, - ); - return response.data; - } catch (error) { - console.error(error); - throw new Error('Failed to fetch posts'); - } +export const getArticles = async ({ pageParam = 1, limit }: FetchParams) => { + const response = await instance.get(`/api/posts?page=${pageParam}&limit=${limit}`); + return response.data as ArticleList; }; diff --git a/src/components/main/mainList/MainList.tsx b/src/components/main/mainList/MainList.tsx index 78921be..d6f03ac 100644 --- a/src/components/main/mainList/MainList.tsx +++ b/src/components/main/mainList/MainList.tsx @@ -4,7 +4,7 @@ import { QueryFunctionContext, useInfiniteQuery } from '@tanstack/react-query'; import { ArticleType, List } from '@/types/article'; import Loading from '@/components/loader'; import React, { useEffect, useRef } from 'react'; -import { getArticles } from '@/apis/post'; +import { getArticles } from '@/apis/article'; const MainList = () => { const loadMoreRef = useRef(null); diff --git a/src/components/shared/article/index.tsx b/src/components/shared/article/index.tsx index 15d471b..2c46da6 100644 --- a/src/components/shared/article/index.tsx +++ b/src/components/shared/article/index.tsx @@ -47,7 +47,7 @@ const Article = ({ article, threedot, statusFlag }: ArticleProps) => { const navigate = useNavigate(); const toHandleDetail = () => { - navigate(`/detail/${article.postNumber}`); + navigate(`/detail/${article.postId}`); }; return ( diff --git a/src/consts/category.ts b/src/consts/category.ts index 1525035..012de44 100644 --- a/src/consts/category.ts +++ b/src/consts/category.ts @@ -1,7 +1,7 @@ export const CATEGORY = [ { value: '', name: '알고리즘' }, { value: 'graph', name: '그래프' }, - { value: 'DFS', name: '깊이 우선 탐색' }, + { value: 'dfs', name: '깊이 우선 탐색' }, { value: 'BFS', name: '너비 우선 탐색' }, { value: 'SelectionSort', name: '선택 정렬' }, { value: 'QuickSort', name: '퀵 정렬' }, diff --git a/src/pages/post/right/index.tsx b/src/pages/post/right/index.tsx index f5f426c..d079182 100644 --- a/src/pages/post/right/index.tsx +++ b/src/pages/post/right/index.tsx @@ -5,7 +5,7 @@ import { postFormStore } from '@/stores/post'; import { Icon, StyledButton } from '@/components/shared'; import * as S from './styles'; -import { postArticle } from '@/apis/post'; +import { postArticle } from '@/apis/article'; const PostRight = () => { const navigate = useNavigate(); diff --git a/src/stores/mypage.ts b/src/stores/mypage.ts index a7a0162..68fae8f 100644 --- a/src/stores/mypage.ts +++ b/src/stores/mypage.ts @@ -1,12 +1,12 @@ import { create } from 'zustand'; // 이거는 삭제될 것 같음 -interface Nickname { +interface nickname { nickname: string | null; - setNickname: (nickname: string | null) => void; + setnickname: (nickname: string | null) => void; } -export const useNickname = create((set) => ({ +export const usenickname = create((set) => ({ nickname: null, - setNickname: (nickname) => set({ nickname: nickname }), + setnickname: (nickname) => set({ nickname: nickname }), })); diff --git a/src/stores/post.ts b/src/stores/post.ts index 8852678..4fc6cc5 100644 --- a/src/stores/post.ts +++ b/src/stores/post.ts @@ -2,7 +2,7 @@ import { ArticleDetail } from '@/types'; import { create } from 'zustand'; interface PostFormState { - postForm: ArticleDetail; + postForm: Omit; updatePostForm: (value: Partial) => void; } const defaultPostForm = { @@ -13,7 +13,6 @@ const defaultPostForm = { testCases: [], language: 'java', answer: '', - postNumber: 0, }; export const postFormStore = create((set) => ({ postForm: defaultPostForm, diff --git a/src/types/article.ts b/src/types/article.ts index 624c6b0..449da2d 100644 --- a/src/types/article.ts +++ b/src/types/article.ts @@ -31,9 +31,17 @@ export interface ArticleDetail { testCases: TestCase[]; language: LanguageValues; answer: string; + commentCount: number; + likeCount: number; + answerCount: number; + likeType: boolean; } export interface TestCase { example: string; result: string; } +export interface ArticleList { + posts: ArticleType[]; + pageInfo: Page; +} From 1a83c0db9ee3df2fe8d48dbc96d15383420ae1f8 Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Tue, 14 May 2024 22:25:55 +0900 Subject: [PATCH 5/9] =?UTF-8?q?Style:=20framer-motion=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B8=B0=ED=83=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/loader/circleLoader/styles.ts | 4 +-- .../shared/modal/alertComponent/index.tsx | 10 ++++++- .../shared/modal/alertComponent/styles.ts | 3 +- .../shared/modal/commentComponent/index.tsx | 15 +++++++--- .../shared/modal/commentComponent/styles.ts | 3 +- src/components/shared/modal/index.tsx | 22 ++++---------- .../shared/modal/questionComponent/indext.tsx | 10 ++++++- .../shared/modal/questionComponent/styles.ts | 3 +- src/components/shared/select/index.tsx | 19 ++++++------ src/components/shared/select/styles.ts | 21 ++++++++++++++ src/components/shared/testCaseBox/index.tsx | 20 ++++++++++--- src/components/shared/testCaseBox/styles.ts | 5 ++-- src/contexts/ModalContext.tsx | 10 ++++++- src/hooks/post/useGetPost.ts | 2 +- src/pages/detail/left/styles.ts | 11 ++++--- src/pages/detail/right/styles.ts | 11 ++----- src/styles/framerMotion.ts | 29 ++++++++++++------- src/styles/layout.ts | 7 +++++ 18 files changed, 134 insertions(+), 71 deletions(-) diff --git a/src/components/loader/circleLoader/styles.ts b/src/components/loader/circleLoader/styles.ts index 3e21ecd..c270cde 100644 --- a/src/components/loader/circleLoader/styles.ts +++ b/src/components/loader/circleLoader/styles.ts @@ -1,14 +1,12 @@ import { css } from '@emotion/react'; export const circleStyle = css` - display: block; width: 3rem; height: 3rem; border: 0.5rem solid #e9e9e9; border-top: 0.5rem solid #3498db; border-radius: 50%; position: absolute; - box-sizing: border-box; left: 50%; - top: 50%; + top: 45%; `; diff --git a/src/components/shared/modal/alertComponent/index.tsx b/src/components/shared/modal/alertComponent/index.tsx index 4e708ac..b221df6 100644 --- a/src/components/shared/modal/alertComponent/index.tsx +++ b/src/components/shared/modal/alertComponent/index.tsx @@ -1,3 +1,4 @@ +import { animationMap } from '@/styles/framerMotion'; import { StyledButton, Text } from '../..'; import * as S from './styles'; @@ -5,6 +6,7 @@ import * as S from './styles'; interface AlertComponentProps { title: React.ReactNode; description?: React.ReactNode; + open: boolean; buttonLabel?: string; hasCancelButton?: boolean; onButtonClick: () => void; @@ -18,9 +20,15 @@ const AlertComponent = ({ description, hasCancelButton = false, close, + open, }: AlertComponentProps) => { return ( - + {title} diff --git a/src/components/shared/modal/alertComponent/styles.ts b/src/components/shared/modal/alertComponent/styles.ts index 4d61f48..06fb9f6 100644 --- a/src/components/shared/modal/alertComponent/styles.ts +++ b/src/components/shared/modal/alertComponent/styles.ts @@ -1,7 +1,8 @@ import { layoutMap } from '@/styles/layout'; import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; -export const Container = styled.div` +export const Container = styled(motion.div)` ${layoutMap.shadowBox} position: absolute; left: 50%; diff --git a/src/components/shared/modal/commentComponent/index.tsx b/src/components/shared/modal/commentComponent/index.tsx index 112194d..284c513 100644 --- a/src/components/shared/modal/commentComponent/index.tsx +++ b/src/components/shared/modal/commentComponent/index.tsx @@ -2,20 +2,27 @@ import { TextareaField } from '@/components/post'; import { Icon, StyledButton } from '../..'; import { CommentList } from '@/components/detail'; import { useState } from 'react'; - -import * as S from './styles'; import { postComment } from '@/apis/comment'; import { postIdStore } from '@/stores/post'; +import { animationMap } from '@/styles/framerMotion'; + +import * as S from './styles'; interface AlertComponentProps { onButtonClick: () => void; + open: boolean; } -const CommentComponent = ({ onButtonClick }: AlertComponentProps) => { +const CommentComponent = ({ onButtonClick, open }: AlertComponentProps) => { const [comment, setComment] = useState(''); const postId = postIdStore((state) => state.postId); return ( - + diff --git a/src/components/shared/modal/commentComponent/styles.ts b/src/components/shared/modal/commentComponent/styles.ts index 3163e87..3120840 100644 --- a/src/components/shared/modal/commentComponent/styles.ts +++ b/src/components/shared/modal/commentComponent/styles.ts @@ -1,7 +1,8 @@ import { layoutMap } from '@/styles/layout'; import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; -export const Container = styled.div` +export const Container = styled(motion.div)` ${layoutMap.shadowBox} position: absolute; right: 0; diff --git a/src/components/shared/modal/index.tsx b/src/components/shared/modal/index.tsx index 86612d4..7f13d4b 100644 --- a/src/components/shared/modal/index.tsx +++ b/src/components/shared/modal/index.tsx @@ -1,8 +1,6 @@ -import { animationMap } from '@/styles/framerMotion'; import AlertComponent from './alertComponent'; import CommentComponent from './commentComponent'; import Dimmed from './Dimmed'; -import { motion } from 'framer-motion'; import QuestionComponent from './questionComponent/indext'; import { LanguageNames } from '@/consts/language'; @@ -24,28 +22,18 @@ interface ModalProps { const Modal = ({ open, type = 'alert', ...props }: ModalProps) => { if (!open) return null; - return ( - - - {renderComponent({ type, ...props })} - - - ); + return {renderComponent({ type, open, ...props })}; }; export default Modal; -const renderComponent = ({ type, ...props }: Omit) => { +const renderComponent = ({ type, open, ...props }: ModalProps) => { switch (type) { case 'alert': - return ; + return ; case 'comment': - return ; + return ; case 'question': - return ; + return ; } }; diff --git a/src/components/shared/modal/questionComponent/indext.tsx b/src/components/shared/modal/questionComponent/indext.tsx index fe571b1..0b16590 100644 --- a/src/components/shared/modal/questionComponent/indext.tsx +++ b/src/components/shared/modal/questionComponent/indext.tsx @@ -3,8 +3,10 @@ import { Icon, Text } from '../..'; import { LanguageNames } from '@/consts/language'; import * as S from './styles'; +import { animationMap } from '@/styles/framerMotion'; interface QuestionComponentProps { + open: boolean; title: React.ReactNode; close?: () => void; answer?: string; @@ -12,13 +14,19 @@ interface QuestionComponentProps { } const QuestionComponent = ({ + open, close, title, answer, language, }: QuestionComponentProps) => { return ( - + {title} diff --git a/src/components/shared/modal/questionComponent/styles.ts b/src/components/shared/modal/questionComponent/styles.ts index 2dc4234..3b223ea 100644 --- a/src/components/shared/modal/questionComponent/styles.ts +++ b/src/components/shared/modal/questionComponent/styles.ts @@ -1,7 +1,8 @@ import { layoutMap } from '@/styles/layout'; import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; -export const Container = styled.div` +export const Container = styled(motion.div)` ${layoutMap.shadowBox} position: absolute; left: 50%; diff --git a/src/components/shared/select/index.tsx b/src/components/shared/select/index.tsx index d633fef..592041f 100644 --- a/src/components/shared/select/index.tsx +++ b/src/components/shared/select/index.tsx @@ -1,7 +1,5 @@ import { MouseEvent, useState } from 'react'; import { CategoryOption, CategoryValues } from '@/consts/category'; -import { animationMap } from '@/styles/framerMotion'; -import { motion } from 'framer-motion'; import * as S from './styles'; @@ -27,6 +25,7 @@ const Select = ({ e.preventDefault(); setIsExpand((prev) => !prev); }; + console.log(isExpand); return ( setIsExpand(false)} onMouseDown={handleMouseDown}> ({ ))} - - + + {isExpand && ( {optionData.length > 0 && optionData.map(({ value, name }, index) => { @@ -72,7 +73,7 @@ const Select = ({ ); })} - + )} ); }; diff --git a/src/components/shared/select/styles.ts b/src/components/shared/select/styles.ts index 326b602..a00c001 100644 --- a/src/components/shared/select/styles.ts +++ b/src/components/shared/select/styles.ts @@ -2,9 +2,26 @@ import { colors } from '@/styles/colorPalette'; import { layoutMap } from '@/styles/layout'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { Icon } from '..'; export const Container = styled.div` position: relative; + padding-right: 30px; +`; + +export const SelectIcon = styled(Icon)` + display: flex; + position: absolute; + right: 5%; + top: 50%; + ${({ $rotate }) => + $rotate + ? css` + transform: translateY(-50%) rotate(180deg); + ` + : css` + transform: translateY(-50%) rotate(0deg); + `}; `; export const SelectList = styled.ul` @@ -31,6 +48,10 @@ export const SelectList = styled.ul` export const Select = styled.select<{ type?: 'primary' | 'fill' }>` font-size: 24px; border: none; + width: calc(100% + 30px); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; ${({ type }) => type === 'fill' ? css` diff --git a/src/components/shared/testCaseBox/index.tsx b/src/components/shared/testCaseBox/index.tsx index 1d5fcdf..e4887c8 100644 --- a/src/components/shared/testCaseBox/index.tsx +++ b/src/components/shared/testCaseBox/index.tsx @@ -1,24 +1,36 @@ import { useState } from 'react'; import { Icon, Text } from '@/components/shared'; -import { TestCase } from '@/types/post'; +import { TestCase } from '@/types'; +import { animationMap } from '@/styles/framerMotion'; import * as S from './styles'; const TestCaseBox = ({ testCases }: { testCases: TestCase[] }) => { const [isExpand, setIsExpand] = useState(true); return ( - + 테스트 케이스 setIsExpand((prev) => !prev)} /> {isExpand && ( - - {/* 여기부분을 어떻게 행야할지 잘 모르겠음..ㅠㅜ */} + { return ( {children} - {$portal_root ? createPortal(, $portal_root) : null} + {$portal_root + ? createPortal( + + {modalState.open && } + , + $portal_root, + ) + : null} ); }; diff --git a/src/hooks/post/useGetPost.ts b/src/hooks/post/useGetPost.ts index 1957948..7bc6680 100644 --- a/src/hooks/post/useGetPost.ts +++ b/src/hooks/post/useGetPost.ts @@ -1,4 +1,4 @@ -import { getArticle } from '@/apis/post'; +import { getArticle } from '@/apis/article'; import { useSuspenseQuery } from '@tanstack/react-query'; import { useParams } from 'react-router-dom'; diff --git a/src/pages/detail/left/styles.ts b/src/pages/detail/left/styles.ts index 4ad07dc..9633a0f 100644 --- a/src/pages/detail/left/styles.ts +++ b/src/pages/detail/left/styles.ts @@ -1,14 +1,15 @@ import styled from '@emotion/styled'; import { colors } from '@/styles/colorPalette'; import { css } from '@emotion/react'; +import { layoutMap } from '@/styles/layout'; export const Container = styled.div` display: flex; flex-direction: column; + border-right: 1px solid ${colors.gray50}; min-width: 800px; - position: relative; height: 100vh; - border-right: 1px solid ${colors.gray50}; + position: relative; `; export const fallbackContentCss = css` @@ -18,10 +19,8 @@ export const fallbackContentCss = css` `; export const ContentBox = styled.div` - display: flex; - flex-direction: column; - padding: 20px; + ${layoutMap.shadowBox} flex: 1; - border-bottom: 1px solid ${colors.gray50}; + padding: 20px; gap: 30px; `; diff --git a/src/pages/detail/right/styles.ts b/src/pages/detail/right/styles.ts index 7b02977..3c13aab 100644 --- a/src/pages/detail/right/styles.ts +++ b/src/pages/detail/right/styles.ts @@ -1,5 +1,4 @@ import { colors } from '@/styles/colorPalette'; -import { layoutMap } from '@/styles/layout'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; @@ -29,17 +28,11 @@ export const testButton = css` export const ButtonBox = styled.div` display: flex; margin-top: 60px; + align-items: center; + flex-direction: row; justify-content: end; gap: 20px; > div:first-of-type { margin-right: auto; } `; - -export const questionCss = css` - ${layoutMap.shadowBox} - border-radius: 100%; - padding: 10px; - width: 48px; - height: 48px; -`; diff --git a/src/styles/framerMotion.ts b/src/styles/framerMotion.ts index fdc9a74..bbc863f 100644 --- a/src/styles/framerMotion.ts +++ b/src/styles/framerMotion.ts @@ -1,26 +1,35 @@ export const animationMap = { - subMenuAnimate: { - enter: { + fadeInOut: { + open: { opacity: 1, transition: { - duration: 0.1, + duration: 0.25, }, - display: 'block', }, - exit: { + close: { opacity: 0, transition: { - duration: 0.1, - }, - transitionEnd: { - display: 'none', + duration: 0.25, }, }, }, spinTransition: { - loop: Infinity, + repeat: Infinity, ease: 'linear', duration: 1, Infinity: true, }, + testContainerAnimation: { + close: { height: 80, transition: { duration: 0.5 } }, + open: { height: 300, transition: { when: 'beforeChildren', duration: 0.5 } }, + }, + testContneBoxAnimation: { + close: { opacity: 0 }, + open: { opacity: 1, transition: { delay: 0.25, duration: 0.25 } }, + exit: { opacity: 0 }, + }, + commetnContainerAnimation: { + open: { x: 0, transition: { duration: 0.5 } }, + close: { x: 855, transition: { duration: 0.5 } }, + }, }; diff --git a/src/styles/layout.ts b/src/styles/layout.ts index d40fb36..0a62a8f 100644 --- a/src/styles/layout.ts +++ b/src/styles/layout.ts @@ -25,4 +25,11 @@ export const layoutMap = { /* 파이어폭스용 */ scrollbar-width: none; `, + borderCircleIcon: css` + display: flex; + background-color: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 100%; + padding: 5px; + `, }; From 7666e3790dc40c3d562f65878f8742a53b5cc68e Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Tue, 14 May 2024 22:27:24 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Fix:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20(infostatus,?= =?UTF-8?q?=20icon)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit infoStatus관련되서 많이 수정됬습니다 확인한번 하시면 되고 연관되서 icon이 좀 수정되었습니다 --- src/components/shared/icon/index.tsx | 59 ++++++---------------- src/components/shared/icon/styles.ts | 39 ++++++++++++-- src/components/shared/infoStatus/index.tsx | 24 +++++---- src/components/shared/infoStatus/styles.ts | 36 ------------- src/pages/detail/right/index.tsx | 39 +++++++------- 5 files changed, 84 insertions(+), 113 deletions(-) diff --git a/src/components/shared/icon/index.tsx b/src/components/shared/icon/index.tsx index d5b03df..87340e7 100644 --- a/src/components/shared/icon/index.tsx +++ b/src/components/shared/icon/index.tsx @@ -1,4 +1,7 @@ import { Link } from 'react-router-dom'; +import { MouseEvent } from 'react'; +import { Colors, colors } from '@/styles/colorPalette'; + import * as S from './styles'; export type IconValues = @@ -30,20 +33,21 @@ export type IconValues = interface IconProps { value: IconValues; $rotate?: boolean; - onClick?: () => void; + $active?: boolean; + onClick?: (e: MouseEvent) => void; size?: number; - color?: string; + color?: Colors; } -const Icon = ({ value, $rotate, onClick, size, color, ...props }: IconProps) => { +const Icon = ({ value, $active = true, color = 'black', ...props }: IconProps) => { return ( - - {renderIcon(value)} + + {renderIcon(value, color)} ); }; -const renderIcon = (value: IconValues) => { +const renderIcon = (value: IconValues, color: Colors) => { switch (value) { case 'logo': return ( @@ -71,7 +75,7 @@ const renderIcon = (value: IconValues) => { ); @@ -86,13 +90,7 @@ const renderIcon = (value: IconValues) => { ); case 'trophy': return ( - + { ); case 'github': return ( - + { case 'blog': return ( { ); case 'settings': return ( - + { ); case 'logout': return ( - + { ); case 'quit': return ( - + { $rotate?: boolean; size?: number; - color?: string; + color?: Colors; + $active?: boolean; + value: IconValues; } export const Container = styled.div` - width: ${({ size }) => size ? `${size}px` : 'fit-content'}; - height: ${({ size }) => size ? `${size}px` : 'fit-content'}; - transform: ${({ $rotate }) => ( $rotate ? 'rotate(180deg)' : 'rotate(0deg)')}; + width: ${({ size }) => (size ? `${size}px` : 'fit-content')}; + height: ${({ size }) => (size ? `${size}px` : 'fit-content')}; + ${({ color = 'black' }) => css` + fill: ${colors[color]}; + stroke: ${colors[color]}; + `}; + ${({ $rotate }) => + $rotate + ? css` + transform: rotate(180deg); + ` + : css` + transform: rotate(0deg); + `}; + transition: all 0.3s ease; + ${({ $active }) => + $active + ? css` + &:hover { + transform: scale(1.1); + } + &:active { + transform: scale(0.9); + } + ` + : null} + cursor: pointer; svg { width: 100%; - height : 100%; + height: 100%; object-fit: contain; stroke: ${({ color }) => (color ? color : '')}; } diff --git a/src/components/shared/infoStatus/index.tsx b/src/components/shared/infoStatus/index.tsx index 9b65b5e..6128c04 100644 --- a/src/components/shared/infoStatus/index.tsx +++ b/src/components/shared/infoStatus/index.tsx @@ -1,7 +1,9 @@ -import { ActiveBox, Container } from './styles'; import Icon, { IconValues } from '../icon'; import { useLike } from '@/hooks/like/useLike'; -import React from 'react'; +import { Text } from '..'; + +import * as S from './styles'; +import { MouseEvent } from 'react'; interface StatusProps { postNumber: number; @@ -46,17 +48,19 @@ export const Status = ({ interface InfoStatusProps { value: IconValues; count: number; - onClick?: (e: React.MouseEvent) => void; + $active?: boolean; + size?: number; + onClick?: (e: MouseEvent) => void; } -const InfoStatus = ({ value, count, onClick }: InfoStatusProps) => { +const InfoStatus = ({ count, size = 24, ...props }: InfoStatusProps) => { return ( - - - - -

{count}

- + + + + {count} + + ); }; diff --git a/src/components/shared/infoStatus/styles.ts b/src/components/shared/infoStatus/styles.ts index 2107052..7f8f936 100644 --- a/src/components/shared/infoStatus/styles.ts +++ b/src/components/shared/infoStatus/styles.ts @@ -1,44 +1,8 @@ -import { colors } from '@/styles/colorPalette'; import styled from '@emotion/styled'; export const Container = styled.div` - width: auto; - height: 100%; - margin: 0; - padding: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; - - p { - font-size: 20px; - font-weight: 500; - color: ${colors.gray300}; - } -`; - -interface ActiveBoxProps { - value: string; -} - -export const ActiveBox = styled.div` - width: 30px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; - - &:hover { - transform: ${({ value }) => - value === 'nolike' || value === 'yeslike' ? 'scale(1.1)' : 'none'}; - cursor: ${({ value }) => - value === 'nolike' || value === 'yeslike' ? 'pointer' : 'default'}; - } - - &:active { - transform: ${({ value }) => - value === 'nolike' || value === 'yeslike' ? 'scale(0.9)' : 'none'}; - } `; diff --git a/src/pages/detail/right/index.tsx b/src/pages/detail/right/index.tsx index faa226e..33bf18f 100644 --- a/src/pages/detail/right/index.tsx +++ b/src/pages/detail/right/index.tsx @@ -1,20 +1,22 @@ import { postFormStore } from '@/stores/post'; -import { postCheck } from '@/apis/post'; +import { postCheck } from '@/apis/article'; import useGetPost from '@/hooks/post/useGetPost'; import { useModalContext } from '@/contexts/ModalContext'; import { CodeBox } from '@/components/post'; import { useNavigate, useParams } from 'react-router-dom'; import { Icon, StyledButton } from '@/components/shared'; +import InfoStatus from '@/components/shared/infoStatus'; import * as S from './styles'; +import { layoutMap } from '@/styles/layout'; const DetailRight = () => { const navigate = useNavigate(); const { open } = useModalContext(); - const postForm = postFormStore((state) => state.postForm); const { postId } = useParams(); + const postForm = postFormStore((state) => state.postForm); const { - data: { answer, language }, + data: { answer, language, commentCount }, } = useGetPost(); const handleSubmit = () => { @@ -37,24 +39,22 @@ const DetailRight = () => { navigate(-1)} /> -
- -
+ + open({ + title: '게시글 작성을 그만두시겠습니까?', + onButtonClick: () => {}, + hasCancelButton: true, + buttonLabel: '뒤로가기', + type: 'comment', + }) + } + /> open({ title: '정답 코드', @@ -64,6 +64,7 @@ const DetailRight = () => { language, }) } + size={32} /> Submit From 42f6e554fb9c53cea83601fecd1a9249c243b94b Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Tue, 14 May 2024 22:27:56 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Fix:=20=EC=9C=A0=EC=A0=80=20=EC=9D=B8?= =?UTF-8?q?=EC=A6=9D=20=EA=B4=80=EB=A0=A8=20api=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20suspense=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 21 +++++++------ src/apis/auth.ts | 2 -- src/apis/instance.ts | 72 +++++++++----------------------------------- 3 files changed, 27 insertions(+), 68 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8daf4b1..e4aee8b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,20 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { routers } from './routes'; import Layout from './routes/Layout'; +import { Suspense } from 'react'; function App() { return ( - - - }> - {routers.map(({ path, component }) => ( - - ))} - - - + loading}> + + + }> + {routers.map(({ path, component }) => ( + + ))} + + + + ); } diff --git a/src/apis/auth.ts b/src/apis/auth.ts index d12cfca..206c9df 100644 --- a/src/apis/auth.ts +++ b/src/apis/auth.ts @@ -5,8 +5,6 @@ export const getNewToken = async () => { try { const response = await instance.post('/api/reissue', { expiredToken: expiredToken }); const newAccessToken = response.data.accessToken; - localStorage.setItem('access', newAccessToken); - console.log('토큰 재발급 성공', newAccessToken); return newAccessToken; } catch (error) { console.error('토큰 재발급 실패', error); diff --git a/src/apis/instance.ts b/src/apis/instance.ts index b92ad21..6579d9a 100644 --- a/src/apis/instance.ts +++ b/src/apis/instance.ts @@ -1,30 +1,34 @@ import axios from 'axios'; import { getNewToken } from './auth'; -const access = localStorage.getItem('access'); - const instance = axios.create({ baseURL: import.meta.env.VITE_BASE_URL, headers: { 'Content-Type': 'application/json', - Authorization: `Bearer ${access}`, }, }); -instance.interceptors.request.use(async (response) => {}); +instance.interceptors.request.use(async (config) => { + const access = localStorage.getItem('access'); + if (access) { + config.headers['Authorization'] = `Bearer ${access}`; + } + return config; +}); instance.interceptors.response.use( - (response) => { - return response; - }, + (response) => response, async (error) => { const originalRequest = error.config; - const alreadyRefreshed = originalRequest._alreadyRefreshed; - if (error.response?.status === 401 && !alreadyRefreshed) { + if (error.response?.status === 401 && !originalRequest._alreadyRefreshed) { originalRequest._alreadyRefreshed = true; // 무한 요청 방지 try { - await getNewToken(); - return instance(originalRequest); + const newAccessToken = await getNewToken(); + if (newAccessToken) { + localStorage.setItem('access', newAccessToken); + originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`; + return instance(originalRequest); + } } catch (refreshError) { console.error('토큰 발급 실패', refreshError); window.location.href = '/login'; @@ -34,49 +38,3 @@ instance.interceptors.response.use( ); export default instance; - -// export const getAuthAxios = (accessToken?: string | null) => { -// const headersOption = accessToken -// ? { -// 'Content-Type': 'application/json', -// Authorization: `Bearer ${accessToken}`, -// } -// : { -// 'Content-Type': 'application/json', -// }; - -// const authAxios = axios.create({ -// baseURL: import.meta.env.VITE_BASE_URL, -// headers: headersOption, -// }); - -// authAxios.interceptors.response.use( -// (response) => response, -// async (error) => { -// const originalRequest = error.config; -// if (error.response && error.response.status === 401 && !originalRequest._retry) { -// try { -// originalRequest._retry = true; // 무한으로 요청되는 것 막음 -// const newAccessToken = await getNewToken(); -// if (newAccessToken) { -// localStorage.setItem('access', newAccessToken); -// originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`; -// return authAxios(originalRequest); -// } -// } catch (error) { -// return console.log('토큰 재발급 실패:'); -// } -// } else { -// return console.log('error', error); -// } -// }, -// ); - -// return authAxios; -// }; - -// instance.interceptors.request.use((config) => { -// const token = localStorage.getItem('access'); -// config.headers['Authorization'] = `Bearer ${token}`; -// return config; -// }); From 7440b11ab8b57e7f1309c84da28ecea50641b549 Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Tue, 14 May 2024 22:45:42 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Bug:=20merge=20=EC=9D=B4=ED=9B=84=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=EB=90=98=EC=A7=80=20=EC=95=8A=EC=9D=80=20?= =?UTF-8?q?=EC=B6=A9=EB=8F=8C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/auth.ts | 3 --- src/components/mypage/solved/index.tsx | 23 ----------------------- src/components/mypage/userInfo/index.tsx | 11 ----------- src/components/shared/article/index.tsx | 8 -------- src/stores/mypage.ts | 12 ------------ 5 files changed, 57 deletions(-) diff --git a/src/apis/auth.ts b/src/apis/auth.ts index 459c0fc..e41f99a 100644 --- a/src/apis/auth.ts +++ b/src/apis/auth.ts @@ -5,10 +5,7 @@ export const getNewToken = async () => { try { const response = await instance.post('/api/reissue', { expiredToken: expiredToken }); const newAccessToken = response.data.accessToken; -<<<<<<< HEAD -======= console.log('토큰 재발급 성공', newAccessToken); ->>>>>>> origin/dev return newAccessToken; } catch (error) { console.error('토큰 재발급 실패', error); diff --git a/src/components/mypage/solved/index.tsx b/src/components/mypage/solved/index.tsx index e9921be..e315a67 100644 --- a/src/components/mypage/solved/index.tsx +++ b/src/components/mypage/solved/index.tsx @@ -1,18 +1,10 @@ import { useInfiniteQuery } from '@tanstack/react-query'; -<<<<<<< HEAD -import * as S from '../created/styles'; -import { getMypageArticles } from '@/apis/mypage.ts'; -import { useNickname } from '@/stores/mypage.ts'; -import { useEffect, useRef } from 'react'; -import { ArticleType } from '@/types'; -======= import * as S from '../articles/styles'; import { getMypageArticles } from '@/apis/mypage'; import { useEmail } from '@/stores/mypage'; import { useEffect, useRef } from 'react'; import { ArticleType, MypageArticles } from '@/types'; import SkeletonBox from '@/components/loader/skeleton'; ->>>>>>> origin/dev const SolvedMenu = ({ value }: Pick) => { const { email } = useEmail(); @@ -22,18 +14,10 @@ const SolvedMenu = ({ value }: Pick) => { queryKey: [value, email], queryFn: ({ pageParam }) => getMypageArticles({ -<<<<<<< HEAD - pageIndex: pageParam, - isDone: false, - value: 'solved', - email: nickname, - loginUserId: loginUserId, -======= page: pageParam, size: 10, value: value, email: email, ->>>>>>> origin/dev }), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextPage, @@ -57,12 +41,6 @@ const SolvedMenu = ({ value }: Pick) => { return ( -<<<<<<< HEAD - {data?.pages.map((page) => - page.data.map((post: ArticleType) => ( -
{/* 게시글 공통 컴포넌트로 표시 */}
- )), -======= {isFetchingNextPage ? ( ) : ( @@ -71,7 +49,6 @@ const SolvedMenu = ({ value }: Pick) => {
{/* solved list component */}
)), ) ->>>>>>> origin/dev )}
diff --git a/src/components/mypage/userInfo/index.tsx b/src/components/mypage/userInfo/index.tsx index aeeeb1f..1c862a3 100644 --- a/src/components/mypage/userInfo/index.tsx +++ b/src/components/mypage/userInfo/index.tsx @@ -1,14 +1,4 @@ import { Icon, UserCircle } from '@/components/shared'; -<<<<<<< HEAD -import { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { User } from '@/types/auth.ts'; -import { IconValues } from '@/components/shared/icon'; -import { useNickname } from '@/stores/mypage'; -import { getUserInfo } from '@/apis/user'; - -import * as S from './styles'; -======= import * as S from './styles'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -17,7 +7,6 @@ import { User } from '@/types/auth.ts'; import { IconValues } from '@/components/shared/icon'; import { useEmail } from '@/stores/mypage'; import { getUserInfo } from '@/apis/user'; ->>>>>>> origin/dev const UserInfo = () => { const navigate = useNavigate(); diff --git a/src/components/shared/article/index.tsx b/src/components/shared/article/index.tsx index 1a3f282..5d990db 100644 --- a/src/components/shared/article/index.tsx +++ b/src/components/shared/article/index.tsx @@ -1,17 +1,9 @@ -<<<<<<< HEAD -import { ArticleType } from '@/types/article'; -======= ->>>>>>> origin/dev import * as S from './styles'; import React, { ReactNode } from 'react'; import { Status } from '../infoStatus'; import { useNavigate } from 'react-router-dom'; // ArticleItem 타입에서 author 제외한 타입 정의 -<<<<<<< HEAD -type ArticleTypes = Omit; -======= ->>>>>>> origin/dev interface ArticleProps { threedot?: ReactNode; diff --git a/src/stores/mypage.ts b/src/stores/mypage.ts index 531582c..04a43e4 100644 --- a/src/stores/mypage.ts +++ b/src/stores/mypage.ts @@ -1,16 +1,5 @@ import { create } from 'zustand'; -<<<<<<< HEAD -// 이거는 삭제될 것 같음 -interface nickname { - nickname: string | null; - setnickname: (nickname: string | null) => void; -} - -export const usenickname = create((set) => ({ - nickname: null, - setnickname: (nickname) => set({ nickname: nickname }), -======= interface Email { email: string; setEmail: (email: string) => void; @@ -19,5 +8,4 @@ interface Email { export const useEmail = create((set) => ({ email: '', setEmail: (email) => set({ email: email }), ->>>>>>> origin/dev })); From 863711678f074cc636a61486aa76f5443ee0d577 Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Wed, 15 May 2024 00:03:45 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Bug:=20merge=20=ED=9B=84=20=EB=B2=84?= =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/article.ts | 35 ++++++++++++---------- src/apis/auth.ts | 14 --------- src/apis/instance.ts | 2 +- src/apis/like.ts | 6 ++-- src/components/main/MainListItem/index.tsx | 7 +---- src/components/main/mainList/MainList.tsx | 2 +- src/components/shared/icon/index.tsx | 1 - src/components/shared/infoStatus/index.tsx | 4 +-- src/hooks/like/useLike.ts | 31 +++++++++++-------- src/hooks/post/useGetPosts.ts | 19 ++++++------ src/pages/detail/right/index.tsx | 1 - 11 files changed, 55 insertions(+), 67 deletions(-) delete mode 100644 src/apis/auth.ts diff --git a/src/apis/article.ts b/src/apis/article.ts index 91302de..9977982 100644 --- a/src/apis/article.ts +++ b/src/apis/article.ts @@ -1,16 +1,31 @@ import { ArticleDetail, ArticleList } from '@/types'; import instance from './instance'; -export const postArticle = async (formData: ArticleDetail) => { - const response = await instance.post('/api/posts', formData); - return response.data; -}; - export const getArticle = async (postId: string) => { const response = await instance.get(`/api/posts/${postId}`); return response.data as ArticleDetail; }; +interface FetchParams { + pageParam?: number; + size: number; +} + +export const getArticles = async ({ pageParam = 1, size }: FetchParams) => { + const response = await instance.get('/api/posts', { + params: { + page: pageParam, + size, + }, + }); + return response.data as ArticleList; +}; + +export const postArticle = async (formData: ArticleDetail) => { + const response = await instance.post('/api/posts', formData); + return response.data; +}; + export const postCheck = async ( formData: Pick, postId: string, @@ -23,13 +38,3 @@ export const postCheck = async ( const response = await instance.post('api/posts/submit', newFormData); return response.data; }; - -interface FetchParams { - pageParam?: number; - limit: number; -} - -export const getArticles = async ({ pageParam = 1, limit }: FetchParams) => { - const response = await instance.get(`/api/posts?page=${pageParam}&limit=${limit}`); - return response.data as ArticleList; -}; diff --git a/src/apis/auth.ts b/src/apis/auth.ts deleted file mode 100644 index e41f99a..0000000 --- a/src/apis/auth.ts +++ /dev/null @@ -1,14 +0,0 @@ -import instance from './instance'; - -export const getNewToken = async () => { - const expiredToken = localStorage.getItem('access'); - try { - const response = await instance.post('/api/reissue', { expiredToken: expiredToken }); - const newAccessToken = response.data.accessToken; - console.log('토큰 재발급 성공', newAccessToken); - return newAccessToken; - } catch (error) { - console.error('토큰 재발급 실패', error); - throw error; - } -}; diff --git a/src/apis/instance.ts b/src/apis/instance.ts index 6579d9a..df233de 100644 --- a/src/apis/instance.ts +++ b/src/apis/instance.ts @@ -1,5 +1,5 @@ import axios from 'axios'; -import { getNewToken } from './auth'; +import { getNewToken } from './refresh'; const instance = axios.create({ baseURL: import.meta.env.VITE_BASE_URL, diff --git a/src/apis/like.ts b/src/apis/like.ts index e797bf0..d19d21b 100644 --- a/src/apis/like.ts +++ b/src/apis/like.ts @@ -1,15 +1,13 @@ import instance from './instance'; // 좋아요 수 업데이트 구문 -const updateLike = async (postId: number): Promise => { +export const postLike = async (postId: number): Promise => { try { // console.log(typeof(postId)); - const response = await instance.post('/api/like', {postId: postId}); + const response = await instance.post('/api/like', { postId: postId }); console.log(response); } catch (error) { console.error('실패', error); throw error; } }; - -export default updateLike; diff --git a/src/components/main/MainListItem/index.tsx b/src/components/main/MainListItem/index.tsx index 2dec9ac..6ee2685 100644 --- a/src/components/main/MainListItem/index.tsx +++ b/src/components/main/MainListItem/index.tsx @@ -2,20 +2,15 @@ import { Icon } from '@/components/shared'; import * as S from './styles'; import Article from '@/components/shared/article'; import { ArticleType } from '@/types'; +import getTimeDifference from '@/utils/getTimeDifference'; interface ListItemProps { listItem: ArticleType; - listItem: ArticleType; } const MainListItem = ({ listItem }: ListItemProps) => { // 구조 분해 할당으로 author과 그 외 나머지 정보들로 분리 const { user, ...articleDetails } = listItem; - - useEffect(() => { - console.log(listItem); - }, []); - const createDate = getTimeDifference(listItem.createdAt); return ( diff --git a/src/components/main/mainList/MainList.tsx b/src/components/main/mainList/MainList.tsx index 3134e89..629fa0b 100644 --- a/src/components/main/mainList/MainList.tsx +++ b/src/components/main/mainList/MainList.tsx @@ -1,9 +1,9 @@ import * as S from './styles'; import { ArticleType } from '@/types/article'; import React from 'react'; -import MainListItem from '../mainListItem'; import Loading from '@/components/loader'; import useGetPosts from '@/hooks/post/useGetPosts'; +import MainListItem from '../MainListItem'; const MainList = () => { const { data, ref, isFetchingNextPage } = useGetPosts(); diff --git a/src/components/shared/icon/index.tsx b/src/components/shared/icon/index.tsx index a0ac125..c91ec66 100644 --- a/src/components/shared/icon/index.tsx +++ b/src/components/shared/icon/index.tsx @@ -1,4 +1,3 @@ -import { Link } from 'react-router-dom'; import { MouseEvent } from 'react'; import { Colors, colors } from '@/styles/colorPalette'; diff --git a/src/components/shared/infoStatus/index.tsx b/src/components/shared/infoStatus/index.tsx index 081e4f3..62c7c83 100644 --- a/src/components/shared/infoStatus/index.tsx +++ b/src/components/shared/infoStatus/index.tsx @@ -1,9 +1,9 @@ import Icon, { IconValues } from '../icon'; import { useLike } from '@/hooks/like/useLike'; import { Text } from '..'; +import { MouseEvent } from 'react'; import * as S from './styles'; -import { MouseEvent } from 'react'; interface StatusProps { postNumber: number; @@ -62,6 +62,6 @@ const InfoStatus = ({ count, size = 24, ...props }: InfoStatusProps) => { ); -}); +}; export default InfoStatus; diff --git a/src/hooks/like/useLike.ts b/src/hooks/like/useLike.ts index a284055..6408834 100644 --- a/src/hooks/like/useLike.ts +++ b/src/hooks/like/useLike.ts @@ -1,12 +1,16 @@ -import updateLike from '@/apis/like'; import { useCallback } from 'react'; -import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { postLike } from '@/apis/like'; -export const useLike = (postId: number, initialLikeCount: number, initialLikeType: boolean) => { +export const useLike = ( + postId: number, + initialLikeCount: number, + initialLikeType: boolean, +) => { const queryClient = useQueryClient(); const mutation = useMutation({ - mutationFn: async () => updateLike(postId), + mutationFn: async () => postLike(postId), onMutate: async () => { const newLikeType = !initialLikeType; const newLikeCount = newLikeType ? initialLikeCount + 1 : initialLikeCount - 1; @@ -30,9 +34,9 @@ export const useLike = (postId: number, initialLikeCount: number, initialLikeTyp console.error('좋아요 업데이트 실패', error); }, onSettled: () => { - queryClient.invalidateQueries({ - queryKey: ['posts'] - }); + queryClient.invalidateQueries({ + queryKey: ['posts'], + }); }, }); @@ -44,11 +48,14 @@ export const useLike = (postId: number, initialLikeCount: number, initialLikeTyp mutation.mutate(); }, [mutation, postId]); - const currentLikeData = queryClient.getQueryData<{ likeCount: number; likeType: boolean }>(['likes', postId]); + const currentLikeData = queryClient.getQueryData<{ + likeCount: number; + likeType: boolean; + }>(['likes', postId]); - return { - likeCount: currentLikeData?.likeCount ?? initialLikeCount, - likeType: currentLikeData?.likeType ?? initialLikeType, - toggleLike + return { + likeCount: currentLikeData?.likeCount ?? initialLikeCount, + likeType: currentLikeData?.likeType ?? initialLikeType, + toggleLike, }; }; diff --git a/src/hooks/post/useGetPosts.ts b/src/hooks/post/useGetPosts.ts index 7bb50d8..9613386 100644 --- a/src/hooks/post/useGetPosts.ts +++ b/src/hooks/post/useGetPosts.ts @@ -1,4 +1,4 @@ -import { getArticles } from '@/apis/post'; +import { getArticles } from '@/apis/article'; import { ArticleList } from '@/types'; import { QueryFunctionContext, useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { useEffect } from 'react'; @@ -7,11 +7,10 @@ import { useInView } from 'react-intersection-observer'; const useGetPosts = () => { const { ref, inView } = useInView(); - const { - data, - fetchNextPage, - isFetchingNextPage - } = useSuspenseInfiniteQuery({ + const { data, fetchNextPage, isFetchingNextPage } = useSuspenseInfiniteQuery< + ArticleList, + Error + >({ queryKey: ['posts'], queryFn: ({ pageParam = 0 }: QueryFunctionContext) => { // pageParam 타입 검증 @@ -30,13 +29,13 @@ const useGetPosts = () => { refetchOnWindowFocus: false, select: (data) => { return { - pages: data.pages.map(page => ({ + pages: data.pages.map((page) => ({ ...page, - posts: page.posts.map(post => ({ + posts: page.posts.map((post) => ({ ...post, - })) + })), })), - pageParams: data.pageParams // 이전 페이지 파라미터를 유지 + pageParams: data.pageParams, // 이전 페이지 파라미터를 유지 }; }, }); diff --git a/src/pages/detail/right/index.tsx b/src/pages/detail/right/index.tsx index fdbf580..33bf18f 100644 --- a/src/pages/detail/right/index.tsx +++ b/src/pages/detail/right/index.tsx @@ -22,7 +22,6 @@ const DetailRight = () => { const handleSubmit = () => { const access = localStorage.getItem('access'); if (access) { - postCheck( postCheck( { answer: postForm.answer, language: postForm.language }, postId as string,