diff --git a/package-lock.json b/package-lock.json index f9657e37..d799f666 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,8 @@ "recoil": "^0.7.7", "sortablejs": "^1.15.2", "styled-components": "^6.1.8", - "use-long-press": "^3.2.0" + "use-long-press": "^3.2.0", + "vite-tsconfig-paths": "^4.3.2" }, "devDependencies": { "@types/blueimp-load-image": "^5.16.6", @@ -3494,7 +3495,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", - "dev": true + "devOptional": true }, "node_modules/@types/google.maps": { "version": "3.55.2", @@ -4804,7 +4805,6 @@ "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", - "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -5251,7 +5251,7 @@ "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", - "dev": true, + "devOptional": true, "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -6334,6 +6334,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globrex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==" + }, "node_modules/goober": { "version": "2.1.14", "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", @@ -7424,8 +7429,7 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { "version": "3.3.7", @@ -9191,6 +9195,25 @@ "typescript": ">=4.2.0" } }, + "node_modules/tsconfck": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.1.tgz", + "integrity": "sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==", + "bin": { + "tsconfck": "bin/tsconfck.js" + }, + "engines": { + "node": "^18 || >=20" + }, + "peerDependencies": { + "typescript": "^5.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", @@ -9333,7 +9356,7 @@ "version": "5.4.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -9534,7 +9557,7 @@ "version": "5.3.1", "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz", "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==", - "dev": true, + "devOptional": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.38", @@ -9629,11 +9652,29 @@ "vite": "^2.6.0 || 3 || 4 || 5" } }, + "node_modules/vite-tsconfig-paths": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz", + "integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==", + "dependencies": { + "debug": "^4.1.1", + "globrex": "^0.1.2", + "tsconfck": "^3.0.3" + }, + "peerDependencies": { + "vite": "*" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, "node_modules/vite/node_modules/rollup": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", - "dev": true, + "devOptional": true, "dependencies": { "@types/estree": "1.0.5" }, diff --git a/package.json b/package.json index 2798bfea..2bb45cfb 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "recoil": "^0.7.7", "sortablejs": "^1.15.2", "styled-components": "^6.1.8", - "use-long-press": "^3.2.0" + "use-long-press": "^3.2.0", + "vite-tsconfig-paths": "^4.3.2" }, "devDependencies": { "@types/blueimp-load-image": "^5.16.6", diff --git a/src/assets/icons/bell_pin_fill.svg b/src/assets/icons/bell_pin_fill.svg new file mode 100644 index 00000000..ab75f8bf --- /dev/null +++ b/src/assets/icons/bell_pin_fill.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/icons/chevron_right_expand.svg b/src/assets/icons/chevron_right_expand.svg new file mode 100644 index 00000000..f971ba0c --- /dev/null +++ b/src/assets/icons/chevron_right_expand.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/profile/TripItem/index.tsx b/src/components/profile/TripItem/index.tsx index 0438d00a..58065340 100644 --- a/src/components/profile/TripItem/index.tsx +++ b/src/components/profile/TripItem/index.tsx @@ -45,19 +45,22 @@ function TripItem({ id, title, location, departureDate, arrivalDate, thumbnailUR - + {title} - {' '} - - {departureDate} ~ {arrivalDate} + + + {departureDate.replace('-', '.').replace('-', '.')} ~{' '} + {arrivalDate.slice(0, 4) === departureDate.slice(0, 4) + ? arrivalDate.slice(5).replace('-', '.').replace('-', '.') + : arrivalDate.replace('-', '.').replace('-', '.')} - {' '} - + + {location.toLocaleString()} diff --git a/src/components/profile/TripItem/style.ts b/src/components/profile/TripItem/style.ts index 2e215d98..8c5d3df7 100644 --- a/src/components/profile/TripItem/style.ts +++ b/src/components/profile/TripItem/style.ts @@ -16,8 +16,8 @@ export const Container = styled.li` `; export const ThumbnailWrapper = styled.div` - width: 70px; - height: 70px; + width: 68px; + height: 68px; position: relative; flex-shrink: 0; @@ -51,10 +51,11 @@ export const Name = styled.span` font-weight: 600; margin-bottom: 3px; + color: ${({ theme }) => theme.colors.font.primary}; `; export const Desc = styled.span` - color: ${({ theme }) => theme.gray01}; + color: ${({ theme }) => theme.colors.font.secondary}; font-size: 10px; font-weight: 500; diff --git a/src/components/profile/TripList/index.tsx b/src/components/profile/TripList/index.tsx index 2c82c5bc..6f2280b2 100644 --- a/src/components/profile/TripList/index.tsx +++ b/src/components/profile/TripList/index.tsx @@ -23,8 +23,8 @@ function TripList() { return ( - {data.map((trip) => ( - + {data.map((trip, index) => ( + ))} ); diff --git a/src/components/profile/UserActivity/index.tsx b/src/components/profile/UserActivity/index.tsx index b5bb5c29..ee923cb6 100644 --- a/src/components/profile/UserActivity/index.tsx +++ b/src/components/profile/UserActivity/index.tsx @@ -8,7 +8,7 @@ import UserCommentsList from '../UserCommentsList'; import { get, post } from '../../../utils/api'; -export interface articleResponseType { +export interface ArticleResponseType { next: string | null; previous: string | null; results: { @@ -22,21 +22,7 @@ export interface articleResponseType { }[]; } -export interface shortsResponseType { - next: string | null; - previous: string | null; - results: { - id: number; - title: string; - nickname: string; - avatarURL: string; - videoId: string; - clapCount: number; - commentCount: number; - }[]; -} - -export interface commentsResponseType { +export interface CommentsResponseType { next: string | null; previous: string | null; results: { @@ -48,38 +34,30 @@ export interface commentsResponseType { function UserActivity() { const [actFilter, setActFilter] = useState<'clap' | 'comment'>('clap'); - const [postFilter, setPostFilter] = useState<'short-form' | 'article'>('article'); const [next, setNext] = useState(null); const [data, setData] = useState< - articleResponseType['results'] | shortsResponseType['results'] | commentsResponseType['results'] + ArticleResponseType['results'] | CommentsResponseType['results'] >([]); const dataContainerRef = useRef(null); useEffect(() => { - if (actFilter === 'clap' && postFilter === 'short-form') { - get( - `/user/profile/my-activity?sort=${actFilter}&community=${postFilter}`, - ).then((response) => { - setData(response.data.results); - setNext(response.data.next); - }); - } else if (actFilter === 'clap' && postFilter === 'article') { - get( - `/user/profile/my-activity?sort=${actFilter}&community=${postFilter}`, + if (actFilter === 'clap') { + get( + `/user/profile/my-activity?sort=${actFilter}&community=article`, ).then((response) => { setData(response.data.results); setNext(response.data.next); }); } else { - get( - `/user/profile/my-activity?sort=${actFilter}&community=${postFilter}`, + get( + `/user/profile/my-activity?sort=${actFilter}&community=article`, ).then((response) => { setData(response.data.results); setNext(response.data.next); }); } - }, [actFilter, postFilter]); + }, [actFilter]); useEffect(() => { let observer = new IntersectionObserver(() => {}); @@ -87,26 +65,18 @@ function UserActivity() { if (dataContainerRef.current) { observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && next) { - if (actFilter === 'clap' && postFilter === 'short-form') { - get(next).then((response) => { - setData((prev) => { - const prevData = prev as shortsResponseType['results']; - return [...prevData, ...response.data.results]; - }); - setNext(response.data.next); - }); - } else if (actFilter === 'clap' && postFilter === 'article') { - get(next).then((response) => { + if (actFilter === 'clap') { + get(next).then((response) => { setData((prev) => { - const prevData = prev as articleResponseType['results']; + const prevData = prev as ArticleResponseType['results']; return [...prevData, ...response.data.results]; }); setNext(response.data.next); }); } else { - get(next).then((response) => { + get(next).then((response) => { setData((prev) => { - const prevData = prev as commentsResponseType['results']; + const prevData = prev as CommentsResponseType['results']; return [...prevData, ...response.data.results]; }); setNext(response.data.next); @@ -119,23 +89,17 @@ function UserActivity() { } return () => { - observer && observer.disconnect(); + if (observer) observer.disconnect(); }; }, [next, dataContainerRef]); return ( - + {data !== undefined && actFilter === 'clap' ? ( - postFilter === 'short-form' ? ( - - ) : ( - - ) + ) : ( - data !== undefined && ( - - ) + )}
diff --git a/src/components/profile/UserActivityFilter/index.tsx b/src/components/profile/UserActivityFilter/index.tsx index 5fdc776b..4287f2e0 100644 --- a/src/components/profile/UserActivityFilter/index.tsx +++ b/src/components/profile/UserActivityFilter/index.tsx @@ -1,30 +1,25 @@ import { Dispatch } from 'react'; import * as S from './style'; +import Typography from '../../common/Typography'; interface Props { + actFilter: 'clap' | 'comment'; setActFilter: Dispatch>; - setPostFilter: Dispatch>; } -function UserActivityFilter({ setActFilter, setPostFilter }: Props) { +function UserActivityFilter({ actFilter, setActFilter }: Props) { return ( - { - setActFilter(e.currentTarget.value as 'clap' | 'comment'); - }} - > - - + setActFilter('clap')}> + + 공감한 글 + - { - setPostFilter(e.currentTarget.value as 'short-form' | 'article'); - }} - > - - + setActFilter('comment')}> + + 댓글 단 글 + ); diff --git a/src/components/profile/UserActivityFilter/style.ts b/src/components/profile/UserActivityFilter/style.ts index 6bec2aa5..541ccc4b 100644 --- a/src/components/profile/UserActivityFilter/style.ts +++ b/src/components/profile/UserActivityFilter/style.ts @@ -7,20 +7,32 @@ export const FilterList = styled.div` gap: 10px; `; -export const FilterItem = styled.select` - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' fill='none'%3E%3Cpath d='M1 1L4.5 5L8.5 1' stroke='%235276FA' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") - no-repeat 90% 50%; +// export const FilterItem = styled.select` +// -webkit-appearance: none; +// -moz-appearance: none; +// appearance: none; +// background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' fill='none'%3E%3Cpath d='M1 1L4.5 5L8.5 1' stroke='%235276FA' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") +// no-repeat 90% 50%; - padding: 4px 24px 4px 11px; +// padding: 4px 24px 4px 11px; - border-radius: 6px; - border: 1px solid ${({ theme }) => theme.main}; - background-color: ${({ theme }) => theme.blue05}; +// border-radius: 6px; +// border: 1px solid ${({ theme }) => theme.main}; +// background-color: ${({ theme }) => theme.blue05}; - color: ${({ theme }) => theme.main}; - font-size: 11px; - line-height: 19px; +// color: ${({ theme }) => theme.main}; +// font-size: 11px; +// line-height: 19px; +// `; + +export const FilterItem = styled.button<{ isActive: boolean }>` + padding: 2px 8px; + border: none; + border-radius: 4px; + cursor: pointer; + + background-color: ${({ theme, isActive }) => + isActive ? theme.colors.blue.primary : theme.colors.gray.tertiary}; + color: ${({ theme, isActive }) => + isActive ? theme.colors.white.primary : theme.colors.font.tertiary}; `; diff --git a/src/components/profile/UserTrip/index.tsx b/src/components/profile/UserTrip/index.tsx index 395edde9..08532b31 100644 --- a/src/components/profile/UserTrip/index.tsx +++ b/src/components/profile/UserTrip/index.tsx @@ -10,15 +10,15 @@ import * as S from './style'; function UserTrip() { return ( - - + 전체보기 +