diff --git a/README.md b/README.md index c5e727e7..c18c5fa6 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,103 @@ -
- ์˜ค๋Š˜์˜ ๊ธธ -
- ---- - -๐Ÿ“ ํ”ผ๋“œ๋ฐฑ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”! +## [์—ฌ๊ธฐ์„œ ๋‚˜๋งŒ์˜ ์ง€๋„๋ฅผ ๊ณต์œ ํ•ด ๋ณด์„ธ์š”! ๐Ÿš—](https://preview.dailyroad.site/) -### ํŒ€์› ์†Œ๊ฐœ - -| [J088\_๋„์›์ง„](https://github.com/1119wj) | [J151\_์•ˆ๊ธˆ์žฅ](https://github.com/koomchang) | [J105\_๋ฐ•๋ฏผ์„œ](https://github.com/Miensoap) | [J270 \_ํ•œ๋™ํšจ](https://github.com/hyohyo12) | -|:--------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:---------------------------------------------------------------------------:| -| | | | | -| FE | BE | BE | BE | +
+ + ์˜ค๋Š˜์˜ ๊ธธ + +
### ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ -> **์˜ค๋Š˜์˜ ๊ธธ**์€ ์‚ฌ๋žŒ๋“ค์ด ์ž์‹ ์˜ ๊ฒฝํ—˜๊ณผ ์ทจํ–ฅ์„ ๋ฐ˜์˜ํ•œ ์ง€๋„๋ฅผ ๋งŒ๋“ค๊ณ  ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค. +> **์˜ค๋Š˜์˜ ๊ธธ**์€ ์‚ฌ๋žŒ๋“ค์ด ์ž์‹ ์˜ ๊ฒฝํ—˜๊ณผ ์ทจํ–ฅ์„ ์ง€๋„๋กœ ๋งŒ๋“ค์–ด ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค. > > ๋ง›์ง‘์ด๋‚˜ ์—ฌํ–‰์ง€๋ฅผ ๊ธฐ๋กํ•  ๋•Œ ๋‹ค์–‘ํ•œ ์•ฑ๊ณผ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€์‹ , -> ์ด๊ณณ์—์„œ๋Š” ์žฅ์†Œ์™€ ์ฝ”์Šค๋ฅผ ์ž์œ ๋กญ๊ฒŒ ๊ตฌ์„ฑํ•˜๊ณ ,๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ ๊ณต์œ ํ•˜๋ฉฐ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +> ์ด๊ณณ์—์„œ๋Š” ์ง€๋„์™€ ์ฝ”์Šค๋ฅผ ์ž์œ ๋กญ๊ฒŒ ๊ตฌ์„ฑํ•˜๊ณ ,๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ ๊ณต์œ ํ•˜๋ฉฐ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. > > ๊ฐœ์ธ์ ์ธ ๊ธฐ์–ต๊ณผ ๊ฐ์ƒ์„ ๋‹ด์€ ์ง€๋„๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๋ฐœ๊ฒฌ์„ ํ•˜๊ณ , > ์ผ์ƒ์˜ ์˜๊ฐ์„ ์–ป์–ด๋ณด์„ธ์š”! +> +> ๐ŸŒˆ ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ +> ๊ตฌ๊ฒฝํ•ด๋ณด์„ธ์š”! +> +> ๐Ÿ“ ํ”ผ๋“œ๋ฐฑ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”! -### ๊ธฐ์ˆ  ์Šคํƒ +
+
+ +### ํ•ต์‹ฌ ๊ธฐ๋Šฅ --- -| **๋„๋ฉ”์ธ** | **๊ธฐ์ˆ  ์Šคํƒ** | -|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| **๊ณตํ†ต** | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=ffffff) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E?logo=prettier&logoColor=ffffff) ![ESLint](https://img.shields.io/badge/ESLint-4B32C3?logo=eslint&logoColor=ffffff) | -| **ํ”„๋ก ํŠธ์—”๋“œ** | ![Vite](https://img.shields.io/badge/Vite-646CFF?logo=Vite&logoColor=ffffff) ![React](https://img.shields.io/badge/React-61DAFB?logo=React&logoColor=ffffff) ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=ffffff) ![React Query](https://img.shields.io/badge/React_Query-FF4154?logo=reactquery&logoColor=ffffff) ![Zustand](https://img.shields.io/badge/Zustand-443E38?logo=react&logoColor=ffffff) | -| **๋ฐฑ์—”๋“œ** | ![Node.js](https://img.shields.io/badge/Node.js-114411?logo=node.js) ![NestJS](https://img.shields.io/badge/NestJS-E0234E?logo=nestjs&logoColor=ffffff) ![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=ffffff) ![TypeORM](https://img.shields.io/badge/TypeORM-3178C6?logo=typeorm&logoColor=ffffff) ![Elasticsearch](https://img.shields.io/badge/Elasticsearch-005571?logo=elasticsearch&logoColor=ffffff) ![Kibana](https://img.shields.io/badge/Kibana-005571?logo=kibana&logoColor=ffffff) ![Logstash](https://img.shields.io/badge/Logstash-005571?logo=logstash&logoColor=ffffff) | -| **๋ฐฐํฌ** | ![GitHub Actions](https://img.shields.io/badge/GitHub%20Actions-2088FF?logo=githubactions&logoColor=ffffff) ![Nginx](https://img.shields.io/badge/nginx-014532?logo=Nginx&logoColor=009639&) ![Naver Cloud Platform](https://img.shields.io/badge/Naver%20Cloud%20Platform-03C75A?logo=naver&logoColor=ffffff) | -| **ํ˜‘์—… ๋„๊ตฌ** | ![GitHub](https://img.shields.io/badge/GitHub-181717?logo=github&logoColor=ffffff) ![Notion](https://img.shields.io/badge/Notion-000000?logo=notion) ![Figma](https://img.shields.io/badge/Figma-F24E1E?logo=figma&logoColor=ffffff) ![Slack](https://img.shields.io/badge/Slack-4A154B?logo=slack&logoColor=ffffff) | +### ๋‚˜๋งŒ์˜ ์ง€๋„ ๋งŒ๋“ค๊ธฐ + +> ์žฅ์†Œ ๊ฒ€์ƒ‰ํ•˜๊ธฐ +> ํ•€ ์ถ”๊ฐ€ํ•˜๊ธฐ + +### ๋‚˜๋งŒ์˜ ์ฝ”์Šค ๋งŒ๋“ค๊ธฐ + +> ๊ฒฝ๋กœ ํ‘œ์‹œ + +
+
+ +### [ํ•ต์‹ฌ ๊ฒฝํ—˜](https://github.com/boostcampwm-2024/web09-DailyRoad/wiki) + +_๋” ๋งŽ์€ ๊ฒฝํ—˜์„ ๋ณด๋ ค๋ฉด [**์—ฌ๊ธฐ๋กœ**](https://github.com/boostcampwm-2024/web09-DailyRoad/wiki)_ +_๋” ์ž์„ธํžˆ ๋ณด๋ ค๋ฉด ์ œ๋ชฉ์„ ํด๋ฆญํ•ด ์ฃผ์„ธ์š”!_ + +--- + +### [Elasticsearch ๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ๊ฐœ์„ ](https://github.com/boostcampwm-2024/web09-DailyRoad/wiki/1.-%ED%98%84-%EC%83%81%ED%99%A9-%EB%B0%8F-Elasticsearch-%EB%8F%84%EC%9E%85-%EA%B3%84%EA%B8%B0) + +๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ๋น„๊ต + +> Elasticsearch๋ฅผ ๋„์ž…ํ•ด ๊ฒ€์ƒ‰ ๋กœ์ง์˜ ๊ฐ€์ค‘์น˜๋ฅผ ์กฐ์ •ํ•˜๊ณ  RDB์™€ ๋™๊ธฐํ™”๋ฅผ ์œ ์ง€ํ•˜์—ฌ ๊ฒ€์ƒ‰ ์ •ํ™•๋„๋ฅผ ๊ฐœ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. +> ์ด๋ฅผ ํ†ตํ•ด ๋™์˜์–ด ์ฒ˜๋ฆฌ์™€ ์˜คํƒ€ ๊ต์ • ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๊ฒ€์ƒ‰ ์‹ ๋ขฐ๋„๋ฅผ ๋†’์˜€์Šต๋‹ˆ๋‹ค. +> +> ์‹ฑ๊ธ€ ๋…ธ๋“œ ํ™˜๊ฒฝ์—์„œ์˜ ์žฅ์•  ์ƒํ™ฉ์— ๋Œ€๋น„ํ•ด SFP ๋Œ€์ฒ˜ ๋กœ์ง์„ ์ถ”๊ฐ€ํ–ˆ๊ณ , +> ๊ทธ ๊ณผ์ •์—์„œ Fallback ์ฒ˜๋ฆฌ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. +> ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํ—ฌ์Šค ์ฒดํฌ๋ฅผ ๋„์ž…ํ•˜์˜€๊ณ , ์‘๋‹ต ์‹œ๊ฐ„์„ **97.86% ๊ฐ์†Œ(์•ฝ 47๋ฐฐ ๊ฐœ์„ )** ์‹œํ‚ค๋Š” ์„ฑ๊ณผ๋ฅผ ๊ฑฐ๋‘์—ˆ์Šต๋‹ˆ๋‹ค. + +
+ +### [๋งˆ์ปค ํด๋Ÿฌ์Šคํ„ฐ๋ง](https://elastic-bread-9ef.notion.site/googlemaps-markerclusterer-45fb4525303e418c86cd3d84f4771721?pvs=74) + +๋งˆ์ปค ํด๋Ÿฌ์Šคํ„ฐ๋ง + +> ์ง€๋„ ์ƒ ์ˆ˜๋งŽ์€ ๋งˆ์ปค๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์œ„ํ•ด ํด๋Ÿฌ์Šคํ„ฐ๋ง ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ–ˆ์Šต๋‹ˆ๋‹ค. +> ๊ทธ ๊ณผ์ •์—์„œ ํด๋Ÿฌ์Šคํ„ฐ ๋งˆ์ปค์˜ ๊ณผ๋„ํ•œ ๋ Œ๋”๋ง๊ณผ ๊นœ๋นก์ž„ ๋ฌธ์ œ๋ฅผ ๋งŒ๋‚ฌ์Šต๋‹ˆ๋‹ค. +> +> ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฝ”๋“œ๋ฅผ ๋ถ„์„ํ•ด ๋น„ํšจ์œจ์ ์ธ ๋ Œ๋”๋ง ๋ฐฉ์‹์„ ์ฐพ์•„๋‚ด์—ˆ๊ณ , +> ์ด๋ฅผ ์ปค์Šคํ…€ํ•˜์—ฌ ๊นœ๋นก์ž„ ํ˜„์ƒ ํ•ด๊ฒฐ์€ ๋ฌผ๋ก ์ด๋ฉฐ, +> 900๊ฐœ ์žฅ์†Œ๊ฐ€ ์ถ”๊ฐ€๋œ ์ง€๋„ ๊ธฐ์ค€ ๋งˆ์ปค ๋ Œ๋”๋ง ์‹œ๊ฐ„์„ **95.02% ๊ฐ์†Œ(์•ฝ 20๋ฐฐ ๊ฐœ์„ )** ์‹œํ‚ค๋Š” ์„ฑ๊ณผ๋ฅผ ๊ฑฐ๋‘์—ˆ์Šต๋‹ˆ๋‹ค. + +
+ +### [๋กœ๊ทธ ๋ชจ๋‹ˆํ„ฐ๋ง ์‹œ์Šคํ…œ](https://elastic-bread-9ef.notion.site/3dd807f73d0e4aa8982abcd4b4dad8ed) + +kibana ๋กœ๊ทธ + +> ๋กœ๊น… ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ๋Š” Pino, ๋ชจ๋‹ˆํ„ฐ๋ง ์Šคํƒ์œผ๋กœ๋Š” ELK ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. +> Kibana์™€ Slack์„ ์—ฐ๋™ํ•ด ์‹ค์‹œ๊ฐ„ ๋ชจ๋‹ˆํ„ฐ๋ง ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ–ˆ์Šต๋‹ˆ๋‹ค. +> ์ด๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„ ์žฅ์•  ์‹œ ๋ฌธ์ œ ํŒŒ์•…์ด ๋นจ๋ผ์กŒ๊ณ , ์šด์˜ ์‹ ๋ขฐ๋„๋ฅผ ํ–ฅ์ƒ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค. + +
+ +### [ํ…Œ์ŠคํŠธ](https://github.com/boostcampwm-2024/web09-DailyRoad/wiki/1.-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1-%EC%9D%B4%EC%9C%A0) + +ํ…Œ์ŠคํŠธ ์ปจํ…Œ์ด๋„ˆ + +> ๋ชจํ‚น ์—†์ด ์‹ค์ œ ํ™˜๊ฒฝ๊ณผ ์œ ์‚ฌํ•œ ์กฐ๊ฑด์—์„œ ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. +> ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์‚ฌ์šฉํ•ด ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์—์„œ ์•ˆ์ •์ ์œผ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ–ˆ์œผ๋ฉฐ, +> ์ด๋ฅผ ํ†ตํ•ด ๋ฆฌํŒฉํ„ฐ๋ง ๋ฐ ๋ฒ„๊ทธ ์ˆ˜์ • ์‹œ ์ ๊ฒ€์ด ์šฉ์ดํ•ด์กŒ๊ณ , ์ฝ”๋“œ ํ’ˆ์งˆ๊ณผ ์‹ ๋ขฐ๋„๊ฐ€ ํ–ฅ์ƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. + +
+ +### [React๋กœ ๋ž˜ํ•‘๋˜์ง€ ์•Š์€ JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ](https://elastic-bread-9ef.notion.site/Google-Maps-API-f5e948983b024e5ab2acb84101180509?pvs=74) + +> JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ React์˜ ๊ฒฐํ•ฉ ๊ณผ์ •์—์„œ ๋†’์€ ์ž์œ ๋„๋กœ ์ธํ•ด +> ๋งˆ์ปค ๊ด€๋ฆฌ ์ฃผ์ฒด๊ฐ€ ๋ถ„์‚ฐ๋˜๋Š” ๋ฌธ์ œ๋ฅผ ๊ฒช์—ˆ์Šต๋‹ˆ๋‹ค. +> ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ฝ”๋“œ ์ž‘์„ฑ ๊ทœ์น™์„ ์ •๋ฆฝํ•ด ๋งˆ์ปค ๊ด€๋ฆฌ ์ฒด๊ณ„๋ฅผ ํ†ตํ•ฉํ•˜๊ณ , ์‚ฌ์šฉ์„ฑ๊ณผ ์•ˆ์ •์„ฑ์„ ๊ฐœ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

@@ -42,17 +106,32 @@ --- -์•„ํ‚คํ…์ฒ˜ +์•„ํ‚คํ…์ฒ˜

-### ํ•ต์‹ฌ ๊ฒฝํ—˜ +### ๊ธฐ์ˆ  ์Šคํƒ --- +| **๋„๋ฉ”์ธ** | **๊ธฐ์ˆ  ์Šคํƒ** | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **๊ณตํ†ต** | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=ffffff) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E?logo=prettier&logoColor=ffffff) ![ESLint](https://img.shields.io/badge/ESLint-4B32C3?logo=eslint&logoColor=ffffff) | +| **ํ”„๋ก ํŠธ์—”๋“œ** | ![Vite](https://img.shields.io/badge/Vite-646CFF?logo=Vite&logoColor=ffffff) ![React](https://img.shields.io/badge/React-61DAFB?logo=React&logoColor=ffffff) ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=ffffff) ![React Query](https://img.shields.io/badge/React_Query-FF4154?logo=reactquery&logoColor=ffffff) ![Zustand](https://img.shields.io/badge/Zustand-443E38?logo=react&logoColor=ffffff) | +| **๋ฐฑ์—”๋“œ** | ![Node.js](https://img.shields.io/badge/Node.js-114411?logo=node.js) ![NestJS](https://img.shields.io/badge/NestJS-E0234E?logo=nestjs&logoColor=ffffff) ![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=ffffff) ![TypeORM](https://img.shields.io/badge/TypeORM-3178C6?logo=typeorm&logoColor=ffffff) ![Elasticsearch](https://img.shields.io/badge/Elasticsearch-005571?logo=elasticsearch&logoColor=ffffff) ![Kibana](https://img.shields.io/badge/Kibana-005571?logo=kibana&logoColor=ffffff) ![Logstash](https://img.shields.io/badge/Logstash-005571?logo=logstash&logoColor=ffffff) | +| **๋ฐฐํฌ** | ![GitHub Actions](https://img.shields.io/badge/GitHub%20Actions-2088FF?logo=githubactions&logoColor=ffffff) ![Nginx](https://img.shields.io/badge/nginx-014532?logo=Nginx&logoColor=009639&) ![Naver Cloud Platform](https://img.shields.io/badge/Naver%20Cloud%20Platform-03C75A?logo=naver&logoColor=ffffff) | +| **ํ˜‘์—… ๋„๊ตฌ** | ![GitHub](https://img.shields.io/badge/GitHub-181717?logo=github&logoColor=ffffff) ![Notion](https://img.shields.io/badge/Notion-000000?logo=notion) ![Figma](https://img.shields.io/badge/Figma-F24E1E?logo=figma&logoColor=ffffff) ![Slack](https://img.shields.io/badge/Slack-4A154B?logo=slack&logoColor=ffffff) | +

+### ํŒ€์› ์†Œ๊ฐœ + +| [J088\_๋„์›์ง„](https://github.com/1119wj) | [J151\_์•ˆ๊ธˆ์žฅ](https://github.com/koomchang) | [J105\_๋ฐ•๋ฏผ์„œ](https://github.com/Miensoap) | [J270 \_ํ•œ๋™ํšจ](https://github.com/hyohyo12) | +| :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | +| | | | | +| FE | BE | BE | BE | + | ๐Ÿท๏ธ ๋ฐ”๋กœ๊ฐ€๊ธฐ | [**ํŒ€ Notion**](https://elastic-bread-9ef.notion.site/12963e6f4ee98074b6f9f70cfa9ac836) | [์œ„ํ‚ค](https://github.com/boostcampwm-2024/web09-DailyRoad/wiki) | -|:--------:|:--------------------------------------------------------------------------------------:|:--------------------------------------------------------------:| +| :---------: | :-------------------------------------------------------------------------------------: | :--------------------------------------------------------------: | diff --git a/backend/src/course/CourseRepository.ts b/backend/src/course/CourseRepository.ts index 8c9bf0a5..6dc5eefb 100644 --- a/backend/src/course/CourseRepository.ts +++ b/backend/src/course/CourseRepository.ts @@ -20,14 +20,23 @@ export class CourseRepository extends SoftDeleteRepository { where: { isPublic: true }, skip: (page - 1) * pageSize, take: pageSize, + order: { + createdAt: 'DESC', + }, }); } searchByTitleQuery(title: string, page: number, pageSize: number) { return this.find({ - where: { title: ILike(`%${title}%`), isPublic: true }, + where: { + title: ILike(`%${title}%`), + isPublic: true, + }, skip: (page - 1) * pageSize, take: pageSize, + order: { + createdAt: 'DESC', + }, }); } @@ -36,6 +45,9 @@ export class CourseRepository extends SoftDeleteRepository { where: { user: { id: userId } }, skip: (page - 1) * pageSize, take: pageSize, + order: { + createdAt: 'DESC', + }, }); } diff --git a/frontend/src/pages/HomePage/MainListPanel.tsx b/frontend/src/pages/HomePage/MainListPanel.tsx index 30473cc2..122f4901 100644 --- a/frontend/src/pages/HomePage/MainListPanel.tsx +++ b/frontend/src/pages/HomePage/MainListPanel.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import CourseListPanel from '@/components/common/List/Course/CourseListPanel'; import MapListPanel from '@/components/common/List/Map/MapListPanel'; import ListToggleButtons from '@/components/common/List/ListToggleButtons'; @@ -6,6 +6,14 @@ import { CreateMapType } from '@/types'; const MainListPanel = () => { const [listTab, setListTab] = useState('MAP'); + const panelRef = useRef(null); + + const handleTabSelect = (value: CreateMapType) => { + setListTab(value); + if (panelRef.current) { + panelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }; return (
@@ -15,10 +23,10 @@ const MainListPanel = () => { { value: 'COURSE', label: '์ฝ”์Šค' }, ]} selected={listTab} - onSelect={(value) => setListTab(value as CreateMapType)} + onSelect={(value) => handleTabSelect(value as CreateMapType)} /> -
+
{listTab === 'MAP' ? : }