Skip to content

[FEATURE] DSL을 정의해서 사용하는건 어떤가요? #442

@10tacion

Description

@10tacion

🌴 작업 브랜치

💼 TASK 개요

  • 현재 공홈에서는 매기수마다 색상, 문구등의 간단한 데이터만 수정하는 작업을 하고있어요. DSL을 정의해서 사용하면 프론트에서 작업할 필요없이 json 데이터를 이용해서 UI 조작이 가능해요. 이로인해서 생산성이 증가할수있을것 같아요
  • 앞으로를 바라봤을 때 이런식으로 사용하는것도 나쁘지 않을것 같은데 어떻게 생각하시나요?

아래는 예시에요.

{
  "type": "Page",
  "props": {
    "theme": "dark"
  },
  "children": [
    {
      "type": "Header",
      "props": {
        "logo": "/icons/img/og_playground.jpeg",
        "navItems": [
          { "label": "소개", "href": "/intro" },
          { "label": "회원가입", "href": "/auth/verify" },
          { "label": "로그인", "href": "/auth/login" }
        ]
      }
    },
    {
      "type": "Hero",
      "props": {
        "title": "SOPT 구성원들과\n연결되는 경험",
        "subtitle": "솝트와 연결되고 싶으신가요?",
        "cta": {
          "text": "회원가입하고 구성원 보러가기",
          "href": "/auth/login"
        },
        "image": "value1.8c66bde1.png"
      }
    },
    {
      "type": "SectionList",
      "props": {
        "sections": [
          {
            "value": "Value 1.",
            "color": "#5DDBFF",
            "description": "역대 SOPT 구성원의 멤버 프로필을 둘러볼 수 있어요",
            "image": "value1.8c66bde1.png"
          },
          {
            "value": "Value 2.",
            "color": "#FF6E1D",
            "description": "SOPT에서 진행된 프로젝트들을 둘러볼 수 있어요",
            "image": "value1.8c66bde1.png"
          },
          {
            "value": "Value 3.",
            "color": "#FDBBF9",
            "description": "SOPT 활동 종료 후에도 다양한 모임에 참여할 수 있어요",
            "image": "value1.8c66bde1.png"
          },
          {
            "value": "Value 4.",
            "color": "#FFCA00",
            "description": "SOPT OB 구성원과 멘토링을 진행할 수 있어요",
           "image": "value1.8c66bde1.png"
          }
        ]
      }
    },
    {
      "type": "Footer",
      "props": {
        "copyright": "All rights reserved by",
        "logo": "https://makers.sopt.org",
        "logoImage": "value1.8c66bde1.png"
      }
    }
  ]
}

✅ TODO 및 진행현황

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions