update: skills 반응형

README.md

@@ -1,13 +1,17 @@
 # jm-portfolio
+
 프론트엔드 개발자 포트폴리오 웹사이트입니다
 
 ## 📝 개요
+
 React와 Next.js를 활용한 개인 포트폴리오 사이트로, 프로젝트 경험과 기술 스택을 소개합니다.
 
 ## 🔗 배포 링크
+
 웹사이트: https://jaemin-s.github.io
 
 ## 🛠 기술 스택
+
 - Framework: React, Next.js
 - Language: TypeScript
 - Styling: TailwindCSS
@@ -16,6 +20,7 @@ React와 Next.js를 활용한 개인 포트폴리오 사이트로, 프로젝트
 - Deployment: GitHub Pages
 
 ## 📌 실행 방법
+
 ```
 # Install dependencies
 yarn install
@@ -28,6 +33,7 @@ yarn build
 ```
 
 ## 📊 프로젝트 구조
+
 ```
 app/
 ├── presentation/           # UI 계층
@@ -56,9 +62,12 @@ app/
 ```
 
 ## 참고 링크
+
 기술스택 이미지 : https://simpleicons.org/
+기술스택 뱃지 : https://shields.io/badges
 아이콘 이미지 : https://fonts.google.com/icons
 
 ## ✏️ 개선 사항
+
+-
 -
-- 

app/data/repositories/SkillRepositoryImpl.ts

@@ -0,0 +1,87 @@
+import { SkillCategory } from '@/app/domain/entities/skill.entity'
+import { SkillRepository } from '@/app/domain/repositories/skill.repo'
+
+export class SkillRepositoryImpl implements SkillRepository {
+  /*
+  Languages :  TypeScript, JavaScript, HTML, CSS,  Kotlin, 
+  Frameworks : React, Next.js, React Native, Android, Jetpack Compose
+  State Management : Redux, Recoil, Zustand, Context API, React Query
+  Styling : Styled-components, Tailwind CSS, Emotion
+  Testing : Jest, React Testing Library
+  DevOps : Webpack, Vite, Babel, npm, yarnm ESLint, Prettier, Husky, git, github, GitHub Actions, Vercel
+
+  Build Tools: Webpack, Vite, Babel
+  Package Manager: npm, yarn
+  Code Quality: ESLint, Prettier, Husky
+  Version Control: git, github
+  CI/CD: GitHub Actions, Vercel
+ */
+  private readonly mockData: SkillCategory[] = [
+    {
+      categoryName: 'Languages',
+      skillList: [
+        { name: 'TypeScript', color: '3178C6', logoName: 'typescript' },
+        { name: 'JavaScript', color: 'F7DF1E', logoName: 'javascript' },
+        { name: 'HTML', color: 'E34F26', logoName: 'html5' },
+        { name: 'CSS', color: '1572B6', logoName: 'css3' },
+        { name: 'Kotlin', color: '7F52FF', logoName: 'kotlin' },
+      ],
+    },
+    {
+      categoryName: 'Frameworks',
+      skillList: [
+        { name: 'React', color: '61DAFB', logoName: 'react' },
+        { name: 'Next.js', color: '000000', logoName: 'nextdotjs' },
+        { name: 'React Native', color: '0088CC', logoName: 'react' },
+        { name: 'Android', color: '34A853', logoName: 'android' },
+        { name: 'Jetpack Compose', color: '4285F4', logoName: 'jetpackcompose' },
+      ],
+    },
+    {
+      categoryName: 'State',
+      skillList: [
+        { name: 'Redux', color: '764ABC', logoName: 'redux' },
+        { name: 'Recoil', color: '3578E5', logoName: 'recoil' },
+        { name: 'Zustand', color: '', logoName: '' },
+        { name: 'Context API', color: '0088CC', logoName: 'react' },
+        { name: 'React Query', color: 'FF4154', logoName: 'reactquery' },
+      ],
+    },
+    {
+      categoryName: 'Styling',
+      skillList: [
+        { name: 'StyledComponents', color: 'DB7093', logoName: 'styledcomponents' },
+        { name: 'Tailwind CSS', color: '06B6D4', logoName: 'tailwindcss' },
+        { name: 'Emotion', color: '', logoName: '' },
+      ],
+    },
+    {
+      categoryName: 'Testing',
+      skillList: [
+        { name: 'Jest', color: 'C21325', logoName: 'jest' },
+        { name: 'React Testing Library', color: '', logoName: '' },
+      ],
+    },
+    {
+      categoryName: 'DevOps',
+      skillList: [
+        { name: 'Vite', color: '646CFF', logoName: 'vite' },
+        { name: 'Webpack', color: '8DD6F9', logoName: 'webpack' },
+        { name: 'npm', color: 'CB3837', logoName: 'npm' },
+        { name: 'Yarn', color: '2C8EBB', logoName: 'yarn' },
+        { name: 'Vercel', color: '000000', logoName: 'vercel' },
+        { name: 'Git', color: 'F05032', logoName: 'git' },
+        { name: 'Github', color: '181717', logoName: 'github' },
+        { name: 'Github Actions', color: '2088FF', logoName: 'githubactions' },
+        { name: 'Husky', color: '', logoName: '' },
+        { name: 'Slack', color: '4A154B', logoName: 'slack' },
+      ],
+    },
+  ]
+
+  async getSkillCategories(): Promise<SkillCategory[]> {
+    //API 처럼 지연
+    await new Promise((resolve) => setTimeout(resolve, 200))
+    return this.mockData
+  }
+}

app/data/repositories/index.ts

@@ -0,0 +1,3 @@
+import { SkillRepositoryImpl } from './SkillRepositoryImpl'
+
+export const skillRepository = new SkillRepositoryImpl()

app/domain/entities/skill.entity.ts

@@ -0,0 +1,10 @@
+export interface SkillCategory {
+  categoryName: string
+  skillList: Array<Skill>
+}
+
+export interface Skill {
+  name: string
+  color: string
+  logoName: string
+}

app/domain/repositories/skill.repo.ts

@@ -0,0 +1,5 @@
+import { SkillCategory } from '../entities/skill.entity'
+
+export interface SkillRepository {
+  getSkillCategories(): Promise<SkillCategory[]>
+}

app/presentation/component/ParallaxContainer.tsx

@@ -8,7 +8,7 @@ interface ParallaxProps {
 const ParallaxContainer: React.FC<ParallaxProps> = ({ children, imgSrc }) => {
   return (
     <section
-      className={'h-screen bg-cover relative parallaxGradient '}
+      className={'min-h-screen h-fit py-4 bg-cover relative parallaxGradient flex items-center justify-center'}
       style={{ backgroundImage: `url('${imgSrc}')`, backgroundAttachment: 'fixed' }}
     >
       {children}

app/presentation/component/article/Skills.tsx

@@ -1,12 +1,21 @@
 import React from 'react'
 import ArticleHeader from '../text/ArticleHeader'
+import SkillCategoryComponent from '../section/SkillCategory'
+import { skillRepository } from '@/app/data/repositories'
+
+const Skills = async () => {
+  const skillCategoryList = await skillRepository.getSkillCategories()
 
-const Skills = () => {
   return (
-    <div className='h-full flex flex-col items-center justify-center'>
-        <ArticleHeader str='SKILLS' color='#000000'/>
+    <div className="min-h-full h-fit flex flex-col items-center justify-center">
+      <ArticleHeader str="SKILLS" color="#000000" />
+      <section className="flex flex-col gap-8">
+        {skillCategoryList.map((item) => (
+          <SkillCategoryComponent key={item.categoryName} categoryName={item.categoryName} skillList={item.skillList} />
+        ))}
+      </section>
     </div>
   )
 }
 
-export default Skills
+export default Skills

app/presentation/component/section/SkillCategory.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import SubHeaderText from '../text/SubHeaderText'
+import { Skill, SkillCategory } from '@/app/domain/entities/skill.entity'
+
+const SkillCategoryComponent = ({ categoryName, skillList }: SkillCategory) => {
+  function getLogoUrl(item: Skill) {
+    const baseUrl = 'https://img.shields.io/badge/'
+    const param = !!item.logoName
+      ? `${item.name}-${item.color}?style=flat-square&logo=${item.logoName}&logoColor=ffffff`
+      : `${item.name}-444444?style=flat-square`
+    return baseUrl + param
+  }
+
+  return (
+    <section className="flex flex-col md:flex-row gap-6">
+      <div className="w-36">
+        <SubHeaderText str={categoryName} />
+      </div>
+      <div className="flex flex-wrap gap-2 w-80 md:w-[36rem]">
+        {skillList.map((item) => (
+          <img className="h-7" alt="Static Badge" key={item.name} src={getLogoUrl(item)} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default SkillCategoryComponent