훈돌라

8. 7. 소셜 로그인 auth 정보를 public.users 정보로 옮기는 sql ( 닉네임 변경 가능 )

훈돌라 — Wed, 7 Aug 2024 18:02:01 +0900

create or replace function public.handle_user_update()
returns trigger as $$
declare
  new_nickname text;
begin
  -- 닉네임 값을 결정
  new_nickname := coalesce(nullif(new.raw_user_meta_data->>'display_name', ''), new.raw_user_meta_data->>'full_name');

  -- 새로운 데이터 삽입 또는 업데이트
  insert into public.users (id, nickname, email)
  values (new.id, new_nickname, new.email)
  on conflict (id) do update set
    nickname = excluded.nickname,
    email = excluded.email;

  return new;
end;
$$ language plpgsql security definer;

-- 트리거 생성
create trigger on_auth_user_insert_or_update
after insert or update on auth.users
for each row execute procedure public.handle_user_update();

기존 sql

-- 함수 생성 또는 교체
create or replace function public.handle_user_update()
returns trigger as $$
declare
  new_nickname text;
begin
  -- 닉네임 값을 결정
  new_nickname := coalesce(nullif(new.raw_user_meta_data->>'display_name', ''), new.raw_user_meta_data->>'full_name');

  -- 새로운 데이터 삽입 또는 업데이트
  insert into public.users (id, nickname, email)
  values (new.id, new_nickname, new.email)
  on conflict (id) do update set
    nickname = excluded.nickname,
    email = excluded.email;

  -- auth.users의 display_name이 변경된 경우 public.users의 nickname을 업데이트
  if new.raw_user_meta_data->>'display_name' is not null then
    update public.users
    set nickname = new.raw_user_meta_data->>'display_name'
    where id = new.id;
  end if;

  return new;
end;
$$ language plpgsql security definer;

-- 트리거 생성
create trigger on_auth_user_insert_or_update
after insert or update on auth.users
for each row execute procedure public.handle_user_update();

수정된 sql

import useMyModalStore from '@/stores/my.modal.store';

import React, { useEffect, useRef, useState } from 'react';

import { supabase } from '@/supabase/client';

import useUserStore from '@/stores/user.store'; // 유저 상태 관리 스토어 추가

const NicknameModal: React.FC = () => {

const { isNicknameModalOpen, toggleNicknameModal } = useMyModalStore((state) => state);

const { nickname, setNickname } = useUserStore((state) => state); // 유저 상태 관리 스토어에서 닉네임 가져오기

const nicknameRef = useRef<HTMLInputElement>(null);

const [error, setError] = useState<string | null>(null);

useEffect(() => {

const fetchNickname = async () => {

try {

const {

data: { user },

error: userError

} = await supabase.auth.getUser();

if (userError) throw userError;

if (user) {

const { data, error } = await supabase.from('users').select('nickname').eq('id', user.id).single();

if (error) {

console.error('닉네임 페치 실패:', error);

} else {

console.log('닉네임 페치 성공:', data.nickname);

if (data.nickname !== null) {

setNickname(data.nickname); // 전역 상태에 닉네임 설정

}

} catch (error) {

console.error('유저 가져오기 실패:', error);

}

};

fetchNickname();

}, [setNickname]);

const handleBackGroundClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

if (e.target === e.currentTarget) {

toggleNicknameModal();

}

};

const handleNicknameSubmit = async (e: React.FormEvent<HTMLFormElement>) => {

e.preventDefault();

if (nicknameRef.current) {

const newNickname = nicknameRef.current.value.trim();

if (newNickname.length < 2 || newNickname.length > 8) {

setError('닉네임은 최소 2글자, 최대 8글자입니다.');

return;

}

try {

const {

data: { user },

error: userError

} = await supabase.auth.getUser();

if (userError) throw userError;

if (user) {

const { error } = await supabase.auth.updateUser({ data: { display_name: newNickname } });

if (error) {

console.error('닉네임 업데이트 실패:', error);

} else {

console.log('닉네임 업데이트 성공:', newNickname);

setNickname(newNickname); // 전역 상태에 닉네임 업데이트

toggleNicknameModal();

}

} catch (error) {

console.error('닉네임 업데이트 중 오류 발생:', error);

}

};

return (

{isNicknameModalOpen && (

<div

className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"

onClick={handleBackGroundClick}

<div onClick={(e) => e.stopPropagation()}>

</button>

</div>

<input

type="text"

placeholder="새 닉네임 입력"

className="mb-4 p-2 border rounded w-full text-black"

ref={nicknameRef}

defaultValue={nickname ?? ''}

{error && <p className="text-red-500">{error}</p>}

<button

type="submit"

className="px-4 py-2 w-full text-white rounded"

style={{ backgroundColor: '#9E9E9E' }}

onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#008A02')}

onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#9E9E9E')}

변경하기

</button>

</div>

</form>

</div>

)}

</>

);

};

export default NicknameModal;

await supabase.auth.updateUser({ data: { display_name: newNickname} });

public.users 의 닉네임 변경이 안 되는 문제 ->

닉네임 업데이트 하는 대상을 public.users 의 nickname 이 아닌 auth.users 의 display name 으로 변경
( 소셜 로그인에 성공하면 auth.users 의 display name 에 raw.user.meta.data (nickname) 이 담김 )
( 일반 유저만 수정이 가능한게 아닌 소셜 로그인을 이용한 유저도 수정 가능하게 하기 위함. )

sql 문에 의하면 auth.users -> public.users 데이터 전달 과정 중에 display name 이 있다면 그 데이터를 public.users nickname 으로사용한다고 되어있어서 이럴거면 차라리 supabase sign up 시에도 nickname 값을 auth.users display name 에다 넣고 수정 시도도 auth users display name 으로 하면 되지 않을까? 하는 생각에서 해결한 케이스.

2024. 7. 31. 줄노트 속지 제작, supabase 연동

훈돌라 — Wed, 31 Jul 2024 21:07:45 +0900

'use client';

import { useState, useRef, useCallback, useEffect } from 'react';

import { supabase } from '@/supabase/client';

import { Json } from '@/types/supabase';

import { isNoteLineArray } from '@/stores/noteline.store';

export interface NoteLine {

text: string;

fontSize: number;

textColor: string;

}

interface LineNoteProps {

userId: string;

}

const LineNote: React.FC<LineNoteProps> = ({ userId }) => {

const [lines, setLines] = useState<NoteLine[]>(

Array.from({ length: 15 }, () => ({ text: '', fontSize: 16, textColor: '#000000' }))

);

const [lineColor, setLineColor] = useState('#000000');

const [lineThickness, setLineThickness] = useState(1);

const [bgColor, setBgColor] = useState('#ffffff');

const [globalTextColor, setGlobalTextColor] = useState('#000000');

const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

const measureTextWidth = useCallback((text: string, fontSize: number) => {

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

if (context) {

context.font = `${fontSize}px sans-serif`;

return context.measureText(text).width;

}

return 0;

}, []);

const handleTextChange = useCallback(

(index: number, newText: string) => {

if (!inputRefs.current[index]) return;

const inputWidth = inputRefs.current[index]!.offsetWidth;

let textWidth = measureTextWidth(newText, lines[index].fontSize);

const newLines = [...lines];

newLines[index].text = newText;

while (textWidth > inputWidth) {

const overflowChar = newText.slice(-1);

newText = newText.slice(0, -1);

newLines[index].text = newText;

textWidth = measureTextWidth(newText, lines[index].fontSize);

const nextLineIndex = index + 1;

if (nextLineIndex < newLines.length) {

newLines[nextLineIndex].text = overflowChar + newLines[nextLineIndex].text;

if (inputRefs.current[nextLineIndex]) {

inputRefs.current[nextLineIndex]!.setSelectionRange(0, 0);

inputRefs.current[nextLineIndex]!.focus();

}

if (newText.length === 0 && index > 0) {

const prevLineIndex = index - 1;

newLines[prevLineIndex].text += newLines[index].text;

newLines[index].text = '';

if (inputRefs.current[prevLineIndex]) {

inputRefs.current[prevLineIndex]!.focus();

inputRefs.current[prevLineIndex]!.setSelectionRange(

newLines[prevLineIndex].text.length,

newLines[prevLineIndex].text.length

);

}

setLines(newLines);

[lines, measureTextWidth]

);

useEffect(() => {

inputRefs.current.forEach((input, index) => {

if (input) {

const inputWidth = input.offsetWidth;

const textWidth = measureTextWidth(lines[index].text, lines[index].fontSize);

if (textWidth > inputWidth) {

handleTextChange(index, lines[index].text);

}

});

}, [lines, measureTextWidth, handleTextChange]);

const saveData = async () => {

if (!userId) {

console.error('userId is undefined');

return;

}

console.log('Saving data with user_id:', userId);

const { data, error } = await supabase.from('line_note').upsert([

{

user_id: userId,

line_color: lineColor,

line_thickness: lineThickness,

bg_color: bgColor,

global_text_color: globalTextColor,

lines: lines as unknown as Json

}

]);

if (error) {

console.error('Error saving data:', error);

} else {

console.log('Data saved:', data);

}

};

const loadData = async () => {

if (!userId) {

console.error('userId is undefined');

return;

}

const { data, error } = await supabase.from('line_note').select('*').eq('user_id', userId).maybeSingle();

if (error) {

console.error('Error loading data:', error);

} else if (data) {

setLineColor(data?.line_color || '#000000');

setLineThickness(data?.line_thickness || 1);

setBgColor(data?.bg_color || '#ffffff');

setGlobalTextColor(data?.global_text_color || '#000000');

if (isNoteLineArray(data?.lines)) {

setLines(data?.lines);

} else {

console.error('Invalid data format for lines');

}

} else {

console.log('No data found for this user.');

}

};

useEffect(() => {

loadData();

}, [userId]);

return (

<div>

줄 색상:

<input

type="color"

value={lineColor}

onChange={(e) => setLineColor(e.target.value)}

className="ml-2 p-1 border"

</label>

줄 굵기:

<select

value={lineThickness}

onChange={(e) => setLineThickness(parseInt(e.target.value))}

className="ml-2 p-1 border"

<option value="2">Medium</option>

<option value="3">Thick</option>

</select>

</label>

</div>

<div>

줄노트 배경 색상:

<input

type="color"

value={bgColor}

onChange={(e) => setBgColor(e.target.value)}

className="ml-2 p-1 border"

</label>

전체 텍스트 색상:

<input

type="color"

value={globalTextColor}

onChange={(e) => setGlobalTextColor(e.target.value)}

className="ml-2 p-1 border"

</label>

</div>

<div

className="border p-4 w-[500px]"

style={{

backgroundColor: bgColor,

minHeight: '480px',

boxShadow: '0 4px 8px rgba(0, 0, 0, 1)',

borderRadius: '8px'

}}

{lines.map((line, index) => (

<div

key={index}

className={`relative`}

style={{ height: '30px', borderBottom: `${lineThickness}px solid ${lineColor}` }}

<input

type="text"

value={line.text}

onChange={(e) => handleTextChange(index, e.target.value)}

ref={(el) => {

inputRefs.current[index] = el;

}}

className="absolute top-0 left-0 w-full border-none outline-none bg-transparent"

style={{

fontSize: `${line.fontSize}px`,

color: globalTextColor

}}

</div>

))}

</div>

저장

</button>

</div>

);

};

export default LineNote;

Type Guard 유틸 함수

import { NoteLine } from '@/components/molecules/parchment/LineNote';

export function isNoteLineArray(data: any): data is NoteLine[] {

return (

Array.isArray(data) &&

data.every(

(item) => typeof item.text === 'string' && typeof item.fontSize === 'number' && typeof item.textColor === 'string'

)

);

}

주어진 데이터가 NoteLine 타입의 배열인지 확인하는 타입 가드(type guard) 함수.

타입 가드는 TypeScript에서 조건문 내에서 타입을 좁히는 데 사용되는 함수.

이를 통해 데이터가 NoteLine 배열임을 확신하고, TypeScript에서 타입 오류 없이 데이터를 사용할 수 있음.

2024. 7. 26. 소셜 로그인

훈돌라 — Fri, 26 Jul 2024 20:56:04 +0900

Google 제공자 활성화

Google Developers Console에서 새 프로젝트를 생성
OAuth 동의 화면을 설정합니다. 애플리케이션 이름과 이메일 주소를 입력하고 저장
사용자 인증 정보 > 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 선택
애플리케이션 유형으로 웹 애플리케이션을 선택하고, 승인된 리디렉션 URI에 Supabase에서 제공한 URI를 추가
생성된 클라이언트 ID와 클라이언트 비밀을 복사하여 Supabase 대시보드의 Google 제공자 설정에 입력

Kakao 제공자 활성화

Kakao Developers에서 새 애플리케이션을 생성합니다.
앱 설정 > 플랫폼 > Redirect URI에 Supabase에서 제공한 URI를 추가합니다.
REST API 키를 복사하여 Supabase 대시보드의 Kakao 제공자 설정에 입력합니다.

import React from 'react';

import { supabase } from '../../supabase/client';

const SocialModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {

const handleBackgroundClick = (e: React.MouseEvent<HTMLDivElement>) => {

if (e.target === e.currentTarget) {

onClose();

}

};

const handleKakaoLogin = async () => {

const { error } = await supabase.auth.signInWithOAuth({

provider: 'kakao',

options: {

queryParams: {

access_type: 'offline',

prompt: 'consent'

}

});

if (error) console.log('Kakao login error:', error.message);

};

const handleGoogleLogin = async () => {

const { error } = await supabase.auth.signInWithOAuth({

provider: 'google',

options: {

queryParams: {

access_type: 'offline',

prompt: 'consent'

}

});

if (error) console.log('Google login error:', error.message);

};

return (

<div

className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[999]"

onClick={handleBackgroundClick}

<h1 className="text-xl font-bold mb-4 text-center text-emerald-400">Welcome to PlanTree!</h1>

카카오톡 로그인

</button>

구글 로그인

</button>

취소

</button>

</div>

);

};

export default SocialModal;

2024. 7. 25. 이메일 인증 비밀번호 변경

훈돌라 — Thu, 25 Jul 2024 22:26:28 +0900

'use client';

import React, { useEffect, useState } from 'react';

import { useRouter } from 'next/navigation';

import ResetPasswordModal from '@/components/molecules/ResetPasswordModal';

const ResetPasswordPage: React.FC = () => {

const router = useRouter();

const [token, setToken] = useState<string | null>(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

const queryParams = new URLSearchParams(window.location.search);

const token = queryParams.get('token');

setToken(token);

setLoading(false);

}, []);

const handleClose = () => {

router.push('/');

};

if (loading) {

return <div>Loading...</div>;

}

return <div>{token ? <ResetPasswordModal token={token} onClose={handleClose} /> : <div>Invalid token</div>}</div>;

};

export default ResetPasswordPage;

인증 요청한 이메일로 받은 링크를 클릭 시 해당 페이지로 이동하며 패스워드 변경 모달을 띄움

import React, { useState } from 'react';

import { supabase } from '@/supabase/client';

interface ResetPasswordModalProps {

token: string | null;

onClose: () => void;

}

const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ token, onClose }) => {

const [password, setPassword] = useState('');

const [confirmPassword, setConfirmPassword] = useState('');

const [message, setMessage] = useState<string | null>(null);

const [error, setError] = useState<string | null>(null);

const handleResetPassword = async () => {

if (password !== confirmPassword) {

setError('비밀번호가 일치하지 않습니다.');

return;

}

try {

const { data, error } = await supabase.auth.updateUser({ password });

if (error) throw error;

setMessage('비밀번호가 성공적으로 변경되었습니다.');

setError(null);

setTimeout(onClose, 2000);

} catch (error) {

console.error('비밀번호 변경 실패:', error);

setMessage(null);

setError(error instanceof Error ? error.message : 'An error occurred.');

}

};

return (

<h1 className="text-xl font-bold mb-4 text-center text-emerald-400">Welcome to PlanTree! </h1>

<input

type="password"

placeholder="새 비밀번호를 입력하세요."

className="mb-4 p-2 border rounded w-full text-black"

value={password}

onChange={(e) => setPassword(e.target.value)}

<input

type="password"

placeholder="비밀번호를 다시 입력하세요."

className="mb-4 p-2 border rounded w-full text-black"

value={confirmPassword}

onChange={(e) => setConfirmPassword(e.target.value)}

{message && <p className="text-green-500">{message}</p>}

{error && <p className="text-red-500">{error}</p>}

취소

</button>

비밀번호 변경

</button>

</div>

);

};

export default ResetPasswordModal;

패스워드 변경 모달

'use client';

import React, { useState, useEffect } from 'react';

import { supabase } from '../../supabase/client';

import ResetPasswordModal from './ResetPasswordModal';

const LoginModal: React.FC<{ onClose: () => void; onSignupClick: () => void }> = ({ onClose, onSignupClick }) => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const [error, setError] = useState<string | null>(null);

const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false);

const [showResetPasswordModal, setShowResetPasswordModal] = useState(false);

const [resetToken, setResetToken] = useState<string | null>(null);

useEffect(() => {

const queryParams = new URLSearchParams(location.search);

const token = queryParams.get('token');

if (token) {

setResetToken(token);

setShowResetPasswordModal(true);

}

}, [location]);

const handleBackgroundClick = (e: React.MouseEvent<HTMLDivElement>) => {

if (e.target === e.currentTarget) {

onClose();

}

};

const handleForgotPasswordClick = () => {

setShowForgotPasswordModal(true);

};

const handleForgotPasswordClose = () => {

setShowForgotPasswordModal(false);

};

const handleResetPasswordClose = () => {

setShowResetPasswordModal(false);

};

const signIn = async (email: string, password: string) => {

const { data, error } = await supabase.auth.signInWithPassword({

email,

password

});

if (error) throw error;

return data;

};

const handleSignIn = async () => {

try {

const data = await signIn(email, password);

console.log('로그인 성공:', data);

onClose();

window.location.reload();

} catch (error) {

console.error('로그인 실패:', error);

setError(error instanceof Error ? error.message : 'An error occurred.');

}

};

return (

{!showForgotPasswordModal && !showResetPasswordModal && (

<div

className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[999]"

onClick={handleBackgroundClick}

<h1 className="text-xl font-bold mb-4 text-center text-emerald-400">Welcome to PlanTree! </h1>

<input

type="text"

placeholder="아이디"

className="mb-2 p-2 border rounded w-full text-black"

value={email}

onChange={(e) => setEmail(e.target.value)}

<input

type="password"

placeholder="비밀번호"

className="mb-4 p-2 border rounded w-full text-black"

value={password}

onChange={(e) => setPassword(e.target.value)}

{error && <p className="text-red-500">{error}</p>}

비밀번호를 잊어버리셨나요?

</h2>

로그인

</button>

회원가입

</button>

</div>

)}

{showForgotPasswordModal && <ForgotPasswordModal onClose={handleForgotPasswordClose} />}

{showResetPasswordModal && <ResetPasswordModal token={resetToken} onClose={handleResetPasswordClose} />}

</>

);

};

const ForgotPasswordModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {

const [email, setEmail] = useState('');

const [message, setMessage] = useState<string | null>(null);

const [error, setError] = useState<string | null>(null);

const handleBackgroundClick = (e: React.MouseEvent<HTMLDivElement>) => {

if (e.target === e.currentTarget) {

onClose();

}

};

const handleResetPassword = async () => {

try {

const { data, error } = await supabase.auth.resetPasswordForEmail(email, {

redirectTo: 'http://localhost:3000/reset-password?token=YOUR_TOKEN'

});

if (error) throw error;

setMessage('인증번호가 이메일로 전송되었습니다.');

setError(null);

} catch (error) {

console.error('비밀번호 재설정 실패:', error);

setMessage(null);

setError(error instanceof Error ? error.message : 'An error occurred.');

}

};

return (

<div

className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[999]"

onClick={handleBackgroundClick}

<h1 className="text-xl font-bold mb-4 text-center text-emerald-400">Welcome to PlanTree! </h1>

<input

type="email"

placeholder="이메일을 입력하세요."

className="mb-4 p-2 border rounded w-full text-black"

value={email}

onChange={(e) => setEmail(e.target.value)}

{message && <p className="text-green-500">{message}</p>}

{error && <p className="text-red-500">{error}</p>}

<h1 className="text-center text-xs">인증번호를 메일로 전송해드립니다.</h1>

취소

</button>

인증번호 받기

</button>

</div>

);

};

export default LoginModal;

로그인 모달

기존에 로그인 모달에 있던 패스워드 변경 모달을 다른 컴포넌트로 분리해서 사용함

남은 기능

소셜 로그인 ( 구글, 카카오, 네이버)

네이버 할 수 있을까?

2024. 7. 24. 가짜 웃음도 나오지 않는 상황..

훈돌라 — Wed, 24 Jul 2024 20:50:25 +0900

'use client';

import React, { useState, useEffect } from 'react';

import SideButton from '../atoms/SideButton';

import GridToggleButton from '../atoms/GridToggleButton';

import LoginModal from './LoginModal';

import SignupModal from './SignupModal';

import { supabase } from '../../supabase/client';

import { MainHeaderProps } from '@/types/main';

const Header: React.FC<MainHeaderProps> = ({ toggleSidebar, toggleGrid }) => {

const [isLoginModalOpen, setLoginModalOpen] = useState(false);

const [isSignupModalOpen, setSignupModalOpen] = useState(false);

const [isLoggedIn, setIsLoggedIn] = useState(false);

useEffect(() => {

const checkUser = async () => {

const {

data: { user }

} = await supabase.auth.getUser();

setIsLoggedIn(!!user);

};

checkUser();

}, []);

const handleOpenSignupModal = () => {

setLoginModalOpen(false);

setSignupModalOpen(true);

};

const handleSignupSuccess = () => {

setSignupModalOpen(false);

setLoginModalOpen(true);

};

const handleLogout = async () => {

const { error } = await supabase.auth.signOut();

if (error) {

console.error('로그아웃 실패:', error);

} else {

setIsLoggedIn(false);

window.location.reload();

}

};

return (

</div>

{isLoggedIn ? (

로그아웃

</button>

) : (

<button

className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"

onClick={() => setLoginModalOpen(true)}

로그인

</button>

<button

className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700"

onClick={() => setSignupModalOpen(true)}

회원가입

</button>

</>

)}

</div>

{isLoginModalOpen && (

<LoginModal onClose={() => setLoginModalOpen(false)} onSignupClick={handleOpenSignupModal} />

)}

{isSignupModalOpen && (

<SignupModal onClose={() => setSignupModalOpen(false)} onSignupSuccess={handleSignupSuccess} />

)}

</header>

);

};

export default Header;

로그인 / 로그아웃 조건부 스타일링 구현

남은 작업 : 소셜 로그인 ( 네이버, 카카오, 구글)

로그인 모달 수정

사이트로그인
소셜로그인

선택지 제공
사이트 로그인 선택 -> 기존 로그인 모달 렌더링
소셜 로그인 선택 -> 소셜 인증 후 로그인 기능 도입

2024. 7. 23. 최종 프로젝트

훈돌라 — Tue, 23 Jul 2024 21:06:28 +0900

인증 / 인가

MainHeader.tsx

'use client';

import React, { useState } from 'react';

import LoginModal from './LoginModal';

import SignupModal from './SignupModal';

import { supabase } from '../../supabase/client';

const MainHeader: React.FC = () => {

const [isLoginModalOpen, setLoginModalOpen] = useState(false);

const [isSignupModalOpen, setSignupModalOpen] = useState(false);

const handleOpenSignupModal = () => {

setLoginModalOpen(false);

setSignupModalOpen(true);

};

const handleSignupSuccess = () => {

setSignupModalOpen(false);

setLoginModalOpen(true);

};

const handleLogout = async () => {

const { error } = await supabase.auth.signOut();

if (error) {

console.error('로그아웃 실패:', error);

} else {

window.location.reload(); // 페이지 새로고침

}

};

return (

<h1 className="text-xl font-bold">MainHeader</h1>

<button

className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"

onClick={() => setLoginModalOpen(true)}

로그인

</button>

로그아웃

</button>

<button

className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700"

onClick={() => setSignupModalOpen(true)}

회원가입

</button>

</div>

{isLoginModalOpen && (

<LoginModal onClose={() => setLoginModalOpen(false)} onSignupClick={handleOpenSignupModal} />

)}

{isSignupModalOpen && (

<SignupModal onClose={() => setSignupModalOpen(false)} onSignupSuccess={handleSignupSuccess} />

)}

</header>

);

};

export default MainHeader;

LoginModal.tsx

import React, { useState } from 'react';

import { supabase } from '../../supabase/client'; // supabase 클라이언트 임포트

const LoginModal: React.FC<{ onClose: () => void; onSignupClick: () => void }> = ({ onClose, onSignupClick }) => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const [error, setError] = useState<string | null>(null);

const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false);

const handleBackgroundClick = (e: React.MouseEvent<HTMLDivElement>) => {

if (e.target === e.currentTarget) {

onClose();

}

};

const handleForgotPasswordClick = () => {

setShowForgotPasswordModal(true);

};

const handleForgotPasswordClose = () => {

setShowForgotPasswordModal(false);

};

const signIn = async (email: string, password: string) => {

const { data, error } = await supabase.auth.signInWithPassword({

email,

password

});

if (error) throw error;

return data;

};

const handleSignIn = async () => {

try {

const data = await signIn(email, password);

console.log('로그인 성공:', data);

onClose();

} catch (error) {

console.error('로그인 실패:', error);

setError(error instanceof Error ? error.message : 'An error occurred.');

}

};

return (

{!showForgotPasswordModal && (

<div

className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"

onClick={handleBackgroundClick}

<h1 className="text-xl font-bold mb-4 text-center text-emerald-400">Welcome to PlanTree! </h1>

<input

type="text"

placeholder="아이디"

className="mb-2 p-2 border rounded w-full"

value={email}

onChange={(e) => setEmail(e.target.value)}

<input

type="password"

placeholder="비밀번호"

className="mb-4 p-2 border rounded w-full"

value={password}

onChange={(e) => setPassword(e.target.value)}

{error && <p className="text-red-500">{error}</p>}

비밀번호를 잊어버리셨나요?

</h2>

로그인

</button>

회원가입

</button>

</div>

)}

{showForgotPasswordModal && <ForgotPasswordModal onClose={handleForgotPasswordClose} />}

</>

);

};

const ForgotPasswordModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {

return (

<h1 className="text-center text-xs">인증번호를 메일로 전송해드립니다.</h1>

취소

</button>

</div>

);

};

export default LoginModal;

SignupModal.tsx

import React, { useState } from 'react';

import { supabase } from '../../supabase/client'; // supabase 클라이언트 임포트

interface SignupModalProps {

onClose: () => void;

onSignupSuccess: () => void;

}

const SignupModal: React.FC<SignupModalProps> = ({ onClose, onSignupSuccess }) => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const [nickname, setNickname] = useState('');

const [error, setError] = useState<string | null>(null);

const handleBackgroundClick = (e: React.MouseEvent<HTMLDivElement>) => {

if (e.target === e.currentTarget) {

onClose();

}

};

const signUp = async () => {

try {

// 1. 사용자 인증 정보로 회원가입

const { data: authData, error: authError } = await supabase.auth.signUp({

email,

password,

options: {

data: {

nickname

}

});

if (authError) throw authError;

// 2. 회원가입 성공 시, 사용자 프로필 정보 추가

if (authData.user) {

const { data: profileData, error: profileError } = await supabase

.from('users')

.insert({

id: authData.user.id,

nickname: nickname,

email: email

})

.select();

if (profileError) throw profileError;

// 회원가입과 프로필 정보 추가가 모두 성공하면 모달 닫기 및 성공 콜백 호출

onClose();

onSignupSuccess();

return { authData, profileData };

}

} catch (error) {

console.error(error); // 콘솔에 오류 출력

setError(error instanceof Error ? error.message : 'An error occurred.');

}

};

return (

<div

className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"

onClick={handleBackgroundClick}

{error && <p className="text-red-500 text-center">{error}</p>}

<input

type="text"

placeholder="닉네임"

className="mb-4 p-2 border rounded w-full"

value={nickname}

onChange={(e) => setNickname(e.target.value)}

<input

type="email"

placeholder="이메일"

className="mb-4 p-2 border rounded w-full"

value={email}

onChange={(e) => setEmail(e.target.value)}

<input

type="password"

placeholder="비밀번호"

className="mb-4 p-2 border rounded w-full"

value={password}

onChange={(e) => setPassword(e.target.value)}

취소

</button>

회원가입

</button>

</div>

);

};

export default SignupModal;

구현한 기능 : supabase 를 이용한 회원가입/로그인/로그아웃

구현 해야 할 기능 : 이메일 인증 회원가입, 소셜 로그인 (네이버)

2024. 7. 12. 프로젝트 트러블 슈팅

훈돌라 — Fri, 12 Jul 2024 21:07:54 +0900

트러블 슈팅

문제
likesData가 배열이 아니라 객체로 반환되는 문제, likesData가 정의되지 않았거나 배열이 아닌 경우 발생하는 타입 오류, 데이터를 올바르게 정렬 및 상태 관리하는 데 어려움이 있음

원인
데이터 형태 불일치: likesData가 객체로 반환되어 배열 메서드를 사용하지 못하는 문제

데이터 비동기 처리: posts와 likesData가 비동기로 로드되기 때문에, 데이터가 아직 로드되지 않았을 때 코드를 실행하여 오류가 발생할 수 있음

타입스크립트 타입 안전성: likesData가 배열이 아닐 경우 타입스크립트에서 타입 오류가 발생

해결 방법

likesData의 타입을 명확히 하고, 배열인지 확인하는 로직을 추가하여 타입 안전성을 확보
useEffect 훅 내에서 likesData가 배열인 경우에만 좋아요 수를 계산하고 정렬하도록 조건문 추가
likesData와 posts가 모두 로드된 후에만 상태를 업데이트하도록 수정

const posts: Post[] = data ? data.posts : [];

  const {
    data: likesData,
    error: likesError,
    isLoading: likesLoading,
  } = useAllLikes();

  const [postsWithLikes, setPostsWithLikes] = useState<
    (Post & { likesCount: number })[]
  >([]);

  useEffect(() => {
    if (posts && likesData && Array.isArray(likesData.likes)) {
      const postsWithLikes = posts.map((post) => {
        const likesCount = likesData.likes.filter(
          (like: any) => like.post_id === post.post_id
        ).length;
        return { ...post, likesCount };
      });

      
      const sortedPosts = postsWithLikes.sort(
        (a, b) => b.likesCount - a.likesCount
      );
      setPostsWithLikes(sortedPosts);
    }
  }, [posts, likesData]);

2024. 7. 11. 머지 오류(?) 해결법

훈돌라 — Thu, 11 Jul 2024 22:52:42 +0900

Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch

git bash를 사용하여 merge를 진행하려고 할 때 (pull) 위처럼 왜 해당 merge가 필요한지에 대해서 commit message를 남기라는 말이 나온다.

이럴 때 마다 키보드를 막 눌러도 아무런 변화가 없는 상황이 발생해서 visual studio code에서 다시 merge를 진행했던 적이 많았는데, 한 블로그에서 해결법을 찾게 됬다.

해결 방법

i를 누른다 (commit message를 입력하기 위해)
merge에 대한 message를 입력한다.
esc를 누른다.
:wq를 입력한다.
enter를 누른다.

2024. 7. 10. 심화 프로젝트 3일차

훈돌라 — Wed, 10 Jul 2024 21:38:54 +0900

import { FC } from "react";
import Link from "next/link";
import { PostInDB } from "@/types/Post";
import SITE_URL from "@/constant";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  const response = await fetch(`${SITE_URL}/api/posts`, {
    headers: {
      "Cache-Control": "no-cache",
      Pragma: "no-cache",
      Expires: "0",
    },
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json() as Promise<PostInDB[]>;
};

const BestInfo: FC = () => {
  const {
    data: posts,
    error,
    refetch,
  } = useQuery<PostInDB[]>({
    queryKey: ["posts"],
    queryFn: fetchPosts,
    staleTime: 0,
    refetchOnWindowFocus: true,
    refetchInterval: 60000,
  });

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div className="p-5">
      <div className="mb-5 flex justify-between items-center">
        <div>
          <h2 className="text-40px text-[#10AF86]">베스트</h2>
          <p className="text-25px">금주의 베스트 게시글 입니다.</p>
        </div>
        <Link href="/more">
          <p className="text-gray-500 text-sm">더보기 &gt;</p>
        </Link>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        {posts && posts.length > 0 ? (
          posts.slice(0, 4).map((post) => (
            <div
              key={post.post_id}
              className="relative rounded-lg overflow-hidden"
            >
              <img
                src={post.image}
                alt={post.title}
                className="w-52 h-32 rounded-2xl"
              />
              <div className="p-4">
                <h3 className="text-lg font-semibold">{post.title}</h3>
                <p className="text-gray-600 mt-1">{post.content}</p>
                <div className="flex justify-between items-center mt-4">
                  <span className="text-gray-500 text-sm">
                    작성자 {post.author_nickname}
                  </span>
                  <span className="text-gray-500 text-sm">
                    {new Date(post.created_at).toLocaleDateString()}
                  </span>
                </div>
                <div className="flex justify-between items-center mt-2">
                  <span className="text-green-600 text-sm">
                    ♥ {post.likes ?? 0}
                  </span>
                </div>
              </div>
            </div>
          ))
        ) : (
          <p>No posts available.</p>
        )}
      </div>
    </div>
  );
};

export default BestInfo;

usequery 로 가져온 캐싱된 데이터가 지난 데이터로 읽히는 (?) 문제가 있었었다.

수파베이스에서 게시글을 지워도 데이터엔 여전히 남아있고 페이지에도 렌더링 됬던 것.

데이터를 가져오는 로직에서 문제가 있었던 것 같긴 한데, 해결 방법이 있어서 트러블 슈팅을 적어보려고 한다.

HTTP 헤더 설정: fetchPosts 함수에서 Cache-Control, Pragma, Expires 헤더를 설정하여 캐시를 무시하고 항상 최신 데이터를 가져오도록 설정한다.

사실 이렇게 하면 쿼리로 가져온 의미가 있나,, 싶기도 한데 일단 기능 구현부터 하고 만약 필요하다면 리팩토링 해보려고 한다.

2024. 7. 9. 심화 프로젝트 2일차 (코딩 시작)

훈돌라 — Tue, 9 Jul 2024 21:55:59 +0900

와이어프레임을 토대로 UI 작업을 85% 완료하였고, 이제 수파베이스 테이블에서 데이터를 읽어오기만 하면 어느정도 마무리 될 것 같다.

남은 작업

캐러셀 수정 (레이아웃 문제 해결해야함)
수파베이스 데이터 읽어오기 (좋아요 수에 따라 게시글 정렬)
와이어프레임 토대로 푸터 구현
로그인, 로그아웃 상태에 따른 헤더 변화 (헤더 투명하게 - 메인에서만)

훈돌라

8. 7. 소셜 로그인 auth 정보를 public.users 정보로 옮기는 sql ( 닉네임 변경 가능 )

2024. 7. 31. 줄노트 속지 제작, supabase 연동

2024. 7. 26. 소셜 로그인

2024. 7. 25. 이메일 인증 비밀번호 변경

2024. 7. 24. 가짜 웃음도 나오지 않는 상황..

2024. 7. 23. 최종 프로젝트

2024. 7. 12. 프로젝트 트러블 슈팅

트러블 슈팅문제 likesData가 배열이 아니라 객체로 반환되는 문제, likesData가 정의되지 않았거나 배열이 아닌 경우 발생하는 타입 오류, 데이터를 올바르게 정렬 및 상태 관리하는 데 어려움이 있음

2024. 7. 11. 머지 오류(?) 해결법

해결 방법

2024. 7. 10. 심화 프로젝트 3일차

2024. 7. 9. 심화 프로젝트 2일차 (코딩 시작)

트러블 슈팅

문제
likesData가 배열이 아니라 객체로 반환되는 문제, likesData가 정의되지 않았거나 배열이 아닌 경우 발생하는 타입 오류, 데이터를 올바르게 정렬 및 상태 관리하는 데 어려움이 있음