- SoundCloud·
- Discord·
- Instagram
-
-
- contact@islandlabel.com
+
+
+ ·
+ ·
+
© 2025 ISLAND · MIT License
diff --git a/src/components/componets.scss b/src/components/componets.scss
index cb71693..74e5914 100644
--- a/src/components/componets.scss
+++ b/src/components/componets.scss
@@ -1,8 +1,8 @@
.release-card {
cursor: pointer;
- width: 400px;
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+ width: 300px;
+ background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s ease;
padding: 5px;
@@ -30,4 +30,44 @@
text-transform: uppercase;
letter-spacing: 1px;
}
+
+ .release-link {
+ display: inline-block;
+ margin-top: 15px;
+ padding: 8px 20px;
+ background: rgba(255, 255, 255, 0.1);
+ color: #fff;
+ text-decoration: none;
+ border-radius: 20px;
+ font-size: 0.9em;
+ transition: all 0.3s ease;
+ border: 2px solid rgba(255, 255, 255, 0.2);
+ }
+}
+
+.text-card {
+ background: #2a2a2a;
+ border-radius: 12px;
+ padding: 20px;
+ margin-left: 20%;
+ margin-right: 20%;
+ margin-bottom: 15px;
+ margin-top: 15px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ border: 1px solid #333;
+ animation: slideUp 0.8s ease-out;
+
+ h2 {
+ font-size: 2em;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ color: #fff;
+ border-bottom: 2px solid #444;
+ padding-bottom: 10px;
+ }
+
+ @media (max-width: 768px) {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
}
diff --git a/src/components/song_card.tsx b/src/components/song_card.tsx
index eea1ad6..3462dba 100644
--- a/src/components/song_card.tsx
+++ b/src/components/song_card.tsx
@@ -1,18 +1,27 @@
import "./componets.scss";
+import {Link} from 'react-router-dom';
+import { useTranslation } from "react-i18next";
type Props = {
Song_Name: string;
Artist_Name: string;
Cover_Art: string;
+ index: number;
};
+
// TODO: 사클 API로 곡 데이터 만으로도 커버 아트 가져올 수 있게 바꾸기
-function Song_card({ Song_Name, Artist_Name, Cover_Art}: Props) {
+// 현재는 releases.json에서 커버 아트 URL을 직접 넣어주고 있음, 추후에 필요하다 생각되면 사클 API로 바꾸기 (아직 ㄴㄴ)
+
+function Song_card({ Song_Name, Artist_Name, Cover_Art, index}: Props) {
+ const { t } = useTranslation();
+
return (
{Song_Name}
{Artist_Name}
+
{t("detail")}
);
diff --git a/src/components/soundcloud_icon.tsx b/src/components/soundcloud_icon.tsx
new file mode 100644
index 0000000..1a87097
--- /dev/null
+++ b/src/components/soundcloud_icon.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const SoundCloudIcon: React.FC
> = (props) => (
+
+);
+
+export default SoundCloudIcon;
\ No newline at end of file
diff --git a/src/components/text_card.tsx b/src/components/text_card.tsx
new file mode 100644
index 0000000..4e29cf5
--- /dev/null
+++ b/src/components/text_card.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import "./componets.scss";
+
+type Props = {
+ title: string;
+ children: ReactNode;
+}
+
+function Card({ title, children }: Props) {
+ return (
+
+
{title}
+ {children}
+
+ );
+}
+
+export default Card;
\ No newline at end of file
diff --git a/src/language/en.json b/src/language/en.json
index 2f02911..f0343d0 100644
--- a/src/language/en.json
+++ b/src/language/en.json
@@ -14,5 +14,6 @@
"support_desc":"Support for in-production tracks, feedback, collaboration opportunities",
"label":"Label Transition",
"label_desc":"We aim to become a label for growing artists",
- "operators": "Operators"
+ "operators": "Operators",
+ "detail": "View Details"
}
\ No newline at end of file
diff --git a/src/language/ko.json b/src/language/ko.json
index 6520bf1..7af2682 100644
--- a/src/language/ko.json
+++ b/src/language/ko.json
@@ -14,5 +14,6 @@
"support_desc":"자체제작 음향 소프트웨어 지원, 피드백 제공, 협업 기회",
"label":"음반사로 전환",
"label_desc":"성장하는 아티스트를 위한 음반사화 추진",
- "operators": "운영진"
+ "operators": "운영진",
+ "detail": "더 알아보기"
}
\ No newline at end of file
diff --git a/src/language/translate_button.tsx b/src/language/translate_button.tsx
index 828803e..20c357b 100644
--- a/src/language/translate_button.tsx
+++ b/src/language/translate_button.tsx
@@ -14,7 +14,7 @@ i18n
translation: ko,
},
},
- lng: "ko-KR",
+ lng: "en-US",
fallbackLng: {
"ko-KR": ["ko-KR"],
default: ["en-US"],
diff --git a/src/main.tsx b/src/main.tsx
index b5ec6aa..db616db 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,6 +5,7 @@ import App from './App'; // 최상위 레이아웃 컴포넌트, 공통 레이
import HomePage from './pages/Home';
import SubmitPage from './pages/id_submit';
import About from './pages/about';
+import SongPage from './pages/song';
const router = createBrowserRouter([
{
@@ -14,6 +15,7 @@ const router = createBrowserRouter([
{ index: true, element: },
{ path: 'submission', element: },
{ path: 'about', element: },
+ { path: 'song/:id', element: },
],
},
]);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 5990a4d..79c1d37 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -5,11 +5,11 @@ import 'swiper/swiper.css';
import "./pages.scss";
import { EffectCoverflow, Pagination } from 'swiper/modules';
import releases from '../releases.json';
+import Text_Card from "../components/text_card";
function HomePage(){
//API를 써서 리스트 가져오기?
const { t } = useTranslation();
- console.log(releases);
return (
@@ -19,15 +19,14 @@ function HomePage(){
{t("sub_title")}
{t("releases")}
+
-
+
)
)
)}
-
-
+
);
}
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 1a93731..3344db4 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,54 +1,53 @@
import { useTranslation } from "react-i18next";
+import Card from "../components/text_card";
+import "./pages.scss";
function About() {
const { t } = useTranslation();
return (