Nexters · jiji-hoon96 · Nov 1, 2025 · Oct 23, 2025 · Oct 23, 2025 · Oct 25, 2025
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,54 @@
+# Profile - 불티 프로필 페이지
+
+사용자 프로필을 보여주는 웹 애플리케이션입니다.
+
+## URL 구조
+
+- 프로필 페이지: `https://profile.boolti.in/{username}`
+- 개발 서버: `https://profile.dev.boolti.in:8082/{username}`
+
+## 개발 서버 실행
+
+```bash
+# 루트 디렉토리에서
+yarn workspace profile dev
+
+# 또는 turbo 사용
+turbo dev --filter=profile
+```
+
+## 빌드
+
+```bash
+# 루트 디렉토리에서
+yarn workspace profile build
+
+# 또는 turbo 사용
+turbo build --filter=profile
+```
+
+## 기술 스택
+
+- React 18
+- TypeScript
+- Vite
+- Emotion (CSS-in-JS)
+- React Router v6
+- React Helmet Async
+
+## 사용하는 공통 패키지
+
+- `@boolti/ui`: 공통 UI 컴포넌트
+- `@boolti/api`: API 호출 로직
+- `@boolti/icon`: 아이콘 컴포넌트
+
+## 디렉토리 구조
+
+```
+src/
+├── components/       # 재사용 가능한 컴포넌트
+├── pages/           # 페이지 컴포넌트
+├── App.tsx          # 라우팅 설정
+├── main.tsx         # 앱 진입점
+└── index.css        # 전역 스타일
+```
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- SEO -->
+    <meta name="description" content="불티 프로필 페이지" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="불티" />
+    <meta property="og:title" content="불티 프로필" />
+    <meta property="og:description" content="불티 프로필 페이지" />
+    <meta property="og:image" content="https://profile.boolti.in/og-image.png" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="불티 프로필" />
+    <meta name="twitter:description" content="불티 프로필 페이지" />
+    <meta name="twitter:image" content="https://profile.boolti.in/og-image.png" />
+
+    <title>불티 프로필</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,40 @@
+{
+  "name": "profile",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "TIMING=1 eslint . --ext ts,tsx",
+    "lint:fix": "TIMING=1 eslint . --ext ts,tsx --fix",
+    "type-check": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.28.4",
+    "@boolti/api": "*",
+    "@boolti/icon": "*",
+    "@boolti/ui": "*",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@tanstack/react-query": "^5.90.5",
+    "date-fns": "^3.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
+    "react-router-dom": "^6.22.3",
+    "swiper": "^12.0.3",
+    "the-new-css-reset": "^1.11.2"
+  },
+  "devDependencies": {
+    "@boolti/eslint-config": "*",
+    "@boolti/typescript-config": "*",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
@@ -0,0 +1,55 @@
+import './index.css';
+import 'the-new-css-reset/css/reset.css';
+import 'swiper/css';
+
+import { BooltiUIProvider } from '@boolti/ui';
+import { QueryClientProvider } from '@boolti/api';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+
+import ProfilePage from './pages/ProfilePage';
+import NotFound from './components/NotFound';
+import { ProfilePastShowsPage } from './pages/ProfilePastShowsPage';
+import { ProfileVideosPage } from './pages/ProfileVideosPage';
+import { ProfileLinkPage } from './pages/ProfileLinkPage';
+import { Suspense } from 'react';
+
+const router = createBrowserRouter([
+  {
+    path: '/:userCode',
+    element: <ProfilePage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/:userCode/shows',
+    element: <ProfilePastShowsPage />,
+  },
+  {
+    path: '/:userCode/videos',
+    element: <ProfileVideosPage />,
+  },
+  {
+    path: '/:userCode/links',
+    element: <ProfileLinkPage />,
+  },
+  {
+    path: '/',
+    element: <NotFound />,
+  },
+]);
+
+const App = () => {
+  return (
+    <QueryClientProvider>
+      <BooltiUIProvider>
+        <HelmetProvider>
+          <Suspense fallback={null}>
+            <RouterProvider router={router} />
+          </Suspense>
+        </HelmetProvider>
+      </BooltiUIProvider>
+    </QueryClientProvider>
+  );
+};
+
+export default App;
@@ -0,0 +1,37 @@
+import { mq_lg } from '@boolti/ui';
+import styled from '@emotion/styled';
+
+const Header = styled.div<{ hasTitle: boolean }>`
+  height: 68px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  color: ${({ theme }) => theme.palette.grey.g10};
+  justify-content: ${({ hasTitle }) => (hasTitle ? 'space-between' : 'flex-end')};
+
+  ${mq_lg} {
+    padding: 0;
+  }
+`;
+
+const Left = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const BackButton = styled.button`
+  cursor: pointer;
+`;
+
+const HeaderTitle = styled.p`
+  ${({ theme }) => theme.typo.sh2};
+  color: ${({ theme }) => theme.palette.grey.g10};
+  margin-left: 12px;
+`;
+
+export default {
+  Header,
+  Left,
+  BackButton,
+  HeaderTitle,
+};