diff --git a/.agents/skills/playwright-cli/SKILL.md b/.agents/skills/playwright-cli/SKILL.md new file mode 100644 index 000000000..11bad2b87 --- /dev/null +++ b/.agents/skills/playwright-cli/SKILL.md @@ -0,0 +1,278 @@ +--- +name: playwright-cli +description: Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages. +allowed-tools: Bash(playwright-cli:*) +--- + +# Browser Automation with playwright-cli + +## Quick start + +```bash +# open new browser +playwright-cli open +# navigate to a page +playwright-cli goto https://playwright.dev +# interact with the page using refs from the snapshot +playwright-cli click e15 +playwright-cli type "page.click" +playwright-cli press Enter +# take a screenshot (rarely used, as snapshot is more common) +playwright-cli screenshot +# close the browser +playwright-cli close +``` + +## Commands + +### Core + +```bash +playwright-cli open +# open and navigate right away +playwright-cli open https://example.com/ +playwright-cli goto https://playwright.dev +playwright-cli type "search query" +playwright-cli click e3 +playwright-cli dblclick e7 +playwright-cli fill e5 "user@example.com" +playwright-cli drag e2 e8 +playwright-cli hover e4 +playwright-cli select e9 "option-value" +playwright-cli upload ./document.pdf +playwright-cli check e12 +playwright-cli uncheck e12 +playwright-cli snapshot +playwright-cli snapshot --filename=after-click.yaml +playwright-cli eval "document.title" +playwright-cli eval "el => el.textContent" e5 +playwright-cli dialog-accept +playwright-cli dialog-accept "confirmation text" +playwright-cli dialog-dismiss +playwright-cli resize 1920 1080 +playwright-cli close +``` + +### Navigation + +```bash +playwright-cli go-back +playwright-cli go-forward +playwright-cli reload +``` + +### Keyboard + +```bash +playwright-cli press Enter +playwright-cli press ArrowDown +playwright-cli keydown Shift +playwright-cli keyup Shift +``` + +### Mouse + +```bash +playwright-cli mousemove 150 300 +playwright-cli mousedown +playwright-cli mousedown right +playwright-cli mouseup +playwright-cli mouseup right +playwright-cli mousewheel 0 100 +``` + +### Save as + +```bash +playwright-cli screenshot +playwright-cli screenshot e5 +playwright-cli screenshot --filename=page.png +playwright-cli pdf --filename=page.pdf +``` + +### Tabs + +```bash +playwright-cli tab-list +playwright-cli tab-new +playwright-cli tab-new https://example.com/page +playwright-cli tab-close +playwright-cli tab-close 2 +playwright-cli tab-select 0 +``` + +### Storage + +```bash +playwright-cli state-save +playwright-cli state-save auth.json +playwright-cli state-load auth.json + +# Cookies +playwright-cli cookie-list +playwright-cli cookie-list --domain=example.com +playwright-cli cookie-get session_id +playwright-cli cookie-set session_id abc123 +playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure +playwright-cli cookie-delete session_id +playwright-cli cookie-clear + +# LocalStorage +playwright-cli localstorage-list +playwright-cli localstorage-get theme +playwright-cli localstorage-set theme dark +playwright-cli localstorage-delete theme +playwright-cli localstorage-clear + +# SessionStorage +playwright-cli sessionstorage-list +playwright-cli sessionstorage-get step +playwright-cli sessionstorage-set step 3 +playwright-cli sessionstorage-delete step +playwright-cli sessionstorage-clear +``` + +### Network + +```bash +playwright-cli route "**/*.jpg" --status=404 +playwright-cli route "https://api.example.com/**" --body='{"mock": true}' +playwright-cli route-list +playwright-cli unroute "**/*.jpg" +playwright-cli unroute +``` + +### DevTools + +```bash +playwright-cli console +playwright-cli console warning +playwright-cli network +playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])" +playwright-cli tracing-start +playwright-cli tracing-stop +playwright-cli video-start +playwright-cli video-stop video.webm +``` + +## Open parameters +```bash +# Use specific browser when creating session +playwright-cli open --browser=chrome +playwright-cli open --browser=firefox +playwright-cli open --browser=webkit +playwright-cli open --browser=msedge +# Connect to browser via extension +playwright-cli open --extension + +# Use persistent profile (by default profile is in-memory) +playwright-cli open --persistent +# Use persistent profile with custom directory +playwright-cli open --profile=/path/to/profile + +# Start with config file +playwright-cli open --config=my-config.json + +# Close the browser +playwright-cli close +# Delete user data for the default session +playwright-cli delete-data +``` + +## Snapshots + +After each command, playwright-cli provides a snapshot of the current browser state. + +```bash +> playwright-cli goto https://example.com +### Page +- Page URL: https://example.com/ +- Page Title: Example Domain +### Snapshot +[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml) +``` + +You can also take a snapshot on demand using `playwright-cli snapshot` command. + +If `--filename` is not provided, a new snapshot file is created with a timestamp. Default to automatic file naming, use `--filename=` when artifact is a part of the workflow result. + +## Browser Sessions + +```bash +# create new browser session named "mysession" with persistent profile +playwright-cli -s=mysession open example.com --persistent +# same with manually specified profile directory (use when requested explicitly) +playwright-cli -s=mysession open example.com --profile=/path/to/profile +playwright-cli -s=mysession click e6 +playwright-cli -s=mysession close # stop a named browser +playwright-cli -s=mysession delete-data # delete user data for persistent session + +playwright-cli list +# Close all browsers +playwright-cli close-all +# Forcefully kill all browser processes +playwright-cli kill-all +``` + +## Local installation + +In some cases user might want to install playwright-cli locally. If running globally available `playwright-cli` binary fails, use `npx playwright-cli` to run the commands. For example: + +```bash +npx playwright-cli open https://example.com +npx playwright-cli click e1 +``` + +## Example: Form submission + +```bash +playwright-cli open https://example.com/form +playwright-cli snapshot + +playwright-cli fill e1 "user@example.com" +playwright-cli fill e2 "password123" +playwright-cli click e3 +playwright-cli snapshot +playwright-cli close +``` + +## Example: Multi-tab workflow + +```bash +playwright-cli open https://example.com +playwright-cli tab-new https://example.com/other +playwright-cli tab-list +playwright-cli tab-select 0 +playwright-cli snapshot +playwright-cli close +``` + +## Example: Debugging with DevTools + +```bash +playwright-cli open https://example.com +playwright-cli click e4 +playwright-cli fill e7 "test" +playwright-cli console +playwright-cli network +playwright-cli close +``` + +```bash +playwright-cli open https://example.com +playwright-cli tracing-start +playwright-cli click e4 +playwright-cli fill e7 "test" +playwright-cli tracing-stop +playwright-cli close +``` + +## Specific tasks + +* **Request mocking** [references/request-mocking.md](references/request-mocking.md) +* **Running Playwright code** [references/running-code.md](references/running-code.md) +* **Browser session management** [references/session-management.md](references/session-management.md) +* **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md) +* **Test generation** [references/test-generation.md](references/test-generation.md) +* **Tracing** [references/tracing.md](references/tracing.md) +* **Video recording** [references/video-recording.md](references/video-recording.md) diff --git a/.agents/skills/playwright-cli/references/request-mocking.md b/.agents/skills/playwright-cli/references/request-mocking.md new file mode 100644 index 000000000..9005fda67 --- /dev/null +++ b/.agents/skills/playwright-cli/references/request-mocking.md @@ -0,0 +1,87 @@ +# Request Mocking + +Intercept, mock, modify, and block network requests. + +## CLI Route Commands + +```bash +# Mock with custom status +playwright-cli route "**/*.jpg" --status=404 + +# Mock with JSON body +playwright-cli route "**/api/users" --body='[{"id":1,"name":"Alice"}]' --content-type=application/json + +# Mock with custom headers +playwright-cli route "**/api/data" --body='{"ok":true}' --header="X-Custom: value" + +# Remove headers from requests +playwright-cli route "**/*" --remove-header=cookie,authorization + +# List active routes +playwright-cli route-list + +# Remove a route or all routes +playwright-cli unroute "**/*.jpg" +playwright-cli unroute +``` + +## URL Patterns + +``` +**/api/users - Exact path match +**/api/*/details - Wildcard in path +**/*.{png,jpg,jpeg} - Match file extensions +**/search?q=* - Match query parameters +``` + +## Advanced Mocking with run-code + +For conditional responses, request body inspection, response modification, or delays: + +### Conditional Response Based on Request + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/login', route => { + const body = route.request().postDataJSON(); + if (body.username === 'admin') { + route.fulfill({ body: JSON.stringify({ token: 'mock-token' }) }); + } else { + route.fulfill({ status: 401, body: JSON.stringify({ error: 'Invalid' }) }); + } + }); +}" +``` + +### Modify Real Response + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/user', async route => { + const response = await route.fetch(); + const json = await response.json(); + json.isPremium = true; + await route.fulfill({ response, json }); + }); +}" +``` + +### Simulate Network Failures + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/offline', route => route.abort('internetdisconnected')); +}" +# Options: connectionrefused, timedout, connectionreset, internetdisconnected +``` + +### Delayed Response + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/slow', async route => { + await new Promise(r => setTimeout(r, 3000)); + route.fulfill({ body: JSON.stringify({ data: 'loaded' }) }); + }); +}" +``` diff --git a/.agents/skills/playwright-cli/references/running-code.md b/.agents/skills/playwright-cli/references/running-code.md new file mode 100644 index 000000000..7d6d22fd0 --- /dev/null +++ b/.agents/skills/playwright-cli/references/running-code.md @@ -0,0 +1,232 @@ +# Running Custom Playwright Code + +Use `run-code` to execute arbitrary Playwright code for advanced scenarios not covered by CLI commands. + +## Syntax + +```bash +playwright-cli run-code "async page => { + // Your Playwright code here + // Access page.context() for browser context operations +}" +``` + +## Geolocation + +```bash +# Grant geolocation permission and set location +playwright-cli run-code "async page => { + await page.context().grantPermissions(['geolocation']); + await page.context().setGeolocation({ latitude: 37.7749, longitude: -122.4194 }); +}" + +# Set location to London +playwright-cli run-code "async page => { + await page.context().grantPermissions(['geolocation']); + await page.context().setGeolocation({ latitude: 51.5074, longitude: -0.1278 }); +}" + +# Clear geolocation override +playwright-cli run-code "async page => { + await page.context().clearPermissions(); +}" +``` + +## Permissions + +```bash +# Grant multiple permissions +playwright-cli run-code "async page => { + await page.context().grantPermissions([ + 'geolocation', + 'notifications', + 'camera', + 'microphone' + ]); +}" + +# Grant permissions for specific origin +playwright-cli run-code "async page => { + await page.context().grantPermissions(['clipboard-read'], { + origin: 'https://example.com' + }); +}" +``` + +## Media Emulation + +```bash +# Emulate dark color scheme +playwright-cli run-code "async page => { + await page.emulateMedia({ colorScheme: 'dark' }); +}" + +# Emulate light color scheme +playwright-cli run-code "async page => { + await page.emulateMedia({ colorScheme: 'light' }); +}" + +# Emulate reduced motion +playwright-cli run-code "async page => { + await page.emulateMedia({ reducedMotion: 'reduce' }); +}" + +# Emulate print media +playwright-cli run-code "async page => { + await page.emulateMedia({ media: 'print' }); +}" +``` + +## Wait Strategies + +```bash +# Wait for network idle +playwright-cli run-code "async page => { + await page.waitForLoadState('networkidle'); +}" + +# Wait for specific element +playwright-cli run-code "async page => { + await page.waitForSelector('.loading', { state: 'hidden' }); +}" + +# Wait for function to return true +playwright-cli run-code "async page => { + await page.waitForFunction(() => window.appReady === true); +}" + +# Wait with timeout +playwright-cli run-code "async page => { + await page.waitForSelector('.result', { timeout: 10000 }); +}" +``` + +## Frames and Iframes + +```bash +# Work with iframe +playwright-cli run-code "async page => { + const frame = page.locator('iframe#my-iframe').contentFrame(); + await frame.locator('button').click(); +}" + +# Get all frames +playwright-cli run-code "async page => { + const frames = page.frames(); + return frames.map(f => f.url()); +}" +``` + +## File Downloads + +```bash +# Handle file download +playwright-cli run-code "async page => { + const [download] = await Promise.all([ + page.waitForEvent('download'), + page.click('a.download-link') + ]); + await download.saveAs('./downloaded-file.pdf'); + return download.suggestedFilename(); +}" +``` + +## Clipboard + +```bash +# Read clipboard (requires permission) +playwright-cli run-code "async page => { + await page.context().grantPermissions(['clipboard-read']); + return await page.evaluate(() => navigator.clipboard.readText()); +}" + +# Write to clipboard +playwright-cli run-code "async page => { + await page.evaluate(text => navigator.clipboard.writeText(text), 'Hello clipboard!'); +}" +``` + +## Page Information + +```bash +# Get page title +playwright-cli run-code "async page => { + return await page.title(); +}" + +# Get current URL +playwright-cli run-code "async page => { + return page.url(); +}" + +# Get page content +playwright-cli run-code "async page => { + return await page.content(); +}" + +# Get viewport size +playwright-cli run-code "async page => { + return page.viewportSize(); +}" +``` + +## JavaScript Execution + +```bash +# Execute JavaScript and return result +playwright-cli run-code "async page => { + return await page.evaluate(() => { + return { + userAgent: navigator.userAgent, + language: navigator.language, + cookiesEnabled: navigator.cookieEnabled + }; + }); +}" + +# Pass arguments to evaluate +playwright-cli run-code "async page => { + const multiplier = 5; + return await page.evaluate(m => document.querySelectorAll('li').length * m, multiplier); +}" +``` + +## Error Handling + +```bash +# Try-catch in run-code +playwright-cli run-code "async page => { + try { + await page.click('.maybe-missing', { timeout: 1000 }); + return 'clicked'; + } catch (e) { + return 'element not found'; + } +}" +``` + +## Complex Workflows + +```bash +# Login and save state +playwright-cli run-code "async page => { + await page.goto('https://example.com/login'); + await page.fill('input[name=email]', 'user@example.com'); + await page.fill('input[name=password]', 'secret'); + await page.click('button[type=submit]'); + await page.waitForURL('**/dashboard'); + await page.context().storageState({ path: 'auth.json' }); + return 'Login successful'; +}" + +# Scrape data from multiple pages +playwright-cli run-code "async page => { + const results = []; + for (let i = 1; i <= 3; i++) { + await page.goto(\`https://example.com/page/\${i}\`); + const items = await page.locator('.item').allTextContents(); + results.push(...items); + } + return results; +}" +``` diff --git a/.agents/skills/playwright-cli/references/session-management.md b/.agents/skills/playwright-cli/references/session-management.md new file mode 100644 index 000000000..fac96066c --- /dev/null +++ b/.agents/skills/playwright-cli/references/session-management.md @@ -0,0 +1,169 @@ +# Browser Session Management + +Run multiple isolated browser sessions concurrently with state persistence. + +## Named Browser Sessions + +Use `-s` flag to isolate browser contexts: + +```bash +# Browser 1: Authentication flow +playwright-cli -s=auth open https://app.example.com/login + +# Browser 2: Public browsing (separate cookies, storage) +playwright-cli -s=public open https://example.com + +# Commands are isolated by browser session +playwright-cli -s=auth fill e1 "user@example.com" +playwright-cli -s=public snapshot +``` + +## Browser Session Isolation Properties + +Each browser session has independent: +- Cookies +- LocalStorage / SessionStorage +- IndexedDB +- Cache +- Browsing history +- Open tabs + +## Browser Session Commands + +```bash +# List all browser sessions +playwright-cli list + +# Stop a browser session (close the browser) +playwright-cli close # stop the default browser +playwright-cli -s=mysession close # stop a named browser + +# Stop all browser sessions +playwright-cli close-all + +# Forcefully kill all daemon processes (for stale/zombie processes) +playwright-cli kill-all + +# Delete browser session user data (profile directory) +playwright-cli delete-data # delete default browser data +playwright-cli -s=mysession delete-data # delete named browser data +``` + +## Environment Variable + +Set a default browser session name via environment variable: + +```bash +export PLAYWRIGHT_CLI_SESSION="mysession" +playwright-cli open example.com # Uses "mysession" automatically +``` + +## Common Patterns + +### Concurrent Scraping + +```bash +#!/bin/bash +# Scrape multiple sites concurrently + +# Start all browsers +playwright-cli -s=site1 open https://site1.com & +playwright-cli -s=site2 open https://site2.com & +playwright-cli -s=site3 open https://site3.com & +wait + +# Take snapshots from each +playwright-cli -s=site1 snapshot +playwright-cli -s=site2 snapshot +playwright-cli -s=site3 snapshot + +# Cleanup +playwright-cli close-all +``` + +### A/B Testing Sessions + +```bash +# Test different user experiences +playwright-cli -s=variant-a open "https://app.com?variant=a" +playwright-cli -s=variant-b open "https://app.com?variant=b" + +# Compare +playwright-cli -s=variant-a screenshot +playwright-cli -s=variant-b screenshot +``` + +### Persistent Profile + +By default, browser profile is kept in memory only. Use `--persistent` flag on `open` to persist the browser profile to disk: + +```bash +# Use persistent profile (auto-generated location) +playwright-cli open https://example.com --persistent + +# Use persistent profile with custom directory +playwright-cli open https://example.com --profile=/path/to/profile +``` + +## Default Browser Session + +When `-s` is omitted, commands use the default browser session: + +```bash +# These use the same default browser session +playwright-cli open https://example.com +playwright-cli snapshot +playwright-cli close # Stops default browser +``` + +## Browser Session Configuration + +Configure a browser session with specific settings when opening: + +```bash +# Open with config file +playwright-cli open https://example.com --config=.playwright/my-cli.json + +# Open with specific browser +playwright-cli open https://example.com --browser=firefox + +# Open in headed mode +playwright-cli open https://example.com --headed + +# Open with persistent profile +playwright-cli open https://example.com --persistent +``` + +## Best Practices + +### 1. Name Browser Sessions Semantically + +```bash +# GOOD: Clear purpose +playwright-cli -s=github-auth open https://github.com +playwright-cli -s=docs-scrape open https://docs.example.com + +# AVOID: Generic names +playwright-cli -s=s1 open https://github.com +``` + +### 2. Always Clean Up + +```bash +# Stop browsers when done +playwright-cli -s=auth close +playwright-cli -s=scrape close + +# Or stop all at once +playwright-cli close-all + +# If browsers become unresponsive or zombie processes remain +playwright-cli kill-all +``` + +### 3. Delete Stale Browser Data + +```bash +# Remove old browser data to free disk space +playwright-cli -s=oldsession delete-data +``` diff --git a/.agents/skills/playwright-cli/references/storage-state.md b/.agents/skills/playwright-cli/references/storage-state.md new file mode 100644 index 000000000..c856db5e4 --- /dev/null +++ b/.agents/skills/playwright-cli/references/storage-state.md @@ -0,0 +1,275 @@ +# Storage Management + +Manage cookies, localStorage, sessionStorage, and browser storage state. + +## Storage State + +Save and restore complete browser state including cookies and storage. + +### Save Storage State + +```bash +# Save to auto-generated filename (storage-state-{timestamp}.json) +playwright-cli state-save + +# Save to specific filename +playwright-cli state-save my-auth-state.json +``` + +### Restore Storage State + +```bash +# Load storage state from file +playwright-cli state-load my-auth-state.json + +# Reload page to apply cookies +playwright-cli open https://example.com +``` + +### Storage State File Format + +The saved file contains: + +```json +{ + "cookies": [ + { + "name": "session_id", + "value": "abc123", + "domain": "example.com", + "path": "/", + "expires": 1735689600, + "httpOnly": true, + "secure": true, + "sameSite": "Lax" + } + ], + "origins": [ + { + "origin": "https://example.com", + "localStorage": [ + { "name": "theme", "value": "dark" }, + { "name": "user_id", "value": "12345" } + ] + } + ] +} +``` + +## Cookies + +### List All Cookies + +```bash +playwright-cli cookie-list +``` + +### Filter Cookies by Domain + +```bash +playwright-cli cookie-list --domain=example.com +``` + +### Filter Cookies by Path + +```bash +playwright-cli cookie-list --path=/api +``` + +### Get Specific Cookie + +```bash +playwright-cli cookie-get session_id +``` + +### Set a Cookie + +```bash +# Basic cookie +playwright-cli cookie-set session abc123 + +# Cookie with options +playwright-cli cookie-set session abc123 --domain=example.com --path=/ --httpOnly --secure --sameSite=Lax + +# Cookie with expiration (Unix timestamp) +playwright-cli cookie-set remember_me token123 --expires=1735689600 +``` + +### Delete a Cookie + +```bash +playwright-cli cookie-delete session_id +``` + +### Clear All Cookies + +```bash +playwright-cli cookie-clear +``` + +### Advanced: Multiple Cookies or Custom Options + +For complex scenarios like adding multiple cookies at once, use `run-code`: + +```bash +playwright-cli run-code "async page => { + await page.context().addCookies([ + { name: 'session_id', value: 'sess_abc123', domain: 'example.com', path: '/', httpOnly: true }, + { name: 'preferences', value: JSON.stringify({ theme: 'dark' }), domain: 'example.com', path: '/' } + ]); +}" +``` + +## Local Storage + +### List All localStorage Items + +```bash +playwright-cli localstorage-list +``` + +### Get Single Value + +```bash +playwright-cli localstorage-get token +``` + +### Set Value + +```bash +playwright-cli localstorage-set theme dark +``` + +### Set JSON Value + +```bash +playwright-cli localstorage-set user_settings '{"theme":"dark","language":"en"}' +``` + +### Delete Single Item + +```bash +playwright-cli localstorage-delete token +``` + +### Clear All localStorage + +```bash +playwright-cli localstorage-clear +``` + +### Advanced: Multiple Operations + +For complex scenarios like setting multiple values at once, use `run-code`: + +```bash +playwright-cli run-code "async page => { + await page.evaluate(() => { + localStorage.setItem('token', 'jwt_abc123'); + localStorage.setItem('user_id', '12345'); + localStorage.setItem('expires_at', Date.now() + 3600000); + }); +}" +``` + +## Session Storage + +### List All sessionStorage Items + +```bash +playwright-cli sessionstorage-list +``` + +### Get Single Value + +```bash +playwright-cli sessionstorage-get form_data +``` + +### Set Value + +```bash +playwright-cli sessionstorage-set step 3 +``` + +### Delete Single Item + +```bash +playwright-cli sessionstorage-delete step +``` + +### Clear sessionStorage + +```bash +playwright-cli sessionstorage-clear +``` + +## IndexedDB + +### List Databases + +```bash +playwright-cli run-code "async page => { + return await page.evaluate(async () => { + const databases = await indexedDB.databases(); + return databases; + }); +}" +``` + +### Delete Database + +```bash +playwright-cli run-code "async page => { + await page.evaluate(() => { + indexedDB.deleteDatabase('myDatabase'); + }); +}" +``` + +## Common Patterns + +### Authentication State Reuse + +```bash +# Step 1: Login and save state +playwright-cli open https://app.example.com/login +playwright-cli snapshot +playwright-cli fill e1 "user@example.com" +playwright-cli fill e2 "password123" +playwright-cli click e3 + +# Save the authenticated state +playwright-cli state-save auth.json + +# Step 2: Later, restore state and skip login +playwright-cli state-load auth.json +playwright-cli open https://app.example.com/dashboard +# Already logged in! +``` + +### Save and Restore Roundtrip + +```bash +# Set up authentication state +playwright-cli open https://example.com +playwright-cli eval "() => { document.cookie = 'session=abc123'; localStorage.setItem('user', 'john'); }" + +# Save state to file +playwright-cli state-save my-session.json + +# ... later, in a new session ... + +# Restore state +playwright-cli state-load my-session.json +playwright-cli open https://example.com +# Cookies and localStorage are restored! +``` + +## Security Notes + +- Never commit storage state files containing auth tokens +- Add `*.auth-state.json` to `.gitignore` +- Delete state files after automation completes +- Use environment variables for sensitive data +- By default, sessions run in-memory mode which is safer for sensitive operations diff --git a/.agents/skills/playwright-cli/references/test-generation.md b/.agents/skills/playwright-cli/references/test-generation.md new file mode 100644 index 000000000..7a09df387 --- /dev/null +++ b/.agents/skills/playwright-cli/references/test-generation.md @@ -0,0 +1,88 @@ +# Test Generation + +Generate Playwright test code automatically as you interact with the browser. + +## How It Works + +Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code. +This code appears in the output and can be copied directly into your test files. + +## Example Workflow + +```bash +# Start a session +playwright-cli open https://example.com/login + +# Take a snapshot to see elements +playwright-cli snapshot +# Output shows: e1 [textbox "Email"], e2 [textbox "Password"], e3 [button "Sign In"] + +# Fill form fields - generates code automatically +playwright-cli fill e1 "user@example.com" +# Ran Playwright code: +# await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); + +playwright-cli fill e2 "password123" +# Ran Playwright code: +# await page.getByRole('textbox', { name: 'Password' }).fill('password123'); + +playwright-cli click e3 +# Ran Playwright code: +# await page.getByRole('button', { name: 'Sign In' }).click(); +``` + +## Building a Test File + +Collect the generated code into a Playwright test: + +```typescript +import { test, expect } from '@playwright/test'; + +test('login flow', async ({ page }) => { + // Generated code from playwright-cli session: + await page.goto('https://example.com/login'); + await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); + await page.getByRole('textbox', { name: 'Password' }).fill('password123'); + await page.getByRole('button', { name: 'Sign In' }).click(); + + // Add assertions + await expect(page).toHaveURL(/.*dashboard/); +}); +``` + +## Best Practices + +### 1. Use Semantic Locators + +The generated code uses role-based locators when possible, which are more resilient: + +```typescript +// Generated (good - semantic) +await page.getByRole('button', { name: 'Submit' }).click(); + +// Avoid (fragile - CSS selectors) +await page.locator('#submit-btn').click(); +``` + +### 2. Explore Before Recording + +Take snapshots to understand the page structure before recording actions: + +```bash +playwright-cli open https://example.com +playwright-cli snapshot +# Review the element structure +playwright-cli click e5 +``` + +### 3. Add Assertions Manually + +Generated code captures actions but not assertions. Add expectations in your test: + +```typescript +// Generated action +await page.getByRole('button', { name: 'Submit' }).click(); + +// Manual assertion +await expect(page.getByText('Success')).toBeVisible(); +``` diff --git a/.agents/skills/playwright-cli/references/tracing.md b/.agents/skills/playwright-cli/references/tracing.md new file mode 100644 index 000000000..7ce7babbd --- /dev/null +++ b/.agents/skills/playwright-cli/references/tracing.md @@ -0,0 +1,139 @@ +# Tracing + +Capture detailed execution traces for debugging and analysis. Traces include DOM snapshots, screenshots, network activity, and console logs. + +## Basic Usage + +```bash +# Start trace recording +playwright-cli tracing-start + +# Perform actions +playwright-cli open https://example.com +playwright-cli click e1 +playwright-cli fill e2 "test" + +# Stop trace recording +playwright-cli tracing-stop +``` + +## Trace Output Files + +When you start tracing, Playwright creates a `traces/` directory with several files: + +### `trace-{timestamp}.trace` + +**Action log** - The main trace file containing: +- Every action performed (clicks, fills, navigations) +- DOM snapshots before and after each action +- Screenshots at each step +- Timing information +- Console messages +- Source locations + +### `trace-{timestamp}.network` + +**Network log** - Complete network activity: +- All HTTP requests and responses +- Request headers and bodies +- Response headers and bodies +- Timing (DNS, connect, TLS, TTFB, download) +- Resource sizes +- Failed requests and errors + +### `resources/` + +**Resources directory** - Cached resources: +- Images, fonts, stylesheets, scripts +- Response bodies for replay +- Assets needed to reconstruct page state + +## What Traces Capture + +| Category | Details | +|----------|---------| +| **Actions** | Clicks, fills, hovers, keyboard input, navigations | +| **DOM** | Full DOM snapshot before/after each action | +| **Screenshots** | Visual state at each step | +| **Network** | All requests, responses, headers, bodies, timing | +| **Console** | All console.log, warn, error messages | +| **Timing** | Precise timing for each operation | + +## Use Cases + +### Debugging Failed Actions + +```bash +playwright-cli tracing-start +playwright-cli open https://app.example.com + +# This click fails - why? +playwright-cli click e5 + +playwright-cli tracing-stop +# Open trace to see DOM state when click was attempted +``` + +### Analyzing Performance + +```bash +playwright-cli tracing-start +playwright-cli open https://slow-site.com +playwright-cli tracing-stop + +# View network waterfall to identify slow resources +``` + +### Capturing Evidence + +```bash +# Record a complete user flow for documentation +playwright-cli tracing-start + +playwright-cli open https://app.example.com/checkout +playwright-cli fill e1 "4111111111111111" +playwright-cli fill e2 "12/25" +playwright-cli fill e3 "123" +playwright-cli click e4 + +playwright-cli tracing-stop +# Trace shows exact sequence of events +``` + +## Trace vs Video vs Screenshot + +| Feature | Trace | Video | Screenshot | +|---------|-------|-------|------------| +| **Format** | .trace file | .webm video | .png/.jpeg image | +| **DOM inspection** | Yes | No | No | +| **Network details** | Yes | No | No | +| **Step-by-step replay** | Yes | Continuous | Single frame | +| **File size** | Medium | Large | Small | +| **Best for** | Debugging | Demos | Quick capture | + +## Best Practices + +### 1. Start Tracing Before the Problem + +```bash +# Trace the entire flow, not just the failing step +playwright-cli tracing-start +playwright-cli open https://example.com +# ... all steps leading to the issue ... +playwright-cli tracing-stop +``` + +### 2. Clean Up Old Traces + +Traces can consume significant disk space: + +```bash +# Remove traces older than 7 days +find .playwright-cli/traces -mtime +7 -delete +``` + +## Limitations + +- Traces add overhead to automation +- Large traces can consume significant disk space +- Some dynamic content may not replay perfectly diff --git a/.agents/skills/playwright-cli/references/video-recording.md b/.agents/skills/playwright-cli/references/video-recording.md new file mode 100644 index 000000000..38391b37a --- /dev/null +++ b/.agents/skills/playwright-cli/references/video-recording.md @@ -0,0 +1,43 @@ +# Video Recording + +Capture browser automation sessions as video for debugging, documentation, or verification. Produces WebM (VP8/VP9 codec). + +## Basic Recording + +```bash +# Start recording +playwright-cli video-start + +# Perform actions +playwright-cli open https://example.com +playwright-cli snapshot +playwright-cli click e1 +playwright-cli fill e2 "test input" + +# Stop and save +playwright-cli video-stop demo.webm +``` + +## Best Practices + +### 1. Use Descriptive Filenames + +```bash +# Include context in filename +playwright-cli video-stop recordings/login-flow-2024-01-15.webm +playwright-cli video-stop recordings/checkout-test-run-42.webm +``` + +## Tracing vs Video + +| Feature | Video | Tracing | +|---------|-------|---------| +| Output | WebM file | Trace file (viewable in Trace Viewer) | +| Shows | Visual recording | DOM snapshots, network, console, actions | +| Use case | Demos, documentation | Debugging, analysis | +| Size | Larger | Smaller | + +## Limitations + +- Recording adds slight overhead to automation +- Large recordings can consume significant disk space diff --git a/.claude/skills/playwright-cli b/.claude/skills/playwright-cli new file mode 120000 index 000000000..a5bb52293 --- /dev/null +++ b/.claude/skills/playwright-cli @@ -0,0 +1 @@ +../../.agents/skills/playwright-cli \ No newline at end of file diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml index 7838775c6..2d466baff 100644 --- a/.github/workflows/check.yml +++ b/.github/workflows/check.yml @@ -35,15 +35,39 @@ jobs: - name: Install Packages run: yarn install --immutable - - name: Check All + - name: Typecheck run: | set -o pipefail - yarn check | tee check.log + yarn typecheck 2>&1 | sed 's/\x1B\[[0-9;]*m//g' | tee typecheck.log + + - name: Lint + if: always() + run: | + set -o pipefail + yarn lint 2>&1 | sed 's/\x1B\[[0-9;]*m//g' | tee lint.log + + - name: Test + if: always() + run: | + set -o pipefail + yarn test:ci 2>&1 | sed 's/\x1B\[[0-9;]*m//g' | tee test.log - name: Print Summary if: always() run: | echo "## Check Result" >> $GITHUB_STEP_SUMMARY + + echo "### Typecheck" >> $GITHUB_STEP_SUMMARY + echo "\`\`\`" >> $GITHUB_STEP_SUMMARY + cat typecheck.log 2>/dev/null >> $GITHUB_STEP_SUMMARY || echo 'skipped' >> $GITHUB_STEP_SUMMARY + echo "\`\`\`" >> $GITHUB_STEP_SUMMARY + + echo "### Lint" >> $GITHUB_STEP_SUMMARY + echo "\`\`\`" >> $GITHUB_STEP_SUMMARY + cat lint.log 2>/dev/null >> $GITHUB_STEP_SUMMARY || echo 'skipped' >> $GITHUB_STEP_SUMMARY + echo "\`\`\`" >> $GITHUB_STEP_SUMMARY + + echo "### Test" >> $GITHUB_STEP_SUMMARY echo "\`\`\`" >> $GITHUB_STEP_SUMMARY - echo "$(cat check.log)" >> $GITHUB_STEP_SUMMARY + cat test.log 2>/dev/null >> $GITHUB_STEP_SUMMARY || echo 'skipped' >> $GITHUB_STEP_SUMMARY echo "\`\`\`" >> $GITHUB_STEP_SUMMARY diff --git a/.gitignore b/.gitignore index d9301268a..a619dcc87 100644 --- a/.gitignore +++ b/.gitignore @@ -54,4 +54,7 @@ next-env.d.ts packages/ui/dist/**/* # crew generated -apps/crew/src/__generated__/open-api-specification.json \ No newline at end of file +apps/crew/src/__generated__/open-api-specification.json + +# playwright +.playwright-cli \ No newline at end of file diff --git a/.lintstagedrc b/.lintstagedrc deleted file mode 100644 index e6f1510ef..000000000 --- a/.lintstagedrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "apps/crew/**/*.{ts,tsx}": ["eslint --fix", "yarn workspace crew typecheck"], - "apps/playground/**/*.{ts,tsx}": ["eslint --fix", "yarn workspace playground typecheck"], - "**/*.{ts,tsx,js,jsx,json,css,md}": "prettier --write --ignore-path .prettierignore" -} diff --git a/.lintstagedrc.js b/.lintstagedrc.js new file mode 100644 index 000000000..c65cd2f5e --- /dev/null +++ b/.lintstagedrc.js @@ -0,0 +1,5 @@ +module.exports = { + 'apps/crew/**/*.{ts,tsx}': ['eslint --fix', () => 'yarn typecheck --filter=crew'], + 'apps/playground/**/*.{ts,tsx}': ['eslint --fix', () => 'yarn typecheck --filter=playground'], + '**/*.{ts,tsx,js,jsx,json,css,md}': 'prettier --write --ignore-path .prettierignore', +}; diff --git a/apps/crew/next.config.js b/apps/crew/next.config.js index f46818f26..db3356609 100644 --- a/apps/crew/next.config.js +++ b/apps/crew/next.config.js @@ -5,6 +5,7 @@ const nextConfig = { output: 'export', reactStrictMode: true, swcMinify: true, + transpilePackages: ['@sopt/ui', '@sopt/constant'], webpack: (config) => { config.module.rules.push({ test: /\.svg$/, diff --git a/apps/crew/package.json b/apps/crew/package.json index 95d479182..01d21ce33 100644 --- a/apps/crew/package.json +++ b/apps/crew/package.json @@ -28,8 +28,8 @@ "@radix-ui/react-dropdown-menu": "^2.1.1", "@sentry/nextjs": "^7.0.0", "@sopt-makers/icons": "^1.1.0", - "@sopt-makers/playground-common": "^1.7.3", "@sopt-makers/ui": "^2.10.2", + "@sopt/constant": "workspace:*", "@sopt/ui": "workspace:*", "@stitches/react": "^1.2.8", "@suspensive/react": "^3.10.1", @@ -51,6 +51,7 @@ "devDependencies": { "@emotion/server": "^11.9.0", "@hookform/devtools": "^4.3.1", + "@sopt-makers/eslint-config": "workspace:^", "@types/react-mentions": "4.1.13", "@types/react-responsive": "^8.0.5", "openapi-typescript": "^6.3.9", diff --git a/apps/crew/src/domain/detail/Feed/FeedItem/index.tsx b/apps/crew/src/domain/detail/Feed/FeedItem/index.tsx index 9e0793d26..5a85d7bcf 100644 --- a/apps/crew/src/domain/detail/Feed/FeedItem/index.tsx +++ b/apps/crew/src/domain/detail/Feed/FeedItem/index.tsx @@ -8,8 +8,8 @@ import { AVATAR_MAX_LENGTH, CARD_TITLE_MAX_LENGTH } from '@constant/feed'; import { THUMBNAIL_IMAGE_INDEX } from '@constant/index'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { Flex } from '@shared/util/layout/Flex'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; -import { playgroundLink } from '@sopt-makers/playground-common'; import { fromNow } from '@util/dayjs'; import truncateText from '@util/truncateText'; import Link from 'next/link'; diff --git a/apps/crew/src/domain/detail/MeetingController/ProfileAnchor.tsx b/apps/crew/src/domain/detail/MeetingController/ProfileAnchor.tsx index 5ad4621a6..856392197 100644 --- a/apps/crew/src/domain/detail/MeetingController/ProfileAnchor.tsx +++ b/apps/crew/src/domain/detail/MeetingController/ProfileAnchor.tsx @@ -1,7 +1,7 @@ import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect'; import { playgroundURL } from '@constant/url'; +import { playgroundLink } from '@sopt/constant'; import { fontsObject } from '@sopt-makers/fonts'; -import { playgroundLink } from '@sopt-makers/playground-common'; import { styled } from 'stitches.config'; import { ampli } from '@/ampli'; diff --git a/apps/crew/src/domain/detail/MeetingController/index.tsx b/apps/crew/src/domain/detail/MeetingController/index.tsx index 3a9534097..fdc41f63e 100644 --- a/apps/crew/src/domain/detail/MeetingController/index.tsx +++ b/apps/crew/src/domain/detail/MeetingController/index.tsx @@ -17,7 +17,7 @@ import FlashAbout from '@domain/detail/MeetingController/FlashAbout'; import MeetingAbout from '@domain/detail/MeetingController/MeetingAbout'; import useModal from '@hook/useModal'; import DefaultModal from '@shared/modal/DefaultModal'; -import { playgroundLink } from '@sopt-makers/playground-common'; +import { playgroundLink } from '@sopt/constant'; import { useDialog } from '@sopt-makers/ui'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import type { AxiosResponse } from 'axios'; diff --git a/apps/crew/src/domain/mine/management/ManagementForGuest/ManagementListItemForGuest.tsx b/apps/crew/src/domain/mine/management/ManagementForGuest/ManagementListItemForGuest.tsx index a12e46601..a3b3a3d42 100644 --- a/apps/crew/src/domain/mine/management/ManagementForGuest/ManagementListItemForGuest.tsx +++ b/apps/crew/src/domain/mine/management/ManagementForGuest/ManagementListItemForGuest.tsx @@ -1,6 +1,6 @@ import type { GetMeetingMemberList } from '@api/meeting/type'; import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect'; -import { playgroundLink } from '@sopt-makers/playground-common'; +import { playgroundLink } from '@sopt/constant'; import dayjs from 'dayjs'; import { styled } from 'stitches.config'; diff --git a/apps/crew/src/shared/feed/FeedCommentViewer/FeedCommentViewer.tsx b/apps/crew/src/shared/feed/FeedCommentViewer/FeedCommentViewer.tsx index 84a12996d..79e257587 100644 --- a/apps/crew/src/shared/feed/FeedCommentViewer/FeedCommentViewer.tsx +++ b/apps/crew/src/shared/feed/FeedCommentViewer/FeedCommentViewer.tsx @@ -5,9 +5,9 @@ import ReCommentHoverIcon from '@assets/svg/Recomment_Hover_Icon.svg'; import Avatar from '@common/avatar/Avatar'; import { playgroundURL } from '@constant/url'; import { Menu } from '@headlessui/react'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fontsObject } from '@sopt-makers/fonts'; -import { playgroundLink } from '@sopt-makers/playground-common'; import { fromNow } from '@util/dayjs'; import MenuIcon from 'public/assets/svg/ic_menu.svg'; import LikeFillIcon from 'public/assets/svg/like_fill_in_comment.svg'; diff --git a/apps/crew/src/shared/feed/FeedPostViewer/FeedPostViewer.tsx b/apps/crew/src/shared/feed/FeedPostViewer/FeedPostViewer.tsx index 0068a58e0..38f1066e4 100644 --- a/apps/crew/src/shared/feed/FeedPostViewer/FeedPostViewer.tsx +++ b/apps/crew/src/shared/feed/FeedPostViewer/FeedPostViewer.tsx @@ -8,7 +8,7 @@ import { Menu } from '@headlessui/react'; import { useOverlay } from '@hook/useOverlay/Index'; import ImageCarouselModal from '@shared/modal/ImageCarouselModal'; import { parseTextToLink } from '@shared/util/parseTextToLink'; -import { playgroundLink } from '@sopt-makers/playground-common'; +import { playgroundLink } from '@sopt/constant'; import { useToast } from '@sopt-makers/ui'; import { fromNow } from '@util/dayjs'; import dayjs from 'dayjs'; diff --git a/apps/crew/src/shared/header/Header.tsx b/apps/crew/src/shared/header/Header.tsx index a67925ce3..acdf8242d 100644 --- a/apps/crew/src/shared/header/Header.tsx +++ b/apps/crew/src/shared/header/Header.tsx @@ -1,6 +1,7 @@ import { useUserProfileQueryOption } from '@api/user/query'; import { ACCESS_TOKEN_KEY } from '@shared/util/auth'; -import { DesktopHeader, MobileHeader, playgroundLink } from '@sopt-makers/playground-common'; +import { playgroundLink } from '@sopt/constant'; +import { DesktopHeader, MobileHeader } from '@sopt/ui'; import { useQuery } from '@tanstack/react-query'; import Link from 'next/link'; import type { FC, ReactNode } from 'react'; diff --git a/apps/crew/src/shared/util/auth.ts b/apps/crew/src/shared/util/auth.ts index 5da51799f..c6921a038 100644 --- a/apps/crew/src/shared/util/auth.ts +++ b/apps/crew/src/shared/util/auth.ts @@ -1,5 +1,5 @@ import { validateAuthToken } from '@api/auth'; -import { playgroundLink } from '@sopt-makers/playground-common'; +import { playgroundLink } from '@sopt/constant'; import { authToken } from '@/store/tokenStore'; diff --git a/apps/playground/next.config.js b/apps/playground/next.config.js index 02aebc642..cd4790ba3 100644 --- a/apps/playground/next.config.js +++ b/apps/playground/next.config.js @@ -10,6 +10,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({ const nextConfig = { output: 'export', reactStrictMode: true, + transpilePackages: ['@sopt/ui', '@sopt/constant'], // https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions pageExtensions: ['tsx', 'ts', 'jsx', 'js'], webpack: (config) => { @@ -45,9 +46,6 @@ const nextConfig = { experimental: { scrollRestoration: true, }, - eslint: { - dirs: ['api', 'components', 'constants', 'hooks', 'pages', 'styles', 'types', 'utils'], - }, // well-known 형식 파일 정상제공하도록 헤더 추가 async headers() { diff --git a/apps/playground/package.json b/apps/playground/package.json index 5b715e8e7..6f882d912 100644 --- a/apps/playground/package.json +++ b/apps/playground/package.json @@ -42,6 +42,7 @@ "@sopt-makers/fonts": "1.0.0", "@sopt-makers/icons": "^1.1.0", "@sopt-makers/ui": "2.8.9", + "@sopt/constant": "workspace:*", "@sopt/ui": "workspace:*", "@tanstack/react-query": "^5", "@tanstack/react-virtual": "^3.13.12", @@ -89,6 +90,7 @@ "@emotion/babel-preset-css-prop": "^11.11.0", "@mdx-js/react": "^1.6.22", "@next/bundle-analyzer": "^13.1.1", + "@sopt-makers/eslint-config": "workspace:^", "@storybook/addon-actions": "^7.6.20", "@storybook/addon-docs": "^7.6.20", "@storybook/addon-essentials": "^7.6.20", @@ -136,7 +138,6 @@ "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "^3.5.2", "tsup": "^7.1.0", - "typescript": "^4.9.5", "url-loader": "^4.1.1", "webpack": "^5.72.0", "wrangler": "^3.0.0" diff --git a/apps/playground/src/api/endpoint/coffeechat/editCoffeechat.ts b/apps/playground/src/api/endpoint/coffeechat/editCoffeechat.ts index 604853387..4d33206f9 100644 --- a/apps/playground/src/api/endpoint/coffeechat/editCoffeechat.ts +++ b/apps/playground/src/api/endpoint/coffeechat/editCoffeechat.ts @@ -1,7 +1,7 @@ import { z } from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; export const editCoffeechat = createEndpoint({ request: (requestBody: CoffeechatFormContent) => ({ diff --git a/apps/playground/src/api/endpoint/coffeechat/uploadCoffeechat.ts b/apps/playground/src/api/endpoint/coffeechat/uploadCoffeechat.ts index 6caf1c55e..94abbe3f0 100644 --- a/apps/playground/src/api/endpoint/coffeechat/uploadCoffeechat.ts +++ b/apps/playground/src/api/endpoint/coffeechat/uploadCoffeechat.ts @@ -1,7 +1,7 @@ import { z } from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; export const uploadCoffeechat = createEndpoint({ request: (reqeustBody: CoffeechatFormContent) => ({ diff --git a/apps/playground/src/api/endpoint/feed/commentLike.ts b/apps/playground/src/api/endpoint/feed/commentLike.ts index eeb646955..4841dcfe7 100644 --- a/apps/playground/src/api/endpoint/feed/commentLike.ts +++ b/apps/playground/src/api/endpoint/feed/commentLike.ts @@ -2,8 +2,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { produce } from 'immer'; import { z } from 'zod'; +import type { activeCommentSchemaWithReplies } from '@/api/endpoint/feed/getComment'; import { getComment } from '@/api/endpoint/feed/getComment'; -import { activeCommentSchemaWithReplies } from '@/api/endpoint/feed/getComment'; import { createEndpoint } from '@/api/typedAxios'; export const commentLike = createEndpoint({ request: (postId: number, commentId: number) => ({ diff --git a/apps/playground/src/api/endpoint/feed/editFeed.ts b/apps/playground/src/api/endpoint/feed/editFeed.ts index 967378fd2..c36947f18 100644 --- a/apps/playground/src/api/endpoint/feed/editFeed.ts +++ b/apps/playground/src/api/endpoint/feed/editFeed.ts @@ -1,7 +1,7 @@ import { z } from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { EditFeedDataType } from '@/components/feed/upload/types'; +import type { EditFeedDataType } from '@/components/feed/upload/types'; export const editFeed = createEndpoint({ request: (requestBody: EditFeedDataType) => ({ diff --git a/apps/playground/src/api/endpoint/feed/postLike.ts b/apps/playground/src/api/endpoint/feed/postLike.ts index 8eeadbe03..b0d62d5cd 100644 --- a/apps/playground/src/api/endpoint/feed/postLike.ts +++ b/apps/playground/src/api/endpoint/feed/postLike.ts @@ -1,10 +1,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { produce } from 'immer'; -import { Params } from 'next/dist/shared/lib/router/utils/route-matcher'; +import type { Params } from 'next/dist/shared/lib/router/utils/route-matcher'; import { z } from 'zod'; -import { PostType } from '@/api/endpoint/feed/getPost'; -import { PostsType } from '@/api/endpoint/feed/getPosts'; +import type { PostType } from '@/api/endpoint/feed/getPost'; +import type { PostsType } from '@/api/endpoint/feed/getPosts'; import { createEndpoint } from '@/api/typedAxios'; export const postLike = createEndpoint({ diff --git a/apps/playground/src/api/endpoint/feed/postVote.ts b/apps/playground/src/api/endpoint/feed/postVote.ts index 5caaa61b1..0cda09de7 100644 --- a/apps/playground/src/api/endpoint/feed/postVote.ts +++ b/apps/playground/src/api/endpoint/feed/postVote.ts @@ -1,10 +1,13 @@ -import { InfiniteData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import type { InfiniteData } from '@tanstack/react-query'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { produce } from 'immer'; import { z } from 'zod'; import { getCategory } from '@/api/endpoint/feed/getCategory'; -import { getPost, PostType } from '@/api/endpoint/feed/getPost'; -import { PostsType, useGetPostsInfiniteQuery } from '@/api/endpoint/feed/getPosts'; +import type { PostType } from '@/api/endpoint/feed/getPost'; +import { getPost } from '@/api/endpoint/feed/getPost'; +import type { PostsType } from '@/api/endpoint/feed/getPosts'; +import { useGetPostsInfiniteQuery } from '@/api/endpoint/feed/getPosts'; import { getRecentPosts } from '@/api/endpoint/feed/getRecentPosts'; import { createEndpoint } from '@/api/typedAxios'; import { getParentCategoryId } from '@/components/feed/common/utils'; diff --git a/apps/playground/src/api/endpoint/feed/uploadFeed.ts b/apps/playground/src/api/endpoint/feed/uploadFeed.ts index 5abd0162c..ebc61dcdb 100644 --- a/apps/playground/src/api/endpoint/feed/uploadFeed.ts +++ b/apps/playground/src/api/endpoint/feed/uploadFeed.ts @@ -1,7 +1,7 @@ import { z } from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { FeedDataType } from '@/components/feed/upload/types'; +import type { FeedDataType } from '@/components/feed/upload/types'; export const uploadFeed = createEndpoint({ request: (reqeustBody: FeedDataType) => ({ diff --git a/apps/playground/src/api/endpoint/members/postAnswerReaction.ts b/apps/playground/src/api/endpoint/members/postAnswerReaction.ts index bc76bce71..d1b01b8ec 100644 --- a/apps/playground/src/api/endpoint/members/postAnswerReaction.ts +++ b/apps/playground/src/api/endpoint/members/postAnswerReaction.ts @@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { produce } from 'immer'; import { z } from 'zod'; -import { GetMemberQuestionsResponse } from '@/api/endpoint/members/getMemberQuestions'; +import type { GetMemberQuestionsResponse } from '@/api/endpoint/members/getMemberQuestions'; import { createEndpoint } from '@/api/typedAxios'; /** diff --git a/apps/playground/src/api/endpoint/members/postQuestionReaction.ts b/apps/playground/src/api/endpoint/members/postQuestionReaction.ts index ffe820029..7839f0570 100644 --- a/apps/playground/src/api/endpoint/members/postQuestionReaction.ts +++ b/apps/playground/src/api/endpoint/members/postQuestionReaction.ts @@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { produce } from 'immer'; import { z } from 'zod'; -import { GetMemberQuestionsResponse } from '@/api/endpoint/members/getMemberQuestions'; +import type { GetMemberQuestionsResponse } from '@/api/endpoint/members/getMemberQuestions'; import { createEndpoint } from '@/api/typedAxios'; /** diff --git a/apps/playground/src/api/endpoint/members/postWorkPreference.ts b/apps/playground/src/api/endpoint/members/postWorkPreference.ts index 45084b04d..948a23797 100644 --- a/apps/playground/src/api/endpoint/members/postWorkPreference.ts +++ b/apps/playground/src/api/endpoint/members/postWorkPreference.ts @@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { z } from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { WorkPreferenceType } from '@/components/matchmember/constant'; +import type { WorkPreferenceType } from '@/components/matchmember/constant'; export const postWorkPreference = createEndpoint({ request: (requestBody: WorkPreferenceType) => ({ diff --git a/apps/playground/src/api/endpoint/members/putMemberActivityCheck.ts b/apps/playground/src/api/endpoint/members/putMemberActivityCheck.ts index cc9dd3893..baf7e9e19 100644 --- a/apps/playground/src/api/endpoint/members/putMemberActivityCheck.ts +++ b/apps/playground/src/api/endpoint/members/putMemberActivityCheck.ts @@ -1,5 +1,6 @@ -import { z } from 'zod'; import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { z } from 'zod'; + import { createEndpoint } from '@/api/typedAxios'; /** diff --git a/apps/playground/src/api/endpoint/members/putMemberProfile.ts b/apps/playground/src/api/endpoint/members/putMemberProfile.ts index b3a06066f..400157227 100644 --- a/apps/playground/src/api/endpoint/members/putMemberProfile.ts +++ b/apps/playground/src/api/endpoint/members/putMemberProfile.ts @@ -1,7 +1,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { z } from 'zod'; -import { ProfileRequest } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileRequest } from '@/api/endpoint_LEGACY/members/type'; import { createEndpoint } from '@/api/typedAxios'; /** diff --git a/apps/playground/src/api/endpoint/mySoptReport/getMyPGData.ts b/apps/playground/src/api/endpoint/mySoptReport/getMyPGData.ts index 10ca1f351..7bdbf55ce 100644 --- a/apps/playground/src/api/endpoint/mySoptReport/getMyPGData.ts +++ b/apps/playground/src/api/endpoint/mySoptReport/getMyPGData.ts @@ -1,7 +1,8 @@ -import { createEndpoint } from '@/api/typedAxios'; import { useQuery } from '@tanstack/react-query'; import { z } from 'zod'; +import { createEndpoint } from '@/api/typedAxios'; + const serverResponseScheme = z.object({ myType: z.string(), totalVisitCount: z.number(), diff --git a/apps/playground/src/api/endpoint/remember/getReviews.ts b/apps/playground/src/api/endpoint/remember/getReviews.ts index 7860c19c5..c6aac70c1 100644 --- a/apps/playground/src/api/endpoint/remember/getReviews.ts +++ b/apps/playground/src/api/endpoint/remember/getReviews.ts @@ -1,7 +1,7 @@ +import { useInfiniteQuery } from '@tanstack/react-query'; import { z } from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { useInfiniteQuery } from '@tanstack/react-query'; const ReviewSchema = z.object({ reviews: z.array( diff --git a/apps/playground/src/api/endpoint/remember/uploadReview.ts b/apps/playground/src/api/endpoint/remember/uploadReview.ts index 3ab70c2c0..134a4547e 100644 --- a/apps/playground/src/api/endpoint/remember/uploadReview.ts +++ b/apps/playground/src/api/endpoint/remember/uploadReview.ts @@ -1,7 +1,7 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { z } from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; interface RequestBody { content: string; diff --git a/apps/playground/src/api/endpoint/resolution/postResolution.ts b/apps/playground/src/api/endpoint/resolution/postResolution.ts index 6f58739c9..98657f329 100644 --- a/apps/playground/src/api/endpoint/resolution/postResolution.ts +++ b/apps/playground/src/api/endpoint/resolution/postResolution.ts @@ -3,7 +3,7 @@ import { useQueryClient } from '@tanstack/react-query'; import z from 'zod'; import { createEndpoint } from '@/api/typedAxios'; -import { TimecapsopTag } from '@/components/resolution/constants'; +import type { TimecapsopTag } from '@/components/resolution/constants'; export interface ResolutionRequestBody { content: string; diff --git a/apps/playground/src/api/endpoint/wordchain/getWordchain.ts b/apps/playground/src/api/endpoint/wordchain/getWordchain.ts index a0627e1ff..f4e54b213 100644 --- a/apps/playground/src/api/endpoint/wordchain/getWordchain.ts +++ b/apps/playground/src/api/endpoint/wordchain/getWordchain.ts @@ -1,16 +1,11 @@ -import { - QueryKey, - useInfiniteQuery, - UseInfiniteQueryOptions, - useQuery, - UseQueryOptions, - UseQueryResult, -} from '@tanstack/react-query'; +import type { QueryKey, UseInfiniteQueryOptions, UseQueryOptions, UseQueryResult } from '@tanstack/react-query'; +import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; import { z } from 'zod'; -import { createEndpoint, GetResponseType } from '@/api/typedAxios'; -import { ActiveWordchain, FinishedWordchain } from '@/components/wordchain/WordchainChatting/types'; -import { EntryWordchain } from '@/components/wordchain/WordchainEntry/types'; +import type { GetResponseType } from '@/api/typedAxios'; +import { createEndpoint } from '@/api/typedAxios'; +import type { ActiveWordchain, FinishedWordchain } from '@/components/wordchain/WordchainChatting/types'; +import type { EntryWordchain } from '@/components/wordchain/WordchainEntry/types'; const userSchema = z.object({ id: z.number(), diff --git a/apps/playground/src/api/endpoint/wordchain/postWord.ts b/apps/playground/src/api/endpoint/wordchain/postWord.ts index 256b4da91..daa1af2df 100644 --- a/apps/playground/src/api/endpoint/wordchain/postWord.ts +++ b/apps/playground/src/api/endpoint/wordchain/postWord.ts @@ -1,8 +1,10 @@ -import { useMutation, UseMutationOptions } from '@tanstack/react-query'; -import { AxiosError } from 'axios'; +import type { UseMutationOptions } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; +import type { AxiosError } from 'axios'; import { z } from 'zod'; -import { createEndpoint, GetResponseType } from '@/api/typedAxios'; +import type { GetResponseType } from '@/api/typedAxios'; +import { createEndpoint } from '@/api/typedAxios'; export const postWord = createEndpoint({ request: (wordchainId: number, word: string) => ({ diff --git a/apps/playground/src/api/endpoint_LEGACY/hooks/members.ts b/apps/playground/src/api/endpoint_LEGACY/hooks/members.ts index 892404b1f..12684f2dd 100644 --- a/apps/playground/src/api/endpoint_LEGACY/hooks/members.ts +++ b/apps/playground/src/api/endpoint_LEGACY/hooks/members.ts @@ -1,9 +1,10 @@ -import { useMutation, useQuery, UseQueryOptions } from '@tanstack/react-query'; -import { AxiosError } from 'axios'; +import type { UseQueryOptions } from '@tanstack/react-query'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import type { AxiosError } from 'axios'; import { getMembersSearchByName } from '@/api/endpoint/members/getMembersSearchByName'; import { getMemberProfileById, getMemberProfileOfMe, postMemberMessage } from '@/api/endpoint_LEGACY/members'; -import { PostMemberMessageVariables, ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; +import type { PostMemberMessageVariables, ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; // 멤버 프로필 조회 export const useGetMemberProfileById = ( diff --git a/apps/playground/src/api/endpoint_LEGACY/makers/index.ts b/apps/playground/src/api/endpoint_LEGACY/makers/index.ts index 06b62fc4f..6a0be3274 100644 --- a/apps/playground/src/api/endpoint_LEGACY/makers/index.ts +++ b/apps/playground/src/api/endpoint_LEGACY/makers/index.ts @@ -1,5 +1,5 @@ import { axiosInstance } from '@/api'; -import { Maker } from '@/api/endpoint_LEGACY/makers/types'; +import type { Maker } from '@/api/endpoint_LEGACY/makers/types'; export const getMakersProfile = async () => { const { data } = await axiosInstance.request({ diff --git a/apps/playground/src/api/endpoint_LEGACY/members/index.ts b/apps/playground/src/api/endpoint_LEGACY/members/index.ts index ef137e2d2..3ac50208d 100644 --- a/apps/playground/src/api/endpoint_LEGACY/members/index.ts +++ b/apps/playground/src/api/endpoint_LEGACY/members/index.ts @@ -1,5 +1,5 @@ import { axiosInstance } from '@/api'; -import { +import type { Member, PagedMemberProfile, PostMemberMessageVariables, diff --git a/apps/playground/src/api/endpoint_LEGACY/members/type.ts b/apps/playground/src/api/endpoint_LEGACY/members/type.ts index c2e623716..e7249c990 100644 --- a/apps/playground/src/api/endpoint_LEGACY/members/type.ts +++ b/apps/playground/src/api/endpoint_LEGACY/members/type.ts @@ -1,5 +1,5 @@ -import { ProjectCategory } from '@/api/endpoint_LEGACY/projects/type'; -import { ServiceType } from '@/components/projects/types'; +import type { ProjectCategory } from '@/api/endpoint_LEGACY/projects/type'; +import type { ServiceType } from '@/components/projects/types'; export type Profile = { id: number; diff --git a/apps/playground/src/api/endpoint_LEGACY/projects/index.ts b/apps/playground/src/api/endpoint_LEGACY/projects/index.ts index cfe9a500d..2f27da951 100644 --- a/apps/playground/src/api/endpoint_LEGACY/projects/index.ts +++ b/apps/playground/src/api/endpoint_LEGACY/projects/index.ts @@ -1,7 +1,7 @@ import { QS } from '@toss/utils'; import { axiosInstance } from '@/api'; -import { +import type { ProjectDetail, ProjectInput, ProjectListResponse, diff --git a/apps/playground/src/api/index.ts b/apps/playground/src/api/index.ts index 285bfe3ad..031ff63b3 100644 --- a/apps/playground/src/api/index.ts +++ b/apps/playground/src/api/index.ts @@ -1,4 +1,5 @@ -import axios, { AxiosError, AxiosHeaders } from 'axios'; +import type { AxiosError } from 'axios'; +import axios, { AxiosHeaders } from 'axios'; import { tokenStorage } from '@/components/auth/util/accessToken'; import { ADMIN_API_KEY, ADMIN_API_URL, API_URL, AUTH_API_URL, CREW_API_URL, OPERATION_API_URL } from '@/constants/env'; diff --git a/apps/playground/src/api/typedAxios.ts b/apps/playground/src/api/typedAxios.ts index 97d42d370..3afbd05cc 100644 --- a/apps/playground/src/api/typedAxios.ts +++ b/apps/playground/src/api/typedAxios.ts @@ -1,5 +1,5 @@ -import { AxiosRequestConfig } from 'axios'; -import { z } from 'zod'; +import type { AxiosRequestConfig } from 'axios'; +import type { z } from 'zod'; import { axiosInstance } from '@/api'; import { DEBUG } from '@/constants/env'; diff --git a/apps/playground/src/components/auth/AuthRequired.tsx b/apps/playground/src/components/auth/AuthRequired.tsx index f89da7aa5..bb5f852b0 100644 --- a/apps/playground/src/components/auth/AuthRequired.tsx +++ b/apps/playground/src/components/auth/AuthRequired.tsx @@ -1,5 +1,6 @@ import { useRouter } from 'next/router'; -import { FC, ReactNode, useCallback, useEffect, useRef } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { tokenStorage } from '@/components/auth/util/accessToken'; import useLastUnauthorized from '@/components/auth/util/useLastUnauthorized'; diff --git a/apps/playground/src/components/auth/callback/LoginCallbackView.stories.tsx b/apps/playground/src/components/auth/callback/LoginCallbackView.stories.tsx index d0519b689..93176481f 100644 --- a/apps/playground/src/components/auth/callback/LoginCallbackView.stories.tsx +++ b/apps/playground/src/components/auth/callback/LoginCallbackView.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import LoginCallbackView from '@/components/auth/callback/LoginCallbackView'; diff --git a/apps/playground/src/components/auth/callback/LoginCallbackView.tsx b/apps/playground/src/components/auth/callback/LoginCallbackView.tsx index 68c1a9b23..24befd1e3 100644 --- a/apps/playground/src/components/auth/callback/LoginCallbackView.tsx +++ b/apps/playground/src/components/auth/callback/LoginCallbackView.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import Loading from '@/components/common/Loading'; import { playgroundLink } from '@/constants/links'; diff --git a/apps/playground/src/components/auth/callback/OAuthLoginCallback.tsx b/apps/playground/src/components/auth/callback/OAuthLoginCallback.tsx index c0a5be594..629f90ebe 100644 --- a/apps/playground/src/components/auth/callback/OAuthLoginCallback.tsx +++ b/apps/playground/src/components/auth/callback/OAuthLoginCallback.tsx @@ -1,5 +1,6 @@ import { useQuery } from '@tanstack/react-query'; -import { FC, useEffect, useRef, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useSetRecoilState } from 'recoil'; import LoginCallbackView from '@/components/auth/callback/LoginCallbackView'; diff --git a/apps/playground/src/components/auth/identityProvider/apple/AppleAuthButton.tsx b/apps/playground/src/components/auth/identityProvider/apple/AppleAuthButton.tsx index b845d76dd..6b1946dd3 100644 --- a/apps/playground/src/components/auth/identityProvider/apple/AppleAuthButton.tsx +++ b/apps/playground/src/components/auth/identityProvider/apple/AppleAuthButton.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/auth/identityProvider/facebook/FacebookButton.tsx b/apps/playground/src/components/auth/identityProvider/facebook/FacebookButton.tsx index bb392f633..e5168596a 100644 --- a/apps/playground/src/components/auth/identityProvider/facebook/FacebookButton.tsx +++ b/apps/playground/src/components/auth/identityProvider/facebook/FacebookButton.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import IconFacebook from '@/public/icons/icon-facebook.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/auth/identityProvider/google/GoogleAuthButton.tsx b/apps/playground/src/components/auth/identityProvider/google/GoogleAuthButton.tsx index afced300f..eb0c69854 100644 --- a/apps/playground/src/components/auth/identityProvider/google/GoogleAuthButton.tsx +++ b/apps/playground/src/components/auth/identityProvider/google/GoogleAuthButton.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import SquareLink from '@/components/common/SquareLink'; import IconGoogle from '@/public/icons/icon-google-color.svg'; diff --git a/apps/playground/src/components/auth/oauth/OAuthCallback.tsx b/apps/playground/src/components/auth/oauth/OAuthCallback.tsx index 890d5f34f..b21963262 100644 --- a/apps/playground/src/components/auth/oauth/OAuthCallback.tsx +++ b/apps/playground/src/components/auth/oauth/OAuthCallback.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { FC, useEffect, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { postSSOCode } from '@/api/endpoint_LEGACY/auth'; diff --git a/apps/playground/src/components/auth/register/Register.stories.tsx b/apps/playground/src/components/auth/register/Register.stories.tsx index c877023aa..598eb9fb5 100644 --- a/apps/playground/src/components/auth/register/Register.stories.tsx +++ b/apps/playground/src/components/auth/register/Register.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Register from '@/components/auth/register/Register'; diff --git a/apps/playground/src/components/auth/register/Register.tsx b/apps/playground/src/components/auth/register/Register.tsx index 2be181ce1..cb1ca082f 100644 --- a/apps/playground/src/components/auth/register/Register.tsx +++ b/apps/playground/src/components/auth/register/Register.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import AppleAuthButton from '@/components/auth/identityProvider/apple/AppleAuthButton'; import useAppleAuth from '@/components/auth/identityProvider/apple/useAppleAuth'; diff --git a/apps/playground/src/components/auth/register/RegisterFinished.tsx b/apps/playground/src/components/auth/register/RegisterFinished.tsx index 3ec24f9fe..2a4e45103 100644 --- a/apps/playground/src/components/auth/register/RegisterFinished.tsx +++ b/apps/playground/src/components/auth/register/RegisterFinished.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import SquareLink from '@/components/common/SquareLink'; import { playgroundLink } from '@/constants/links'; diff --git a/apps/playground/src/components/auth/register/Stepper.stories.tsx b/apps/playground/src/components/auth/register/Stepper.stories.tsx index ee42a026d..351d9b1b0 100644 --- a/apps/playground/src/components/auth/register/Stepper.stories.tsx +++ b/apps/playground/src/components/auth/register/Stepper.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Stepper from './Stepper'; diff --git a/apps/playground/src/components/auth/register/Stepper.tsx b/apps/playground/src/components/auth/register/Stepper.tsx index ac85c80e5..a4337aa43 100644 --- a/apps/playground/src/components/auth/register/Stepper.tsx +++ b/apps/playground/src/components/auth/register/Stepper.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { m } from 'framer-motion'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/auth/register/verify/HelpCard.stories.tsx b/apps/playground/src/components/auth/register/verify/HelpCard.stories.tsx index 2f2c1fb33..a6b83f1ef 100644 --- a/apps/playground/src/components/auth/register/verify/HelpCard.stories.tsx +++ b/apps/playground/src/components/auth/register/verify/HelpCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import HelpCard from './HelpCard'; diff --git a/apps/playground/src/components/auth/register/verify/HelpCard.tsx b/apps/playground/src/components/auth/register/verify/HelpCard.tsx index 128fcba4b..14d1bbb0a 100644 --- a/apps/playground/src/components/auth/register/verify/HelpCard.tsx +++ b/apps/playground/src/components/auth/register/verify/HelpCard.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import IconArrowRight from '@/public/icons/icon-arrow-right.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/auth/register/verify/SendingMailSuccess.tsx b/apps/playground/src/components/auth/register/verify/SendingMailSuccess.tsx index 7ce10eacc..78acabc0a 100644 --- a/apps/playground/src/components/auth/register/verify/SendingMailSuccess.tsx +++ b/apps/playground/src/components/auth/register/verify/SendingMailSuccess.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/auth/register/verify/Verify.stories.tsx b/apps/playground/src/components/auth/register/verify/Verify.stories.tsx index 03e0a4ef4..d49d7df24 100644 --- a/apps/playground/src/components/auth/register/verify/Verify.stories.tsx +++ b/apps/playground/src/components/auth/register/verify/Verify.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Verify from './Verify'; diff --git a/apps/playground/src/components/auth/register/verify/Verify.tsx b/apps/playground/src/components/auth/register/verify/Verify.tsx index 6fd4a44fb..3a651d0e7 100644 --- a/apps/playground/src/components/auth/register/verify/Verify.tsx +++ b/apps/playground/src/components/auth/register/verify/Verify.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import HelpCard from '@/components/auth/register/verify/HelpCard'; import useByPhone from '@/components/auth/register/verify/useByPhone'; @@ -11,7 +11,7 @@ import { MEMBER_REQUEST_FORM_URL, playgroundLink } from '@/constants/links'; interface VerifyProps {} -const Verify: FC = ({}) => { +const Verify: FC = () => { const { logSubmitEvent } = useEventLogger(); const router = useRouter(); diff --git a/apps/playground/src/components/auth/register/verify/VerifyFrame.stories.tsx b/apps/playground/src/components/auth/register/verify/VerifyFrame.stories.tsx index 31177f6d0..4cdc83161 100644 --- a/apps/playground/src/components/auth/register/verify/VerifyFrame.stories.tsx +++ b/apps/playground/src/components/auth/register/verify/VerifyFrame.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import VerifyFrame from './VerifyFrame'; diff --git a/apps/playground/src/components/auth/register/verify/VerifyFrame.tsx b/apps/playground/src/components/auth/register/verify/VerifyFrame.tsx index 1b0f7ff89..271f39048 100644 --- a/apps/playground/src/components/auth/register/verify/VerifyFrame.tsx +++ b/apps/playground/src/components/auth/register/verify/VerifyFrame.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import Stepper from '@/components/auth/register/Stepper'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/auth/register/verify/useByPhone.ts b/apps/playground/src/components/auth/register/verify/useByPhone.ts index ad743c7a6..31d902736 100644 --- a/apps/playground/src/components/auth/register/verify/useByPhone.ts +++ b/apps/playground/src/components/auth/register/verify/useByPhone.ts @@ -1,10 +1,11 @@ import { to } from 'await-to-js'; -import axios, { AxiosError } from 'axios'; +import type { AxiosError } from 'axios'; +import axios from 'axios'; import { useRef, useState } from 'react'; import { postSMSCode, postSMSToken } from '@/api/endpoint_LEGACY/auth'; import { PHONE_REGEX, PHONE_REGEX_SHORT } from '@/components/auth/register/verify/regex'; -import { ByPhoneStates } from '@/components/auth/register/verify/view/ByPhoneView'; +import type { ByPhoneStates } from '@/components/auth/register/verify/view/ByPhoneView'; interface ErrorResponse { success: boolean; diff --git a/apps/playground/src/components/auth/register/verify/view/ByPhoneView.stories.tsx b/apps/playground/src/components/auth/register/verify/view/ByPhoneView.stories.tsx index 6b6b70735..127396490 100644 --- a/apps/playground/src/components/auth/register/verify/view/ByPhoneView.stories.tsx +++ b/apps/playground/src/components/auth/register/verify/view/ByPhoneView.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ByPhoneView from './ByPhoneView'; diff --git a/apps/playground/src/components/auth/register/verify/view/ByPhoneView.tsx b/apps/playground/src/components/auth/register/verify/view/ByPhoneView.tsx index d2622776a..b14d28246 100644 --- a/apps/playground/src/components/auth/register/verify/view/ByPhoneView.tsx +++ b/apps/playground/src/components/auth/register/verify/view/ByPhoneView.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { AnimatePresence, m } from 'framer-motion'; -import { FC, FormEvent, ReactNode, useState } from 'react'; +import type { FC, FormEvent, ReactNode } from 'react'; +import { useState } from 'react'; import { PHONE_REGEX, PHONE_REGEX_SHORT } from '@/components/auth/register/verify/regex'; import VerifySubmitButton from '@/components/auth/register/verify/VerifySubmitButton'; diff --git a/apps/playground/src/components/auth/reset/Reconnect.tsx b/apps/playground/src/components/auth/reset/Reconnect.tsx index aad26271c..61b753c56 100644 --- a/apps/playground/src/components/auth/reset/Reconnect.tsx +++ b/apps/playground/src/components/auth/reset/Reconnect.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import AppleAuthButton from '@/components/auth/identityProvider/apple/AppleAuthButton'; import useAppleAuth from '@/components/auth/identityProvider/apple/useAppleAuth'; diff --git a/apps/playground/src/components/auth/reset/useResetLogin.ts b/apps/playground/src/components/auth/reset/useResetLogin.ts index 4437a54cc..728d2ae8e 100644 --- a/apps/playground/src/components/auth/reset/useResetLogin.ts +++ b/apps/playground/src/components/auth/reset/useResetLogin.ts @@ -1,11 +1,12 @@ import { to } from 'await-to-js'; -import axios, { AxiosError } from 'axios'; +import type { AxiosError } from 'axios'; +import axios from 'axios'; import { useRef, useState } from 'react'; import { changeSMSCode } from '@/api/endpoint/auth/changeSMSCode'; import { changeSMSToken } from '@/api/endpoint/auth/changeSMSToken'; import { PHONE_REGEX, PHONE_REGEX_SHORT } from '@/components/auth/register/verify/regex'; -import { ByPhoneStates } from '@/components/auth/register/verify/view/ByPhoneView'; +import type { ByPhoneStates } from '@/components/auth/register/verify/view/ByPhoneView'; interface ErrorResponse { success: boolean; diff --git a/apps/playground/src/components/blog/HelpCard.tsx b/apps/playground/src/components/blog/HelpCard.tsx index 7c8a14e94..da0ff9683 100644 --- a/apps/playground/src/components/blog/HelpCard.tsx +++ b/apps/playground/src/components/blog/HelpCard.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/blog/Success.stories.tsx b/apps/playground/src/components/blog/Success.stories.tsx index f519756b4..b5222b7ee 100644 --- a/apps/playground/src/components/blog/Success.stories.tsx +++ b/apps/playground/src/components/blog/Success.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import Success from './Success'; diff --git a/apps/playground/src/components/blog/Success.tsx b/apps/playground/src/components/blog/Success.tsx index 51062b842..62271710f 100644 --- a/apps/playground/src/components/blog/Success.tsx +++ b/apps/playground/src/components/blog/Success.tsx @@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors'; import { Button } from '@sopt-makers/ui'; import { m } from 'framer-motion'; import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; import { playgroundLink } from '@/constants/links'; @@ -12,7 +12,7 @@ import { textStyles } from '@/styles/typography'; interface UploadSuccessProps {} -const UploadSuccess: FC = ({}) => { +const UploadSuccess: FC = () => { const router = useRouter(); return ( diff --git a/apps/playground/src/components/blog/UploadBlog.stories.tsx b/apps/playground/src/components/blog/UploadBlog.stories.tsx index 75688593c..bafcc869e 100644 --- a/apps/playground/src/components/blog/UploadBlog.stories.tsx +++ b/apps/playground/src/components/blog/UploadBlog.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import UploadBlog from './UploadBlog'; diff --git a/apps/playground/src/components/blog/UploadBlog.tsx b/apps/playground/src/components/blog/UploadBlog.tsx index f19120d6a..3a2b5d1db 100644 --- a/apps/playground/src/components/blog/UploadBlog.tsx +++ b/apps/playground/src/components/blog/UploadBlog.tsx @@ -1,19 +1,15 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { Button, Callout, Chip, SelectV2, TextField } from '@sopt-makers/ui'; -import { FC, FormEvent, useState } from 'react'; +import type { FC, FormEvent } from 'react'; +import { useState } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { useGetMemberProperty } from '@/api/endpoint/members/getMemberProperty'; -import { RequestBody } from '@/api/endpoint/review/postReview'; +import type { RequestBody } from '@/api/endpoint/review/postReview'; import BottomSheetSelect from '@/components/blog/BottomSheetSelect'; -import { - ACTIVITY_OPTIONS, - BLOG_OPTIONS, - BlogOptionValue, - PART_KR_TO_ENUM, - RECRUIT_OPTIONS, -} from '@/components/blog/constants'; +import type { BlogOptionValue } from '@/components/blog/constants'; +import { ACTIVITY_OPTIONS, BLOG_OPTIONS, PART_KR_TO_ENUM, RECRUIT_OPTIONS } from '@/components/blog/constants'; import Responsive from '@/components/common/Responsive'; import Text from '@/components/common/Text'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/coffeechat/CoffeeChatCard/index.tsx b/apps/playground/src/components/coffeechat/CoffeeChatCard/index.tsx index 6ad12648e..be00993df 100644 --- a/apps/playground/src/components/coffeechat/CoffeeChatCard/index.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeChatCard/index.tsx @@ -1,11 +1,11 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Tag } from '@sopt-makers/ui'; import { m } from 'framer-motion'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useState } from 'react'; import Divider from '@/components/common/Divider/Divider'; diff --git a/apps/playground/src/components/coffeechat/CoffeeChatCategory/CoffeeChatFilterSheet.tsx b/apps/playground/src/components/coffeechat/CoffeeChatCategory/CoffeeChatFilterSheet.tsx index b7f605785..c9b3dd92d 100644 --- a/apps/playground/src/components/coffeechat/CoffeeChatCategory/CoffeeChatFilterSheet.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeChatCategory/CoffeeChatFilterSheet.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { Slot } from '@radix-ui/react-slot'; import { colors } from '@sopt-makers/colors'; -import { FC, PropsWithChildren, ReactNode, useMemo, useState } from 'react'; +import type { FC, PropsWithChildren, ReactNode } from 'react'; +import { useMemo, useState } from 'react'; import ReactModalSheet from 'react-modal-sheet'; import IconCheck from '@/public/icons/icon-filter-check.svg'; diff --git a/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx b/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx index f9b653c62..81b8a7421 100644 --- a/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import FocusTrap from 'focus-trap-react'; -import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useRef } from 'react'; +import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; +import { useRef } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; import Portal from '@/components/common/Portal'; diff --git a/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx index c79d89cd6..d0bff9fc7 100644 --- a/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx @@ -3,7 +3,8 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { TextArea, TextField, useToast } from '@sopt-makers/ui'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; @@ -70,32 +71,28 @@ const MessageModal: FC = ({ receiverId, phone, ...props }) => zIndex: zIndex.헤더 + 102, width: 400, }); - try { - if (result) { - await mutateAsync({ - senderPhone: phone, - content, - receiverId, - category: '커피챗', - }); - logSubmitEvent('sendCoffeechat', { - content: content, - receiverId, - senderId, - }); - open({ - icon: 'success', - content: '커피챗 제안이 잘 전달되었어요!', - style: { - content: { - whiteSpace: 'pre-wrap', - }, + if (result) { + await mutateAsync({ + senderPhone: phone, + content, + receiverId, + category: '커피챗', + }); + logSubmitEvent('sendCoffeechat', { + content: content, + receiverId, + senderId, + }); + open({ + icon: 'success', + content: '커피챗 제안이 잘 전달되었어요!', + style: { + content: { + whiteSpace: 'pre-wrap', }, - }); - props.onClose(); - } - } catch (error) { - throw error; + }, + }); + props.onClose(); } }; diff --git a/apps/playground/src/components/coffeechat/CoffeeChatReveiw/BottomSheetMDS.tsx b/apps/playground/src/components/coffeechat/CoffeeChatReveiw/BottomSheetMDS.tsx index d971c4330..f9f072b89 100644 --- a/apps/playground/src/components/coffeechat/CoffeeChatReveiw/BottomSheetMDS.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeChatReveiw/BottomSheetMDS.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconCheck, IconChevronDown } from '@sopt-makers/icons'; import { Button } from '@sopt-makers/ui'; -import { ReactNode, useEffect, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useState } from 'react'; import Portal from '@/components/common/Portal'; import { zIndex } from '@/styles/zIndex'; diff --git a/apps/playground/src/components/coffeechat/CoffeeChatReview/index.tsx b/apps/playground/src/components/coffeechat/CoffeeChatReview/index.tsx index 363ed23b9..2a2df5425 100644 --- a/apps/playground/src/components/coffeechat/CoffeeChatReview/index.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeChatReview/index.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ReactNode, startTransition, useEffect, useState } from 'react'; +import type { ReactNode } from 'react'; +import { startTransition, useEffect, useState } from 'react'; import { useGetRecentCoffeeChatReview } from '@/api/endpoint/coffeechat/getRecentCoffeechatReview'; import CoffeeChatReviewCard from '@/components/coffeechat/CoffeeChatReview/CoffeeChatReviewCard'; diff --git a/apps/playground/src/components/coffeechat/CoffeeRecentChatList/index.tsx b/apps/playground/src/components/coffeechat/CoffeeRecentChatList/index.tsx index 5359b43b4..1b71a634d 100644 --- a/apps/playground/src/components/coffeechat/CoffeeRecentChatList/index.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeRecentChatList/index.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Button, useDialog } from '@sopt-makers/ui'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { ReactNode, startTransition, useEffect, useState } from 'react'; +import type { ReactNode } from 'react'; +import { startTransition, useEffect, useState } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { useGetRecentCoffeeChat } from '@/api/endpoint/members/getRecentCoffeeChats'; @@ -158,7 +159,7 @@ export default function CoffeeChatList() { size='lg' theme='white' onClick={() => { - me?.hasCoffeeChat ? alreadyOpenedOption() : startOpenOption(); + (me?.hasCoffeeChat ? alreadyOpenedOption : startOpenOption)(); }} > 커피챗 오픈하기 @@ -171,7 +172,7 @@ export default function CoffeeChatList() { size='md' theme='white' onClick={() => { - me?.hasCoffeeChat ? alreadyOpenedOption() : startOpenOption(); + (me?.hasCoffeeChat ? alreadyOpenedOption : startOpenOption)(); }} > 커피챗 오픈하기 diff --git a/apps/playground/src/components/coffeechat/CoffeeRecentChatList/scrollCarousel.tsx b/apps/playground/src/components/coffeechat/CoffeeRecentChatList/scrollCarousel.tsx index 64b31383b..a3246472b 100644 --- a/apps/playground/src/components/coffeechat/CoffeeRecentChatList/scrollCarousel.tsx +++ b/apps/playground/src/components/coffeechat/CoffeeRecentChatList/scrollCarousel.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode, useEffect, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { MB_BIG_MEDIA_QUERY, PCTA_S_MEDIA_QUERY, PCTA_S_WIDTH, PCTA_SM_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/coffeechat/detail/OpenerProfile/index.tsx b/apps/playground/src/components/coffeechat/detail/OpenerProfile/index.tsx index c0ccf59ef..0ecf8f1a8 100644 --- a/apps/playground/src/components/coffeechat/detail/OpenerProfile/index.tsx +++ b/apps/playground/src/components/coffeechat/detail/OpenerProfile/index.tsx @@ -77,7 +77,7 @@ export default function OpenerProfile({ memberId }: OpenerProfileProps) { ) : ( { - openerProfile.isCoffeeChatActivate ? onOpenMessageModal() : handleImpossibleToRegister(); + (openerProfile.isCoffeeChatActivate ? onOpenMessageModal : handleImpossibleToRegister)(); }} /> )} diff --git a/apps/playground/src/components/coffeechat/detail/SeemoreSelect/index.tsx b/apps/playground/src/components/coffeechat/detail/SeemoreSelect/index.tsx index 065b81a50..757a0b4ad 100644 --- a/apps/playground/src/components/coffeechat/detail/SeemoreSelect/index.tsx +++ b/apps/playground/src/components/coffeechat/detail/SeemoreSelect/index.tsx @@ -1,14 +1,15 @@ import styled from '@emotion/styled'; import * as Dialog from '@radix-ui/react-dialog'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconDotsVertical, IconEdit, IconTrash } from '@sopt-makers/icons'; -import { DialogOptionType, useDialog, useToast } from '@sopt-makers/ui'; +import type { DialogOptionType } from '@sopt-makers/ui'; +import { useDialog, useToast } from '@sopt-makers/ui'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import dynamic from 'next/dynamic'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useState } from 'react'; import { deleteCoffeechat } from '@/api/endpoint/coffeechat/deleteCoffeechat'; diff --git a/apps/playground/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx b/apps/playground/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx index da80d9f64..b2981bcfd 100644 --- a/apps/playground/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx +++ b/apps/playground/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Toggle } from '@sopt-makers/ui'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { getCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail'; import { changeIsBlindCoffeechat } from '@/api/endpoint/coffeechat/postCoffeechatIsBlind'; diff --git a/apps/playground/src/components/coffeechat/detail/index.tsx b/apps/playground/src/components/coffeechat/detail/index.tsx index e963e60c4..1db5a2a1f 100644 --- a/apps/playground/src/components/coffeechat/detail/index.tsx +++ b/apps/playground/src/components/coffeechat/detail/index.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { useDialog } from '@sopt-makers/ui'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useEffect, useMemo } from 'react'; import { useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail'; @@ -41,7 +41,7 @@ export default function CoffeechatDetail({ memberId }: CoffeechatDetailProp) { }, [profile?.soptActivities]); useEffect(() => { - isError && + if (isError) { open({ title: `커피챗 정보를 확인할 수 없는 유저입니다.`, description: `${error.message}`, @@ -53,7 +53,8 @@ export default function CoffeechatDetail({ memberId }: CoffeechatDetailProp) { }, }, }); - }, [isError]); + } + }, [isError, error, open, router]); return ( diff --git a/apps/playground/src/components/coffeechat/page/CoffeechatUploadPage.tsx b/apps/playground/src/components/coffeechat/page/CoffeechatUploadPage.tsx index a23e7f08b..4d4f93a6a 100644 --- a/apps/playground/src/components/coffeechat/page/CoffeechatUploadPage.tsx +++ b/apps/playground/src/components/coffeechat/page/CoffeechatUploadPage.tsx @@ -1,12 +1,13 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { FieldValues, FormProvider, useForm } from 'react-hook-form'; +import type { FieldValues } from 'react-hook-form'; +import { FormProvider, useForm } from 'react-hook-form'; import DesktopCoffeechatUploadLayout from '@/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout'; import MobileCoffeechatUploadLayout from '@/components/coffeechat/page/layout/MobileCoffeechatUploadLayout'; import CoffeechatForm from '@/components/coffeechat/upload/CoffeechatForm'; import { coffeeChatchema } from '@/components/coffeechat/upload/CoffeechatForm/schema'; import SubmitDialog from '@/components/coffeechat/upload/CoffeechatForm/SubmitDialog'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; import UploadButton from '@/components/coffeechat/upload/CoffeechatForm/UploadButton'; import ProgressBox from '@/components/coffeechat/upload/ProgressBox'; import UploadHeader from '@/components/coffeechat/upload/UploadHeader'; diff --git a/apps/playground/src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx b/apps/playground/src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx index 870b781b0..b6ca27430 100644 --- a/apps/playground/src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx +++ b/apps/playground/src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx @@ -1,6 +1,7 @@ -import { COFFEECHAT_TABLET_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery'; import styled from '@emotion/styled'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; + +import { COFFEECHAT_TABLET_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery'; interface DesktopCoffeechatUploadLayoutProps { main: ReactNode; diff --git a/apps/playground/src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx b/apps/playground/src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx index 6e4d65489..342633f75 100644 --- a/apps/playground/src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx +++ b/apps/playground/src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { COFFEECHAT_MOBILE_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx index 5353c3703..60f6c49d8 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconCheck, IconChevronDown } from '@sopt-makers/icons'; import { Button } from '@sopt-makers/ui'; -import { ReactNode, useEffect, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useState } from 'react'; import Portal from '@/components/common/Portal'; import { zIndex } from '@/styles/zIndex'; diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/ChipField/index.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/ChipField/index.tsx index 9362b24a4..994b48905 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/ChipField/index.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/ChipField/index.tsx @@ -1,8 +1,9 @@ import styled from '@emotion/styled'; import { Chip } from '@sopt-makers/ui'; -import { Controller, ControllerRenderProps, useFormContext } from 'react-hook-form'; +import type { ControllerRenderProps } from 'react-hook-form'; +import { Controller, useFormContext } from 'react-hook-form'; -import { CoffeechatFormContent, CoffeechatFormPaths } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent, CoffeechatFormPaths } from '@/components/coffeechat/upload/CoffeechatForm/types'; import FormItem from '@/components/common/form/FormItem'; import Responsive from '@/components/common/Responsive'; diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/CoffeechatInfoForm/index.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/CoffeechatInfoForm/index.tsx index 7b922e2d6..f9996ee9d 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/CoffeechatInfoForm/index.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/CoffeechatInfoForm/index.tsx @@ -10,7 +10,7 @@ import { COFFECHAT_TOPIC, MEETING_TYPE_OPTIONS, } from '@/components/coffeechat/upload/CoffeechatForm/constants'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; import FormItem from '@/components/common/form/FormItem'; import FormTitle from '@/components/common/form/FormTitle'; import TextFieldLineBreak from '@/components/common/form/TextFieldLineBreak'; diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/MyInfoForm/index.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/MyInfoForm/index.tsx index 763062f2d..a0a39ef44 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/MyInfoForm/index.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/MyInfoForm/index.tsx @@ -5,7 +5,7 @@ import { Controller, useFormContext } from 'react-hook-form'; import { COFFEECHAT_MOBILE_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery'; import BottomSheetSelect from '@/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect'; import { CAREER_LEVEL_OPTIONS } from '@/components/coffeechat/upload/CoffeechatForm/constants'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; import FormItem from '@/components/common/form/FormItem'; import FormTitle from '@/components/common/form/FormTitle'; import TextFieldLineBreak from '@/components/common/form/TextFieldLineBreak'; diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.stories.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.stories.tsx index e49bc2dea..61639041b 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.stories.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.stories.tsx @@ -1,10 +1,10 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; import { coffeeChatchema } from '@/components/coffeechat/upload/CoffeechatForm/schema'; import SubmitDialog from '@/components/coffeechat/upload/CoffeechatForm/SubmitDialog'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; const form = { memberInfo: { diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx index 03da2a088..369765832 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { Button, Dialog } from '@sopt-makers/ui'; -import { FieldValues, useFormContext } from 'react-hook-form'; +import type { FieldValues } from 'react-hook-form'; +import { useFormContext } from 'react-hook-form'; import Responsive from '@/components/common/Responsive'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.stories.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.stories.tsx index d6884811c..21ae3a5ea 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.stories.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UploadButton from '@/components/coffeechat/upload/CoffeechatForm/UploadButton'; diff --git a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/index.stories.tsx b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/index.stories.tsx index 65d0ce8b6..9283bdc0f 100644 --- a/apps/playground/src/components/coffeechat/upload/CoffeechatForm/index.stories.tsx +++ b/apps/playground/src/components/coffeechat/upload/CoffeechatForm/index.stories.tsx @@ -1,10 +1,10 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; import CoffeechatForm from '@/components/coffeechat/upload/CoffeechatForm'; import { coffeeChatchema } from '@/components/coffeechat/upload/CoffeechatForm/schema'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; import UploadButton from '@/components/coffeechat/upload/CoffeechatForm/UploadButton'; const form = { diff --git a/apps/playground/src/components/coffeechat/upload/ProgressBox/index.stories.tsx b/apps/playground/src/components/coffeechat/upload/ProgressBox/index.stories.tsx index 284606d77..e0c3758aa 100644 --- a/apps/playground/src/components/coffeechat/upload/ProgressBox/index.stories.tsx +++ b/apps/playground/src/components/coffeechat/upload/ProgressBox/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ProgressBox from '@/components/coffeechat/upload/ProgressBox'; diff --git a/apps/playground/src/components/coffeechat/upload/UploadHeader/index.stories.tsx b/apps/playground/src/components/coffeechat/upload/UploadHeader/index.stories.tsx index 387c9be05..b6dafcea0 100644 --- a/apps/playground/src/components/coffeechat/upload/UploadHeader/index.stories.tsx +++ b/apps/playground/src/components/coffeechat/upload/UploadHeader/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UploadHeader from '@/components/coffeechat/upload/UploadHeader'; diff --git a/apps/playground/src/components/common/Banner/ActiveBannerSlot.tsx b/apps/playground/src/components/common/Banner/ActiveBannerSlot.tsx index 229486bc2..0e6c3a4a9 100644 --- a/apps/playground/src/components/common/Banner/ActiveBannerSlot.tsx +++ b/apps/playground/src/components/common/Banner/ActiveBannerSlot.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import AdsBanner from '@/components/common/Banner/AdsBanner'; @@ -8,7 +8,7 @@ import { ClosingBanner } from '@/components/common/Banner/ClosingBanner'; import WelcomeBannerContainer from '@/components/common/Banner/WelcomeBanner/WelcomeBannerContainer'; interface ActiveBannerSlotProps {} -const ActiveBannerSlot: FC = ({}) => { +const ActiveBannerSlot: FC = () => { const isTimecapsopOpen = false; // 타임캡솝 오픈 기간에만 이 값을 true로 변경 const { data: myData } = useGetMemberOfMe(); const isBalanceGameOpen = false; diff --git a/apps/playground/src/components/common/Banner/AdsBanner/index.tsx b/apps/playground/src/components/common/Banner/AdsBanner/index.tsx index 046656705..84d84a382 100644 --- a/apps/playground/src/components/common/Banner/AdsBanner/index.tsx +++ b/apps/playground/src/components/common/Banner/AdsBanner/index.tsx @@ -5,7 +5,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import dayjs from 'dayjs'; import { useState } from 'react'; -import Slider, { CustomArrowProps, Settings } from 'react-slick'; +import type { CustomArrowProps, Settings } from 'react-slick'; +import Slider from 'react-slick'; import { useBannersImages } from '@/api/endpoint/homeBanner/getBannersImages'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; diff --git a/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.stories.tsx b/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.stories.tsx index 25f276265..785d3bec3 100644 --- a/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.stories.tsx +++ b/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import AppJamBanner from './AppJamBanner'; diff --git a/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx b/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx index a8b8417b8..1d86d4579 100644 --- a/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx +++ b/apps/playground/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Head from 'next/head'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; import BannerLeft from '@/components/common/Banner/AppJamBanner/assets/banner-left.svg'; import BannerRight from '@/components/common/Banner/AppJamBanner/assets/banner-right.svg'; diff --git a/apps/playground/src/components/common/Banner/BalanceGameBanner/index.tsx b/apps/playground/src/components/common/Banner/BalanceGameBanner/index.tsx index 7089fc78e..6beebf096 100644 --- a/apps/playground/src/components/common/Banner/BalanceGameBanner/index.tsx +++ b/apps/playground/src/components/common/Banner/BalanceGameBanner/index.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { useRouter } from 'next/router'; -import { MB_BASE_MEDIA_QUERY, PCTA_S_MEDIA_QUERY } from '@/styles/mediaQuery'; + import matchMemberBannerDesktop from '@/public/icons/img/banner_balancegame_desktop.png'; -import matchMemberBannerMobile from '@/public/icons/img/banner_balancegame_mobile.png'; import matchMemberBannerMid from '@/public/icons/img/banner_balancegame_mid.png'; -import { playgroundLink } from '@sopt/ui'; +import matchMemberBannerMobile from '@/public/icons/img/banner_balancegame_mobile.png'; +import { MB_BASE_MEDIA_QUERY, PCTA_S_MEDIA_QUERY } from '@/styles/mediaQuery'; const BalanceGameBanner = () => { const router = useRouter(); diff --git a/apps/playground/src/components/common/Banner/ClosingBanner/index.tsx b/apps/playground/src/components/common/Banner/ClosingBanner/index.tsx index 97808d4d4..680866d30 100644 --- a/apps/playground/src/components/common/Banner/ClosingBanner/index.tsx +++ b/apps/playground/src/components/common/Banner/ClosingBanner/index.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { IconChevronRight } from '@sopt-makers/icons'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import useModalState from '@/components/common/Modal/useModalState'; diff --git a/apps/playground/src/components/common/Banner/ClosingCeremonyBanner/index.tsx b/apps/playground/src/components/common/Banner/ClosingCeremonyBanner/index.tsx index a37eede6b..226e1d24f 100644 --- a/apps/playground/src/components/common/Banner/ClosingCeremonyBanner/index.tsx +++ b/apps/playground/src/components/common/Banner/ClosingCeremonyBanner/index.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import useModalState from '@/components/common/Modal/useModalState'; diff --git a/apps/playground/src/components/common/Banner/RecruitingBanner/index.tsx b/apps/playground/src/components/common/Banner/RecruitingBanner/index.tsx index 0c748406c..0f7f80e96 100644 --- a/apps/playground/src/components/common/Banner/RecruitingBanner/index.tsx +++ b/apps/playground/src/components/common/Banner/RecruitingBanner/index.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import dayjs from 'dayjs'; -import { FC } from 'react'; +import type { FC } from 'react'; import { MakersLogoWhite } from '@/components/common/Banner/RecruitingBanner/icons'; import Timer from '@/components/common/Banner/Timer'; @@ -15,7 +15,7 @@ const TARGET_DATE = dayjs('2023-08-07T14:59:00.000Z').toDate(); // 한국시간 interface RecruitingBannerProps {} -const Recruiting3thBanner: FC = ({}) => { +const Recruiting3thBanner: FC = () => { return ( diff --git a/apps/playground/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx b/apps/playground/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx index 6d545f486..b1e9e11f1 100644 --- a/apps/playground/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx +++ b/apps/playground/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import dayjs from 'dayjs'; -import { FC } from 'react'; +import type { FC } from 'react'; import { MakersLogoDark, OwnershipShape, ZigzagShape } from '@/components/common/Banner/RecruitingBanner/icons'; import Timer from '@/components/common/Banner/Timer'; @@ -15,7 +15,7 @@ const TARGET_DATE = dayjs('2023-07-28T14:59:00.000Z').toDate(); // 한국시간 interface RecruitingBannerProps {} -const RecruitingBanner: FC = ({}) => { +const RecruitingBanner: FC = () => { return ( diff --git a/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.stories.tsx b/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.stories.tsx index 2c1e4839c..5f44d9643 100644 --- a/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.stories.tsx +++ b/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import SOPTMATEBanner from '@/components/common/Banner/SOPTMATEBanner'; diff --git a/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.tsx b/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.tsx index 8ebf4bd34..a8a71e9cd 100644 --- a/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.tsx +++ b/apps/playground/src/components/common/Banner/SOPTMATEBanner/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import dayjs from 'dayjs'; -import { FC } from 'react'; +import type { FC } from 'react'; import Timer from '@/components/common/Banner/Timer'; import Responsive from '@/components/common/Responsive'; @@ -13,7 +13,7 @@ const LINK = 'https://docs.google.com/forms/d/e/1FAIpQLScrbpnL6Fas7hzHoKLFCoeQw4I-XYO5V8S_lpP7v5rzU64BfA/viewform?usp=sf_link'; const TARGET_DATE = dayjs('2023-05-11T15:00:00.000Z').toDate(); // 한국시간 2023-05-12 00:00 -const SOPTMATEBanner: FC = ({}) => { +const SOPTMATEBanner: FC = () => { return ( diff --git a/apps/playground/src/components/common/Banner/Timer.tsx b/apps/playground/src/components/common/Banner/Timer.tsx index 0d0ff3c74..91561ed11 100644 --- a/apps/playground/src/components/common/Banner/Timer.tsx +++ b/apps/playground/src/components/common/Banner/Timer.tsx @@ -1,4 +1,5 @@ -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import useInterval from '@/hooks/useInterval'; import { convertMillisecondsIntoDateValues } from '@/utils/parseDate'; diff --git a/apps/playground/src/components/common/BottomSheet/ModalBottomSheet.tsx b/apps/playground/src/components/common/BottomSheet/ModalBottomSheet.tsx index 49d8b808a..938b530f7 100644 --- a/apps/playground/src/components/common/BottomSheet/ModalBottomSheet.tsx +++ b/apps/playground/src/components/common/BottomSheet/ModalBottomSheet.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC, PropsWithChildren } from 'react'; import Sheet from 'react-modal-sheet'; import IconModalClose from '@/public/icons/icon-modal-close.svg'; diff --git a/apps/playground/src/components/common/BottomSheet/index.stories.tsx b/apps/playground/src/components/common/BottomSheet/index.stories.tsx index f5d5149d1..3ea5b8152 100644 --- a/apps/playground/src/components/common/BottomSheet/index.stories.tsx +++ b/apps/playground/src/components/common/BottomSheet/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { BottomSheet } from '@/components/common/BottomSheet'; import Button from '@/components/common/Button'; diff --git a/apps/playground/src/components/common/BottomSheet/index.tsx b/apps/playground/src/components/common/BottomSheet/index.tsx index 394d9d34e..a16b316a7 100644 --- a/apps/playground/src/components/common/BottomSheet/index.tsx +++ b/apps/playground/src/components/common/BottomSheet/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; +import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; import Sheet from 'react-modal-sheet'; export interface BottomSheetProps extends PropsWithChildren> { diff --git a/apps/playground/src/components/common/Button/index.stories.tsx b/apps/playground/src/components/common/Button/index.stories.tsx index ffed83205..87ace5fde 100644 --- a/apps/playground/src/components/common/Button/index.stories.tsx +++ b/apps/playground/src/components/common/Button/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Button from '@/components/common/Button'; diff --git a/apps/playground/src/components/common/Button/index.tsx b/apps/playground/src/components/common/Button/index.tsx index f9c3d521b..f4da0d973 100644 --- a/apps/playground/src/components/common/Button/index.tsx +++ b/apps/playground/src/components/common/Button/index.tsx @@ -1,7 +1,9 @@ import styled from '@emotion/styled'; -import { ButtonHTMLAttributes, forwardRef } from 'react'; +import type { ButtonHTMLAttributes } from 'react'; +import { forwardRef } from 'react'; -import { ButtonSize, buttonSize, ButtonStyle, buttonStyles } from '@/components/common/Button/style'; +import type { ButtonSize, ButtonStyle } from '@/components/common/Button/style'; +import { buttonSize, buttonStyles } from '@/components/common/Button/style'; import { textStyles } from '@/styles/typography'; interface ButtonProps extends ButtonHTMLAttributes { diff --git a/apps/playground/src/components/common/Button/style.ts b/apps/playground/src/components/common/Button/style.ts index 3dff4195f..cd296dfea 100644 --- a/apps/playground/src/components/common/Button/style.ts +++ b/apps/playground/src/components/common/Button/style.ts @@ -1,4 +1,5 @@ -import { css, SerializedStyles } from '@emotion/react'; +import type { SerializedStyles } from '@emotion/react'; +import { css } from '@emotion/react'; import { colors } from '@sopt-makers/colors'; export type ButtonStyle = 'default' | 'primary' | 'danger'; diff --git a/apps/playground/src/components/common/Carousel/Body.tsx b/apps/playground/src/components/common/Carousel/Body.tsx index 016e4f725..6f0e125c9 100644 --- a/apps/playground/src/components/common/Carousel/Body.tsx +++ b/apps/playground/src/components/common/Carousel/Body.tsx @@ -1,5 +1,6 @@ import { usePresence } from 'framer-motion'; -import { ReactNode, useEffect, useRef } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useRef } from 'react'; interface CarouselBodyProps { currentItemList: ReactNode[]; diff --git a/apps/playground/src/components/common/Carousel/index.stories.tsx b/apps/playground/src/components/common/Carousel/index.stories.tsx index 61e4729b1..4a9e5f44a 100644 --- a/apps/playground/src/components/common/Carousel/index.stories.tsx +++ b/apps/playground/src/components/common/Carousel/index.stories.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { Meta } from '@storybook/react'; -import { ReactNode } from 'react'; +import type { Meta } from '@storybook/react'; +import type { ReactNode } from 'react'; import Carousel from '@/components/common/Carousel'; import MentoringCard from '@/components/mentoring/MentoringCard'; diff --git a/apps/playground/src/components/common/Carousel/index.tsx b/apps/playground/src/components/common/Carousel/index.tsx index 212c3bd69..80a31ecbd 100644 --- a/apps/playground/src/components/common/Carousel/index.tsx +++ b/apps/playground/src/components/common/Carousel/index.tsx @@ -1,10 +1,12 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { AnimatePresence, m } from 'framer-motion'; -import { ReactNode, useRef } from 'react'; +import type { ReactNode } from 'react'; +import { useRef } from 'react'; import CarouselBody from '@/components/common/Carousel/Body'; -import useCarousel, { CarouselDirection } from '@/components/common/Carousel/useCarousel'; +import type { CarouselDirection } from '@/components/common/Carousel/useCarousel'; +import useCarousel from '@/components/common/Carousel/useCarousel'; import LeftArrowIcon from '@/public/icons/icon-arrow-left.svg'; interface CarouselProps { itemList: ReactNode[]; diff --git a/apps/playground/src/components/common/Carousel/useCarousel.ts b/apps/playground/src/components/common/Carousel/useCarousel.ts index da9e51c5a..ce0ff3b04 100644 --- a/apps/playground/src/components/common/Carousel/useCarousel.ts +++ b/apps/playground/src/components/common/Carousel/useCarousel.ts @@ -1,4 +1,5 @@ -import { ReactNode, useEffect, useMemo, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import usePagination from '@/hooks/usePagination'; diff --git a/apps/playground/src/components/common/Checkbox/index.stories.tsx b/apps/playground/src/components/common/Checkbox/index.stories.tsx index 587004553..a5c68e8a2 100644 --- a/apps/playground/src/components/common/Checkbox/index.stories.tsx +++ b/apps/playground/src/components/common/Checkbox/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import Checkbox from '@/components/common/Checkbox'; diff --git a/apps/playground/src/components/common/Checkbox/index.tsx b/apps/playground/src/components/common/Checkbox/index.tsx index f955cd45a..ef6cccf01 100644 --- a/apps/playground/src/components/common/Checkbox/index.tsx +++ b/apps/playground/src/components/common/Checkbox/index.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { forwardRef, InputHTMLAttributes } from 'react'; +import type { InputHTMLAttributes } from 'react'; +import { forwardRef } from 'react'; import IconCheck from '@/public/icons/icon-check.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/common/ContentsCard/index.stories.tsx b/apps/playground/src/components/common/ContentsCard/index.stories.tsx index 9cc0ed621..0f4fc4e90 100644 --- a/apps/playground/src/components/common/ContentsCard/index.stories.tsx +++ b/apps/playground/src/components/common/ContentsCard/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ContentsCard from '@/components/common/ContentsCard'; diff --git a/apps/playground/src/components/common/ContentsCard/index.tsx b/apps/playground/src/components/common/ContentsCard/index.tsx index b0597fe2e..f10d56d63 100644 --- a/apps/playground/src/components/common/ContentsCard/index.tsx +++ b/apps/playground/src/components/common/ContentsCard/index.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import ResizedImage from '@/components/common/ResizedImage'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/common/Divider/Divider.stories.tsx b/apps/playground/src/components/common/Divider/Divider.stories.tsx index 21e8aed35..8e47bcfd6 100644 --- a/apps/playground/src/components/common/Divider/Divider.stories.tsx +++ b/apps/playground/src/components/common/Divider/Divider.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Divider from './Divider'; diff --git a/apps/playground/src/components/common/Divider/Divider.tsx b/apps/playground/src/components/common/Divider/Divider.tsx index 844aed38a..35253c9cb 100644 --- a/apps/playground/src/components/common/Divider/Divider.tsx +++ b/apps/playground/src/components/common/Divider/Divider.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; interface DividerProps { className?: string; diff --git a/apps/playground/src/components/common/EditableSelect.stories.tsx b/apps/playground/src/components/common/EditableSelect.stories.tsx index 8ac817ed5..c46e53a0c 100644 --- a/apps/playground/src/components/common/EditableSelect.stories.tsx +++ b/apps/playground/src/components/common/EditableSelect.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; import MemberSelectOptions from '@/components/members/upload/forms/SelectOptions'; diff --git a/apps/playground/src/components/common/EditableSelect.tsx b/apps/playground/src/components/common/EditableSelect.tsx index 92cce94a5..dd6210c14 100644 --- a/apps/playground/src/components/common/EditableSelect.tsx +++ b/apps/playground/src/components/common/EditableSelect.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent, forwardRef, ReactElement, ReactNode, useState } from 'react'; +import type { ChangeEvent, ReactElement, ReactNode } from 'react'; +import { forwardRef, useState } from 'react'; import Select from '@/components/common/Select'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/Example/index.stories.tsx b/apps/playground/src/components/common/Example/index.stories.tsx index f042dc1e2..182fc1290 100644 --- a/apps/playground/src/components/common/Example/index.stories.tsx +++ b/apps/playground/src/components/common/Example/index.stories.tsx @@ -1,5 +1,5 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { HttpResponse, http } from 'msw'; +import type { Meta, StoryObj } from '@storybook/react'; +import { http, HttpResponse } from 'msw'; import Example, { API_PATH } from '@/components/common/Example'; diff --git a/apps/playground/src/components/common/Footer/index.stories.tsx b/apps/playground/src/components/common/Footer/index.stories.tsx index 307a8963a..f8cd065f7 100644 --- a/apps/playground/src/components/common/Footer/index.stories.tsx +++ b/apps/playground/src/components/common/Footer/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Footer from '@/components/common/Footer'; diff --git a/apps/playground/src/components/common/Footer/index.tsx b/apps/playground/src/components/common/Footer/index.tsx index b990f849f..40b73560e 100644 --- a/apps/playground/src/components/common/Footer/index.tsx +++ b/apps/playground/src/components/common/Footer/index.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import { MAKERS_TEAM_URL, playgroundLink } from '@/constants/links'; @@ -16,7 +16,7 @@ interface FooterProps { className?: string; } -const Footer: FC = ({}) => { +const Footer: FC = () => { const { isScrollingDown, isScrollTop } = useScroll(); const { logClickEvent } = useEventLogger(); const { pathname } = useRouter(); diff --git a/apps/playground/src/components/common/Header/SwitchableHeader.tsx b/apps/playground/src/components/common/Header/SwitchableHeader.tsx index 683d4b21f..1080603ca 100644 --- a/apps/playground/src/components/common/Header/SwitchableHeader.tsx +++ b/apps/playground/src/components/common/Header/SwitchableHeader.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import useAuth from '@/components/auth/useAuth'; import Header from '@/components/common/Header'; diff --git a/apps/playground/src/components/common/Header/desktop/DesktopHeader.stories.tsx b/apps/playground/src/components/common/Header/desktop/DesktopHeader.stories.tsx index 2576dc416..787f600b2 100644 --- a/apps/playground/src/components/common/Header/desktop/DesktopHeader.stories.tsx +++ b/apps/playground/src/components/common/Header/desktop/DesktopHeader.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; import Link from 'next/link'; import DesktopHeader from '@/components/common/Header/desktop/DesktopHeader'; diff --git a/apps/playground/src/components/common/Header/desktop/DesktopHeader.tsx b/apps/playground/src/components/common/Header/desktop/DesktopHeader.tsx index 4eb43dafa..2db7508ce 100644 --- a/apps/playground/src/components/common/Header/desktop/DesktopHeader.tsx +++ b/apps/playground/src/components/common/Header/desktop/DesktopHeader.tsx @@ -1,12 +1,12 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import ProfileButton from '@/components/common/Header/desktop/ProfileButton'; import ProfileDropdown from '@/components/common/Header/desktop/ProfileDropdown'; import { SOPT_MAKRES_LOGO_SVG } from '@/components/common/Header/imageData'; -import { LinkRenderer, PathMatcher } from '@/components/common/Header/types'; +import type { LinkRenderer, PathMatcher } from '@/components/common/Header/types'; import { playgroundLink } from '@/constants/links'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/Header/desktop/ProfileButton.stories.tsx b/apps/playground/src/components/common/Header/desktop/ProfileButton.stories.tsx index ed83ed5c3..4d73d6f00 100644 --- a/apps/playground/src/components/common/Header/desktop/ProfileButton.stories.tsx +++ b/apps/playground/src/components/common/Header/desktop/ProfileButton.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ProfileButton from '@/components/common/Header/desktop/ProfileButton'; diff --git a/apps/playground/src/components/common/Header/desktop/ProfileButton.tsx b/apps/playground/src/components/common/Header/desktop/ProfileButton.tsx index e23385e83..77f81ad1f 100644 --- a/apps/playground/src/components/common/Header/desktop/ProfileButton.tsx +++ b/apps/playground/src/components/common/Header/desktop/ProfileButton.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ButtonHTMLAttributes, forwardRef } from 'react'; +import type { ButtonHTMLAttributes } from 'react'; +import { forwardRef } from 'react'; import { DEFAULT_PROFILE_IMAGE_DESKTOP_SVG } from '@/components/common/Header/imageData'; import ResizedImage from '@/components/common/ResizedImage'; diff --git a/apps/playground/src/components/common/Header/desktop/ProfileDropdown.stories.tsx b/apps/playground/src/components/common/Header/desktop/ProfileDropdown.stories.tsx index 4c0d351c6..ba5f72f56 100644 --- a/apps/playground/src/components/common/Header/desktop/ProfileDropdown.stories.tsx +++ b/apps/playground/src/components/common/Header/desktop/ProfileDropdown.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; import Link from 'next/link'; import ProfileDropdown from '@/components/common/Header/desktop/ProfileDropdown'; diff --git a/apps/playground/src/components/common/Header/desktop/ProfileDropdown.tsx b/apps/playground/src/components/common/Header/desktop/ProfileDropdown.tsx index a3c552163..7de2a5141 100644 --- a/apps/playground/src/components/common/Header/desktop/ProfileDropdown.tsx +++ b/apps/playground/src/components/common/Header/desktop/ProfileDropdown.tsx @@ -2,9 +2,10 @@ import styled from '@emotion/styled'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { colors } from '@sopt-makers/colors'; import dynamic from 'next/dynamic'; -import { FC, ReactNode, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useState } from 'react'; -import { LinkRenderer } from '@/components/common/Header/types'; +import type { LinkRenderer } from '@/components/common/Header/types'; import { textStyles } from '@/styles/typography'; import { zIndex } from '@/styles/zIndex'; diff --git a/apps/playground/src/components/common/Header/index.tsx b/apps/playground/src/components/common/Header/index.tsx index 888d1143a..9ecaf6b1e 100644 --- a/apps/playground/src/components/common/Header/index.tsx +++ b/apps/playground/src/components/common/Header/index.tsx @@ -1,20 +1,21 @@ +import type { LinkRenderer } from '@sopt/ui'; +import { DesktopHeader, MobileHeader } from '@sopt/ui'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import useAuth from '@/components/auth/useAuth'; -import DesktopHeader from '@/components/common/Header/desktop/DesktopHeader'; -import MobileHeader from '@/components/common/Header/mobile/MobileHeader'; -import { LinkRenderer } from '@/components/common/Header/types'; import Responsive from '@/components/common/Responsive'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import { playgroundLink } from '@/constants/links'; +import useKakao from '@/hooks/useKakao'; const Header: FC = () => { const router = useRouter(); const { logout } = useAuth(); const { logClickEvent } = useEventLogger(); + const { handleKakaoChat } = useKakao(); const { data: me } = useGetMemberOfMe(); @@ -45,7 +46,13 @@ const Header: FC = () => { return ( <> - + diff --git a/apps/playground/src/components/common/Header/mobile/MobileHeader.stories.tsx b/apps/playground/src/components/common/Header/mobile/MobileHeader.stories.tsx index 3ee2b64df..0639bf5df 100644 --- a/apps/playground/src/components/common/Header/mobile/MobileHeader.stories.tsx +++ b/apps/playground/src/components/common/Header/mobile/MobileHeader.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; import Link from 'next/link'; import MobileHeader from '@/components/common/Header/mobile/MobileHeader'; diff --git a/apps/playground/src/components/common/Header/mobile/MobileHeader.tsx b/apps/playground/src/components/common/Header/mobile/MobileHeader.tsx index 38d96b6bb..fad5fb748 100644 --- a/apps/playground/src/components/common/Header/mobile/MobileHeader.tsx +++ b/apps/playground/src/components/common/Header/mobile/MobileHeader.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import { MENU_SVG, SOPT_MAKRES_LOGO_SVG } from '@/components/common/Header/imageData'; import MobileSideBar from '@/components/common/Header/mobile/MobileSideBar'; -import { LinkRenderer, PathMatcher } from '@/components/common/Header/types'; +import type { LinkRenderer, PathMatcher } from '@/components/common/Header/types'; import { playgroundLink } from '@/constants/links'; interface MobileHeaderProps { diff --git a/apps/playground/src/components/common/Header/mobile/MobileSideBar.stories.tsx b/apps/playground/src/components/common/Header/mobile/MobileSideBar.stories.tsx index 6466aacf0..3ed61cf9a 100644 --- a/apps/playground/src/components/common/Header/mobile/MobileSideBar.stories.tsx +++ b/apps/playground/src/components/common/Header/mobile/MobileSideBar.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; import Link from 'next/link'; import MobileSideBar from '@/components/common/Header/mobile/MobileSideBar'; diff --git a/apps/playground/src/components/common/Header/mobile/MobileSideBar.tsx b/apps/playground/src/components/common/Header/mobile/MobileSideBar.tsx index 124abb625..f311952cb 100644 --- a/apps/playground/src/components/common/Header/mobile/MobileSideBar.tsx +++ b/apps/playground/src/components/common/Header/mobile/MobileSideBar.tsx @@ -2,10 +2,11 @@ import styled from '@emotion/styled'; import * as Dialog from '@radix-ui/react-dialog'; import { colors } from '@sopt-makers/colors'; import dynamic from 'next/dynamic'; -import { FC, ReactNode, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useState } from 'react'; import { DEFAULT_PROFILE_IMAGE_MOBILE_SVG, RIGHT_ARROW_SVG } from '@/components/common/Header/imageData'; -import { LinkRenderer, PathMatcher } from '@/components/common/Header/types'; +import type { LinkRenderer, PathMatcher } from '@/components/common/Header/types'; import ResizedImage from '@/components/common/ResizedImage'; import { MAKERS_TEAM_URL, playgroundLink } from '@/constants/links'; import useKakao from '@/hooks/useKakao'; diff --git a/apps/playground/src/components/common/Header/types.ts b/apps/playground/src/components/common/Header/types.ts index 434c8378c..b731e073f 100644 --- a/apps/playground/src/components/common/Header/types.ts +++ b/apps/playground/src/components/common/Header/types.ts @@ -1,4 +1,4 @@ -import { ReactElement, ReactNode } from 'react'; +import type { ReactElement, ReactNode } from 'react'; export type LinkRenderer = (data: { href: string; children: ReactNode }) => ReactElement; export type PathMatcher = (path: string) => boolean; diff --git a/apps/playground/src/components/common/HorizontalScroller/index.tsx b/apps/playground/src/components/common/HorizontalScroller/index.tsx index f00ab897f..0d74b3a98 100644 --- a/apps/playground/src/components/common/HorizontalScroller/index.tsx +++ b/apps/playground/src/components/common/HorizontalScroller/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { forwardRef, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react'; +import type { MouseEvent, ReactNode } from 'react'; +import { forwardRef, useEffect, useRef, useState } from 'react'; interface HorizontalScrollerProps { className?: string; diff --git a/apps/playground/src/components/common/ImageUploader/Legacy.tsx b/apps/playground/src/components/common/ImageUploader/Legacy.tsx index 62063e58e..3983d92de 100644 --- a/apps/playground/src/components/common/ImageUploader/Legacy.tsx +++ b/apps/playground/src/components/common/ImageUploader/Legacy.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, useEffect, useRef, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { getPresignedUrl, putPresignedUrl } from '@/api/endpoint/common/image'; import IconImage from '@/public/icons/icon-image.svg'; diff --git a/apps/playground/src/components/common/ImageUploader/index.stories.tsx b/apps/playground/src/components/common/ImageUploader/index.stories.tsx index 68a0d1b4e..b85d19e36 100644 --- a/apps/playground/src/components/common/ImageUploader/index.stories.tsx +++ b/apps/playground/src/components/common/ImageUploader/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Controller, useForm } from 'react-hook-form'; import ImageUploader from '.'; diff --git a/apps/playground/src/components/common/ImageUploader/index.tsx b/apps/playground/src/components/common/ImageUploader/index.tsx index 269450c6a..73953899b 100644 --- a/apps/playground/src/components/common/ImageUploader/index.tsx +++ b/apps/playground/src/components/common/ImageUploader/index.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, useEffect, useRef, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useRef, useState } from 'react'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import { MAX_FEED_IMAGE_LENGTH } from '@/components/feed/upload/ImageUploadButton'; diff --git a/apps/playground/src/components/common/Input/ErrorMessage.stories.tsx b/apps/playground/src/components/common/Input/ErrorMessage.stories.tsx index 4100cc3bb..dc9c849f6 100644 --- a/apps/playground/src/components/common/Input/ErrorMessage.stories.tsx +++ b/apps/playground/src/components/common/Input/ErrorMessage.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; diff --git a/apps/playground/src/components/common/Input/ErrorMessage.tsx b/apps/playground/src/components/common/Input/ErrorMessage.tsx index 5d7478d6c..8adb3b3d6 100644 --- a/apps/playground/src/components/common/Input/ErrorMessage.tsx +++ b/apps/playground/src/components/common/Input/ErrorMessage.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import React, { FC, PropsWithChildren } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import React from 'react'; import Text from '@/components/common/Text'; import IconWarning from '@/public/icons/icon-warning.svg'; diff --git a/apps/playground/src/components/common/Input/index.stories.tsx b/apps/playground/src/components/common/Input/index.stories.tsx index e3e5ab718..85c05c8bb 100644 --- a/apps/playground/src/components/common/Input/index.stories.tsx +++ b/apps/playground/src/components/common/Input/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Input from '@/components/common/Input'; diff --git a/apps/playground/src/components/common/Input/index.tsx b/apps/playground/src/components/common/Input/index.tsx index ec2866128..fd0f0d48f 100644 --- a/apps/playground/src/components/common/Input/index.tsx +++ b/apps/playground/src/components/common/Input/index.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent, FocusEvent, forwardRef } from 'react'; +import type { ChangeEvent, FocusEvent } from 'react'; +import { forwardRef } from 'react'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/common/Loading/index.stories.tsx b/apps/playground/src/components/common/Loading/index.stories.tsx index 0e0a01b35..a4ff63de5 100644 --- a/apps/playground/src/components/common/Loading/index.stories.tsx +++ b/apps/playground/src/components/common/Loading/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Loading from '.'; diff --git a/apps/playground/src/components/common/Loading/index.tsx b/apps/playground/src/components/common/Loading/index.tsx index 08192b120..7492b2e66 100644 --- a/apps/playground/src/components/common/Loading/index.tsx +++ b/apps/playground/src/components/common/Loading/index.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { AnimationProps, m } from 'framer-motion'; -import { FC, PropsWithChildren } from 'react'; +import type { AnimationProps } from 'framer-motion'; +import { m } from 'framer-motion'; +import type { FC, PropsWithChildren } from 'react'; import Portal from '@/components/common/Portal'; diff --git a/apps/playground/src/components/common/Modal/index.stories.tsx b/apps/playground/src/components/common/Modal/index.stories.tsx index 0e95cb44a..69c06e70b 100644 --- a/apps/playground/src/components/common/Modal/index.stories.tsx +++ b/apps/playground/src/components/common/Modal/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Button from '@/components/common/Button'; import useModalState from '@/components/common/Modal/useModalState'; diff --git a/apps/playground/src/components/common/Modal/index.tsx b/apps/playground/src/components/common/Modal/index.tsx index 864176b7f..abd819c14 100644 --- a/apps/playground/src/components/common/Modal/index.tsx +++ b/apps/playground/src/components/common/Modal/index.tsx @@ -4,7 +4,7 @@ import * as Dialog from '@radix-ui/react-dialog'; import { colors } from '@sopt-makers/colors'; import { m } from 'framer-motion'; import dynamic from 'next/dynamic'; -import { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; +import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; import { ModalButton, ModalContent, ModalDescription, ModalFooter, ModalTitle } from '@/components/common/Modal/parts'; import IconModalClose from '@/public/icons/icon-modal-close.svg'; diff --git a/apps/playground/src/components/common/Modal/parts/ModalButton.tsx b/apps/playground/src/components/common/Modal/parts/ModalButton.tsx index 88a78c070..d8ba54813 100644 --- a/apps/playground/src/components/common/Modal/parts/ModalButton.tsx +++ b/apps/playground/src/components/common/Modal/parts/ModalButton.tsx @@ -1,10 +1,11 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import * as Dialog from '@radix-ui/react-dialog'; import { colors } from '@sopt-makers/colors'; -import { ComponentPropsWithoutRef, forwardRef } from 'react'; +import type { ComponentPropsWithoutRef } from 'react'; +import { forwardRef } from 'react'; import { textStyles } from '@/styles/typography'; -import { css } from '@emotion/react'; interface ModalCloseButtonProps extends ComponentPropsWithoutRef { action?: 'normal' | 'close'; diff --git a/apps/playground/src/components/common/Modal/useAlert.tsx b/apps/playground/src/components/common/Modal/useAlert.tsx index bc69bad7a..8cadeb2b9 100644 --- a/apps/playground/src/components/common/Modal/useAlert.tsx +++ b/apps/playground/src/components/common/Modal/useAlert.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { useOverlay } from '@toss/use-overlay'; -import { ReactNode, useCallback } from 'react'; +import type { ReactNode } from 'react'; +import { useCallback } from 'react'; import Modal from '@/components/common/Modal'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/common/Modal/useConfirm.tsx b/apps/playground/src/components/common/Modal/useConfirm.tsx index 80d16c7c7..74dde767d 100644 --- a/apps/playground/src/components/common/Modal/useConfirm.tsx +++ b/apps/playground/src/components/common/Modal/useConfirm.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { useOverlay } from '@toss/use-overlay'; -import { ReactNode, useCallback } from 'react'; +import type { ReactNode } from 'react'; +import { useCallback } from 'react'; import Modal from '@/components/common/Modal'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/common/Modal/useCustomConfirm.tsx b/apps/playground/src/components/common/Modal/useCustomConfirm.tsx index 26093f8e9..4d788e4bb 100644 --- a/apps/playground/src/components/common/Modal/useCustomConfirm.tsx +++ b/apps/playground/src/components/common/Modal/useCustomConfirm.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { m } from 'framer-motion'; -import React, { ReactNode, useCallback, useState } from 'react'; +import type { ReactNode } from 'react'; +import React, { useCallback, useState } from 'react'; // 기존 Modal 컴포넌트 가져오기 import Modal from '@/components/common/Modal'; @@ -29,9 +30,7 @@ const useCustomConfirm = () => { okButtonText: 'Confirm', }); - const [resolvePromise, setResolvePromise] = useState<(value: boolean) => void>(() => { - undefined; - }); + const [resolvePromise, setResolvePromise] = useState<(value: boolean) => void>(() => () => {}); const confirm = useCallback((options: ConfirmOptions): Promise => { setOptions(options); diff --git a/apps/playground/src/components/common/Modal/usePopup.tsx b/apps/playground/src/components/common/Modal/usePopup.tsx index 68330e40b..fdf85c1eb 100644 --- a/apps/playground/src/components/common/Modal/usePopup.tsx +++ b/apps/playground/src/components/common/Modal/usePopup.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { useOverlay } from '@toss/use-overlay'; -import { ReactNode, useCallback } from 'react'; +import type { ReactNode } from 'react'; +import { useCallback } from 'react'; import Modal from '@/components/common/Modal'; diff --git a/apps/playground/src/components/common/Portal.tsx b/apps/playground/src/components/common/Portal.tsx index 4e8e327b2..fe1d510f5 100644 --- a/apps/playground/src/components/common/Portal.tsx +++ b/apps/playground/src/components/common/Portal.tsx @@ -1,4 +1,5 @@ -import { FC, PropsWithChildren, useEffect, useId, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { useEffect, useId, useState } from 'react'; import { createPortal } from 'react-dom'; interface Props extends PropsWithChildren { diff --git a/apps/playground/src/components/common/Portal/index.tsx b/apps/playground/src/components/common/Portal/index.tsx index 62527bcbd..0a8d3b34a 100644 --- a/apps/playground/src/components/common/Portal/index.tsx +++ b/apps/playground/src/components/common/Portal/index.tsx @@ -1,4 +1,5 @@ -import { FC, PropsWithChildren, useEffect, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; type PortalProps = PropsWithChildren<{ diff --git a/apps/playground/src/components/common/ResizedImage/index.tsx b/apps/playground/src/components/common/ResizedImage/index.tsx index 384d20126..92d38e502 100644 --- a/apps/playground/src/components/common/ResizedImage/index.tsx +++ b/apps/playground/src/components/common/ResizedImage/index.tsx @@ -1,4 +1,5 @@ -import { FC, ComponentProps, useCallback, useRef, useState, SyntheticEvent } from 'react'; +import type { ComponentProps, FC, SyntheticEvent } from 'react'; +import { useCallback, useRef, useState } from 'react'; import useEnterScreen from '@/hooks/useEnterScreen'; diff --git a/apps/playground/src/components/common/Responsive/Responsive.stories.tsx b/apps/playground/src/components/common/Responsive/Responsive.stories.tsx index 21bcaa0bb..f433400af 100644 --- a/apps/playground/src/components/common/Responsive/Responsive.stories.tsx +++ b/apps/playground/src/components/common/Responsive/Responsive.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Responsive from '@/components/common/Responsive/Responsive'; import ResponsiveProvider from '@/components/common/Responsive/ResponsiveProvider'; diff --git a/apps/playground/src/components/common/Responsive/Responsive.tsx b/apps/playground/src/components/common/Responsive/Responsive.tsx index e84f19be8..03840b4a1 100644 --- a/apps/playground/src/components/common/Responsive/Responsive.tsx +++ b/apps/playground/src/components/common/Responsive/Responsive.tsx @@ -1,5 +1,6 @@ import { Slot } from '@radix-ui/react-slot'; -import { FC, ReactNode, startTransition, useContext, useEffect, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { startTransition, useContext, useEffect, useState } from 'react'; import { ResponsiveContext } from '@/components/common/Responsive/context'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/common/Responsive/ResponsiveProvider.tsx b/apps/playground/src/components/common/Responsive/ResponsiveProvider.tsx index 39828f8a1..1ced064a5 100644 --- a/apps/playground/src/components/common/Responsive/ResponsiveProvider.tsx +++ b/apps/playground/src/components/common/Responsive/ResponsiveProvider.tsx @@ -1,5 +1,5 @@ import { css, Global } from '@emotion/react'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { ResponsiveContext } from '@/components/common/Responsive/context'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/common/ScrollContainer/index.tsx b/apps/playground/src/components/common/ScrollContainer/index.tsx index 136af4d2b..1ffe93888 100644 --- a/apps/playground/src/components/common/ScrollContainer/index.tsx +++ b/apps/playground/src/components/common/ScrollContainer/index.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import * as ScrollArea from '@radix-ui/react-scroll-area'; import { colors } from '@sopt-makers/colors'; -import { forwardRef, ReactNode } from 'react'; +import type { ReactNode } from 'react'; +import { forwardRef } from 'react'; interface Props { className?: string; diff --git a/apps/playground/src/components/common/Select/index.stories.tsx b/apps/playground/src/components/common/Select/index.stories.tsx index ae5b34735..78cd43e2c 100644 --- a/apps/playground/src/components/common/Select/index.stories.tsx +++ b/apps/playground/src/components/common/Select/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Select from '@/components/common/Select'; diff --git a/apps/playground/src/components/common/Select/index.tsx b/apps/playground/src/components/common/Select/index.tsx index eff8c609f..f83f62e14 100644 --- a/apps/playground/src/components/common/Select/index.tsx +++ b/apps/playground/src/components/common/Select/index.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { forwardRef, SelectHTMLAttributes } from 'react'; +import type { SelectHTMLAttributes } from 'react'; +import { forwardRef } from 'react'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/Skeleton/index.tsx b/apps/playground/src/components/common/Skeleton/index.tsx index 415d67c14..35f76d699 100644 --- a/apps/playground/src/components/common/Skeleton/index.tsx +++ b/apps/playground/src/components/common/Skeleton/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; interface SkeletonProps { width?: number; diff --git a/apps/playground/src/components/common/SlideUp/SlideUpEntry.stories.tsx b/apps/playground/src/components/common/SlideUp/SlideUpEntry.stories.tsx index 593412776..13aa8566c 100644 --- a/apps/playground/src/components/common/SlideUp/SlideUpEntry.stories.tsx +++ b/apps/playground/src/components/common/SlideUp/SlideUpEntry.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import SlideUpEntry from '@/components/common/SlideUp/SlideUpEntry'; diff --git a/apps/playground/src/components/common/SlideUp/SlideUpEntry.tsx b/apps/playground/src/components/common/SlideUp/SlideUpEntry.tsx index 35689b108..954184aa8 100644 --- a/apps/playground/src/components/common/SlideUp/SlideUpEntry.tsx +++ b/apps/playground/src/components/common/SlideUp/SlideUpEntry.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { FC } from 'react'; +import type { FC } from 'react'; -import { SlideUpOption } from '@/components/common/SlideUp/types'; +import type { SlideUpOption } from '@/components/common/SlideUp/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/SlideUp/context.ts b/apps/playground/src/components/common/SlideUp/context.ts index 885bf1519..56e53243a 100644 --- a/apps/playground/src/components/common/SlideUp/context.ts +++ b/apps/playground/src/components/common/SlideUp/context.ts @@ -1,6 +1,6 @@ import { createContext } from 'react'; -import { SlideUpController } from '@/components/common/SlideUp/types'; +import type { SlideUpController } from '@/components/common/SlideUp/types'; export const SlideUpContext = createContext(createUninitializedController()); diff --git a/apps/playground/src/components/common/SlideUp/providers/SlideUpProvider.tsx b/apps/playground/src/components/common/SlideUp/providers/SlideUpProvider.tsx index 1a5681d86..c59e56169 100644 --- a/apps/playground/src/components/common/SlideUp/providers/SlideUpProvider.tsx +++ b/apps/playground/src/components/common/SlideUp/providers/SlideUpProvider.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; -import { FC, ReactNode, useMemo, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useMemo, useState } from 'react'; import Portal from '@/components/common/Portal'; import { SlideUpContext } from '@/components/common/SlideUp/context'; import SlideUpEntry from '@/components/common/SlideUp/SlideUpEntry'; -import { SlideUpController, SlideUpEntryData, SlideUpOption } from '@/components/common/SlideUp/types'; +import type { SlideUpController, SlideUpEntryData, SlideUpOption } from '@/components/common/SlideUp/types'; import useAtomicTimeout from '@/components/common/Toast/useAtomicTimeout'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { zIndex } from '@/styles/zIndex'; diff --git a/apps/playground/src/components/common/SlideUp/useToast.ts b/apps/playground/src/components/common/SlideUp/useToast.ts index 168ca16ac..172934d76 100644 --- a/apps/playground/src/components/common/SlideUp/useToast.ts +++ b/apps/playground/src/components/common/SlideUp/useToast.ts @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { SlideUpContext } from '@/components/common/SlideUp/context'; -import { SlideUpOption } from '@/components/common/SlideUp/types'; +import type { SlideUpOption } from '@/components/common/SlideUp/types'; const useSlideUp = () => { const controller = useContext(SlideUpContext); diff --git a/apps/playground/src/components/common/SquareLink/index.stories.tsx b/apps/playground/src/components/common/SquareLink/index.stories.tsx index 75d6aca95..8564ff9f1 100644 --- a/apps/playground/src/components/common/SquareLink/index.stories.tsx +++ b/apps/playground/src/components/common/SquareLink/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import SquareLink from '@/components/common/SquareLink'; diff --git a/apps/playground/src/components/common/SquareLink/index.tsx b/apps/playground/src/components/common/SquareLink/index.tsx index f2b99b7a9..5d5941213 100644 --- a/apps/playground/src/components/common/SquareLink/index.tsx +++ b/apps/playground/src/components/common/SquareLink/index.tsx @@ -1,7 +1,9 @@ import styled from '@emotion/styled'; -import { AnchorHTMLAttributes, ElementType, forwardRef } from 'react'; +import type { AnchorHTMLAttributes, ElementType } from 'react'; +import { forwardRef } from 'react'; -import { ButtonSize, buttonSize, ButtonStyle, buttonStyles } from '@/components/common/SquareLink/style'; +import type { ButtonSize, ButtonStyle } from '@/components/common/SquareLink/style'; +import { buttonSize, buttonStyles } from '@/components/common/SquareLink/style'; import { textStyles } from '@/styles/typography'; interface ButtonProps extends AnchorHTMLAttributes { diff --git a/apps/playground/src/components/common/SquareLink/style.ts b/apps/playground/src/components/common/SquareLink/style.ts index c12557b18..9b77291e8 100644 --- a/apps/playground/src/components/common/SquareLink/style.ts +++ b/apps/playground/src/components/common/SquareLink/style.ts @@ -1,4 +1,5 @@ -import { css, SerializedStyles } from '@emotion/react'; +import type { SerializedStyles } from '@emotion/react'; +import { css } from '@emotion/react'; import { colors } from '@sopt-makers/colors'; export type ButtonStyle = 'default' | 'primary'; diff --git a/apps/playground/src/components/common/Switch/index.stories.tsx b/apps/playground/src/components/common/Switch/index.stories.tsx index 2dfa73b34..2d8ee8674 100644 --- a/apps/playground/src/components/common/Switch/index.stories.tsx +++ b/apps/playground/src/components/common/Switch/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Switch from '@/components/common/Switch'; diff --git a/apps/playground/src/components/common/Switch/index.tsx b/apps/playground/src/components/common/Switch/index.tsx index c3f618ef3..10bbd9418 100644 --- a/apps/playground/src/components/common/Switch/index.tsx +++ b/apps/playground/src/components/common/Switch/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { forwardRef, InputHTMLAttributes } from 'react'; +import type { InputHTMLAttributes } from 'react'; +import { forwardRef } from 'react'; interface SwitchProps extends Omit, 'size'> { size?: { diff --git a/apps/playground/src/components/common/Text/index.stories.tsx b/apps/playground/src/components/common/Text/index.stories.tsx index 7cb18d66d..8017a6a19 100644 --- a/apps/playground/src/components/common/Text/index.stories.tsx +++ b/apps/playground/src/components/common/Text/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/common/Text/index.tsx b/apps/playground/src/components/common/Text/index.tsx index e675d345b..0866b849c 100644 --- a/apps/playground/src/components/common/Text/index.tsx +++ b/apps/playground/src/components/common/Text/index.tsx @@ -1,11 +1,13 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { CSSProperties, FC, HTMLAttributes, PropsWithChildren } from 'react'; +import type { CSSProperties, FC, HTMLAttributes, PropsWithChildren } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -import { space, SpaceProps } from '@/styles/spacing'; -import { baseTextStyles, textStyles, Typography } from '@/styles/typography'; +import type { SpaceProps } from '@/styles/spacing'; +import { space } from '@/styles/spacing'; +import type { Typography } from '@/styles/typography'; +import { baseTextStyles, textStyles } from '@/styles/typography'; const TEXT_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'b', 'small', 'i', 'span', 'del', 'em', 'blockquote'] as const; type As = keyof Pick; interface TextProps extends HTMLAttributes, SpaceProps { diff --git a/apps/playground/src/components/common/TextArea/index.stories.tsx b/apps/playground/src/components/common/TextArea/index.stories.tsx index 49e7e837a..7e5c9abfa 100644 --- a/apps/playground/src/components/common/TextArea/index.stories.tsx +++ b/apps/playground/src/components/common/TextArea/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import FormItem from '@/components/common/form/FormItem'; diff --git a/apps/playground/src/components/common/TextArea/index.tsx b/apps/playground/src/components/common/TextArea/index.tsx index 1b80b421b..6bc5a324e 100644 --- a/apps/playground/src/components/common/TextArea/index.tsx +++ b/apps/playground/src/components/common/TextArea/index.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { forwardRef, TextareaHTMLAttributes, useState } from 'react'; +import type { TextareaHTMLAttributes } from 'react'; +import { forwardRef, useState } from 'react'; import Text from '@/components/common/Text'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/Toast/ToastEntry.stories.tsx b/apps/playground/src/components/common/Toast/ToastEntry.stories.tsx index 0dae6d55d..14a71e244 100644 --- a/apps/playground/src/components/common/Toast/ToastEntry.stories.tsx +++ b/apps/playground/src/components/common/Toast/ToastEntry.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ToastEntry from '@/components/common/Toast/ToastEntry'; diff --git a/apps/playground/src/components/common/Toast/ToastEntry.tsx b/apps/playground/src/components/common/Toast/ToastEntry.tsx index 344300e52..fdfc04b52 100644 --- a/apps/playground/src/components/common/Toast/ToastEntry.tsx +++ b/apps/playground/src/components/common/Toast/ToastEntry.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import ToastMDSEntry from '@/components/common/Toast/ToastMDSEntry'; import IconCheck from '@/public/icons/icon-check.svg'; diff --git a/apps/playground/src/components/common/Toast/ToastMDSEntry.tsx b/apps/playground/src/components/common/Toast/ToastMDSEntry.tsx index 82ed65443..7e9893172 100644 --- a/apps/playground/src/components/common/Toast/ToastMDSEntry.tsx +++ b/apps/playground/src/components/common/Toast/ToastMDSEntry.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/Toast/context.ts b/apps/playground/src/components/common/Toast/context.ts index c024d9de0..4ea773b6e 100644 --- a/apps/playground/src/components/common/Toast/context.ts +++ b/apps/playground/src/components/common/Toast/context.ts @@ -1,6 +1,6 @@ import { createContext } from 'react'; -import { ToastController } from '@/components/common/Toast/types'; +import type { ToastController } from '@/components/common/Toast/types'; export const ToastContext = createContext(createUninitializedController()); diff --git a/apps/playground/src/components/common/Toast/providers/StorybookToastProvider.tsx b/apps/playground/src/components/common/Toast/providers/StorybookToastProvider.tsx index 51779671f..96daef4f1 100644 --- a/apps/playground/src/components/common/Toast/providers/StorybookToastProvider.tsx +++ b/apps/playground/src/components/common/Toast/providers/StorybookToastProvider.tsx @@ -1,8 +1,9 @@ import { action } from '@storybook/addon-actions'; -import { FC, ReactNode, useMemo } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useMemo } from 'react'; import { ToastContext } from '@/components/common/Toast/context'; -import { ToastController } from '@/components/common/Toast/types'; +import type { ToastController } from '@/components/common/Toast/types'; interface StorybookToastProviderProps { children: ReactNode; diff --git a/apps/playground/src/components/common/Toast/providers/ToastProvider.tsx b/apps/playground/src/components/common/Toast/providers/ToastProvider.tsx index 14e7da371..3841c8d71 100644 --- a/apps/playground/src/components/common/Toast/providers/ToastProvider.tsx +++ b/apps/playground/src/components/common/Toast/providers/ToastProvider.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; -import { FC, ReactNode, useMemo, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useMemo, useState } from 'react'; import Portal from '@/components/common/Portal'; import { ToastContext } from '@/components/common/Toast/context'; import ToastEntry from '@/components/common/Toast/ToastEntry'; -import { ToastController, ToastEntryData, ToastOption } from '@/components/common/Toast/types'; +import type { ToastController, ToastEntryData, ToastOption } from '@/components/common/Toast/types'; import useAtomicTimeout from '@/components/common/Toast/useAtomicTimeout'; import { zIndex } from '@/styles/zIndex'; diff --git a/apps/playground/src/components/common/Toast/useAtomicTimeout.ts b/apps/playground/src/components/common/Toast/useAtomicTimeout.ts index b281dbdce..64c6d39d5 100644 --- a/apps/playground/src/components/common/Toast/useAtomicTimeout.ts +++ b/apps/playground/src/components/common/Toast/useAtomicTimeout.ts @@ -1,6 +1,6 @@ import { useRef } from 'react'; -import { TimeoutID } from '@/types'; +import type { TimeoutID } from '@/types'; const useAtomicTimeout = () => { const timeoutRef = useRef(null); diff --git a/apps/playground/src/components/common/Toast/useToast.ts b/apps/playground/src/components/common/Toast/useToast.ts index d1b4b404b..55e5f4caa 100644 --- a/apps/playground/src/components/common/Toast/useToast.ts +++ b/apps/playground/src/components/common/Toast/useToast.ts @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { ToastContext } from '@/components/common/Toast/context'; -import { ToastOption } from '@/components/common/Toast/types'; +import type { ToastOption } from '@/components/common/Toast/types'; const useToast = () => { const controller = useContext(ToastContext); diff --git a/apps/playground/src/components/common/form/FormCollapsible.stories.tsx b/apps/playground/src/components/common/form/FormCollapsible.stories.tsx index e3785e182..9926922d5 100644 --- a/apps/playground/src/components/common/form/FormCollapsible.stories.tsx +++ b/apps/playground/src/components/common/form/FormCollapsible.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import FormCollapsible from './FormCollapsible'; diff --git a/apps/playground/src/components/common/form/FormCollapsible.tsx b/apps/playground/src/components/common/form/FormCollapsible.tsx index caa2a041c..2d6c18df1 100644 --- a/apps/playground/src/components/common/form/FormCollapsible.tsx +++ b/apps/playground/src/components/common/form/FormCollapsible.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import * as Collapsible from '@radix-ui/react-collapsible'; import { colors } from '@sopt-makers/colors'; import { AnimatePresence, m } from 'framer-motion'; -import { FC, PropsWithChildren, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { useState } from 'react'; import Text from '@/components/common/Text'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/form/FormItem.stories.tsx b/apps/playground/src/components/common/form/FormItem.stories.tsx index 6c26631d1..0ed0ab30d 100644 --- a/apps/playground/src/components/common/form/FormItem.stories.tsx +++ b/apps/playground/src/components/common/form/FormItem.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Input from '@/components/common/Input'; import TextArea from '@/components/common/TextArea'; diff --git a/apps/playground/src/components/common/form/FormItem.tsx b/apps/playground/src/components/common/form/FormItem.tsx index a1feae249..e2ef2ae55 100644 --- a/apps/playground/src/components/common/form/FormItem.tsx +++ b/apps/playground/src/components/common/form/FormItem.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { IconAlertCircle } from '@sopt-makers/icons'; -import React, { FC, HTMLAttributes, PropsWithChildren } from 'react'; +import type { FC, HTMLAttributes, PropsWithChildren } from 'react'; +import React from 'react'; import Text from '@/components/common/Text'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/common/form/FormProgress.stories.tsx b/apps/playground/src/components/common/form/FormProgress.stories.tsx index e7b21a776..dab6a535d 100644 --- a/apps/playground/src/components/common/form/FormProgress.stories.tsx +++ b/apps/playground/src/components/common/form/FormProgress.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import FormProgress from '@/components/common/form/FormProgress'; diff --git a/apps/playground/src/components/common/form/FormProgress.tsx b/apps/playground/src/components/common/form/FormProgress.tsx index 165f291e9..abf06d92e 100644 --- a/apps/playground/src/components/common/form/FormProgress.tsx +++ b/apps/playground/src/components/common/form/FormProgress.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import * as Progress from '@radix-ui/react-progress'; import { colors } from '@sopt-makers/colors'; -import { FC, useMemo } from 'react'; +import type { FC } from 'react'; +import { useMemo } from 'react'; import FormTitle from '@/components/common/form/FormTitle'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/common/form/FormTitle.stories.tsx b/apps/playground/src/components/common/form/FormTitle.stories.tsx index 2994f08f9..3ed961a63 100644 --- a/apps/playground/src/components/common/form/FormTitle.stories.tsx +++ b/apps/playground/src/components/common/form/FormTitle.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import FormTitle from '@/components/common/form/FormTitle'; diff --git a/apps/playground/src/components/common/form/FormTitle.tsx b/apps/playground/src/components/common/form/FormTitle.tsx index 2da362f88..6fd8c7bd2 100644 --- a/apps/playground/src/components/common/form/FormTitle.tsx +++ b/apps/playground/src/components/common/form/FormTitle.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { FC, HTMLAttributes, PropsWithChildren } from 'react'; +import type { FC, HTMLAttributes, PropsWithChildren } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -import { Typography } from '@/styles/typography'; +import type { Typography } from '@/styles/typography'; export interface FormTitleProps extends HTMLAttributes { essential?: boolean; diff --git a/apps/playground/src/components/common/form/RHFControllerFormItem.tsx b/apps/playground/src/components/common/form/RHFControllerFormItem.tsx index 9f1c24457..a23129ac4 100644 --- a/apps/playground/src/components/common/form/RHFControllerFormItem.tsx +++ b/apps/playground/src/components/common/form/RHFControllerFormItem.tsx @@ -1,7 +1,9 @@ import React from 'react'; -import { FieldPath, FieldValues, useController, UseControllerProps } from 'react-hook-form'; +import type { FieldPath, FieldValues, UseControllerProps } from 'react-hook-form'; +import { useController } from 'react-hook-form'; -import FormItem, { FormItemProps } from '@/components/common/form/FormItem'; +import type { FormItemProps } from '@/components/common/form/FormItem'; +import FormItem from '@/components/common/form/FormItem'; type RHFControllerFormItemProps< T extends React.ElementType, diff --git a/apps/playground/src/components/common/form/TextFieldLineBreak/index.stories.tsx b/apps/playground/src/components/common/form/TextFieldLineBreak/index.stories.tsx index c7067f072..1ac154fe0 100644 --- a/apps/playground/src/components/common/form/TextFieldLineBreak/index.stories.tsx +++ b/apps/playground/src/components/common/form/TextFieldLineBreak/index.stories.tsx @@ -1,5 +1,6 @@ +import type { Meta } from '@storybook/react'; + import TextFieldLineBreak from '@/components/common/form/TextFieldLineBreak'; -import { Meta } from '@storybook/react'; export default { component: TextFieldLineBreak, diff --git a/apps/playground/src/components/common/form/TextFieldLineBreak/index.tsx b/apps/playground/src/components/common/form/TextFieldLineBreak/index.tsx index 7a762392f..236147d34 100644 --- a/apps/playground/src/components/common/form/TextFieldLineBreak/index.tsx +++ b/apps/playground/src/components/common/form/TextFieldLineBreak/index.tsx @@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { TextArea } from '@sopt-makers/ui'; -import { CoffeechatFormPaths } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormPaths } from '@/components/coffeechat/upload/CoffeechatForm/types'; interface TextFieldLineBreakProps { name: CoffeechatFormPaths; diff --git a/apps/playground/src/components/debug/Debugger.tsx b/apps/playground/src/components/debug/Debugger.tsx index d55185a7f..3ac34f09c 100644 --- a/apps/playground/src/components/debug/Debugger.tsx +++ b/apps/playground/src/components/debug/Debugger.tsx @@ -1,11 +1,12 @@ -import { FC, useEffect, useRef, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useRef, useState } from 'react'; import AccessTokenPanel from '@/components/debug/panels/AccessTokenPanel'; import NavigationPanel from '@/components/debug/panels/NavigationPanel'; import SideBar from '@/components/debug/SideBar'; import SideToggleButton from '@/components/debug/SideToggleButton'; -import TimecapsopDelteButton from '@/components/resolution/delete'; import BalanceOpenButton from '@/components/matchmember/BalanceOpenButton'; +import TimecapsopDelteButton from '@/components/resolution/delete'; const Debugger: FC = () => { const [isOpen, setIsOpen] = useState(false); diff --git a/apps/playground/src/components/debug/Panel.tsx b/apps/playground/src/components/debug/Panel.tsx index 045869d10..fa1d30aaa 100644 --- a/apps/playground/src/components/debug/Panel.tsx +++ b/apps/playground/src/components/debug/Panel.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import * as Collapsible from '@radix-ui/react-collapsible'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useState } from 'react'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/debug/SideBar.tsx b/apps/playground/src/components/debug/SideBar.tsx index 281f08bb4..f54f8ec9d 100644 --- a/apps/playground/src/components/debug/SideBar.tsx +++ b/apps/playground/src/components/debug/SideBar.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { forwardRef, ReactNode } from 'react'; +import type { ReactNode } from 'react'; +import { forwardRef } from 'react'; import { useEscapeCallback } from '@/hooks/useEscapeCallback'; diff --git a/apps/playground/src/components/debug/panels/AccessTokenPanel.tsx b/apps/playground/src/components/debug/panels/AccessTokenPanel.tsx index fb1adac72..27defa6bb 100644 --- a/apps/playground/src/components/debug/panels/AccessTokenPanel.tsx +++ b/apps/playground/src/components/debug/panels/AccessTokenPanel.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, useMemo, useReducer } from 'react'; +import type { FC } from 'react'; +import { useMemo, useReducer } from 'react'; import { useRecoilState } from 'recoil'; import { accessTokenAtom } from '@/components/auth/states/accessTokenAtom'; diff --git a/apps/playground/src/components/debug/panels/NavigationPanel.tsx b/apps/playground/src/components/debug/panels/NavigationPanel.tsx index 3ab567e33..3c394d7c2 100644 --- a/apps/playground/src/components/debug/panels/NavigationPanel.tsx +++ b/apps/playground/src/components/debug/panels/NavigationPanel.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import Panel from '@/components/debug/Panel'; import { ActionBox, ActionButton } from '@/components/debug/styles'; diff --git a/apps/playground/src/components/eventLogger/components/AmplitudeLogViewer.tsx b/apps/playground/src/components/eventLogger/components/AmplitudeLogViewer.tsx index 405c33b2e..3104884ca 100644 --- a/apps/playground/src/components/eventLogger/components/AmplitudeLogViewer.tsx +++ b/apps/playground/src/components/eventLogger/components/AmplitudeLogViewer.tsx @@ -5,8 +5,8 @@ interface LogEntry { id: string; type: 'clickEvent' | 'submitEvent' | 'pageViewEvent' | 'impressionEvent' | 'userProperties'; key?: string; - params?: any[]; - properties?: any; + params?: unknown[]; + properties?: Record; timestamp: Date; } @@ -28,7 +28,7 @@ const AmplitudeLogViewer = ({ isDev = false }: AmplitudeLogViewerProps) => { } // console.log 오버라이드 - console.log = (...args: any[]) => { + console.log = (...args: unknown[]) => { originalConsole.current?.(...args); // EventLogger 로그만 캡처 @@ -42,9 +42,9 @@ const AmplitudeLogViewer = ({ isDev = false }: AmplitudeLogViewerProps) => { }; if (logType === 'userProperties') { - newLog.properties = args[1]; + newLog.properties = args[1] as Record; } else { - newLog.key = args[1]; + newLog.key = args[1] as string; newLog.params = args.slice(2); } diff --git a/apps/playground/src/components/eventLogger/components/LoggingClick.tsx b/apps/playground/src/components/eventLogger/components/LoggingClick.tsx index 6331ee7b0..6035f8687 100644 --- a/apps/playground/src/components/eventLogger/components/LoggingClick.tsx +++ b/apps/playground/src/components/eventLogger/components/LoggingClick.tsx @@ -1,8 +1,9 @@ -import React, { ReactElement, useCallback } from 'react'; +import type { ReactElement } from 'react'; +import React, { useCallback } from 'react'; -import { ClickEvents } from '@/components/eventLogger/events'; +import type { ClickEvents } from '@/components/eventLogger/events'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; -import { ParamTuple } from '@/components/eventLogger/types'; +import type { ParamTuple } from '@/components/eventLogger/types'; type LoggingClickProps = { eventKey: Key; diff --git a/apps/playground/src/components/eventLogger/components/LoggingImpression.tsx b/apps/playground/src/components/eventLogger/components/LoggingImpression.tsx index 5e805ee67..1a76a472d 100644 --- a/apps/playground/src/components/eventLogger/components/LoggingImpression.tsx +++ b/apps/playground/src/components/eventLogger/components/LoggingImpression.tsx @@ -1,9 +1,10 @@ -import { ImpressionArea, ImpressionAreaProps } from '@toss/impression-area'; -import { PropsWithChildren, ReactNode } from 'react'; +import type { ImpressionAreaProps } from '@toss/impression-area'; +import { ImpressionArea } from '@toss/impression-area'; +import type { PropsWithChildren, ReactNode } from 'react'; -import { ImpressionEvents } from '@/components/eventLogger/events'; +import type { ImpressionEvents } from '@/components/eventLogger/events'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; -import { ParamTuple } from '@/components/eventLogger/types'; +import type { ParamTuple } from '@/components/eventLogger/types'; type LoggingImpressionProps = { eventKey: Key; diff --git a/apps/playground/src/components/eventLogger/components/LoggingPageView.tsx b/apps/playground/src/components/eventLogger/components/LoggingPageView.tsx index 880fbf5cd..f6c8d0332 100644 --- a/apps/playground/src/components/eventLogger/components/LoggingPageView.tsx +++ b/apps/playground/src/components/eventLogger/components/LoggingPageView.tsx @@ -1,8 +1,8 @@ -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; -import { PageViewEvents } from '@/components/eventLogger/events'; +import type { PageViewEvents } from '@/components/eventLogger/events'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; -import { ParamTuple } from '@/components/eventLogger/types'; +import type { ParamTuple } from '@/components/eventLogger/types'; import { useRunOnce } from '@/hooks/useRunOnce'; type LoggingPageViewProps = { diff --git a/apps/playground/src/components/eventLogger/context.ts b/apps/playground/src/components/eventLogger/context.ts index e7788293e..e3177a391 100644 --- a/apps/playground/src/components/eventLogger/context.ts +++ b/apps/playground/src/components/eventLogger/context.ts @@ -1,6 +1,6 @@ import { createContext } from 'react'; -import { EventLoggerController } from '@/components/eventLogger/types'; +import type { EventLoggerController } from '@/components/eventLogger/types'; export const EventLoggerContext = createContext(createUninitializedController()); diff --git a/apps/playground/src/components/eventLogger/controllers/amplitude.ts b/apps/playground/src/components/eventLogger/controllers/amplitude.ts index 72a7ed054..aae948d34 100644 --- a/apps/playground/src/components/eventLogger/controllers/amplitude.ts +++ b/apps/playground/src/components/eventLogger/controllers/amplitude.ts @@ -1,7 +1,7 @@ import { createInstance, Identify } from '@amplitude/analytics-browser'; -import { UserProperties } from '@/components/eventLogger/events'; -import { EventLoggerController } from '@/components/eventLogger/types'; +import type { UserProperties } from '@/components/eventLogger/events'; +import type { EventLoggerController } from '@/components/eventLogger/types'; export function createAmplitudeController(apiKey: string, userId: string | undefined): EventLoggerController { const instance = createInstance(); diff --git a/apps/playground/src/components/eventLogger/controllers/consoleLog.ts b/apps/playground/src/components/eventLogger/controllers/consoleLog.ts index a32014762..59c26344a 100644 --- a/apps/playground/src/components/eventLogger/controllers/consoleLog.ts +++ b/apps/playground/src/components/eventLogger/controllers/consoleLog.ts @@ -1,4 +1,4 @@ -import { EventLoggerController } from '@/components/eventLogger/types'; +import type { EventLoggerController } from '@/components/eventLogger/types'; export function createConsoleLogController(): EventLoggerController { return { diff --git a/apps/playground/src/components/eventLogger/controllers/storybookAction.ts b/apps/playground/src/components/eventLogger/controllers/storybookAction.ts index 456a3797c..b0023ecc5 100644 --- a/apps/playground/src/components/eventLogger/controllers/storybookAction.ts +++ b/apps/playground/src/components/eventLogger/controllers/storybookAction.ts @@ -1,6 +1,6 @@ import { action } from '@storybook/addon-actions'; -import { EventLoggerController } from '@/components/eventLogger/types'; +import type { EventLoggerController } from '@/components/eventLogger/types'; export function createStorybookActionController(): EventLoggerController { return { diff --git a/apps/playground/src/components/eventLogger/providers/AmplitudeProvider.tsx b/apps/playground/src/components/eventLogger/providers/AmplitudeProvider.tsx index ffcd9692f..9debd06c3 100644 --- a/apps/playground/src/components/eventLogger/providers/AmplitudeProvider.tsx +++ b/apps/playground/src/components/eventLogger/providers/AmplitudeProvider.tsx @@ -1,4 +1,5 @@ -import { FC, ReactNode, useEffect, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useEffect, useState } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { useGetMemberProperty } from '@/api/endpoint/members/getMemberProperty'; diff --git a/apps/playground/src/components/eventLogger/providers/StorybookEventLoggerProvider.tsx b/apps/playground/src/components/eventLogger/providers/StorybookEventLoggerProvider.tsx index 51ccb1641..27face1f8 100644 --- a/apps/playground/src/components/eventLogger/providers/StorybookEventLoggerProvider.tsx +++ b/apps/playground/src/components/eventLogger/providers/StorybookEventLoggerProvider.tsx @@ -1,4 +1,5 @@ -import { FC, ReactNode, useMemo } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useMemo } from 'react'; import { EventLoggerContext } from '@/components/eventLogger/context'; import { createStorybookActionController } from '@/components/eventLogger/controllers/storybookAction'; diff --git a/apps/playground/src/components/eventLogger/types.ts b/apps/playground/src/components/eventLogger/types.ts index dff0fdd24..9198727bf 100644 --- a/apps/playground/src/components/eventLogger/types.ts +++ b/apps/playground/src/components/eventLogger/types.ts @@ -1,4 +1,4 @@ -import { +import type { ClickEvents, ImpressionEvents, PageViewEvents, diff --git a/apps/playground/src/components/feed/common/FeedDropdown.stories.tsx b/apps/playground/src/components/feed/common/FeedDropdown.stories.tsx index 064544650..c133cf2a2 100644 --- a/apps/playground/src/components/feed/common/FeedDropdown.stories.tsx +++ b/apps/playground/src/components/feed/common/FeedDropdown.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { IconMoreVert } from '@/components/feed/common/Icon'; diff --git a/apps/playground/src/components/feed/common/FeedDropdown.tsx b/apps/playground/src/components/feed/common/FeedDropdown.tsx index 4eef68dde..f52bad1c8 100644 --- a/apps/playground/src/components/feed/common/FeedDropdown.tsx +++ b/apps/playground/src/components/feed/common/FeedDropdown.tsx @@ -3,7 +3,8 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { colors } from '@sopt-makers/colors'; import { m } from 'framer-motion'; import dynamic from 'next/dynamic'; -import React, { PropsWithChildren, ReactNode } from 'react'; +import type { PropsWithChildren, ReactNode } from 'react'; +import React from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/feed/common/Icon.tsx b/apps/playground/src/components/feed/common/Icon.tsx index b316efefb..3f13e42b6 100644 --- a/apps/playground/src/components/feed/common/Icon.tsx +++ b/apps/playground/src/components/feed/common/Icon.tsx @@ -1,5 +1,5 @@ import { colors } from '@sopt-makers/colors'; -import { HTMLAttributes } from 'react'; +import type { HTMLAttributes } from 'react'; export interface IconProps extends HTMLAttributes { size?: number; diff --git a/apps/playground/src/components/feed/common/MentionDropdown.tsx b/apps/playground/src/components/feed/common/MentionDropdown.tsx index 6ee42bbee..9e67ded49 100644 --- a/apps/playground/src/components/feed/common/MentionDropdown.tsx +++ b/apps/playground/src/components/feed/common/MentionDropdown.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { useVirtualizer } from '@tanstack/react-virtual'; -import { RefObject, useCallback, useEffect, useRef, useState } from 'react'; +import type { RefObject } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom'; import { getMemberProfileById } from '@/api/endpoint_LEGACY/members'; diff --git a/apps/playground/src/components/feed/common/hooks/useDeleteFeed.ts b/apps/playground/src/components/feed/common/hooks/useDeleteFeed.ts index 154e74a3b..04e72f3bd 100644 --- a/apps/playground/src/components/feed/common/hooks/useDeleteFeed.ts +++ b/apps/playground/src/components/feed/common/hooks/useDeleteFeed.ts @@ -1,7 +1,7 @@ +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useDeletePostMutation } from '@/api/endpoint/feed/deletePost'; import { useGetPostsInfiniteQuery } from '@/api/endpoint/feed/getPosts'; diff --git a/apps/playground/src/components/feed/common/hooks/useDeleteQuestion.ts b/apps/playground/src/components/feed/common/hooks/useDeleteQuestion.ts index 22ae434b3..6f347e37f 100644 --- a/apps/playground/src/components/feed/common/hooks/useDeleteQuestion.ts +++ b/apps/playground/src/components/feed/common/hooks/useDeleteQuestion.ts @@ -1,9 +1,9 @@ import { colors } from '@sopt-makers/colors'; +import { useToast } from '@sopt-makers/ui'; import { useDeleteMemberQuestion, useDeleteMemberQuestionAnswer } from '@/api/endpoint/members/deleteMemberQuestion'; import useConfirm from '@/components/common/Modal/useConfirm'; import { zIndex } from '@/styles/zIndex'; -import { useToast } from '@sopt-makers/ui'; interface Options { questionId: number; diff --git a/apps/playground/src/components/feed/common/hooks/useMention.ts b/apps/playground/src/components/feed/common/hooks/useMention.ts index 787553513..f85f95830 100644 --- a/apps/playground/src/components/feed/common/hooks/useMention.ts +++ b/apps/playground/src/components/feed/common/hooks/useMention.ts @@ -1,6 +1,7 @@ import { colors } from '@sopt-makers/colors'; import { useDebounce } from '@toss/react'; -import { RefObject, useState } from 'react'; +import type { RefObject } from 'react'; +import { useState } from 'react'; import useGetMembersByNameQuery from '@/components/projects/upload/hooks/useGetMembersByNameQuery'; diff --git a/apps/playground/src/components/feed/common/hooks/useShareFeed.ts b/apps/playground/src/components/feed/common/hooks/useShareFeed.ts index 5d716d38c..f9e4d906a 100644 --- a/apps/playground/src/components/feed/common/hooks/useShareFeed.ts +++ b/apps/playground/src/components/feed/common/hooks/useShareFeed.ts @@ -1,4 +1,4 @@ -import { playgroundLink } from '@sopt/ui'; +import { playgroundLink } from '@sopt/constant'; import { useCopyText } from '@/hooks/useCopyText'; diff --git a/apps/playground/src/components/feed/common/hooks/useToggleLike.ts b/apps/playground/src/components/feed/common/hooks/useToggleLike.ts index 8c48afdbc..ce11e525c 100644 --- a/apps/playground/src/components/feed/common/hooks/useToggleLike.ts +++ b/apps/playground/src/components/feed/common/hooks/useToggleLike.ts @@ -1,4 +1,4 @@ -import { Params } from 'next/dist/shared/lib/router/utils/route-matcher'; +import type { Params } from 'next/dist/shared/lib/router/utils/route-matcher'; import { useToggleLikeMutation } from '@/api/endpoint/feed/postLike'; diff --git a/apps/playground/src/components/feed/common/queryParam.tsx b/apps/playground/src/components/feed/common/queryParam.tsx index 24190a9b1..8d77db68a 100644 --- a/apps/playground/src/components/feed/common/queryParam.tsx +++ b/apps/playground/src/components/feed/common/queryParam.tsx @@ -1,7 +1,8 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import type { ParsedUrlQuery } from 'querystring'; -import { ComponentPropsWithoutRef, forwardRef } from 'react'; +import type { ComponentPropsWithoutRef } from 'react'; +import { forwardRef } from 'react'; import { StringParam, useQueryParam, withDefault } from 'use-query-params'; /** diff --git a/apps/playground/src/components/feed/common/utils/parseMention.tsx b/apps/playground/src/components/feed/common/utils/parseMention.tsx index 5fd01eac9..bd5ac2653 100644 --- a/apps/playground/src/components/feed/common/utils/parseMention.tsx +++ b/apps/playground/src/components/feed/common/utils/parseMention.tsx @@ -1,12 +1,14 @@ import { colors } from '@sopt-makers/colors'; -import { useRouter } from 'next/router'; +import type { useRouter } from 'next/router'; import { ANONYMOUS_MEMBER_ID } from '@/components/feed/constants'; import { playgroundLink } from '@/constants/links'; // -1은 익명 멤버 id를 의미 +// eslint-disable-next-line no-useless-escape -- [ and ] must be escaped in character class for literal match export const mentionRegex = /@([^\[\]@]+?)\[((?:-1|\d+))\]/g; const mentionSpanRegex = /]*data-id="((?:-1|\d+))"[^>]*>@([^<]+)<\/span>/g; +// eslint-disable-next-line no-useless-escape -- [ and ] must be escaped in character class for literal match export const anonymouseMentionRegex = /@([^\[\]@]+?)\[((?:-1))\]/g; export const extractAnonymousMentionNames = (text: string) => { diff --git a/apps/playground/src/components/feed/detail/DetailFeedCard.stories.tsx b/apps/playground/src/components/feed/detail/DetailFeedCard.stories.tsx index 114c4059d..904de92cd 100644 --- a/apps/playground/src/components/feed/detail/DetailFeedCard.stories.tsx +++ b/apps/playground/src/components/feed/detail/DetailFeedCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import FeedLike from '@/components/feed/common/FeedLike'; diff --git a/apps/playground/src/components/feed/detail/DetailFeedCard.tsx b/apps/playground/src/components/feed/detail/DetailFeedCard.tsx index afd48b355..6f209a0dc 100644 --- a/apps/playground/src/components/feed/detail/DetailFeedCard.tsx +++ b/apps/playground/src/components/feed/detail/DetailFeedCard.tsx @@ -9,7 +9,8 @@ import { Flex, Stack } from '@toss/emotion-utils'; import { m } from 'framer-motion'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { forwardRef, PropsWithChildren, ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react'; +import type { PropsWithChildren, ReactNode } from 'react'; +import { forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react'; import { useContext } from 'react'; import { useResetRecoilState } from 'recoil'; @@ -23,7 +24,8 @@ import Text from '@/components/common/Text'; import FeedLike from '@/components/feed/common/FeedLike'; import useBlindWriterPromise from '@/components/feed/common/hooks/useBlindWriterPromise'; import { useCursorPosition } from '@/components/feed/common/hooks/useCursorPosition'; -import useMention, { Member } from '@/components/feed/common/hooks/useMention'; +import type { Member } from '@/components/feed/common/hooks/useMention'; +import useMention from '@/components/feed/common/hooks/useMention'; import { IconChevronLeft, IconChevronRight, @@ -776,7 +778,7 @@ const Input = ({ value, onChange, isBlindChecked, onChangeIsBlindChecked, isPend const handleCheckBlindWriter = (isBlindWriter: boolean) => { if (sessionStorage.getItem('hasSeenBlindWriterAlert') === null) { - isBlindWriter && handleShowBlindWriterPromise(); + if (isBlindWriter) handleShowBlindWriterPromise(); sessionStorage.setItem('hasSeenBlindWriterAlert', 'seen'); } onChangeIsBlindChecked(isBlindWriter); diff --git a/apps/playground/src/components/feed/detail/FeedDetail.tsx b/apps/playground/src/components/feed/detail/FeedDetail.tsx index c3eed2583..6d8bd9830 100644 --- a/apps/playground/src/components/feed/detail/FeedDetail.tsx +++ b/apps/playground/src/components/feed/detail/FeedDetail.tsx @@ -1,11 +1,12 @@ +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { IconAlertTriangle, IconTrash, IconWrite } from '@sopt-makers/icons'; import { useQueryClient } from '@tanstack/react-query'; import { Flex } from '@toss/emotion-utils'; import { ErrorBoundary } from '@toss/error-boundary'; import Link from 'next/link'; -import { playgroundLink } from '@sopt/ui'; -import { createContext, ReactNode, useRef } from 'react'; +import type { ReactNode } from 'react'; +import { createContext, useRef } from 'react'; import { useState } from 'react'; import { useEffect } from 'react'; diff --git a/apps/playground/src/components/feed/detail/FeedDetailComments.tsx b/apps/playground/src/components/feed/detail/FeedDetailComments.tsx index b4237a1d7..398c886fc 100644 --- a/apps/playground/src/components/feed/detail/FeedDetailComments.tsx +++ b/apps/playground/src/components/feed/detail/FeedDetailComments.tsx @@ -2,11 +2,11 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { IconAlertTriangle, IconTrash } from '@sopt-makers/icons'; import { Flex } from '@toss/emotion-utils'; -import { FC } from 'react'; -import { z } from 'zod'; +import type { FC } from 'react'; +import type { z } from 'zod'; +import type { recursiveCommentSchema } from '@/api/endpoint/feed/getComment'; import { useGetCommentQuery } from '@/api/endpoint/feed/getComment'; -import { recursiveCommentSchema } from '@/api/endpoint/feed/getComment'; import { useGetPostQuery } from '@/api/endpoint/feed/getPost'; import FeedDropdown from '@/components/feed/common/FeedDropdown'; import { useDeleteComment } from '@/components/feed/common/hooks/useDeleteComment'; diff --git a/apps/playground/src/components/feed/detail/FeedDetailContent.tsx b/apps/playground/src/components/feed/detail/FeedDetailContent.tsx index e2fe0bf81..b28d4dcd1 100644 --- a/apps/playground/src/components/feed/detail/FeedDetailContent.tsx +++ b/apps/playground/src/components/feed/detail/FeedDetailContent.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@tanstack/react-query'; -import { FC } from 'react'; +import type { FC } from 'react'; import { getCategory } from '@/api/endpoint/feed/getCategory'; import { useGetCommentQuery } from '@/api/endpoint/feed/getComment'; diff --git a/apps/playground/src/components/feed/detail/FeedDetailInput.tsx b/apps/playground/src/components/feed/detail/FeedDetailInput.tsx index c599f0c5f..a9982fde3 100644 --- a/apps/playground/src/components/feed/detail/FeedDetailInput.tsx +++ b/apps/playground/src/components/feed/detail/FeedDetailInput.tsx @@ -1,5 +1,6 @@ -import { playgroundLink } from '@sopt/ui'; -import { FC, useContext } from 'react'; +import { playgroundLink } from '@sopt/constant'; +import type { FC } from 'react'; +import { useContext } from 'react'; import { atomFamily, useRecoilState } from 'recoil'; import { useGetCommentQuery } from '@/api/endpoint/feed/getComment'; @@ -26,6 +27,7 @@ export const commentAtomFamily = atomFamily({ key: 'commentAtomFamily', default: () => ({ text: '', isBlindWriter: false }), }); +// eslint-disable-next-line no-useless-escape -- [ and ] must be escaped in character class for literal match export const anonymouseMentionRegex = /@([^\[\]@]+?)\[((?:-1))\]/g; const FeedDetailInput: FC = ({ @@ -97,6 +99,7 @@ const FeedDetailInput: FC = ({ referral, isBlindWriter: commentData.isBlindWriter, category: loggingCategory, + // eslint-disable-next-line no-useless-escape -- [ and ] must be escaped for literal match mention: /@([^\[\]\s@]+)\[(\d+)\]/.test(commentData.text), }); onSubmitted(); diff --git a/apps/playground/src/components/feed/detail/slider/FeedImageSlider.stories.tsx b/apps/playground/src/components/feed/detail/slider/FeedImageSlider.stories.tsx index e44b3cef6..91ce9beff 100644 --- a/apps/playground/src/components/feed/detail/slider/FeedImageSlider.stories.tsx +++ b/apps/playground/src/components/feed/detail/slider/FeedImageSlider.stories.tsx @@ -1,5 +1,5 @@ import { colors } from '@sopt-makers/colors'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Stack } from '@toss/emotion-utils'; import { useState } from 'react'; @@ -24,7 +24,7 @@ const 노트북당근 = const IMAGES = [주우재먹방, 당근데탑큰것, 노트북당근, 사과점수]; -export const 기본 = () => { +export const Default = () => { const [opened, setOpened] = useState(false); return ( @@ -40,7 +40,7 @@ export const 기본 = () => { ); }; -export const 이미지한개 = () => { +export const SingleImage = () => { const [opened, setOpened] = useState(false); return ( diff --git a/apps/playground/src/components/feed/home/RecentArea/RecentCard.stories.tsx b/apps/playground/src/components/feed/home/RecentArea/RecentCard.stories.tsx index 0872fba9f..2d8c804e4 100644 --- a/apps/playground/src/components/feed/home/RecentArea/RecentCard.stories.tsx +++ b/apps/playground/src/components/feed/home/RecentArea/RecentCard.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { RecentPosts } from '@/api/endpoint/feed/getRecentPosts'; +import type { RecentPosts } from '@/api/endpoint/feed/getRecentPosts'; import RecentCard from './RecentCard'; diff --git a/apps/playground/src/components/feed/home/RecentArea/RecentCard.tsx b/apps/playground/src/components/feed/home/RecentArea/RecentCard.tsx index 040b0b866..07524db41 100644 --- a/apps/playground/src/components/feed/home/RecentArea/RecentCard.tsx +++ b/apps/playground/src/components/feed/home/RecentArea/RecentCard.tsx @@ -2,15 +2,15 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import Link from 'next/link'; +import { useRouter } from 'next/router'; -import { RecentPosts } from '@/api/endpoint/feed/getRecentPosts'; +import type { RecentPosts } from '@/api/endpoint/feed/getRecentPosts'; import Text from '@/components/common/Text'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; import { parseMentionsToJSX } from '@/components/feed/common/utils/parseMention'; import { QUESTION_CATEGORY_ID } from '@/components/feed/constants'; import FeedIcon from '@/components/feed/home/RecentArea/FeedIcon'; import VoteIcon from '@/public/icons/icon-vote.svg'; -import { useRouter } from 'next/router'; interface RecentCardProps { recentPosts: RecentPosts; diff --git a/apps/playground/src/components/feed/home/SopticleArea/SopticleCard.tsx b/apps/playground/src/components/feed/home/SopticleArea/SopticleCard.tsx index ad4922273..ddd495fa3 100644 --- a/apps/playground/src/components/feed/home/SopticleArea/SopticleCard.tsx +++ b/apps/playground/src/components/feed/home/SopticleArea/SopticleCard.tsx @@ -3,11 +3,11 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import Link from 'next/link'; -import { RecentSopticleType } from '@/api/endpoint/feed/getRecentSopticle'; +import type { RecentSopticleType } from '@/api/endpoint/feed/getRecentSopticle'; import Text from '@/components/common/Text'; +import { getMemberInfo } from '@/components/feed/common/utils'; import { SOPTICLE_CATEGORY_ID } from '@/components/feed/constants'; import FeedUrlCard from '@/components/feed/list/FeedUrlCard'; -import { getMemberInfo } from '@/components/feed/common/utils'; interface SopticleCardProps { sopticle: RecentSopticleType; diff --git a/apps/playground/src/components/feed/list/CategorySelect.tsx b/apps/playground/src/components/feed/list/CategorySelect.tsx index ae6cd30df..06500cad4 100644 --- a/apps/playground/src/components/feed/list/CategorySelect.tsx +++ b/apps/playground/src/components/feed/list/CategorySelect.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { FC, useRef } from 'react'; +import type { FC } from 'react'; +import { useRef } from 'react'; import { useGetPostsInfiniteQuery } from '@/api/endpoint/feed/getPosts'; import HorizontalScroller from '@/components/common/HorizontalScroller'; diff --git a/apps/playground/src/components/feed/list/CrewFeedList/index.tsx b/apps/playground/src/components/feed/list/CrewFeedList/index.tsx index e929e47e4..ed4c83cfc 100644 --- a/apps/playground/src/components/feed/list/CrewFeedList/index.tsx +++ b/apps/playground/src/components/feed/list/CrewFeedList/index.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { useRouter } from 'next/router'; import { useRef } from 'react'; -import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'; +import type { VirtuosoHandle } from 'react-virtuoso'; +import { Virtuoso } from 'react-virtuoso'; import { atom, useRecoilState } from 'recoil'; import { useGetCrewPostInfiniteQuery } from '@/api/crew/getCrewPost'; diff --git a/apps/playground/src/components/feed/list/FeedCard.stories.tsx b/apps/playground/src/components/feed/list/FeedCard.stories.tsx index 3b482359e..825ef1134 100644 --- a/apps/playground/src/components/feed/list/FeedCard.stories.tsx +++ b/apps/playground/src/components/feed/list/FeedCard.stories.tsx @@ -1,5 +1,5 @@ -import { Meta } from '@storybook/react'; -import { ComponentProps } from 'react'; +import type { Meta } from '@storybook/react'; +import type { ComponentProps } from 'react'; import FeedLike from '@/components/feed/common/FeedLike'; diff --git a/apps/playground/src/components/feed/list/FeedCard.tsx b/apps/playground/src/components/feed/list/FeedCard.tsx index 084c99428..12b9fda54 100644 --- a/apps/playground/src/components/feed/list/FeedCard.tsx +++ b/apps/playground/src/components/feed/list/FeedCard.tsx @@ -6,7 +6,8 @@ import { Tag } from '@sopt-makers/ui'; import { Flex, Spacing, Stack } from '@toss/emotion-utils'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { forwardRef, PropsWithChildren, ReactNode, useState } from 'react'; +import type { PropsWithChildren, ReactNode } from 'react'; +import { forwardRef, useState } from 'react'; import HorizontalScroller from '@/components/common/HorizontalScroller'; import ImageWithSkeleton from '@/components/common/ImageWithSkeleton'; diff --git a/apps/playground/src/components/feed/list/FeedCategoryTooltip/index.tsx b/apps/playground/src/components/feed/list/FeedCategoryTooltip/index.tsx index b6d2516ef..7907c0063 100644 --- a/apps/playground/src/components/feed/list/FeedCategoryTooltip/index.tsx +++ b/apps/playground/src/components/feed/list/FeedCategoryTooltip/index.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { IconXClose } from '@sopt-makers/icons'; -import React, { createContext, ReactNode } from 'react'; +import type { ReactNode } from 'react'; +import React, { createContext } from 'react'; import Text from '@/components/common/Text'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/feed/list/FeedCategoryTooltip/useTooltip.ts b/apps/playground/src/components/feed/list/FeedCategoryTooltip/useTooltip.ts index fc2d3d63d..96f1f9356 100644 --- a/apps/playground/src/components/feed/list/FeedCategoryTooltip/useTooltip.ts +++ b/apps/playground/src/components/feed/list/FeedCategoryTooltip/useTooltip.ts @@ -1,4 +1,5 @@ -import { RefObject, useCallback, useEffect, useState } from 'react'; +import type { RefObject } from 'react'; +import { useCallback, useEffect, useState } from 'react'; const getTodayDate = () => { const now = new Date(); diff --git a/apps/playground/src/components/feed/list/FeedList.tsx b/apps/playground/src/components/feed/list/FeedList.tsx index 7aa234918..6c83d87be 100644 --- a/apps/playground/src/components/feed/list/FeedList.tsx +++ b/apps/playground/src/components/feed/list/FeedList.tsx @@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { ErrorBoundary } from '@toss/error-boundary'; import Link from 'next/link'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { getCategory } from '@/api/endpoint/feed/getCategory'; import { useGetPostsInfiniteQuery } from '@/api/endpoint/feed/getPosts'; diff --git a/apps/playground/src/components/feed/list/FeedListItems.tsx b/apps/playground/src/components/feed/list/FeedListItems.tsx index c0165c598..c8ee5ddce 100644 --- a/apps/playground/src/components/feed/list/FeedListItems.tsx +++ b/apps/playground/src/components/feed/list/FeedListItems.tsx @@ -1,12 +1,14 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { IconAlertTriangle, IconShare, IconTrash, IconWrite } from '@sopt-makers/icons'; import { useQuery } from '@tanstack/react-query'; import { Flex } from '@toss/emotion-utils'; import Link from 'next/link'; -import { playgroundLink } from '@sopt/ui'; -import { FC, ReactNode, useRef } from 'react'; -import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'; +import type { FC, ReactNode } from 'react'; +import { useRef } from 'react'; +import type { VirtuosoHandle } from 'react-virtuoso'; +import { Virtuoso } from 'react-virtuoso'; import { atom, useRecoilState } from 'recoil'; import { getCategory } from '@/api/endpoint/feed/getCategory'; diff --git a/apps/playground/src/components/feed/list/FeedUrlCard.stories.tsx b/apps/playground/src/components/feed/list/FeedUrlCard.stories.tsx index 9e1084ae2..cff57e528 100644 --- a/apps/playground/src/components/feed/list/FeedUrlCard.stories.tsx +++ b/apps/playground/src/components/feed/list/FeedUrlCard.stories.tsx @@ -1,5 +1,5 @@ -import { Decorator, Meta } from '@storybook/react'; -import { ComponentProps } from 'react'; +import type { Decorator, Meta } from '@storybook/react'; +import type { ComponentProps } from 'react'; import FeedUrlCard from '@/components/feed/list/FeedUrlCard'; diff --git a/apps/playground/src/components/feed/list/MenuEntryIcons/Icons.tsx b/apps/playground/src/components/feed/list/MenuEntryIcons/Icons.tsx index 9dfac8ca5..54990a25f 100644 --- a/apps/playground/src/components/feed/list/MenuEntryIcons/Icons.tsx +++ b/apps/playground/src/components/feed/list/MenuEntryIcons/Icons.tsx @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'react'; +import type { HTMLAttributes } from 'react'; export interface IconProps extends HTMLAttributes { size?: number; diff --git a/apps/playground/src/components/feed/list/MenuEntryIcons/MenuEntryIcons.tsx b/apps/playground/src/components/feed/list/MenuEntryIcons/MenuEntryIcons.tsx index 70c0c6684..f07676c8f 100644 --- a/apps/playground/src/components/feed/list/MenuEntryIcons/MenuEntryIcons.tsx +++ b/apps/playground/src/components/feed/list/MenuEntryIcons/MenuEntryIcons.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Flex } from '@toss/emotion-utils'; import Link from 'next/link'; -import { playgroundLink } from '@sopt/ui'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { CoffeeChatIcon, CrewIcon, MemberIcon, ProjectIcon } from '@/components/feed/list/MenuEntryIcons/Icons'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/feed/page/FeedHomePage.tsx b/apps/playground/src/components/feed/page/FeedHomePage.tsx index 187d265c0..faade50f3 100644 --- a/apps/playground/src/components/feed/page/FeedHomePage.tsx +++ b/apps/playground/src/components/feed/page/FeedHomePage.tsx @@ -1,7 +1,7 @@ import { useQueryClient } from '@tanstack/react-query'; import { ImpressionArea } from '@toss/impression-area'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useGetPostsInfiniteQuery } from '@/api/endpoint/feed/getPosts'; import Responsive from '@/components/common/Responsive'; diff --git a/apps/playground/src/components/feed/page/FeedUploadPage.tsx b/apps/playground/src/components/feed/page/FeedUploadPage.tsx index 80e6ceb92..f02d03728 100644 --- a/apps/playground/src/components/feed/page/FeedUploadPage.tsx +++ b/apps/playground/src/components/feed/page/FeedUploadPage.tsx @@ -4,10 +4,12 @@ import { IconChevronLeft } from '@sopt-makers/icons'; import { Button, Callout } from '@sopt-makers/ui'; import { Spacing } from '@toss/emotion-utils'; import { useRouter } from 'next/router'; -import { FormEvent, useEffect, useRef } from 'react'; +import type { FormEvent } from 'react'; +import { useEffect, useRef } from 'react'; import { useMeetingList } from '@/api/crew/getMeetingList'; -import { GroupFeedParams, usePostGroupFeed } from '@/api/crew/postGroupFeed'; +import type { GroupFeedParams } from '@/api/crew/postGroupFeed'; +import { usePostGroupFeed } from '@/api/crew/postGroupFeed'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import Checkbox from '@/components/common/Checkbox'; import useModalState from '@/components/common/Modal/useModalState'; @@ -29,7 +31,7 @@ import TitleInput from '@/components/feed/upload/Input/TitleInput'; import DesktopFeedUploadLayout from '@/components/feed/upload/layout/DesktopFeedUploadLayout'; import MobileFeedUploadLayout from '@/components/feed/upload/layout/MobileFeedUploadLayout'; import { GroupSelect, SelectContent, SelectTrigger } from '@/components/feed/upload/select/GroupSelect'; -import { PostedFeedDataType } from '@/components/feed/upload/types'; +import type { PostedFeedDataType } from '@/components/feed/upload/types'; import UsingRules from '@/components/feed/upload/UsingRules'; import VoteModal from '@/components/feed/upload/voteModal'; import VotePreview from '@/components/feed/upload/votePreview'; @@ -68,7 +70,7 @@ export default function FeedUploadPage({ defaultValue, editingId, onSubmit }: Fe const handleMobileKeyPressToContents = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) { e.preventDefault(); - mobileContentsRef.current && mobileContentsRef.current.focus(); + if (mobileContentsRef.current) mobileContentsRef.current.focus(); } }; @@ -76,7 +78,7 @@ export default function FeedUploadPage({ defaultValue, editingId, onSubmit }: Fe const handleDesktopKeyPressToContents = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) { e.preventDefault(); - desktopContentsRef.current && desktopContentsRef.current.focus(); + if (desktopContentsRef.current) desktopContentsRef.current.focus(); } }; diff --git a/apps/playground/src/components/feed/page/layout/DesktopCommunityLayout.tsx b/apps/playground/src/components/feed/page/layout/DesktopCommunityLayout.tsx index 125c63866..d4d171b7a 100644 --- a/apps/playground/src/components/feed/page/layout/DesktopCommunityLayout.tsx +++ b/apps/playground/src/components/feed/page/layout/DesktopCommunityLayout.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { m } from 'framer-motion'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { ADS } from '@/components/common/Banner/AdsBanner/constants/ads'; import { layoutCSSVariable } from '@/components/layout/utils'; diff --git a/apps/playground/src/components/feed/page/layout/MobileCommunityLayout.tsx b/apps/playground/src/components/feed/page/layout/MobileCommunityLayout.tsx index 8d2f4ad45..852d807f4 100644 --- a/apps/playground/src/components/feed/page/layout/MobileCommunityLayout.tsx +++ b/apps/playground/src/components/feed/page/layout/MobileCommunityLayout.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; import MenuEntryIcons from '@/components/feed/list/MenuEntryIcons/MenuEntryIcons'; diff --git a/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.stories.tsx b/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.stories.tsx index 14c6b27c9..3cd1a376c 100644 --- a/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import CategoryHeader from '@/components/feed/upload/Category/CategoryHeader'; diff --git a/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.tsx b/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.tsx index 1fad069db..0daf2589d 100644 --- a/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.tsx +++ b/apps/playground/src/components/feed/upload/Category/CategoryHeader/index.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; +import { Chip } from '@sopt-makers/ui'; import useCategory from '@/components/feed/common/hooks/useCategory'; -import { FeedDataType } from '@/components/feed/upload/types'; +import { PART_CATEGORY_ID } from '@/components/feed/constants'; +import type { FeedDataType } from '@/components/feed/upload/types'; import Arrow from '@/public/icons/icon-select-arrow.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; -import { PART_CATEGORY_ID } from '@/components/feed/constants'; -import { Chip } from '@sopt-makers/ui'; interface CategoryHeaderProp { feedData: FeedDataType; diff --git a/apps/playground/src/components/feed/upload/Category/CategorySelector/CategorySelectOptions.tsx b/apps/playground/src/components/feed/upload/Category/CategorySelector/CategorySelectOptions.tsx index cf0b02f3f..213a25283 100644 --- a/apps/playground/src/components/feed/upload/Category/CategorySelector/CategorySelectOptions.tsx +++ b/apps/playground/src/components/feed/upload/Category/CategorySelector/CategorySelectOptions.tsx @@ -5,8 +5,8 @@ import { useQuery } from '@tanstack/react-query'; import { getCategory } from '@/api/endpoint/feed/getCategory'; import { GROUP_CATEGORY_ID } from '@/components/feed/constants'; -import { BasicCategory } from '@/components/feed/upload/Category/types'; -import { FeedDataType } from '@/components/feed/upload/types'; +import type { BasicCategory } from '@/components/feed/upload/Category/types'; +import type { FeedDataType } from '@/components/feed/upload/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/feed/upload/Category/CategorySelector/index.stories.tsx b/apps/playground/src/components/feed/upload/Category/CategorySelector/index.stories.tsx index ff39db0b5..ab3f3b5c7 100644 --- a/apps/playground/src/components/feed/upload/Category/CategorySelector/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/Category/CategorySelector/index.stories.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Button from '@/components/common/Button'; import useModalState from '@/components/common/Modal/useModalState'; import CategorySelector from '@/components/feed/upload/Category/CategorySelector'; import { categories } from '@/components/feed/upload/Category/constants'; import { DropDown } from '@/components/feed/upload/Category/DropDown'; -import { BasicCategory } from '@/components/feed/upload/Category/types'; +import type { BasicCategory } from '@/components/feed/upload/Category/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/feed/upload/Category/CategorySelector/index.tsx b/apps/playground/src/components/feed/upload/Category/CategorySelector/index.tsx index f185ac596..21843310d 100644 --- a/apps/playground/src/components/feed/upload/Category/CategorySelector/index.tsx +++ b/apps/playground/src/components/feed/upload/Category/CategorySelector/index.tsx @@ -4,7 +4,7 @@ import { BottomSheet } from '@/components/common/BottomSheet'; import Responsive from '@/components/common/Responsive'; import CategorySelectOptions from '@/components/feed/upload/Category/CategorySelector/CategorySelectOptions'; import { DropDown } from '@/components/feed/upload/Category/DropDown'; -import { FeedDataType } from '@/components/feed/upload/types'; +import type { FeedDataType } from '@/components/feed/upload/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/feed/upload/Category/DropDown/index.stories.tsx b/apps/playground/src/components/feed/upload/Category/DropDown/index.stories.tsx index 873da738d..4c51268d4 100644 --- a/apps/playground/src/components/feed/upload/Category/DropDown/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/Category/DropDown/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Button from '@/components/common/Button'; import useModalState from '@/components/common/Modal/useModalState'; diff --git a/apps/playground/src/components/feed/upload/Category/DropDown/index.tsx b/apps/playground/src/components/feed/upload/Category/DropDown/index.tsx index 604796a0e..895df0de4 100644 --- a/apps/playground/src/components/feed/upload/Category/DropDown/index.tsx +++ b/apps/playground/src/components/feed/upload/Category/DropDown/index.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import FocusTrap from 'focus-trap-react'; -import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useRef } from 'react'; +import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; +import { useRef } from 'react'; import Portal from '@/components/common/Portal'; import { useEscapeCallback } from '@/hooks/useEscapeCallback'; diff --git a/apps/playground/src/components/feed/upload/Category/TagSelector/TagSelectOptions.tsx b/apps/playground/src/components/feed/upload/Category/TagSelector/TagSelectOptions.tsx index d645d76f9..0f5d40718 100644 --- a/apps/playground/src/components/feed/upload/Category/TagSelector/TagSelectOptions.tsx +++ b/apps/playground/src/components/feed/upload/Category/TagSelector/TagSelectOptions.tsx @@ -1,14 +1,14 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; +import { Fragment } from 'react'; import Responsive from '@/components/common/Responsive'; import SquareLink from '@/components/common/SquareLink'; import useCategory from '@/components/feed/common/hooks/useCategory'; -import { BasicCategory } from '@/components/feed/upload/Category/types'; -import { FeedDataType } from '@/components/feed/upload/types'; +import type { BasicCategory } from '@/components/feed/upload/Category/types'; +import type { FeedDataType } from '@/components/feed/upload/types'; import CheckIcon from '@/public/icons/icon_check.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -import { Fragment } from 'react'; interface TagSelectOptionsProp { onClose: () => void; diff --git a/apps/playground/src/components/feed/upload/Category/TagSelector/index.stories.tsx b/apps/playground/src/components/feed/upload/Category/TagSelector/index.stories.tsx index 2979cd54e..26c051c8d 100644 --- a/apps/playground/src/components/feed/upload/Category/TagSelector/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/Category/TagSelector/index.stories.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { BottomSheet } from '@/components/common/BottomSheet'; import Button from '@/components/common/Button'; @@ -9,7 +9,7 @@ import SquareLink from '@/components/common/SquareLink'; import useCategory from '@/components/feed/common/hooks/useCategory'; import { categories } from '@/components/feed/upload/Category/constants'; import TagSelector from '@/components/feed/upload/Category/TagSelector'; -import { BasicCategory } from '@/components/feed/upload/Category/types'; +import type { BasicCategory } from '@/components/feed/upload/Category/types'; import CheckIcon from '@/public/icons/icon_check.svg'; import BackArrow from '@/public/icons/icon_chevron_left.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/feed/upload/Category/TagSelector/index.tsx b/apps/playground/src/components/feed/upload/Category/TagSelector/index.tsx index aa16b6c80..4d99b9e19 100644 --- a/apps/playground/src/components/feed/upload/Category/TagSelector/index.tsx +++ b/apps/playground/src/components/feed/upload/Category/TagSelector/index.tsx @@ -3,13 +3,13 @@ import styled from '@emotion/styled'; import { BottomSheet } from '@/components/common/BottomSheet'; import Responsive from '@/components/common/Responsive'; import useCategory from '@/components/feed/common/hooks/useCategory'; +import { PART_CATEGORY_ID } from '@/components/feed/constants'; import { DropDown } from '@/components/feed/upload/Category/DropDown'; import TagSelectOptions from '@/components/feed/upload/Category/TagSelector/TagSelectOptions'; -import { FeedDataType } from '@/components/feed/upload/types'; +import type { FeedDataType } from '@/components/feed/upload/types'; import BackArrow from '@/public/icons/icon_chevron_left.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; -import { PART_CATEGORY_ID } from '@/components/feed/constants'; interface TagSelectorProps { isOpen?: boolean; diff --git a/apps/playground/src/components/feed/upload/Category/constants.ts b/apps/playground/src/components/feed/upload/Category/constants.ts index 101176789..34474afbc 100644 --- a/apps/playground/src/components/feed/upload/Category/constants.ts +++ b/apps/playground/src/components/feed/upload/Category/constants.ts @@ -1,4 +1,4 @@ -import { CategorySelectType } from '@/components/feed/upload/Category/types'; +import type { CategorySelectType } from '@/components/feed/upload/Category/types'; export const categories: CategorySelectType = [ { diff --git a/apps/playground/src/components/feed/upload/Category/index.tsx b/apps/playground/src/components/feed/upload/Category/index.tsx index a4ef39748..dd40f4a10 100644 --- a/apps/playground/src/components/feed/upload/Category/index.tsx +++ b/apps/playground/src/components/feed/upload/Category/index.tsx @@ -3,12 +3,12 @@ import { useMemo } from 'react'; import { getCategory } from '@/api/endpoint/feed/getCategory'; import { useGetMemberProfileOfMe } from '@/api/endpoint_LEGACY/hooks'; +import { PART_CATEGORY_ID } from '@/components/feed/constants'; import CategoryHeader from '@/components/feed/upload/Category/CategoryHeader'; import CategorySelector from '@/components/feed/upload/Category/CategorySelector'; import TagSelector from '@/components/feed/upload/Category/TagSelector'; import { useCategorySelect } from '@/components/feed/upload/hooks/useCategorySelect'; -import { FeedDataType } from '@/components/feed/upload/types'; -import { PART_CATEGORY_ID } from '@/components/feed/constants'; +import type { FeedDataType } from '@/components/feed/upload/types'; interface CateogryProps { feedData: FeedDataType; diff --git a/apps/playground/src/components/feed/upload/CheckboxFormItem/BlindWriterWarning/index.stories.tsx b/apps/playground/src/components/feed/upload/CheckboxFormItem/BlindWriterWarning/index.stories.tsx index 879e9b29a..da844a667 100644 --- a/apps/playground/src/components/feed/upload/CheckboxFormItem/BlindWriterWarning/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/CheckboxFormItem/BlindWriterWarning/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import BlindWriterWarning from '@/components/feed/upload/CheckboxFormItem/BlindWriterWarning'; diff --git a/apps/playground/src/components/feed/upload/CheckboxFormItem/index.stories.tsx b/apps/playground/src/components/feed/upload/CheckboxFormItem/index.stories.tsx index 5defee9ef..9244c468b 100644 --- a/apps/playground/src/components/feed/upload/CheckboxFormItem/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/CheckboxFormItem/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import Checkbox from '@/components/common/Checkbox'; diff --git a/apps/playground/src/components/feed/upload/CheckboxFormItem/index.tsx b/apps/playground/src/components/feed/upload/CheckboxFormItem/index.tsx index 6269589b9..8ee8b28dd 100644 --- a/apps/playground/src/components/feed/upload/CheckboxFormItem/index.tsx +++ b/apps/playground/src/components/feed/upload/CheckboxFormItem/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/feed/upload/CodeUploadButton/index.stories.tsx b/apps/playground/src/components/feed/upload/CodeUploadButton/index.stories.tsx index b76b1b3bf..b3bc84d93 100644 --- a/apps/playground/src/components/feed/upload/CodeUploadButton/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/CodeUploadButton/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import CodeUploadButton from './index'; diff --git a/apps/playground/src/components/feed/upload/ImagePreview/index.stories.tsx b/apps/playground/src/components/feed/upload/ImagePreview/index.stories.tsx index 41bd2508e..35c529868 100644 --- a/apps/playground/src/components/feed/upload/ImagePreview/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/ImagePreview/index.stories.tsx @@ -1,7 +1,7 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; +import type index from './index'; import ImagePreview from './index'; -import index from './index'; const meta = { component: ImagePreview, diff --git a/apps/playground/src/components/feed/upload/ImagePreview/index.tsx b/apps/playground/src/components/feed/upload/ImagePreview/index.tsx index 15ad7668b..1ab5f0978 100644 --- a/apps/playground/src/components/feed/upload/ImagePreview/index.tsx +++ b/apps/playground/src/components/feed/upload/ImagePreview/index.tsx @@ -1,6 +1,7 @@ -import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import styled from '@emotion/styled'; +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; + interface ImagePreviewProps { images: string[]; onRemove: (index: number) => void; diff --git a/apps/playground/src/components/feed/upload/ImageUploadButton/index.stories.tsx b/apps/playground/src/components/feed/upload/ImageUploadButton/index.stories.tsx index ac23f45e3..5d28a16ef 100644 --- a/apps/playground/src/components/feed/upload/ImageUploadButton/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/ImageUploadButton/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { createRef } from 'react'; import ResponsiveProvider from '@/components/common/Responsive/ResponsiveProvider'; diff --git a/apps/playground/src/components/feed/upload/ImageUploadButton/index.tsx b/apps/playground/src/components/feed/upload/ImageUploadButton/index.tsx index 5db70e000..3b7208345 100644 --- a/apps/playground/src/components/feed/upload/ImageUploadButton/index.tsx +++ b/apps/playground/src/components/feed/upload/ImageUploadButton/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { Ref } from 'react'; +import type { Ref } from 'react'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/feed/upload/Input/ContentsInput/index.stories.tsx b/apps/playground/src/components/feed/upload/Input/ContentsInput/index.stories.tsx index 1c67209fb..00ab113c6 100644 --- a/apps/playground/src/components/feed/upload/Input/ContentsInput/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/Input/ContentsInput/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ContentsInput from '@/components/feed/upload/Input/ContentsInput'; diff --git a/apps/playground/src/components/feed/upload/Input/ContentsInput/index.tsx b/apps/playground/src/components/feed/upload/Input/ContentsInput/index.tsx index 36aa039a2..4bed7b72b 100644 --- a/apps/playground/src/components/feed/upload/Input/ContentsInput/index.tsx +++ b/apps/playground/src/components/feed/upload/Input/ContentsInput/index.tsx @@ -1,9 +1,11 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent, forwardRef, Ref, useEffect, useRef } from 'react'; +import type { ChangeEvent, Ref } from 'react'; +import { forwardRef, useEffect, useRef } from 'react'; import { useCursorPosition } from '@/components/feed/common/hooks/useCursorPosition'; -import useMention, { Member } from '@/components/feed/common/hooks/useMention'; +import type { Member } from '@/components/feed/common/hooks/useMention'; +import useMention from '@/components/feed/common/hooks/useMention'; import MentionDropdown from '@/components/feed/common/MentionDropdown'; import { parseHTMLToMentions, parseMentionsToHTML } from '@/components/feed/common/utils/parseMention'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/feed/upload/Input/LinkInput/index.tsx b/apps/playground/src/components/feed/upload/Input/LinkInput/index.tsx index 995ff0fcf..3c1ae0df1 100644 --- a/apps/playground/src/components/feed/upload/Input/LinkInput/index.tsx +++ b/apps/playground/src/components/feed/upload/Input/LinkInput/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { TextField } from '@sopt-makers/ui'; -import { ChangeEvent, KeyboardEvent } from 'react'; +import type { ChangeEvent, KeyboardEvent } from 'react'; interface LinkInputProps { onChange: (e: ChangeEvent | ChangeEvent) => void; diff --git a/apps/playground/src/components/feed/upload/Input/TitleInput/index.stories.tsx b/apps/playground/src/components/feed/upload/Input/TitleInput/index.stories.tsx index 2ff13ded8..00a6ba5cb 100644 --- a/apps/playground/src/components/feed/upload/Input/TitleInput/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/Input/TitleInput/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import TitleInput from '@/components/feed/upload/Input/TitleInput'; diff --git a/apps/playground/src/components/feed/upload/Input/TitleInput/index.tsx b/apps/playground/src/components/feed/upload/Input/TitleInput/index.tsx index e87c326ee..e0dfcef91 100644 --- a/apps/playground/src/components/feed/upload/Input/TitleInput/index.tsx +++ b/apps/playground/src/components/feed/upload/Input/TitleInput/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent } from 'react'; +import type { ChangeEvent } from 'react'; import TextareaAutosize from 'react-textarea-autosize'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/feed/upload/UsingRules/UsingRulesButton/index.stories.tsx b/apps/playground/src/components/feed/upload/UsingRules/UsingRulesButton/index.stories.tsx index 05ad7f4b0..3a289a1ff 100644 --- a/apps/playground/src/components/feed/upload/UsingRules/UsingRulesButton/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/UsingRules/UsingRulesButton/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UsingRulesButton from '@/components/feed/upload/UsingRules/UsingRulesButton'; diff --git a/apps/playground/src/components/feed/upload/UsingRules/UsingRulesDetail/index.stories.tsx b/apps/playground/src/components/feed/upload/UsingRules/UsingRulesDetail/index.stories.tsx index 41f19e59e..81bd8a1c8 100644 --- a/apps/playground/src/components/feed/upload/UsingRules/UsingRulesDetail/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/UsingRules/UsingRulesDetail/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Button from '@/components/common/Button'; import useModalState from '@/components/common/Modal/useModalState'; diff --git a/apps/playground/src/components/feed/upload/UsingRules/UsingRulesPreview/index.stories.tsx b/apps/playground/src/components/feed/upload/UsingRules/UsingRulesPreview/index.stories.tsx index 1376994d6..c2a80fe9e 100644 --- a/apps/playground/src/components/feed/upload/UsingRules/UsingRulesPreview/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/UsingRules/UsingRulesPreview/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UsingRulesPreview from '@/components/feed/upload/UsingRules/UsingRulesPreview'; diff --git a/apps/playground/src/components/feed/upload/UsingRules/index.stories.tsx b/apps/playground/src/components/feed/upload/UsingRules/index.stories.tsx index e45f9544f..87dd7b177 100644 --- a/apps/playground/src/components/feed/upload/UsingRules/index.stories.tsx +++ b/apps/playground/src/components/feed/upload/UsingRules/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UsingRules from '@/components/feed/upload/UsingRules'; diff --git a/apps/playground/src/components/feed/upload/UsingRules/index.tsx b/apps/playground/src/components/feed/upload/UsingRules/index.tsx index de23d0a8c..f73815ad0 100644 --- a/apps/playground/src/components/feed/upload/UsingRules/index.tsx +++ b/apps/playground/src/components/feed/upload/UsingRules/index.tsx @@ -1,9 +1,9 @@ +import styled from '@emotion/styled'; import { useState } from 'react'; import UsingRulesButton from '@/components/feed/upload/UsingRules/UsingRulesButton'; import UsingRulesDetail from '@/components/feed/upload/UsingRules/UsingRulesDetail'; import UsingRulesPreview from '@/components/feed/upload/UsingRules/UsingRulesPreview'; -import styled from '@emotion/styled'; interface UsingRulesProps { isPreviewOpen: boolean; diff --git a/apps/playground/src/components/feed/upload/hooks/useCategorySelect.ts b/apps/playground/src/components/feed/upload/hooks/useCategorySelect.ts index c40049682..57c043c99 100644 --- a/apps/playground/src/components/feed/upload/hooks/useCategorySelect.ts +++ b/apps/playground/src/components/feed/upload/hooks/useCategorySelect.ts @@ -23,7 +23,9 @@ export function useCategoryUsingRulesPreview(initialState: boolean) { const openUsingRules = () => { const isFirst = localStorage.getItem('isFirst') ?? 'true'; - JSON.parse(isFirst) && setIsPreviewOpen(true); + if (JSON.parse(isFirst)) { + setIsPreviewOpen(true); + } }; const closeUsingRules = () => { diff --git a/apps/playground/src/components/feed/upload/hooks/useUploadFeedData.ts b/apps/playground/src/components/feed/upload/hooks/useUploadFeedData.ts index 296ea1bfe..bf886f198 100644 --- a/apps/playground/src/components/feed/upload/hooks/useUploadFeedData.ts +++ b/apps/playground/src/components/feed/upload/hooks/useUploadFeedData.ts @@ -7,18 +7,22 @@ import { QUESTION_CATEGORY_ID, SOPTICLE_CATEGORY_ID, } from '@/components/feed/constants'; -import { MeetingInfo } from '@/components/feed/upload/select/types'; -import { PostedFeedDataType } from '@/components/feed/upload/types'; +import type { MeetingInfo } from '@/components/feed/upload/select/types'; +import type { PostedFeedDataType } from '@/components/feed/upload/types'; export default function useUploadFeedData(defaultValue: PostedFeedDataType) { const [feedData, setFeedData] = useState(defaultValue); const { findParentCategory } = useCategory(); const resetIsBlindWriter = (categoryId: number) => { - const isQuestion = findParentCategory(categoryId)?.id === QUESTION_CATEGORY_ID; - isQuestion && setFeedData((feedData) => ({ ...feedData, isBlindWriter: true })); - - !findParentCategory(categoryId)?.hasBlind && setFeedData((feedData) => ({ ...feedData, isBlindWriter: false })); + const parentCategory = findParentCategory(categoryId); + const isQuestion = parentCategory?.id === QUESTION_CATEGORY_ID; + if (isQuestion) { + setFeedData((feedData) => ({ ...feedData, isBlindWriter: true })); + } + if (!parentCategory?.hasBlind) { + setFeedData((feedData) => ({ ...feedData, isBlindWriter: false })); + } }; const handleSaveCategory = (categoryId: number) => { diff --git a/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.stories.tsx b/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.stories.tsx index 936f8cf56..71ae78eef 100644 --- a/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.stories.tsx +++ b/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.stories.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import DesktopFeedUploadLayout from '@/components/feed/upload/layout/DesktopFeedUploadLayout'; import BackArrow from '@/public/icons/icon_chevron_left.svg'; diff --git a/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.tsx b/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.tsx index 23917b994..ab2a91268 100644 --- a/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.tsx +++ b/apps/playground/src/components/feed/upload/layout/DesktopFeedUploadLayout.tsx @@ -1,7 +1,9 @@ -import FooterHeightProvider from '@/components/feed/upload/layout/provider/FooterHeightProvider'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode, useLayoutEffect, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useLayoutEffect, useRef, useState } from 'react'; + +import FooterHeightProvider from '@/components/feed/upload/layout/provider/FooterHeightProvider'; interface DesktopFeedUploadLayoutProps { header: ReactNode; diff --git a/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.stories.tsx b/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.stories.tsx index a7410ee0f..10548e544 100644 --- a/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.stories.tsx +++ b/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.stories.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MobileFeedUploadLayout from '@/components/feed/upload/layout/MobileFeedUploadLayout'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.tsx b/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.tsx index 471e80e58..b5f91752f 100644 --- a/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.tsx +++ b/apps/playground/src/components/feed/upload/layout/MobileFeedUploadLayout.tsx @@ -1,7 +1,9 @@ -import FooterHeightProvider from '@/components/feed/upload/layout/provider/FooterHeightProvider'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode, useLayoutEffect, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useLayoutEffect, useRef, useState } from 'react'; + +import FooterHeightProvider from '@/components/feed/upload/layout/provider/FooterHeightProvider'; interface MobileFeedUploadLayoutProps { header: ReactNode; diff --git a/apps/playground/src/components/feed/upload/layout/provider/FooterHeightProvider.tsx b/apps/playground/src/components/feed/upload/layout/provider/FooterHeightProvider.tsx index 02f6a10e2..a57b97069 100644 --- a/apps/playground/src/components/feed/upload/layout/provider/FooterHeightProvider.tsx +++ b/apps/playground/src/components/feed/upload/layout/provider/FooterHeightProvider.tsx @@ -1,4 +1,5 @@ -import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useLayoutEffect, useRef, useState } from 'react'; interface FooterHeightProviderProps { children: (footerRef: React.RefObject, ready: boolean) => ReactNode; diff --git a/apps/playground/src/components/feed/upload/select/GroupSelect.tsx b/apps/playground/src/components/feed/upload/select/GroupSelect.tsx index 3283e415c..c6ca0f174 100644 --- a/apps/playground/src/components/feed/upload/select/GroupSelect.tsx +++ b/apps/playground/src/components/feed/upload/select/GroupSelect.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconChevronDown } from '@sopt-makers/icons'; import { Skeleton } from '@sopt-makers/ui'; -import { createContext, ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { BottomSheet } from '@/components/common/BottomSheet'; import Responsive from '@/components/common/Responsive'; @@ -12,7 +13,7 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; import SelectMeetingOptionItem from './SelectMeetingOptionItem'; -import { MeetingInfo } from './types'; +import type { MeetingInfo } from './types'; export interface SelectContextType { isSelectOpen: boolean; @@ -117,18 +118,18 @@ export function SelectTrigger({ placeholder = '모임을 선택해주세요' }: export function SelectContent({ meetingList }: SelectContentProps) { const { isSelectOpen, selectMeeting, closeSelect } = useSelect(); - if (!meetingList || meetingList.length === 0) { - return ; - } - const meetingItems = useMemo( () => - meetingList.map((meetingInfo) => ( + meetingList?.map((meetingInfo) => ( - )), + )) ?? [], [meetingList, selectMeeting], ); + if (!meetingList || meetingList.length === 0) { + return ; + } + return ( <> {/* Desktop */} diff --git a/apps/playground/src/components/feed/upload/select/SelectMeetingOptionItem.tsx b/apps/playground/src/components/feed/upload/select/SelectMeetingOptionItem.tsx index 07eac0686..bcb31c55d 100644 --- a/apps/playground/src/components/feed/upload/select/SelectMeetingOptionItem.tsx +++ b/apps/playground/src/components/feed/upload/select/SelectMeetingOptionItem.tsx @@ -6,7 +6,7 @@ import { Tag } from '@sopt-makers/ui'; import Text from '@/components/common/Text'; -import { SelectMeetingOptionItemProps } from './types'; +import type { SelectMeetingOptionItemProps } from './types'; export default function SelectMeetingOptionItem({ meetingInfo, onClick }: SelectMeetingOptionItemProps) { return ( diff --git a/apps/playground/src/components/feed/upload/voteModal/index.tsx b/apps/playground/src/components/feed/upload/voteModal/index.tsx index af99a22ce..4a073a60a 100644 --- a/apps/playground/src/components/feed/upload/voteModal/index.tsx +++ b/apps/playground/src/components/feed/upload/voteModal/index.tsx @@ -6,7 +6,8 @@ import { Button } from '@sopt-makers/ui'; import { useEffect, useState } from 'react'; import Checkbox from '@/components/common/Checkbox'; -import Modal, { ModalProps } from '@/components/common/Modal'; +import type { ModalProps } from '@/components/common/Modal'; +import Modal from '@/components/common/Modal'; import CheckboxFormItem from '@/components/feed/upload/CheckboxFormItem'; import { MAX_FIELDS, MAX_LENGTH, MIN_FIELDS } from '@/components/feed/upload/voteModal/constants'; import VoteTextArea from '@/components/feed/upload/voteModal/VoteTextArea'; diff --git a/apps/playground/src/components/feed/upload/votePreview/index.tsx b/apps/playground/src/components/feed/upload/votePreview/index.tsx index 2622ebd2a..e7a8f249c 100644 --- a/apps/playground/src/components/feed/upload/votePreview/index.tsx +++ b/apps/playground/src/components/feed/upload/votePreview/index.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { IconAlertCircle, IconCheckSquare, IconDotsVertical, IconTrash, IconWrite } from '@sopt-makers/icons'; -import { DialogContext, DialogOptionType } from '@sopt-makers/ui'; +import type { DialogOptionType } from '@sopt-makers/ui'; +import { DialogContext } from '@sopt-makers/ui'; import { Flex } from '@toss/emotion-utils'; import { useContext } from 'react'; diff --git a/apps/playground/src/components/intro/index.tsx b/apps/playground/src/components/intro/index.tsx index 8c1da2de9..a31f38b65 100644 --- a/apps/playground/src/components/intro/index.tsx +++ b/apps/playground/src/components/intro/index.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import type { FC } from 'react'; import CatchPhraseSection from '@/components/intro/sections/CatchPhrase'; import Entry from '@/components/intro/sections/Entry'; @@ -8,7 +8,7 @@ import ValueSection from '@/components/intro/sections/ValueSection'; interface IntroProps {} -const Intro: FC = ({}) => { +const Intro: FC = () => { return ( <> diff --git a/apps/playground/src/components/intro/sections/CatchPhrase/Typer.tsx b/apps/playground/src/components/intro/sections/CatchPhrase/Typer.tsx index 94e403004..139bd4fe0 100644 --- a/apps/playground/src/components/intro/sections/CatchPhrase/Typer.tsx +++ b/apps/playground/src/components/intro/sections/CatchPhrase/Typer.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; -import { FC, useEffect, useRef, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useRef, useState } from 'react'; interface TyperProps { sequence: Sentence[]; diff --git a/apps/playground/src/components/intro/sections/CatchPhrase/index.tsx b/apps/playground/src/components/intro/sections/CatchPhrase/index.tsx index 0ca66d7f4..4de1d6b5e 100644 --- a/apps/playground/src/components/intro/sections/CatchPhrase/index.tsx +++ b/apps/playground/src/components/intro/sections/CatchPhrase/index.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { m } from 'framer-motion'; import Link from 'next/link'; -import { FC, useCallback, useState } from 'react'; +import type { FC } from 'react'; +import { useCallback, useState } from 'react'; import { AndroidIcon, @@ -22,7 +23,7 @@ interface CatchPhraseSectionProps {} const shineColorList = ['#5DDBFF', '#FDBBF9', '#FFCA00']; -const CatchPhraseSection: FC = ({}) => { +const CatchPhraseSection: FC = () => { const [shineColor, setShineColor] = useState(shineColorList[0]); const handleSentenceChange = useCallback((_: unknown, idx: number) => { diff --git a/apps/playground/src/components/intro/sections/Entry.tsx b/apps/playground/src/components/intro/sections/Entry.tsx index ebb752c81..19d8b5e43 100644 --- a/apps/playground/src/components/intro/sections/Entry.tsx +++ b/apps/playground/src/components/intro/sections/Entry.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import { playgroundLink } from '@/constants/links'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; @@ -8,7 +8,7 @@ import { textStyles } from '@/styles/typography'; interface EntryProps {} -const Entry: FC = ({}) => { +const Entry: FC = () => { return ( diff --git a/apps/playground/src/components/intro/sections/Footer.tsx b/apps/playground/src/components/intro/sections/Footer.tsx index 48d1f8719..b3e047397 100644 --- a/apps/playground/src/components/intro/sections/Footer.tsx +++ b/apps/playground/src/components/intro/sections/Footer.tsx @@ -1,14 +1,14 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; interface FooterProps {} -const Footer: FC<FooterProps> = ({}) => { +const Footer: FC<FooterProps> = () => { return ( <Container> <HLine /> diff --git a/apps/playground/src/components/intro/sections/Login.tsx b/apps/playground/src/components/intro/sections/Login.tsx index 1e1e26b11..64832eb4c 100644 --- a/apps/playground/src/components/intro/sections/Login.tsx +++ b/apps/playground/src/components/intro/sections/Login.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import { playgroundLink } from '@/constants/links'; import useScroll from '@/hooks/useScroll'; @@ -11,7 +11,7 @@ import { textStyles } from '@/styles/typography'; interface LoginProps {} -const Login: FC<LoginProps> = ({}) => { +const Login: FC<LoginProps> = () => { const { isScrollingDown, isScrollTop } = useScroll(); return ( diff --git a/apps/playground/src/components/intro/sections/ValueSection/ValueCard.tsx b/apps/playground/src/components/intro/sections/ValueSection/ValueCard.tsx index e2f7401c6..341b8fcf4 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/ValueCard.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/ValueCard.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { m, useMotionTemplate, useMotionValue, useSpring, useTransform } from 'framer-motion'; -import { FC, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react'; +import type { FC, MouseEvent, ReactNode } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/intro/sections/ValueSection/ValueDescription.tsx b/apps/playground/src/components/intro/sections/ValueSection/ValueDescription.tsx index 1080c879b..b9b99f3fe 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/ValueDescription.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/ValueDescription.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { m, useInView } from 'framer-motion'; -import { FC, ReactNode, useRef } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useRef } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/intro/sections/ValueSection/index.tsx b/apps/playground/src/components/intro/sections/ValueSection/index.tsx index ed5510ee7..9c59764d2 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/index.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/index.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import ValueCard from '@/components/intro/sections/ValueSection/ValueCard'; import Value1Content from '@/components/intro/sections/ValueSection/valueContents/Value1'; @@ -11,7 +11,7 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; interface ValueSectionProps {} -const ValueSection: FC<ValueSectionProps> = ({}) => { +const ValueSection: FC<ValueSectionProps> = () => { return ( <Container> <div> diff --git a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value1.tsx b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value1.tsx index 495fd10e5..452e040b3 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value1.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value1.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import ValueBase from '@/components/intro/sections/ValueSection/valueContents/ValueBase'; diff --git a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value2.tsx b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value2.tsx index 49be86c31..85c2a2d9f 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value2.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value2.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import ValueBase from '@/components/intro/sections/ValueSection/valueContents/ValueBase'; diff --git a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value3.tsx b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value3.tsx index f26bf312d..4d63c7c2b 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value3.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value3.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import ValueBase from '@/components/intro/sections/ValueSection/valueContents/ValueBase'; diff --git a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value4.tsx b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value4.tsx index 979fa6189..235db5aa1 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value4.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/valueContents/Value4.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import ValueBase from '@/components/intro/sections/ValueSection/valueContents/ValueBase'; diff --git a/apps/playground/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx b/apps/playground/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx index 7ad3d4d0d..285d2088a 100644 --- a/apps/playground/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx +++ b/apps/playground/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { m, useInView } from 'framer-motion'; -import { FC, ReactNode, useRef } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useRef } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/layout/EmptyLayout.stories.tsx b/apps/playground/src/components/layout/EmptyLayout.stories.tsx index 486aad186..9788b690a 100644 --- a/apps/playground/src/components/layout/EmptyLayout.stories.tsx +++ b/apps/playground/src/components/layout/EmptyLayout.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import EmptyLayout from '@/components/layout/EmptyLayout'; diff --git a/apps/playground/src/components/layout/EmptyLayout.tsx b/apps/playground/src/components/layout/EmptyLayout.tsx index dd6cb5408..89c8b87c1 100644 --- a/apps/playground/src/components/layout/EmptyLayout.tsx +++ b/apps/playground/src/components/layout/EmptyLayout.tsx @@ -1,4 +1,4 @@ -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; interface EmptyLayoutProps { children: ReactNode; diff --git a/apps/playground/src/components/layout/FullScreenLayout.stories.tsx b/apps/playground/src/components/layout/FullScreenLayout.stories.tsx index c9dba8806..782aecc95 100644 --- a/apps/playground/src/components/layout/FullScreenLayout.stories.tsx +++ b/apps/playground/src/components/layout/FullScreenLayout.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import FullScreenLayout from '@/components/layout/FullScreenLayout'; diff --git a/apps/playground/src/components/layout/FullScreenLayout.tsx b/apps/playground/src/components/layout/FullScreenLayout.tsx index f34852f2e..77a1cb0ad 100644 --- a/apps/playground/src/components/layout/FullScreenLayout.tsx +++ b/apps/playground/src/components/layout/FullScreenLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { createLayoutCSSVariable } from '@/components/layout/utils'; diff --git a/apps/playground/src/components/layout/HeaderFooterLayout.stories.tsx b/apps/playground/src/components/layout/HeaderFooterLayout.stories.tsx index bbcf670aa..82374aec1 100644 --- a/apps/playground/src/components/layout/HeaderFooterLayout.stories.tsx +++ b/apps/playground/src/components/layout/HeaderFooterLayout.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import HeaderFooterLayout from '@/components/layout/HeaderFooterLayout'; diff --git a/apps/playground/src/components/layout/HeaderFooterLayout.tsx b/apps/playground/src/components/layout/HeaderFooterLayout.tsx index 74c699060..d6bd0a869 100644 --- a/apps/playground/src/components/layout/HeaderFooterLayout.tsx +++ b/apps/playground/src/components/layout/HeaderFooterLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; import Footer from '@/components/common/Footer'; diff --git a/apps/playground/src/components/layout/HeaderLayout.stories.tsx b/apps/playground/src/components/layout/HeaderLayout.stories.tsx index 038a0c772..2e68ec799 100644 --- a/apps/playground/src/components/layout/HeaderLayout.stories.tsx +++ b/apps/playground/src/components/layout/HeaderLayout.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import HeaderLayout from '@/components/layout/HeaderLayout'; diff --git a/apps/playground/src/components/layout/HeaderLayout.tsx b/apps/playground/src/components/layout/HeaderLayout.tsx index 8e23d362d..5fbc0de29 100644 --- a/apps/playground/src/components/layout/HeaderLayout.tsx +++ b/apps/playground/src/components/layout/HeaderLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; import Header from '@/components/common/Header'; diff --git a/apps/playground/src/components/layout/HeaderOnlyDesktopLayout.tsx b/apps/playground/src/components/layout/HeaderOnlyDesktopLayout.tsx index d7be16efd..ccf9a4f12 100644 --- a/apps/playground/src/components/layout/HeaderOnlyDesktopLayout.tsx +++ b/apps/playground/src/components/layout/HeaderOnlyDesktopLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; import Header from '@/components/common/Header'; diff --git a/apps/playground/src/components/luckydraw/LottiePlayer.tsx b/apps/playground/src/components/luckydraw/LottiePlayer.tsx index da7df450a..ba39a2f78 100644 --- a/apps/playground/src/components/luckydraw/LottiePlayer.tsx +++ b/apps/playground/src/components/luckydraw/LottiePlayer.tsx @@ -10,7 +10,7 @@ interface Props { } const LottiePlayer = ({ src, keyId, style, onComplete }: Props) => { - const playerRef = useRef<any>(null); + const playerRef = useRef<HTMLElement | null>(null); useEffect(() => { import('@dotlottie/player-component').then(() => { @@ -28,7 +28,9 @@ const LottiePlayer = ({ src, keyId, style, onComplete }: Props) => { }); }, [onComplete]); - return <dotlottie-player key={keyId} ref={playerRef} src={src} autoplay style={style} />; + return ( + <dotlottie-player key={keyId} ref={playerRef as React.RefObject<HTMLElement>} src={src} autoplay style={style} /> + ); }; export default LottiePlayer; diff --git a/apps/playground/src/components/makers/AboutMakers.stories.tsx b/apps/playground/src/components/makers/AboutMakers.stories.tsx index 18531c8e4..fe6188d45 100644 --- a/apps/playground/src/components/makers/AboutMakers.stories.tsx +++ b/apps/playground/src/components/makers/AboutMakers.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import AboutMakers from '@/components/makers/AboutMakers'; diff --git a/apps/playground/src/components/makers/AboutMakers.tsx b/apps/playground/src/components/makers/AboutMakers.tsx index 82b15329e..0e504b015 100644 --- a/apps/playground/src/components/makers/AboutMakers.tsx +++ b/apps/playground/src/components/makers/AboutMakers.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import Notifier from '@/components/makers/Notifier'; import LogoMakersFull from '@/public/logos/logo-makers-full.svg'; diff --git a/apps/playground/src/components/makers/MakersMembers.stories.tsx b/apps/playground/src/components/makers/MakersMembers.stories.tsx index 1250780ba..e5bb50b66 100644 --- a/apps/playground/src/components/makers/MakersMembers.stories.tsx +++ b/apps/playground/src/components/makers/MakersMembers.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MakersMembers from '@/components/makers/MakersMembers'; diff --git a/apps/playground/src/components/makers/MakersMembers.tsx b/apps/playground/src/components/makers/MakersMembers.tsx index 4916a3dae..dc219d389 100644 --- a/apps/playground/src/components/makers/MakersMembers.tsx +++ b/apps/playground/src/components/makers/MakersMembers.tsx @@ -2,10 +2,11 @@ import styled from '@emotion/styled'; import * as Tabs from '@radix-ui/react-tabs'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC, Fragment, useMemo } from 'react'; +import type { FC } from 'react'; +import { Fragment, useMemo } from 'react'; import useAuth from '@/components/auth/useAuth'; -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; import TeamBlock from '@/components/makers/TeamBlock'; import MemberBlock from '@/components/members/common/MemberBlock'; import { playgroundLink } from '@/constants/links'; diff --git a/apps/playground/src/components/makers/Notifier.stories.tsx b/apps/playground/src/components/makers/Notifier.stories.tsx index 20e76e236..2d51f22d9 100644 --- a/apps/playground/src/components/makers/Notifier.stories.tsx +++ b/apps/playground/src/components/makers/Notifier.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import Notifier from '@/components/makers/Notifier'; diff --git a/apps/playground/src/components/makers/Notifier.tsx b/apps/playground/src/components/makers/Notifier.tsx index 632beb4c0..d00543c57 100644 --- a/apps/playground/src/components/makers/Notifier.tsx +++ b/apps/playground/src/components/makers/Notifier.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import IconOutgoing from '@/public/icons/icon-link-outgoing.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/makers/PersonBlock.stories.tsx b/apps/playground/src/components/makers/PersonBlock.stories.tsx index 1881408cf..b65498ad5 100644 --- a/apps/playground/src/components/makers/PersonBlock.stories.tsx +++ b/apps/playground/src/components/makers/PersonBlock.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import PersonBlock from '@/components/makers/PersonBlock'; diff --git a/apps/playground/src/components/makers/PersonBlock.tsx b/apps/playground/src/components/makers/PersonBlock.tsx index 7769ed520..c11aa4e49 100644 --- a/apps/playground/src/components/makers/PersonBlock.tsx +++ b/apps/playground/src/components/makers/PersonBlock.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import ResizedImage from '@/components/common/ResizedImage'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/makers/TeamBlock.stories.tsx b/apps/playground/src/components/makers/TeamBlock.stories.tsx index 69e4b3723..8b719686e 100644 --- a/apps/playground/src/components/makers/TeamBlock.stories.tsx +++ b/apps/playground/src/components/makers/TeamBlock.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import TeamBlock from '@/components/makers/TeamBlock'; diff --git a/apps/playground/src/components/makers/TeamBlock.tsx b/apps/playground/src/components/makers/TeamBlock.tsx index 91be893da..01dcc73e5 100644 --- a/apps/playground/src/components/makers/TeamBlock.tsx +++ b/apps/playground/src/components/makers/TeamBlock.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import IconLinkOutgoing from '@/public/icons/icon-link-outgoing.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/makers/data/contributors.ts b/apps/playground/src/components/makers/data/contributors.ts index ab60ce445..9541d92e7 100644 --- a/apps/playground/src/components/makers/data/contributors.ts +++ b/apps/playground/src/components/makers/data/contributors.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const contributors: MakersGeneration = { title: 'Contributors', diff --git a/apps/playground/src/components/makers/data/generation1.ts b/apps/playground/src/components/makers/data/generation1.ts index 5408eb3b2..49ae9b3ca 100644 --- a/apps/playground/src/components/makers/data/generation1.ts +++ b/apps/playground/src/components/makers/data/generation1.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const generation1: MakersGeneration = { title: '1기', diff --git a/apps/playground/src/components/makers/data/generation2.ts b/apps/playground/src/components/makers/data/generation2.ts index 452f272d2..e4ff15fcd 100644 --- a/apps/playground/src/components/makers/data/generation2.ts +++ b/apps/playground/src/components/makers/data/generation2.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const generation2: MakersGeneration = { title: '2기', diff --git a/apps/playground/src/components/makers/data/generation3.ts b/apps/playground/src/components/makers/data/generation3.ts index 514e21a17..5f6b8188e 100644 --- a/apps/playground/src/components/makers/data/generation3.ts +++ b/apps/playground/src/components/makers/data/generation3.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const generation3: MakersGeneration = { title: '3기', diff --git a/apps/playground/src/components/makers/data/generation35.ts b/apps/playground/src/components/makers/data/generation35.ts index 6403bf350..80c2f0462 100644 --- a/apps/playground/src/components/makers/data/generation35.ts +++ b/apps/playground/src/components/makers/data/generation35.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const generation35: MakersGeneration = { title: '35기', diff --git a/apps/playground/src/components/makers/data/generation36.ts b/apps/playground/src/components/makers/data/generation36.ts index 0d008d5be..725625c38 100644 --- a/apps/playground/src/components/makers/data/generation36.ts +++ b/apps/playground/src/components/makers/data/generation36.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const generation36: MakersGeneration = { title: '36기', diff --git a/apps/playground/src/components/makers/data/generation37.ts b/apps/playground/src/components/makers/data/generation37.ts index 9c2019602..51dc6d318 100644 --- a/apps/playground/src/components/makers/data/generation37.ts +++ b/apps/playground/src/components/makers/data/generation37.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const generation37: MakersGeneration = { title: '37기', diff --git a/apps/playground/src/components/makers/data/generation4.ts b/apps/playground/src/components/makers/data/generation4.ts index 5734d840c..b1c4706c2 100644 --- a/apps/playground/src/components/makers/data/generation4.ts +++ b/apps/playground/src/components/makers/data/generation4.ts @@ -1,4 +1,4 @@ -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const generation4: MakersGeneration = { title: '4기', diff --git a/apps/playground/src/components/makers/data/index.ts b/apps/playground/src/components/makers/data/index.ts index 205aac109..a104552b4 100644 --- a/apps/playground/src/components/makers/data/index.ts +++ b/apps/playground/src/components/makers/data/index.ts @@ -6,7 +6,7 @@ import { generation4 } from '@/components/makers/data/generation4'; import { generation35 } from '@/components/makers/data/generation35'; import { generation36 } from '@/components/makers/data/generation36'; import { generation37 } from '@/components/makers/data/generation37'; -import { MakersGeneration } from '@/components/makers/data/types'; +import type { MakersGeneration } from '@/components/makers/data/types'; export const makersGenerationsData: MakersGeneration[] = [ generation37, diff --git a/apps/playground/src/components/matchmember/BalanceOpenButton.tsx b/apps/playground/src/components/matchmember/BalanceOpenButton.tsx index 9d9d20e3d..606331e5e 100644 --- a/apps/playground/src/components/matchmember/BalanceOpenButton.tsx +++ b/apps/playground/src/components/matchmember/BalanceOpenButton.tsx @@ -1,8 +1,9 @@ -import { isClientSide } from '@/utils'; import styled from '@emotion/styled'; import { Button } from '@sopt-makers/ui'; import { useEffect, useState } from 'react'; +import { isClientSide } from '@/utils'; + const BalanceOpenButton = () => { const [isOpen, setIsOpen] = useState(false); diff --git a/apps/playground/src/components/matchmember/MatchContent.tsx b/apps/playground/src/components/matchmember/MatchContent.tsx index de1697855..cc00cbc55 100644 --- a/apps/playground/src/components/matchmember/MatchContent.tsx +++ b/apps/playground/src/components/matchmember/MatchContent.tsx @@ -9,13 +9,8 @@ import Loading from '@/components/common/Loading'; import Text from '@/components/common/Text'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; -import { - BalanceGameValue, - ChoiceSide, - convertAnswersToApiPayload, - QuestionKey, - QUESTIONS, -} from '@/components/matchmember/constant'; +import type { BalanceGameValue, ChoiceSide, QuestionKey } from '@/components/matchmember/constant'; +import { convertAnswersToApiPayload, QUESTIONS } from '@/components/matchmember/constant'; import { MemberCard } from '@/components/matchmember/MemberCard'; import { playgroundLink } from '@/constants/links'; import promotion from '@/public/icons/img/popup/member_match.png'; diff --git a/apps/playground/src/components/matchmember/MatchMemberModal.tsx b/apps/playground/src/components/matchmember/MatchMemberModal.tsx index 878c306f5..75cbef29f 100644 --- a/apps/playground/src/components/matchmember/MatchMemberModal.tsx +++ b/apps/playground/src/components/matchmember/MatchMemberModal.tsx @@ -1,18 +1,19 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useState } from 'react'; + import { ModalBottomSheet } from '@/components/common/BottomSheet/ModalBottomSheet'; import Modal from '@/components/common/Modal'; import Responsive from '@/components/common/Responsive'; -import { zIndex } from '@/styles/zIndex'; -import { MB_BIG_MEDIA_QUERY } from '@/styles/mediaQuery'; -import bgImg from '@/public/icons/img/popup/member_match_bg.png'; -import { MatchContent } from '@/components/matchmember/MatchContent'; -import { BalanceGameValue, ChoiceSide, QuestionKey } from '@/components/matchmember/constant'; import { LoggingImpression } from '@/components/eventLogger/components/LoggingImpression'; +import type { BalanceGameValue, ChoiceSide, QuestionKey } from '@/components/matchmember/constant'; +import { MatchContent } from '@/components/matchmember/MatchContent'; +import bgImg from '@/public/icons/img/popup/member_match_bg.png'; +import { MB_BIG_MEDIA_QUERY } from '@/styles/mediaQuery'; +import { zIndex } from '@/styles/zIndex'; interface MatchMemberModalProps { onClose: () => void; diff --git a/apps/playground/src/components/members/ask/AskFormPage.tsx b/apps/playground/src/components/members/ask/AskFormPage.tsx index b43c2413a..7923d11c2 100644 --- a/apps/playground/src/components/members/ask/AskFormPage.tsx +++ b/apps/playground/src/components/members/ask/AskFormPage.tsx @@ -1,8 +1,9 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { IconChevronLeft, IconFlipForward, IconRepeat } from '@sopt-makers/icons'; +import { IconFlipForward } from '@sopt-makers/icons'; import { Button } from '@sopt-makers/ui'; -import { ReactNode, useEffect, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useRef, useState } from 'react'; import Checkbox from '@/components/common/Checkbox'; import Responsive from '@/components/common/Responsive'; diff --git a/apps/playground/src/components/members/common/MemberBlock.stories.tsx b/apps/playground/src/components/members/common/MemberBlock.stories.tsx index 68c32e04d..2d2bd75ce 100644 --- a/apps/playground/src/components/members/common/MemberBlock.stories.tsx +++ b/apps/playground/src/components/members/common/MemberBlock.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MemberBlock from '@/components/members/common/MemberBlock'; diff --git a/apps/playground/src/components/members/common/MemberBlock.tsx b/apps/playground/src/components/members/common/MemberBlock.tsx index 035383a30..3b0a4e154 100644 --- a/apps/playground/src/components/members/common/MemberBlock.tsx +++ b/apps/playground/src/components/members/common/MemberBlock.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import ResizedImage from '@/components/common/ResizedImage'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/common/MemberPageLayout.tsx b/apps/playground/src/components/members/common/MemberPageLayout.tsx index 6fda3f2e1..0266a5ccd 100644 --- a/apps/playground/src/components/members/common/MemberPageLayout.tsx +++ b/apps/playground/src/components/members/common/MemberPageLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { getScreenMaxWidthMediaQuery } from '@/utils'; diff --git a/apps/playground/src/components/members/common/WithMemberMetadata.tsx b/apps/playground/src/components/members/common/WithMemberMetadata.tsx index b129b4f0a..3e0f4ec59 100644 --- a/apps/playground/src/components/members/common/WithMemberMetadata.tsx +++ b/apps/playground/src/components/members/common/WithMemberMetadata.tsx @@ -1,4 +1,4 @@ -import { FC, ReactElement } from 'react'; +import type { FC, ReactElement } from 'react'; import { selector, selectorFamily, useRecoilValueLoadable } from 'recoil'; import { getMemberProfile } from '@/api/endpoint_LEGACY/members'; diff --git a/apps/playground/src/components/members/common/select/OrderBySelect.stories.tsx b/apps/playground/src/components/members/common/select/OrderBySelect.stories.tsx index ab08dac88..0af3667b8 100644 --- a/apps/playground/src/components/members/common/select/OrderBySelect.stories.tsx +++ b/apps/playground/src/components/members/common/select/OrderBySelect.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import OrderBySelect from './OrderBySelect'; diff --git a/apps/playground/src/components/members/common/select/OrderBySelect.tsx b/apps/playground/src/components/members/common/select/OrderBySelect.tsx index 356a36898..d3e59e63b 100644 --- a/apps/playground/src/components/members/common/select/OrderBySelect.tsx +++ b/apps/playground/src/components/members/common/select/OrderBySelect.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import * as Select from '@radix-ui/react-select'; import { colors } from '@sopt-makers/colors'; import dynamic from 'next/dynamic'; -import React, { FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react'; +import type { FC, PropsWithChildren, ReactNode } from 'react'; +import React, { useEffect, useState } from 'react'; import Text from '@/components/common/Text'; import { SelectContext, useSelectContext } from '@/components/members/common/select/context'; diff --git a/apps/playground/src/components/members/common/select/Select.stories.tsx b/apps/playground/src/components/members/common/select/Select.stories.tsx index fde76d323..36c60d91e 100644 --- a/apps/playground/src/components/members/common/select/Select.stories.tsx +++ b/apps/playground/src/components/members/common/select/Select.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import Select from '@/components/members/common/select/Select'; diff --git a/apps/playground/src/components/members/common/select/Select.tsx b/apps/playground/src/components/members/common/select/Select.tsx index 39b7fee4f..9c2b8cc43 100644 --- a/apps/playground/src/components/members/common/select/Select.tsx +++ b/apps/playground/src/components/members/common/select/Select.tsx @@ -4,7 +4,8 @@ import * as ScrollArea from '@radix-ui/react-scroll-area'; import * as Select from '@radix-ui/react-select'; import { colors } from '@sopt-makers/colors'; import dynamic from 'next/dynamic'; -import { FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react'; +import type { FC, PropsWithChildren, ReactNode } from 'react'; +import { useEffect, useState } from 'react'; import { SelectContext, useSelectContext } from '@/components/members/common/select/context'; import { Overlay } from '@/components/members/common/select/Overlay'; diff --git a/apps/playground/src/components/members/common/select/context.ts b/apps/playground/src/components/members/common/select/context.ts index 303f9eb6a..73902e5ce 100644 --- a/apps/playground/src/components/members/common/select/context.ts +++ b/apps/playground/src/components/members/common/select/context.ts @@ -1,4 +1,5 @@ -import { createContext, ReactNode, useContext } from 'react'; +import type { ReactNode } from 'react'; +import { createContext, useContext } from 'react'; type Size = 'medium' | 'small'; export type SelectContextValue = { diff --git a/apps/playground/src/components/members/detail/ActivityBadge.stories.tsx b/apps/playground/src/components/members/detail/ActivityBadge.stories.tsx index f714233f1..d46995949 100644 --- a/apps/playground/src/components/members/detail/ActivityBadge.stories.tsx +++ b/apps/playground/src/components/members/detail/ActivityBadge.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ActivityBadge from './ActivityBadge'; diff --git a/apps/playground/src/components/members/detail/ActivityBadge.tsx b/apps/playground/src/components/members/detail/ActivityBadge.tsx index cb74eba94..2c873677f 100644 --- a/apps/playground/src/components/members/detail/ActivityBadge.tsx +++ b/apps/playground/src/components/members/detail/ActivityBadge.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import Text from '@/components/common/Text'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/AskReply.tsx b/apps/playground/src/components/members/detail/ActivitySection/AskReply.tsx index 20a8e1875..979185665 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/AskReply.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/AskReply.tsx @@ -9,7 +9,7 @@ import { Flex } from '@toss/emotion-utils'; import { useRouter } from 'next/router'; import { useState } from 'react'; -import { MemberQuestion } from '@/api/endpoint/members/getMemberQuestions'; +import type { MemberQuestion } from '@/api/endpoint/members/getMemberQuestions'; import { usePostAnswerReaction } from '@/api/endpoint/members/postAnswerReaction'; import useModalState from '@/components/common/Modal/useModalState'; import ResizedImage from '@/components/common/ResizedImage'; @@ -20,10 +20,10 @@ import FeedDropdown from '@/components/feed/common/FeedDropdown'; import FeedLike from '@/components/feed/common/FeedLike'; import { useDeleteQuestionAnswer } from '@/components/feed/common/hooks/useDeleteQuestion'; import { getRelativeTime } from '@/components/feed/common/utils'; +import { parseMentionsToJSX } from '@/components/feed/common/utils/parseMention'; import { MessageCategory } from '@/components/members/detail/MessageSection/MessageModal'; import MessageModal from '@/components/members/detail/MessageSection/MessageModal'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -import { parseMentionsToJSX } from '@/components/feed/common/utils/parseMention'; import { parseTextToLink } from '@/utils/parseTextToLink'; interface AskReplyProps { question: MemberQuestion; diff --git a/apps/playground/src/components/members/detail/ActivitySection/AskTabContent.tsx b/apps/playground/src/components/members/detail/ActivitySection/AskTabContent.tsx index bdd2d2bf6..9b95d793e 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/AskTabContent.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/AskTabContent.tsx @@ -8,7 +8,8 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { QuestionTab, useGetMemberQuestions } from '@/api/endpoint/members/getMemberQuestions'; +import type { QuestionTab } from '@/api/endpoint/members/getMemberQuestions'; +import { useGetMemberQuestions } from '@/api/endpoint/members/getMemberQuestions'; import { useGetMyLatestAnsweredQuestion } from '@/api/endpoint/members/getMyLatestAnsweredQuestion'; import { usePostQuestionReaction } from '@/api/endpoint/members/postQuestionReaction'; import Pagination from '@/components/common/Pagination'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/MemberDetail.tsx b/apps/playground/src/components/members/detail/ActivitySection/MemberDetail.tsx index cb6902528..a4efd63b9 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/MemberDetail.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/MemberDetail.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Tag } from '@sopt-makers/ui'; import { useRouter } from 'next/router'; -import { FC, useMemo } from 'react'; +import type { FC } from 'react'; +import { useMemo } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { useGetUnansweredQuestionCount } from '@/api/endpoint/members/getUnansweredQuestionCount'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.stories.tsx b/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.stories.tsx index 2e4b4853b..14afbb0ea 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.stories.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MemberMeetingCard from '@/components/members/detail/ActivitySection/MemberMeetingCard'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.tsx b/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.tsx index 872e0bf2a..26a6923d3 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/MemberMeetingCard.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import ContentsCard from '@/components/common/ContentsCard'; import { playgroundLink } from '@/constants/links'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.stories.tsx b/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.stories.tsx index 1d8f2bfb7..1e334f708 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.stories.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MemberProjectCard from '@/components/members/detail/ActivitySection/MemberProjectCard'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.tsx b/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.tsx index 34bd1013b..d69af7129 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCard.tsx @@ -1,7 +1,7 @@ import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; -import { MemberProject } from '@/api/endpoint_LEGACY/members/type'; +import type { MemberProject } from '@/api/endpoint_LEGACY/members/type'; import ContentsCard from '@/components/common/ContentsCard'; import { PROJECT_CATEGORY_LABEL } from '@/components/members/detail/constants'; import { playgroundLink } from '@/constants/links'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCardLegacy.tsx b/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCardLegacy.tsx index 41873e8b1..44009d4f0 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCardLegacy.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/MemberProjectCardLegacy.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; -import { MemberProject } from '@/api/endpoint_LEGACY/members/type'; +import type { MemberProject } from '@/api/endpoint_LEGACY/members/type'; import { PROJECT_CATEGORY_LABEL } from '@/components/members/detail/constants'; import { playgroundLink } from '@/constants/links'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/detail/ActivitySection/ProfileTabContent.tsx b/apps/playground/src/components/members/detail/ActivitySection/ProfileTabContent.tsx index 1dc9bdc28..3ee68dc33 100644 --- a/apps/playground/src/components/members/detail/ActivitySection/ProfileTabContent.tsx +++ b/apps/playground/src/components/members/detail/ActivitySection/ProfileTabContent.tsx @@ -1,4 +1,4 @@ -import { ProfileDetail, SoptActivity } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileDetail, SoptActivity } from '@/api/endpoint_LEGACY/members/type'; import CareerSection from '@/components/members/detail/CareerSection'; import DetailInfoSection from '@/components/members/detail/DetailinfoSection'; import GroupSection from '@/components/members/detail/GroupSection'; diff --git a/apps/playground/src/components/members/detail/CareerSection/CareerItem.stories.tsx b/apps/playground/src/components/members/detail/CareerSection/CareerItem.stories.tsx index 497724045..d897e1d06 100644 --- a/apps/playground/src/components/members/detail/CareerSection/CareerItem.stories.tsx +++ b/apps/playground/src/components/members/detail/CareerSection/CareerItem.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import CareerItem from '@/components/members/detail/CareerSection/CareerItem'; diff --git a/apps/playground/src/components/members/detail/CareerSection/CareerItem.tsx b/apps/playground/src/components/members/detail/CareerSection/CareerItem.tsx index e94297d88..c002c2071 100644 --- a/apps/playground/src/components/members/detail/CareerSection/CareerItem.tsx +++ b/apps/playground/src/components/members/detail/CareerSection/CareerItem.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; +import { fonts } from '@sopt-makers/fonts'; +import { Flex } from '@toss/emotion-utils'; import dayjs from 'dayjs'; -import { FC } from 'react'; +import type { FC } from 'react'; -import { Career } from '@/components/members/detail/types'; +import type { Career } from '@/components/members/detail/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; -import { Flex } from '@toss/emotion-utils'; -import { fonts } from '@sopt-makers/fonts'; type CareerItemProps = { career: Career; diff --git a/apps/playground/src/components/members/detail/CareerSection/index.stories.tsx b/apps/playground/src/components/members/detail/CareerSection/index.stories.tsx index 615921806..c68e04a23 100644 --- a/apps/playground/src/components/members/detail/CareerSection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/CareerSection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import CareerSection from '@/components/members/detail/CareerSection'; diff --git a/apps/playground/src/components/members/detail/CareerSection/index.tsx b/apps/playground/src/components/members/detail/CareerSection/index.tsx index 4c9961812..fc9597f2c 100644 --- a/apps/playground/src/components/members/detail/CareerSection/index.tsx +++ b/apps/playground/src/components/members/detail/CareerSection/index.tsx @@ -4,11 +4,11 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import Link from 'next/link'; -import { MemberLink } from '@/api/endpoint_LEGACY/members/type'; +import type { MemberLink } from '@/api/endpoint_LEGACY/members/type'; import MemberDetailSection from '@/components/members/detail/ActivitySection/MemberDetailSection'; import CareerItem from '@/components/members/detail/CareerSection/CareerItem'; import InfoItem from '@/components/members/detail/InfoItem'; -import { Career } from '@/components/members/detail/types'; +import type { Career } from '@/components/members/detail/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/members/detail/DetailinfoSection/index.stories.tsx b/apps/playground/src/components/members/detail/DetailinfoSection/index.stories.tsx index 56b06016f..751ff63f2 100644 --- a/apps/playground/src/components/members/detail/DetailinfoSection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/DetailinfoSection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import DetailInfoSection from './index'; diff --git a/apps/playground/src/components/members/detail/DetailinfoSection/index.tsx b/apps/playground/src/components/members/detail/DetailinfoSection/index.tsx index 449bd0cf5..ccc5dfc13 100644 --- a/apps/playground/src/components/members/detail/DetailinfoSection/index.tsx +++ b/apps/playground/src/components/members/detail/DetailinfoSection/index.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; import MemberDetailSection from '@/components/members/detail/ActivitySection/MemberDetailSection'; import InfoItem from '@/components/members/detail/InfoItem'; diff --git a/apps/playground/src/components/members/detail/EmptyProfile.tsx b/apps/playground/src/components/members/detail/EmptyProfile.tsx index 2233daf9d..eb22713ce 100644 --- a/apps/playground/src/components/members/detail/EmptyProfile.tsx +++ b/apps/playground/src/components/members/detail/EmptyProfile.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { playgroundLink } from '@sopt/ui'; import ProfileIcon from 'public/icons/icon-profile.svg'; import Button from '@/components/common/Button'; diff --git a/apps/playground/src/components/members/detail/GroupSection/index.stories.tsx b/apps/playground/src/components/members/detail/GroupSection/index.stories.tsx index bcecc3c6e..2478e5820 100644 --- a/apps/playground/src/components/members/detail/GroupSection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/GroupSection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import GroupSection from './index'; diff --git a/apps/playground/src/components/members/detail/GroupSection/index.tsx b/apps/playground/src/components/members/detail/GroupSection/index.tsx index dad7e67b6..6d5cbf0d0 100644 --- a/apps/playground/src/components/members/detail/GroupSection/index.tsx +++ b/apps/playground/src/components/members/detail/GroupSection/index.tsx @@ -1,20 +1,20 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; +import { useVirtualizer } from '@tanstack/react-virtual'; import axios from 'axios'; import Link from 'next/link'; import { useCallback, useRef } from 'react'; -import { useVirtualizer } from '@tanstack/react-virtual'; -import { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; +import { useMemberMeetingList } from '@/api/crew/getMeetingList'; +import type { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; +import Loading from '@/components/common/Loading'; import ResizedImage from '@/components/common/ResizedImage'; import Text from '@/components/common/Text'; import MemberMeetingCard from '@/components/members/detail/ActivitySection/MemberMeetingCard'; import EmptyProfile from '@/components/members/detail/EmptyProfile'; import { playgroundLink } from '@/constants/links'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -import { useMemberMeetingList } from '@/api/crew/getMeetingList'; -import Loading from '@/components/common/Loading'; interface GroupSectionProps { profile: ProfileDetail; diff --git a/apps/playground/src/components/members/detail/InfoItem.tsx b/apps/playground/src/components/members/detail/InfoItem.tsx index 033638359..b6f2e8a95 100644 --- a/apps/playground/src/components/members/detail/InfoItem.tsx +++ b/apps/playground/src/components/members/detail/InfoItem.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC, PropsWithChildren, ReactChild } from 'react'; +import type { FC, PropsWithChildren, ReactChild } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/detail/InterestSection/index.stories.tsx b/apps/playground/src/components/members/detail/InterestSection/index.stories.tsx index 0f311a2ac..f6f0b6ed7 100644 --- a/apps/playground/src/components/members/detail/InterestSection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/InterestSection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import InterestSection from '.'; diff --git a/apps/playground/src/components/members/detail/InterestSection/index.tsx b/apps/playground/src/components/members/detail/InterestSection/index.tsx index 4a686ff47..4b3ce5010 100644 --- a/apps/playground/src/components/members/detail/InterestSection/index.tsx +++ b/apps/playground/src/components/members/detail/InterestSection/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import Text from '@/components/common/Text'; import MemberDetailSection from '@/components/members/detail/ActivitySection/MemberDetailSection'; diff --git a/apps/playground/src/components/members/detail/MessageSection/MessageModal.stories.tsx b/apps/playground/src/components/members/detail/MessageSection/MessageModal.stories.tsx index bc1087cd9..5b305a770 100644 --- a/apps/playground/src/components/members/detail/MessageSection/MessageModal.stories.tsx +++ b/apps/playground/src/components/members/detail/MessageSection/MessageModal.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MessageModal from './MessageModal'; diff --git a/apps/playground/src/components/members/detail/MessageSection/MessageModal.tsx b/apps/playground/src/components/members/detail/MessageSection/MessageModal.tsx index 0a47809f9..f5a88ae0b 100644 --- a/apps/playground/src/components/members/detail/MessageSection/MessageModal.tsx +++ b/apps/playground/src/components/members/detail/MessageSection/MessageModal.tsx @@ -1,9 +1,10 @@ import styled from '@emotion/styled'; import { yupResolver } from '@hookform/resolvers/yup'; import { colors } from '@sopt-makers/colors'; -import IconPlane from '@/public/icons/icon_plane.svg'; +import { fonts } from '@sopt-makers/fonts'; import { Button, DialogContext, TextArea, TextField } from '@sopt-makers/ui'; -import { ComponentType, FC, SVGProps, useContext, useState } from 'react'; +import type { ComponentType, FC, SVGProps } from 'react'; +import { useContext, useState } from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; @@ -12,14 +13,15 @@ import RHFControllerFormItem from '@/components/common/form/RHFControllerFormIte import Loading from '@/components/common/Loading'; import useCustomConfirm from '@/components/common/Modal/useCustomConfirm'; import Text from '@/components/common/Text'; -import Modal, { ModalProps } from '@/components/members/detail/MessageSection/Modal'; -import { MB_BIG_MEDIA_QUERY } from '@/styles/mediaQuery'; -import { zIndex } from '@/styles/zIndex'; -import IconNetwork from '@/public/icons/icon-network.svg'; +import type { ModalProps } from '@/components/members/detail/MessageSection/Modal'; +import Modal from '@/components/members/detail/MessageSection/Modal'; +import IconPlane from '@/public/icons/icon_plane.svg'; import IconAppjam from '@/public/icons/icon-appjam-build.svg'; -import IconProject from '@/public/icons/icon-project-suggest.svg'; +import IconNetwork from '@/public/icons/icon-network.svg'; import IconEtc from '@/public/icons/icon-postnote-etc.svg'; -import { fonts } from '@sopt-makers/fonts'; +import IconProject from '@/public/icons/icon-project-suggest.svg'; +import { MB_BIG_MEDIA_QUERY } from '@/styles/mediaQuery'; +import { zIndex } from '@/styles/zIndex'; export enum MessageCategory { NETWORK = '친목', @@ -111,38 +113,34 @@ const MessageModal: FC<MessageModalProps> = ({ zIndex: zIndex.헤더 + 102, width: 400, }); - try { - if (!selectedCategory) { - return; - } - if (result) { - await mutateAsync({ - senderPhone: phone, - content, - category: selectedCategory, - receiverId, - }); - - onLog?.({ category: selectedCategory }); - - openDialog({ - title: '쪽지 전송이 완료됐어요.', - description: ( - <> - 쪽지는 {name}님의 문자로 안전히 전달되었어요. - <br /> - 좋은 대화로 이어지길 기대할게요. - </> - ), - type: 'single', - typeOptions: { - approveButtonText: '완료', - buttonFunction: closeDialog, - }, - }); - } - } catch (error) { - throw error; + if (!selectedCategory) { + return; + } + if (result) { + await mutateAsync({ + senderPhone: phone, + content, + category: selectedCategory, + receiverId, + }); + + onLog?.({ category: selectedCategory }); + + openDialog({ + title: '쪽지 전송이 완료됐어요.', + description: ( + <> + 쪽지는 {name}님의 문자로 안전히 전달되었어요. + <br /> + 좋은 대화로 이어지길 기대할게요. + </> + ), + type: 'single', + typeOptions: { + approveButtonText: '완료', + buttonFunction: closeDialog, + }, + }); } }; diff --git a/apps/playground/src/components/members/detail/MessageSection/Modal.tsx b/apps/playground/src/components/members/detail/MessageSection/Modal.tsx index ce1eb896c..daada6aa3 100644 --- a/apps/playground/src/components/members/detail/MessageSection/Modal.tsx +++ b/apps/playground/src/components/members/detail/MessageSection/Modal.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { IconXClose } from '@sopt-makers/icons'; import FocusTrap from 'focus-trap-react'; -import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useRef } from 'react'; +import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; +import { useRef } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; import Portal from '@/components/common/Portal'; diff --git a/apps/playground/src/components/members/detail/MessageSection/index.stories.tsx b/apps/playground/src/components/members/detail/MessageSection/index.stories.tsx index 084c6adbc..dbe84b4a5 100644 --- a/apps/playground/src/components/members/detail/MessageSection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/MessageSection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ToastProvider from '@/components/common/Toast/providers/ToastProvider'; import MessageSection from '@/components/members/detail/MessageSection'; diff --git a/apps/playground/src/components/members/detail/MessageSection/index.tsx b/apps/playground/src/components/members/detail/MessageSection/index.tsx index 1c8fc3e86..803db5b84 100644 --- a/apps/playground/src/components/members/detail/MessageSection/index.tsx +++ b/apps/playground/src/components/members/detail/MessageSection/index.tsx @@ -1,11 +1,11 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { Button } from '@sopt-makers/ui'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; import useModalState from '@/components/common/Modal/useModalState'; import Text from '@/components/common/Text'; import useToast from '@/components/common/Toast/useToast'; diff --git a/apps/playground/src/components/members/detail/PartItem.stories.tsx b/apps/playground/src/components/members/detail/PartItem.stories.tsx index 691a1869e..ebed37181 100644 --- a/apps/playground/src/components/members/detail/PartItem.stories.tsx +++ b/apps/playground/src/components/members/detail/PartItem.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import PartItem from './PartItem'; diff --git a/apps/playground/src/components/members/detail/PartItem.tsx b/apps/playground/src/components/members/detail/PartItem.tsx index e2324d66b..bc3bc845b 100644 --- a/apps/playground/src/components/members/detail/PartItem.tsx +++ b/apps/playground/src/components/members/detail/PartItem.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { IconPlus } from '@sopt-makers/icons'; import { Tag } from '@sopt-makers/ui'; import Link from 'next/link'; -import { playgroundLink } from '@sopt/ui'; -import { FC } from 'react'; +import type { FC } from 'react'; import Text from '@/components/common/Text'; import ActivityBadge from '@/components/members/detail/ActivityBadge'; diff --git a/apps/playground/src/components/members/detail/ProfileSection/index.stories.tsx b/apps/playground/src/components/members/detail/ProfileSection/index.stories.tsx index 05b323549..3af4df15c 100644 --- a/apps/playground/src/components/members/detail/ProfileSection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/ProfileSection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ProfileSection from '@/components/members/detail/ProfileSection'; diff --git a/apps/playground/src/components/members/detail/ProfileSection/index.tsx b/apps/playground/src/components/members/detail/ProfileSection/index.tsx index 7da2b66e8..cb4da3b1b 100644 --- a/apps/playground/src/components/members/detail/ProfileSection/index.tsx +++ b/apps/playground/src/components/members/detail/ProfileSection/index.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconAlertTriangle, IconBirthdaySecondary, IconMail, IconPhone, IconUser, IconUserX } from '@sopt-makers/icons'; @@ -7,10 +8,9 @@ import dayjs from 'dayjs'; import { uniq } from 'lodash-es'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import EditIcon from 'public/icons/icon-edit.svg'; -import { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; import ResizedImage from '@/components/common/ResizedImage'; import Responsive from '@/components/common/Responsive'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; diff --git a/apps/playground/src/components/members/detail/ProjectSection/index.stories.tsx b/apps/playground/src/components/members/detail/ProjectSection/index.stories.tsx index f38474e7e..7992667de 100644 --- a/apps/playground/src/components/members/detail/ProjectSection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/ProjectSection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ProjectSection from '@/components/members/detail/ProjectSection'; diff --git a/apps/playground/src/components/members/detail/ProjectSection/index.tsx b/apps/playground/src/components/members/detail/ProjectSection/index.tsx index c951f0aa1..9d999b81f 100644 --- a/apps/playground/src/components/members/detail/ProjectSection/index.tsx +++ b/apps/playground/src/components/members/detail/ProjectSection/index.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import Link from 'next/link'; -import { playgroundLink } from '@sopt/ui'; -import { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileDetail } from '@/api/endpoint_LEGACY/members/type'; import ResizedImage from '@/components/common/ResizedImage'; import Text from '@/components/common/Text'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; diff --git a/apps/playground/src/components/members/detail/SoptActivitySection/index.stories.tsx b/apps/playground/src/components/members/detail/SoptActivitySection/index.stories.tsx index 7d6d938fe..27f4c0f1f 100644 --- a/apps/playground/src/components/members/detail/SoptActivitySection/index.stories.tsx +++ b/apps/playground/src/components/members/detail/SoptActivitySection/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import SoptActivitySection from '@/components/members/detail/SoptActivitySection'; diff --git a/apps/playground/src/components/members/detail/SoptActivitySection/index.tsx b/apps/playground/src/components/members/detail/SoptActivitySection/index.tsx index 065177031..7ad629f14 100644 --- a/apps/playground/src/components/members/detail/SoptActivitySection/index.tsx +++ b/apps/playground/src/components/members/detail/SoptActivitySection/index.tsx @@ -1,10 +1,10 @@ -import { playgroundLink } from '@sopt/ui'; +import { playgroundLink } from '@sopt/constant'; -import { SoptActivity } from '@/api/endpoint_LEGACY/members/type'; +import type { SoptActivity } from '@/api/endpoint_LEGACY/members/type'; import { isProjectCategory } from '@/api/endpoint_LEGACY/projects/type'; import MemberDetailSection from '@/components/members/detail/ActivitySection/MemberDetailSection'; import PartItem from '@/components/members/detail/PartItem'; -import { Category } from '@/components/projects/types'; +import type { Category } from '@/components/projects/types'; interface SoptActivitySectionProps { soptActivities: SoptActivity[]; @@ -48,8 +48,9 @@ function convertProjectType(typeCode: Category) { return '솝텀 프로젝트'; case 'STUDY': return '스터디'; - default: + default: { const exhaustiveCheck: never = typeCode; throw new Error(`project category ${exhaustiveCheck} type error`); + } } } diff --git a/apps/playground/src/components/members/detail/constants.ts b/apps/playground/src/components/members/detail/constants.ts index 498d62e17..cc43e82c2 100644 --- a/apps/playground/src/components/members/detail/constants.ts +++ b/apps/playground/src/components/members/detail/constants.ts @@ -1,4 +1,4 @@ -import { ProjectCategory } from '@/components/members/detail/types'; +import type { ProjectCategory } from '@/components/members/detail/types'; export const PROJECT_CATEGORY_LABEL: Record<ProjectCategory, string> = { APPJAM: '앱잼', diff --git a/apps/playground/src/components/members/hooks/useBlockMember.ts b/apps/playground/src/components/members/hooks/useBlockMember.ts index 798b3ee0f..edbca8408 100644 --- a/apps/playground/src/components/members/hooks/useBlockMember.ts +++ b/apps/playground/src/components/members/hooks/useBlockMember.ts @@ -1,8 +1,8 @@ +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { useToast } from '@sopt-makers/ui'; import { useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { usePostBlockMemberMutation } from '@/api/endpoint/members/postBlockMember'; import useConfirm from '@/components/common/Modal/useConfirm'; diff --git a/apps/playground/src/components/members/hooks/useRegisterModal.tsx b/apps/playground/src/components/members/hooks/useRegisterModal.tsx index 08de751d4..89643fb2a 100644 --- a/apps/playground/src/components/members/hooks/useRegisterModal.tsx +++ b/apps/playground/src/components/members/hooks/useRegisterModal.tsx @@ -1,7 +1,9 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { useOverlay } from '@toss/use-overlay'; -import { ReactNode, useCallback } from 'react'; +import type { ReactNode } from 'react'; +import { useCallback } from 'react'; + import Modal from '@/components/common/Modal'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/main/AskOBMemberList/PartDropDown.tsx b/apps/playground/src/components/members/main/AskOBMemberList/PartDropDown.tsx index ebae6c3d9..24e029b46 100644 --- a/apps/playground/src/components/members/main/AskOBMemberList/PartDropDown.tsx +++ b/apps/playground/src/components/members/main/AskOBMemberList/PartDropDown.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { colors } from '@sopt-makers/colors'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { PART_OPTIONS } from '@/components/members/main/AskOBMemberList'; interface PartDropdownProps { diff --git a/apps/playground/src/components/members/main/AskOBMemberList/index.tsx b/apps/playground/src/components/members/main/AskOBMemberList/index.tsx index 4c3b1f5fe..c2ce3943d 100644 --- a/apps/playground/src/components/members/main/AskOBMemberList/index.tsx +++ b/apps/playground/src/components/members/main/AskOBMemberList/index.tsx @@ -3,17 +3,18 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconChevronDown } from '@sopt-makers/icons'; -import { ReactNode, startTransition, useEffect, useLayoutEffect, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { startTransition, useEffect, useLayoutEffect, useRef, useState } from 'react'; +import { useGetMemberProperty } from '@/api/endpoint/members/getMemberProperty'; import { useGetMembersAskList } from '@/api/endpoint/members/getMembersAskList'; import Carousel from '@/components/common/Carousel'; +import Responsive from '@/components/common/Responsive'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { getScreenMaxWidthMediaQuery } from '@/utils'; import OBMemberCard from './OBMemberCard'; import PartDropdown from './PartDropDown'; -import Responsive from '@/components/common/Responsive'; -import { useGetMemberProperty } from '@/api/endpoint/members/getMemberProperty'; type ListType = 'carousel-large' | 'carousel-small' | 'scroll' | 'tablet' | 'mobile' | undefined; const SCREEN_SIZE = { diff --git a/apps/playground/src/components/members/main/MemberCard/CoffeeChatButton.tsx b/apps/playground/src/components/members/main/MemberCard/CoffeeChatButton.tsx index 08eb72139..0660f29e1 100644 --- a/apps/playground/src/components/members/main/MemberCard/CoffeeChatButton.tsx +++ b/apps/playground/src/components/members/main/MemberCard/CoffeeChatButton.tsx @@ -4,11 +4,11 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Tag } from '@sopt-makers/ui'; import { Flex } from '@toss/emotion-utils'; -import { FC, MouseEvent } from 'react'; +import type { FC, MouseEvent } from 'react'; +import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import IconCoffee from '@/public/icons/icon-coffee.svg'; -import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; interface CoffeeChatButtonProps { className?: string; @@ -27,7 +27,7 @@ const CoffeeChatButton: FC<CoffeeChatButtonProps> = ({ className, onClick, recei <Button className={className} onClick={(e) => { - onClick && onClick(e); + onClick?.(e); logClickEvent('coffeechatBadge'); }} > diff --git a/apps/playground/src/components/members/main/MemberCard/MemberProfileImage.tsx b/apps/playground/src/components/members/main/MemberCard/MemberProfileImage.tsx index 999e17297..955546072 100644 --- a/apps/playground/src/components/members/main/MemberCard/MemberProfileImage.tsx +++ b/apps/playground/src/components/members/main/MemberCard/MemberProfileImage.tsx @@ -1,9 +1,8 @@ import styled from '@emotion/styled'; import * as AspectRatio from '@radix-ui/react-aspect-ratio'; import { colors } from '@sopt-makers/colors'; -import { m } from 'framer-motion'; - import { IconUser } from '@sopt-makers/icons'; +import { m } from 'framer-motion'; import ResizedImage from '@/components/common/ResizedImage'; import Responsive from '@/components/common/Responsive'; diff --git a/apps/playground/src/components/members/main/MemberCard/MessageButton.tsx b/apps/playground/src/components/members/main/MemberCard/MessageButton.tsx index 215930926..66a33af35 100644 --- a/apps/playground/src/components/members/main/MemberCard/MessageButton.tsx +++ b/apps/playground/src/components/members/main/MemberCard/MessageButton.tsx @@ -3,7 +3,7 @@ import * as Tooltip from '@radix-ui/react-tooltip'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconSend } from '@sopt-makers/icons'; -import { FC, MouseEvent } from 'react'; +import type { FC, MouseEvent } from 'react'; interface MessageButtonProps { className?: string; @@ -19,7 +19,7 @@ const MessageButton: FC<MessageButtonProps> = ({ className, name, onClick }) => <Button className={className} onClick={(e) => { - onClick && onClick(e); + onClick?.(e); }} > <StyledIconSend /> diff --git a/apps/playground/src/components/members/main/MemberCard/WorkPreferneceMemberCard.stories.tsx b/apps/playground/src/components/members/main/MemberCard/WorkPreferneceMemberCard.stories.tsx index 84c4b2bbd..5a8206eee 100644 --- a/apps/playground/src/components/members/main/MemberCard/WorkPreferneceMemberCard.stories.tsx +++ b/apps/playground/src/components/members/main/MemberCard/WorkPreferneceMemberCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import WorkPreferneceMemberCard from './WorkPreferneceMemberCard'; diff --git a/apps/playground/src/components/members/main/MemberCard/index.stories.tsx b/apps/playground/src/components/members/main/MemberCard/index.stories.tsx index bc09188b8..d796a53c2 100644 --- a/apps/playground/src/components/members/main/MemberCard/index.stories.tsx +++ b/apps/playground/src/components/members/main/MemberCard/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MemberCard from '.'; diff --git a/apps/playground/src/components/members/main/MemberCard/index.tsx b/apps/playground/src/components/members/main/MemberCard/index.tsx index 47c460e4a..7f560b7f9 100644 --- a/apps/playground/src/components/members/main/MemberCard/index.tsx +++ b/apps/playground/src/components/members/main/MemberCard/index.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { m } from 'framer-motion'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { FC, SyntheticEvent } from 'react'; +import type { FC, SyntheticEvent } from 'react'; import Responsive from '@/components/common/Responsive'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.stories.tsx b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.stories.tsx index 6c8643474..9285b3481 100644 --- a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.stories.tsx +++ b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import { menuValue } from '@/components/members/main/MemberList/MemberRoleMenu/constants'; diff --git a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx index f0b7fe9f1..5e764d823 100644 --- a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx +++ b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import Text from '@/components/common/Text'; import { MENUS } from '@/components/members/main/MemberList/MemberRoleMenu/constants'; diff --git a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.stories.tsx b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.stories.tsx index 81524f876..e9338293a 100644 --- a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.stories.tsx +++ b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import { menuValue } from '@/components/members/main/MemberList/MemberRoleMenu/constants'; diff --git a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.tsx b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.tsx index 39bd52443..cf4d5e224 100644 --- a/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.tsx +++ b/apps/playground/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleSelect.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; import Select from '@/components/members/common/select/Select'; import { MENUS } from '@/components/members/main/MemberList/MemberRoleMenu/constants'; diff --git a/apps/playground/src/components/members/main/MemberList/MemberSearch.tsx b/apps/playground/src/components/members/main/MemberList/MemberSearch.tsx index 3c96c8ca5..4ccc8b248 100644 --- a/apps/playground/src/components/members/main/MemberList/MemberSearch.tsx +++ b/apps/playground/src/components/members/main/MemberList/MemberSearch.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; -import { InputProps } from '@/components/common/Input'; +import type { InputProps } from '@/components/common/Input'; import SearchIcon from '@/public/icons/icon-member-search.svg'; import SearchClearIcon from '@/public/icons/icon-search-clear.svg'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.stories.tsx b/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.stories.tsx index ed983a9fe..532ce9fc0 100644 --- a/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.stories.tsx +++ b/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import OnBoardingBanner from '@/components/members/main/MemberList/OnBoardingBanner'; diff --git a/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.tsx b/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.tsx index 133250923..310942ab5 100644 --- a/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.tsx +++ b/apps/playground/src/components/members/main/MemberList/OnBoardingBanner.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import Responsive from '@/components/common/Responsive'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.stories.tsx b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.stories.tsx index 1127a6326..bbf76189c 100644 --- a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.stories.tsx +++ b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { GENERATION_DEFAULT_OPTION, GENERATION_OPTIONS } from '@/components/members/main/MemberList/filters/constants'; diff --git a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.tsx b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.tsx index f9bd0a9ea..55829c45c 100644 --- a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.tsx +++ b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilter.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; import { SelectV2 } from '@sopt-makers/ui'; -import { PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; -import { Option } from '@/components/members/main/MemberList/filters/constants'; +import type { Option } from '@/components/members/main/MemberList/filters/constants'; interface MemberListFilterProps<T> { className?: string; diff --git a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.stories.tsx b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.stories.tsx index acc3a0e71..53f902a78 100644 --- a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.stories.tsx +++ b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MemberListFilterSheet from './MemberListFilterSheet'; diff --git a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx index 2a9fa0862..730a5fc40 100644 --- a/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx +++ b/apps/playground/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { Slot } from '@radix-ui/react-slot'; import { colors } from '@sopt-makers/colors'; -import { FC, PropsWithChildren, ReactNode, useMemo, useState } from 'react'; +import type { FC, PropsWithChildren, ReactNode } from 'react'; +import { useMemo, useState } from 'react'; import ReactModalSheet from 'react-modal-sheet'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/members/main/MemberList/filters/MemberListOrder.tsx b/apps/playground/src/components/members/main/MemberList/filters/MemberListOrder.tsx index 21ebcee15..ac7d08fb2 100644 --- a/apps/playground/src/components/members/main/MemberList/filters/MemberListOrder.tsx +++ b/apps/playground/src/components/members/main/MemberList/filters/MemberListOrder.tsx @@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors'; import { IconSwitchVertical } from '@sopt-makers/icons'; import { SelectV2 } from '@sopt-makers/ui'; -import { Option } from '@/components/members/main/MemberList/filters/constants'; +import type { Option } from '@/components/members/main/MemberList/filters/constants'; interface MemberListOrderProps<T> { className?: string; diff --git a/apps/playground/src/components/members/main/MemberList/index.tsx b/apps/playground/src/components/members/main/MemberList/index.tsx index 76aeef5a9..90b38539e 100644 --- a/apps/playground/src/components/members/main/MemberList/index.tsx +++ b/apps/playground/src/components/members/main/MemberList/index.tsx @@ -8,10 +8,11 @@ import { Spacing } from '@toss/emotion-utils'; import { debounce, uniq } from 'lodash-es'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import React, { ChangeEvent, FC, ReactNode, useEffect, useMemo, useState } from 'react'; +import type { ChangeEvent, FC, ReactNode } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; -import { Profile } from '@/api/endpoint_LEGACY/members/type'; +import type { Profile } from '@/api/endpoint_LEGACY/members/type'; import BottomSheetSelect from '@/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect'; import EmptyView from '@/components/common/EmptyView'; import Responsive from '@/components/common/Responsive'; @@ -22,13 +23,13 @@ import BestOBMemberForAsk from '@/components/members/main/AskOBMemberList'; import { DESKTOP_ONE_MEDIA_QUERY, DESKTOP_TWO_MEDIA_QUERY } from '@/components/members/main/contants'; import { useMemberProfileQuery } from '@/components/members/main/hooks/useMemberProfileQuery'; import MemberCard from '@/components/members/main/MemberCard'; +import type { Option } from '@/components/members/main/MemberList/filters/constants'; import { EMPLOYED_OPTIONS, FILTER_DEFAULT_OPTION, GENERATION_DEFAULT_OPTION, GENERATION_OPTIONS, MBTI_OPTIONS, - Option, ORDER_OPTIONS, PART_DEFAULT_OPTION, PART_OPTIONS, diff --git a/apps/playground/src/components/members/main/hooks/useMemberProfileQuery.ts b/apps/playground/src/components/members/main/hooks/useMemberProfileQuery.ts index e3cd138d1..2ce2d1f6a 100644 --- a/apps/playground/src/components/members/main/hooks/useMemberProfileQuery.ts +++ b/apps/playground/src/components/members/main/hooks/useMemberProfileQuery.ts @@ -1,4 +1,5 @@ -import { keepPreviousData, QueryKey, useInfiniteQuery } from '@tanstack/react-query'; +import type { QueryKey } from '@tanstack/react-query'; +import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import qs from 'qs'; diff --git a/apps/playground/src/components/members/upload/AddableItem.tsx b/apps/playground/src/components/members/upload/AddableItem.tsx index d6b325090..f121b888f 100644 --- a/apps/playground/src/components/members/upload/AddableItem.tsx +++ b/apps/playground/src/components/members/upload/AddableItem.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import WarningIcon from 'public/icons/icon-warning.svg'; -import { HTMLAttributes, ReactNode, useState } from 'react'; +import type { HTMLAttributes, ReactNode } from 'react'; +import { useState } from 'react'; import Responsive from '@/components/common/Responsive'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/members/upload/AddableWrapper.tsx b/apps/playground/src/components/members/upload/AddableWrapper.tsx index f8176ff87..411dfc48f 100644 --- a/apps/playground/src/components/members/upload/AddableWrapper.tsx +++ b/apps/playground/src/components/members/upload/AddableWrapper.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import IconPlus from '@/public/icons/icon-plus.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/upload/CheckActivity/CheckSoptActivity.tsx b/apps/playground/src/components/members/upload/CheckActivity/CheckSoptActivity.tsx index f8c92f6f3..557af2697 100644 --- a/apps/playground/src/components/members/upload/CheckActivity/CheckSoptActivity.tsx +++ b/apps/playground/src/components/members/upload/CheckActivity/CheckSoptActivity.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; @@ -15,7 +15,7 @@ import SoptActivitySection from '@/components/members/detail/SoptActivitySection import useRegisterModal from '@/components/members/hooks/useRegisterModal'; import { UNSELECTED } from '@/components/members/upload/constants'; import MemberSoptActivityFormSection from '@/components/members/upload/FormSection/SoptActivity'; -import { SoptActivity } from '@/components/members/upload/types'; +import type { SoptActivity } from '@/components/members/upload/types'; export default function CheckSoptActivity() { const router = useRouter(); diff --git a/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckActivityModal.tsx b/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckActivityModal.tsx index caa6b7602..7f71f5ddc 100644 --- a/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckActivityModal.tsx +++ b/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckActivityModal.tsx @@ -1,8 +1,9 @@ -import CheckModal from '@/components/members/upload/CheckActivity/Modal/CheckModal'; -import CheckPopup from '@/components/members/upload/CheckActivity/Modal/CheckPopup'; +import { playgroundLink } from '@sopt/constant'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useEffect, useState } from 'react'; + +import CheckModal from '@/components/members/upload/CheckActivity/Modal/CheckModal'; +import CheckPopup from '@/components/members/upload/CheckActivity/Modal/CheckPopup'; import useMediaQuery from '@/hooks/useMediaQuery'; import { MOBILE_MAX_WIDTH } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckModal.tsx b/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckModal.tsx index 0e42ba60e..ade2e0005 100644 --- a/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckModal.tsx +++ b/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckModal.tsx @@ -1,8 +1,9 @@ import styled from '@emotion/styled'; -import Modal from '@/components/common/Modal'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; +import Modal from '@/components/common/Modal'; + interface CheckModalProps { isOpen: boolean; onClose: () => void; diff --git a/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckPopup.tsx b/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckPopup.tsx index 4c9d5ba3b..7cbc6af1a 100644 --- a/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckPopup.tsx +++ b/apps/playground/src/components/members/upload/CheckActivity/Modal/CheckPopup.tsx @@ -1,10 +1,11 @@ -import * as Dialog from '@radix-ui/react-dialog'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import * as Dialog from '@radix-ui/react-dialog'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import BubbleTip from '@/public/icons/polygon.svg'; import dynamic from 'next/dynamic'; -import { css } from '@emotion/react'; + +import BubbleTip from '@/public/icons/polygon.svg'; const DialogPortal = dynamic(() => import('@radix-ui/react-dialog').then(({ Portal }) => Portal), { ssr: false }); diff --git a/apps/playground/src/components/members/upload/FormSection/Basic/index.stories.tsx b/apps/playground/src/components/members/upload/FormSection/Basic/index.stories.tsx index 3be196eff..841324a70 100644 --- a/apps/playground/src/components/members/upload/FormSection/Basic/index.stories.tsx +++ b/apps/playground/src/components/members/upload/FormSection/Basic/index.stories.tsx @@ -1,11 +1,11 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; import { MEMBER_DEFAULT_VALUES } from '@/components/members/upload/constants'; import MemberBasicFormSection from '@/components/members/upload/FormSection/Basic'; import { memberFormSchema } from '@/components/members/upload/schema'; -import { MemberUploadForm } from '@/components/members/upload/types'; +import type { MemberUploadForm } from '@/components/members/upload/types'; type PickBasicForm = Pick< MemberUploadForm, diff --git a/apps/playground/src/components/members/upload/FormSection/Basic/index.tsx b/apps/playground/src/components/members/upload/FormSection/Basic/index.tsx index 6907f37fb..bee5ec3c2 100644 --- a/apps/playground/src/components/members/upload/FormSection/Basic/index.tsx +++ b/apps/playground/src/components/members/upload/FormSection/Basic/index.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Button, TextArea, TextField, useToast } from '@sopt-makers/ui'; import { AnimatePresence, motion } from 'framer-motion'; -import { ChangeEvent, MouseEvent, ReactNode, useState } from 'react'; +import type { ChangeEvent, MouseEvent, ReactNode } from 'react'; +import { useState } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { useCreatePhoneAuth } from '@/api/endpoint/auth/createPhoneAuth'; @@ -19,7 +20,7 @@ import { formatTime } from '@/components/members/upload/format'; import FormHeader from '@/components/members/upload/forms/FormHeader'; import FormItem from '@/components/members/upload/forms/FormItem'; import { MemberFormSection as FormSection } from '@/components/members/upload/forms/FormSection'; -import { MemberUploadForm } from '@/components/members/upload/types'; +import type { MemberUploadForm } from '@/components/members/upload/types'; import IconCamera from '@/public/icons/icon-camera.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export default function MemberBasicFormSection() { @@ -171,7 +172,7 @@ export default function MemberBasicFormSection() { <StyledTextField disabled {...register('name')} - isError={errors.hasOwnProperty('name')} + isError={Object.prototype.hasOwnProperty.call(errors, 'name')} errorMessage={errors.name?.message} placeholder='이름 입력' /> @@ -181,21 +182,21 @@ export default function MemberBasicFormSection() { <StyledTextField {...register('birthday.year')} placeholder='년도' - isError={errors.birthday?.hasOwnProperty('year')} + isError={Object.prototype.hasOwnProperty.call(errors.birthday ?? {}, 'year')} type='number' pattern='\d*' /> <StyledTextField {...register('birthday.month')} placeholder='월' - isError={errors.birthday?.hasOwnProperty('month')} + isError={Object.prototype.hasOwnProperty.call(errors.birthday ?? {}, 'month')} type='number' pattern='\d*' /> <StyledTextField {...register('birthday.day')} placeholder='일' - isError={errors.birthday?.hasOwnProperty('day')} + isError={Object.prototype.hasOwnProperty.call(errors.birthday ?? {}, 'day')} type='number' pattern='\d*' /> @@ -216,11 +217,11 @@ export default function MemberBasicFormSection() { {...register('phone')} placeholder='010XXXXXXXX' maxLength={11} - isError={errors.hasOwnProperty('phone')} + isError={Object.prototype.hasOwnProperty.call(errors, 'phone')} noMargin /> <StyledButton - disabled={!dirtyFields.phone || errors.hasOwnProperty('phone')} + disabled={!dirtyFields.phone || Object.prototype.hasOwnProperty.call(errors, 'phone')} onClick={handleCreatePhoneAuth} > 인증번호 받기 @@ -263,7 +264,7 @@ export default function MemberBasicFormSection() { {...register('email')} type='email' placeholder='이메일 입력' - isError={errors.hasOwnProperty('email')} + isError={Object.prototype.hasOwnProperty.call(errors, 'email')} /> </FormItem> <FormItem diff --git a/apps/playground/src/components/members/upload/FormSection/Career.tsx b/apps/playground/src/components/members/upload/FormSection/Career.tsx index 5ed73dd7d..b67cfb842 100644 --- a/apps/playground/src/components/members/upload/FormSection/Career.tsx +++ b/apps/playground/src/components/members/upload/FormSection/Career.tsx @@ -3,8 +3,9 @@ import { colors } from '@sopt-makers/colors'; import { TextField } from '@sopt-makers/ui'; import { TextArea } from '@sopt-makers/ui'; import dayjs from 'dayjs'; -import { FormEvent, ReactNode } from 'react'; -import { Controller, FieldError, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; +import type { FormEvent, ReactNode } from 'react'; +import type { FieldError } from 'react-hook-form'; +import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import BottomSheetSelect from '@/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect'; import EditableSelect from '@/components/common/EditableSelect'; @@ -20,7 +21,7 @@ import MemberFormItem from '@/components/members/upload/forms/FormItem'; import { MemberFormSection as FormSection } from '@/components/members/upload/forms/FormSection'; import Select from '@/components/members/upload/forms/Select'; import MemberSelectOptions from '@/components/members/upload/forms/SelectOptions'; -import { MemberUploadForm } from '@/components/members/upload/types'; +import type { MemberUploadForm } from '@/components/members/upload/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -68,9 +69,9 @@ export default function CareerFormSection({ header }: CareerFormSectionProps) { | undefined, ) => { if (!careerError) return; - if (careerError.hasOwnProperty('title')) return careerError.title?.message; - if (careerError.hasOwnProperty('companyName')) return careerError.companyName?.message; - if (careerError.hasOwnProperty('startDate')) return careerError.startDate?.message; + if (Object.prototype.hasOwnProperty.call(careerError, 'title')) return careerError.title?.message; + if (Object.prototype.hasOwnProperty.call(careerError, 'companyName')) return careerError.companyName?.message; + if (Object.prototype.hasOwnProperty.call(careerError, 'startDate')) return careerError.startDate?.message; return careerError.endDate?.message; }; @@ -85,7 +86,7 @@ export default function CareerFormSection({ header }: CareerFormSectionProps) { | undefined, ) => { if (!linksError) return; - if (linksError.hasOwnProperty('title')) return linksError.title?.message; + if (Object.prototype.hasOwnProperty.call(linksError, 'title')) return linksError.title?.message; return linksError.url?.message; }; @@ -220,7 +221,7 @@ export default function CareerFormSection({ header }: CareerFormSectionProps) { /> <StyledTextField {...register(`links.${index}.url`)} - isError={errors?.links?.[index]?.hasOwnProperty('url')} + isError={Object.prototype.hasOwnProperty.call(errors?.links?.[index] ?? {}, 'url')} placeholder='https://' className='link' /> diff --git a/apps/playground/src/components/members/upload/FormSection/SoptActivity.tsx b/apps/playground/src/components/members/upload/FormSection/SoptActivity.tsx index eb34a9fa6..23e76b9f3 100644 --- a/apps/playground/src/components/members/upload/FormSection/SoptActivity.tsx +++ b/apps/playground/src/components/members/upload/FormSection/SoptActivity.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { Controller, FieldError, useFieldArray, useFormContext } from 'react-hook-form'; +import type { FieldError } from 'react-hook-form'; +import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import BottomSheetSelect from '@/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect'; import Responsive from '@/components/common/Responsive'; @@ -10,7 +11,7 @@ import { DEFAULT_ACTIVITY, PARTS, TEAMS } from '@/components/members/upload/cons import FormHeader from '@/components/members/upload/forms/FormHeader'; import { MemberFormSection as FormSection } from '@/components/members/upload/forms/FormSection'; import Select from '@/components/members/upload/forms/Select'; -import { MemberUploadForm } from '@/components/members/upload/types'; +import type { MemberUploadForm } from '@/components/members/upload/types'; import { GENERATIONS, LAST_EDITABLE_GENERATION } from '@/constants/generation'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; @@ -47,8 +48,8 @@ export default function MemberSoptActivityFormSection({ | undefined, ) => { if (!activityError) return; - if (activityError.hasOwnProperty('generation')) return activityError.generation?.message; - if (activityError.hasOwnProperty('part')) return activityError.part?.message; + if (Object.prototype.hasOwnProperty.call(activityError, 'generation')) return activityError.generation?.message; + if (Object.prototype.hasOwnProperty.call(activityError, 'part')) return activityError.part?.message; return activityError.team?.message; }; diff --git a/apps/playground/src/components/members/upload/FormSection/Tmi/MbtiSelector.tsx b/apps/playground/src/components/members/upload/FormSection/Tmi/MbtiSelector.tsx index 9b4852588..55a465555 100644 --- a/apps/playground/src/components/members/upload/FormSection/Tmi/MbtiSelector.tsx +++ b/apps/playground/src/components/members/upload/FormSection/Tmi/MbtiSelector.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import MbtiToggle from '@/components/members/upload/FormSection/Tmi/MbtiToggle'; -import { Mbti, MbtiIndicator } from '@/components/members/upload/FormSection/Tmi/types'; +import type { Mbti, MbtiIndicator } from '@/components/members/upload/FormSection/Tmi/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; interface MbtiSelectorProps { diff --git a/apps/playground/src/components/members/upload/FormSection/Tmi/index.stories.tsx b/apps/playground/src/components/members/upload/FormSection/Tmi/index.stories.tsx index 8fd22867d..5be76573f 100644 --- a/apps/playground/src/components/members/upload/FormSection/Tmi/index.stories.tsx +++ b/apps/playground/src/components/members/upload/FormSection/Tmi/index.stories.tsx @@ -1,11 +1,11 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; import * as yup from 'yup'; import { MEMBER_DEFAULT_VALUES } from '@/components/members/upload/constants'; import TmiFormSection from '@/components/members/upload/FormSection/Tmi'; -import { MemberUploadForm } from '@/components/members/upload/types'; +import type { MemberUploadForm } from '@/components/members/upload/types'; const tmiSectionSchema = yup.object().shape({ mbti: yup diff --git a/apps/playground/src/components/members/upload/FormSection/Tmi/index.tsx b/apps/playground/src/components/members/upload/FormSection/Tmi/index.tsx index ff2fd447e..8626b0653 100644 --- a/apps/playground/src/components/members/upload/FormSection/Tmi/index.tsx +++ b/apps/playground/src/components/members/upload/FormSection/Tmi/index.tsx @@ -13,7 +13,7 @@ import { MemberFormSection } from '@/components/members/upload/forms/FormSection import Select from '@/components/members/upload/forms/Select'; import FavorToggle from '@/components/members/upload/FormSection/Tmi/FavorToggle'; import MbtiSelector from '@/components/members/upload/FormSection/Tmi/MbtiSelector'; -import { +import type { CommunicationStyle, FavorAlcohol, FavorFishBread, @@ -27,7 +27,7 @@ import { WorkPlace, WorkTime, } from '@/components/members/upload/FormSection/Tmi/types'; -import { MemberUploadForm } from '@/components/members/upload/types'; +import type { MemberUploadForm } from '@/components/members/upload/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export default function TmiFormSection() { diff --git a/apps/playground/src/components/members/upload/complete/MemberCardOfMe.tsx b/apps/playground/src/components/members/upload/complete/MemberCardOfMe.tsx index a49cae930..0b1a428da 100644 --- a/apps/playground/src/components/members/upload/complete/MemberCardOfMe.tsx +++ b/apps/playground/src/components/members/upload/complete/MemberCardOfMe.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { IconUser } from '@sopt-makers/icons'; -import { FC } from 'react'; +import type { FC } from 'react'; import ResizedImage from '@/components/common/ResizedImage'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/members/upload/constants.ts b/apps/playground/src/components/members/upload/constants.ts index 7ebd25e31..0a1c2077c 100644 --- a/apps/playground/src/components/members/upload/constants.ts +++ b/apps/playground/src/components/members/upload/constants.ts @@ -1,6 +1,6 @@ -import { DefaultValues } from 'react-hook-form'; +import type { DefaultValues } from 'react-hook-form'; -import { MemberUploadForm } from '@/components/members/upload/types'; +import type { MemberUploadForm } from '@/components/members/upload/types'; export const UNSELECTED = '선택 안 함'; diff --git a/apps/playground/src/components/members/upload/format.ts b/apps/playground/src/components/members/upload/format.ts index e28bc029c..d37470910 100644 --- a/apps/playground/src/components/members/upload/format.ts +++ b/apps/playground/src/components/members/upload/format.ts @@ -1,8 +1,8 @@ import dayjs from 'dayjs'; -import { SOJU_CAPACITY_RANGE } from '@/components/members/upload/constants'; +import type { SOJU_CAPACITY_RANGE } from '@/components/members/upload/constants'; import { isMbti } from '@/components/members/upload/FormSection/Tmi/types'; -import { Birthday } from '@/components/members/upload/types'; +import type { Birthday } from '@/components/members/upload/types'; export const formatBirthday = (birthday: Birthday) => { const { year, month, day } = birthday; diff --git a/apps/playground/src/components/members/upload/forms/CountableInput.tsx b/apps/playground/src/components/members/upload/forms/CountableInput.tsx index 8fc5ae251..a1eae9f40 100644 --- a/apps/playground/src/components/members/upload/forms/CountableInput.tsx +++ b/apps/playground/src/components/members/upload/forms/CountableInput.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent, forwardRef } from 'react'; +import type { ChangeEvent } from 'react'; +import { forwardRef } from 'react'; import Text from '@/components/common/Text'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/members/upload/forms/CountableTextArea.tsx b/apps/playground/src/components/members/upload/forms/CountableTextArea.tsx index 1015d5199..0210741d3 100644 --- a/apps/playground/src/components/members/upload/forms/CountableTextArea.tsx +++ b/apps/playground/src/components/members/upload/forms/CountableTextArea.tsx @@ -1,7 +1,9 @@ -import { css, SerializedStyles } from '@emotion/react'; +import type { SerializedStyles } from '@emotion/react'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent, forwardRef } from 'react'; +import type { ChangeEvent } from 'react'; +import { forwardRef } from 'react'; import Text from '@/components/common/Text'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/upload/forms/Form.tsx b/apps/playground/src/components/members/upload/forms/Form.tsx index 6e1e06cfa..904b9468a 100644 --- a/apps/playground/src/components/members/upload/forms/Form.tsx +++ b/apps/playground/src/components/members/upload/forms/Form.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/members/upload/forms/FormItem.tsx b/apps/playground/src/components/members/upload/forms/FormItem.tsx index 99f9b20eb..0fa66f794 100644 --- a/apps/playground/src/components/members/upload/forms/FormItem.tsx +++ b/apps/playground/src/components/members/upload/forms/FormItem.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import WarningIcon from 'public/icons/icon-warning.svg'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import Text from '@/components/common/Text'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/members/upload/forms/Select.tsx b/apps/playground/src/components/members/upload/forms/Select.tsx index f58c69646..18342cf4f 100644 --- a/apps/playground/src/components/members/upload/forms/Select.tsx +++ b/apps/playground/src/components/members/upload/forms/Select.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { SelectV2 } from '@sopt-makers/ui'; -import { PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; export type Option<T = string> = { value: T; diff --git a/apps/playground/src/components/members/upload/schema.ts b/apps/playground/src/components/members/upload/schema.ts index f3318eb2c..327ca2b7d 100644 --- a/apps/playground/src/components/members/upload/schema.ts +++ b/apps/playground/src/components/members/upload/schema.ts @@ -3,7 +3,7 @@ import * as yup from 'yup'; import { PHONE_REGEX_SHORT } from '@/components/auth/register/verify/regex'; const PHONE_REG_EXP = /^01([0|1|5|6|7|8|9])-([0-9]{3,4})-([0-9]{4})$/; -const EMAIL_REG_EXP = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; +const EMAIL_REG_EXP = /^[a-zA-Z0-9+\-_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; const YEAR_REG_EXP = /^\d{4}$/; const MONTH_REG_EXP = /^0?[1-9]{1}$|^1{1}[0-2]{1}$/; const DAY_REG_EXP = /^0?[1-9]{1}$|^[1-2]{1}[0-9]{1}$|^3{1}[0-1]{1}$/; diff --git a/apps/playground/src/components/members/upload/types.ts b/apps/playground/src/components/members/upload/types.ts index b9c38363a..d82445096 100644 --- a/apps/playground/src/components/members/upload/types.ts +++ b/apps/playground/src/components/members/upload/types.ts @@ -1,5 +1,5 @@ -import { SOJU_CAPACITY_RANGE } from '@/components/members/upload/constants'; -import { +import type { SOJU_CAPACITY_RANGE } from '@/components/members/upload/constants'; +import type { CommunicationStyle, FavorPeach, FavorTteokbokki, @@ -10,7 +10,7 @@ import { WorkTime, } from '@/components/members/upload/FormSection/Tmi/types'; -import { FavorAlcohol, FavorFishBread, FavorMintChocolate, FavorSweetAndSourPork } from './FormSection/Tmi/types'; +import type { FavorAlcohol, FavorFishBread, FavorMintChocolate, FavorSweetAndSourPork } from './FormSection/Tmi/types'; export interface MemberUploadForm { profileImage: string; diff --git a/apps/playground/src/components/mentoring/MentoringCard/index.stories.tsx b/apps/playground/src/components/mentoring/MentoringCard/index.stories.tsx index efeb772e1..2e112dc23 100644 --- a/apps/playground/src/components/mentoring/MentoringCard/index.stories.tsx +++ b/apps/playground/src/components/mentoring/MentoringCard/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MentoringCard from '@/components/mentoring/MentoringCard'; diff --git a/apps/playground/src/components/mentoring/MentoringDetail/InfoItem.tsx b/apps/playground/src/components/mentoring/MentoringDetail/InfoItem.tsx index bf0bf6d53..add074524 100644 --- a/apps/playground/src/components/mentoring/MentoringDetail/InfoItem.tsx +++ b/apps/playground/src/components/mentoring/MentoringDetail/InfoItem.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/mentoring/MentoringDetail/index.stories.tsx b/apps/playground/src/components/mentoring/MentoringDetail/index.stories.tsx index b3c922326..7bd44b15c 100644 --- a/apps/playground/src/components/mentoring/MentoringDetail/index.stories.tsx +++ b/apps/playground/src/components/mentoring/MentoringDetail/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MentoringDetail from '@/components/mentoring/MentoringDetail'; diff --git a/apps/playground/src/components/mentoring/MentoringList/index.tsx b/apps/playground/src/components/mentoring/MentoringList/index.tsx index ee5e2f3c2..9f322d38c 100644 --- a/apps/playground/src/components/mentoring/MentoringList/index.tsx +++ b/apps/playground/src/components/mentoring/MentoringList/index.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import { useQuery } from '@tanstack/react-query'; import Link from 'next/link'; import ArrowDiagonalIcon from 'public/icons/icon-diagonal-arrow.svg'; -import { ReactNode, startTransition, useEffect, useState } from 'react'; +import type { ReactNode } from 'react'; +import { startTransition, useEffect, useState } from 'react'; import { getMemberProfileById } from '@/api/endpoint_LEGACY/members'; import Carousel from '@/components/common/Carousel'; diff --git a/apps/playground/src/components/mentoring/data/development.ts b/apps/playground/src/components/mentoring/data/development.ts index 8b790b774..34c521a49 100644 --- a/apps/playground/src/components/mentoring/data/development.ts +++ b/apps/playground/src/components/mentoring/data/development.ts @@ -1,4 +1,4 @@ -import { Mentoring, MentoringData } from '@/components/mentoring/data/types'; +import type { Mentoring, MentoringData } from '@/components/mentoring/data/types'; const MENTOR_LIST = [ { id: 1, name: '송정우' }, diff --git a/apps/playground/src/components/mentoring/data/production.ts b/apps/playground/src/components/mentoring/data/production.ts index 2f1dc638f..c36d3dd1a 100644 --- a/apps/playground/src/components/mentoring/data/production.ts +++ b/apps/playground/src/components/mentoring/data/production.ts @@ -1,4 +1,4 @@ -import { Mentoring, MentoringData } from '@/components/mentoring/data/types'; +import type { Mentoring, MentoringData } from '@/components/mentoring/data/types'; const MENTOR_LIST = [ { id: 3, name: '이준호' }, diff --git a/apps/playground/src/components/mySoptReport/MiniReportCard/index.tsx b/apps/playground/src/components/mySoptReport/MiniReportCard/index.tsx index 0d9301f83..88d610cf5 100644 --- a/apps/playground/src/components/mySoptReport/MiniReportCard/index.tsx +++ b/apps/playground/src/components/mySoptReport/MiniReportCard/index.tsx @@ -1,8 +1,10 @@ -import { CardConfig, getCardConfig, Value, WordChainGameStats } from '@/components/mySoptReport/constants'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; +import type { CardConfig, Value, WordChainGameStats } from '@/components/mySoptReport/constants'; +import { getCardConfig } from '@/components/mySoptReport/constants'; + interface MiniReportCardProps { type: string; value: Value; diff --git a/apps/playground/src/components/mySoptReport/MyPG/index.tsx b/apps/playground/src/components/mySoptReport/MyPG/index.tsx index 701926105..15e248f7d 100644 --- a/apps/playground/src/components/mySoptReport/MyPG/index.tsx +++ b/apps/playground/src/components/mySoptReport/MyPG/index.tsx @@ -1,7 +1,8 @@ +import styled from '@emotion/styled'; + import ReportTitle from '@/components/mySoptReport/common/ReportTitle'; -import { CommunityStats, CrewStats, ProfileStats, WordChainGameStats } from '@/components/mySoptReport/constants'; +import type { CommunityStats, CrewStats, ProfileStats, WordChainGameStats } from '@/components/mySoptReport/constants'; import MyReport from '@/components/mySoptReport/MyReport'; -import styled from '@emotion/styled'; export interface MyPgData { myType: string; diff --git a/apps/playground/src/components/mySoptReport/MyReport/index.tsx b/apps/playground/src/components/mySoptReport/MyReport/index.tsx index 625b06d30..05823ba10 100644 --- a/apps/playground/src/components/mySoptReport/MyReport/index.tsx +++ b/apps/playground/src/components/mySoptReport/MyReport/index.tsx @@ -3,30 +3,27 @@ import 'swiper/css/effect-cards'; import 'swiper/css/navigation'; import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; +import { fonts } from '@sopt-makers/fonts'; +import { Button, useToast } from '@sopt-makers/ui'; import { useEffect, useState } from 'react'; import { EffectCards } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; -import ReportCard from '@/components/mySoptReport/ReportCard'; -import { MB_BIG_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; - -import { Button, useToast } from '@sopt-makers/ui'; - +import type { Value } from '@/components/mySoptReport/constants'; +import { indicatorIcons } from '@/components/mySoptReport/constants'; import MiniReportCard from '@/components/mySoptReport/MiniReportCard'; -import { MyPgData } from '@/components/mySoptReport/MyPG'; - +import type { MyPgData } from '@/components/mySoptReport/MyPG'; +import Popup from '@/components/mySoptReport/PopUp'; +import ReportCard from '@/components/mySoptReport/ReportCard'; +import useImageDownload from '@/components/resolution/read/hooks/useImageDownload'; +import { PLAYGROUND_ORIGIN } from '@/constants/links'; import particle_mo from '@/public/icons/img/mySoptReport/particle_mo.png'; import particle_pc from '@/public/icons/img/mySoptReport/particle_pc.png'; import particle_ta from '@/public/icons/img/mySoptReport/particle_ta.png'; import personOff from '@/public/icons/img/mySoptReport/person_off.png'; import personOn from '@/public/icons/img/mySoptReport/person_on.png'; - -import { indicatorIcons, Value } from '@/components/mySoptReport/constants'; -import Popup from '@/components/mySoptReport/PopUp'; -import useImageDownload from '@/components/resolution/read/hooks/useImageDownload'; -import { PLAYGROUND_ORIGIN } from '@/constants/links'; -import { fonts } from '@sopt-makers/fonts'; -import { playgroundLink } from '@sopt/ui'; +import { MB_BIG_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; interface MyReportProps { myPgData: MyPgData; @@ -37,7 +34,7 @@ interface Card { value: Value; } -const index = ({ myPgData }: MyReportProps) => { +const MyReport = ({ myPgData }: MyReportProps) => { const { open } = useToast(); const [activeIndex, setActiveIndex] = useState(0); const [cardsArray, setCardsArray] = useState<Card[]>([]); @@ -131,7 +128,9 @@ const index = ({ myPgData }: MyReportProps) => { key={index} isActive={index === activeIndex} onClick={() => { - const swiperElement = document.querySelector('.swiper') as HTMLElement & { swiper: any }; + const swiperElement = document.querySelector('.swiper') as HTMLElement & { + swiper?: { slideToLoop: (index: number) => void }; + }; if (swiperElement?.swiper) { swiperElement.swiper.slideToLoop(index); } @@ -178,7 +177,7 @@ const index = ({ myPgData }: MyReportProps) => { ); }; -export default index; +export default MyReport; const Container = styled.div` display: flex; diff --git a/apps/playground/src/components/mySoptReport/Playground/CoffeeSopt/index.tsx b/apps/playground/src/components/mySoptReport/Playground/CoffeeSopt/index.tsx index b8ad58e9c..0bb30ec89 100644 --- a/apps/playground/src/components/mySoptReport/Playground/CoffeeSopt/index.tsx +++ b/apps/playground/src/components/mySoptReport/Playground/CoffeeSopt/index.tsx @@ -1,18 +1,18 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconChevronRight } from '@sopt-makers/icons'; import { Button } from '@sopt-makers/ui'; import router from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import Responsive from '@/components/common/Responsive'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; import LabelButton from '@/components/mySoptReport/common/LabelButton'; import ReportCard from '@/components/mySoptReport/common/ReportCard'; import ReportText from '@/components/mySoptReport/common/ReportTitle/ReportText'; -import { PlaygroundReportDataType } from '@/components/mySoptReport/types'; +import type { PlaygroundReportDataType } from '@/components/mySoptReport/types'; import CoffeSoptIcon from '@/public/logos/img_coffeechat.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/Playground/Community/index.tsx b/apps/playground/src/components/mySoptReport/Playground/Community/index.tsx index 2f4692bec..5f2cd385c 100644 --- a/apps/playground/src/components/mySoptReport/Playground/Community/index.tsx +++ b/apps/playground/src/components/mySoptReport/Playground/Community/index.tsx @@ -1,15 +1,15 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import router from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import Responsive from '@/components/common/Responsive'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; import LabelButton from '@/components/mySoptReport/common/LabelButton'; import ReportCard from '@/components/mySoptReport/common/ReportCard'; import ReportText from '@/components/mySoptReport/common/ReportTitle/ReportText'; -import { PlaygroundReportDataType } from '@/components/mySoptReport/types'; +import type { PlaygroundReportDataType } from '@/components/mySoptReport/types'; import CommunityIcon from '@/public/logos/img_community.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/Playground/MBTI/index.tsx b/apps/playground/src/components/mySoptReport/Playground/MBTI/index.tsx index 0e836957d..521786ba5 100644 --- a/apps/playground/src/components/mySoptReport/Playground/MBTI/index.tsx +++ b/apps/playground/src/components/mySoptReport/Playground/MBTI/index.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { UserMbtiRankType } from '@/components/mySoptReport/types'; +import type { UserMbtiRankType } from '@/components/mySoptReport/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export default function MBTI({ UserMbtiRankTable }: { UserMbtiRankTable: UserMbtiRankType[] }) { diff --git a/apps/playground/src/components/mySoptReport/Playground/MeetingStudy/index.tsx b/apps/playground/src/components/mySoptReport/Playground/MeetingStudy/index.tsx index 63ea290bf..77a4d81dd 100644 --- a/apps/playground/src/components/mySoptReport/Playground/MeetingStudy/index.tsx +++ b/apps/playground/src/components/mySoptReport/Playground/MeetingStudy/index.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconChevronRight } from '@sopt-makers/icons'; import { Button } from '@sopt-makers/ui'; import router from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import Responsive from '@/components/common/Responsive'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; @@ -12,7 +12,7 @@ import LabelButton from '@/components/mySoptReport/common/LabelButton'; import ReportCard from '@/components/mySoptReport/common/ReportCard'; import ReportText from '@/components/mySoptReport/common/ReportTitle/ReportText'; import Tooltip from '@/components/mySoptReport/common/Tooltip'; -import { PlaygroundReportDataType } from '@/components/mySoptReport/types'; +import type { PlaygroundReportDataType } from '@/components/mySoptReport/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export default function MeetingStudy({ reportData }: { reportData: PlaygroundReportDataType }) { diff --git a/apps/playground/src/components/mySoptReport/Playground/index.tsx b/apps/playground/src/components/mySoptReport/Playground/index.tsx index 5fc946e3c..5b9d331fd 100644 --- a/apps/playground/src/components/mySoptReport/Playground/index.tsx +++ b/apps/playground/src/components/mySoptReport/Playground/index.tsx @@ -7,7 +7,7 @@ import CoffeeSopt from '@/components/mySoptReport/Playground/CoffeeSopt'; import Community from '@/components/mySoptReport/Playground/Community'; import MBTI from '@/components/mySoptReport/Playground/MBTI'; import MeetingStudy from '@/components/mySoptReport/Playground/MeetingStudy'; -import { PlaygroundReportDataType } from '@/components/mySoptReport/types'; +import type { PlaygroundReportDataType } from '@/components/mySoptReport/types'; import CalendarIcon from '@/public/logos/img_calendar.svg'; import ConfettiIcon from '@/public/logos/img_confetti.svg'; diff --git a/apps/playground/src/components/mySoptReport/PopUp/index.tsx b/apps/playground/src/components/mySoptReport/PopUp/index.tsx index b5ab3d7d5..8f3c32920 100644 --- a/apps/playground/src/components/mySoptReport/PopUp/index.tsx +++ b/apps/playground/src/components/mySoptReport/PopUp/index.tsx @@ -1,9 +1,10 @@ -import Responsive from '@/components/common/Responsive'; -import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import styled from '@emotion/styled'; import { Button } from '@sopt-makers/ui'; import React from 'react'; +import Responsive from '@/components/common/Responsive'; +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; + interface PopupProps { isOpen: boolean; onClose: () => void; diff --git a/apps/playground/src/components/mySoptReport/ReportCard/CardHeader/index.tsx b/apps/playground/src/components/mySoptReport/ReportCard/CardHeader/index.tsx index 99b97f5b3..3366bafc9 100644 --- a/apps/playground/src/components/mySoptReport/ReportCard/CardHeader/index.tsx +++ b/apps/playground/src/components/mySoptReport/ReportCard/CardHeader/index.tsx @@ -2,9 +2,9 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { useToast } from '@sopt-makers/ui'; -import { StaticImageData } from 'next/image'; +import type { StaticImageData } from 'next/image'; -import { getCardConfig } from '@/components/mySoptReport/constants'; +import { getCardConfig, type Value } from '@/components/mySoptReport/constants'; import useImageDownload from '@/components/resolution/read/hooks/useImageDownload'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; @@ -12,11 +12,11 @@ interface CardHeaderProps { title?: string; image?: StaticImageData; type?: string; - value?: any; + value?: Value; } const CardHeader = ({ title = 'SOPT Playground', image, type, value }: CardHeaderProps) => { - const cardConfig = (type && getCardConfig(type, value)) || null; + const cardConfig = (type && value !== undefined && getCardConfig(type, value)) || null; const { open } = useToast(); const { ref: imageRef, onClick: onDownloadButtonClick } = useImageDownload(`마이 플그 데이터 ${cardConfig?.index}`); diff --git a/apps/playground/src/components/mySoptReport/ReportCard/MyDataCard/index.tsx b/apps/playground/src/components/mySoptReport/ReportCard/MyDataCard/index.tsx index 0c1d6aa31..2e7fe03ba 100644 --- a/apps/playground/src/components/mySoptReport/ReportCard/MyDataCard/index.tsx +++ b/apps/playground/src/components/mySoptReport/ReportCard/MyDataCard/index.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { getCardConfig, Value } from '@/components/mySoptReport/constants'; +import type { Value } from '@/components/mySoptReport/constants'; +import { getCardConfig } from '@/components/mySoptReport/constants'; import CardHeader from '@/components/mySoptReport/ReportCard/CardHeader'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/ReportCard/MyTypeCard/index.tsx b/apps/playground/src/components/mySoptReport/ReportCard/MyTypeCard/index.tsx index f8a5be416..4134e0d46 100644 --- a/apps/playground/src/components/mySoptReport/ReportCard/MyTypeCard/index.tsx +++ b/apps/playground/src/components/mySoptReport/ReportCard/MyTypeCard/index.tsx @@ -17,7 +17,6 @@ import imgMember from '@/public/icons/img/mySoptReport/img_member@3x.png'; import imgNew from '@/public/icons/img/mySoptReport/img_new@3x.png'; import imgProject from '@/public/icons/img/mySoptReport/img_project@3x.png'; import imgWordchain from '@/public/icons/img/mySoptReport/img_wordchain@3x.png'; - import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; const cardData = { diff --git a/apps/playground/src/components/mySoptReport/ReportCard/index.tsx b/apps/playground/src/components/mySoptReport/ReportCard/index.tsx index 91270269a..4a674f550 100644 --- a/apps/playground/src/components/mySoptReport/ReportCard/index.tsx +++ b/apps/playground/src/components/mySoptReport/ReportCard/index.tsx @@ -1,21 +1,33 @@ import styled from '@emotion/styled'; +import type { Value } from '@/components/mySoptReport/constants'; import MyDataCard from '@/components/mySoptReport/ReportCard/MyDataCard'; import MyTypeCard from '@/components/mySoptReport/ReportCard/MyTypeCard'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; interface ReportCardProps { type: string; - value: any; + value: Value; } -const index = ({ type, value }: ReportCardProps) => { +type MyType = + | '새로 오솝군요!' + | '솝플루언서' + | '인간 솝크드인' + | '서비스 익솝플로러' + | '우리말 솝고수' + | '얼죽솝' + | '솝만추'; + +const ReportCardIndex = ({ type, value }: ReportCardProps) => { return ( - <Wrapper>{type === 'myType' ? <MyTypeCard myType={value} /> : <MyDataCard type={type} value={value} />}</Wrapper> + <Wrapper> + {type === 'myType' ? <MyTypeCard myType={value as MyType} /> : <MyDataCard type={type} value={value} />} + </Wrapper> ); }; -export default index; +export default ReportCardIndex; const Wrapper = styled.div` display: flex; diff --git a/apps/playground/src/components/mySoptReport/ReportNav/index.stories.tsx b/apps/playground/src/components/mySoptReport/ReportNav/index.stories.tsx index 8ce02ad5a..734d09756 100644 --- a/apps/playground/src/components/mySoptReport/ReportNav/index.stories.tsx +++ b/apps/playground/src/components/mySoptReport/ReportNav/index.stories.tsx @@ -1,5 +1,6 @@ +import type { Meta } from '@storybook/react'; + import ReportNav from '@/components/mySoptReport/ReportNav'; -import { Meta } from '@storybook/react'; export default { component: ReportNav, diff --git a/apps/playground/src/components/mySoptReport/ReportNav/index.tsx b/apps/playground/src/components/mySoptReport/ReportNav/index.tsx index 3129ef65d..921f734fb 100644 --- a/apps/playground/src/components/mySoptReport/ReportNav/index.tsx +++ b/apps/playground/src/components/mySoptReport/ReportNav/index.tsx @@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; import { menuList } from '@/components/mySoptReport/constants'; -import { ActiveTabType } from '@/components/mySoptReport/types'; +import type { ActiveTabType } from '@/components/mySoptReport/types'; import useMediaQuery from '@/hooks/useMediaQuery'; import { MOBILE_MAX_WIDTH, MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/Sopt/PopularMeetingSpotRank/index.tsx b/apps/playground/src/components/mySoptReport/Sopt/PopularMeetingSpotRank/index.tsx index 11e928531..113bb3964 100644 --- a/apps/playground/src/components/mySoptReport/Sopt/PopularMeetingSpotRank/index.tsx +++ b/apps/playground/src/components/mySoptReport/Sopt/PopularMeetingSpotRank/index.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { PopularMeetingSpotRankType } from '@/components/mySoptReport/types'; +import type { PopularMeetingSpotRankType } from '@/components/mySoptReport/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export default function PopularMeetingSpotRank({ diff --git a/apps/playground/src/components/mySoptReport/Sopt/ServiceCategoryRankBox/index.tsx b/apps/playground/src/components/mySoptReport/Sopt/ServiceCategoryRankBox/index.tsx index a568c40d9..ba811c880 100644 --- a/apps/playground/src/components/mySoptReport/Sopt/ServiceCategoryRankBox/index.tsx +++ b/apps/playground/src/components/mySoptReport/Sopt/ServiceCategoryRankBox/index.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ServiceCategoryRankType } from '@/components/mySoptReport/types'; +import type { ServiceCategoryRankType } from '@/components/mySoptReport/types'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export default function ServiceCategoryRankBox({ diff --git a/apps/playground/src/components/mySoptReport/Sopt/index.tsx b/apps/playground/src/components/mySoptReport/Sopt/index.tsx index 541fc55ac..e0b0f0d92 100644 --- a/apps/playground/src/components/mySoptReport/Sopt/index.tsx +++ b/apps/playground/src/components/mySoptReport/Sopt/index.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { IconChevronRight } from '@sopt-makers/icons'; import { Button, Tag } from '@sopt-makers/ui'; import router from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { useGetMemberProperty } from '@/api/endpoint/members/getMemberProperty'; @@ -16,7 +16,7 @@ import ReportTitle from '@/components/mySoptReport/common/ReportTitle'; import ReportText from '@/components/mySoptReport/common/ReportTitle/ReportText'; import PopularMeetingSpotRank from '@/components/mySoptReport/Sopt/PopularMeetingSpotRank'; import ServiceCategoryRankBox from '@/components/mySoptReport/Sopt/ServiceCategoryRankBox'; -import { SoptReportDataType } from '@/components/mySoptReport/types'; +import type { SoptReportDataType } from '@/components/mySoptReport/types'; import NewMemberIcon from '@/public/logos/img_member.svg'; import ServiceIcon from '@/public/logos/img_service.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/common/LabelButton/index.tsx b/apps/playground/src/components/mySoptReport/common/LabelButton/index.tsx index 44a090d3e..eeb5e0827 100644 --- a/apps/playground/src/components/mySoptReport/common/LabelButton/index.tsx +++ b/apps/playground/src/components/mySoptReport/common/LabelButton/index.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/common/ReportCard/index.tsx b/apps/playground/src/components/mySoptReport/common/ReportCard/index.tsx index df7adf71c..e28b05d6a 100644 --- a/apps/playground/src/components/mySoptReport/common/ReportCard/index.tsx +++ b/apps/playground/src/components/mySoptReport/common/ReportCard/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; interface ReportCardProp { children: ReactNode; diff --git a/apps/playground/src/components/mySoptReport/common/ReportTitle/ReportText.tsx b/apps/playground/src/components/mySoptReport/common/ReportTitle/ReportText.tsx index 2c58c0dd5..fd34afbf6 100644 --- a/apps/playground/src/components/mySoptReport/common/ReportTitle/ReportText.tsx +++ b/apps/playground/src/components/mySoptReport/common/ReportTitle/ReportText.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/common/ReportTitle/index.stories.tsx b/apps/playground/src/components/mySoptReport/common/ReportTitle/index.stories.tsx index 6c995521a..23a243fd7 100644 --- a/apps/playground/src/components/mySoptReport/common/ReportTitle/index.stories.tsx +++ b/apps/playground/src/components/mySoptReport/common/ReportTitle/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ReportTitle from '.'; diff --git a/apps/playground/src/components/mySoptReport/common/ReportTitle/index.tsx b/apps/playground/src/components/mySoptReport/common/ReportTitle/index.tsx index 4ba747f4a..501d069b8 100644 --- a/apps/playground/src/components/mySoptReport/common/ReportTitle/index.tsx +++ b/apps/playground/src/components/mySoptReport/common/ReportTitle/index.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/mySoptReport/common/Tooltip/index.tsx b/apps/playground/src/components/mySoptReport/common/Tooltip/index.tsx index c07e18152..1b2243e51 100644 --- a/apps/playground/src/components/mySoptReport/common/Tooltip/index.tsx +++ b/apps/playground/src/components/mySoptReport/common/Tooltip/index.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; export default function Tooltip({ children }: { children: ReactNode }) { return ( diff --git a/apps/playground/src/components/mySoptReport/constants.ts b/apps/playground/src/components/mySoptReport/constants.ts index 7f6065f01..839fe6b03 100644 --- a/apps/playground/src/components/mySoptReport/constants.ts +++ b/apps/playground/src/components/mySoptReport/constants.ts @@ -1,5 +1,5 @@ import { colors } from '@sopt-makers/colors'; -import { StaticImageData } from 'next/image'; +import type { StaticImageData } from 'next/image'; import gameOff from '@/public/icons/img/mySoptReport/game_off.png'; import gameOn from '@/public/icons/img/mySoptReport/game_on.png'; @@ -71,6 +71,7 @@ interface WordLists { wordList: string[]; } +// eslint-disable-next-line @typescript-eslint/no-explicit-any -- flexible object for card config export type Value = string | CommunityStats | ProfileStats | CrewStats | WordChainGameStats | { [key: string]: any }; export const getCardConfig = (type: string, value: Value): CardConfig => { diff --git a/apps/playground/src/components/mySoptReport/index.tsx b/apps/playground/src/components/mySoptReport/index.tsx index fb020e46a..a8ac7c4e8 100644 --- a/apps/playground/src/components/mySoptReport/index.tsx +++ b/apps/playground/src/components/mySoptReport/index.tsx @@ -1,9 +1,9 @@ -import { useGetPGData } from '@/api/endpoint/mySoptReport/getMyPGData'; import styled from '@emotion/styled'; import { fonts } from '@sopt-makers/fonts'; import { Button } from '@sopt-makers/ui'; import { useEffect, useState } from 'react'; +import { useGetPGData } from '@/api/endpoint/mySoptReport/getMyPGData'; import { useGetReportData } from '@/api/endpoint/mySoptReport/getReportData'; import Loading from '@/components/common/Loading'; import Responsive from '@/components/common/Responsive'; @@ -12,7 +12,7 @@ import MyPG from '@/components/mySoptReport/MyPG'; import Playground from '@/components/mySoptReport/Playground'; import ReportNav from '@/components/mySoptReport/ReportNav'; import Sopt from '@/components/mySoptReport/Sopt'; -import { ActiveTabType } from '@/components/mySoptReport/types'; +import type { ActiveTabType } from '@/components/mySoptReport/types'; import useMediaQuery from '@/hooks/useMediaQuery'; import MySoptReportImg from '@/public/logos/my-sopt-report.svg'; import MySoptReportImgPC from '@/public/logos/mysoptreport-pc.svg'; diff --git a/apps/playground/src/components/navigation/NavigationProvider.tsx b/apps/playground/src/components/navigation/NavigationProvider.tsx index 895f8fe42..6cfc73e68 100644 --- a/apps/playground/src/components/navigation/NavigationProvider.tsx +++ b/apps/playground/src/components/navigation/NavigationProvider.tsx @@ -1,5 +1,6 @@ import { useRouter } from 'next/router'; -import { FC, ReactNode, useEffect, useRef } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useEffect, useRef } from 'react'; import { NavigationContext } from '@/components/navigation/navigationContext'; diff --git a/apps/playground/src/components/projects/constants.ts b/apps/playground/src/components/projects/constants.ts index 799991190..cbc61141b 100644 --- a/apps/playground/src/components/projects/constants.ts +++ b/apps/playground/src/components/projects/constants.ts @@ -1,5 +1,5 @@ -import { Member } from '@/api/endpoint_LEGACY/members/type'; -import { Category, LinkTitle } from '@/components/projects/types'; +import type { Member } from '@/api/endpoint_LEGACY/members/type'; +import type { Category, LinkTitle } from '@/components/projects/types'; export type MemberFormType = { memberId: number; diff --git a/apps/playground/src/components/projects/edit/ProjectEdit.tsx b/apps/playground/src/components/projects/edit/ProjectEdit.tsx index 437967065..578f38589 100644 --- a/apps/playground/src/components/projects/edit/ProjectEdit.tsx +++ b/apps/playground/src/components/projects/edit/ProjectEdit.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { FC, useEffect } from 'react'; +import type { FC } from 'react'; +import { useEffect } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { getProjectById, putProject } from '@/api/endpoint_LEGACY/projects'; @@ -11,7 +12,7 @@ import useConfirm from '@/components/common/Modal/useConfirm'; import useToast from '@/components/common/Toast/useToast'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import ProjectForm from '@/components/projects/upload/form/ProjectForm'; -import { ProjectFormType } from '@/components/projects/upload/form/schema'; +import type { ProjectFormType } from '@/components/projects/upload/form/schema'; import { getProjectListQueryKey } from '@/components/projects/upload/hooks/useGetProjectListQuery'; import { getProjectQueryKey } from '@/components/projects/upload/hooks/useGetProjectQuery'; import { convertProjectToFormType, convertToProjectData } from '@/components/projects/utils'; diff --git a/apps/playground/src/components/projects/main/ProjectCategorySelect.stories.tsx b/apps/playground/src/components/projects/main/ProjectCategorySelect.stories.tsx index 35cb4248a..42b3d20e6 100644 --- a/apps/playground/src/components/projects/main/ProjectCategorySelect.stories.tsx +++ b/apps/playground/src/components/projects/main/ProjectCategorySelect.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import ProjectCategorySelect from './ProjectCategorySelect'; diff --git a/apps/playground/src/components/projects/main/ProjectCategorySelect.tsx b/apps/playground/src/components/projects/main/ProjectCategorySelect.tsx index 909d78e7c..2a5e973a8 100644 --- a/apps/playground/src/components/projects/main/ProjectCategorySelect.tsx +++ b/apps/playground/src/components/projects/main/ProjectCategorySelect.tsx @@ -4,7 +4,8 @@ import * as Select from '@radix-ui/react-select'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import dynamic from 'next/dynamic'; -import { PropsWithChildren, ReactNode, useEffect, useState } from 'react'; +import type { PropsWithChildren, ReactNode } from 'react'; +import { useEffect, useState } from 'react'; import { SelectContext, useSelectContext } from '@/components/members/common/select/context'; import { Overlay } from '@/components/members/common/select/Overlay'; diff --git a/apps/playground/src/components/projects/main/ProjectDetail.tsx b/apps/playground/src/components/projects/main/ProjectDetail.tsx index 630914da9..be3b2c833 100644 --- a/apps/playground/src/components/projects/main/ProjectDetail.tsx +++ b/apps/playground/src/components/projects/main/ProjectDetail.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import dayjs from 'dayjs'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { FC, useMemo } from 'react'; +import type { FC } from 'react'; +import { useMemo } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { deleteProject } from '@/api/endpoint_LEGACY/projects'; diff --git a/apps/playground/src/components/projects/main/ProjectFilterChip.stories.tsx b/apps/playground/src/components/projects/main/ProjectFilterChip.stories.tsx index 1fafeec66..64eba3791 100644 --- a/apps/playground/src/components/projects/main/ProjectFilterChip.stories.tsx +++ b/apps/playground/src/components/projects/main/ProjectFilterChip.stories.tsx @@ -1,4 +1,5 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta } from '@storybook/react'; +import { StoryObj } from '@storybook/react'; import { useState } from 'react'; import ProjectFilterChip from './ProjectFilterChip'; @@ -8,7 +9,7 @@ const meta = { } satisfies Meta<typeof ProjectFilterChip>; export default meta; -export const 기본 = () => { +export const Default = () => { const [checked, onChange] = useState<boolean>(false); return ( <ProjectFilterChip checked={checked} onCheckedChange={onChange}> @@ -16,3 +17,4 @@ export const 기본 = () => { </ProjectFilterChip> ); }; +Default.storyName = '기본'; diff --git a/apps/playground/src/components/projects/main/ProjectFilterChip.tsx b/apps/playground/src/components/projects/main/ProjectFilterChip.tsx index 3ef2c4a6c..43fa23aba 100644 --- a/apps/playground/src/components/projects/main/ProjectFilterChip.tsx +++ b/apps/playground/src/components/projects/main/ProjectFilterChip.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; interface ProjectFilterChipProps { checked: boolean; diff --git a/apps/playground/src/components/projects/main/ProjectImageSlider.stories.tsx b/apps/playground/src/components/projects/main/ProjectImageSlider.stories.tsx index 0eec17260..38393402c 100644 --- a/apps/playground/src/components/projects/main/ProjectImageSlider.stories.tsx +++ b/apps/playground/src/components/projects/main/ProjectImageSlider.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import ProjectImageSlider from './ProjectImageSlider'; diff --git a/apps/playground/src/components/projects/main/ProjectImageSlider.tsx b/apps/playground/src/components/projects/main/ProjectImageSlider.tsx index 840646eaf..7889aaf7b 100644 --- a/apps/playground/src/components/projects/main/ProjectImageSlider.tsx +++ b/apps/playground/src/components/projects/main/ProjectImageSlider.tsx @@ -4,9 +4,11 @@ import 'swiper/css/thumbs'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, useRef, useState } from 'react'; +import type { FC } from 'react'; +import { useRef, useState } from 'react'; import { Navigation, Thumbs } from 'swiper'; -import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react'; +import type { SwiperClass } from 'swiper/react'; +import { Swiper, SwiperSlide } from 'swiper/react'; import Responsive from '@/components/common/Responsive'; import useMediaQuery from '@/hooks/useMediaQuery'; diff --git a/apps/playground/src/components/projects/main/ProjectSearch.tsx b/apps/playground/src/components/projects/main/ProjectSearch.tsx index dc12d0a33..02cbc81fa 100644 --- a/apps/playground/src/components/projects/main/ProjectSearch.tsx +++ b/apps/playground/src/components/projects/main/ProjectSearch.tsx @@ -1,10 +1,10 @@ -import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; - import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Flex, width100 } from '@toss/emotion-utils'; +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; + interface ProjectSearchProps { defaultValue?: string; value?: string; diff --git a/apps/playground/src/components/projects/main/card/MobileProjectCard.stories.tsx b/apps/playground/src/components/projects/main/card/MobileProjectCard.stories.tsx index 35f41318d..59c74e001 100644 --- a/apps/playground/src/components/projects/main/card/MobileProjectCard.stories.tsx +++ b/apps/playground/src/components/projects/main/card/MobileProjectCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import MobileProjectCard from './MobileProjectCard'; diff --git a/apps/playground/src/components/projects/main/card/MobileProjectCard.tsx b/apps/playground/src/components/projects/main/card/MobileProjectCard.tsx index e4d5482c1..d5aad1aa5 100644 --- a/apps/playground/src/components/projects/main/card/MobileProjectCard.tsx +++ b/apps/playground/src/components/projects/main/card/MobileProjectCard.tsx @@ -1,12 +1,14 @@ -import ResizedImage from '@/components/common/ResizedImage'; -import ProjectCardMemberList, { MemberType } from '@/components/projects/main/card/ProjectCardMemberList'; -import ProjectCardStatus from '@/components/projects/main/card/ProjectCardStatus'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Flex, Stack } from '@toss/emotion-utils'; import { Separated } from '@toss/react'; +import ResizedImage from '@/components/common/ResizedImage'; +import type { MemberType } from '@/components/projects/main/card/ProjectCardMemberList'; +import ProjectCardMemberList from '@/components/projects/main/card/ProjectCardMemberList'; +import ProjectCardStatus from '@/components/projects/main/card/ProjectCardStatus'; + interface MobileProjectCardProps { logoImage: string; title: string; diff --git a/apps/playground/src/components/projects/main/card/ProjectCard.stories.tsx b/apps/playground/src/components/projects/main/card/ProjectCard.stories.tsx index 0334bad49..6ba8537cb 100644 --- a/apps/playground/src/components/projects/main/card/ProjectCard.stories.tsx +++ b/apps/playground/src/components/projects/main/card/ProjectCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import ProjectCard from './ProjectCard'; diff --git a/apps/playground/src/components/projects/main/card/ProjectCard.tsx b/apps/playground/src/components/projects/main/card/ProjectCard.tsx index 814a4b80b..ce5224b2c 100644 --- a/apps/playground/src/components/projects/main/card/ProjectCard.tsx +++ b/apps/playground/src/components/projects/main/card/ProjectCard.tsx @@ -2,11 +2,13 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Flex, Stack } from '@toss/emotion-utils'; -import { m } from 'framer-motion'; import { Separated } from '@toss/react'; -import ProjectCardMemberList, { MemberType } from '@/components/projects/main/card/ProjectCardMemberList'; -import ProjectCardStatus from '@/components/projects/main/card/ProjectCardStatus'; +import { m } from 'framer-motion'; + import ResizedImage from '@/components/common/ResizedImage'; +import type { MemberType } from '@/components/projects/main/card/ProjectCardMemberList'; +import ProjectCardMemberList from '@/components/projects/main/card/ProjectCardMemberList'; +import ProjectCardStatus from '@/components/projects/main/card/ProjectCardStatus'; interface ProjectCardProps { image: string; diff --git a/apps/playground/src/components/projects/main/card/ProjectCardMemberList.tsx b/apps/playground/src/components/projects/main/card/ProjectCardMemberList.tsx index 3e9d03d67..92f4ff70b 100644 --- a/apps/playground/src/components/projects/main/card/ProjectCardMemberList.tsx +++ b/apps/playground/src/components/projects/main/card/ProjectCardMemberList.tsx @@ -1,11 +1,12 @@ -import ResizedImage from '@/components/common/ResizedImage'; -import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Flex } from '@toss/emotion-utils'; import { useState } from 'react'; +import ResizedImage from '@/components/common/ResizedImage'; +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; + const MEMBER_CIRCLE_WIDTH = 30; export interface MemberType { diff --git a/apps/playground/src/components/projects/main/card/ProjectCardStatus.tsx b/apps/playground/src/components/projects/main/card/ProjectCardStatus.tsx index 3b042db1d..71c91c714 100644 --- a/apps/playground/src/components/projects/main/card/ProjectCardStatus.tsx +++ b/apps/playground/src/components/projects/main/card/ProjectCardStatus.tsx @@ -1,11 +1,12 @@ -import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Flex } from '@toss/emotion-utils'; -import { PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; + +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -const ProjectCardStatus = ({ children }: PropsWithChildren<{}>) => { +const ProjectCardStatus = ({ children }: PropsWithChildren<unknown>) => { return ( <Flex css={{ gap: 4 }} align='center'> <IconCircleSuccess /> diff --git a/apps/playground/src/components/projects/upload/form/ListImageUploader.stories.tsx b/apps/playground/src/components/projects/upload/form/ListImageUploader.stories.tsx index a97dfb8b8..395ec6a01 100644 --- a/apps/playground/src/components/projects/upload/form/ListImageUploader.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/ListImageUploader.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import ListImageUploader from './ListImageUploader'; diff --git a/apps/playground/src/components/projects/upload/form/ListImageUploader.tsx b/apps/playground/src/components/projects/upload/form/ListImageUploader.tsx index b3ed54ad6..852e3aeff 100644 --- a/apps/playground/src/components/projects/upload/form/ListImageUploader.tsx +++ b/apps/playground/src/components/projects/upload/form/ListImageUploader.tsx @@ -1,14 +1,16 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode, useEffect, useRef, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useEffect, useRef, useState } from 'react'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import useImageUploader from '@/hooks/useImageUploader'; import IconCancel from '@/public/icons/icon-cancel.svg'; import IconPencil from '@/public/icons/icon-pencil.svg'; import { textStyles } from '@/styles/typography'; -import { buildCSSWithLength, CSSValueWithLength } from '@/utils'; +import type { CSSValueWithLength } from '@/utils'; +import { buildCSSWithLength } from '@/utils'; interface ImageUploaderProps { src?: string; diff --git a/apps/playground/src/components/projects/upload/form/ProjectForm.stories.tsx b/apps/playground/src/components/projects/upload/form/ProjectForm.stories.tsx index 11c5c7571..8520b936f 100644 --- a/apps/playground/src/components/projects/upload/form/ProjectForm.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/ProjectForm.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ProjectForm from '@/components/projects/upload/form/ProjectForm'; diff --git a/apps/playground/src/components/projects/upload/form/ProjectForm.tsx b/apps/playground/src/components/projects/upload/form/ProjectForm.tsx index eff634228..6b5131955 100644 --- a/apps/playground/src/components/projects/upload/form/ProjectForm.tsx +++ b/apps/playground/src/components/projects/upload/form/ProjectForm.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { zodResolver } from '@hookform/resolvers/zod'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { Controller, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form'; import Button from '@/components/common/Button'; @@ -12,7 +12,8 @@ import ErrorMessage from '@/components/common/Input/ErrorMessage'; import Responsive from '@/components/common/Responsive'; import Text from '@/components/common/Text'; import TextArea from '@/components/common/TextArea'; -import { categoryLabel, CategoryType } from '@/components/projects/upload/form/constants'; +import type { CategoryType } from '@/components/projects/upload/form/constants'; +import { categoryLabel } from '@/components/projects/upload/form/constants'; import { DEFAULT_IMAGE_URL, DEFAULT_LINK, DEFAULT_MEMBER } from '@/components/projects/upload/form/constants'; import CategoryField from '@/components/projects/upload/form/fields/CategoryField'; import GenerationField from '@/components/projects/upload/form/fields/GenerationField'; @@ -23,7 +24,8 @@ import ServiceTypeField from '@/components/projects/upload/form/fields/ServiceTy import StatusField from '@/components/projects/upload/form/fields/StatusField'; import ListImageUploader from '@/components/projects/upload/form/ListImageUploader'; import FormEntry from '@/components/projects/upload/form/presenter/FormEntry'; -import { defaultUploadValues, ProjectFormType, uploadSchema } from '@/components/projects/upload/form/schema'; +import type { ProjectFormType } from '@/components/projects/upload/form/schema'; +import { defaultUploadValues, uploadSchema } from '@/components/projects/upload/form/schema'; import UploadProjectProgress from '@/components/projects/upload/form/UploadProjectProgress'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/projects/upload/form/UploadProjectProgress.tsx b/apps/playground/src/components/projects/upload/form/UploadProjectProgress.tsx index f646401f9..a39acda1b 100644 --- a/apps/playground/src/components/projects/upload/form/UploadProjectProgress.tsx +++ b/apps/playground/src/components/projects/upload/form/UploadProjectProgress.tsx @@ -1,9 +1,10 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; -import { FormState } from 'react-hook-form'; +import type { FC } from 'react'; +import type { FormState } from 'react-hook-form'; -import FormProgress, { FormProgressItem } from '@/components/common/form/FormProgress'; -import { ProjectFormType } from '@/components/projects/upload/form/schema'; +import type { FormProgressItem } from '@/components/common/form/FormProgress'; +import FormProgress from '@/components/common/form/FormProgress'; +import type { ProjectFormType } from '@/components/projects/upload/form/schema'; interface UploadProjectProgressProps { formState: FormState<ProjectFormType>; diff --git a/apps/playground/src/components/projects/upload/form/fields/CategoryField.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/CategoryField.stories.tsx index 92b7dc38f..f0f8a653c 100644 --- a/apps/playground/src/components/projects/upload/form/fields/CategoryField.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/CategoryField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import CategoryField from './CategoryField'; diff --git a/apps/playground/src/components/projects/upload/form/fields/CategoryField.tsx b/apps/playground/src/components/projects/upload/form/fields/CategoryField.tsx index 745eef30f..b0596f66d 100644 --- a/apps/playground/src/components/projects/upload/form/fields/CategoryField.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/CategoryField.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import Select from '@/components/common/Select'; diff --git a/apps/playground/src/components/projects/upload/form/fields/GenerationField.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/GenerationField.stories.tsx index f7bc551a6..ebeec54c8 100644 --- a/apps/playground/src/components/projects/upload/form/fields/GenerationField.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/GenerationField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import GenerationField from './GenerationField'; diff --git a/apps/playground/src/components/projects/upload/form/fields/GenerationField.tsx b/apps/playground/src/components/projects/upload/form/fields/GenerationField.tsx index 180dbb11a..9f8be54b9 100644 --- a/apps/playground/src/components/projects/upload/form/fields/GenerationField.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/GenerationField.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; import Checkbox from '@/components/common/Checkbox'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; diff --git a/apps/playground/src/components/projects/upload/form/fields/LinkField.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/LinkField.stories.tsx index ae408801c..540c93def 100644 --- a/apps/playground/src/components/projects/upload/form/fields/LinkField.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/LinkField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { linkTitles } from '@/components/projects/upload/form/constants'; diff --git a/apps/playground/src/components/projects/upload/form/fields/LinkField.tsx b/apps/playground/src/components/projects/upload/form/fields/LinkField.tsx index be625bf36..bb649b5e0 100644 --- a/apps/playground/src/components/projects/upload/form/fields/LinkField.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/LinkField.tsx @@ -1,13 +1,15 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { isEmpty } from 'lodash-es'; -import React, { FC, useMemo, useState } from 'react'; +import type { FC } from 'react'; +import React, { useMemo, useState } from 'react'; import Input from '@/components/common/Input'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import Select from '@/components/common/Select'; import useToast from '@/components/common/Toast/useToast'; -import { linkTitles, LinkType } from '@/components/projects/upload/form/constants'; +import type { LinkType } from '@/components/projects/upload/form/constants'; +import { linkTitles } from '@/components/projects/upload/form/constants'; import IconTrash from '@/public/icons/icon-trash.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/projects/upload/form/fields/MemberField.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/MemberField.stories.tsx index f022245fd..de9ad3283 100644 --- a/apps/playground/src/components/projects/upload/form/fields/MemberField.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/MemberField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import { DEFAULT_MEMBER } from '@/components/projects/upload/form/constants'; diff --git a/apps/playground/src/components/projects/upload/form/fields/MemberField.tsx b/apps/playground/src/components/projects/upload/form/fields/MemberField.tsx index d907c08e8..a04c5015d 100644 --- a/apps/playground/src/components/projects/upload/form/fields/MemberField.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/MemberField.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { isEmpty } from 'lodash-es'; -import { FC, useMemo, useState } from 'react'; +import type { FC } from 'react'; +import { useMemo, useState } from 'react'; import { getMembersSearchByName } from '@/api/endpoint/members/getMembersSearchByName'; import { getMemberById } from '@/api/endpoint_LEGACY/members'; @@ -12,7 +13,8 @@ import Select from '@/components/common/Select'; import useToast from '@/components/common/Toast/useToast'; import { MemberRoleInfo } from '@/components/projects/constants'; import MemberSearch from '@/components/projects/upload/form/fields/member/MemberSearch'; -import { Member, MemberSearchContext } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; +import type { Member } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; +import { MemberSearchContext } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; import IconTrash from '@/public/icons/icon-trash.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/projects/upload/form/fields/PeriodField.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/PeriodField.stories.tsx index f1cc8c45e..0ff1149c4 100644 --- a/apps/playground/src/components/projects/upload/form/fields/PeriodField.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/PeriodField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import PeriodField from '@/components/projects/upload/form/fields/PeriodField'; diff --git a/apps/playground/src/components/projects/upload/form/fields/PeriodField.tsx b/apps/playground/src/components/projects/upload/form/fields/PeriodField.tsx index c9907b045..cef3af158 100644 --- a/apps/playground/src/components/projects/upload/form/fields/PeriodField.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/PeriodField.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import Checkbox from '@/components/common/Checkbox'; import Input from '@/components/common/Input'; diff --git a/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.stories.tsx index a10c191f8..3cff566d1 100644 --- a/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import ServiceTypeField, { serviceType } from './ServiceTypeField'; diff --git a/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.tsx b/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.tsx index f8b6d59c7..f1da9f985 100644 --- a/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/ServiceTypeField.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent, FC } from 'react'; +import type { ChangeEvent, FC } from 'react'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/projects/upload/form/fields/StatusField.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/StatusField.stories.tsx index c9fb85a8e..49a4477c7 100644 --- a/apps/playground/src/components/projects/upload/form/fields/StatusField.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/StatusField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { useState } from 'react'; import StatusField from './StatusField'; diff --git a/apps/playground/src/components/projects/upload/form/fields/StatusField.tsx b/apps/playground/src/components/projects/upload/form/fields/StatusField.tsx index 0615c6844..67d88ee54 100644 --- a/apps/playground/src/components/projects/upload/form/fields/StatusField.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/StatusField.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { ChangeEvent, FC } from 'react'; +import type { ChangeEvent, FC } from 'react'; import Switch from '@/components/common/Switch'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.stories.tsx b/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.stories.tsx index 1dbe472c2..5f6089e12 100644 --- a/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.stories.tsx @@ -1,7 +1,9 @@ -import { Meta } from '@storybook/react'; -import { FC, PropsWithChildren, useState } from 'react'; +import type { Meta } from '@storybook/react'; +import type { FC, PropsWithChildren } from 'react'; +import { useState } from 'react'; -import { Member, MemberSearchContext } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; +import type { Member } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; +import { MemberSearchContext } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; import MemberSearch from './MemberSearch'; diff --git a/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.tsx b/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.tsx index f591f8676..c04482886 100644 --- a/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.tsx +++ b/apps/playground/src/components/projects/upload/form/fields/member/MemberSearch.tsx @@ -2,10 +2,11 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { Command } from 'cmdk'; -import { FC } from 'react'; +import type { FC } from 'react'; import Text from '@/components/common/Text'; -import { Member, useMemberSearch } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; +import type { Member } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; +import { useMemberSearch } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; import IconClear from '@/public/icons/icon-member-search-clear.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/projects/upload/form/presenter/FormEntry.stories.tsx b/apps/playground/src/components/projects/upload/form/presenter/FormEntry.stories.tsx index 7dcd4632d..61a15bf41 100644 --- a/apps/playground/src/components/projects/upload/form/presenter/FormEntry.stories.tsx +++ b/apps/playground/src/components/projects/upload/form/presenter/FormEntry.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import FormEntry from '@/components/projects/upload/form/presenter/FormEntry'; diff --git a/apps/playground/src/components/projects/upload/form/presenter/FormEntry.tsx b/apps/playground/src/components/projects/upload/form/presenter/FormEntry.tsx index 941ca15c5..c1790119f 100644 --- a/apps/playground/src/components/projects/upload/form/presenter/FormEntry.tsx +++ b/apps/playground/src/components/projects/upload/form/presenter/FormEntry.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import Text from '@/components/common/Text'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/projects/upload/form/schema.ts b/apps/playground/src/components/projects/upload/form/schema.ts index e41b79f64..649c7daea 100644 --- a/apps/playground/src/components/projects/upload/form/schema.ts +++ b/apps/playground/src/components/projects/upload/form/schema.ts @@ -1,4 +1,4 @@ -import { DefaultValues } from 'react-hook-form'; +import type { DefaultValues } from 'react-hook-form'; import * as z from 'zod'; import { DEFAULT_MEMBER } from '@/components/projects/upload/form/constants'; diff --git a/apps/playground/src/components/projects/upload/hooks/useCreateProjectMutation.ts b/apps/playground/src/components/projects/upload/hooks/useCreateProjectMutation.ts index 16dfd318f..8d1629ccc 100644 --- a/apps/playground/src/components/projects/upload/hooks/useCreateProjectMutation.ts +++ b/apps/playground/src/components/projects/upload/hooks/useCreateProjectMutation.ts @@ -1,7 +1,7 @@ import { useMutation } from '@tanstack/react-query'; import { postProject } from '@/api/endpoint_LEGACY/projects'; -import { ProjectInput } from '@/api/endpoint_LEGACY/projects/type'; +import type { ProjectInput } from '@/api/endpoint_LEGACY/projects/type'; const useCreateProjectMutation = () => { return useMutation({ diff --git a/apps/playground/src/components/projects/upload/hooks/useGetProjectListQuery.ts b/apps/playground/src/components/projects/upload/hooks/useGetProjectListQuery.ts index a55fe63bf..2b333e181 100644 --- a/apps/playground/src/components/projects/upload/hooks/useGetProjectListQuery.ts +++ b/apps/playground/src/components/projects/upload/hooks/useGetProjectListQuery.ts @@ -1,7 +1,7 @@ import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query'; import { getProjects } from '@/api/endpoint_LEGACY/projects'; -import { ProjectsRequestParams } from '@/api/endpoint_LEGACY/projects/type'; +import type { ProjectsRequestParams } from '@/api/endpoint_LEGACY/projects/type'; export const getProjectListQueryKey = (params: ProjectsRequestParams = {}) => ['getProjectListQuery', params]; diff --git a/apps/playground/src/components/projects/utils.ts b/apps/playground/src/components/projects/utils.ts index 283559abe..46dc1825a 100644 --- a/apps/playground/src/components/projects/utils.ts +++ b/apps/playground/src/components/projects/utils.ts @@ -9,7 +9,7 @@ import type { ServiceType, } from '@/api/endpoint_LEGACY/projects/type'; import { DEFAULT_IMAGE_URL } from '@/components/projects/upload/form/constants'; -import { ProjectFormType } from '@/components/projects/upload/form/schema'; +import type { ProjectFormType } from '@/components/projects/upload/form/schema'; dayjs.extend(customParseFormat); diff --git a/apps/playground/src/components/remember/ReviewInput/index.tsx b/apps/playground/src/components/remember/ReviewInput/index.tsx index 6deb27f2d..d48189863 100644 --- a/apps/playground/src/components/remember/ReviewInput/index.tsx +++ b/apps/playground/src/components/remember/ReviewInput/index.tsx @@ -1,12 +1,14 @@ -import { useGetReviewsInfiniteQuery } from '@/api/endpoint/remember/getReviews'; -import { useUploadReviewMutation } from '@/api/endpoint/remember/uploadReview'; -import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; -import { ChangeEvent, useState } from 'react'; +import type { ChangeEvent } from 'react'; +import { useState } from 'react'; import TextareaAutosize from 'react-textarea-autosize'; +import { useGetReviewsInfiniteQuery } from '@/api/endpoint/remember/getReviews'; +import { useUploadReviewMutation } from '@/api/endpoint/remember/uploadReview'; +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; + const MAX_LENGTH = 3000; export default function ReviewInput() { diff --git a/apps/playground/src/components/remember/index.tsx b/apps/playground/src/components/remember/index.tsx index 435ca40e6..42229baba 100644 --- a/apps/playground/src/components/remember/index.tsx +++ b/apps/playground/src/components/remember/index.tsx @@ -1,3 +1,8 @@ +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import { fonts } from '@sopt-makers/fonts'; +import { useRouter } from 'next/router'; + import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import Responsive from '@/components/common/Responsive'; import ReviewInput from '@/components/remember/ReviewInput'; @@ -5,10 +10,6 @@ import Reviews from '@/components/remember/reviews'; import { LATEST_GENERATION } from '@/constants/generation'; import BackArrow from '@/public/icons/icon_chevron_left.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -import styled from '@emotion/styled'; -import { colors } from '@sopt-makers/colors'; -import { fonts } from '@sopt-makers/fonts'; -import { useRouter } from 'next/router'; export default function RememberPage() { const router = useRouter(); diff --git a/apps/playground/src/components/remember/mocks/browser.ts b/apps/playground/src/components/remember/mocks/browser.ts index 0a5642788..c95883bc8 100644 --- a/apps/playground/src/components/remember/mocks/browser.ts +++ b/apps/playground/src/components/remember/mocks/browser.ts @@ -1,4 +1,5 @@ import { setupWorker } from 'msw/browser'; + import { handlers } from './handlers'; export const worker = setupWorker(...handlers); diff --git a/apps/playground/src/components/remember/mocks/handlers.ts b/apps/playground/src/components/remember/mocks/handlers.ts index 37a78888c..e2529d2c2 100644 --- a/apps/playground/src/components/remember/mocks/handlers.ts +++ b/apps/playground/src/components/remember/mocks/handlers.ts @@ -1,6 +1,7 @@ -import { API_URL } from '@/constants/env'; import { http, HttpResponse } from 'msw'; +import { API_URL } from '@/constants/env'; + export const REVIEW_LIST = [ { id: 1, content: '솝트해서 좋았다!' }, { diff --git a/apps/playground/src/components/remember/reviews/ReviewCard/index.stories.tsx b/apps/playground/src/components/remember/reviews/ReviewCard/index.stories.tsx index 983f7fdbd..45ada7fd5 100644 --- a/apps/playground/src/components/remember/reviews/ReviewCard/index.stories.tsx +++ b/apps/playground/src/components/remember/reviews/ReviewCard/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ReviewCard from '@/components/remember/reviews/ReviewCard'; diff --git a/apps/playground/src/components/remember/reviews/ReviewCard/index.tsx b/apps/playground/src/components/remember/reviews/ReviewCard/index.tsx index a02e733be..53ed69d74 100644 --- a/apps/playground/src/components/remember/reviews/ReviewCard/index.tsx +++ b/apps/playground/src/components/remember/reviews/ReviewCard/index.tsx @@ -1,7 +1,8 @@ -import { MOBILE_MEDIA_QUERY, TABLET_MEDIA_QUERY } from '@/styles/mediaQuery'; import styled from '@emotion/styled'; import { fonts } from '@sopt-makers/fonts'; +import { MOBILE_MEDIA_QUERY, TABLET_MEDIA_QUERY } from '@/styles/mediaQuery'; + interface ReviewCardProp { id: number; content: string; diff --git a/apps/playground/src/components/remember/reviews/index.tsx b/apps/playground/src/components/remember/reviews/index.tsx index e63e4c718..55b4d0023 100644 --- a/apps/playground/src/components/remember/reviews/index.tsx +++ b/apps/playground/src/components/remember/reviews/index.tsx @@ -1,10 +1,11 @@ +import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid'; +import styled from '@emotion/styled'; + import { useGetReviewsInfiniteQuery } from '@/api/endpoint/remember/getReviews'; import Loading from '@/components/common/Loading'; import Responsive from '@/components/common/Responsive'; import ReviewCard from '@/components/remember/reviews/ReviewCard'; import useEnterScreen from '@/hooks/useEnterScreen'; -import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid'; -import styled from '@emotion/styled'; export default function Reviews() { const { ref } = useEnterScreen({ diff --git a/apps/playground/src/components/resolution/read/ResolutionReadModal.tsx b/apps/playground/src/components/resolution/read/ResolutionReadModal.tsx index 8ec86fd90..7acd2bbfa 100644 --- a/apps/playground/src/components/resolution/read/ResolutionReadModal.tsx +++ b/apps/playground/src/components/resolution/read/ResolutionReadModal.tsx @@ -1,19 +1,20 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { Button, useToast } from '@sopt-makers/ui'; +import { useRouter } from 'next/router'; +import { useGetResolution } from '@/api/endpoint/resolution/getResolution'; import { useGetResolutionValidation } from '@/api/endpoint/resolution/getResolutionValidation'; -import Modal, { ModalProps } from '@/components/common/Modal'; +import { ModalBottomSheet } from '@/components/common/BottomSheet/ModalBottomSheet'; +import type { ModalProps } from '@/components/common/Modal'; +import Modal from '@/components/common/Modal'; import { ModalContent, ModalFooter } from '@/components/common/Modal/parts'; +import Responsive from '@/components/common/Responsive'; import { LoggingClick } from '@/components/eventLogger/components/LoggingClick'; import useImageDownload from '@/components/resolution/read/hooks/useImageDownload'; import ResolutionMessage from '@/components/resolution/read/ResolutionMessage'; import { MB_MID_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { zIndex } from '@/styles/zIndex'; -import { useGetResolution } from '@/api/endpoint/resolution/getResolution'; -import Responsive from '@/components/common/Responsive'; -import { ModalBottomSheet } from '@/components/common/BottomSheet/ModalBottomSheet'; -import { useRouter } from 'next/router'; const ResolutionReadModal = ({ isOpen, onClose }: ModalProps) => { const { ref: imageRef, onClick: onDownloadButtonClick } = useImageDownload('at-sopt-다짐메시지'); diff --git a/apps/playground/src/components/resolution/submit/PlaygroundGuideModal.tsx b/apps/playground/src/components/resolution/submit/PlaygroundGuideModal.tsx index a43ae6394..4a5757eba 100644 --- a/apps/playground/src/components/resolution/submit/PlaygroundGuideModal.tsx +++ b/apps/playground/src/components/resolution/submit/PlaygroundGuideModal.tsx @@ -2,15 +2,15 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { useRouter } from 'next/router'; -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { ModalBottomSheet } from '@/components/common/BottomSheet/ModalBottomSheet'; import Modal from '@/components/common/Modal'; import Responsive from '@/components/common/Responsive'; import Text from '@/components/common/Text'; -import { ClickEvents } from '@/components/eventLogger/events'; +import type { ClickEvents } from '@/components/eventLogger/events'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; -import { ModalProps } from '@/components/members/detail/MessageSection/Modal'; +import type { ModalProps } from '@/components/members/detail/MessageSection/Modal'; import TimecapsopDelteButton from '@/components/resolution/delete'; import { cards } from '@/components/resolution/submit/constants/cards'; import { DEBUG } from '@/constants/env'; diff --git a/apps/playground/src/components/resolution/submit/TimecapsopSubmitModal.tsx b/apps/playground/src/components/resolution/submit/TimecapsopSubmitModal.tsx index e7135dbb3..c4c148f12 100644 --- a/apps/playground/src/components/resolution/submit/TimecapsopSubmitModal.tsx +++ b/apps/playground/src/components/resolution/submit/TimecapsopSubmitModal.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { FC } from 'react'; +import type { FC } from 'react'; import { ModalBottomSheet } from '@/components/common/BottomSheet/ModalBottomSheet'; import Modal from '@/components/common/Modal'; diff --git a/apps/playground/src/components/resolution/submit/TimecapsopSubmitModalContent.tsx b/apps/playground/src/components/resolution/submit/TimecapsopSubmitModalContent.tsx index 6865afeb7..ff8ae83cc 100644 --- a/apps/playground/src/components/resolution/submit/TimecapsopSubmitModalContent.tsx +++ b/apps/playground/src/components/resolution/submit/TimecapsopSubmitModalContent.tsx @@ -3,7 +3,8 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { colors } from '@sopt-makers/colors'; import { IconAlertCircle } from '@sopt-makers/icons'; import { TextArea } from '@sopt-makers/ui'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import { useEffect, useRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import * as yup from 'yup'; @@ -11,8 +12,9 @@ import * as yup from 'yup'; import RHFControllerFormItem from '@/components/common/form/RHFControllerFormItem'; import Loading from '@/components/common/Loading'; import Text from '@/components/common/Text'; -import { ModalProps } from '@/components/members/detail/MessageSection/Modal'; -import { TAG, TimecapsopTag } from '@/components/resolution/constants'; +import type { ModalProps } from '@/components/members/detail/MessageSection/Modal'; +import type { TimecapsopTag } from '@/components/resolution/constants'; +import { TAG } from '@/components/resolution/constants'; import { useConfirmResolution } from '@/components/resolution/submit/useConfirmResolution'; import { pgColors } from '@/styles/colors'; import { MOBILE_MAX_WIDTH, MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; @@ -54,19 +56,15 @@ const TimecapsopSubmitModalContent: FC<TimecapsopSubmitModalProps> = ({ userName }; const submit = async ({ content }: TimecapsopForm) => { - try { - if (!isValid) return; - handleConfirmResolution({ - content, - tags: selectedTag, - onSuccess: () => { - props.onClose(); - props.onSuccess(); - }, - }); - } catch (error) { - throw error; - } + if (!isValid) return; + handleConfirmResolution({ + content, + tags: selectedTag, + onSuccess: () => { + props.onClose(); + props.onSuccess(); + }, + }); }; const textareaRef = useRef<HTMLTextAreaElement>(null); diff --git a/apps/playground/src/components/resolution/submit/constants/cards.tsx b/apps/playground/src/components/resolution/submit/constants/cards.tsx index d8de3e425..0dc660c40 100644 --- a/apps/playground/src/components/resolution/submit/constants/cards.tsx +++ b/apps/playground/src/components/resolution/submit/constants/cards.tsx @@ -1,4 +1,4 @@ -import { ClickEvents } from '@/components/eventLogger/events'; +import type { ClickEvents } from '@/components/eventLogger/events'; import { playgroundLink } from '@/constants/links'; import CoffeeIcon from '@/public/logos/playgroundGuide/img_coffee.svg'; import GroupIcon from '@/public/logos/playgroundGuide/img_group.svg'; diff --git a/apps/playground/src/components/resolution/submit/useConfirmResolution.ts b/apps/playground/src/components/resolution/submit/useConfirmResolution.ts index 0cd7233ab..db193a125 100644 --- a/apps/playground/src/components/resolution/submit/useConfirmResolution.ts +++ b/apps/playground/src/components/resolution/submit/useConfirmResolution.ts @@ -1,6 +1,7 @@ import { useCallback } from 'react'; -import { ResolutionRequestBody, usePostResolutionMutation } from '@/api/endpoint/resolution/postResolution'; +import type { ResolutionRequestBody } from '@/api/endpoint/resolution/postResolution'; +import { usePostResolutionMutation } from '@/api/endpoint/resolution/postResolution'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; interface Options extends ResolutionRequestBody { diff --git a/apps/playground/src/components/soulmate/view/EntryCard.stories.tsx b/apps/playground/src/components/soulmate/view/EntryCard.stories.tsx index a5f12139b..8887709ab 100644 --- a/apps/playground/src/components/soulmate/view/EntryCard.stories.tsx +++ b/apps/playground/src/components/soulmate/view/EntryCard.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import EntryCard from '@/components/soulmate/view/EntryCard'; diff --git a/apps/playground/src/components/soulmate/view/EntryCard.tsx b/apps/playground/src/components/soulmate/view/EntryCard.tsx index 93409ef4c..4a6365c21 100644 --- a/apps/playground/src/components/soulmate/view/EntryCard.tsx +++ b/apps/playground/src/components/soulmate/view/EntryCard.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import SoulmateIcon from '@/components/soulmate/icons/SoulmateIcon'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/soulmate/view/chat/ChatLayout.stories.tsx b/apps/playground/src/components/soulmate/view/chat/ChatLayout.stories.tsx index da62b075b..44016276c 100644 --- a/apps/playground/src/components/soulmate/view/chat/ChatLayout.stories.tsx +++ b/apps/playground/src/components/soulmate/view/chat/ChatLayout.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import ChatLayout from './ChatLayout'; diff --git a/apps/playground/src/components/soulmate/view/chat/ChatLayout.tsx b/apps/playground/src/components/soulmate/view/chat/ChatLayout.tsx index 8612ace14..82b75db5c 100644 --- a/apps/playground/src/components/soulmate/view/chat/ChatLayout.tsx +++ b/apps/playground/src/components/soulmate/view/chat/ChatLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import ChatRule from '@/components/soulmate/view/chat/ChatRule'; import Feedback from '@/components/soulmate/view/chat/Feedback'; diff --git a/apps/playground/src/components/soulmate/view/chat/ChatRule.stories.tsx b/apps/playground/src/components/soulmate/view/chat/ChatRule.stories.tsx index 1e0820fcc..615dc24ac 100644 --- a/apps/playground/src/components/soulmate/view/chat/ChatRule.stories.tsx +++ b/apps/playground/src/components/soulmate/view/chat/ChatRule.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import ChatRule from './ChatRule'; diff --git a/apps/playground/src/components/soulmate/view/chat/ChatRule.tsx b/apps/playground/src/components/soulmate/view/chat/ChatRule.tsx index 333ee8d04..4a89d126d 100644 --- a/apps/playground/src/components/soulmate/view/chat/ChatRule.tsx +++ b/apps/playground/src/components/soulmate/view/chat/ChatRule.tsx @@ -1,10 +1,11 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { AnimatePresence, m } from 'framer-motion'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import { cardStyle } from '@/components/soulmate/view/common/commonStyles'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/soulmate/view/chat/Feedback.stories.tsx b/apps/playground/src/components/soulmate/view/chat/Feedback.stories.tsx index b9b96b8e0..009a464a7 100644 --- a/apps/playground/src/components/soulmate/view/chat/Feedback.stories.tsx +++ b/apps/playground/src/components/soulmate/view/chat/Feedback.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Feedback from './Feedback'; diff --git a/apps/playground/src/components/soulmate/view/chat/Feedback.tsx b/apps/playground/src/components/soulmate/view/chat/Feedback.tsx index 0f0831609..f707ca863 100644 --- a/apps/playground/src/components/soulmate/view/chat/Feedback.tsx +++ b/apps/playground/src/components/soulmate/view/chat/Feedback.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import SoulmateIconHeart from '@/components/soulmate/icons/SoulmateIconHeart'; import { textStyles } from '@/styles/typography'; interface FeedbackProps {} -const Feedback: FC<FeedbackProps> = ({}) => { +const Feedback: FC<FeedbackProps> = () => { return ( <Container> <Title>소울메이트 사용 후기 보내기 diff --git a/apps/playground/src/components/soulmate/view/chat/Menu.stories.tsx b/apps/playground/src/components/soulmate/view/chat/Menu.stories.tsx index a03d36fe4..3723797ff 100644 --- a/apps/playground/src/components/soulmate/view/chat/Menu.stories.tsx +++ b/apps/playground/src/components/soulmate/view/chat/Menu.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Menu from './Menu'; diff --git a/apps/playground/src/components/soulmate/view/chat/Menu.tsx b/apps/playground/src/components/soulmate/view/chat/Menu.tsx index 57bc2ca8c..46acdf083 100644 --- a/apps/playground/src/components/soulmate/view/chat/Menu.tsx +++ b/apps/playground/src/components/soulmate/view/chat/Menu.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, ReactNode, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useState } from 'react'; import SoulmateIconFlag from '@/components/soulmate/icons/SoulmateIconFlag'; import SoulmateIconHeart from '@/components/soulmate/icons/SoulmateIconHeart'; diff --git a/apps/playground/src/components/soulmate/view/chat/MissionProgress.stories.tsx b/apps/playground/src/components/soulmate/view/chat/MissionProgress.stories.tsx index e6d9e839d..7c333f912 100644 --- a/apps/playground/src/components/soulmate/view/chat/MissionProgress.stories.tsx +++ b/apps/playground/src/components/soulmate/view/chat/MissionProgress.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import dayjs from 'dayjs'; import MissionProgress from '@/components/soulmate/view/chat/MissionProgress'; diff --git a/apps/playground/src/components/soulmate/view/chat/MissionProgress.tsx b/apps/playground/src/components/soulmate/view/chat/MissionProgress.tsx index d37f86a9a..aa153411f 100644 --- a/apps/playground/src/components/soulmate/view/chat/MissionProgress.tsx +++ b/apps/playground/src/components/soulmate/view/chat/MissionProgress.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/soulmate/view/chat/SoulmateChat.stories.tsx b/apps/playground/src/components/soulmate/view/chat/SoulmateChat.stories.tsx index ff147074f..af3f75a62 100644 --- a/apps/playground/src/components/soulmate/view/chat/SoulmateChat.stories.tsx +++ b/apps/playground/src/components/soulmate/view/chat/SoulmateChat.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import SoulmateChat from './SoulmateChat'; diff --git a/apps/playground/src/components/soulmate/view/chat/SoulmateChat.tsx b/apps/playground/src/components/soulmate/view/chat/SoulmateChat.tsx index 34369c803..238a66310 100644 --- a/apps/playground/src/components/soulmate/view/chat/SoulmateChat.tsx +++ b/apps/playground/src/components/soulmate/view/chat/SoulmateChat.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import * as ScrollArea from '@radix-ui/react-scroll-area'; import { colors } from '@sopt-makers/colors'; -import { FC, FormEvent, ReactNode } from 'react'; +import type { FC, FormEvent, ReactNode } from 'react'; import { cardStyle } from '@/components/soulmate/view/common/commonStyles'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/soulmate/view/common/SoulmateModal.stories.tsx b/apps/playground/src/components/soulmate/view/common/SoulmateModal.stories.tsx index 28917014b..6113c7435 100644 --- a/apps/playground/src/components/soulmate/view/common/SoulmateModal.stories.tsx +++ b/apps/playground/src/components/soulmate/view/common/SoulmateModal.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import SoulmateModal from './SoulmateModal'; diff --git a/apps/playground/src/components/soulmate/view/common/SoulmateModal.tsx b/apps/playground/src/components/soulmate/view/common/SoulmateModal.tsx index 893e385aa..2dbe0a6c1 100644 --- a/apps/playground/src/components/soulmate/view/common/SoulmateModal.tsx +++ b/apps/playground/src/components/soulmate/view/common/SoulmateModal.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import * as Dialog from '@radix-ui/react-dialog'; import { colors } from '@sopt-makers/colors'; import dynamic from 'next/dynamic'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/soulmate/view/layout/LobbyLayout.stories.tsx b/apps/playground/src/components/soulmate/view/layout/LobbyLayout.stories.tsx index 53dc2a03b..132bde999 100644 --- a/apps/playground/src/components/soulmate/view/layout/LobbyLayout.stories.tsx +++ b/apps/playground/src/components/soulmate/view/layout/LobbyLayout.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import LobbyLayout from './LobbyLayout'; diff --git a/apps/playground/src/components/soulmate/view/layout/LobbyLayout.tsx b/apps/playground/src/components/soulmate/view/layout/LobbyLayout.tsx index ec9b6fb98..99e440517 100644 --- a/apps/playground/src/components/soulmate/view/layout/LobbyLayout.tsx +++ b/apps/playground/src/components/soulmate/view/layout/LobbyLayout.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; import SoulmateIcon from '@/components/soulmate/icons/SoulmateIcon'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.stories.tsx b/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.stories.tsx index f2181b969..d2b5249c1 100644 --- a/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.stories.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import ExitSoulmateLink from './ExitSoulmateLink'; diff --git a/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx b/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx index 3da425502..c15dfce59 100644 --- a/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC } from 'react'; +import type { FC } from 'react'; import SoulmateModal from '@/components/soulmate/view/common/SoulmateModal'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.stories.tsx b/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.stories.tsx index 8c5d4a0f1..092327972 100644 --- a/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.stories.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import MatchingStatus from '@/components/soulmate/view/lobby/MatchingStatus'; diff --git a/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.tsx b/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.tsx index bb46bc436..5b4812308 100644 --- a/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/MatchingStatus.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import { cardStyle } from '@/components/soulmate/view/common/commonStyles'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/components/soulmate/view/lobby/Register.stories.tsx b/apps/playground/src/components/soulmate/view/lobby/Register.stories.tsx index 7d482bfd8..d4cc771a9 100644 --- a/apps/playground/src/components/soulmate/view/lobby/Register.stories.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/Register.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Register from './Register'; diff --git a/apps/playground/src/components/soulmate/view/lobby/Register.tsx b/apps/playground/src/components/soulmate/view/lobby/Register.tsx index d768c0b62..5abc18f1a 100644 --- a/apps/playground/src/components/soulmate/view/lobby/Register.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/Register.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import Checkbox from '@/components/common/Checkbox'; import SoulmateIcon from '@/components/soulmate/icons/SoulmateIcon'; @@ -29,7 +30,7 @@ const requiresData = [ }, ]; -const Register: FC = ({}) => { +const Register: FC = () => { const [checked, setChecked] = useState(requiresData.map(() => false)); const allChecked = checked.every((v) => v); diff --git a/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.stories.tsx b/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.stories.tsx index 0762fd368..2d3b3711d 100644 --- a/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.stories.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import RegisterSuccessModal from './RegisterSuccessModal'; diff --git a/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.tsx b/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.tsx index 03cbf7c32..ac29dc703 100644 --- a/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.tsx +++ b/apps/playground/src/components/soulmate/view/lobby/RegisterSuccessModal.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import SoulmateIcon from '@/components/soulmate/icons/SoulmateIcon'; import SoulmateModal from '@/components/soulmate/view/common/SoulmateModal'; diff --git a/apps/playground/src/components/vote/RadioBox.tsx b/apps/playground/src/components/vote/RadioBox.tsx index bb1a77170..f5b8d8417 100644 --- a/apps/playground/src/components/vote/RadioBox.tsx +++ b/apps/playground/src/components/vote/RadioBox.tsx @@ -1,9 +1,10 @@ -import Text from '@/components/common/Text'; -import styled from '@emotion/styled'; import { keyframes } from '@emotion/react'; +import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import { IconCheck } from '@sopt-makers/icons'; import { fonts } from '@sopt-makers/fonts'; +import { IconCheck } from '@sopt-makers/icons'; + +import Text from '@/components/common/Text'; interface RadioBoxProps { content: string; diff --git a/apps/playground/src/components/vote/index.stories.tsx b/apps/playground/src/components/vote/index.stories.tsx index 21c42aafc..e4385227f 100644 --- a/apps/playground/src/components/vote/index.stories.tsx +++ b/apps/playground/src/components/vote/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Vote from './index'; diff --git a/apps/playground/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.stories.tsx b/apps/playground/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.stories.tsx index 8bf289eae..4b03de567 100644 --- a/apps/playground/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import StartWordChatMessage from '@/components/wordchain/WordchainChatting/StartWordChatMessage'; diff --git a/apps/playground/src/components/wordchain/WordchainChatting/WordChatMessage/index.stories.tsx b/apps/playground/src/components/wordchain/WordchainChatting/WordChatMessage/index.stories.tsx index cf510db46..46b61d44f 100644 --- a/apps/playground/src/components/wordchain/WordchainChatting/WordChatMessage/index.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainChatting/WordChatMessage/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import WordChatMessage from '@/components/wordchain/WordchainChatting/WordChatMessage'; diff --git a/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.stories.tsx b/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.stories.tsx index 62ba9713b..677b1b316 100644 --- a/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Wordchain from '@/components/wordchain/WordchainChatting/Wordchain'; diff --git a/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.tsx b/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.tsx index e0b89283a..aa8befa22 100644 --- a/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.tsx +++ b/apps/playground/src/components/wordchain/WordchainChatting/Wordchain/index.tsx @@ -9,7 +9,7 @@ import { useNewGameMutation } from '@/api/endpoint/wordchain/newGame'; import useConfirm from '@/components/common/Modal/useConfirm'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import StartWordChatMessage from '@/components/wordchain/WordchainChatting/StartWordChatMessage'; -import { Word } from '@/components/wordchain/WordchainChatting/types'; +import type { Word } from '@/components/wordchain/WordchainChatting/types'; import WordChatMessage from '@/components/wordchain/WordchainChatting/WordChatMessage'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/components/wordchain/WordchainChatting/index.tsx b/apps/playground/src/components/wordchain/WordchainChatting/index.tsx index 39eda9db8..e16a8d4d6 100644 --- a/apps/playground/src/components/wordchain/WordchainChatting/index.tsx +++ b/apps/playground/src/components/wordchain/WordchainChatting/index.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { useQueryClient } from '@tanstack/react-query'; import PaperAirplaneIcon from 'public/icons/icon-paper-airplane.svg'; -import { FormEvent, useCallback, useEffect, useRef, useState } from 'react'; +import type { FormEvent } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useGetActiveWordchain, diff --git a/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.stories.tsx b/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.stories.tsx index b3a1e71e8..31b9fd650 100644 --- a/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import WordChainEntry from '@/components/wordchain/WordchainEntry/WordChainEntry'; diff --git a/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.tsx b/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.tsx index e793a3185..b701b245e 100644 --- a/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.tsx +++ b/apps/playground/src/components/wordchain/WordchainEntry/WordChainEntry.tsx @@ -4,7 +4,7 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Flex } from '@toss/emotion-utils'; import Link from 'next/link'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useGetEntryWordchain } from '@/api/endpoint/wordchain/getWordchain'; import { ADS } from '@/components/common/Banner/AdsBanner/constants/ads'; @@ -87,8 +87,8 @@ const WordChainEntry: FC = ({ className }) => { {lastWinner ? ( - 이번 우승자는 {lastWinner?.winner.name}님 입니다! ' - {data.nextSyllable}'(으)로 시작하는 단어는? + 이번 우승자는 {lastWinner?.winner.name}님 입니다! ' + {data.nextSyllable}'(으)로 시작하는 단어는? ) : ( 우승하고 명예의 전당에 올라가보세요! @@ -109,8 +109,8 @@ const WordChainEntry: FC = ({ className }) => { {lastWinner ? ( - 이번 우승자는 {lastWinner?.winner.name}님 입니다! ' - {data.nextSyllable}'(으)로 시작하는 단어는? + 이번 우승자는 {lastWinner?.winner.name}님 입니다! ' + {data.nextSyllable}'(으)로 시작하는 단어는? ) : ( 우승하고 명예의 전당에 올라가보세요! diff --git a/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.stories.tsx b/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.stories.tsx index c563c7002..7eccfeee4 100644 --- a/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import WordchainMessage from '@/components/wordchain/WordchainEntry/WordchainMessage'; diff --git a/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.tsx b/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.tsx index 0170e9aa9..56f5b3ab5 100644 --- a/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.tsx +++ b/apps/playground/src/components/wordchain/WordchainEntry/WordchainMessage.tsx @@ -29,7 +29,7 @@ export default function WordchainMessage(props: WordchainMessageProps) { - '{props.word}' + '{props.word}' (으)로 시작하는 단어는? diff --git a/apps/playground/src/components/wordchain/WordchainRules.stories.tsx b/apps/playground/src/components/wordchain/WordchainRules.stories.tsx index 62e39e9d6..6ae92ce36 100644 --- a/apps/playground/src/components/wordchain/WordchainRules.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainRules.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import WordchainRules from '@/components/wordchain/WordchainRules'; diff --git a/apps/playground/src/components/wordchain/WordchainRules.tsx b/apps/playground/src/components/wordchain/WordchainRules.tsx index 1ea367d0d..71cef8e3b 100644 --- a/apps/playground/src/components/wordchain/WordchainRules.tsx +++ b/apps/playground/src/components/wordchain/WordchainRules.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; -import { FC, ReactNode, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import { useState } from 'react'; import Modal from '@/components/common/Modal'; import Text from '@/components/common/Text'; diff --git a/apps/playground/src/components/wordchain/WordchainWinners/WordchainWinner/index.stories.tsx b/apps/playground/src/components/wordchain/WordchainWinners/WordchainWinner/index.stories.tsx index b07ea9d63..0e52587d1 100644 --- a/apps/playground/src/components/wordchain/WordchainWinners/WordchainWinner/index.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainWinners/WordchainWinner/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import WordChainWinner from '@/components/wordchain/WordchainWinners/WordchainWinner'; diff --git a/apps/playground/src/components/wordchain/WordchainWinners/index.stories.tsx b/apps/playground/src/components/wordchain/WordchainWinners/index.stories.tsx index 709a650d6..4c054f425 100644 --- a/apps/playground/src/components/wordchain/WordchainWinners/index.stories.tsx +++ b/apps/playground/src/components/wordchain/WordchainWinners/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Fragment } from 'react'; import WordchainWinners from '@/components/wordchain/WordchainWinners'; diff --git a/apps/playground/src/constants/links.ts b/apps/playground/src/constants/links.ts index 6166d058f..11dd0b62e 100644 --- a/apps/playground/src/constants/links.ts +++ b/apps/playground/src/constants/links.ts @@ -1,51 +1,8 @@ +export { crewLink, MAKERS_TEAM_URL, playgroundLink } from '@sopt/constant'; + export const FEEDBACK_FORM_URL = 'https://forms.gle/FCx5WJ6mDmRuneQi9'; export const MEMBER_REQUEST_FORM_URL = 'https://forms.gle/Hs9tJgMG9bNvT1rS9'; export const MENTOR_APPLICATION_URL = 'https://forms.gle/iMiCSnqy5oWqAsx47'; export const COFFEECHAT_GUIDE = 'https://www.notion.so/sopt-makers/87ca4563b6ec49528b7d34372edff677?pvs=4'; -export const MAKERS_TEAM_URL = - 'https://makers.sopt.org/?utm_source=playground&utm_medium=footer&utm_campaign=recruiting&utm_id=3rd_makers'; export const PLAYGROUND_ORIGIN = process.env.NODE_ENV === 'development' ? `https://sopt-internal-dev.pages.dev` : `https://playground.sopt.org`; - -export const playgroundLink = { - memberList: () => `/members`, - teamLeaderList: () => `/members/team-leaders`, - memberDetail: (id: string | number) => `/members/${id}`, - memberUpload: () => `/members/upload`, - memberEdit: () => '/members/edit', - memberCheckSoptActivity: () => '/members/checkSoptActivity', - projectList: () => `/projects`, - projectDetail: (id: string | number) => `/projects/${id}`, - projectUpload: () => `/projects/upload`, - projectEdit: (id: string | number) => `/projects/edit/${id}`, - groupList: () => '/group', - groupDetail: (id: string | number) => `/group/detail?id=${id}`, - intro: () => `/intro`, - login: () => `/accounts`, - register: () => `/accounts/sign-up/auth`, - resetLogin: () => `/auth/reset`, - reconnectSocialAuth: () => `/auth/reconnect`, - connectSocialAuth: () => `/auth/register`, - makers: () => `/makers`, - blog: () => `/blog`, - blogSuccess: () => `/blog/success`, - mentoringDetail: (id: number) => `/mentoring/${id}`, - wordchain: () => `/wordchain`, - feedList: () => `/`, - feedDetail: (id: string | number) => `/feed/${id}`, - feedUpload: () => `/feed/upload`, - feedEdit: (id: string | number) => `/feed/edit/${id}`, - remember: () => `/remember`, - coffeechatUpload: () => `/coffeechat/upload`, - coffeechatEdit: (id: string | number) => `/coffeechat/edit/${id}`, - coffeechat: () => `/coffeechat`, - coffeechatDetail: (id: string | number) => `/coffeechat/${id}`, - mySoptReport: () => `/mySoptReport`, - accounts: () => `/accounts`, -}; - -export const crewLink = { - crewHome: () => `/group`, - feedDetail: (id: string | number) => `/group/post?id=${id}`, - groupDetail: (id: string | number) => `/group/detail?id=${id}`, -}; diff --git a/apps/playground/src/hooks/useKakao.ts b/apps/playground/src/hooks/useKakao.ts index 1b6df232b..52bbbcdbf 100644 --- a/apps/playground/src/hooks/useKakao.ts +++ b/apps/playground/src/hooks/useKakao.ts @@ -2,8 +2,7 @@ import { useEffect } from 'react'; export default function useKakao() { useEffect(() => { - if (window.Kakao && window.Kakao.isInitialized()) { - } else { + if (!(window.Kakao && window.Kakao.isInitialized())) { const checkKakao = setInterval(() => { if (window.Kakao && window.Kakao.isInitialized()) { clearInterval(checkKakao); diff --git a/apps/playground/src/hooks/useOnClickOutside.ts b/apps/playground/src/hooks/useOnClickOutside.ts index bd89c119a..5ec50e88c 100644 --- a/apps/playground/src/hooks/useOnClickOutside.ts +++ b/apps/playground/src/hooks/useOnClickOutside.ts @@ -1,4 +1,5 @@ -import { RefObject, useEffect } from 'react'; +import type { RefObject } from 'react'; +import { useEffect } from 'react'; type Event = MouseEvent | TouchEvent; diff --git a/apps/playground/src/hooks/usePageQueryParams.ts b/apps/playground/src/hooks/usePageQueryParams.ts index d67dff6a1..f83a64189 100644 --- a/apps/playground/src/hooks/usePageQueryParams.ts +++ b/apps/playground/src/hooks/usePageQueryParams.ts @@ -1,5 +1,6 @@ import { isEmpty, omitBy } from 'lodash-es'; -import { NextRouter, useRouter } from 'next/router'; +import type { NextRouter } from 'next/router'; +import { useRouter } from 'next/router'; import qs from 'qs'; import { useCallback } from 'react'; diff --git a/apps/playground/src/hooks/useRunOnce.ts b/apps/playground/src/hooks/useRunOnce.ts index bc73008be..382763fe4 100644 --- a/apps/playground/src/hooks/useRunOnce.ts +++ b/apps/playground/src/hooks/useRunOnce.ts @@ -1,4 +1,5 @@ -import { DependencyList, useEffect, useRef } from 'react'; +import type { DependencyList } from 'react'; +import { useEffect, useRef } from 'react'; export function useRunOnce(callback: () => void, dependencies: DependencyList) { const isRun = useRef(false); diff --git a/apps/playground/src/pages/_app.tsx b/apps/playground/src/pages/_app.tsx index 79a9f47f7..6a746b63f 100644 --- a/apps/playground/src/pages/_app.tsx +++ b/apps/playground/src/pages/_app.tsx @@ -5,12 +5,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { OverlayProvider } from '@toss/use-overlay'; import { LazyMotion } from 'framer-motion'; -import NextAdapterPages from 'next-query-params/pages'; -import { NextSeo } from 'next-seo'; import type { AppProps } from 'next/app'; import dynamic from 'next/dynamic'; import Head from 'next/head'; import Router, { useRouter } from 'next/router'; +import NextAdapterPages from 'next-query-params/pages'; +import { NextSeo } from 'next-seo'; import { useEffect } from 'react'; import { RecoilRoot } from 'recoil'; import { QueryParamProvider } from 'use-query-params'; diff --git a/apps/playground/src/pages/auth/callback/apple/login.tsx b/apps/playground/src/pages/auth/callback/apple/login.tsx index de123b181..17892fb13 100644 --- a/apps/playground/src/pages/auth/callback/apple/login.tsx +++ b/apps/playground/src/pages/auth/callback/apple/login.tsx @@ -1,8 +1,9 @@ import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useSetRecoilState } from 'recoil'; -import OAuthLoginCallback, { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import type { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import OAuthLoginCallback from '@/components/auth/callback/OAuthLoginCallback'; import useAppleAuth from '@/components/auth/identityProvider/apple/useAppleAuth'; import { lastLoginMethodAtom } from '@/components/auth/states/lastLoginMethodAtom'; import useLastUnauthorized from '@/components/auth/util/useLastUnauthorized'; diff --git a/apps/playground/src/pages/auth/callback/apple/register.tsx b/apps/playground/src/pages/auth/callback/apple/register.tsx index 3ba84d180..25e03bff1 100644 --- a/apps/playground/src/pages/auth/callback/apple/register.tsx +++ b/apps/playground/src/pages/auth/callback/apple/register.tsx @@ -1,8 +1,9 @@ import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import OAuthLoginCallback, { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import type { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import OAuthLoginCallback from '@/components/auth/callback/OAuthLoginCallback'; import useAppleAuth from '@/components/auth/identityProvider/apple/useAppleAuth'; import { lastLoginMethodAtom } from '@/components/auth/states/lastLoginMethodAtom'; import { registerTokenAtom } from '@/components/auth/states/registerTokenAtom'; diff --git a/apps/playground/src/pages/auth/callback/google/login.tsx b/apps/playground/src/pages/auth/callback/google/login.tsx index c21227bbe..6bd11fd81 100644 --- a/apps/playground/src/pages/auth/callback/google/login.tsx +++ b/apps/playground/src/pages/auth/callback/google/login.tsx @@ -1,8 +1,9 @@ import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useSetRecoilState } from 'recoil'; -import OAuthLoginCallback, { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import type { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import OAuthLoginCallback from '@/components/auth/callback/OAuthLoginCallback'; import useGoogleAuth from '@/components/auth/identityProvider/google/useGoogleAuth'; import { lastLoginMethodAtom } from '@/components/auth/states/lastLoginMethodAtom'; import useLastUnauthorized from '@/components/auth/util/useLastUnauthorized'; diff --git a/apps/playground/src/pages/auth/callback/google/register.tsx b/apps/playground/src/pages/auth/callback/google/register.tsx index 5104f630b..f1eef62f5 100644 --- a/apps/playground/src/pages/auth/callback/google/register.tsx +++ b/apps/playground/src/pages/auth/callback/google/register.tsx @@ -1,8 +1,9 @@ import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import OAuthLoginCallback, { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import type { ProcessParamFn } from '@/components/auth/callback/OAuthLoginCallback'; +import OAuthLoginCallback from '@/components/auth/callback/OAuthLoginCallback'; import useGoogleAuth from '@/components/auth/identityProvider/google/useGoogleAuth'; import { lastLoginMethodAtom } from '@/components/auth/states/lastLoginMethodAtom'; import { registerTokenAtom } from '@/components/auth/states/registerTokenAtom'; diff --git a/apps/playground/src/pages/auth/login.tsx b/apps/playground/src/pages/auth/login.tsx index 8811b8e6a..ca2c70bea 100644 --- a/apps/playground/src/pages/auth/login.tsx +++ b/apps/playground/src/pages/auth/login.tsx @@ -3,7 +3,8 @@ import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { m } from 'framer-motion'; import Link from 'next/link'; -import { FC, useEffect, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import AppleAuthButton from '@/components/auth/identityProvider/apple/AppleAuthButton'; diff --git a/apps/playground/src/pages/auth/oauth.tsx b/apps/playground/src/pages/auth/oauth.tsx index b59fe457f..70b3e8801 100644 --- a/apps/playground/src/pages/auth/oauth.tsx +++ b/apps/playground/src/pages/auth/oauth.tsx @@ -1,4 +1,5 @@ -import { FC, useEffect, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useState } from 'react'; import OAuthCallback from '@/components/auth/oauth/OAuthCallback'; import Loading from '@/components/common/Loading'; diff --git a/apps/playground/src/pages/auth/reconnect.tsx b/apps/playground/src/pages/auth/reconnect.tsx index c5f7e48b5..ca4bc3455 100644 --- a/apps/playground/src/pages/auth/reconnect.tsx +++ b/apps/playground/src/pages/auth/reconnect.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { useQuery } from '@tanstack/react-query'; -import { FC, useEffect } from 'react'; +import type { FC } from 'react'; +import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; import { postRegistrationInfo } from '@/api/endpoint_LEGACY/auth'; diff --git a/apps/playground/src/pages/auth/register-finished.tsx b/apps/playground/src/pages/auth/register-finished.tsx index 1a2eea8f1..edd04071a 100644 --- a/apps/playground/src/pages/auth/register-finished.tsx +++ b/apps/playground/src/pages/auth/register-finished.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import RegisterFinished from '@/components/auth/register/RegisterFinished'; import { setLayout } from '@/utils/layout'; diff --git a/apps/playground/src/pages/auth/register.tsx b/apps/playground/src/pages/auth/register.tsx index 2ead5fcff..bdef58781 100644 --- a/apps/playground/src/pages/auth/register.tsx +++ b/apps/playground/src/pages/auth/register.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { useQuery } from '@tanstack/react-query'; -import { FC, useEffect } from 'react'; +import type { FC } from 'react'; +import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; import { postRegistrationInfo } from '@/api/endpoint_LEGACY/auth'; diff --git a/apps/playground/src/pages/auth/reset.tsx b/apps/playground/src/pages/auth/reset.tsx index 9edce5ecd..87fc4b7de 100644 --- a/apps/playground/src/pages/auth/reset.tsx +++ b/apps/playground/src/pages/auth/reset.tsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import ByPhoneView from '@/components/auth/register/verify/view/ByPhoneView'; import useResetLogin from '@/components/auth/reset/useResetLogin'; import { playgroundLink } from '@/constants/links'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; diff --git a/apps/playground/src/pages/auth/verify.tsx b/apps/playground/src/pages/auth/verify.tsx index 679911970..e9a06493f 100644 --- a/apps/playground/src/pages/auth/verify.tsx +++ b/apps/playground/src/pages/auth/verify.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import Verify from '@/components/auth/register/verify/Verify'; import { setLayout } from '@/utils/layout'; diff --git a/apps/playground/src/pages/blog/index.tsx b/apps/playground/src/pages/blog/index.tsx index 554c83c85..1d7b0e4be 100644 --- a/apps/playground/src/pages/blog/index.tsx +++ b/apps/playground/src/pages/blog/index.tsx @@ -2,11 +2,12 @@ import styled from '@emotion/styled'; import { useMutation } from '@tanstack/react-query'; import axios from 'axios'; import { useRouter } from 'next/router'; -import { FC } from 'react'; +import type { FC } from 'react'; import { z } from 'zod'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; -import { postReview, RequestBody } from '@/api/endpoint/review/postReview'; +import type { RequestBody } from '@/api/endpoint/review/postReview'; +import { postReview } from '@/api/endpoint/review/postReview'; import AuthRequired from '@/components/auth/AuthRequired'; import UploadBlog from '@/components/blog/UploadBlog'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; diff --git a/apps/playground/src/pages/blog/success.tsx b/apps/playground/src/pages/blog/success.tsx index f26dbeea6..93663f762 100644 --- a/apps/playground/src/pages/blog/success.tsx +++ b/apps/playground/src/pages/blog/success.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; import UploadSuccess from '@/components/blog/Success'; diff --git a/apps/playground/src/pages/coffeechat/edit/[id].tsx b/apps/playground/src/pages/coffeechat/edit/[id].tsx index 06d3e76de..6da03ac07 100644 --- a/apps/playground/src/pages/coffeechat/edit/[id].tsx +++ b/apps/playground/src/pages/coffeechat/edit/[id].tsx @@ -1,8 +1,9 @@ -import { DialogOptionType, useDialog, useToast } from '@sopt-makers/ui'; +import { playgroundLink } from '@sopt/constant'; +import type { DialogOptionType } from '@sopt-makers/ui'; +import { useDialog, useToast } from '@sopt-makers/ui'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { FieldValues } from 'react-hook-form'; +import type { FieldValues } from 'react-hook-form'; import { editCoffeechat } from '@/api/endpoint/coffeechat/editCoffeechat'; import { getCoffeechatDetail, useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail'; @@ -10,7 +11,7 @@ import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import AuthRequired from '@/components/auth/AuthRequired'; import CoffeechatLoading from '@/components/coffeechat/Loading'; import CoffeechatUploadPage from '@/components/coffeechat/page/CoffeechatUploadPage'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import useStringRouterQuery from '@/hooks/useStringRouterQuery'; import { setLayout } from '@/utils/layout'; diff --git a/apps/playground/src/pages/coffeechat/review.tsx b/apps/playground/src/pages/coffeechat/review.tsx index f4a0b3695..4fa8e9ab6 100644 --- a/apps/playground/src/pages/coffeechat/review.tsx +++ b/apps/playground/src/pages/coffeechat/review.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Button, Callout, SelectV2, Tag, TextArea, useDialog, useToast } from '@sopt-makers/ui'; import { useMutation } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useState } from 'react'; import { useGetCoffeechatHistory } from '@/api/endpoint/coffeechat/getCoffeechatHistory'; diff --git a/apps/playground/src/pages/coffeechat/upload.tsx b/apps/playground/src/pages/coffeechat/upload.tsx index f86ce3e2f..a7227b5fc 100644 --- a/apps/playground/src/pages/coffeechat/upload.tsx +++ b/apps/playground/src/pages/coffeechat/upload.tsx @@ -1,9 +1,10 @@ -import { DialogOptionType, useDialog, useToast } from '@sopt-makers/ui'; +import { playgroundLink } from '@sopt/constant'; +import type { DialogOptionType } from '@sopt-makers/ui'; +import { useDialog, useToast } from '@sopt-makers/ui'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useMemo } from 'react'; -import { FieldValues } from 'react-hook-form'; +import type { FieldValues } from 'react-hook-form'; import { getCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail'; import { uploadCoffeechat } from '@/api/endpoint/coffeechat/uploadCoffeechat'; @@ -12,7 +13,7 @@ import { useGetMemberProfileById } from '@/api/endpoint_LEGACY/hooks'; import AuthRequired from '@/components/auth/AuthRequired'; import CoffeechatLoading from '@/components/coffeechat/Loading'; import CoffeechatUploadPage from '@/components/coffeechat/page/CoffeechatUploadPage'; -import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; +import type { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import { setLayout } from '@/utils/layout'; diff --git a/apps/playground/src/pages/feed/edit/[id].tsx b/apps/playground/src/pages/feed/edit/[id].tsx index 26943dded..37a53fafd 100644 --- a/apps/playground/src/pages/feed/edit/[id].tsx +++ b/apps/playground/src/pages/feed/edit/[id].tsx @@ -1,7 +1,8 @@ +import { playgroundLink } from '@sopt/constant'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { FC, useMemo } from 'react'; +import type { FC } from 'react'; +import { useMemo } from 'react'; import { editFeed } from '@/api/endpoint/feed/editFeed'; import { getPost, useGetPostQuery } from '@/api/endpoint/feed/getPost'; @@ -14,7 +15,7 @@ import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import { getParentCategoryIdById } from '@/components/feed/common/utils'; import EditImpossibleModal from '@/components/feed/edit/EditImpossibleModal'; import FeedUploadPage, { LoadingWrapper } from '@/components/feed/page/FeedUploadPage'; -import { FeedDataType } from '@/components/feed/upload/types'; +import type { FeedDataType } from '@/components/feed/upload/types'; import useStringRouterQuery from '@/hooks/useStringRouterQuery'; import { setLayout } from '@/utils/layout'; diff --git a/apps/playground/src/pages/feed/upload.tsx b/apps/playground/src/pages/feed/upload.tsx index 085b52b7b..11f9aba27 100644 --- a/apps/playground/src/pages/feed/upload.tsx +++ b/apps/playground/src/pages/feed/upload.tsx @@ -1,7 +1,7 @@ +import { playgroundLink } from '@sopt/constant'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { FC } from 'react'; +import type { FC } from 'react'; import { getCategory } from '@/api/endpoint/feed/getCategory'; import { useGetPostsInfiniteQuery } from '@/api/endpoint/feed/getPosts'; @@ -11,7 +11,7 @@ import AuthRequired from '@/components/auth/AuthRequired'; import Loading from '@/components/common/Loading'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import FeedUploadPage, { LoadingWrapper } from '@/components/feed/page/FeedUploadPage'; -import { PostedFeedDataType } from '@/components/feed/upload/types'; +import type { PostedFeedDataType } from '@/components/feed/upload/types'; import { setLayout } from '@/utils/layout'; const FeedUpload: FC = () => { @@ -54,6 +54,7 @@ const FeedUpload: FC = () => { category, isBlindWriter: data.isBlindWriter, vote: !!data.vote, + /* eslint-disable-next-line no-useless-escape -- [ and ] must be escaped for literal match */ mention: /@([^\[\]\s@]+)\[(\d+)\]/.test(data.content), }); queryClient.invalidateQueries({ diff --git a/apps/playground/src/pages/intro/index.tsx b/apps/playground/src/pages/intro/index.tsx index 2f36f0fe6..7d2e2bdfb 100644 --- a/apps/playground/src/pages/intro/index.tsx +++ b/apps/playground/src/pages/intro/index.tsx @@ -1,5 +1,6 @@ import { useRouter } from 'next/router'; -import { FC, useEffect } from 'react'; +import type { FC } from 'react'; +import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { accessTokenAtom } from '@/components/auth/states/accessTokenAtom'; @@ -8,7 +9,7 @@ import { playgroundLink } from '@/constants/links'; interface IntroPageProps {} -const IntroPage: FC = ({}) => { +const IntroPage: FC = () => { const router = useRouter(); const accessToken = useRecoilValue(accessTokenAtom); diff --git a/apps/playground/src/pages/lucky/index.tsx b/apps/playground/src/pages/lucky/index.tsx index 90dd8adb1..97c811384 100644 --- a/apps/playground/src/pages/lucky/index.tsx +++ b/apps/playground/src/pages/lucky/index.tsx @@ -1,8 +1,10 @@ +import { playgroundLink } from '@sopt/constant'; +import { useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; import { useEffect, useState } from 'react'; import { useGetLuckyPick } from '@/api/endpoint/resolution/getLuckyPick'; +import { useGetResolution } from '@/api/endpoint/resolution/getResolution'; import { useGetMemberProfileOfMe } from '@/api/endpoint_LEGACY/hooks'; import AuthRequired from '@/components/auth/AuthRequired'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; @@ -11,8 +13,6 @@ import LuckyReady from '@/components/luckydraw/LuckyReady'; import LuckyResult from '@/components/luckydraw/LuckyResult'; import LuckyWinnerGuide from '@/components/luckydraw/LuckyWinnerGuide'; import { setLayout } from '@/utils/layout'; -import { useQueryClient } from '@tanstack/react-query'; -import { useGetResolution } from '@/api/endpoint/resolution/getResolution'; type Step = 'ready' | 'loading' | 'result' | 'winnerGuide'; diff --git a/apps/playground/src/pages/makers/index.tsx b/apps/playground/src/pages/makers/index.tsx index 523172224..b7d7f7b1d 100644 --- a/apps/playground/src/pages/makers/index.tsx +++ b/apps/playground/src/pages/makers/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { GetStaticProps } from 'next'; -import { FC } from 'react'; +import type { GetStaticProps } from 'next'; +import type { FC } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; import { getMakersProfile } from '@/api/endpoint/makers/getMakersProfile'; diff --git a/apps/playground/src/pages/members/[id].tsx b/apps/playground/src/pages/members/[id].tsx index 8d2da2c45..0e44f0289 100644 --- a/apps/playground/src/pages/members/[id].tsx +++ b/apps/playground/src/pages/members/[id].tsx @@ -1,6 +1,6 @@ import Head from 'next/head'; import { NextSeo } from 'next-seo'; -import { FC } from 'react'; +import type { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; import MemberDetail from '@/components/members/detail/ActivitySection/MemberDetail'; diff --git a/apps/playground/src/pages/members/ask/answer/[id].tsx b/apps/playground/src/pages/members/ask/answer/[id].tsx index eee1c16a8..c8f57c462 100644 --- a/apps/playground/src/pages/members/ask/answer/[id].tsx +++ b/apps/playground/src/pages/members/ask/answer/[id].tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { useToast } from '@sopt-makers/ui'; import Link from 'next/link'; -import { FC, useEffect, useMemo, useState } from 'react'; +import type { FC } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import type { MemberQuestion } from '@/api/endpoint/members/getMemberQuestions'; import { usePostMemberQuestionAnswer } from '@/api/endpoint/members/postMemberAnswer'; diff --git a/apps/playground/src/pages/members/ask/answer/edit/[id].tsx b/apps/playground/src/pages/members/ask/answer/edit/[id].tsx index 93db250f0..a4ff181e1 100644 --- a/apps/playground/src/pages/members/ask/answer/edit/[id].tsx +++ b/apps/playground/src/pages/members/ask/answer/edit/[id].tsx @@ -1,21 +1,22 @@ -import { FC, useEffect, useMemo, useState, useCallback } from 'react'; -import { useRouter } from 'next/router'; - -import AuthRequired from '@/components/auth/AuthRequired'; -import AskFormPage from '@/components/members/ask/AskFormPage'; -import type { MemberQuestion } from '@/api/endpoint/members/getMemberQuestions'; -import useStringRouterQuery from '@/hooks/useStringRouterQuery'; -import { getRelativeTime } from '@/components/feed/common/utils'; -import { setLayout } from '@/utils/layout'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; +import { useDialog, useToast } from '@sopt-makers/ui'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import type { FC } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; + +import type { MemberQuestion } from '@/api/endpoint/members/getMemberQuestions'; +import { usePutMemberAnswer } from '@/api/endpoint/members/putMemberAnswer'; +import AuthRequired from '@/components/auth/AuthRequired'; import ResizedImage from '@/components/common/ResizedImage'; import { IconMember } from '@/components/feed/common/Icon'; -import Link from 'next/link'; +import { getRelativeTime } from '@/components/feed/common/utils'; +import AskFormPage from '@/components/members/ask/AskFormPage'; import { playgroundLink } from '@/constants/links'; -import { usePutMemberAnswer } from '@/api/endpoint/members/putMemberAnswer'; -import { useDialog, useToast } from '@sopt-makers/ui'; +import useStringRouterQuery from '@/hooks/useStringRouterQuery'; +import { setLayout } from '@/utils/layout'; const STORAGE_PREFIX = 'ask-answer-edit-'; diff --git a/apps/playground/src/pages/members/ask/edit/[id].tsx b/apps/playground/src/pages/members/ask/edit/[id].tsx index ae4976e6c..2fd876800 100644 --- a/apps/playground/src/pages/members/ask/edit/[id].tsx +++ b/apps/playground/src/pages/members/ask/edit/[id].tsx @@ -1,12 +1,13 @@ -import { FC, useEffect, useMemo, useState } from 'react'; +import { useDialog } from '@sopt-makers/ui'; import { useRouter } from 'next/router'; +import type { FC } from 'react'; +import { useEffect, useMemo, useState } from 'react'; +import { usePutMemberQuestion } from '@/api/endpoint/members/putMemberQuestion'; import AuthRequired from '@/components/auth/AuthRequired'; import AskFormPage from '@/components/members/ask/AskFormPage'; import useStringRouterQuery from '@/hooks/useStringRouterQuery'; import { setLayout } from '@/utils/layout'; -import { usePutMemberQuestion } from '@/api/endpoint/members/putMemberQuestion'; -import { useDialog } from '@sopt-makers/ui'; type AskDraft = { content: string; isAnonymous: boolean; receiverId: number }; diff --git a/apps/playground/src/pages/members/ask/upload.tsx b/apps/playground/src/pages/members/ask/upload.tsx index 72f4882ef..92439902e 100644 --- a/apps/playground/src/pages/members/ask/upload.tsx +++ b/apps/playground/src/pages/members/ask/upload.tsx @@ -1,6 +1,7 @@ import { useDialog } from '@sopt-makers/ui'; import { useRouter } from 'next/router'; -import { FC, useMemo } from 'react'; +import type { FC } from 'react'; +import { useMemo } from 'react'; import { usePostMemberAsk } from '@/api/endpoint/members/postMemberQuestion'; import AuthRequired from '@/components/auth/AuthRequired'; diff --git a/apps/playground/src/pages/members/checkSoptActivity.tsx b/apps/playground/src/pages/members/checkSoptActivity.tsx index 4a8ee2051..6675b3dcb 100644 --- a/apps/playground/src/pages/members/checkSoptActivity.tsx +++ b/apps/playground/src/pages/members/checkSoptActivity.tsx @@ -1,7 +1,8 @@ +import styled from '@emotion/styled'; + import AuthRequired from '@/components/auth/AuthRequired'; import CheckSoptActivity from '@/components/members/upload/CheckActivity/CheckSoptActivity'; import { setLayout } from '@/utils/layout'; -import styled from '@emotion/styled'; export default function CheckSoptActivityPage() { return ( diff --git a/apps/playground/src/pages/members/complete.tsx b/apps/playground/src/pages/members/complete.tsx index 658428c8c..aeacf6415 100644 --- a/apps/playground/src/pages/members/complete.tsx +++ b/apps/playground/src/pages/members/complete.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; +import { playgroundLink } from '@sopt/constant'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; import { Button } from '@sopt-makers/ui'; import { useRouter } from 'next/router'; -import { playgroundLink } from '@sopt/ui'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import { useGetMemberProfileOfMe } from '@/api/endpoint_LEGACY/hooks'; diff --git a/apps/playground/src/pages/members/edit.tsx b/apps/playground/src/pages/members/edit.tsx index 64f4bfd04..cb608818c 100644 --- a/apps/playground/src/pages/members/edit.tsx +++ b/apps/playground/src/pages/members/edit.tsx @@ -5,7 +5,7 @@ import { FormProvider, useForm } from 'react-hook-form'; import { usePutMemberProfileMutation } from '@/api/endpoint/members/putMemberProfile'; import { useGetMemberProfileOfMe } from '@/api/endpoint_LEGACY/hooks'; -import { ProfileRequest } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileRequest } from '@/api/endpoint_LEGACY/members/type'; import AuthRequired from '@/components/auth/AuthRequired'; import useLastUnauthorized from '@/components/auth/util/useLastUnauthorized'; import useToast from '@/components/common/Toast/useToast'; @@ -30,7 +30,7 @@ import CareerFormSection from '@/components/members/upload/FormSection/Career'; import SoptActivityFormSection from '@/components/members/upload/FormSection/SoptActivity'; import TmiFormSection from '@/components/members/upload/FormSection/Tmi'; import { memberFormSchema } from '@/components/members/upload/schema'; -import { MemberUploadForm, SoptActivity } from '@/components/members/upload/types'; +import type { MemberUploadForm, SoptActivity } from '@/components/members/upload/types'; import { playgroundLink } from '@/constants/links'; import { setLayout } from '@/utils/layout'; @@ -64,7 +64,9 @@ export default function MemberEditPage() { } if (!isDirty) { - me && router.push(playgroundLink.memberDetail(me.id.toString())); + if (me) { + router.push(playgroundLink.memberDetail(me.id.toString())); + } return; } diff --git a/apps/playground/src/pages/members/index.tsx b/apps/playground/src/pages/members/index.tsx index 8bd255c1f..0ec01e427 100644 --- a/apps/playground/src/pages/members/index.tsx +++ b/apps/playground/src/pages/members/index.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; import AuthRequired from '@/components/auth/AuthRequired'; diff --git a/apps/playground/src/pages/members/team-leaders.tsx b/apps/playground/src/pages/members/team-leaders.tsx index b4031e4f3..95cf23a47 100644 --- a/apps/playground/src/pages/members/team-leaders.tsx +++ b/apps/playground/src/pages/members/team-leaders.tsx @@ -12,8 +12,8 @@ import TeamLeaderCard from '@/components/members/main/TeamLeaderCard'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { setLayout } from '@/utils/layout'; type SelectedPart = 'APP' | 'WEB'; -import { useGetTLMember } from '@/api/endpoint/members/getTeamLeaderMember'; import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe'; +import { useGetTLMember } from '@/api/endpoint/members/getTeamLeaderMember'; const cardComponentWidth = 316; const TeamLeadersPage = () => { diff --git a/apps/playground/src/pages/members/upload.tsx b/apps/playground/src/pages/members/upload.tsx index 8af214143..be8ab3ff3 100644 --- a/apps/playground/src/pages/members/upload.tsx +++ b/apps/playground/src/pages/members/upload.tsx @@ -6,7 +6,7 @@ import { FormProvider, useForm } from 'react-hook-form'; import { useGetMemberProfileOfMe } from '@/api/endpoint_LEGACY/hooks'; import { postMemberProfile } from '@/api/endpoint_LEGACY/members'; -import { ProfileRequest } from '@/api/endpoint_LEGACY/members/type'; +import type { ProfileRequest } from '@/api/endpoint_LEGACY/members/type'; import AuthRequired from '@/components/auth/AuthRequired'; import useLastUnauthorized from '@/components/auth/util/useLastUnauthorized'; import { MEMBER_DEFAULT_VALUES, UNSELECTED } from '@/components/members/upload/constants'; @@ -18,7 +18,7 @@ import CareerFormSection from '@/components/members/upload/FormSection/Career'; import SoptActivityFormSection from '@/components/members/upload/FormSection/SoptActivity'; import TmiFormSection from '@/components/members/upload/FormSection/Tmi'; import { memberFormSchema } from '@/components/members/upload/schema'; -import { MemberUploadForm, SoptActivity } from '@/components/members/upload/types'; +import type { MemberUploadForm, SoptActivity } from '@/components/members/upload/types'; import { setLayout } from '@/utils/layout'; export default function MemberUploadPage() { diff --git a/apps/playground/src/pages/policy/person.tsx b/apps/playground/src/pages/policy/person.tsx index e7d135000..16cbfe6a4 100644 --- a/apps/playground/src/pages/policy/person.tsx +++ b/apps/playground/src/pages/policy/person.tsx @@ -1,5 +1,7 @@ +/* eslint-disable no-irregular-whitespace -- whitespace is intentionally used for markdown formatting */ + import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import ReactMarkdown from 'react-markdown'; import { setLayout } from '@/utils/layout'; diff --git a/apps/playground/src/pages/projects/[id].tsx b/apps/playground/src/pages/projects/[id].tsx index 24e1f85fd..83b7c9710 100644 --- a/apps/playground/src/pages/projects/[id].tsx +++ b/apps/playground/src/pages/projects/[id].tsx @@ -1,5 +1,5 @@ import { NextSeo } from 'next-seo'; -import { FC } from 'react'; +import type { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; import ProjectDetail from '@/components/projects/main/ProjectDetail'; diff --git a/apps/playground/src/pages/projects/edit/[id].tsx b/apps/playground/src/pages/projects/edit/[id].tsx index fc337bd92..8d92b5c5a 100644 --- a/apps/playground/src/pages/projects/edit/[id].tsx +++ b/apps/playground/src/pages/projects/edit/[id].tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import type { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; import ProjectEdit from '@/components/projects/edit/ProjectEdit'; diff --git a/apps/playground/src/pages/projects/index.tsx b/apps/playground/src/pages/projects/index.tsx index de6aab624..a694b41ed 100644 --- a/apps/playground/src/pages/projects/index.tsx +++ b/apps/playground/src/pages/projects/index.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import type { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; import ProjectList from '@/components/projects/main/ProjectList'; diff --git a/apps/playground/src/pages/projects/upload/index.tsx b/apps/playground/src/pages/projects/upload/index.tsx index 43ddb2880..6df3aba5e 100644 --- a/apps/playground/src/pages/projects/upload/index.tsx +++ b/apps/playground/src/pages/projects/upload/index.tsx @@ -8,7 +8,7 @@ import useConfirm from '@/components/common/Modal/useConfirm'; import useSlideUp from '@/components/common/SlideUp/useToast'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import ProjectForm from '@/components/projects/upload/form/ProjectForm'; -import { ProjectFormType } from '@/components/projects/upload/form/schema'; +import type { ProjectFormType } from '@/components/projects/upload/form/schema'; import useCreateProjectMutation from '@/components/projects/upload/hooks/useCreateProjectMutation'; import { getProjectListQueryKey } from '@/components/projects/upload/hooks/useGetProjectListQuery'; import { convertToProjectData } from '@/components/projects/utils'; diff --git a/apps/playground/src/pages/remember/index.tsx b/apps/playground/src/pages/remember/index.tsx index 971067eb7..5cf66f2ce 100644 --- a/apps/playground/src/pages/remember/index.tsx +++ b/apps/playground/src/pages/remember/index.tsx @@ -1,6 +1,6 @@ 'use client'; import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; import RememberPage from '@/components/remember'; diff --git a/apps/playground/src/pages/soulmate/index.tsx b/apps/playground/src/pages/soulmate/index.tsx index e5042212c..b7cdc28b3 100644 --- a/apps/playground/src/pages/soulmate/index.tsx +++ b/apps/playground/src/pages/soulmate/index.tsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; -import { FC } from 'react'; +import type { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; interface SoulmatePageProps {} -const SoulmatePage: FC = ({}) => { +const SoulmatePage: FC = () => { return ( Soulmate diff --git a/apps/playground/src/styles/global.ts b/apps/playground/src/styles/global.ts index b12c88928..8080d956c 100644 --- a/apps/playground/src/styles/global.ts +++ b/apps/playground/src/styles/global.ts @@ -1,9 +1,9 @@ import '@sopt-makers/ui/dist/index.css'; -import { desktopVariables, mobileVariables } from '@sopt-makers/ui'; import { css } from '@emotion/react'; import { colors } from '@sopt-makers/colors'; import { fontBase } from '@sopt-makers/fonts'; +import { desktopVariables, mobileVariables } from '@sopt-makers/ui'; import font from '@/styles/font'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; diff --git a/apps/playground/src/styles/spacing.ts b/apps/playground/src/styles/spacing.ts index a7e807e53..76277d77a 100644 --- a/apps/playground/src/styles/spacing.ts +++ b/apps/playground/src/styles/spacing.ts @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; -import { buildCSSWithLength, CSSValueWithLength } from '@/utils'; +import type { CSSValueWithLength } from '@/utils'; +import { buildCSSWithLength } from '@/utils'; export interface SpaceProps { m?: CSSValueWithLength; diff --git a/apps/playground/src/styles/typography.ts b/apps/playground/src/styles/typography.ts index 90a9e0ca3..3497b9ac5 100644 --- a/apps/playground/src/styles/typography.ts +++ b/apps/playground/src/styles/typography.ts @@ -1,4 +1,5 @@ -import { css, SerializedStyles } from '@emotion/react'; +import type { SerializedStyles } from '@emotion/react'; +import { css } from '@emotion/react'; export const baseTextStyles = css` letter-spacing: -0.005em; diff --git a/apps/playground/src/utils/layout.tsx b/apps/playground/src/utils/layout.tsx index 0ee5d82e9..5df7683db 100644 --- a/apps/playground/src/utils/layout.tsx +++ b/apps/playground/src/utils/layout.tsx @@ -1,5 +1,5 @@ -import { NextPage } from 'next'; -import { FC, ReactNode } from 'react'; +import type { NextPage } from 'next'; +import type { FC, ReactNode } from 'react'; import { preDefinedLayouts } from '@/components/layout'; diff --git a/apps/playground/src/utils/parseTextToLink.tsx b/apps/playground/src/utils/parseTextToLink.tsx index a4ec3ed93..c7e0032e5 100644 --- a/apps/playground/src/utils/parseTextToLink.tsx +++ b/apps/playground/src/utils/parseTextToLink.tsx @@ -1,7 +1,7 @@ export const parseTextToLink = (content: string | React.ReactNode) => { if (typeof content !== 'string') return content; - const urlRegex = /(https?:\/\/[^\s\]\)]+)|(www\.[^\s\]\)]+)/g; + const urlRegex = /(https?:\/\/[^\s\])]+)|(www\.[^\s\])]+)/g; const fragmentList = content.split(urlRegex); return fragmentList.map((fragment, index) => { if (urlRegex.test(fragment)) { diff --git a/package.json b/package.json index 1025ea6bc..8383c8dab 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,15 @@ "build": "turbo run build", "build:crew": "turbo run build --filter=crew", "build:playground": "turbo run build --filter=playground", - "check": "turbo typecheck stylelint test:ci", + "typecheck": "turbo run typecheck", + "stylelint": "turbo run stylelint", + "test:ci": "turbo run test:ci", "clean": "turbo clean", "dev": "turbo run dev", "dev:crew": "turbo run dev --filter=crew", "dev:playground": "turbo run dev --filter=playground", - "format": "turbo format", - "lint": "turbo lint", + "format": "turbo run format", + "lint": "turbo run lint", "lint:fix": "turbo lint -- --fix", "sort": "yarn dlx sort-package-json '{apps,packages}/*/package.json' package.json", "update-mds": "yarn up @sopt-makers/colors@latest @sopt-makers/fonts@latest @sopt-makers/playground-common@latest @sopt-makers/ui@latest @sopt-makers/icons@latest" @@ -42,11 +44,11 @@ "zod": "^3.20.6" }, "devDependencies": { - "@sopt-makers/eslint-config": "workspace:*", "@types/node": "18.8.3", "@types/react": "18.0.21", "@types/react-dom": "18.0.6", "lint-staged": "^15.0.0", + "playwright": "^1.58.2", "prettier": "^3.8.1", "storybook": "^7.6.20", "turbo": "^1.12.0", diff --git a/packages/constant/package.json b/packages/constant/package.json new file mode 100644 index 000000000..d652bbe63 --- /dev/null +++ b/packages/constant/package.json @@ -0,0 +1,10 @@ +{ + "name": "@sopt/constant", + "version": "1.0.0", + "private": true, + "main": "./src/index.ts", + "types": "./src/index.ts", + "exports": { + ".": "./src/index.ts" + } +} diff --git a/packages/constant/src/index.ts b/packages/constant/src/index.ts new file mode 100644 index 000000000..cf8dff04b --- /dev/null +++ b/packages/constant/src/index.ts @@ -0,0 +1 @@ +export { playgroundLink, crewLink, MAKERS_TEAM_URL } from './links'; diff --git a/packages/constant/src/links.ts b/packages/constant/src/links.ts new file mode 100644 index 000000000..5f8731132 --- /dev/null +++ b/packages/constant/src/links.ts @@ -0,0 +1,45 @@ +export const MAKERS_TEAM_URL = + 'https://makers.sopt.org/?utm_source=playground&utm_medium=footer&utm_campaign=recruiting&utm_id=3rd_makers'; + +export const playgroundLink = { + memberList: () => `/members`, + teamLeaderList: () => `/members/team-leaders`, + memberDetail: (id: string | number) => `/members/${id}`, + memberUpload: () => `/members/upload`, + memberEdit: () => '/members/edit', + memberCheckSoptActivity: () => '/members/checkSoptActivity', + projectList: () => `/projects`, + projectDetail: (id: string | number) => `/projects/${id}`, + projectUpload: () => `/projects/upload`, + projectEdit: (id: string | number) => `/projects/edit/${id}`, + groupList: () => '/group', + groupDetail: (id: string | number) => `/group/detail?id=${id}`, + intro: () => `/intro`, + login: () => `/accounts`, + register: () => `/accounts/sign-up/auth`, + resetLogin: () => `/auth/reset`, + reconnectSocialAuth: () => `/auth/reconnect`, + connectSocialAuth: () => `/auth/register`, + makers: () => `/makers`, + blog: () => `/blog`, + blogSuccess: () => `/blog/success`, + mentoringDetail: (id: number) => `/mentoring/${id}`, + wordchain: () => `/wordchain`, + feedList: () => `/`, + feedDetail: (id: string | number) => `/feed/${id}`, + feedUpload: () => `/feed/upload`, + feedEdit: (id: string | number) => `/feed/edit/${id}`, + remember: () => `/remember`, + coffeechatUpload: () => `/coffeechat/upload`, + coffeechatEdit: (id: string | number) => `/coffeechat/edit/${id}`, + coffeechat: () => `/coffeechat`, + coffeechatDetail: (id: string | number) => `/coffeechat/${id}`, + mySoptReport: () => `/mySoptReport`, + accounts: () => `/accounts`, +}; + +export const crewLink = { + crewHome: () => `/group`, + feedDetail: (id: string | number) => `/group/post?id=${id}`, + groupDetail: (id: string | number) => `/group/detail?id=${id}`, +}; diff --git a/packages/constant/tsconfig.json b/packages/constant/tsconfig.json new file mode 100644 index 000000000..588034b6b --- /dev/null +++ b/packages/constant/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ESNext", + "jsx": "react-jsx", + "lib": ["dom", "dom.iterable", "esnext"], + "strict": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "baseUrl": ".", + "types": ["node"] + }, + "include": ["src/**/*"] +} diff --git a/packages/eslint-config/base.js b/packages/eslint-config/base.js index 2dc73d4b7..003aa6dd6 100644 --- a/packages/eslint-config/base.js +++ b/packages/eslint-config/base.js @@ -14,8 +14,8 @@ module.exports = { plugins: ['@typescript-eslint', 'simple-import-sort'], extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], rules: { - // TypeScript 'no-unused-vars': 'off', + // TypeScript '@typescript-eslint/no-unused-vars': [ 'warn', { @@ -24,6 +24,8 @@ module.exports = { caughtErrors: 'all', }, ], + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-empty-interface': 'off', '@typescript-eslint/no-empty-object-type': 'off', '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/consistent-type-imports': 'error', diff --git a/packages/ui/.npmignore b/packages/ui/.npmignore deleted file mode 100644 index 917c7e764..000000000 --- a/packages/ui/.npmignore +++ /dev/null @@ -1,4 +0,0 @@ -export.ts -tsconfig.json -tsup.config.ts -.gitignore diff --git a/packages/ui/export.ts b/packages/ui/export.ts deleted file mode 100644 index eb75f3181..000000000 --- a/packages/ui/export.ts +++ /dev/null @@ -1,5 +0,0 @@ -// export { default as WelcomeBanner } from '@/components/common/Banner/WelcomeBanner'; -export { default as DesktopHeader } from '@/components/common/Header/desktop/DesktopHeader'; -export { default as MobileHeader } from '@/components/common/Header/mobile/MobileHeader'; -export type { LinkRenderer, PathMatcher } from '@/components/common/Header/types'; -export { playgroundLink } from '@/constants/links'; diff --git a/packages/ui/package.json b/packages/ui/package.json index 2b1d646a7..f35a884aa 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -2,24 +2,25 @@ "name": "@sopt/ui", "version": "1.7.3", "private": true, - "main": "./dist/index.js", - "types": "./dist/index.d.ts", - "scripts": { - "build": "tsup", - "dev": "tsup --watch" + "main": "./src/index.ts", + "types": "./src/index.ts", + "exports": { + ".": "./src/index.ts" }, "dependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", + "@radix-ui/react-dialog": "^1.0.2", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@sopt-makers/colors": "^3.0.3", "@sopt-makers/fonts": "^2.0.2", - "framer-motion": "^8.1.3" + "@sopt/constant": "workspace:*" }, "devDependencies": { - "tsup": "^7.1.0", "typescript": "^4.9.5" }, "peerDependencies": { + "next": ">=13.0.0", "react": ">=16.8.0", "react-dom": ">=16.8.0" } diff --git a/packages/ui/src/components/Header/desktop/DesktopHeader.tsx b/packages/ui/src/components/Header/desktop/DesktopHeader.tsx new file mode 100644 index 000000000..781bd9dac --- /dev/null +++ b/packages/ui/src/components/Header/desktop/DesktopHeader.tsx @@ -0,0 +1,132 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import { FC } from 'react'; + +import ProfileButton from './ProfileButton'; +import ProfileDropdown from './ProfileDropdown'; +import { SOPT_MAKRES_LOGO_SVG } from '../imageData'; +import { LinkRenderer, PathMatcher } from '../types'; +import { playgroundLink } from '@sopt/constant'; +import { textStyles } from '../../../styles/typography'; + +interface DesktopHeaderProps { + user: { + id: string; + name: string; + image?: string; + } | null; + + onLogout?: () => void; + renderLink: LinkRenderer; + activePathMatcher: PathMatcher; +} + +const DesktopHeader: FC = ({ user, onLogout, renderLink, activePathMatcher }) => { + return ( + + + {renderLink({ + href: playgroundLink.feedList(), + children: , + })} + + + {renderLink({ + href: playgroundLink.memberList(), + children: 멤버, + })} + {renderLink({ + href: playgroundLink.projectList(), + children: 프로젝트, + })} + {renderLink({ + href: playgroundLink.groupList(), + children: 모임, + })} + {renderLink({ + href: playgroundLink.coffeechat(), + children: 커피솝, + })} + | + {renderLink({ + href: playgroundLink.blog(), + children: 활동후기 업로드, + })} + + + + + {user ? : } + + + + + ); +}; + +export default DesktopHeader; + +const Container = styled.header` + display: flex; + border-bottom: 1px solid ${colors.gray800}; + background-color: ${colors.gray950}; + height: 80px; + color: ${colors.gray10}; +`; + +const StyledBrandLink = styled.div` + margin: 0 36px; + + & > * { + display: flex; + align-items: center; + height: 100%; + } + + & > a > svg { + width: 120px; + } +`; + +const NavArea = styled.nav` + display: flex; + flex-grow: 1; + + * > & { + height: 100%; + } +`; + +const NavItem = styled.div<{ isActive: boolean }>` + display: flex; + align-items: center; + padding: 0 8px; + height: 100%; + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; + + ${(props) => + props.isActive + ? css` + ${textStyles.SUIT_18_B} + ` + : css` + ${textStyles.SUIT_18_M} + `} +`; + +const ActionArea = styled.div` + display: flex; + align-items: center; + padding-right: 30px; +`; + +const ProfileButtonHolder = styled.div` + display: flex; + align-items: center; + margin-left: 8px; +`; diff --git a/packages/ui/src/components/Header/desktop/ProfileButton.tsx b/packages/ui/src/components/Header/desktop/ProfileButton.tsx new file mode 100644 index 000000000..e54c80382 --- /dev/null +++ b/packages/ui/src/components/Header/desktop/ProfileButton.tsx @@ -0,0 +1,59 @@ +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import { ButtonHTMLAttributes, forwardRef } from 'react'; + +import { DEFAULT_PROFILE_IMAGE_DESKTOP_SVG } from '../imageData'; +import ResizedImage from '../../ResizedImage'; +import { textStyles } from '../../../styles/typography'; + +interface ProfileButtonProps { + name: string; + profileImage?: string; +} + +const ProfileButton = forwardRef>( + ({ name, profileImage, ...props }, ref) => { + return ( + + + {profileImage ? : DEFAULT_PROFILE_IMAGE_DESKTOP_SVG} + + {name} + + ); + }, +); + +export default ProfileButton; + +const StyledProfileButton = styled.button` + display: flex; + align-items: center; + border-radius: 19px; + background-color: ${colors.gray800}; + cursor: pointer; + height: 38px; + color: ${colors.gray10}; +`; + +const ImageSlot = styled.div` + display: flex; + align-items: center; + justify-content: center; + margin-left: 3px; + border-radius: 50%; + background-color: ${colors.gray700}; + width: 32px; + height: 32px; + overflow: hidden; +`; + +const NameSlot = styled.div` + flex-grow: 1; + margin-right: 8px; + padding: 0 8px; + min-width: 60px; + text-align: center; + + ${textStyles.SUIT_14_B} +`; diff --git a/packages/ui/src/components/Header/desktop/ProfileDropdown.tsx b/packages/ui/src/components/Header/desktop/ProfileDropdown.tsx new file mode 100644 index 000000000..ca839bda1 --- /dev/null +++ b/packages/ui/src/components/Header/desktop/ProfileDropdown.tsx @@ -0,0 +1,84 @@ +import styled from '@emotion/styled'; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; +import { colors } from '@sopt-makers/colors'; +import dynamic from 'next/dynamic'; +import { FC, ReactNode, useState } from 'react'; + +import { LinkRenderer } from '../types'; +import { textStyles } from '../../../styles/typography'; +import { zIndex } from '../../../styles/zIndex'; + +const DropdownPortal = dynamic( + () => import('@radix-ui/react-dropdown-menu').then((r) => r.DropdownMenuPortal), + { + ssr: false, + }, +); + +interface ProfileDropdownProps { + children: ReactNode; + myProfileHref?: string; + onLogout?: () => void; + renderLink: LinkRenderer; +} + +const ProfileDropdown: FC = ({ children, myProfileHref = '#', onLogout, renderLink }) => { + const [open, setOpen] = useState(false); + + return ( + + {children} + + + + setOpen(false)} asChild> + {renderLink({ href: myProfileHref, children: '내 프로필' })} + + 로그아웃 + + + + + ); +}; + +export default ProfileDropdown; + +const ContentBox = styled.div` + display: flex; + flex-direction: column; + z-index: ${zIndex.헤더 + 100}; + border-radius: 14px; + box-shadow: + 0 10px 38px -10px rgb(22 23 24 / 35%), + 0 10px 20px -15px rgb(22 23 24 / 20%); + background: ${colors.gray700}; + padding: 12px 0; + min-width: 176px; + animation: slide-up-and-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1); + color: ${colors.gray10}; + + & > * { + cursor: pointer; + padding: 12px 20px; + + ${textStyles.SUIT_16_SB} + + &:focus, &:focus-visible, &:hover { + outline: none; + background-color: ${colors.gray600}; + } + } + + @keyframes slide-up-and-fade { + from { + transform: translateY(2px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } + } +`; diff --git a/packages/ui/src/components/Header/imageData.tsx b/packages/ui/src/components/Header/imageData.tsx new file mode 100644 index 000000000..83b75beab --- /dev/null +++ b/packages/ui/src/components/Header/imageData.tsx @@ -0,0 +1,153 @@ +export const SOPT_MAKRES_LOGO_SVG = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export const MENU_SVG = ( + + + + +); + +export const RIGHT_ARROW_SVG = ( + + + +); + +export const DEFAULT_PROFILE_IMAGE_DESKTOP_SVG = ( + + + + +); + +export const DEFAULT_PROFILE_IMAGE_MOBILE_SVG = ( + + + + + + + + + + + + + +); diff --git a/packages/ui/src/components/Header/mobile/MobileHeader.tsx b/packages/ui/src/components/Header/mobile/MobileHeader.tsx new file mode 100644 index 000000000..def173ba9 --- /dev/null +++ b/packages/ui/src/components/Header/mobile/MobileHeader.tsx @@ -0,0 +1,83 @@ +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import { FC } from 'react'; + +import { MENU_SVG, SOPT_MAKRES_LOGO_SVG } from '../imageData'; +import MobileSideBar from './MobileSideBar'; +import { LinkRenderer, PathMatcher } from '../types'; +import { playgroundLink } from '@sopt/constant'; + +interface MobileHeaderProps { + user: { + id: string; + name: string; + image?: string; + } | null; + + onLogout?: () => void; + renderLink: LinkRenderer; + activePathMatcher: PathMatcher; + onKakaoChat?: () => void; +} + +const MobileHeader: FC = ({ user, onLogout, renderLink, activePathMatcher, onKakaoChat }) => { + return ( + + + {MENU_SVG} + + {renderLink({ + href: playgroundLink.feedList(), + children: ( + + + + ), + })} + + + ); +}; + +export default MobileHeader; + +const Container = styled.header` + display: flex; + justify-content: space-between; + background-color: ${colors.gray950}; + padding: 12px; + height: 64px; + color: ${colors.gray10}; +`; + +const NavButton = styled.button` + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + width: 32px; +`; + +const BrandButton = styled.div` + display: flex; + align-items: center; + width: 120px; + height: 100%; + + & > svg { + width: 120px; + } +`; + +const FakeBox = styled.div` + visibility: visible; + width: 32px; +`; diff --git a/packages/ui/src/components/Header/mobile/MobileSideBar.tsx b/packages/ui/src/components/Header/mobile/MobileSideBar.tsx new file mode 100644 index 000000000..af2efffa5 --- /dev/null +++ b/packages/ui/src/components/Header/mobile/MobileSideBar.tsx @@ -0,0 +1,257 @@ +import styled from '@emotion/styled'; +import * as Dialog from '@radix-ui/react-dialog'; +import { colors } from '@sopt-makers/colors'; +import dynamic from 'next/dynamic'; +import { FC, ReactNode, useState } from 'react'; + +import { DEFAULT_PROFILE_IMAGE_MOBILE_SVG, RIGHT_ARROW_SVG } from '../imageData'; +import { LinkRenderer, PathMatcher } from '../types'; +import ResizedImage from '../../ResizedImage'; +import { MAKERS_TEAM_URL, playgroundLink } from '@sopt/constant'; +import { textStyles } from '../../../styles/typography'; + +const DialogPortal = dynamic( + () => import('@radix-ui/react-dialog').then((r) => r.DialogPortal), + { + ssr: false, + }, +); + +interface MobileSideBarProps { + children: ReactNode; + name: string; + myProfileHref?: string; + profileImage?: string; + onLogout?: () => void; + renderLink: LinkRenderer; + activePathMatcher: PathMatcher; + onKakaoChat?: () => void; +} + +const MobileSideBar: FC = ({ + children, + myProfileHref = '#', + onLogout, + name, + profileImage, + renderLink, + activePathMatcher, + onKakaoChat, +}) => { + const [open, setOpen] = useState(false); + + function close() { + setOpen(false); + } + + return ( + + {children} + + + + + + + setOpen(false)}> + {renderLink({ + href: myProfileHref, + children: ( + + + {profileImage ? ( + + ) : ( + DEFAULT_PROFILE_IMAGE_MOBILE_SVG + )} + + {name} + {RIGHT_ARROW_SVG} + + ), + })} + + + {renderLink({ + href: playgroundLink.memberList(), + children: ( + + 멤버 + + ), + })} + {renderLink({ + href: playgroundLink.projectList(), + children: ( + + 프로젝트 + + ), + })} + {renderLink({ + href: playgroundLink.groupList(), + children: ( + + 모임 + + ), + })} + {renderLink({ + href: playgroundLink.coffeechat(), + children: ( + + 커피솝 + + ), + })} + {renderLink({ + href: playgroundLink.blog(), + children: ( + + 활동후기 업로드 + + ), + })} + + {renderLink({ + href: playgroundLink.makers(), + children: ( + + 만든 사람들 + + ), + })} + + 메이커스 소개 + + 의견 제안하기 + { + onLogout?.(); + close(); + }} + > + 로그아웃 + + + + + + ); +}; + +export default MobileSideBar; + +const Overlay = styled.div` + position: fixed; + inset: 0; + background-color: rgb(0 0 0 / 70%); + animation: overlay-show 0.3s cubic-bezier(0.16, 1, 0.3, 1); + + @keyframes overlay-show { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } +`; + +const Content = styled.div` + --x-gap: 20px; + + display: flex; + position: fixed; + top: 0; + left: 0; + flex-direction: column; + z-index: 100001; + background-color: ${colors.gray800}; + width: 212px; + height: 100vh; + overflow-y: auto; + animation: content-show 0.3s cubic-bezier(0.16, 1, 0.3, 1); + color: ${colors.gray10}; + + @keyframes content-show { + from { + transform: translateX(-100%); + } + + to { + transform: translateX(0); + } + } + + @supports (height: 100dvh) { + height: 100dvh; + } +`; + +const ProfileLinkSlot = styled.div` + margin-top: 45px; + margin-bottom: 26px; +`; + +const ProfileButton = styled.div` + display: flex; + padding: 10px var(--x-gap); +`; + +const ProfileImageSlot = styled.div` + display: flex; + align-items: center; + justify-content: center; + border-radius: 14px; + background-color: ${colors.gray700}; + width: 42px; + height: 42px; + overflow: hidden; + + & > img { + object-fit: cover; + width: 100%; + } +`; + +const ProfileNameSlot = styled.div` + display: flex; + flex-grow: 1; + align-items: center; + margin-left: 12px; + line-height: 20px; + + ${textStyles.SUIT_20_B}; +`; + +const ProfileArrowSlot = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 18px; +`; + +const NavItem = styled('div')<{ + isActive?: boolean; +}>` + padding: 10px var(--x-gap); + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; + + ${textStyles.SUIT_18_M}; +`; + +const NavLinkSmall = styled.div<{ isActive?: boolean }>` + cursor: pointer; + padding: 8px var(--x-gap); + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; + + ${textStyles.SUIT_14_M}; +`; + +const Divider = styled.div` + margin: 26px var(--x-gap); + border-top: 1px solid ${colors.gray700}; + color: ${colors.gray700}; +`; diff --git a/packages/ui/src/components/Header/types.ts b/packages/ui/src/components/Header/types.ts new file mode 100644 index 000000000..434c8378c --- /dev/null +++ b/packages/ui/src/components/Header/types.ts @@ -0,0 +1,4 @@ +import { ReactElement, ReactNode } from 'react'; + +export type LinkRenderer = (data: { href: string; children: ReactNode }) => ReactElement; +export type PathMatcher = (path: string) => boolean; diff --git a/packages/ui/src/components/ResizedImage/index.tsx b/packages/ui/src/components/ResizedImage/index.tsx new file mode 100644 index 000000000..d644574c1 --- /dev/null +++ b/packages/ui/src/components/ResizedImage/index.tsx @@ -0,0 +1,94 @@ +import { FC, ComponentProps, useCallback, useRef, useState, SyntheticEvent } from 'react'; + +import useEnterScreen from '../../hooks/useEnterScreen'; + +const WAIT_TIME = 2000; + +type ImageProps = { + className?: string; + src: string; + width?: number; + height?: number; + alt?: string; + onError?: ComponentProps<'img'>['onError']; + onLoad?: () => void; +} & ({ width: number } | { height: number }); + +const ResizedImage: FC = ({ className, src, width, height, alt, onLoad, onError }) => { + const [isUsingOriginal, setIsUsingOriginal] = useState(false); + + const timeoutTokenRef = useRef>(); + + const getResizedImage = useCallback( + (scale: number) => { + if (width != null) { + return `https://wsrv.nl/?url=${encodeURIComponent(src)}&w=${width * scale}&output=webp`; + } + if (height != null) { + return `https://wsrv.nl/?url=${encodeURIComponent(src)}&h=${height * scale}&output=webp`; + } + return undefined; + }, + [height, src, width], + ); + + const cancelReplacementTimer = () => { + if (timeoutTokenRef.current !== undefined) { + clearTimeout(timeoutTokenRef.current); + } + }; + + const handleResizedLoadError = (e: SyntheticEvent) => { + setIsUsingOriginal(true); + onError?.(e); + }; + + const handleResizedLoaded = () => { + cancelReplacementTimer(); + onLoad?.(); + }; + + const { ref: imgRef } = useEnterScreen({ + onEnter: () => { + if (imgRef.current?.complete) { + return; + } + + timeoutTokenRef.current = setTimeout(() => { + if (!imgRef.current?.complete) { + setIsUsingOriginal(true); + } + }, WAIT_TIME); + }, + }); + + return ( + <> + {isUsingOriginal ? ( + {alt} + ) : ( + {alt} + )} + + ); +}; + +export default ResizedImage; diff --git a/packages/ui/src/hooks/useEnterScreen.ts b/packages/ui/src/hooks/useEnterScreen.ts new file mode 100644 index 000000000..4b52db88c --- /dev/null +++ b/packages/ui/src/hooks/useEnterScreen.ts @@ -0,0 +1,33 @@ +import { useEffect, useRef } from 'react'; + +interface UseEnterScreenVariables { + onEnter?: () => void; +} +const useEnterScreen = (variables: UseEnterScreenVariables) => { + const { onEnter } = variables; + const ref = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver(([entry]) => { + if (!entry?.isIntersecting) { + return; + } + onEnter?.(); + observer.disconnect(); + }, {}); + + if (ref.current) { + observer.observe(ref.current); + } + + return () => { + observer.disconnect(); + }; + }, [ref, onEnter]); + + return { + ref, + }; +}; + +export default useEnterScreen; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 000000000..68a75178f --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1,3 @@ +export { default as DesktopHeader } from './components/Header/desktop/DesktopHeader'; +export { default as MobileHeader } from './components/Header/mobile/MobileHeader'; +export type { LinkRenderer, PathMatcher } from './components/Header/types'; diff --git a/packages/ui/src/styles/typography.ts b/packages/ui/src/styles/typography.ts new file mode 100644 index 000000000..90a9e0ca3 --- /dev/null +++ b/packages/ui/src/styles/typography.ts @@ -0,0 +1,33 @@ +import { css, SerializedStyles } from '@emotion/react'; + +export const baseTextStyles = css` + letter-spacing: -0.005em; +`; + +/** @deprecated `@sopt-makers/fonts`의 fonts 객체를 사용해주세요. (MDS의 폰트 시스템을 사용하도록 변경되었습니다.) */ +export const textStyles = (() => { + const sizes = [10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 40, 60] as const; + const weights = [ + ['L', 300], + ['R', 400], + ['M', 500], + ['SB', 600], + ['B', 700], + ['EB', 800], + ] as const; + + type FontKey = `SUIT_${(typeof sizes)[number]}_${(typeof weights)[number][0]}`; + const entries = sizes.flatMap((size) => + weights.map(([weightName, value]) => [ + `SUIT_${size}_${weightName}` as FontKey, + css` + font-size: ${size}px; + font-weight: ${value}; + `, + ]), + ); + const textStyles: Record = Object.fromEntries(entries); + return textStyles; +})(); + +export type Typography = keyof typeof textStyles; diff --git a/packages/ui/src/styles/zIndex.ts b/packages/ui/src/styles/zIndex.ts new file mode 100644 index 000000000..88da798a9 --- /dev/null +++ b/packages/ui/src/styles/zIndex.ts @@ -0,0 +1,3 @@ +export const zIndex = { + 헤더: 100, +}; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index 028bafb7a..f99edbeb6 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -12,12 +12,8 @@ "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "baseUrl": "../../apps/playground", - "paths": { - "@/*": ["./src/*"] - }, + "baseUrl": ".", "types": ["node"] }, - "include": ["export.ts", "../../apps/playground/src/**/*"], - "exclude": ["../../apps/playground/src/**/*.test.*", "../../apps/playground/src/**/*.spec.*", "../../apps/playground/**/__tests__/**"] + "include": ["src/**/*"] } diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts deleted file mode 100644 index 229131f75..000000000 --- a/packages/ui/tsup.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { defineConfig } from 'tsup'; - -export default defineConfig({ - entry: { - index: 'export.ts', - }, - dts: true, - external: ['react', 'react-dom', 'next'], - sourcemap: true, - clean: true, - outDir: 'dist', - tsconfig: 'tsconfig.json', -}); diff --git a/skills-lock.json b/skills-lock.json new file mode 100644 index 000000000..635259382 --- /dev/null +++ b/skills-lock.json @@ -0,0 +1,10 @@ +{ + "version": 1, + "skills": { + "playwright-cli": { + "source": "microsoft/playwright-cli", + "sourceType": "github", + "computedHash": "7075ab30f588019197a2f1518bb4c9d33d69d33352af079b5f9c60303ad3886e" + } + } +} diff --git a/turbo.json b/turbo.json index 40de27828..524409f43 100644 --- a/turbo.json +++ b/turbo.json @@ -6,9 +6,11 @@ "outputs": [".next/**", "!.next/cache/**", "out/**", "dist/**"] }, "lint": { + "cache": false, "outputs": [] }, "stylelint": { + "cache": false, "outputs": [] }, "format": { @@ -16,7 +18,7 @@ "outputs": [] }, "typecheck": { - "dependsOn": ["@sopt/ui#build"], + "cache": false, "outputs": [] }, "test:ci": { diff --git a/yarn.lock b/yarn.lock index 4b8c4c8c6..a8611c821 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2808,13 +2808,6 @@ __metadata: languageName: node linkType: hard -"@floating-ui/core@npm:^0.7.3": - version: 0.7.3 - resolution: "@floating-ui/core@npm:0.7.3" - checksum: 10c0/5173066faf454f1475f465adeaab04fb195670cda019109660199587c05bf2fa74d79a50e53c1d2fed426d6a40f9698afa4d386e89485843c46a7ffba850efe1 - languageName: node - linkType: hard - "@floating-ui/core@npm:^1.7.4": version: 1.7.4 resolution: "@floating-ui/core@npm:1.7.4" @@ -2824,15 +2817,6 @@ __metadata: languageName: node linkType: hard -"@floating-ui/dom@npm:^0.5.3": - version: 0.5.4 - resolution: "@floating-ui/dom@npm:0.5.4" - dependencies: - "@floating-ui/core": "npm:^0.7.3" - checksum: 10c0/c395ec32862ef4d4a1d5c3cb3b54b462f7872a323746e0b5f7f7a31b17570a042ad1f1b134040a30bf0d6181c14867daebfac1c1bb89b42f8f000b3f9981516c - languageName: node - linkType: hard - "@floating-ui/dom@npm:^1.7.5": version: 1.7.5 resolution: "@floating-ui/dom@npm:1.7.5" @@ -2843,19 +2827,6 @@ __metadata: languageName: node linkType: hard -"@floating-ui/react-dom@npm:0.7.2": - version: 0.7.2 - resolution: "@floating-ui/react-dom@npm:0.7.2" - dependencies: - "@floating-ui/dom": "npm:^0.5.3" - use-isomorphic-layout-effect: "npm:^1.1.1" - peerDependencies: - react: ">=16.8.0" - react-dom: ">=16.8.0" - checksum: 10c0/fc0e857fdc5ebc2c56e3127581477842d659f938b15e5364ad494df357824f52667e50d97b9adc37cd45154cfbac51b30461cb19b7f1dffb86e18397150a6243 - languageName: node - linkType: hard - "@floating-ui/react-dom@npm:^2.0.0": version: 2.1.7 resolution: "@floating-ui/react-dom@npm:2.1.7" @@ -4204,19 +4175,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-arrow@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-arrow@npm:1.0.1" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-primitive": "npm:1.0.1" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/f86d13a206c1a6f9e86c6e7614fde9c22abbbefd3f1da4be04f6a24ae5cdba1cb966725d7992de151e04b60bbfcaeb2f64fe2a3f1c89302c792f0f86bc8d988f - languageName: node - linkType: hard - "@radix-ui/react-arrow@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-arrow@npm:1.0.3" @@ -4301,22 +4259,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-collection@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-collection@npm:1.0.1" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-context": "npm:1.0.0" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-slot": "npm:1.0.1" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/33fea89fd9a848a7c0edebb34396eda48812394d2efc1568251a43bfd7f8e9aa16ce9157383947f77f2dda45441de9b634cbafd0a9caa6cca8e4d872ec472a8e - languageName: node - linkType: hard - "@radix-ui/react-collection@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-collection@npm:1.0.3" @@ -4479,32 +4421,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-dialog@npm:1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-dialog@npm:1.0.2" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/primitive": "npm:1.0.0" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-context": "npm:1.0.0" - "@radix-ui/react-dismissable-layer": "npm:1.0.2" - "@radix-ui/react-focus-guards": "npm:1.0.0" - "@radix-ui/react-focus-scope": "npm:1.0.1" - "@radix-ui/react-id": "npm:1.0.0" - "@radix-ui/react-portal": "npm:1.0.1" - "@radix-ui/react-presence": "npm:1.0.0" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-slot": "npm:1.0.1" - "@radix-ui/react-use-controllable-state": "npm:1.0.0" - aria-hidden: "npm:^1.1.1" - react-remove-scroll: "npm:2.5.5" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/38bbc6de12d23a05115056786ed8c88821bd39951198f194fb3546861ca5749cd06e3edf23ebfe4a1ebbb89a1c5419c99fccb8fc152ccad1c7fdc2c3c150d3ab - languageName: node - linkType: hard - "@radix-ui/react-dialog@npm:^1.0.2, @radix-ui/react-dialog@npm:^1.0.5": version: 1.1.15 resolution: "@radix-ui/react-dialog@npm:1.1.15" @@ -4537,17 +4453,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-direction@npm:1.0.0": - version: 1.0.0 - resolution: "@radix-ui/react-direction@npm:1.0.0" - dependencies: - "@babel/runtime": "npm:^7.13.10" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/9e13eb248d37a7df8d8288dda32b4688d9341c056a31302686852e230e16ecc909843c842fe028d47de11b74948359281c04562afbe0161596749daefce67583 - languageName: node - linkType: hard - "@radix-ui/react-direction@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-direction@npm:1.0.1" @@ -4593,23 +4498,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-dismissable-layer@npm:1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-dismissable-layer@npm:1.0.2" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/primitive": "npm:1.0.0" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-use-callback-ref": "npm:1.0.0" - "@radix-ui/react-use-escape-keydown": "npm:1.0.2" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/2b56104a921a3f57723e39337e4b5b47fb43de1b195e853064d0b8c90b8c5891a4c04e2d1757590c999dbc1e4c5b34c4c282a70f0d4e19c3872078373b67588d - languageName: node - linkType: hard - "@radix-ui/react-dismissable-layer@npm:1.0.4": version: 1.0.4 resolution: "@radix-ui/react-dismissable-layer@npm:1.0.4" @@ -4657,25 +4545,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-dropdown-menu@npm:2.0.2": - version: 2.0.2 - resolution: "@radix-ui/react-dropdown-menu@npm:2.0.2" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/primitive": "npm:1.0.0" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-context": "npm:1.0.0" - "@radix-ui/react-id": "npm:1.0.0" - "@radix-ui/react-menu": "npm:2.0.2" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-use-controllable-state": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/2e4e750a76b9e7ebd3da3e2cb9bdc545d96c0a58d3032f2537fec2a62697849e902cbda16efdc1d5a71219894b72518dff54e57b079dafc1ba36837f3afe9cd3 - languageName: node - linkType: hard - "@radix-ui/react-dropdown-menu@npm:^2.0.6, @radix-ui/react-dropdown-menu@npm:^2.1.1": version: 2.1.16 resolution: "@radix-ui/react-dropdown-menu@npm:2.1.16" @@ -4755,21 +4624,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-focus-scope@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-focus-scope@npm:1.0.1" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-use-callback-ref": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/9a6d9289870a3f408be7a2e8bca0d2f5279127a1558bdd391bf2b772426b5be7d1f3b3099378f18c078811da78e1647d7c387dcd48933a94b4b1055b1e69cfa0 - languageName: node - linkType: hard - "@radix-ui/react-focus-scope@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-focus-scope@npm:1.0.3" @@ -4856,36 +4710,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-menu@npm:2.0.2": - version: 2.0.2 - resolution: "@radix-ui/react-menu@npm:2.0.2" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/primitive": "npm:1.0.0" - "@radix-ui/react-collection": "npm:1.0.1" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-context": "npm:1.0.0" - "@radix-ui/react-direction": "npm:1.0.0" - "@radix-ui/react-dismissable-layer": "npm:1.0.2" - "@radix-ui/react-focus-guards": "npm:1.0.0" - "@radix-ui/react-focus-scope": "npm:1.0.1" - "@radix-ui/react-id": "npm:1.0.0" - "@radix-ui/react-popper": "npm:1.1.0" - "@radix-ui/react-portal": "npm:1.0.1" - "@radix-ui/react-presence": "npm:1.0.0" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-roving-focus": "npm:1.0.2" - "@radix-ui/react-slot": "npm:1.0.1" - "@radix-ui/react-use-callback-ref": "npm:1.0.0" - aria-hidden: "npm:^1.1.1" - react-remove-scroll: "npm:2.5.5" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/5b290d0ca1dd3e4d7ceb4e714e496bf28fe27f1caaa56f3d695d26a9d5f368bc57d00213253ca1cecceb73b596370aa205bb74e5c2e94d19249e9e6cb8d3f4c5 - languageName: node - linkType: hard - "@radix-ui/react-menu@npm:2.1.16": version: 2.1.16 resolution: "@radix-ui/react-menu@npm:2.1.16" @@ -4922,28 +4746,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-popper@npm:1.1.0": - version: 1.1.0 - resolution: "@radix-ui/react-popper@npm:1.1.0" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@floating-ui/react-dom": "npm:0.7.2" - "@radix-ui/react-arrow": "npm:1.0.1" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-context": "npm:1.0.0" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-use-callback-ref": "npm:1.0.0" - "@radix-ui/react-use-layout-effect": "npm:1.0.0" - "@radix-ui/react-use-rect": "npm:1.0.0" - "@radix-ui/react-use-size": "npm:1.0.0" - "@radix-ui/rect": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/5615c08870ee25e5be1bd92e6548d96d2ab0c8b9b3c5088f533f58844c2d32d5c22cb47f87cbee2236cfd643ff2762a5d29446e592c4b82a62bc63fcaaa1b9ea - languageName: node - linkType: hard - "@radix-ui/react-popper@npm:1.1.2": version: 1.1.2 resolution: "@radix-ui/react-popper@npm:1.1.2" @@ -5014,19 +4816,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-portal@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-portal@npm:1.0.1" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-primitive": "npm:1.0.1" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/7b846786817623cbba7f6460f7516246f8f080b34c1805bba1a1ed79d5a01c8cee854dee5c0287c19180d46d2399f1384ab01b278ae37374c028cd13d1961b3a - languageName: node - linkType: hard - "@radix-ui/react-portal@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-portal@npm:1.0.3" @@ -5134,19 +4923,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-primitive@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-primitive@npm:1.0.1" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-slot": "npm:1.0.1" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/b0fbf329849b3db03cf87f04c8ad44b927264bba6c3ea943a694662c4f0a2dc29a637c6e1e3b91fdfe0f95d743d3eca92ce99a23333b2c993b9013ec45ad8680 - languageName: node - linkType: hard - "@radix-ui/react-primitive@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-primitive@npm:1.0.3" @@ -5225,27 +5001,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-roving-focus@npm:1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-roving-focus@npm:1.0.2" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/primitive": "npm:1.0.0" - "@radix-ui/react-collection": "npm:1.0.1" - "@radix-ui/react-compose-refs": "npm:1.0.0" - "@radix-ui/react-context": "npm:1.0.0" - "@radix-ui/react-direction": "npm:1.0.0" - "@radix-ui/react-id": "npm:1.0.0" - "@radix-ui/react-primitive": "npm:1.0.1" - "@radix-ui/react-use-callback-ref": "npm:1.0.0" - "@radix-ui/react-use-controllable-state": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/ef272ec755909b29274cb7c1c963345c0aaaa4c882b6944ac1a444bef4ed3d79bd7077d71aa6c7555f48d2a1f81635f5eac48ff348fccceed8794afebf7f6809 - languageName: node - linkType: hard - "@radix-ui/react-roving-focus@npm:1.1.11": version: 1.1.11 resolution: "@radix-ui/react-roving-focus@npm:1.1.11" @@ -5371,18 +5126,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-slot@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-slot@npm:1.0.1" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-compose-refs": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/5d6c3fe567dec7ac55a581e1fe6a5a5a4bdde32cf17bf022ebe3f96bae3b274ba02ddaa1028ba8413ab4088bd1fca23479de8739cf42eea73e5ce02ee3e8bb70 - languageName: node - linkType: hard - "@radix-ui/react-slot@npm:1.0.2": version: 1.0.2 resolution: "@radix-ui/react-slot@npm:1.0.2" @@ -5691,18 +5434,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-use-escape-keydown@npm:1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.2" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-use-callback-ref": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/0bdecc9f19cba2d491eca7eac0adad8bac687b37d5886618801b2ed3dc831623a6437f3771aa0797b32fa909ca3a2ca5be1176ac23147bc5fe68533115dc5c13 - languageName: node - linkType: hard - "@radix-ui/react-use-escape-keydown@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3" @@ -5801,18 +5532,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-use-rect@npm:1.0.0": - version: 1.0.0 - resolution: "@radix-ui/react-use-rect@npm:1.0.0" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/rect": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/56e2322e7b4564301324f2e6f37dd9862a5a43bf79484eb4d0b95b66aa539f03fa24dc31549711d5f2fafe9821a5a93f4e76254eaf34bc6b81d25d024a9a3cbb - languageName: node - linkType: hard - "@radix-ui/react-use-rect@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-rect@npm:1.0.1" @@ -5844,18 +5563,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-use-size@npm:1.0.0": - version: 1.0.0 - resolution: "@radix-ui/react-use-size@npm:1.0.0" - dependencies: - "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-use-layout-effect": "npm:1.0.0" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/56a8b2ace55c827ce4ed794bf96798438674ea3b8c805ffd6aa15a98a4884995016a067cf6a2cd2855e00eab387875fbed76c2da0d56e74a8e7f434a0cba96e1 - languageName: node - linkType: hard - "@radix-ui/react-use-size@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-size@npm:1.0.1" @@ -5926,15 +5633,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/rect@npm:1.0.0": - version: 1.0.0 - resolution: "@radix-ui/rect@npm:1.0.0" - dependencies: - "@babel/runtime": "npm:^7.13.10" - checksum: 10c0/22a06c958a5830b5706715c2850e3759219dc4a481d469ec3f65e926661004fcd7114270ada501b1d638ba76e351e13b3b28b1ae665b98b0e51aba78cd38ed8e - languageName: node - linkType: hard - "@radix-ui/rect@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/rect@npm:1.0.1" @@ -6377,14 +6075,14 @@ __metadata: languageName: node linkType: hard -"@sopt-makers/colors@npm:^3.0.0, @sopt-makers/colors@npm:^3.0.2, @sopt-makers/colors@npm:^3.0.3": +"@sopt-makers/colors@npm:^3.0.2, @sopt-makers/colors@npm:^3.0.3": version: 3.0.3 resolution: "@sopt-makers/colors@npm:3.0.3" checksum: 10c0/3611b9f6664eb89f8852f43b68af19d31dcb09ab9353b6e901b38059ce648025fe389581eeafdd680949ee425cdc722837d9a211a367f524a5dbd9cab0956a5b languageName: node linkType: hard -"@sopt-makers/eslint-config@workspace:*, @sopt-makers/eslint-config@workspace:packages/eslint-config": +"@sopt-makers/eslint-config@workspace:^, @sopt-makers/eslint-config@workspace:packages/eslint-config": version: 0.0.0-use.local resolution: "@sopt-makers/eslint-config@workspace:packages/eslint-config" dependencies: @@ -6424,23 +6122,6 @@ __metadata: languageName: node linkType: hard -"@sopt-makers/playground-common@npm:^1.7.3": - version: 1.7.3 - resolution: "@sopt-makers/playground-common@npm:1.7.3" - dependencies: - "@emotion/react": "npm:^11.9.0" - "@emotion/styled": "npm:^11.8.1" - "@radix-ui/react-dialog": "npm:1.0.2" - "@radix-ui/react-dropdown-menu": "npm:2.0.2" - "@sopt-makers/colors": "npm:^3.0.0" - react-remove-scroll: "npm:2.5.5" - peerDependencies: - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - checksum: 10c0/6dec2b38e8102fe5a468e1ad4a38c807c5ab57226f128b18869b175083222906132f6e2fd065105d9dd6ae8b2dd06ebbb57cfb8978f5597dcbd8be9ca6206101 - languageName: node - linkType: hard - "@sopt-makers/ui@npm:2.8.9": version: 2.8.9 resolution: "@sopt-makers/ui@npm:2.8.9" @@ -6479,18 +6160,26 @@ __metadata: languageName: node linkType: hard +"@sopt/constant@workspace:*, @sopt/constant@workspace:packages/constant": + version: 0.0.0-use.local + resolution: "@sopt/constant@workspace:packages/constant" + languageName: unknown + linkType: soft + "@sopt/ui@workspace:*, @sopt/ui@workspace:packages/ui": version: 0.0.0-use.local resolution: "@sopt/ui@workspace:packages/ui" dependencies: "@emotion/react": "npm:^11.9.0" "@emotion/styled": "npm:^11.8.1" + "@radix-ui/react-dialog": "npm:^1.0.2" + "@radix-ui/react-dropdown-menu": "npm:^2.0.6" "@sopt-makers/colors": "npm:^3.0.3" "@sopt-makers/fonts": "npm:^2.0.2" - framer-motion: "npm:^8.1.3" - tsup: "npm:^7.1.0" + "@sopt/constant": "workspace:*" typescript: "npm:^4.9.5" peerDependencies: + next: ">=13.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" languageName: unknown @@ -11688,9 +11377,10 @@ __metadata: "@nanostores/react": "npm:^0.7.1" "@radix-ui/react-dropdown-menu": "npm:^2.1.1" "@sentry/nextjs": "npm:^7.0.0" + "@sopt-makers/eslint-config": "workspace:^" "@sopt-makers/icons": "npm:^1.1.0" - "@sopt-makers/playground-common": "npm:^1.7.3" "@sopt-makers/ui": "npm:^2.10.2" + "@sopt/constant": "workspace:*" "@sopt/ui": "workspace:*" "@stitches/react": "npm:^1.2.8" "@suspensive/react": "npm:^3.10.1" @@ -14246,6 +13936,16 @@ __metadata: languageName: node linkType: hard +"fsevents@npm:2.3.2": + version: 2.3.2 + resolution: "fsevents@npm:2.3.2" + dependencies: + node-gyp: "npm:latest" + checksum: 10c0/be78a3efa3e181cda3cf7a4637cb527bcebb0bd0ea0440105a3bb45b86f9245b307dc10a2507e8f4498a7d4ec349d1910f4d73e4d4495b16103106e07eee735b + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2": version: 2.3.3 resolution: "fsevents@npm:2.3.3" @@ -14256,6 +13956,15 @@ __metadata: languageName: node linkType: hard +"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin": + version: 2.3.2 + resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin::version=2.3.2&hash=df0bf1" + dependencies: + node-gyp: "npm:latest" + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin::version=2.3.3&hash=df0bf1" @@ -19527,9 +19236,11 @@ __metadata: "@radix-ui/react-tabs": "npm:^1.0.2" "@radix-ui/react-tooltip": "npm:^1.0.5" "@sopt-makers/colors": "npm:^3.0.2" + "@sopt-makers/eslint-config": "workspace:^" "@sopt-makers/fonts": "npm:1.0.0" "@sopt-makers/icons": "npm:^1.1.0" "@sopt-makers/ui": "npm:2.8.9" + "@sopt/constant": "workspace:*" "@sopt/ui": "workspace:*" "@storybook/addon-actions": "npm:^7.6.20" "@storybook/addon-docs": "npm:^7.6.20" @@ -19613,7 +19324,6 @@ __metadata: ts-node: "npm:^10.9.1" tsconfig-paths-webpack-plugin: "npm:^3.5.2" tsup: "npm:^7.1.0" - typescript: "npm:^4.9.5" url-loader: "npm:^4.1.1" use-query-params: "npm:^2.2.1" webpack: "npm:^5.72.0" @@ -19622,6 +19332,30 @@ __metadata: languageName: unknown linkType: soft +"playwright-core@npm:1.58.2": + version: 1.58.2 + resolution: "playwright-core@npm:1.58.2" + bin: + playwright-core: cli.js + checksum: 10c0/5aa15b2b764e6ffe738293a09081a6f7023847a0dbf4cd05fe10eed2e25450d321baf7482f938f2d2eb330291e197fa23e57b29a5b552b89927ceb791266225b + languageName: node + linkType: hard + +"playwright@npm:^1.58.2": + version: 1.58.2 + resolution: "playwright@npm:1.58.2" + dependencies: + fsevents: "npm:2.3.2" + playwright-core: "npm:1.58.2" + dependenciesMeta: + fsevents: + optional: true + bin: + playwright: cli.js + checksum: 10c0/d060d9b7cc124bd8b5dffebaab5e84f6b34654a553758fe7b19cc598dfbee93f6ecfbdc1832b40a6380ae04eade86ef3285ba03aa0b136799e83402246dc0727 + languageName: node + linkType: hard + "pnp-webpack-plugin@npm:^1.7.0": version: 1.7.0 resolution: "pnp-webpack-plugin@npm:1.7.0" @@ -21962,7 +21696,6 @@ __metadata: version: 0.0.0-use.local resolution: "sopt-makers-frontend@workspace:." dependencies: - "@sopt-makers/eslint-config": "workspace:*" "@types/node": "npm:18.8.3" "@types/react": "npm:18.0.21" "@types/react-dom": "npm:18.0.6" @@ -21971,6 +21704,7 @@ __metadata: immer: "npm:^10.0.4" lint-staged: "npm:^15.0.0" nanoid: "npm:^4.0.0" + playwright: "npm:^1.58.2" prettier: "npm:^3.8.1" react: "npm:^18.2.0" react-dom: "npm:^18.2.0"