git-goods · sumi-0011 · Nov 3, 2024 · Nov 3, 2024 · Nov 3, 2024 · Nov 8, 2024
@@ -1,6 +1,6 @@
 import { css } from '_panda/css';
 import Nav from './Nav';
-import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
+import { Avatar, AvatarImage } from '@radix-ui/react-avatar';
 
 const PROFILE_IMG = 'https://avatars.githubusercontent.com/u/171903401?s=200&v=4';
 function Header() {
@@ -19,12 +19,12 @@ function Header() {
 export default Header;
 
 const containerStyle = css({
-  h: '16',
+  h: '16px',
   bg: 'background',
   shadow: 'md',
   zIndex: 'sticky',
-  px: 4,
-  py: 3,
+  px: '4px',
+  py: '3px',
 
   display: 'flex',
   alignItems: 'center',

@@ -43,8 +43,8 @@ export default function Example() {
 const listStyle = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: '3',
-  p: '6',
+  gap: '3px',
+  p: '6px',
   md: {
     w: '400px',
   },

@@ -8,5 +8,5 @@ function Main({ children }: PropsWithChildren<{}>) {
 export default Main;
 
 const containerStyle = css({
-  p: 8,
+  p: '8px',
 });
@@ -87,7 +87,7 @@
     "copy-link-success": "Copy success!",
     "line-set-error": "Cannot set more than 1000.",
     "apply-button": "Apply",
-    "customize-size": "Line TypeCustomize Size",
+    "customize-size": "Customize Size",
     "extend-button": "Extend",
     "shrink-button": "Shrink",
     "change-pet": "Change pet",
@@ -102,7 +102,8 @@
     "Merge": {
       "merge": "Merge",
       "merge-result": "Merge result",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "please-choose-pet": "Please choose a pet to use to merge the level. The pet used disappears."
     }
   },
   "Event": {

@@ -89,7 +89,7 @@
     "copy-link-success": "복사 성공!",
     "line-set-error": "1000 이상은 설정할 수 없습니다.",
     "apply-button": "적용하기",
-    "customize-size": "Line Type 사이즈 조정",
+    "customize-size": "Customize Size",
     "extend-button": "확장",
     "shrink-button": "축소",
     "change-pet": "펫 변경",
@@ -104,7 +104,8 @@
     "Merge": {
       "merge": "합치기",
       "merge-result": "합치기 결과",
-      "cancel": "취소"
+      "cancel": "취소",
+      "please-choose-pet": "합치기에 사용할 펫을 선택해주세요. 합친 펫은 사라집니다."
     }
   },
   "Event": {

@@ -26,9 +26,11 @@
     "@gitanimals/util-common": "workspace:*",
     "@next/third-parties": "^14.2.5",
     "@octokit/core": "^6.1.2",
+    "@shadow-panda/style-context": "^0.7.1",
     "@suspensive/react": "^2.17.1",
     "@tanstack/react-query": "*",
     "axios": "^1.6.8",
+    "driver.js": "^1.3.1",
     "framer-motion": "^11.1.7",
     "google-auth-library": "^9.11.0",
     "google-spreadsheet": "^4.1.2",
@@ -51,6 +53,7 @@
     "@gitanimals/util-common": "workspace:*",
     "@next/bundle-analyzer": "^14.2.5",
     "@pandacss/dev": "^0.41.0",
+    "@shadow-panda/preset": "^0.7.1",
     "@storybook/addon-essentials": "^8.0.9",
     "@storybook/addon-interactions": "^8.0.9",
     "@storybook/addon-links": "^8.0.9",

@@ -124,5 +124,5 @@ export default defineConfig({
   outdir: 'styled-system',
 
   // delete default presets
-  presets: [],
+  presets: ['@shadow-panda/preset'],
 });
@@ -1,5 +1,6 @@
 import { css } from '_panda/css';
 import { Box } from '_panda/jsx';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@gitanimals/ui-panda';
 
 import GNB from '@/components/GNB/GNB';
 
@@ -13,6 +14,22 @@ async function DevPage() {
       <hr className={dividerStyle} />
       <h1>client</h1>
       <DevClient />
+      <Accordion type="single" collapsible w="full">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Is it styled?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It comes with default styles that matches the other components&apos; aesthetic.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>Yes. It&apos;s animated by default, but you can disable it if you prefer.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </Box>
   );
 }

@@ -79,7 +79,7 @@ const imageStyle = css({
   zIndex: 1,
   minHeight: 'calc(100vh - 60px)',
   pointerEvents: 'none',
-  top: -60,
+  top: '-60px',
   _mobile: {
     display: 'none',
   },

@@ -129,16 +129,16 @@ const logoImageStyle = css({
 });
 
 const descriptionStyle = css({
-  marginTop: 24,
-  fontSize: 28,
-  lineHeight: 1.5,
+  marginTop: '24px',
+  fontSize: '28px',
+  lineHeight: '1.5',
   textAlign: 'center',
   color: '#fff',
-  mb: 40,
+  mb: '40px',
   whiteSpace: 'pre-line',
   fontWeight: 600,
 
   _mobile: {
-    fontSize: 24,
+    fontSize: '24px',
   },
 });
@@ -67,7 +67,7 @@ function AnimalCardContainer() {
 export default AnimalCardContainer;
 
 const container = grid({
-  gap: 20,
+  gap: '20px',
   justifyContent: 'center',
   gridTemplateColumns: 'repeat(4, 1fr)',
   width: '1120px',

@@ -35,7 +35,7 @@ export const showMobile = css({
 });
 
 export const cardContainer = grid({
-  gap: 20,
+  gap: '20px',
   justifyContent: 'center',
   gridTemplateColumns: 'repeat(4, 1fr)',
   gridTemplateRows: 'repeat(3, 1fr)',

@@ -12,7 +12,7 @@ export const footer = css({
 
   _mobile: {
     padding: '80px 16px',
-    gap: 60,
+    gap: '60px',
   },
 });
 
@@ -24,7 +24,7 @@ export const article = css({
 
   _mobile: {
     flexDir: 'column',
-    gap: 24,
+    gap: '24px',
   },
 });
 
@@ -45,11 +45,11 @@ const defaultContentWrapper: SystemStyleObject = {
 
 export const teamContentWrapper = css(defaultContentWrapper, {
   display: 'flex',
-  gap: 12,
+  gap: '12px',
 
   _mobile: {
     flexDir: 'column',
-    gap: 16,
+    gap: '16px',
   },
 });
 
@@ -61,24 +61,24 @@ export const repoContentWrapper = css(defaultContentWrapper, {
 
 export const repoLi = css({
   display: 'flex',
-  gap: 8,
+  gap: '8px',
 
   _mobile: {
     flexDir: 'column',
-    gap: 1,
+    gap: '1px',
   },
 });
 
 export const repoLiTitle = css({
   display: 'flex',
   alignItems: 'center',
-  gap: 8,
-  width: 226,
+  gap: '8px',
+  width: '226px',
   textStyle: 'glyph18.bold',
 
   _mobile: {
     textStyle: 'glyph15.bold',
-    gap: 17,
+    gap: '17px',
   },
 });
 
@@ -89,6 +89,6 @@ export const repoLiLink = css({
 
   _mobile: {
     textStyle: 'glyph12.regular',
-    marginLeft: 37,
+    marginLeft: '37px',
   },
 });
@@ -8,17 +8,17 @@ export const wrapperCss = css({
   _mobile: {
     width: '100%',
     flexDir: 'row',
-    gap: 5,
+    gap: '5px',
   },
 });
 
 export const imageCss = css({
-  marginBottom: 8,
+  marginBottom: '8px',
 
   _mobile: {
-    width: 32,
-    height: 24,
-    marginBottom: 0,
+    width: '32px',
+    height: '24px',
+    marginBottom: '0px',
     objectFit: 'contain',
     objectPosition: 'left 50%',
   },
@@ -32,16 +32,16 @@ export const textWrapperCss = css({
 export const nicknameWrapperCss = css({
   display: 'flex',
   alignItems: 'center',
-  gap: 5,
-  marginBottom: 4,
+  gap: '5px',
+  marginBottom: '4px',
 
   '& span': {
     textStyle: 'glyph18.bold',
     color: 'white.white_90',
   },
 
   _mobile: {
-    marginBottom: 1,
+    marginBottom: '1px',
     '& span': {
       textStyle: 'glyph15.bold',
       fontWeight: 'bold',

@@ -80,7 +80,7 @@ const backgroundListStyle = cx(
     width: 'fit-content',
     display: 'flex',
     flexWrap: 'nowrap',
-    gap: 4,
+    gap: '4px',
   }),
 );
 
@@ -93,8 +93,8 @@ const backgroundContainerStyle = cx(
 
 const backgroundItemStyle = css({
   border: '1px solid transparent',
-  width: 248,
-  borderRadius: 8,
+  width: '248px',
+  borderRadius: '8px',
   overflow: 'hidden',
 });