Merge pull request #25 from causyj/dev/selectframe

[DEV] 프로필 프레임 - 프레임 변경 & 사진 다운로드 구현

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @falconlee236 @1lsang @ldh019 @yymin1022 @causyj

src/app/frame/_components/SelectFrame.tsx

@@ -0,0 +1,21 @@
+import Image from 'next/image';
+import { FrameProps } from '@/interfaces';
+
+export default function SelectFrame({
+  circle,
+  description,
+  onClick,
+}: FrameProps) {
+  return (
+    <button type="button" onClick={onClick} className="cursor-pointer">
+      <Image
+        src={circle}
+        alt={description}
+        width={40}
+        height={40}
+        priority
+        className="relative"
+      />
+    </button>
+  );
+}

src/app/frame/page.tsx

@@ -1,10 +1,100 @@
-import MyButton from '@/components/MyButton';
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import PreviousPage from '@/components/PreviousPage';
+import { BASIC_FRAME_DATA, PREMIUM_FRAME_DATA } from '@/constants';
+import SVGDownload from '@/styles/icons/download.svg';
+import SVGGoToList from '@/styles/icons/gotolist.svg';
+import DownloadImage from '@/utils/DownloadImage';
+import SelectFrame from './_components/SelectFrame';
 
 export default function FrameSelectView() {
+  const [colorOfCircle, setColorOfCircle] = useState<string>('');
+  const [isPremiumSelected, setIsPremiumSelected] = useState<boolean>(false);
+
+  const frametype = isPremiumSelected ? PREMIUM_FRAME_DATA : BASIC_FRAME_DATA;
+  const frameWidth = colorOfCircle === '/premiumframe2.png' ? 283 : 239;
+  const frameHeight = colorOfCircle === '/premiumframe2.png' ? 332 : 290;
+  const imageSrc = '/resultsample.png'; // 생성된 이미지(임시)
+
+  const onCaptureClick = () => {
+    DownloadImage({ colorOfCircle, imageSrc, frameWidth, frameHeight });
+  };
+
   return (
-    <div>
-      <h1>This is 프레임 선택 Page</h1>
-      <MyButton name="다운로드" target="/" />
+    <div className="flex w-full flex-col items-center justify-center">
+      <div className="flex w-full flex-row justify-between px-4">
+        <PreviousPage target="/" />
+        <Link href="/list" className="pr-4">
+          <SVGGoToList />
+        </Link>
+      </div>
+      <h1 className="text-xl">AI 프로필이 완성!</h1>
+      <h2 className="py-1 font-sfpro text-2xs font-bold text-white">
+        사진과 어울리는 프레임을 선택해주세요 😀
+      </h2>
+      <div className="text-2sx mb-6 mt-4 flex h-[35px] w-[183px] flex-row items-center justify-evenly rounded-full bg-white font-sfpro font-bold">
+        <button
+          type="button"
+          onClick={() => setIsPremiumSelected(false)}
+          className={`flex h-[27px] w-[86px] items-center justify-center rounded-full ${isPremiumSelected ? 'bg-white text-primary-middlegray' : 'bg-primary-darkblue text-white'}`}
+        >
+          기본
+        </button>
+        <button
+          type="button"
+          onClick={() => setIsPremiumSelected(true)}
+          className={`flex h-[27px] w-[86px] items-center justify-center rounded-full ${isPremiumSelected ? 'bg-primary-darkblue text-white' : 'bg-white text-primary-middlegray'}`}
+        >
+          프리미엄
+        </button>
+      </div>
+
+      <div
+        className={`relative flex ${colorOfCircle === '/premiumframe2.png' ? 'h-[332px] w-[283px]' : 'h-[290px] w-[239px]'} justify-center`}
+      >
+        <Image
+          src={imageSrc}
+          alt="Sample Image"
+          width={206}
+          height={206}
+          priority
+          className="absolute mt-4"
+        />
+        {colorOfCircle && colorOfCircle !== '' && (
+          <Image
+            src={colorOfCircle}
+            alt="Selected Frame"
+            width={frameWidth}
+            height={frameHeight}
+            priority
+            className={`relative ${colorOfCircle === '/premiumframe2.png' ? '-mt-5 mb-6' : ''}`}
+          />
+        )}
+      </div>
+
+      <div
+        className={`flex flex-row gap-x-2.5 ${colorOfCircle === '/premiumframe2.png' ? '-mt-5 pb-6' : 'py-6'}`}
+      >
+        {Object.entries(frametype).map(([key, frame]) => (
+          <SelectFrame
+            key={key}
+            {...frame}
+            onClick={() => setColorOfCircle(frame.frame)}
+          />
+        ))}
+      </div>
+
+      <button
+        type="button"
+        onClick={onCaptureClick}
+        className="flex h-12 w-full items-center justify-center gap-x-3 rounded-full bg-primary-darkblue text-xl text-white"
+      >
+        <SVGDownload />
+        다운로드
+      </button>
     </div>
   );
 }

src/app/guide/_components/GuideDetail.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { ImageWithDescriptionProps } from '@/interfaces';
+import { GuideDetailProps, ImageWithDescriptionProps } from '@/interfaces';
 import SVGTriangle from '@/styles/icons/triangle.svg';
 
 function ImageWithDescription({ src, description }: ImageWithDescriptionProps) {
@@ -24,14 +24,6 @@ function ImageWithDescription({ src, description }: ImageWithDescriptionProps) {
   );
 }
 
-interface GuideDetailProps {
-  puang: string;
-  title: string;
-  children: React.ReactNode;
-  examples: { id: string; src: string; description: string }[];
-  explanation: React.ReactNode;
-}
-
 export default function GuideDetail({
   puang,
   title,

src/app/waiting/page.tsx

@@ -1,15 +1,21 @@
 'use client';
 
 import Image from 'next/image';
+import { useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import SVGLink from '@/styles/icons/link.svg';
-import { useRef } from 'react';
 
 export default function WaitingView() {
+  const [url, setUrl] = useState<string>('');
   const copyRef = useRef<HTMLButtonElement>(null);
-  const copyToClipboardFunc = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setUrl(window.location.href);
+    }
+  }, []);
+
+  const copyToClipboardFunc = () => {
     if (copyRef.current) {
       copyRef.current.click();
     }
@@ -47,14 +53,21 @@ export default function WaitingView() {
           링크복사
           <SVGLink />
         </button>
-        <CopyToClipboard
-          text={window.location.href}
-          onCopy={() => {
-            alert('클립보드에 복사되었습니다.');
-          }}
-        >
-          <button ref={copyRef} style={{ display: 'none' }} />
-        </CopyToClipboard>
+        {url && (
+          <CopyToClipboard
+            text={url}
+            onCopy={() => {
+              alert('클립보드에 복사되었습니다.');
+            }}
+          >
+            <button
+              type="button"
+              ref={copyRef}
+              style={{ display: 'none' }}
+              aria-label="링크 복사 버튼"
+            />
+          </CopyToClipboard>
+        )}
       </div>
     </div>
   );

src/components/Modal.tsx

@@ -34,7 +34,7 @@ export default function Modal({
       </div>
 
       <div className="flex w-full flex-col">
-        <MyButton target={target} name={button1} />
+        <MyButton target={target} name={button1} enabled />
         <button
           type="button"
           onClick={onClose}

src/constants/frameData.ts

@@ -0,0 +1,72 @@
+type FrameData = {
+  circle: string;
+  description: string;
+  frame: string;
+};
+
+export const BASIC_FRAME_DATA: Record<
+  'frame1' | 'frame2' | 'frame3' | 'frame4' | 'frame5',
+  FrameData
+> = {
+  frame1: {
+    circle: '/basicframecircle1.png',
+    description: '기본 프레임 1-없음',
+    frame: '',
+  },
+  frame2: {
+    circle: '/basicframecircle2.png',
+    description: '기본 프레임 2-흰색',
+    frame: '/basicframe1.png',
+  },
+  frame3: {
+    circle: '/basicframecircle3.png',
+    description: '기본 프레임 3-검은색',
+    frame: '/basicframe2.png',
+  },
+  frame4: {
+    circle: '/basicframecircle4.png',
+    description: '기본 프레임 4-파란색',
+    frame: '/basicframe3.png',
+  },
+  frame5: {
+    circle: '/basicframecircle5.png',
+    description: '기본 프레임 4-핑크색',
+    frame: '/basicframe4.png',
+  },
+};
+
+export const PREMIUM_FRAME_DATA: Record<
+  'frame1' | 'frame2' | 'frame3' | 'frame4' | 'frame5' | 'frame6',
+  FrameData
+> = {
+  frame1: {
+    circle: '/premiumframecircle1.png',
+    description: '기본 프레임 1-푸앙이',
+    frame: '/premiumframe1.png',
+  },
+  frame2: {
+    circle: '/premiumframecircle2.png',
+    description: '기본 프레임 2-체크',
+    frame: '/premiumframe2.png',
+  },
+  frame3: {
+    circle: '/premiumframecircle3.png',
+    description: '기본 프레임 3-darkblue',
+    frame: '/premiumframe3.png',
+  },
+  frame4: {
+    circle: '/premiumframecircle4.png',
+    description: '기본 프레임 4-smile',
+    frame: '/premiumframe4.png',
+  },
+  frame5: {
+    circle: '/premiumframecircle5.png',
+    description: '기본 프레임 4-insta',
+    frame: '/premiumframe5.png',
+  },
+  frame6: {
+    circle: '/premiumframecircle6.png',
+    description: '기본 프레임 4-회색',
+    frame: '/premiumframe6.png',
+  },
+};

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './frameData';

src/interfaces/frame.interface.ts

@@ -0,0 +1,12 @@
+export interface FrameProps {
+  circle: string;
+  description: string;
+  onClick: () => void;
+}
+
+export interface DownloadImageProps {
+  colorOfCircle: string;
+  imageSrc: string;
+  frameWidth: number;
+  frameHeight: number;
+}

src/interfaces/image-with-description.interface.ts

@@ -2,3 +2,10 @@ export interface ImageWithDescriptionProps {
   src: string;
   description: string;
 }
+export interface GuideDetailProps {
+  puang: string;
+  title: string;
+  children: React.ReactNode;
+  examples: { id: string; src: string; description: string }[];
+  explanation: React.ReactNode;
+}

src/interfaces/index.ts

@@ -1,3 +1,4 @@
 export * from './image-with-description.interface';
 export * from './button.interface';
 export * from './modals.interface';
+export * from './frame.interface';