팀프로젝트 뉴스피드 _ 3

 

나 메인페이지 담당 :) 
메인 페이지  + AI API 불러오는게 목표!
목표 완성!
부족한점 : 답이 보인다(머지하면서 뭔가 충돌생긴듯) / 자세히 보기를 누르면 디테일 페이지로 향해야 하지만 답이나옴../
개그 작성하기 밑에 여백이 없...눼? 여백 주기 ^_^...

내일 반드시 완성해야해 나....
 PPT 만들고, 노션정리, 대본만들기 등등이 날 기다리구 있다굿..?

 
로그인 브랜치랑....... 머지하다가 말아먹었다...
..ㅎ
....ㅎ
.......ㅎ
아 관두고싶당...

---

1. 프로젝트 소개
React와 Supabase를 활용한 유머 공유 웹 애플리케이션 개발을 진행했습니다. 주요 기능으로는 유머 추천, 사용자 리뷰 카드, 그리고 Supabase와 연동된 데이터 관리 기능이 포함되었습니다.

---

2. 주요 개발 작업

2.1 프로젝트 구조
- React와 Vite를 기반으로 한 프로젝트 구조를 설계.
- 주요 폴더 및 파일 구성:

  ```
  src/
  ├── pages/
  │   ├── home-page/HomePage.jsx
  │   ├── post-page/PostPage.jsx
  │   ├── login-page/LoginPage.jsx
  │   └── signup-page/SignUpPage.jsx
  ├── service/
  │   └── supabaseClient.js
  ├── components/
  ├── assets/
  └── App.jsx
  ```

2.2 Supabase 클라이언트 설정**
- `supabaseClient.js` 파일을 작성하여 Supabase API와 연결:

 ```javascript
  import { createClient } from '@supabase/supabase-js';

  const supabaseUrl = 'https://your-supabase-url.supabase.co';
  const supabaseKey = import.meta.env.VITE_SUPABASE_KEY; // 환경 변수에서 키 읽기

  const supabase = createClient(supabaseUrl, supabaseKey);

  export default supabase;
  ```

- `.env` 파일에 Supabase API 키를 저장:

  ```
  VITE_SUPABASE_KEY=your-supabase-api-key
  ```

---

3. 주요 기능 개발

3.1 리뷰 카드
- Supabase에서 데이터를 가져와 최대 6개의 리뷰를 카드 형태로 보여줌.
- `HomePage.jsx` 파일에서 구현:

  ```javascript
  const fetchReviews = async () => {
    try {
      const { data, error } = await supabase
        .from('posts')
        .select(`
          id,
          question,
          answer,
          users (nickname, url_img)
        `)
        .order('created_at', { ascending: false });

      if (error) throw error;
      setReviews(data.slice(0, 6)); // 최대 6개 리뷰만 표시
    } catch (error) {
      console.error('Error fetching reviews:', error);
    }
  };
  ```

- 답변은 기본적으로 숨기고, "자세히 보기" 버튼 클릭 시 표시되도록 설정:
  ```javascript
  const toggleAnswerVisibility = (id) => {
    setShowAnswers((prevState) => ({
      ...prevState,
      [id]: !prevState[id],
    }));
  };
  ```

3.2 AI 유머 추천
- [icanhazdadjoke API](https://icanhazdadjoke.com/)를 활용하여 랜덤 유머를 가져오는 기능 구현.
- Google Translate API를 사용해 유머를 한국어로 번역.
- 관련 코드:

  ```javascript
  const fetchJoke = async () => {
    const response = await fetch('https://icanhazdadjoke.com/', {
      headers: { Accept: 'application/json' },
    });
    const data = await response.json();
    setJoke(data.joke);
    translateJoke(data.joke);
  };

  const translateJoke = async (text) => {
    const response = await fetch(
      `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ q: text, target: 'ko' }),
      }
    );
    const data = await response.json();
    setTranslatedJoke(data.data.translations[0].translatedText);
  };
  ```

 

---

4. 문제와 해결 과정

4.1 Git 충돌
- `PostPage.jsx`에서 Git 병합 충돌(`<<<<<<<`, `=======`, `>>>>>>>`)로 인해 코드가 실행되지 않는 문제.
- 해결 방법: Git 충돌 표시를 제거하고 최종 코드를 정리.

4.2 Supabase 클라이언트 연결 문제
- `supabaseClient.js` 파일 경로 설정 오류.
- 해결 방법: 정확한 경로(`../../supabaseClient`)를 설정.

4.3 500 (Internal Server Error)
- Supabase API 호출 중 서버 오류 발생.
- 해결 방법:
  1. Supabase에서 테이블 스키마 확인.
  2. 잘못된 데이터 형식 및 누락된 필드 점검.
  3. API 키 및 환경 변수 재확인.

4.4 스타일링 문제
- 리뷰 카드 텍스트가 중앙에 오지 않거나, 버튼 간 간격이 부족한 문제.
- 해결 방법 :

  ```javascript
  const Card = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  `;
  const CTASection = styled.div`
    margin-top: 4rem; /* 버튼 간격 추가 */
  `;
  ```

 

---

5. 결과물

홈페이지 주요 화면
- 유머 추천, 리뷰 카드, "자세히 보기" 버튼 구현.
- Supabase와 연결된 데이터를 3x2 카드 레이아웃으로 표시.

기능 요약
- 랜덤 유머 추천 및 번역.
- 리뷰 데이터 표시, 답변 토글 기능.
- Supabase 기반의 실시간 데이터베이스 연동.

---

6. 배운 점
- Supabase를 활용한 데이터베이스 연동 및 클라이언트 설정.
- API 연동 및 데이터 번역 처리.
- Git 충돌 해결과 코드 관리.

---

7. 앞으로의 계획
- 사용자 회원가입 기능 구현.
- 리뷰 작성 및 삭제 기능 추가.
- 반응형 디자인 개선.