Skip to content

Commit 2ca72da

Browse files
sumi-0011claudesumi
authored
feat: Tailwind UI 패키지 Storybook 환경 구축 (#357)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: sumi <sumi@sumiui-MacBookAir.local>
1 parent f0fc5c4 commit 2ca72da

112 files changed

Lines changed: 1832 additions & 550 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/web/src/app/[locale]/auth/page.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
'use client';
22

33
import { useEffect } from 'react';
4-
import { cn } from '@gitanimals/ui-tailwind';
54
import { setRequestInterceptor, setResponseInterceptor } from '@gitanimals/api';
65
import { setRenderRequestInterceptor, setRenderResponseInterceptor } from '@gitanimals/api/src/_instance';
6+
import { cn } from '@gitanimals/ui-tailwind';
77

88
import {
99
interceptorRequestFulfilled,
@@ -42,7 +42,4 @@ function JWTPage({
4242

4343
export default JWTPage;
4444

45-
const loadingContainerStyle = cn(
46-
'fixed inset-0 bg-white/80 z-loading',
47-
'flex items-center justify-center text-[36px]'
48-
);
45+
const loadingContainerStyle = cn('fixed inset-0 bg-white/80 z-loading', 'flex items-center justify-center text-[36px]');

‎apps/web/src/app/[locale]/dev/token/token.style.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
import { cn } from '@gitanimals/ui-tailwind/utils';
22

3-
export const container = cn('flex flex-col items-center justify-center h-screen bg-white gap-6 [&_h1]:font-product [&_h1]:text-glyph-24 [&_h1]:font-bold');
3+
export const container = cn(
4+
'flex flex-col items-center justify-center h-screen bg-white gap-6 [&_h1]:font-product [&_h1]:text-glyph-24 [&_h1]:font-bold',
5+
);

‎apps/web/src/app/[locale]/event/(common)/BackgroundSection.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
'use client';
33

44
import { useTranslations } from 'next-intl';
5-
import { cn } from '@gitanimals/ui-tailwind';
65
import type { Background } from '@gitanimals/api';
76
import { renderUserQueries, shopQueries, useBuyBackground } from '@gitanimals/react-query';
7+
import { cn } from '@gitanimals/ui-tailwind';
88
import { Button } from '@gitanimals/ui-tailwind';
99
import { wrap } from '@suspensive/react';
1010
import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
@@ -110,23 +110,13 @@ function BackgroundItem({
110110

111111
return (
112112
<div className="w-full flex flex-col items-center justify-center relative" key={item.type}>
113-
<div
114-
className={cn(
115-
'w-full aspect-[2/1] bg-white relative',
116-
isPurchased && 'brightness-50 cursor-not-allowed',
117-
)}
118-
>
113+
<div className={cn('w-full aspect-[2/1] bg-white relative', isPurchased && 'brightness-50 cursor-not-allowed')}>
119114
<img src={getBackgroundImage(item.type)} alt={item.type} width={550} height={275} />
120115
</div>
121116
<div className="font-product text-glyph-18 font-bold text-black-75 border border-[#99C7DB] bg-[#DDF2FB] mt-1 mb-6 py-1 px-[25px] w-full">
122117
{addNumberComma(item.price)} P
123118
</div>
124-
<Button
125-
variant="secondary"
126-
onClick={() => onBuy(item.type)}
127-
disabled={isPurchased}
128-
className="min-w-[120px]"
129-
>
119+
<Button variant="secondary" onClick={() => onBuy(item.type)} disabled={isPurchased} className="min-w-[120px]">
130120
{!isLoggedIn ? t('buy-possible-user') : isPurchased ? t('purchased') : t('buy')}
131121
</Button>
132122
</div>

‎apps/web/src/app/[locale]/event/(common)/BackgroundSlider/Arrow.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export function ArrowButton({
1717
'absolute top-0 bottom-0 my-auto z-floating [&_img]:w-full [&_img]:h-full max-mobile:bottom-[72px]',
1818
direction === 'prev' ? 'left-[-62px] max-mobile:left-[-26px]' : 'right-[-62px] max-mobile:right-[-26px]',
1919
direction === 'prev' ? 'rotate-180' : 'rotate-0',
20-
disabled ? 'cursor-not-allowed w-9 h-9 max-mobile:w-6 max-mobile:h-6' : 'cursor-pointer w-10 h-10 max-mobile:w-[26px] max-mobile:h-[26px]',
20+
disabled
21+
? 'cursor-not-allowed w-9 h-9 max-mobile:w-6 max-mobile:h-6'
22+
: 'cursor-pointer w-10 h-10 max-mobile:w-[26px] max-mobile:h-[26px]',
2123
)}
2224
>
2325
{disabled ? (

‎apps/web/src/app/[locale]/event/(common)/BackgroundSlider/BackgroundSlider.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@ function BackgroundSlider({ children }: { children: React.ReactNode }) {
4949
<ArrowButton onClick={moveToNextPanel} direction="next" disabled={isLastPanel} />
5050
<Flicking ref={flicking} {...sliderOptions}>
5151
{Children.map(children, (child, idx) => (
52-
<div className="w-[calc(50%-10px)] p-[10px] text-center [&_img]:w-full [&_img]:h-auto [&_img]:rounded-lg [&_p]:mt-[10px] [&_p]:text-base" key={idx}>
52+
<div
53+
className="w-[calc(50%-10px)] p-[10px] text-center [&_img]:w-full [&_img]:h-auto [&_img]:rounded-lg [&_p]:mt-[10px] [&_p]:text-base"
54+
key={idx}
55+
>
5356
{child}
5457
</div>
5558
))}

‎apps/web/src/app/[locale]/game/quiz/_components/BackGround.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ export const Background = memo(function Background({ widthBottom }: { widthBotto
77
const imageSrc = widthBottom ? '/assets/game/quiz/quiz-bg.webp' : '/assets/game/quiz/quiz-bg-raw.webp';
88
return (
99
<div className="absolute w-full h-full overflow-hidden -z-[1]">
10-
<Image className="w-full h-full object-cover object-center" src={imageSrc} alt="background" layout="fill" draggable={false} />
10+
<Image
11+
className="w-full h-full object-cover object-center"
12+
src={imageSrc}
13+
alt="background"
14+
layout="fill"
15+
draggable={false}
16+
/>
1117
</div>
1218
);
1319
});

‎apps/web/src/app/[locale]/game/quiz/create/_components/QuizTextArea.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,12 @@ function QuizTextArea({ maxLength = 1000, ...props }: QuizTextAreaProps) {
3636
maxLength={maxLength}
3737
/>
3838
<div className="flex justify-end items-center">
39-
<div className={cn('relative text-white-50 font-product text-glyph-12 font-normal p-[0px_12px_8px_0px]', props.error && 'text-[#FF6B56]')}>
39+
<div
40+
className={cn(
41+
'relative text-white-50 font-product text-glyph-12 font-normal p-[0px_12px_8px_0px]',
42+
props.error && 'text-[#FF6B56]',
43+
)}
44+
>
4045
<strong className="font-normal text-white-50">{inputLen}</strong>
4146
<span>/{maxLength}</span>
4247
</div>

‎apps/web/src/app/[locale]/game/quiz/solve/_components/solving/QuizProgressBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useMemo, useState } from 'react';
2-
import { cn } from '@gitanimals/ui-tailwind/utils';
32
import { dayjs } from '@gitanimals/dayjs';
3+
import { cn } from '@gitanimals/ui-tailwind/utils';
44

55
interface QuizProgressBarProps {
66
onTimeout: () => void;

‎apps/web/src/app/[locale]/guild/(subpage)/[id]/GuildSliderContainer.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import { type PropsWithChildren } from 'react';
44
import Image from 'next/image';
5-
import { cn } from '@gitanimals/ui-tailwind';
65
import { guildQueries } from '@gitanimals/react-query';
6+
import { cn } from '@gitanimals/ui-tailwind';
77
import { wrap } from '@suspensive/react';
88
import { useQuery } from '@tanstack/react-query';
99

@@ -42,35 +42,22 @@ export const GuildSliderContainer = wrap.ErrorBoundary({ fallback: <>{}</> }).on
4242
},
4343
);
4444

45-
const containerStyle = cn(
46-
'w-full h-fit relative'
47-
);
45+
const containerStyle = cn('w-full h-fit relative');
4846

4947
function CarouselButton({ direction, disabled }: { direction: 'left' | 'right'; disabled?: boolean }) {
5048
const imgSrc = disabled ? '/common/carousel-inner-right-disabled.png' : '/common/carousel-inner-right.png';
5149
return (
5250
<button
5351
disabled={disabled}
54-
className={cn(
55-
buttonStyle,
56-
direction === 'left' && leftButtonStyle,
57-
direction === 'right' && rightButtonStyle
58-
)}
52+
className={cn(buttonStyle, direction === 'left' && leftButtonStyle, direction === 'right' && rightButtonStyle)}
5953
>
6054
<Image width={40} height={40} src={imgSrc} alt={direction} />
6155
</button>
6256
);
6357
}
6458

65-
const buttonStyle = cn(
66-
'absolute top-0 bottom-0 m-auto',
67-
'disabled:cursor-not-allowed'
68-
);
59+
const buttonStyle = cn('absolute top-0 bottom-0 m-auto', 'disabled:cursor-not-allowed');
6960

70-
const leftButtonStyle = cn(
71-
'left-[-66px] rotate-180'
72-
);
61+
const leftButtonStyle = cn('left-[-66px] rotate-180');
7362

74-
const rightButtonStyle = cn(
75-
'right-[-66px]'
76-
);
63+
const rightButtonStyle = cn('right-[-66px]');

‎apps/web/src/app/[locale]/guild/(subpage)/[id]/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ const containerStyle = cn(
2424
'relative w-full max-w-[880px] m-auto min-h-full',
2525
'flex flex-col justify-center py-[120px]',
2626
'max-mobile:py-0 max-mobile:min-h-fit',
27-
'max-mobile:h-[calc(100vh-var(--mobile-header-height))] max-mobile:p-4'
27+
'max-mobile:h-[calc(100vh-var(--mobile-header-height))] max-mobile:p-4',
2828
);
2929

3030
const bottomBgStyle = cn(
3131
'absolute w-screen bottom-0 left-1/2 -translate-x-1/2',
3232
'[&_.bg-bottom]:h-[228px] [&_.bg-bottom]:object-cover',
3333
'[&_.bg-bottom-house]:absolute [&_.bg-bottom-house]:bottom-8 [&_.bg-bottom-house]:right-[62px]',
34-
'[&_.bg-bottom-house]:h-[202px] [&_.bg-bottom-house]:w-auto [&_.bg-bottom-house]:object-contain'
34+
'[&_.bg-bottom-house]:h-[202px] [&_.bg-bottom-house]:w-auto [&_.bg-bottom-house]:object-contain',
3535
);

0 commit comments

Comments
 (0)