Repository: fourkie/fourkie
Pull request #13: [Feature/Home] 데이터 가져오기 로직 추가 이미지 로직 추가 #3
Author: login: usuny0317
Labels: name: 🐰 선영
description: 선영
name: ✨ Feature
description: 기능 추가
Created: 2025-04-02T08:48:45Z | Merged: 2025-04-03T05:58:04Z

## #️⃣ 연관된 이슈
Ref #3 

<br>

## 📝 작업 내용

> 데베에 있는 전체 데이터를 가져와서 감정 판단 후 이미지로 넣었습니다.
> 이미지 추가를 위해 next.config.mjs 파일을 수정했습니다. 이제 경로만 잘 쓰면 storage에 emotin-img에 접근이 가능합니다.
> 감정에 따라 url을 반환하는 함수를 만들어 imgae에 넣었습니다.
>> 해당 함수에서 img를 반환하려 하니 엄청난 오류가 나서 url만 보내기로 결정했습니다. 성능적으로 떨어지거나 하지는 않는 것 같습니다.

<br>

## 🖼 스크린샷
감정에 따라 다른 이미지가 나타나게 했습니다. 사진 적어둔게 적어서 대부분 joy 이고 다른 사진은 sad, sleepy 입니다. 

![image](https://github.com/user-attachments/assets/a208bc1f-fba2-4740-857a-09038905801b)
<br />
빌드 문제 없습니다.
![image](https://github.com/user-attachments/assets/18330130-d450-4627-9fce-f3f6e77a4dda)



<br>

## 💬리뷰 요구사항

> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
> 혹시 함수 이름 저런식이 맞을까요? handler는 아니라서 get으로 시작하게 적었는데, 피드백 환영합니다!
> 저희 유저 데이터 local에 저장하는 것으로 땅땅 일까요? 이게 정해지면 바로 유저 정보 받아와서 유저가 작성한 글만 보이게 할 수 있을 것 같습니다. 




Diff:
diff --git a/next.config.mjs b/next.config.mjs
index 4678774e..78d63bbe 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "kcvtuvflabmysoqvvany.supabase.co",
+        pathname: "/storage/v1/object/public/emotion-img/**",
+      },
+    ],
+  },
+};
 
 export default nextConfig;
diff --git a/src/app/(home)/components/home-diary.tsx b/src/app/(home)/components/home-diary.tsx
new file mode 100644
index 00000000..d938865d
--- /dev/null
+++ b/src/app/(home)/components/home-diary.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { checkEmotion } from "../../../utils/home-emotion.util";
+import { HomePost } from "../types/HomePost";
+import Image from "next/image";
+import { getPostEmotionByUserId } from "@/services/home-services";
+
+const HomeDiary = async () => {
+  const posts: HomePost[] = await getPostEmotionByUserId();
+  return (
+    <div className="grid grid-cols-5 gap-4 m-10 bg-gray-500 rounded">
+      {posts.map((post) => {
+        return (
+          <div key={post.post_id}>
+            <Image
+              src={checkEmotion(post.post_emotion)}
+              alt={post.post_emotion}
+              width={200}
+              height={200}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default HomeDiary;
diff --git a/src/app/(home)/types/HomePost.ts b/src/app/(home)/types/HomePost.ts
new file mode 100644
index 00000000..3fab65a6
--- /dev/null
+++ b/src/app/(home)/types/HomePost.ts
@@ -0,0 +1,8 @@
+export type HomePost = {
+  post_id: number;
+  post_created_at: string;
+  user_id: string;
+  post_title: string;
+  post_emotion: string;
+  post_content: string;
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 897181b3..ba5c3cb3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,12 @@
-export default function Home() {
-  return;
-  <></>;
-}
+import HomeDiary from "./(home)/components/home-diary";
+
+const HomePage = async () => {
+  return (
+    <div>
+      HomePage
+      <HomeDiary />
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/src/constants/emotions-url.ts b/src/constants/emotions-url.ts
new file mode 100644
index 00000000..f93bed0a
--- /dev/null
+++ b/src/constants/emotions-url.ts
@@ -0,0 +1,19 @@
+export const EMOTION_URL = {
+  JOY: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  EXCITED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  BUTTERFLY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  GRATEFUL:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  CALM: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  LONELY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  ANXIOUS:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  TIRED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sleepy.jpg",
+  SAD: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  ANGRY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/surprize.jpg",
+};
diff --git a/src/services/home-services.ts b/src/services/home-services.ts
new file mode 100644
index 00000000..8f406c13
--- /dev/null
+++ b/src/services/home-services.ts
@@ -0,0 +1,25 @@
+import supabase from "./supabase";
+
+export const getPostEmotionByUserId = async () => {
+  // 유저 정보 가져와서 비교할 예정
+  /* const { data: User, error: UserError } = await supabase.auth.getUser();
+    if (UserError) {
+      console.log("오류남" + UserError);
+    } else {
+      console.log(User);
+    }
+   */
+
+  try {
+    const { data, error } = await supabase.from("posts").select("*");
+    //.eq("user_id", a);
+
+    if (error) {
+      throw error;
+    }
+    return data;
+  } catch (err) {
+    console.error("데이터 가져오기 실패:", err);
+    return [];
+  }
+};
diff --git a/src/utils/home-emotion.util.ts b/src/utils/home-emotion.util.ts
new file mode 100644
index 00000000..53c21fad
--- /dev/null
+++ b/src/utils/home-emotion.util.ts
@@ -0,0 +1,18 @@
+import { EMOTION_URL } from "@/constants/emotions-url";
+
+const emotions: Record<string, string> = {
+  JOY: EMOTION_URL.JOY,
+  EXCITED: EMOTION_URL.EXCITED,
+  BUTTERFLY: EMOTION_URL.BUTTERFLY,
+  GRATEFUL: EMOTION_URL.GRATEFUL,
+  CALM: EMOTION_URL.CALM,
+  LONELY: EMOTION_URL.LONELY,
+  ANXIOUS: EMOTION_URL.ANXIOUS,
+  TIRED: EMOTION_URL.TIRED,
+  SAD: EMOTION_URL.SAD,
+  ANGRY: EMOTION_URL.ANGRY,
+};
+
+export const checkEmotion = (emotion: string) => {
+  return emotions[emotion] || "존재하지 않는 감정이예요";
+};


Reviews:
user: login: Koi-0
body: 확인했습니다 !
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T08:53:29Z
user: login: ijooha16
body: 고생하셨습니당!!~~~
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T08:58:09Z
user: login: sharet9446
body: 저희 쿠키로 저장되게 할 것 같아요! 
보안적으로 그게 더 좋다고 합니다!
그래서 현재 접속한 유저의 데이터는 getUser() 로 가져오시는걸 추천드립니다!
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T09:07:15Z
user: login: usuny0317
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T10:13:50Z
user: login: ijooha16
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T11:19:17Z
user: login: Koi-0
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T11:48:22Z
user: login: sharet9446
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T03:38:42Z
user: login: ijooha16
body: 고생하셨습니당~!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T05:55:39Z
user: login: Koi-0
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T05:57:24Z

Review comments:
diff_hunk: @@ -0,0 +1,47 @@
+import supabase from "@/services/supabase";
+
+// 쿠키 사진 url이 들어갈 예정
+// 이거 상수 쪽으로
+// cookieImg = { joy: "url" 이렇게 빼두는 게 좋겠죠?}
+const emotions: Record<string, string> = {
+  JOY: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  EXCITED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  BUTTERFLY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  GRATEFUL:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  CALM: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  LONELY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  ANXIOUS:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  TIRED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sleepy.jpg",
+  SAD: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  ANGRY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/surprize.jpg",
+};
+
+export const getUserEmotions = async () => {
path: src/app/home/utils/home-emotion.util.ts
user: login: ijooha16
body: getUserEmotions --> getAllUserEmotions로 바꿔주시면 좋을 것 같습니다!!

저희 api 관련 컨벤션에 있습니닷!
created_at: 2025-04-02T08:56:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,47 @@
+import supabase from "@/services/supabase";
+
+// 쿠키 사진 url이 들어갈 예정
+// 이거 상수 쪽으로
+// cookieImg = { joy: "url" 이렇게 빼두는 게 좋겠죠?}
+const emotions: Record<string, string> = {
+  JOY: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  EXCITED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  BUTTERFLY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  GRATEFUL:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  CALM: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  LONELY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  ANXIOUS:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  TIRED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sleepy.jpg",
+  SAD: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  ANGRY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/surprize.jpg",
+};
+
+export const getUserEmotions = async () => {
+  // 유저 정보 가져와서 비교할 예정
+  /* const { data: User, error: UserError } = await supabase.auth.getUser();
+  if (UserError) {
+    console.log("오류남" + UserError);
+  } else {
+    console.log(User);
+  }
+ */
+  const { data, error } = await supabase.from("posts").select("*");
+  //.eq("user_id", a);
+
+  if (error) {
+    console.error("데이터 가져오기 실패:", error);
+    return [];
+  }
+  return data;
+};
path: src/app/home/utils/home-emotion.util.ts
user: login: ijooha16
body: 이부분 try catch를 쓸지 if문을 사용할지도 이야기해서 통일시키면 좋을 거 같아용
created_at: 2025-04-02T08:57:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,47 @@
+import supabase from "@/services/supabase";
+
+// 쿠키 사진 url이 들어갈 예정
+// 이거 상수 쪽으로
+// cookieImg = { joy: "url" 이렇게 빼두는 게 좋겠죠?}
+const emotions: Record<string, string> = {
+  JOY: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  EXCITED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  BUTTERFLY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  GRATEFUL:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  CALM: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  LONELY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  ANXIOUS:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  TIRED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sleepy.jpg",
+  SAD: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  ANGRY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/surprize.jpg",
+};
+
+export const getUserEmotions = async () => {
path: src/app/home/utils/home-emotion.util.ts
user: login: usuny0317
body: 유저 정보를 기반으로 받아오기 위해 
getPostEmotionByUserId 로 바꾸겠습니다~!
created_at: 2025-04-02T10:13:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,47 @@
+import supabase from "@/services/supabase";
+
+// 쿠키 사진 url이 들어갈 예정
+// 이거 상수 쪽으로
+// cookieImg = { joy: "url" 이렇게 빼두는 게 좋겠죠?}
+const emotions: Record<string, string> = {
+  JOY: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  EXCITED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  BUTTERFLY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  GRATEFUL:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  CALM: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  LONELY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/joy.jpg",
+  ANXIOUS:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  TIRED:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sleepy.jpg",
+  SAD: "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/sad.jpg",
+  ANGRY:
+    "https://kcvtuvflabmysoqvvany.supabase.co/storage/v1/object/public/emotion-img/surprize.jpg",
+};
+
+export const getUserEmotions = async () => {
path: src/app/home/utils/home-emotion.util.ts
user: login: ijooha16
body: 넵 좋습니당~~!
created_at: 2025-04-02T11:19:17Z
author_association: CONTRIBUTOR

PR comments:
user: login: usuny0317
created_at: 2025-04-02T08:52:45Z
body: 세상에 볼더가 왜 안되나 했더니 오탈자가 있네요 
그저 확인을 위해 넣어둔 없어도 되는 부분이라 
다음에 고치겠습니다 ..
author_association: CONTRIBUTOR
user: login: Koi-0
created_at: 2025-04-02T10:20:15Z
body: > 저희 쿠키로 저장되게 할 것 같아요! 보안적으로 그게 더 좋다고 합니다! 그래서 현재 접속한 유저의 데이터는 getUser() 로 가져오시는걸 추천드립니다!

혹시 스포티파이 토큰 받아오는 것도 쿠키로 저장하는 게 좋을까요 ?? 저는 세션 스토리지에 저장하는 게 조금 더 낫다고 생각했는데, 그거랑 토큰이랑은 별개일까요 ??
author_association: CONTRIBUTOR
user: login: sharet9446
created_at: 2025-04-03T03:36:16Z
body: 

> > 저희 쿠키로 저장되게 할 것 같아요! 보안적으로 그게 더 좋다고 합니다! 그래서 현재 접속한 유저의 데이터는 getUser() 로 가져오시는걸 추천드립니다!
> 
> 혹시 스포티파이 토큰 받아오는 것도 쿠키로 저장하는 게 좋을까요 ?? 저는 세션 스토리지에 저장하는 게 조금 더 낫다고 생각했는데, 그거랑 토큰이랑은 별개일까요 ??

저는 개인적으로 로컬이나 쿠키에 저장하는게 좋다고 생각합니다!
세션에 토큰을 저장하면 브라우저를 꺼버리는 순간 자동적으로 로그아웃이 될텐데 유저 입장에선 재접속할때마다 다시 로그인하느라 유저 사용성이 안좋다고 생각하기 때문입니다!
author_association: CONTRIBUTOR
user: login: usuny0317
created_at: 2025-04-03T05:39:50Z
body: 상수화, 디렉토리 구조에 맞게 파일 분리 및 오탈자 제거 등 진행하였습니다. 
author_association: CONTRIBUTOR