시나리오

1. 사용자가 사이드 패널을 연다.
2. 사용자가 로그인을 하지 않았다면, 로그인 유도 문구가 보인다.
   1. 로그인 여부는 web-memo 웹사이트의 쿠키를 확인한다. (chrome.cookies.get())
3. 사용자가 로그인을 했다면, 메모가 보인다.
   1. 사용자가 메모를 입력할 시 메모가 저장된다.
      1. web-memo 웹사이트의 쿠키를 활용해서 Supabase에 데이터 요청을한다.
      2. RLS에 의해 인증이 처리가 된다.
         • To Know : Supabase RLS(사용자에 따라 DB row 접근 권한 설정)
           • Supabase - 인증과 Serverless App 구현하기
         • TODO : DataBase구조

Database 구조

1. id : string
2. uuid : uuid
   • 누가 작성한 글인지 필터링한다.
3. memo
4. created : Date

• 추후 추가 예정 : 카테고리

Policies

개발

1. 배포된 웹사이트에 접속해 cookie값을 가져온다.

   export const getUserFromCookie = async () => {
     const cookie = await chrome.cookies.get({
       name: authToken,
       url: WEB_URL,
     });
     if (!cookie) return;
   
     return JSON.parse(cookie.value) as Session;
   };
   

2. 쿠기 값에서 accesstoken을 가져와 supabase client를 만든다.

   export const getSupabaseClient = async () => {
     const user = await getUserFromCookie();
     if (!user) throw new Error('없는 사용자입니다.');
   
     const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
       db: { schema: 'memo' },
       global: {
         headers: {
           authorization: `Bearer ${user.access_token}`,
         },
       },
     });
     return supabase;
   };
   

3. supabase Database에 값을 조회한다.

   export const getMemo = async () => {
     const supabaseClient = await getSupabaseClient();
     const response = await supabaseClient.from('memo').select('*');
     return response;
   };