motaju/ef_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

middle 2

Browse Source
This commit is contained in:
motaju
2025-09-09 00:15:08 +00:00
parent 0cce0322a1
commit fd34eb370f
30 changed files with 1953 additions and 35881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
app/usr/2_mychannel/page.tsx
View File

@@ -2,10 +2,13 @@
import CalenderSelector from "@/app/components/CalenderSelector";
import Modal from "@/app/components/Modal";
import { useEffect, useRef, useState } from "react";
import { useSession } from "next-auth/react";
export default function Page() {
const { data: session } = useSession();
const [isreqmodal, setIsreqmodal] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [chanellist, setChanellist] = useState<string[]>([]);
const [contentlist, setContentlist] = useState<{
id: string;
@@ -37,58 +40,47 @@ export default function Page() {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
const get_code = async () => {
if (handleInputRef.current && handleInputRef.current.value) {
const inputValue = handleInputRef.current.value;
if (confirm(`핸들 "${inputValue}" 의 등록 코드를 발급하시겠습니까?`)) {
try {
const response = await fetch(`/api/channel_code?handle=${inputValue}`);
if (response.status === 409) {
alert("이미 등록된 요청입니다. 기존 코드를 사용합니다.");
const data = await response.json();
setRegisterCode(data.randomcode);
return;
}
if (!response.ok) {
throw new Error('서버 응답이 올바르지 않습니다.');
}
const data = await response.json();
setRegisterCode(data.randomcode);
} catch (error) {
console.error('채널 코드 요청 중 오류 발생:', error);
alert('채널 코드를 가져오는데 실패했습니다. 다시 시도해주세요.');
return;
}
return;
}
} else{ alert("채널 핸들을 입력해주세요"); }
}
const register_channel = async () => {
if (handleInputRef.current && handleInputRef.current.value) {
const inputValue = handleInputRef.current.value;
try {
const response = await fetch(`/api/register_channel?handle=${encodeURIComponent(inputValue)}`);
const data = await response.json();
if (!response.ok) {
alert(data?.error ?? '등록 요청 실패');
return;
}
alert('등록 요청을 전송했습니다.');
setIsreqmodal(false);
} catch (error) {
console.error('등록 요청 중 오류:', error);
alert('등록 요청 실패');
if (isLoading) return;
if (!(handleInputRef.current && handleInputRef.current.value)) {
alert("채널 핸들을 입력해주세요");
return;
}
const inputValue = handleInputRef.current.value;
setIsLoading(true);
try {
const response = await fetch(`/api/channel/register?handle=${encodeURIComponent(inputValue)}`);
const data = await response.json();
if (!response.ok) {
alert(data?.error ?? data?.message ?? '등록 요청 실패');
return;
}
} else { alert("채널 핸들을 입력해주세요"); }
alert('등록 요청을 전송했습니다.');
fetchListChannel();
setIsreqmodal(false);
} catch (error) {
console.error('등록 요청 중 오류:', error);
alert('등록 요청 실패');
} finally {
setIsLoading(false);
}
}
const fetchRegisterCode = async () => {
try {
const resp = await fetch('/api/channel/mycode', { cache: 'no-store' });
const data = await resp.json();
setRegisterCode(data.registerCode);
} catch (e) {
console.error('register_code 요청 에러:', e);
}
}
const fetchListChannel = async () => {
try {
const resp = await fetch('/api/list_channel', { cache: 'no-store' });
const resp = await fetch('/api/channel/list', { cache: 'no-store' });
const data = await resp.json();
setChannelList(data.items);
console.log('list_channel:', data);
@@ -97,9 +89,33 @@ export default function Page() {
}
}
const delete_channel = async (handle: string) => {
if (isLoading) return;
if (!handle) return;
const ok = confirm(`정말 "${handle}" 채널 연결을 해제하시겠습니까?`);
if (!ok) return;
setIsLoading(true);
try {
const resp = await fetch(`/api/channel/delete?handle=${encodeURIComponent(handle)}`);
const data = await resp.json();
if (!resp.ok) {
alert(data?.error ?? '삭제 실패');
return;
}
alert(data?.message ?? '채널 연결을 해제했습니다.');
await fetchListChannel();
} catch (e) {
console.error('delete_channel 요청 에러:', e);
alert('삭제 요청 실패');
} finally {
setIsLoading(false);
}
}
useEffect(() => {
// 세션 이메일 기준 채널 목록 조회 로그
fetchListChannel();
fetchRegisterCode();
}, []);
@@ -112,7 +128,7 @@ export default function Page() {
<div className="flex flex-row h-[36px]">
<div
className="w-[104px] h-[36px] rounded-lg flex items-center justify-center bg-[#F94B37] border-[#D73B29] text-white cursor-pointer hover:bg-[#D73B29]"
onClick={() => {setIsreqmodal(true); setRegisterCode("")}}
onClick={() => {setIsreqmodal(true); }}
>
채널 등록
</div>
@@ -129,6 +145,7 @@ export default function Page() {
<col className="w-[100px]"/>
<col className="w-[100px]"/>
<col className="w-[110px]"/>
<col className="w-[90px]"/>
</colgroup>
<thead>
<tr className="sticky top-0 bg-white h-[49px] ">
@@ -137,12 +154,13 @@ export default function Page() {
<th className="border-b-1 right-border border-[#e6e9ef] ">승인여부</th>
<th className="border-b-1 right-border border-[#e6e9ef] ">영상수</th>
<th className="border-b-1 right-border border-[#e6e9ef] ">조회수</th>
<th className="border-b-1 border-[#e6e9ef] ">예상수익</th>
<th className="border-b-1 right-border border-[#e6e9ef] ">예상수익</th>
<th className="border-b-1 border-[#e6e9ef] ">삭제</th>
</tr>
</thead>
<tbody>
{
channelList.map((channel)=>{
channelList && channelList.map((channel)=>{
return (
<tr key={channel.id} className="h-[54px] border-1 border-[#e6e9ef] rounded-lg font-semibold">
<td className="right-border rounded-l-lg border-l-1 border-t-1 border-b-1 border-[#e6e9ef] pl-2 h-[54px] " >
@@ -159,7 +177,15 @@ export default function Page() {
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center whitespace-nowrap overflow-hidden">{channel.is_approved? "승인" : "미승인"}</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center"> - </td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center"> - </td>
<td className="border-b-1 border-t-1 border-[#e6e9ef] border-r-1 rounded-r-lg text-center"> - </td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center"> - </td>
<td className="border-b-1 border-t-1 border-[#e6e9ef] border-r-1 rounded-r-lg text-center">
<button
className={`px-3 py-1 rounded-md ${isLoading ? 'bg-gray-300 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'} text-white`}
onClick={() => { if (!isLoading) delete_channel(channel.handle); }}
>
삭제
</button>
</td>
</tr>
)
})}
@@ -179,58 +205,62 @@ export default function Page() {
</div>
</div>
<div className="flex flex-col sh-[287px]">
<div className="flex flex-col sh-[287px] gap-3">
<div className="flex flex-col justify-between">
<div className="text-lg font-semibold text-black">핸들</div>
<div className="flex flex-row justify-between items-center">
<div className="w-[400px] h-[56px] border-[#d5d5d5] border-1 bg-white text-black font-normal rounded-lg flex items-center justify-center text-md p-1 px-2">
<input type="text" className="w-full h-full border-none outline-none" ref={handleInputRef}/>
</div>
<div className="ml-2 w-[140px] h-[50px] border-[#D73B29] bg-[#F94B37] text-white font-bold rounded-lg flex items-center justify-center text-xl cursor-pointer hover:bg-[#D73B29] transition-colors" onClick={() => get_code()}>
코드 발급
<div className=" h-[56px] flex-1 border-[#d5d5d5] border-1 bg-white text-black font-normal rounded-lg flex items-center justify-center text-md p-1 px-2">
<input type="text" className="w-full h-full border-none outline-none" ref={handleInputRef} />
</div>
</div>
</div>
<div className="flex flex-col justify-between mt-5">
<div className="flex flex-col justify-between ">
<div className="text-lg font-semibold text-black">채널 등록 코드</div>
<div className="flex flex-row items-center gap-2">
<div className="w-full h-[56px] border-[#d5d5d5] border-1 bg-white text-black font-normal rounded-lg flex items-center justify-start text-xl p-5">
{registerCode ? registerCode : "코드를 발급해주세요"}
{registerCode ? registerCode : "코드 로드 에러"}
</div>
{registerCode && (
<div
<div
className="w-[45px] h-[56px] border-[#d5d5d5] border-1 bg-white rounded-lg flex items-center justify-center cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(registerCode);
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z" stroke="#666666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5" stroke="#666666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z" stroke="#666666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5" stroke="#666666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
</div>
<div className="mt-3 w-[100%-50px] h-[56px] border-[#D73B29] bg-[#F94B37] text-white font-bold rounded-lg flex items-center justify-center text-xl cursor-pointer hover:bg-[#D73B29] transition-colors" onClick={() => register_channel()}>
</div>
<div className =" flex flex-row justify-between items-center gap-3">
<div className="text-sm text-gray-500">
* 채널에 코드를 설정한 후 채널 등록 버튼을 눌러주세요.
</div>
<div className={`mt-3 h-[56px] flex-1 border-[#D73B29] bg-[#F94B37] text-white font-bold rounded-lg flex items-center justify-center text-xl transition-colors ${isLoading ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer hover:bg-[#D73B29]'}`} onClick={() => { if (!isLoading) register_channel(); }}>
채널 등록
</div>
</div>
</div>
</div>
</Modal>
{isLoading && (
<div className="fixed inset-0 z-[1000] bg-black/40 backdrop-blur-sm flex items-center justify-center">
<div className="w-12 h-12 rounded-full border-4 border-white/30 border-t-white animate-spin" />
</div>
)}
</div>
);
}