Merge pull request #370 from depromeet/develop

배포용 pr

Author: woobottle

public/assets/character-by-level/default/1.png

@@ -1,8 +1,8 @@
-import LevelProgressBar from '@/app/result/LevelStatus/LevelProgressBar';
 import Banner from '@/components/Banner/Banner';
 import Icon from '@/components/Icon';
+import LevelProgressBar from '@/components/LevelStatus/LevelProgressBar';
 import Thumbnail from '@/components/Thumbnail/Thumbnail';
-import { gradientTextCss } from '@/constants/style';
+import { gradientTextCss } from '@/constants/style/text';
 import { css, cx } from '@styled-system/css';
 import { flex } from '@styled-system/patterns';
 

public/assets/character-by-level/default/2.png

@@ -0,0 +1,89 @@
+import Image from 'next/image';
+import { css, cx } from '@/styled-system/css';
+
+interface Props {
+  width: number;
+  height: number;
+  level: number;
+  isLocked?: boolean;
+  isBackground?: boolean;
+}
+
+function Character(props: Props) {
+  return (
+    <div
+      key={props.level}
+      className={cx(
+        imageWrapperCss,
+        css({
+          width: props.width,
+          height: props.height,
+        }),
+      )}
+    >
+      {props.isLocked ? (
+        <>
+          <Image
+            src={`/assets/character-by-level/locked/${props.level}.svg`}
+            alt="locked"
+            width={props.width}
+            height={props.height}
+            className={imageCss}
+          />
+          <Image
+            src={`/assets/character-by-level/locked/lock.svg`}
+            alt="locked"
+            width={180}
+            height={180}
+            className={imageCss}
+          />
+        </>
+      ) : (
+        <>
+          {props.isBackground && (
+            <Image
+              src="/assets/level/level-guide-bg.svg"
+              alt={'guide bg'}
+              width={375}
+              height={382}
+              className={cx(imageCss, characterImageBgCss)}
+            />
+          )}
+          <Image
+            src={`/assets/character-by-level/default/${props.level}.png`}
+            width={props.width}
+            height={props.height}
+            alt="10mm character image"
+            className={imageCss}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Character;
+
+const imageWrapperCss = css({
+  position: 'relative',
+  margin: '0 auto',
+  animation: 'fadeIn .7s',
+  height: '100%',
+});
+
+const imageCss = css({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  margin: 'auto',
+  animation: 'fadeIn .7s',
+});
+
+const characterImageBgCss = css({
+  left: '50%',
+  transform: 'translateX(-50%)',
+  minWidth: '375px',
+  minHeight: '382px',
+});

public/assets/character-by-level/default/3.png

@@ -0,0 +1,135 @@
+import Character from '@/app/level/guide/Character';
+import Icon from '@/components/Icon';
+import { LEVEL_SYSTEM, type LevelSystemType } from '@/constants/level';
+import { gradientTextCss } from '@/constants/style/text';
+import { css, cva } from '@/styled-system/css';
+import { center, flex } from '@/styled-system/patterns';
+
+function GrowthLevel({
+  selectLevel,
+  maxLevel,
+  onClick,
+}: {
+  selectLevel: number;
+  onClick: (level: number) => void;
+  maxLevel: number;
+}) {
+  return (
+    <>
+      <h2 className={headingCss}>성장 레벨</h2>
+      <div className={containerCss}>
+        <ul className={listContainerCss}>
+          {LEVEL_SYSTEM.map((level, idx) => {
+            const isLocked = maxLevel <= idx;
+            return (
+              <GrowthLevelItem
+                key={level.label}
+                {...level}
+                isSelected={selectLevel === level.level}
+                isLocked={isLocked}
+                onClick={() => onClick(level.level)}
+              />
+            );
+          })}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+export default GrowthLevel;
+
+const headingCss = css({
+  color: 'gray.gray800',
+  textStyle: 'subtitle2',
+  padding: '0 16px',
+});
+
+const containerCss = css({
+  overflowY: 'auto',
+  position: 'relative',
+
+  '&::-webkit-scrollbar': {
+    width: '2px',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    width: '2px',
+    borderRadius: '5px',
+    backgroundColor: 'bg.surface3',
+  },
+  '&::-webkit-scrollbar-track': {
+    width: '2px',
+  },
+});
+
+const listContainerCss = flex({
+  gap: '14px',
+  padding: '12px 16px',
+  width: 'fit-content',
+});
+
+interface GrowthLevelItemProps extends Pick<LevelSystemType, 'level' | 'min' | 'max' | 'imageUrl' | 'isFinal'> {
+  isSelected: boolean;
+  isLocked: boolean;
+  onClick: () => void;
+}
+
+function GrowthLevelItem(props: GrowthLevelItemProps) {
+  return (
+    <li className={itemContainerRecipe({ selected: props.isSelected })} onClick={props.onClick}>
+      <p className={levelLabelCss}>{props.level}</p>
+      <div className={imageWrapperCss}>
+        <Character width={76} height={56.8} level={props.level} isLocked={props.isLocked} />
+      </div>
+      <div className={stackTextCss}>
+        <Icon name={props.isLocked ? '10mm-symbol-circle-lock' : '10mm-symbol-circle'} />
+        <p className={gradientTextCss}>
+          {props.min}~{props.max}
+        </p>
+      </div>
+    </li>
+  );
+}
+
+const levelLabelCss = css({
+  color: 'text.secondary',
+  textStyle: 'subtitle4',
+});
+
+const itemContainerRecipe = cva({
+  base: {
+    borderRadius: '22px',
+    flexDirection: 'column',
+    padding: '14px 16px',
+    width: '116px !',
+    height: '163px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    cursor: 'pointer',
+  },
+  variants: {
+    selected: {
+      true: {
+        border: '1px solid var(--gradient-primary, #FAD0DE)', //TODO : 수정
+        background: 'linear-gradient(93deg, rgba(25, 23, 27, 0.80) 0.82%, rgba(24, 25, 33, 0.80) 99.97%)',
+        boxShadow: '0px 5px 50px 4px rgba(92, 78, 122, 0.50) inset, 0px 4px 20px 0px rgba(16, 15, 23, 0.20)',
+        backdropBlur: 'blur(20px)',
+      },
+      false: {
+        backgroundColor: 'bg.surface3',
+      },
+    },
+  },
+});
+
+const imageWrapperCss = center({
+  flex: 1,
+});
+
+const stackTextCss = flex({
+  width: 'fit-content',
+  gap: '2px',
+  alignItems: 'center',
+  textStyle: 'body1',
+});

public/assets/character-by-level/default/4.png

@@ -0,0 +1,18 @@
+import { type PropsWithChildren } from 'react';
+import Header from '@/components/Header/Header';
+import { css } from '@/styled-system/css';
+
+function LevelGuideLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header rightAction="none" title="내 레벨" />
+      <main className={containerCss}>{children}</main>
+    </>
+  );
+}
+
+export default LevelGuideLayout;
+
+const containerCss = css({
+  minHeight: '720px',
+});