From 91eb607b1a8926cdd59e582ce16198717f1d464b Mon Sep 17 00:00:00 2001 From: kanglocal Date: Mon, 29 Jan 2024 23:13:17 +0900 Subject: [PATCH 01/44] =?UTF-8?q?Design=20:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=EC=9D=98=20rankList=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ListDetailInner/Footer/Footer.tsx | 15 + .../ListDetailInner/Footer/style.css.ts | 17 + .../ListDetailInner/Header/Header.tsx | 19 + .../ListDetailInner/Header/style.css.ts | 8 + src/components/ListDetailInner/MockData.ts | 508 ++++++++++++++++++ .../ListDetailInner/RankList/RankList.tsx | 48 ++ .../ListDetailInner/RankList/style.css.ts | 8 + src/components/ListDetailInner/index.tsx | 44 ++ src/components/ListDetailInner/style.css.ts | 19 + 9 files changed, 686 insertions(+) create mode 100644 src/components/ListDetailInner/Footer/Footer.tsx create mode 100644 src/components/ListDetailInner/Footer/style.css.ts create mode 100644 src/components/ListDetailInner/Header/Header.tsx create mode 100644 src/components/ListDetailInner/Header/style.css.ts create mode 100644 src/components/ListDetailInner/MockData.ts create mode 100644 src/components/ListDetailInner/RankList/RankList.tsx create mode 100644 src/components/ListDetailInner/RankList/style.css.ts create mode 100644 src/components/ListDetailInner/index.tsx create mode 100644 src/components/ListDetailInner/style.css.ts diff --git a/src/components/ListDetailInner/Footer/Footer.tsx b/src/components/ListDetailInner/Footer/Footer.tsx new file mode 100644 index 00000000..c1606c1f --- /dev/null +++ b/src/components/ListDetailInner/Footer/Footer.tsx @@ -0,0 +1,15 @@ +import * as styles from '@/components/ListDetailInner/Footer/style.css'; + +function Footer() { + return ( +
+
save
+
+
share
+
extra
+
+
+ ); +} + +export default Footer; diff --git a/src/components/ListDetailInner/Footer/style.css.ts b/src/components/ListDetailInner/Footer/style.css.ts new file mode 100644 index 00000000..ac1bb904 --- /dev/null +++ b/src/components/ListDetailInner/Footer/style.css.ts @@ -0,0 +1,17 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + width: '100%', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); + +export const shareAndOthers = style({ + width: '100%', + display: 'flex', + flexDirection: 'row', + justifyContent: 'right', + alignItems: 'center', + gap: '20px', +}); diff --git a/src/components/ListDetailInner/Header/Header.tsx b/src/components/ListDetailInner/Header/Header.tsx new file mode 100644 index 00000000..f8c6f693 --- /dev/null +++ b/src/components/ListDetailInner/Header/Header.tsx @@ -0,0 +1,19 @@ +import { ChangeEvent } from 'react'; +import * as styles from '@/components/ListDetailInner/Header/style.css'; + +interface HeaderProps { + handleChangeListType?: (e: ChangeEvent) => void; +} + +function Header({ handleChangeListType }: HeaderProps) { + return ( +
+ +
+ ); +} + +export default Header; diff --git a/src/components/ListDetailInner/Header/style.css.ts b/src/components/ListDetailInner/Header/style.css.ts new file mode 100644 index 00000000..d4cb9bd3 --- /dev/null +++ b/src/components/ListDetailInner/Header/style.css.ts @@ -0,0 +1,8 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + width: '100%', + display: 'flex', + justifyContent: 'right', + alignItems: 'center', +}); diff --git a/src/components/ListDetailInner/MockData.ts b/src/components/ListDetailInner/MockData.ts new file mode 100644 index 00000000..939ee8b0 --- /dev/null +++ b/src/components/ListDetailInner/MockData.ts @@ -0,0 +1,508 @@ +export const MOCKDATA_LIST = [ + { + category: '음악', + labels: [ + { + name: '세븐틴', + }, + { + name: '음악의 신', + }, + { + name: '최애 멤버', + }, + ], + title: '세븐틴 최애 멤버 Top 5', + description: '내가 좋아하는 세븐틴에서 최애 멤버 top5', + createdDate: '2022-01-15T11:00:05.817Z', + lastUpdatedDate: '2024-01-20T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜 + ownerId: 'tarea202001@gmail.com', + ownerNickname: 'nabongee', + ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + collaborators: [ + // Nullable + { + id: 1, + nickname: '현지', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + { + id: 2, + nickname: '도우너', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + { + id: 3, + nickname: '또치', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + { + id: 4, + nickname: 'Samuel', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + { + id: 5, + nickname: 'Clark', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + { + id: 6, + nickname: '나봉이', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + { + id: 7, + nickname: '미니언', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + ], + items: [ + { + id: 1, + rank: 1, + title: '전원우', + comment: '전원우 존잘임', // Nullable + link: null, // Nullable + imageUrl: + 'https://yt3.googleusercontent.com/AmdlIs_zKRbg1LUzyDC2aQu9UHklGlWibXNVolKlgseHaCKEOLDESXNwYX0hQp2lSGJoQDBN=s900-c-k-c0x00ffffff-no-rj', // Nullable + }, + { + id: 2, + rank: 2, + title: '호시', + comment: '작은 아기 호랑이', + link: null, + imageUrl: 'https://image.bugsm.co.kr/artist/images/1000/802323/80232314.jpg', + }, + { + id: 3, + rank: 3, + title: '부승관', + comment: 'boo', + link: null, + imageUrl: + 'https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2023/10/10/33d10ea7-d2c4-4260-8381-cbf644c9972e.jpg', + }, + { + id: 4, + rank: 4, + title: '정한', + comment: '남신', + link: null, + imageUrl: 'https://news.kbs.co.kr/data/news/2022/04/13/20220413_c85vo7.jpg', + }, + { + id: 5, + rank: 5, + title: '디에잇', + comment: '웃김', + link: null, + imageUrl: + 'data:image/jpeg;base64,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', + }, + ], + isCollected: true, + }, + { + category: '장소', + labels: [ + { + name: '서울', + }, + { + name: '카페', + }, + { + name: '디저트', + }, + ], + title: '맛있는 을지로 카페 Top5', + description: '커피가 맛있는 서울 카페들', + createdDate: '2024-01-16T13:00:05.817Z', + lastUpdatedDate: '2024-01-23T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜 + ownerId: 'tarea202001@gmail.com', + ownerNickname: 'nabongee', + ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + collaborators: null, + items: [ + { + id: 1, + rank: 1, + title: '이프프커피', + comment: '을지로 크림카페, 티라미수 맛집', // Nullable + link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1113055605?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp', // Nullable + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240125_142%2F1706170547004iEWpa_JPEG%2F%25BF%25A1%25BD%25BA%25C7%25C1%25B7%25B9%25BC%25D2_%25BA%25B9%25BB%25E7%25BA%25BB.jpg', // Nullable + }, + { + id: 2, + rank: 2, + title: '을지로 문덕 커피', + comment: '촙촙 바로 옆 건물 골목길 초입', + link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1046777005?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220322_105%2F1647938541721kvaqf_JPEG%2FIMG_20220320_181609_849.jpg', + }, + { + id: 3, + rank: 3, + title: '보잉', + comment: '공항 컨셉 카페', + link: 'https://m.place.naver.com/share?id=1055469623&tabsPath=%2Fhome&appMode=detail', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240123_153%2F1705941421630Jj4f6_JPEG%2FIMG_3251.jpeg', + }, + { + id: 4, + rank: 4, + title: '공간갑', + comment: '공간이 갑이에요', + link: 'https://m.place.naver.com/share?id=1053282197&tabsPath=%2Fhome&appMode=detail', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20210820_184%2F1629432280312yxh2Q_JPEG%2FUuWYISVR47gu08_pqiflKOPd.jpg', + }, + { + id: 5, + rank: 5, + title: '커피한약방', + comment: '허준 선생님의 혜민서를 개조한 카페', + link: 'https://naver.me/IIqf14Bp', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fpup-review-phinf.pstatic.net%2FMjAyNDAxMjZfMTY0%2FMDAxNzA2MjM4NDU4NjU1.wUX3yX7JmXR1p9WgkkVfRHL4_KLEBbl25r3p3kLmKgkg.F8nRZinwmV_VxMXWbZ2MPcZPpcLzUxurYOTQrn6SFdgg.JPEG%2F763BC882-BB25-4788-809B-DBAED88B1652.jpeg', + }, + ], + isCollected: false, + }, + { + category: '음악', + labels: [ + { + name: '세븐틴', + }, + { + name: '음악의 신', + }, + { + name: '최애 멤버', + }, + ], + title: '세븐틴 최애 멤버 Top 5', + description: '세븐틴에서 최애 멤버 top5', + createdDate: '2024-01-15T13:00:05.817Z', + lastUpdatedDate: '2024-01-20T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜 + ownerId: 'tarea202001@gmail.com', + ownerNickname: 'nabongee', + ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + collaborators: [ + // Nullable + { + id: 1, + nickname: '현지', + profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg', + }, + ], + items: [ + { + id: 1, + rank: 1, + title: '전원우', + comment: '전원우 존잘임', // Nullable + link: null, // Nullable + imageUrl: + 'https://yt3.googleusercontent.com/AmdlIs_zKRbg1LUzyDC2aQu9UHklGlWibXNVolKlgseHaCKEOLDESXNwYX0hQp2lSGJoQDBN=s900-c-k-c0x00ffffff-no-rj', // Nullable + }, + { + id: 2, + rank: 2, + title: '호시', + comment: '작은 아기 호랑이', + link: null, + imageUrl: 'https://image.bugsm.co.kr/artist/images/1000/802323/80232314.jpg', + }, + { + id: 3, + rank: 3, + title: '부승관', + comment: 'boo', + link: null, + imageUrl: + 'https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2023/10/10/33d10ea7-d2c4-4260-8381-cbf644c9972e.jpg', + }, + { + id: 4, + rank: 4, + title: '정한', + comment: '남신', + link: null, + imageUrl: 'https://news.kbs.co.kr/data/news/2022/04/13/20220413_c85vo7.jpg', + }, + { + id: 5, + rank: 5, + title: '디에잇', + comment: '웃김', + link: null, + imageUrl: + 'data:image/jpeg;base64,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', + }, + ], + isCollected: false, + }, + { + category: '장소', + labels: [ + { + name: '서울', + }, + { + name: '카페', + }, + { + name: '디저트', + }, + ], + title: '맛있는 을지로 카페 Top5', + description: '커피가 맛있는 서울 카페들', + createdDate: '2024-01-16T13:00:05.817Z', + lastUpdatedDate: '2024-01-23T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜 + ownerId: 'tarea202001@gmail.com', + ownerNickname: 'nabongee', + ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + collaborators: null, + items: [ + { + id: 1, + rank: 1, + title: '이프프커피', + comment: '을지로 크림카페, 티라미수 맛집', // Nullable + link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1113055605?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp', // Nullable + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240125_142%2F1706170547004iEWpa_JPEG%2F%25BF%25A1%25BD%25BA%25C7%25C1%25B7%25B9%25BC%25D2_%25BA%25B9%25BB%25E7%25BA%25BB.jpg', // Nullable + }, + { + id: 2, + rank: 2, + title: '을지로 문덕 커피', + comment: '촙촙 바로 옆 건물 골목길 초입', + link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1046777005?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220322_105%2F1647938541721kvaqf_JPEG%2FIMG_20220320_181609_849.jpg', + }, + { + id: 3, + rank: 3, + title: '보잉', + comment: '공항 컨셉 카페', + link: 'https://m.place.naver.com/share?id=1055469623&tabsPath=%2Fhome&appMode=detail', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240123_153%2F1705941421630Jj4f6_JPEG%2FIMG_3251.jpeg', + }, + { + id: 4, + rank: 4, + title: '공간갑', + comment: '공간이 갑이에요', + link: 'https://m.place.naver.com/share?id=1053282197&tabsPath=%2Fhome&appMode=detail', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20210820_184%2F1629432280312yxh2Q_JPEG%2FUuWYISVR47gu08_pqiflKOPd.jpg', + }, + { + id: 5, + rank: 5, + title: '커피한약방', + comment: '허준 선생님의 혜민서를 개조한 카페', + link: 'https://naver.me/IIqf14Bp', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fpup-review-phinf.pstatic.net%2FMjAyNDAxMjZfMTY0%2FMDAxNzA2MjM4NDU4NjU1.wUX3yX7JmXR1p9WgkkVfRHL4_KLEBbl25r3p3kLmKgkg.F8nRZinwmV_VxMXWbZ2MPcZPpcLzUxurYOTQrn6SFdgg.JPEG%2F763BC882-BB25-4788-809B-DBAED88B1652.jpeg', + }, + ], + isCollected: false, + }, + { + category: '장소', + labels: [ + { + name: '청라', + }, + { + name: '맛집', + }, + ], + title: '호주에서 갓 귀국한 내가 가고싶은 청라 맛집 Top 7', + description: '청라에서 제일 가고싶은 맛집 순위', + createdDate: '2024-01-15T13:00:05.817Z', + lastUpdatedDate: '2024-01-20T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜 + ownerId: '', + ownerNickname: 'minchi', + ownerProfileImageUrl: 'https://www.ynow.co.kr/data/photos/20230728/art_16894886847033_93d9b7.png', + collaborators: [ + // Nullable + { + id: 1, + nickname: 'nabongee', + profileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + }, + ], + items: [ + { + id: 1, + rank: 1, + title: '우리동네쭈꾸미', + comment: '쭈꾸미 존맛', // Nullable + link: 'https://naver.me/Gi9EzhJA', // Nullable + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20180326_180%2F1522025612368rCHNT_JPEG%2FtR5PurBnequRELzopz7GEM1Z.jpg', // Nullable + }, + { + id: 2, + rank: 2, + title: '명태어장', + comment: '명태 존맛집', + link: 'https://naver.me/GJrF376V', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20171107_168%2F1510060558275xNH3k_JPEG%2F_6kwBr6aasuwJKu7m1QGzdvO.jpg', + }, + { + id: 3, + rank: 3, + title: '한촌설렁탕', + comment: '설렁탕 맛집', + link: 'https://naver.me/FzH4YkvZ', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20211118_275%2F16372277273592SGLC_JPEG%2FKakaoTalk_20211118_182752353_01.jpg', + }, + { + id: 4, + rank: 4, + title: '양양입암막국수', + comment: '막국수 존맛집', + link: 'https://naver.me/FiLOFLrN', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20190617_242%2F1560762962654Ezyom_JPEG%2F6dB5oiAUzHvqsq3j5aDWiG4p.jpg', + }, + { + id: 5, + rank: 5, + title: '진천토종순대국', + comment: '순대국 존맛집', + link: 'https://naver.me/F9QppBBM', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20180904_125%2F1536063146640tTQ9B_JPEG%2Fopi3rrEu2yGDbmLTLAjE451c.jpg', + }, + { + id: 6, + rank: 6, + title: '우리할매떡볶이', + comment: '떡볶이는 여기서만 먹어', + link: 'https://naver.me/x50vcmB9', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20210517_241%2F16212167904568orwP_JPEG%2FAT_ddo48d0TcgCi1tyyp_sQb.jpg', + }, + { + id: 7, + rank: 7, + title: '신간짬뽕', + comment: '간짬뽕 존맛탱', + link: 'https://naver.me/GWozhL8h', + imageUrl: + 'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220218_274%2F1645146029164uJlrY_JPEG%2FKakaoTalk_20220218_091621489.jpg', + }, + ], + isCollected: true, + }, +]; + +export const MOCKDATA_COMMENTS = [ + { + totalCount: 2, + comments: [ + { + id: 1, + userId: 24, + userName: '전원우 아내', + userProfileImageUrl: 'https://img.hankyung.com/photo/202006/03.22990548.1.jpg', + createdDate: '2024-01-25T06:50:12.962Z', + content: '전원우 고앵이!', + replies: [ + { + id: 3, + userId: 5, + userNickName: '나현', + userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + createdDate: '2024-01-25T18:50:12.962Z', + content: '애기 고양이', + }, + ], + }, + ], + }, + { + totalCount: 5, + comments: [ + { + id: 2, + userId: 36, + userName: '승화', + userProfileImageUrl: + 'https://yt3.googleusercontent.com/mFpxH8XLL_uupbtB1U489iAss84q-Phzdz9hZBZcxtQvlKH292PdCwtfd6Lf6YwCQHbtjvhSCXY=s900-c-k-c0x00ffffff-no-rj', + createdDate: '2024-01-24T06:50:12.962Z', + content: '여기 저도 너무 좋아하는 곳들이에요~~', + replies: [ + { + id: 3, + userId: 5, + userNickName: '나현', + userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + createdDate: '2024-01-25T18:50:12.962Z', + content: '매니저님~ 혹시 여기 말고 또 추천해주실 카페 있으신가요?~', + }, + { + id: 4, + userId: 36, + userNickName: '승화', + userProfileImageUrl: + 'https://yt3.googleusercontent.com/mFpxH8XLL_uupbtB1U489iAss84q-Phzdz9hZBZcxtQvlKH292PdCwtfd6Lf6YwCQHbtjvhSCXY=s900-c-k-c0x00ffffff-no-rj', + createdDate: '2024-01-26T18:50:12.962Z', + content: '물론이죠~ 00이라는 카페에 가보세요!!', + }, + ], + }, + { + id: 5, + userId: 37, + userName: '유진', + userProfileImageUrl: + 'https://yt3.googleusercontent.com/mFpxH8XLL_uupbtB1U489iAss84q-Phzdz9hZBZcxtQvlKH292PdCwtfd6Lf6YwCQHbtjvhSCXY=s900-c-k-c0x00ffffff-no-rj', + createdDate: '2024-01-25T06:50:12.962Z', + content: '저 더 맛있는 데 알고 있어요~~', + replies: [ + { + id: 3, + userId: 5, + userNickName: '나현', + userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + createdDate: '2024-01-25T18:50:12.962Z', + content: '어디에요 당장 공유해주세요', + }, + ], + }, + ], + }, + { + totalCount: 1, + comments: [ + { + id: 2, + userId: 36, + userName: '나현', + userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg', + createdDate: '2024-01-24T06:50:12.962Z', + content: '털기 성공??', + replies: null, + }, + ], + }, +]; + +export default MOCKDATA_LIST; \ No newline at end of file diff --git a/src/components/ListDetailInner/RankList/RankList.tsx b/src/components/ListDetailInner/RankList/RankList.tsx new file mode 100644 index 00000000..a31f3162 --- /dev/null +++ b/src/components/ListDetailInner/RankList/RankList.tsx @@ -0,0 +1,48 @@ +import { ListItemProps } from '@/components/ListDetailInner'; +import * as styles from '@/components/ListDetailInner/RankList/style.css'; + +interface RankListProps { + listData?: ListItemProps[]; + type?: string; +} + +function RankList({ listData, type }: RankListProps) { + return ( +
+
+ {listData ? ( + type == 'simple' ? ( + listData.map((item) => { + return ( +
+
+ {item.rank}위 {item.title} +
+
+ ); + }) + ) : ( + // type == 'detail' + listData.map((item) => { + return ( +
+
+ {item.rank}위 {item.title} +
+
{item.comment}
+
+ img설명 +
+
+ ); + }) + ) + ) : ( +
데이터가 없습니다.
+ )} +
+
+ ); +} + +export default RankList; diff --git a/src/components/ListDetailInner/RankList/style.css.ts b/src/components/ListDetailInner/RankList/style.css.ts new file mode 100644 index 00000000..e166e59f --- /dev/null +++ b/src/components/ListDetailInner/RankList/style.css.ts @@ -0,0 +1,8 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + width: '100%', + display: 'flex', + justifyContent: 'left', + alignItems: 'center', +}); diff --git a/src/components/ListDetailInner/index.tsx b/src/components/ListDetailInner/index.tsx new file mode 100644 index 00000000..483aad75 --- /dev/null +++ b/src/components/ListDetailInner/index.tsx @@ -0,0 +1,44 @@ +'use client'; + +import Header from '@/components/ListDetailInner/Header/Header'; +import RankList from '@/components/ListDetailInner/RankList/RankList'; +import Footer from '@/components/ListDetailInner/Footer/Footer'; +import MOCKDATA_LIST from '@/components/ListDetailInner/MockData'; +import { ChangeEvent, useState } from 'react'; +import * as styles from '@/components/ListDetailInner/style.css'; +import { listAndFooter } from '@/components/ListDetailInner/style.css'; + +export interface ListItemProps { + id?: number; + rank?: number; + title?: string; + comment?: string; + link?: string; + imageUrl?: string; +} + +// 테스트용 코드 +const initialValue: ListItemProps[] = MOCKDATA_LIST[0].items ?? []; + +function ListDetailInner() { + const listData = initialValue; + + const [listType, setListType] = useState('simple'); + + const handleChangeListType = (e: ChangeEvent) => { + const value: string = e.target.value; + setListType(value); + }; + + return ( +
+
+
+ +
+
+
+ ); +} + +export default ListDetailInner; diff --git a/src/components/ListDetailInner/style.css.ts b/src/components/ListDetailInner/style.css.ts new file mode 100644 index 00000000..b0b8e673 --- /dev/null +++ b/src/components/ListDetailInner/style.css.ts @@ -0,0 +1,19 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + width: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', +}); + +export const listAndFooter = style({ + width: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + borderTop: '1px solid #D9D9D9', + borderBottom: '1px solid #D9D9D9', +}); From 918ec840acf83db6a387a9db11471a5da9399ea6 Mon Sep 17 00:00:00 2001 From: kanglocal Date: Tue, 30 Jan 2024 04:29:47 +0900 Subject: [PATCH 02/44] =?UTF-8?q?Design=20:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=EC=9D=98=20rankList=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + public/icons/collect.svg | 3 + public/icons/etc.svg | 3 + public/icons/share.svg | 3 + src/components/Dropdowns/Dropdown.tsx | 62 +++++++ .../ListDetailInner/Footer/Footer.tsx | 16 +- .../ListDetailInner/Footer/style.css.ts | 4 + .../ListDetailInner/Header/Header.tsx | 18 +- .../ListDetailInner/RankList/RankList.tsx | 60 ++++--- .../ListDetailInner/RankList/style.css.ts | 86 ++++++++++ src/components/ListDetailInner/index.tsx | 5 +- src/components/ListDetailInner/style.css.ts | 5 +- yarn.lock | 162 +++++++++++++++++- 13 files changed, 387 insertions(+), 41 deletions(-) create mode 100644 public/icons/collect.svg create mode 100644 public/icons/etc.svg create mode 100644 public/icons/share.svg create mode 100644 src/components/Dropdowns/Dropdown.tsx diff --git a/package.json b/package.json index 605f0417..806d8e5b 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-dom": "^18", "react-hook-form": "^7.50.0", "react-scripts": "^5.0.1", + "react-select": "^5.8.0", "zustand": "^4.4.7" }, "devDependencies": { diff --git a/public/icons/collect.svg b/public/icons/collect.svg new file mode 100644 index 00000000..06f5d2b0 --- /dev/null +++ b/public/icons/collect.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/etc.svg b/public/icons/etc.svg new file mode 100644 index 00000000..9c2c3720 --- /dev/null +++ b/public/icons/etc.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/share.svg b/public/icons/share.svg new file mode 100644 index 00000000..c4a8a674 --- /dev/null +++ b/public/icons/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Dropdowns/Dropdown.tsx b/src/components/Dropdowns/Dropdown.tsx new file mode 100644 index 00000000..fdf39aa3 --- /dev/null +++ b/src/components/Dropdowns/Dropdown.tsx @@ -0,0 +1,62 @@ +import Select from 'react-select'; + +interface OptionsProps { + value: string; + label: string; +} + +interface DropdownProps { + name: string; + options: OptionsProps[]; + isSearchable?: boolean; + onChange?: () => void; +} + +const selectStyles = { + control: (provided: object, state: { isFocused: boolean }) => { + return { + ...provided, + maxWidth: '200px', + backgroundColor: 'white', + boxShadow: 'none', + border: state.isFocused ? '1px solid lightgray' : '1px solid white', + borderRadius: '8px', + cursor: 'pointer', + }; + }, + singleValue: (provided: object) => ({ + ...provided, + fontSize: '1.3rem', + }), + option: (provided: object, { isFocused, isSelected }: { isFocused: boolean; isSelected: boolean }) => ({ + ...provided, + backgroundColor: isSelected || isFocused ? 'lightgray' : 'white', + color: 'black', + fontSize: '1.3rem', + }), + menu: (provided: object) => ({ + ...provided, + maxWidth: '320px', + boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.08)', + borderRadius: '8px', + border: `1px solid gray`, + }), +}; + +function Dropdown({ name, options, isSearchable = false, onChange = () => {} }: DropdownProps) { + return ( + - - - + ); } diff --git a/src/components/ListDetailInner/RankList/RankList.tsx b/src/components/ListDetailInner/RankList/RankList.tsx index a31f3162..d4fc688b 100644 --- a/src/components/ListDetailInner/RankList/RankList.tsx +++ b/src/components/ListDetailInner/RankList/RankList.tsx @@ -1,41 +1,53 @@ import { ListItemProps } from '@/components/ListDetailInner'; import * as styles from '@/components/ListDetailInner/RankList/style.css'; +import { detailItemWrapper } from '@/components/ListDetailInner/RankList/style.css'; interface RankListProps { - listData?: ListItemProps[]; + listData: ListItemProps[]; type?: string; } +function SimpleList({ listData }: RankListProps) { + return listData.map((item) => { + return ( +
+
+
{item.rank}위
+
{item.title}
+
+
+ {item.imageUrl && img설명} +
+
+ ); + }); +} +function DetailList({ listData }: RankListProps) { + return listData.map((item) => { + return ( +
+
+
{item.rank}위
+
{item.title}
+
+
{item.comment}
+
+ {item.imageUrl && img설명} +
+
+ ); + }); +} function RankList({ listData, type }: RankListProps) { return (
-
+
{listData ? ( type == 'simple' ? ( - listData.map((item) => { - return ( -
-
- {item.rank}위 {item.title} -
-
- ); - }) + ) : ( // type == 'detail' - listData.map((item) => { - return ( -
-
- {item.rank}위 {item.title} -
-
{item.comment}
-
- img설명 -
-
- ); - }) + ) ) : (
데이터가 없습니다.
diff --git a/src/components/ListDetailInner/RankList/style.css.ts b/src/components/ListDetailInner/RankList/style.css.ts index e166e59f..dfb46f62 100644 --- a/src/components/ListDetailInner/RankList/style.css.ts +++ b/src/components/ListDetailInner/RankList/style.css.ts @@ -6,3 +6,89 @@ export const container = style({ justifyContent: 'left', alignItems: 'center', }); + +export const listWrapper = style({ + width: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + gap: '1rem', + alignItems: 'left', +}); + +export const simpleItemWrapper = style({ + width: '100%', + display: 'flex', + justifyContent: 'space-between', + gap: '4rem', + alignItems: 'center', +}); + +export const detailItemWrapper = style({ + width: '100%', + display: 'flex', + flexDirection: 'column', + gap: '1rem', + alignItems: 'left', + marginBottom: '6rem', + ':last-child': { + marginBottom: 0, + }, +}); + +export const commentText = style({ + width: '100%', + backgroundColor: 'lightgray', + padding: '2rem', + borderRadius: '10px', + fontSize: '1.4rem', +}); + +export const rankAndTitle = style({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + gap: '4rem', +}); + +export const rankText = style({ + fontSize: '2.4rem', + fontWeight: 'bold', + flexShrink: 0, +}); + +export const titleText = style({ + fontSize: '2rem', +}); + +export const simpleImageWrapper = style({ + width: '7rem', + height: '7rem', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + textAlign: 'center', +}); + +export const detailImageWrapper = style({ + width: '100%', + height: 'auto', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + textAlign: 'center', +}); + +export const simpleImage = style({ + borderRadius: '10px', + width: '7rem', + height: '7rem', + objectFit: 'cover', +}); + +export const detailImage = style({ + borderRadius: '10px', + width: '100%', + height: 'auto', + objectFit: 'cover', +}); diff --git a/src/components/ListDetailInner/index.tsx b/src/components/ListDetailInner/index.tsx index 483aad75..508910c7 100644 --- a/src/components/ListDetailInner/index.tsx +++ b/src/components/ListDetailInner/index.tsx @@ -6,7 +6,6 @@ import Footer from '@/components/ListDetailInner/Footer/Footer'; import MOCKDATA_LIST from '@/components/ListDetailInner/MockData'; import { ChangeEvent, useState } from 'react'; import * as styles from '@/components/ListDetailInner/style.css'; -import { listAndFooter } from '@/components/ListDetailInner/style.css'; export interface ListItemProps { id?: number; @@ -25,8 +24,8 @@ function ListDetailInner() { const [listType, setListType] = useState('simple'); - const handleChangeListType = (e: ChangeEvent) => { - const value: string = e.target.value; + const handleChangeListType = (e: ChangeEvent) => { + const value: string = e.value; setListType(value); }; diff --git a/src/components/ListDetailInner/style.css.ts b/src/components/ListDetailInner/style.css.ts index b0b8e673..8924894d 100644 --- a/src/components/ListDetailInner/style.css.ts +++ b/src/components/ListDetailInner/style.css.ts @@ -1,11 +1,12 @@ import { style } from '@vanilla-extract/css'; export const container = style({ - width: '100%', + width: '96.5%', // 이부분.. 이렇게 처리해도 될까요(오른쪽으로 밀리는 현상) display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + gap: '0.2rem', }); export const listAndFooter = style({ @@ -16,4 +17,6 @@ export const listAndFooter = style({ alignItems: 'center', borderTop: '1px solid #D9D9D9', borderBottom: '1px solid #D9D9D9', + gap: '4rem', + padding: '4rem 4rem 2rem 4rem', }); diff --git a/yarn.lock b/yarn.lock index 7f5550b2..09ecfb1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -215,7 +215,7 @@ dependencies: "@babel/types" "^7.23.0" -"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.22.15": +"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== @@ -1280,7 +1280,7 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.15.4": +"@babel/runtime@^7.12.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7" integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw== @@ -1658,6 +1658,33 @@ version "2.2.0" resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016" integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw== +"@emotion/babel-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" + integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/serialize" "^1.1.2" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + +"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" + integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== + dependencies: + "@emotion/memoize" "^0.8.1" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + stylis "4.2.0" "@egjs/children-differ@^1.0.1": version "1.0.1" @@ -1700,11 +1727,66 @@ dependencies: "@egjs/grid" "~1.15.0" -"@emotion/hash@^0.9.0": +"@emotion/hash@^0.9.1": version "0.9.1" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/react@^11.8.1": + version "11.11.3" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.3.tgz#96b855dc40a2a55f52a72f518a41db4f69c31a25" + integrity sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.3" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0" + integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA== + dependencies: + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/unitless" "^0.8.1" + "@emotion/utils" "^1.2.1" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" + integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== + +"@emotion/unitless@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" + integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== + +"@emotion/utils@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" + integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== + +"@emotion/weak-memoize@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" + integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== + "@esbuild/android-arm64@0.17.6": version "0.17.6" resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.6.tgz#b11bd4e4d031bb320c93c83c137797b2be5b403b" @@ -1957,6 +2039,26 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b" integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A== +"@floating-ui/core@^1.6.0": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1" + integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g== + dependencies: + "@floating-ui/utils" "^0.2.1" + +"@floating-ui/dom@^1.0.1": + version "1.6.1" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.1.tgz#d552e8444f77f2d88534372369b3771dc3a2fa5d" + integrity sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ== + dependencies: + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.1" + +"@floating-ui/utils@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" + integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q== + "@humanwhocodes/config-array@^0.11.13": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" @@ -3239,6 +3341,13 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" +"@types/react-transition-group@^4.4.0": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18": version "18.2.48" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1" @@ -5367,6 +5476,14 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -6327,6 +6444,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" @@ -10104,7 +10226,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -10369,6 +10491,31 @@ react-scripts@^5.0.1: optionalDependencies: fsevents "^2.3.2" +react-select@^5.8.0: + version "5.8.0" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5" + integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.4.0" + "@emotion/react" "^11.8.1" + "@floating-ui/dom" "^1.0.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^6.0.0" + prop-types "^15.6.0" + react-transition-group "^4.3.0" + use-isomorphic-layout-effect "^1.1.2" + +react-transition-group@^4.3.0: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^18: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -11043,7 +11190,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@^0.5.0: +source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== @@ -11366,6 +11513,11 @@ stylehacks@^5.1.1: browserslist "^4.21.4" postcss-selector-parser "^6.0.4" +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== + sucrase@^3.32.0: version "3.35.0" resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263" From 9f031bfeedb7a0c5e3b1e4e31a8a31415610c1ab Mon Sep 17 00:00:00 2001 From: kanglocal Date: Tue, 30 Jan 2024 06:16:56 +0900 Subject: [PATCH 03/44] =?UTF-8?q?Fix=20:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=EC=9D=98=20rankList=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B0=8F=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dropdowns/Dropdown.tsx | 28 ++++++++++--------- .../ListDetailInner/Header/Header.tsx | 8 ++++-- .../ListDetailInner/RankList/RankList.tsx | 1 - src/components/ListDetailInner/index.tsx | 16 +++++++---- 4 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/Dropdowns/Dropdown.tsx b/src/components/Dropdowns/Dropdown.tsx index fdf39aa3..cd1ecdf0 100644 --- a/src/components/Dropdowns/Dropdown.tsx +++ b/src/components/Dropdowns/Dropdown.tsx @@ -9,21 +9,22 @@ interface DropdownProps { name: string; options: OptionsProps[]; isSearchable?: boolean; - onChange?: () => void; + onChange?: any; } const selectStyles = { - control: (provided: object, state: { isFocused: boolean }) => { - return { - ...provided, - maxWidth: '200px', - backgroundColor: 'white', - boxShadow: 'none', - border: state.isFocused ? '1px solid lightgray' : '1px solid white', - borderRadius: '8px', - cursor: 'pointer', - }; - }, + control: (provided: object, state: { isFocused: boolean }) => ({ + ...provided, + maxWidth: '200px', + backgroundColor: 'white', + boxShadow: 'none', + border: state.isFocused ? '1px solid lightgray' : '1px solid white', + borderRadius: '8px', + cursor: 'pointer', + '&:hover': { + borderColor: 'none', + }, + }), singleValue: (provided: object) => ({ ...provided, fontSize: '1.3rem', @@ -43,9 +44,10 @@ const selectStyles = { }), }; -function Dropdown({ name, options, isSearchable = false, onChange = () => {} }: DropdownProps) { +function Dropdown({ name, options, isSearchable = false, onChange }: DropdownProps) { return ( Date: Sun, 4 Feb 2024 03:56:28 +0900 Subject: [PATCH 25/44] =?UTF-8?q?Fix=20:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=AA=85=20=EB=B3=80=EA=B2=BD=20=EC=B6=94=ED=9B=84=20?= =?UTF-8?q?Dropdown=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EA=B0=80=20?= =?UTF-8?q?=EC=83=9D=EA=B8=B8=EA=B2=83=EC=9C=BC=EB=A1=9C=20=EC=98=88?= =?UTF-8?q?=EC=83=81=EB=90=98=EC=96=B4=20SelectComponent=20=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{OpenGraphPreview => LinkPreview}/LinkPreview.tsx | 2 +- src/components/{OpenGraphPreview => LinkPreview}/style.css.ts | 0 src/components/ListDetailInner/RankList/RankList.tsx | 2 +- src/components/SelectComponent/SelectComponent.tsx | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) rename src/components/{OpenGraphPreview => LinkPreview}/LinkPreview.tsx (95%) rename src/components/{OpenGraphPreview => LinkPreview}/style.css.ts (100%) diff --git a/src/components/OpenGraphPreview/LinkPreview.tsx b/src/components/LinkPreview/LinkPreview.tsx similarity index 95% rename from src/components/OpenGraphPreview/LinkPreview.tsx rename to src/components/LinkPreview/LinkPreview.tsx index 9a437ad6..557c630c 100644 --- a/src/components/OpenGraphPreview/LinkPreview.tsx +++ b/src/components/LinkPreview/LinkPreview.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@tanstack/react-query'; -import * as styles from '@/components/OpenGraphPreview/style.css'; +import * as styles from '@/components/LinkPreview/style.css'; async function fetchLinkPreviewData(url: string) { try { diff --git a/src/components/OpenGraphPreview/style.css.ts b/src/components/LinkPreview/style.css.ts similarity index 100% rename from src/components/OpenGraphPreview/style.css.ts rename to src/components/LinkPreview/style.css.ts diff --git a/src/components/ListDetailInner/RankList/RankList.tsx b/src/components/ListDetailInner/RankList/RankList.tsx index 98c6a1cd..245013d6 100644 --- a/src/components/ListDetailInner/RankList/RankList.tsx +++ b/src/components/ListDetailInner/RankList/RankList.tsx @@ -1,7 +1,7 @@ 'use client'; import { ListItemProps } from '@/components/ListDetailInner'; import * as styles from '@/components/ListDetailInner/RankList/style.css'; -import LinkPreview from '@/components/OpenGraphPreview/LinkPreview'; +import LinkPreview from '@/components/LinkPreview/LinkPreview'; import VideoEmbed from '@/components/VideoEmbed/VideoEmbed'; interface RankListProps { diff --git a/src/components/SelectComponent/SelectComponent.tsx b/src/components/SelectComponent/SelectComponent.tsx index 913fbc62..bc3f86be 100644 --- a/src/components/SelectComponent/SelectComponent.tsx +++ b/src/components/SelectComponent/SelectComponent.tsx @@ -5,7 +5,7 @@ interface OptionsProps { label: string; } -interface DropdownProps { +interface SelectProps { name: string; options: OptionsProps[]; isSearchable?: boolean; @@ -45,7 +45,7 @@ const selectStyles = { }), }; -function SelectComponent({ name, options, isSearchable = false, onChange }: DropdownProps) { +function SelectComponent({ name, options, isSearchable = false, onChange }: SelectProps) { return (