회원가입 icon 정리리

app/myinfo/page.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import LoginPage from '../login/page';
+
+const imgImage2 = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
+const imgLine2 = "http://localhost:3845/assets/6ee8cf4ebb6bc2adb14aab8c9940b3002c20af35.svg";
+
+export default function MyLecturePage() {
+  const router = useRouter();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // 로그인 상태 확인
+    const loginStatus = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loginStatus);
+    setIsLoading(false);
+  }, []);
+
+  if (isLoading) {
+    return null; // 로딩 중
+  }
+
+  // 로그인되지 않았으면 로그인 페이지 표시
+  if (!isLoggedIn) {
+    return <LoginPage />;
+  }
+
+  return (
+    <div className="bg-white relative min-h-screen w-full">
+      {/* 헤더 */}
+      <header className="absolute content-stretch flex items-center justify-between left-[calc(12.5%+91px)] top-[43px] w-[1332px]">
+        <div className="content-stretch flex gap-[99px] items-center relative shrink-0">
+          {/* 로고 */}
+          <div className="h-[74px] relative shrink-0 w-[72px]">
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+              <img alt="" className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]" src={imgImage2} />
+            </div>
+          </div>
+          {/* 메뉴 */}
+          <div className="content-stretch flex gap-[24px] items-center relative shrink-0">
+            <div className="content-stretch flex gap-[150px] items-center relative shrink-0">
+              <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre">
+                  교육 과정 목록
+                </p>
+              </div>
+            </div>
+            <div className="content-stretch flex gap-[150px] items-center relative shrink-0">
+              <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre">
+                  학습 자료실
+                </p>
+              </div>
+            </div>
+            <div className="content-stretch flex gap-[150px] items-center relative shrink-0">
+              <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre">
+                  공지사항
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* 사용자 메뉴 */}
+        <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
+          <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+            <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#1669ca] text-[18px] text-nowrap whitespace-pre">
+              내 강좌실
+            </p>
+          </div>
+          <button
+            onClick={() => {
+              localStorage.removeItem('isLoggedIn');
+              setIsLoggedIn(false);
+              router.push('/');
+            }}
+            className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
+          >
+            <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
+              로그아웃
+            </p>
+          </button>
+        </div>
+      </header>
+
+      {/* 구분선 */}
+      <div className="absolute h-0 left-1/2 top-[150px] translate-x-[-50%] w-full">
+        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
+          <img alt="" className="block max-w-none size-full" src={imgLine2} />
+        </div>
+      </div>
+
+      {/* 사이드바 */}
+      <div className="absolute box-border content-stretch flex flex-col items-center left-[37px] pb-0 pt-4 px-0 top-[192px] w-[250px]">
+        <div className="box-border content-stretch flex flex-col gap-2 items-start p-3 relative shrink-0 w-full">
+          <button
+            onClick={() => router.push('/mylecture')}
+            className="bg-[#f7f7f7] box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer"
+          >
+            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
+              <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
+                내 정보 수정
+              </p>
+            </div>
+          </button>
+          <button
+            onClick={() => router.push('/mylecture')}
+            className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer"
+          >
+            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
+              <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
+                내 강좌실
+              </p>
+            </div>
+          </button>
+          <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer">
+            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
+              <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
+                학습 결과
+              </p>
+            </div>
+          </button>
+          <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer">
+            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
+              <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
+                수강 캘린더
+              </p>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* 메인 콘텐츠 - 내 정보 수정 */}
+      <div className="absolute content-stretch flex flex-col gap-6 items-start left-[calc(31.25%+35px)] top-[243px] w-[784px]">
+        <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-full">
+          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[#1d1d1d] text-nowrap">
+            <p className="leading-[1.6] whitespace-pre">내 정보 수정</p>
+          </div>
+        </div>
+        <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0">
+          {/* 아이디 */}
+          <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0 w-[789px]">
+            <div className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[138px] items-center justify-center p-5 relative rounded-2xl shrink-0 w-full">
+              <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[14px] text-[#515151] text-nowrap whitespace-pre">
+                아이디
+              </p>
+              <div className="flex flex-row items-center self-stretch">
+                <div className="bg-white box-border content-stretch flex gap-[10px] h-full items-center overflow-clip px-2 py-[10px] relative rounded-lg shrink-0 w-[559px]">
+                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[#b9b9b9] text-[14px] text-nowrap">
+                    qwer1234@naver.com
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* 비밀번호 변경 */}
+          <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0 w-[789px]">
+            <div className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[109px] items-center p-5 relative rounded-2xl shrink-0 w-full">
+              <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[14px] text-[#515151] text-nowrap whitespace-pre">
+                비밀번호 변경
+              </p>
+              <div className="box-border content-stretch flex gap-2 items-center px-0 py-[9px] relative shrink-0">
+                <button className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] items-center justify-center px-2 py-1 relative rounded-md shrink-0 w-[256px] cursor-pointer hover:bg-gray-50 transition-colors">
+                  <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[14px] text-black text-center text-nowrap whitespace-pre">
+                    비밀번호 변경
+                  </p>
+                </button>
+              </div>
+            </div>
+          </div>
+          {/* 회원 탈퇴 */}
+          <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0 w-[789px]">
+            <div className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[109px] items-center p-5 relative rounded-2xl shrink-0 w-full">
+              <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[14px] text-[#515151] w-[77px]">
+                회원 탈퇴
+              </p>
+              <div className="box-border content-stretch flex gap-2 items-center px-0 py-[9px] relative shrink-0">
+                <button className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] items-center justify-center px-2 py-1 relative rounded-md shrink-0 w-[256px] cursor-pointer hover:bg-gray-50 transition-colors">
+                  <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[14px] text-black text-center text-nowrap whitespace-pre">
+                    탈퇴하기
+                  </p>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 푸터 */}
+      <footer className="absolute bg-[#f7f7f7] box-border content-stretch flex flex-col gap-[10px] h-[225px] items-start left-0 px-[243px] py-[39px] top-[854px] w-full">
+        <div className="content-stretch flex gap-[49px] items-center relative shrink-0">
+          {/* 로고 */}
+          <div className="h-[74px] relative shrink-0 w-[72px]">
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+              <img alt="" className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]" src={imgImage2} />
+            </div>
+          </div>
+          {/* 푸터 정보 */}
+          <div className="content-stretch flex flex-col gap-[5px] items-start relative shrink-0 w-[479px]">
+            <div className="content-stretch flex gap-[27px] items-center relative shrink-0 w-full">
+              <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
+                  이용 약관
+                </p>
+              </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
+                  개인정보처리방침
+                </p>
+              </div>
+              <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
+                  고객센터
+                </p>
+              </div>
+            </div>
+            <div className="box-border content-stretch flex flex-col font-medium gap-[10px] items-center justify-center leading-[normal] not-italic p-[10px] relative shrink-0 text-[#515151] text-[16px]">
+              <p className="relative shrink-0 w-[400px]">
+                (12345) 서울특별시 광진구 구의동 123-12(구의타워1)
+              </p>
+              <p className="relative shrink-0 w-[400px]">
+                문의: 1234-1234 (평일 09:00 ~ 18:00)
+              </p>
+              <p className="relative shrink-0 w-[400px]">
+                이메일: qwer1234@go.or.kr
+              </p>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+

app/page.tsx

@@ -104,7 +104,10 @@ export default function HomePage() {
         </div>
         {/* 사용자 메뉴 */}
         <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
-          <button className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors">
+          <button
+            onClick={() => router.push('/myinfo')}
+            className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
+          >
             <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
               내 강좌실
             </p>

app/register/page.tsx

@@ -3,6 +3,10 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import RadioOff from '../../public/svg/radio_off';
+import RadioOn from '../../public/svg/radio_on';
+import CheckOff from '../../public/svg/check_off';
+import CheckOn from '../../public/svg/check_on';
 
 const imgRiCheckboxCircleLine = "http://localhost:3845/assets/e4c498605e2559d2764a3112ae9a9019e6ad798e.svg";
 const imgFormkitRadio = "http://localhost:3845/assets/ea30a9a80d95ced4bfb1174d3a8475a4a1dbbabb.svg";
@@ -408,11 +412,7 @@ export default function RegisterPage() {
                 className="flex items-center gap-[10px]"
                 onClick={() => handleGenderChange('male')}
               >
-                <img
+                {formData.gender === 'male' ? <RadioOn /> : <RadioOff />}
-                  src={formData.gender === 'male' ? imgFormkitRadio : imgAkarIconsRadio}
-                  alt=""
-                  className="w-[24px] h-[24px]"
-                />
                 <span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
                   남성
                 </span>
@@ -422,11 +422,7 @@ export default function RegisterPage() {
                 className="flex items-center gap-[10px]"
                 onClick={() => handleGenderChange('female')}
               >
-                <img
+                {formData.gender === 'female' ? <RadioOn /> : <RadioOff />}
-                  src={formData.gender === 'female' ? imgFormkitRadio : imgAkarIconsRadio}
-                  alt=""
-                  className="w-[24px] h-[24px]"
-                />
                 <span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
                   여성
                 </span>
@@ -508,11 +504,7 @@ export default function RegisterPage() {
             className="flex items-center gap-[16px] cursor-pointer select-none mb-[17px]"
             onClick={() => handleAgreementChange('all')}
           >
-            <img
+            {agreements.all ? <CheckOn /> : <CheckOff />}
-              src={imgRiCheckboxCircleLine}
-              alt=""
-              className={`w-[24px] h-[24px] ${agreements.all ? 'opacity-100' : 'opacity-50'}`}
-            />
             <span className="font-bold text-[20px] text-[#515151]">
               모든 항목에 동의합니다.
             </span>
@@ -522,11 +514,7 @@ export default function RegisterPage() {
           <div className="flex flex-col gap-[17px]">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('age14')}>
-                <img
+                {agreements.age14 ? <CheckOn /> : <CheckOff />}
-                  src={imgRiCheckboxCircleLine}
-                  alt=""
-                  className={`w-[24px] h-[24px] ${agreements.age14 ? 'opacity-100' : 'opacity-50'}`}
-                />
                 <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
                   만 14세 이상입니다. (필수)
                 </span>
@@ -540,11 +528,7 @@ export default function RegisterPage() {
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('terms')}>
-                <img
+                {agreements.terms ? <CheckOn /> : <CheckOff />}
-                  src={imgRiCheckboxCircleLine}
-                  alt=""
-                  className={`w-[24px] h-[24px] ${agreements.terms ? 'opacity-100' : 'opacity-50'}`}
-                />
                 <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
                   이용 약관 동의 (필수)
                 </span>
@@ -558,11 +542,7 @@ export default function RegisterPage() {
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
-                <img
+                {agreements.privacy ? <CheckOn /> : <CheckOff />}
-                  src={imgRiCheckboxCircleLine}
-                  alt=""
-                  className={`w-[24px] h-[24px] ${agreements.privacy ? 'opacity-100' : 'opacity-50'}`}
-                />
                 <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
                   개인정보 수집 및 이용 동의 (필수)
                 </span>

public/svg/check_off.tsx

@@ -0,0 +1,7 @@
+export default function CheckOff() {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84285 9.87827 4 12 4C14.1217 4 16.1566 4.84285 17.6569 6.34315C19.1571 7.84344 20 9.87827 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84285 16.1566 4 14.1217 4 12ZM12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2Z" fill="#2C83E8" />
+        </svg>
+    );
+}

public/svg/check_on.tsx

@@ -0,0 +1,7 @@
+export default function CheckOn() {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84285 9.87827 4 12 4C14.1217 4 16.1566 4.84285 17.6569 6.34315C19.1571 7.84344 20 9.87827 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84285 16.1566 4 14.1217 4 12ZM12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM17.457 9.457L16.043 8.043L11 13.086L8.207 10.293L6.793 11.707L11 15.914L17.457 9.457Z" fill="#2B82E8" />
+        </svg>
+    );
+}

public/svg/radio_off.tsx

@@ -0,0 +1,7 @@
+export default function RadioOff() {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.3869 21 12 21C9.61305 21 7.32387 20.0518 5.63604 18.364C3.94821 16.6761 3 14.3869 3 12Z" stroke="#969696" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    );
+}

public/svg/radio_on.tsx

@@ -0,0 +1,8 @@
+export default function RadioOn() {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 22.5C6.21 22.5 1.5 17.79 1.5 12C1.5 6.21 6.21 1.5 12 1.5C17.79 1.5 22.5 6.21 22.5 12C22.5 17.79 17.79 22.5 12 22.5ZM12 3C7.035 3 3 7.035 3 12C3 16.965 7.035 21 12 21C16.965 21 21 16.965 21 12C21 7.035 16.965 3 12 3Z" fill="#404040" />
+            <path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="#404040" />
+        </svg>
+    );
+}