From 42a36333c5d53f5b93d3ce5a73f74c8f6c05a66f Mon Sep 17 00:00:00 2001 From: luli Date: Mon, 11 Aug 2025 20:58:14 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[#12]=20=EB=AD=90=EC=95=BC=20=EB=8B=A4?= =?UTF-8?q?=EC=8B=9C=20=EA=B3=B5=ED=86=B5=20api=ED=8F=B4=EB=8D=94=20src?= =?UTF-8?q?=EC=95=84=EB=9E=98=EC=97=90=20=EB=A7=8C=EB=93=A4=EC=96=B4?= =?UTF-8?q?=EC=84=9C=20=EA=B7=B8=EC=95=88=EC=97=90=20axios=EC=9A=A9=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1=ED=95=B4=EC=84=9C=20?= =?UTF-8?q?=EC=9D=B8=EC=8A=A4=ED=84=B4=EC=8A=A4=ED=99=94=20=EC=8B=9C?= =?UTF-8?q?=EC=BC=B0=EC=8A=B5=EB=8B=88=EB=8B=A4.=20pages=EC=95=84=EB=9E=98?= =?UTF-8?q?=EC=97=90=20MessageList.jsx=ED=8C=8C=EC=9D=BC=20=EC=95=88?= =?UTF-8?q?=EC=97=90=20=EC=98=88=EC=8B=9C=EC=9A=A9=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=A0=81=EC=96=B4=EB=86=93=EC=95=98=EC=8A=B5=EB=8B=88=EB=8B=A4?= =?UTF-8?q?.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 280 ++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/api/axiosInstance.js | 9 ++ src/app.jsx | 6 +- src/pages/MessageList.jsx | 35 +++++ src/pages/test-page.jsx | 1 + 6 files changed, 330 insertions(+), 2 deletions(-) create mode 100644 src/api/axiosInstance.js create mode 100644 src/pages/MessageList.jsx diff --git a/package-lock.json b/package-lock.json index 6237549..74a5db7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "rolling", "version": "0.0.0", "dependencies": { + "axios": "^1.11.0", "react": "^19.1.1", "react-dom": "^19.1.1", "styled-components": "^6.1.19" @@ -1498,6 +1499,23 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, + "node_modules/axios": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz", + "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.4", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1549,6 +1567,19 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1626,6 +1657,18 @@ "dev": true, "license": "MIT" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1706,6 +1749,29 @@ "dev": true, "license": "MIT" }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.199", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.199.tgz", @@ -1713,6 +1779,51 @@ "dev": true, "license": "ISC" }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-set-tostringtag": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/esbuild": { "version": "0.25.8", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz", @@ -2043,6 +2154,42 @@ "dev": true, "license": "ISC" }, + "node_modules/follow-redirects": { + "version": "1.15.11", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", + "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2058,6 +2205,15 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -2068,6 +2224,43 @@ "node": ">=6.9.0" } }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -2094,6 +2287,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -2104,6 +2309,45 @@ "node": ">=8" } }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "license": "MIT", + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -2295,6 +2539,36 @@ "yallist": "^3.0.2" } }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -2494,6 +2768,12 @@ "node": ">= 0.8.0" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index c3553fb..812f44f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.11.0", "react": "^19.1.1", "react-dom": "^19.1.1", "styled-components": "^6.1.19" diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js new file mode 100644 index 0000000..afee3af --- /dev/null +++ b/src/api/axiosInstance.js @@ -0,0 +1,9 @@ +import axios from 'axios'; + +const axiosInstance = axios.create({ + baseURL: 'https://rolling-api.vercel.app/', + timeout: 5000, + headers: { 'Content-Type': 'application/json' }, +}); + +export default axiosInstance; \ No newline at end of file diff --git a/src/app.jsx b/src/app.jsx index c2cf85c..4a5c1fb 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,7 +1,9 @@ -import TestPage from "./pages/test-page"; +// import TestPage from "./pages/test-page"; +import MessagePage from "./pages/MessageList"; function App() { - return ; + // return ; + return ; } export default App; diff --git a/src/pages/MessageList.jsx b/src/pages/MessageList.jsx new file mode 100644 index 0000000..4f4b32e --- /dev/null +++ b/src/pages/MessageList.jsx @@ -0,0 +1,35 @@ +import ArrowButton from "../components/button/arrow-button"; +import ARROW_BUTTON_DIRECTION from "../components/button/arrow-button-direction"; +import { +OutlinedButton, +PrimaryButton, +SecondaryButton, +} from "../components/button/button"; +import BUTTON_SIZE from "../components/button/button-size"; +import ToggleButton from "../components/button/toggle-button"; + +import React, { useEffect, useState } from "react"; +import axiosInstance from '../api/axiosInstance'; + +function StartTest() { + const [imageUrl, setImageUrl] = useState(null); + + /* axios 사용용 예시코드 */ + useEffect(() => { + axiosInstance.get('/background-images/') + .then(res => { + if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { + setImageUrl(res.data.imageUrls[0]); + } + }) + .catch(console.error); + }, []); + + return ( +
+ {imageUrl ? (background) : (

이미지를 불러오는 중입니다...

)} +
+ ); +} + +export default StartTest; diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index 705a521..d17b7f1 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -22,6 +22,7 @@ function TestPage() { margin: 16, }} > +

🤯

From c7987d90837dc5f70a77d84d51bd2bbc0a970136 Mon Sep 17 00:00:00 2001 From: luli Date: Tue, 12 Aug 2025 12:28:17 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=AA=85=20kebab-case?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95,=20prettier=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/axios-instance.js | 9 +++++++++ src/api/axiosInstance.js | 9 --------- src/pages/MessageList.jsx | 35 --------------------------------- src/pages/message-list.jsx | 40 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 49 insertions(+), 44 deletions(-) create mode 100644 src/api/axios-instance.js delete mode 100644 src/api/axiosInstance.js delete mode 100644 src/pages/MessageList.jsx create mode 100644 src/pages/message-list.jsx diff --git a/src/api/axios-instance.js b/src/api/axios-instance.js new file mode 100644 index 0000000..217889d --- /dev/null +++ b/src/api/axios-instance.js @@ -0,0 +1,9 @@ +import axios from "axios"; + +const axiosInstance = axios.create({ + baseURL: "https://rolling-api.vercel.app/", + timeout: 5000, + headers: { "Content-Type": "application/json" }, +}); + +export default axiosInstance; diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js deleted file mode 100644 index afee3af..0000000 --- a/src/api/axiosInstance.js +++ /dev/null @@ -1,9 +0,0 @@ -import axios from 'axios'; - -const axiosInstance = axios.create({ - baseURL: 'https://rolling-api.vercel.app/', - timeout: 5000, - headers: { 'Content-Type': 'application/json' }, -}); - -export default axiosInstance; \ No newline at end of file diff --git a/src/pages/MessageList.jsx b/src/pages/MessageList.jsx deleted file mode 100644 index 4f4b32e..0000000 --- a/src/pages/MessageList.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import ArrowButton from "../components/button/arrow-button"; -import ARROW_BUTTON_DIRECTION from "../components/button/arrow-button-direction"; -import { -OutlinedButton, -PrimaryButton, -SecondaryButton, -} from "../components/button/button"; -import BUTTON_SIZE from "../components/button/button-size"; -import ToggleButton from "../components/button/toggle-button"; - -import React, { useEffect, useState } from "react"; -import axiosInstance from '../api/axiosInstance'; - -function StartTest() { - const [imageUrl, setImageUrl] = useState(null); - - /* axios 사용용 예시코드 */ - useEffect(() => { - axiosInstance.get('/background-images/') - .then(res => { - if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { - setImageUrl(res.data.imageUrls[0]); - } - }) - .catch(console.error); - }, []); - - return ( -
- {imageUrl ? (background) : (

이미지를 불러오는 중입니다...

)} -
- ); -} - -export default StartTest; diff --git a/src/pages/message-list.jsx b/src/pages/message-list.jsx new file mode 100644 index 0000000..006d869 --- /dev/null +++ b/src/pages/message-list.jsx @@ -0,0 +1,40 @@ +import ArrowButton from "../components/button/arrow-button"; +import ARROW_BUTTON_DIRECTION from "../components/button/arrow-button-direction"; +import { + OutlinedButton, + PrimaryButton, + SecondaryButton, +} from "../components/button/button"; +import BUTTON_SIZE from "../components/button/button-size"; +import ToggleButton from "../components/button/toggle-button"; + +import React, { useEffect, useState } from "react"; +import axiosInstance from "../api/axios-instance"; + +function ShowMessageList() { + const [imageUrl, setImageUrl] = useState(null); + + /* axios 사용용 예시코드 */ + useEffect(() => { + axiosInstance + .get("/background-images/") + .then((res) => { + if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { + setImageUrl(res.data.imageUrls[0]); + } + }) + .catch(console.error); + }, []); + + return ( +
+ {imageUrl ? ( + background + ) : ( +

이미지를 불러오는 중입니다...

+ )} +
+ ); +} + +export default ShowMessageList; From 8ab9c996fcfd87787d54b005e48ec1462ac68b1b Mon Sep 17 00:00:00 2001 From: luli Date: Tue, 12 Aug 2025 15:09:31 +0900 Subject: [PATCH 3/5] =?UTF-8?q?#12:=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20kebab-?= =?UTF-8?q?case=EB=A1=9C=20=EC=88=98=EC=A0=95,=20prettier=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 그외에 제가 만든 페이지 코드가 좀 섞여있긴한데 완성된게 아니라서 신경안쓰셔도됩니다 😢 --- src/app.jsx | 2 +- src/pages/message-list.jsx | 97 ++++++++++++++++++++++++++++++++++++++ src/pages/test-data.js | 19 ++++++++ src/pages/test-page.jsx | 1 - 4 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 src/pages/test-data.js diff --git a/src/app.jsx b/src/app.jsx index 4a5c1fb..ee2bf95 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,5 +1,5 @@ // import TestPage from "./pages/test-page"; -import MessagePage from "./pages/MessageList"; +import MessagePage from "./pages/message-list"; function App() { // return ; diff --git a/src/pages/message-list.jsx b/src/pages/message-list.jsx index 006d869..a65e304 100644 --- a/src/pages/message-list.jsx +++ b/src/pages/message-list.jsx @@ -14,6 +14,103 @@ import axiosInstance from "../api/axios-instance"; function ShowMessageList() { const [imageUrl, setImageUrl] = useState(null); + // const cardConStyle = { + // border: "1px solid red", + // display: "grid", + // gridTemplateColumns: "275px 275px 275px 275px", + // gap: "20px", + // width: "fit-content", + + // position: "relative", // <-- 중요: 화살표를 absolute로 겹치게 하기 위해 + // overflow: "visible", // 부모가 overflow:hidden 이면 겹치지 않음 + // }; + + // const cardStyle = { + // width: "275px", + // height: "260px", + // border: "1px solid red", + // }; + + // const testStyle = { + // textAlign: "center", + // }; + + // const sectionStyle = { + // justifySelf: "center", + // }; + + // const buttonStyle = { + // marginTop: "64px", + // fontWeight: "400", + // padding: "14px 60px", + // }; + + // const htStyle = { + // textAlign: "left", + // }; + + // const rButton = { + // position: "absolute", + // right: -20, // 필요시 조정 + // top: "50%", + // transform: "translateY(-50%)", + // zIndex: 20, + // }; + + // const lButton = { + // position: "absolute", + // left: -20, // 필요시 조정 + // top: "50%", + // transform: "translateY(-50%)", + // zIndex: 20, + // }; + + // useEffect(() => { + // axiosInstance + // .get("/18-3/recipients/?limit=5&offset=20") + // .then((res) => { + // console.log(res.data); + // }) + // .catch(console.error); + // }, []); + + // return ( + //
+ // /* navi 들어갈 자리 */ + //
+ //
+ //

인기 롤링 페이퍼 🔥

+ //
+ //
+ //
+ //
+ //
+ //
+ // + //
+ //
+ //
+ //
+ //

최근에 만든 롤링 페이퍼 ⭐

+ //
+ //
+ //
+ //
+ //
+ //
+ // + //
+ //
+ //
+ //
+ // + //
+ // ); + /* axios 사용용 예시코드 */ useEffect(() => { axiosInstance diff --git a/src/pages/test-data.js b/src/pages/test-data.js new file mode 100644 index 0000000..7780d29 --- /dev/null +++ b/src/pages/test-data.js @@ -0,0 +1,19 @@ +const testData = { + count: 0, + next: null, + previous: "https://rolling-api.vercel.app/18-3/recipients/?limit=5&offset=15", + results: + [ Recipient: { + id: 1111, + team: '18-3', + name: '' + backgroundColor* BackgroundColor[...] + backgroundImageURL BackgroundImageURL[...] + createdAt CreatedAt[...] + messageCount Messagecount[...] + recentMessages Recentmessages[...] + reactionCount Reactioncount[...] + topReactions Topreactions[...] + } + ] +} \ No newline at end of file diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index d17b7f1..705a521 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -22,7 +22,6 @@ function TestPage() { margin: 16, }} > -

🤯

From 9c08080b658166a8861ed4b3b26e3057544160b0 Mon Sep 17 00:00:00 2001 From: luli Date: Tue, 12 Aug 2025 15:27:09 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[#12]=20Axios=20=EC=9D=B8=EC=8A=A4=ED=84=B4?= =?UTF-8?q?=EC=8A=A4=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 공통 api폴더 src아래에 만들어서 그안에 axios용 파일 생성해서 인스턴스화 시켰습니다. pages아래에 MessageList.jsx파일 안에 예시용 코드 적어놓았습니다. --- src/api/axiosInstance.js | 9 +++++++++ src/pages/MessageList.jsx | 35 +++++++++++++++++++++++++++++++++++ src/pages/test-page.jsx | 1 + 3 files changed, 45 insertions(+) create mode 100644 src/api/axiosInstance.js create mode 100644 src/pages/MessageList.jsx diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js new file mode 100644 index 0000000..afee3af --- /dev/null +++ b/src/api/axiosInstance.js @@ -0,0 +1,9 @@ +import axios from 'axios'; + +const axiosInstance = axios.create({ + baseURL: 'https://rolling-api.vercel.app/', + timeout: 5000, + headers: { 'Content-Type': 'application/json' }, +}); + +export default axiosInstance; \ No newline at end of file diff --git a/src/pages/MessageList.jsx b/src/pages/MessageList.jsx new file mode 100644 index 0000000..4f4b32e --- /dev/null +++ b/src/pages/MessageList.jsx @@ -0,0 +1,35 @@ +import ArrowButton from "../components/button/arrow-button"; +import ARROW_BUTTON_DIRECTION from "../components/button/arrow-button-direction"; +import { +OutlinedButton, +PrimaryButton, +SecondaryButton, +} from "../components/button/button"; +import BUTTON_SIZE from "../components/button/button-size"; +import ToggleButton from "../components/button/toggle-button"; + +import React, { useEffect, useState } from "react"; +import axiosInstance from '../api/axiosInstance'; + +function StartTest() { + const [imageUrl, setImageUrl] = useState(null); + + /* axios 사용용 예시코드 */ + useEffect(() => { + axiosInstance.get('/background-images/') + .then(res => { + if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { + setImageUrl(res.data.imageUrls[0]); + } + }) + .catch(console.error); + }, []); + + return ( +
+ {imageUrl ? (background) : (

이미지를 불러오는 중입니다...

)} +
+ ); +} + +export default StartTest; diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index 705a521..d17b7f1 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -22,6 +22,7 @@ function TestPage() { margin: 16, }} > +

🤯

From 3e28d20be8bc64bb44ba529bf078a507dc963acb Mon Sep 17 00:00:00 2001 From: luli Date: Tue, 12 Aug 2025 16:10:23 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=EC=A4=91=EB=B3=B5=ED=8C=8C=EC=9D=BC=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 message-list.jsx, axios-instance.js 파일이 중복되어있어서 삭제했습니다 --- src/api/axiosInstance.js | 9 -- src/pages/MessageList.jsx | 35 ------ src/pages/message-list.jsx | 218 ++++++++++++++++++------------------- src/pages/test-data.js | 19 ---- 4 files changed, 109 insertions(+), 172 deletions(-) delete mode 100644 src/api/axiosInstance.js delete mode 100644 src/pages/MessageList.jsx delete mode 100644 src/pages/test-data.js diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js deleted file mode 100644 index afee3af..0000000 --- a/src/api/axiosInstance.js +++ /dev/null @@ -1,9 +0,0 @@ -import axios from 'axios'; - -const axiosInstance = axios.create({ - baseURL: 'https://rolling-api.vercel.app/', - timeout: 5000, - headers: { 'Content-Type': 'application/json' }, -}); - -export default axiosInstance; \ No newline at end of file diff --git a/src/pages/MessageList.jsx b/src/pages/MessageList.jsx deleted file mode 100644 index 4f4b32e..0000000 --- a/src/pages/MessageList.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import ArrowButton from "../components/button/arrow-button"; -import ARROW_BUTTON_DIRECTION from "../components/button/arrow-button-direction"; -import { -OutlinedButton, -PrimaryButton, -SecondaryButton, -} from "../components/button/button"; -import BUTTON_SIZE from "../components/button/button-size"; -import ToggleButton from "../components/button/toggle-button"; - -import React, { useEffect, useState } from "react"; -import axiosInstance from '../api/axiosInstance'; - -function StartTest() { - const [imageUrl, setImageUrl] = useState(null); - - /* axios 사용용 예시코드 */ - useEffect(() => { - axiosInstance.get('/background-images/') - .then(res => { - if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { - setImageUrl(res.data.imageUrls[0]); - } - }) - .catch(console.error); - }, []); - - return ( -
- {imageUrl ? (background) : (

이미지를 불러오는 중입니다...

)} -
- ); -} - -export default StartTest; diff --git a/src/pages/message-list.jsx b/src/pages/message-list.jsx index a65e304..6cc97b3 100644 --- a/src/pages/message-list.jsx +++ b/src/pages/message-list.jsx @@ -12,126 +12,126 @@ import React, { useEffect, useState } from "react"; import axiosInstance from "../api/axios-instance"; function ShowMessageList() { - const [imageUrl, setImageUrl] = useState(null); - - // const cardConStyle = { - // border: "1px solid red", - // display: "grid", - // gridTemplateColumns: "275px 275px 275px 275px", - // gap: "20px", - // width: "fit-content", - - // position: "relative", // <-- 중요: 화살표를 absolute로 겹치게 하기 위해 - // overflow: "visible", // 부모가 overflow:hidden 이면 겹치지 않음 - // }; - - // const cardStyle = { - // width: "275px", - // height: "260px", - // border: "1px solid red", - // }; - - // const testStyle = { - // textAlign: "center", - // }; - - // const sectionStyle = { - // justifySelf: "center", - // }; - - // const buttonStyle = { - // marginTop: "64px", - // fontWeight: "400", - // padding: "14px 60px", - // }; - - // const htStyle = { - // textAlign: "left", - // }; - - // const rButton = { - // position: "absolute", - // right: -20, // 필요시 조정 - // top: "50%", - // transform: "translateY(-50%)", - // zIndex: 20, - // }; - - // const lButton = { - // position: "absolute", - // left: -20, // 필요시 조정 - // top: "50%", - // transform: "translateY(-50%)", - // zIndex: 20, - // }; + // const [imageUrl, setImageUrl] = useState(null); + + const cardConStyle = { + border: "1px solid red", + display: "grid", + gridTemplateColumns: "275px 275px 275px 275px", + gap: "20px", + width: "fit-content", + + position: "relative", + overflow: "visible", + }; + + const cardStyle = { + width: "275px", + height: "260px", + border: "1px solid red", + }; + + const testStyle = { + textAlign: "center", + }; + + const sectionStyle = { + justifySelf: "center", + }; + + const buttonStyle = { + marginTop: "64px", + fontWeight: "400", + padding: "14px 60px", + }; + + const htStyle = { + textAlign: "left", + }; + + const rButton = { + position: "absolute", + right: -20, // 필요시 조정 + top: "50%", + transform: "translateY(-50%)", + zIndex: 20, + }; + + const lButton = { + position: "absolute", + left: -20, // 필요시 조정 + top: "50%", + transform: "translateY(-50%)", + zIndex: 20, + }; - // useEffect(() => { - // axiosInstance - // .get("/18-3/recipients/?limit=5&offset=20") - // .then((res) => { - // console.log(res.data); - // }) - // .catch(console.error); - // }, []); - - // return ( - //
- // /* navi 들어갈 자리 */ - //
- //
- //

인기 롤링 페이퍼 🔥

- //
- //
- //
- //
- //
- //
- // - //
- //
- //
- //
- //

최근에 만든 롤링 페이퍼 ⭐

- //
- //
- //
- //
- //
- //
- // - //
- //
- //
- //
- // - //
- // ); - - /* axios 사용용 예시코드 */ useEffect(() => { axiosInstance - .get("/background-images/") + .get("/18-3/recipients/?limit=5&offset=20") .then((res) => { - if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { - setImageUrl(res.data.imageUrls[0]); - } + console.log(res.data); }) .catch(console.error); }, []); return ( -
- {imageUrl ? ( - background - ) : ( -

이미지를 불러오는 중입니다...

- )} +
+ /* navi 들어갈 자리 */ +
+
+

인기 롤링 페이퍼 🔥

+
+
+
+
+
+
+ +
+
+
+
+

최근에 만든 롤링 페이퍼 ⭐

+
+
+
+
+
+
+ +
+
+
+
+
); + + /* axios 사용 예시코드 */ + // useEffect(() => { + // axiosInstance + // .get("/background-images/") + // .then((res) => { + // if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { + // setImageUrl(res.data.imageUrls[0]); + // } + // }) + // .catch(console.error); + // }, []); + + // return ( + //
+ // {imageUrl ? ( + // background + // ) : ( + //

이미지를 불러오는 중입니다...

+ // )} + //
+ // ); } export default ShowMessageList; diff --git a/src/pages/test-data.js b/src/pages/test-data.js deleted file mode 100644 index 7780d29..0000000 --- a/src/pages/test-data.js +++ /dev/null @@ -1,19 +0,0 @@ -const testData = { - count: 0, - next: null, - previous: "https://rolling-api.vercel.app/18-3/recipients/?limit=5&offset=15", - results: - [ Recipient: { - id: 1111, - team: '18-3', - name: '' - backgroundColor* BackgroundColor[...] - backgroundImageURL BackgroundImageURL[...] - createdAt CreatedAt[...] - messageCount Messagecount[...] - recentMessages Recentmessages[...] - reactionCount Reactioncount[...] - topReactions Topreactions[...] - } - ] -} \ No newline at end of file