간단명료한 디자인을 추구합니다.
This commit is contained in:
parent
b5e3f64b04
commit
26fe4232d7
4 changed files with 99 additions and 13 deletions
|
|
@ -1,7 +1,9 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Card, CardContent, CardHeader } from "../ui/card";
|
||||
|
||||
export default function About() {
|
||||
const [posts, setPosts] = useState<any[]>([]);
|
||||
const [time, setTime] = useState<string>("");
|
||||
const [post, setPost] = useState<any>({});
|
||||
|
||||
useEffect(() => {
|
||||
fetch("https://api.imnya.ng/rss", {
|
||||
|
|
@ -13,7 +15,7 @@ export default function About() {
|
|||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data) {
|
||||
setPosts(data.slice(0, 3));
|
||||
setPost(data[0] || {});
|
||||
} else {
|
||||
console.error("Error: data is undefined");
|
||||
}
|
||||
|
|
@ -21,22 +23,27 @@ export default function About() {
|
|||
.catch(error => console.error("Error fetching posts:", error));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setTime(new Date().toLocaleTimeString('en-US', { timeZone: 'Asia/Seoul', hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 }));
|
||||
}, 1);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
return (
|
||||
<div className="w-full h-screen flex flex-col items-center justify-center">
|
||||
<div className="w-full md:w-[50%] p-4">
|
||||
<h1 className="text-2xl font-bold">🤔 About</h1>
|
||||
<p className="mt-2">안녕하세요! 저는 암냥이라는 이름으로 활동하고 있는 학생 개발자 남현석입니다.</p>
|
||||
<p>With <a href="https://sqlare.com">Sqlare</a>, <a href="https://team.orygonix.com">TEAM. ORYGON:IX</a></p>
|
||||
</div>
|
||||
<div className="w-full md:w-[50%] p-4">
|
||||
<strong>최근 블로그 글</strong>
|
||||
<ul>
|
||||
{posts.map((post, index) => (
|
||||
<li key={index}>
|
||||
<a href={post.link}>{post.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex items-start justify-center flex-col px-6 w-full">
|
||||
<div className="flex flex-col font-semibold text-xl">
|
||||
<h1>항상 <strong className="font-black">새로운 것</strong>을 찾는</h1>
|
||||
<h1>학생 개발자 남현석입니다.</h1>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h1>In South Korea : <span className="tnum">{time}</span></h1>
|
||||
<h1>최근 블로그 보기 : <a href={post.link}>{post.title}</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
43
src/components/Home/AboutOld.tsx
Normal file
43
src/components/Home/AboutOld.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function About() {
|
||||
const [posts, setPosts] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("https://api.imnya.ng/rss", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data) {
|
||||
setPosts(data.slice(0, 3));
|
||||
} else {
|
||||
console.error("Error: data is undefined");
|
||||
}
|
||||
})
|
||||
.catch(error => console.error("Error fetching posts:", error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="w-full h-screen flex flex-col items-center justify-center">
|
||||
<div className="w-full md:w-[50%] p-4">
|
||||
<h1 className="text-2xl font-bold">🤔 About</h1>
|
||||
<p className="mt-2">안녕하세요! 저는 암냥이라는 이름으로 활동하고 있는 학생 개발자 남현석입니다.</p>
|
||||
<p>With <a href="https://sqlare.com">Sqlare</a>, <a href="https://team.orygonix.com">TEAM. ORYGON:IX</a></p>
|
||||
</div>
|
||||
<div className="w-full md:w-[50%] p-4">
|
||||
<strong>최근 블로그 글</strong>
|
||||
<ul>
|
||||
{posts.map((post, index) => (
|
||||
<li key={index}>
|
||||
<a href={post.link}>{post.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/flag_kr.svg
Normal file
27
src/flag_kr.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<svg width="64" height="43" viewBox="0 0 64 43" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_296_26" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="43">
|
||||
<path d="M64 0H0V42.6667H64V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_296_26)">
|
||||
<path d="M0 5.00001C0 2.23858 2.23858 0 5 0H59C61.7614 0 64 2.23858 64 5V37.6667C64 40.4281 61.7614 42.6667 59 42.6667H5C2.23858 42.6667 0 40.4281 0 37.6667V5.00001Z" fill="white"/>
|
||||
<path d="M23.125 15.4168C24.6943 13.063 27.1344 11.4289 29.9083 10.8742C32.6824 10.3194 35.5632 10.8893 37.9171 12.4586C40.2709 14.0278 41.9051 16.4678 42.4597 19.242C43.0144 22.0158 42.4445 24.8966 40.8752 27.2505L23.125 15.4168Z" fill="#D0303C"/>
|
||||
<path d="M23.1246 15.417C21.5553 17.7708 20.9854 20.6516 21.5402 23.4257C22.0949 26.1996 23.729 28.6396 26.0828 30.2089C28.4367 31.7783 31.3175 32.3481 34.0916 31.7935C36.8655 31.2385 39.3055 29.6047 40.8748 27.2508C41.6593 26.0737 41.9444 24.6335 41.6671 23.2465C41.3897 21.8593 40.5727 20.6393 39.3956 19.8548C38.2188 19.0703 36.7783 18.7852 35.3913 19.0625C34.0044 19.3399 32.7844 20.1569 31.9996 21.334L23.1246 15.417Z" fill="#134A9D"/>
|
||||
<path d="M32.001 21.3344C33.6349 18.8835 32.9727 15.5722 30.5218 13.9383C28.0711 12.3044 24.7597 12.9666 23.1258 15.4174C21.4919 17.8683 22.1541 21.1795 24.6049 22.8133C27.0556 24.4472 30.3671 23.7851 32.001 21.3344Z" fill="#D0303C"/>
|
||||
<path d="M9.8125 12.9504L15.7293 4.0752L17.2085 5.06133L11.2917 13.9365L9.8125 12.9504ZM12.0313 14.4296L17.9481 5.5544L19.4273 6.54053L13.5105 15.4157L12.0313 14.4296ZM14.2501 15.9088L20.1669 7.0336L21.6461 8.01973L15.7293 16.8949L14.2501 15.9088Z" fill="black"/>
|
||||
<path d="M51.4763 33.7834L54.188 29.7156L52.7088 28.7295L49.9971 32.7972L51.4763 33.7834Z" fill="black"/>
|
||||
<path d="M49.2575 32.3039L51.9693 28.2361L50.4901 27.25L47.7783 31.3177L49.2575 32.3039Z" fill="black"/>
|
||||
<path d="M47.2852 32.0576L48.7644 33.0438L46.0524 37.1117L44.5732 36.1256L47.2852 32.0576Z" fill="black"/>
|
||||
<path d="M47.0388 30.8244L49.7505 26.7566L48.2713 25.7705L45.5596 29.8382L47.0388 30.8244Z" fill="black"/>
|
||||
<path d="M45.0665 30.5781L46.5457 31.5643L43.8337 35.6323L42.3545 34.6461L45.0665 30.5781Z" fill="black"/>
|
||||
<path d="M49.504 33.5361L50.9832 34.5223L48.2712 38.5903L46.792 37.6041L49.504 33.5361Z" fill="black"/>
|
||||
<path d="M46.5457 11.1021L43.8337 7.03418L42.3545 8.02031L45.0665 12.0883L46.5457 11.1021Z" fill="black"/>
|
||||
<path d="M45.5596 12.827L48.2713 16.8946L49.7505 15.9085L47.0388 11.8408L45.5596 12.827Z" fill="black"/>
|
||||
<path d="M50.49 15.416L44.5732 6.54082L46.0524 5.55469L51.9692 14.4299L50.49 15.416Z" fill="black"/>
|
||||
<path d="M52.7088 13.9367L49.9971 9.86895L51.4763 8.88281L54.188 12.9505L52.7088 13.9367Z" fill="black"/>
|
||||
<path d="M50.9832 8.14306L49.504 9.12919L46.792 5.06133L48.2712 4.0752L50.9832 8.14306Z" fill="black"/>
|
||||
<path d="M9.8125 29.7156L15.7293 38.5908L17.2085 37.6047L11.2917 28.7295L9.8125 29.7156Z" fill="black"/>
|
||||
<path d="M15.2373 33.0437L17.9491 37.1115L19.4283 36.1254L16.7165 32.0576L15.2373 33.0437Z" fill="black"/>
|
||||
<path d="M14.7431 32.3039L16.2223 31.3177L13.5104 27.25L12.0312 28.2361L14.7431 32.3039Z" fill="black"/>
|
||||
<path d="M14.25 26.7566L20.1668 35.6318L21.646 34.6457L15.7292 25.7705L14.25 26.7566Z" fill="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue