Skip to content
@p-c-w

P's change the world

README.md

🌌 Universe


Universe

똑똑한 OTT 구독관리 서비스

💁‍♂️배포페이지✨


프로젝트 개요

프로젝트 정보


팀원 소개


기술 스택

Comon

JavaScriptESLintPrettier

FE

ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form

BE

Node.jsExpressJWT

ETC

FigmaAdobe Illustrator


프로젝트 소개

기획 배경

  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요

  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요

  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC

커밋 컨벤션

Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법

#BE
npm start
#FE
npm run build
npm run preview

Pinned Loading

  1. universeuniversePublic

    똑똑한 OTT 구독관리 서비스

    JavaScript 1 2

  2. universe-serveruniverse-serverPublic

    JavaScript 1 1

Repositories

Showing 3 of 3 repositories

Top languages

Loading…

Most used topics

Loading…

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
P's change the world · GitHub
Skip to content
@p-c-w

P's change the world

README.md
🌌 Universe

Universe
똑똑한 OTT 구독관리 서비스
💁‍♂️배포페이지✨

프로젝트 개요
프로젝트 정보

팀원 소개

기술 스택
Comon
JavaScriptESLintPrettier
FE
ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form
BE
Node.jsExpressJWT
ETC
FigmaAdobe Illustrator

프로젝트 소개
기획 배경
  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요
  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요
  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC
커밋 컨벤션
Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법
#BE
npm start
#FE
npm run build
npm run preview


Pinned
Loading
  1. universeuniversePublic
    
똑똑한 OTT 구독관리 서비스

    JavaScript
1

2

  2. universe-serveruniverse-serverPublic
    JavaScript
1

1


Repositories

Showing 3 of 3 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
P's change the world · GitHub
Skip to content
@p-c-w

P's change the world

README.md
🌌 Universe

Universe
똑똑한 OTT 구독관리 서비스
💁‍♂️배포페이지✨

프로젝트 개요
프로젝트 정보

팀원 소개

기술 스택
Comon
JavaScriptESLintPrettier
FE
ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form
BE
Node.jsExpressJWT
ETC
FigmaAdobe Illustrator

프로젝트 소개
기획 배경
  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요
  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요
  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC
커밋 컨벤션
Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법
#BE
npm start
#FE
npm run build
npm run preview


Pinned
Loading
  1. universeuniversePublic
    
똑똑한 OTT 구독관리 서비스

    JavaScript
1

2

  2. universe-serveruniverse-serverPublic
    JavaScript
1

1


Repositories

Showing 3 of 3 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
P's change the world · GitHub
Skip to content
@p-c-w

P's change the world

README.md
🌌 Universe

Universe
똑똑한 OTT 구독관리 서비스
💁‍♂️배포페이지✨

프로젝트 개요
프로젝트 정보

팀원 소개

기술 스택
Comon
JavaScriptESLintPrettier
FE
ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form
BE
Node.jsExpressJWT
ETC
FigmaAdobe Illustrator

프로젝트 소개
기획 배경
  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요
  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요
  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC
커밋 컨벤션
Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법
#BE
npm start
#FE
npm run build
npm run preview


Pinned
Loading
  1. universeuniversePublic
    
똑똑한 OTT 구독관리 서비스

    JavaScript
1

2

  2. universe-serveruniverse-serverPublic
    JavaScript
1

1


Repositories

Showing 3 of 3 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
P's change the world · GitHub
Skip to content
@p-c-w

P's change the world

README.md
🌌 Universe

Universe
똑똑한 OTT 구독관리 서비스
💁‍♂️배포페이지✨

프로젝트 개요
프로젝트 정보

팀원 소개

기술 스택
Comon
JavaScriptESLintPrettier
FE
ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form
BE
Node.jsExpressJWT
ETC
FigmaAdobe Illustrator

프로젝트 소개
기획 배경
  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요
  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요
  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC
커밋 컨벤션
Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법
#BE
npm start
#FE
npm run build
npm run preview


Pinned
Loading
  1. universeuniversePublic
    
똑똑한 OTT 구독관리 서비스

    JavaScript
1

2

  2. universe-serveruniverse-serverPublic
    JavaScript
1

1


Repositories

Showing 3 of 3 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
P's change the world · GitHub
Skip to content
@p-c-w

P's change the world

README.md
🌌 Universe

Universe
똑똑한 OTT 구독관리 서비스
💁‍♂️배포페이지✨

프로젝트 개요
프로젝트 정보

팀원 소개

기술 스택
Comon
JavaScriptESLintPrettier
FE
ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form
BE
Node.jsExpressJWT
ETC
FigmaAdobe Illustrator

프로젝트 소개
기획 배경
  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요
  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요
  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC
커밋 컨벤션
Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법
#BE
npm start
#FE
npm run build
npm run preview


Pinned
Loading
  1. universeuniversePublic
    
똑똑한 OTT 구독관리 서비스

    JavaScript
1

2

  2. universe-serveruniverse-serverPublic
    JavaScript
1

1


Repositories

Showing 3 of 3 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
P's change the world · GitHub
Skip to content
@p-c-w

P's change the world

README.md
🌌 Universe

Universe
똑똑한 OTT 구독관리 서비스
💁‍♂️배포페이지✨

프로젝트 개요
프로젝트 정보

팀원 소개

기술 스택
Comon
JavaScriptESLintPrettier
FE
ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form
BE
Node.jsExpressJWT
ETC
FigmaAdobe Illustrator

프로젝트 소개
기획 배경
  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요
  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요
  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC
커밋 컨벤션
Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법
#BE
npm start
#FE
npm run build
npm run preview


Pinned
Loading
  1. universeuniversePublic
    
똑똑한 OTT 구독관리 서비스

    JavaScript
1

2

  2. universe-serveruniverse-serverPublic
    JavaScript
1

1


Repositories

Showing 3 of 3 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
P's change the world · GitHub
Skip to content
@p-c-w

P's change the world

README.md
🌌 Universe

Universe
똑똑한 OTT 구독관리 서비스
💁‍♂️배포페이지✨

프로젝트 개요
프로젝트 정보

팀원 소개

기술 스택
Comon
JavaScriptESLintPrettier
FE
ViteReactReact RouterReact QueryRecoilaxiosEmotionReact Hook Form
BE
Node.jsExpressJWT
ETC
FigmaAdobe Illustrator

프로젝트 소개
기획 배경
  • 매년 증가하는 OTT 서비스와 사용자 수 광범위하게 흩어져있는 컨텐츠들
  • 보지 않는 구독 서비스의 불필요한 금액 지출로 현명한 소비에 대한 니즈 증가
  • 누가 내 OTT 서비스 구독을 관리해주면 좋을 것 같아!

국내 서비스중인 OTT 서비스들의 컨텐츠들을 한 곳에서 모아볼 수 있어요
  • Netfix, Disney+, Wavve, Watcha, AppleTV+, AmazonPrime 의 TV, 영화 컨텐츠 들을 한곳에서 모아 볼 수 있어요
  • 검색기능으로 원하는 컨텐츠의 상세정보를 찾아볼 수 있어요
  • 필터로 원하는 OTT 서비스들의 컨텐츠만 찾아볼 수 있어요

나의 Universe로 지금 보고있는 컨텐츠, 보고 싶은 컨텐츠, 히스토리를 관리해요
  • 나의 등록 정보를 기반으로 현명한 구독 관리를 할 수 있어요
  • 가장 현명한 가격으로 구독하는 방법을 추천해줘요
  • 현재 보고 있지 않은 구독 서비스를 알려줘요
  • 나의 데이터를 기반으로 분석 그래프로 나의 OTT 생활을 한눈에 보여줘요

ETC
커밋 컨벤션
Type설명
Feat새로운 기능 추가
Fix버그 수정 또는 typo
Refactor리팩토링
DesignCSS 등 사용자 UI 디자인 변경
Comment필요한 주석 추가 및 변경
Style코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init프로젝트 초기 생성
Rename파일 혹은 폴더명 수정하거나 옮기는 경우
Remove파일을 삭제하는 작업만 수행하는 경우

개발 환경에서의 실행방법
#BE
npm start
#FE
npm run build
npm run preview


Pinned
Loading
  1. universeuniversePublic
    
똑똑한 OTT 구독관리 서비스

    JavaScript
1

2

  2. universe-serveruniverse-serverPublic
    JavaScript
1

1


Repositories

Showing 3 of 3 repositories
Top languages
Loading…
Most used topics
Loading…